fix: fix darkModeSwitch switch failure

Vben
1 parent c5f2577f
Showing 6 changed files with 48 additions and 78 deletions
src/components/Application/src/AppDarkModeToggle.vue
src/components/CountDown/index.ts
src/components/CountDown/src/CountButton.vue
src/components/CountDown/src/CountdownInput.vue
src/components/registerGlobComp.ts
src/views/dashboard/analysis/components/VisitAnalysis.vue
@@ -6,7 +6,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, computed } from 'vue';
+  import { defineComponent, computed, unref } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
@@ -26,7 +26,7 @@
       const getClass = computed(() => [
         prefixCls,
         {
-          [`${prefixCls}--dark`]: isDark,
+          [`${prefixCls}--dark`]: unref(isDark),
         },
       ]);
  
-import CountButton from './src/CountButton.vue';
-import CountdownInput from './src/CountdownInput.vue';
+import { withInstall } from '/@/utils';
+import countButton from './src/CountButton.vue';
+import countdownInput from './src/CountdownInput.vue';
  
-export { CountdownInput, CountButton };
+export const CountdownInput = withInstall(countdownInput);
+export const CountButton = withInstall(countButton);
 <template>
   <Button v-bind="$attrs" :disabled="isStart" @click="handleStart" :loading="loading">
-    {{
-      !isStart
-        ? t('component.countdown.normalText')
-        : t('component.countdown.sendText', [currentCount])
-    }}
+    {{ getButtonText }}
   </Button>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, PropType, watchEffect } from 'vue';
-
+  import { defineComponent, ref, watchEffect, computed, unref } from 'vue';
   import { Button } from 'ant-design-vue';
-
   import { useCountdown } from './useCountdown';
   import { isFunction } from '/@/utils/is';
   import { useI18n } from '/@/hooks/web/useI18n';
-  import { propTypes } from '/@/utils/propTypes';
+
+  const props = {
+    value: { type: [Object, Number, String, Array] },
+    count: { type: Number, default: 60 },
+    beforeStartFunc: {
+      type: Function as PropType<() => Promise<boolean>>,
+      default: null,
+    },
+  };
  
   export default defineComponent({
     name: 'CountButton',
     components: { Button },
-    props: {
-      value: propTypes.any,
-      count: propTypes.number.def(60),
-      beforeStartFunc: {
-        type: Function as PropType<() => boolean>,
-        default: null,
-      },
-    },
+    props,
     setup(props) {
       const loading = ref(false);
  
       const { currentCount, isStart, start, reset } = useCountdown(props.count);
       const { t } = useI18n();
  
+      const getButtonText = computed(() => {
+        return !unref(isStart)
+          ? t('component.countdown.normalText')
+          : t('component.countdown.sendText', [unref(currentCount)]);
+      });
+
       watchEffect(() => {
         props.value === undefined && reset();
       });
+
       /**
        * @description: Judge whether there is an external function before execution, and decide whether to start after execution
        */
@@ -54,7 +56,7 @@
           start();
         }
       }
-      return { handleStart, isStart, currentCount, loading, t };
+      return { handleStart, currentCount, loading, getButtonText, isStart };
     },
   });
 </script>
@@ -7,31 +7,30 @@
 </template>
 <script lang="ts">
   import { defineComponent, PropType } from 'vue';
-
   import { Input } from 'ant-design-vue';
   import CountButton from './CountButton.vue';
-
-  import { propTypes } from '/@/utils/propTypes';
   import { useDesign } from '/@/hooks/web/useDesign';
-
   import { useRuleFormItem } from '/@/hooks/component/useFormItem';
  
+  const props = {
+    value: { type: String },
+    size: { type: String, validator: (v) => ['default', 'large', 'small'].includes(v) },
+    count: { type: Number, default: 60 },
+    sendCodeApi: {
+      type: Function as PropType<() => Promise<boolean>>,
+      default: null,
+    },
+  };
+
   export default defineComponent({
     name: 'CountDownInput',
     components: { [Input.name]: Input, CountButton },
     inheritAttrs: false,
-    props: {
-      value: propTypes.string,
-      size: propTypes.oneOf(['default', 'large', 'small']),
-      count: propTypes.number.def(60),
-      sendCodeApi: {
-        type: Function as PropType<() => boolean>,
-        default: null,
-      },
-    },
+    props,
     setup(props) {
       const { prefixCls } = useDesign('countdown-input');
       const [state] = useRuleFormItem(props);
+
       return { prefixCls, state };
     },
   });
-import Icon from './Icon/index';
+import { Icon } from './Icon';
 import { Button } from './Button';
 import {
   // Need
   Button as AntButton,
+  Input,
 } from 'ant-design-vue';
  
 import { App } from 'vue';
  
-const compList = [Icon, Button, AntButton.Group];
+const compList = [Icon, AntButton.Group];
  
 export function registerGlobComp(app: App) {
   compList.forEach((comp: any) => {
     app.component(comp.name || comp.displayName, comp);
   });
+
+  app.use(Input).use(Button);
 }
@@ -80,26 +80,8 @@
             {
               smooth: true,
               data: [
-                111,
-                222,
-                4000,
-                18000,
-                33333,
-                55555,
-                66666,
-                33333,
-                14000,
-                36000,
-                66666,
-                44444,
-                22222,
-                11111,
-                4000,
-                2000,
-                500,
-                333,
-                222,
-                111,
+                111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444,
+                22222, 11111, 4000, 2000, 500, 333, 222, 111,
               ],
               type: 'line',
               areaStyle: {},
@@ -110,26 +92,8 @@
             {
               smooth: true,
               data: [
-                33,
-                66,
-                88,
-                333,
-                3333,
-                5000,
-                18000,
-                3000,
-                1200,
-                13000,
-                22000,
-                11000,
-                2221,
-                1201,
-                390,
-                198,
-                60,
-                30,
-                22,
-                11,
+                33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201,
+                390, 198, 60, 30, 22, 11,
               ],
               type: 'line',
               areaStyle: {},