pref(copy): instead Vue3 Clipboard to Vue Use Tools

package.json

@@ -13,13 +13,13 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/vue-fontawesome": "^3.0.1",
     "@nutui/nutui": "^3.1.23-beta.1",
+    "@vueuse/core": "^8.9.2",
     "axios": "^0.27.2",
     "dayjs": "^1.11.3",
     "modern-css-reset": "^1.4.0",
     "monaco-editor": "^0.33.0",
     "pinia": "^2.0.14",
     "vue": "^3.2.37",
-    "vue-clipboard3": "^2.0.0",
     "vue-i18n": "^9.2.0-beta.36",
     "vue-router": "^4.0.16",
     "vuedraggable": "^4.1.0"

src/App.vue

@@ -7,14 +7,14 @@
 
 <script setup lang="ts">
   import NavBar from '@/components/NavBar.vue';
-  import { setColorThemeClass } from '@/utils/setColorThemeClass';
   import { onMounted, watchEffect, ref } from 'vue';
   import { useGlobalStore } from '@/store/global';
   import { useI18n } from 'vue-i18n';
   import { initStores } from '@/utils/initApp';
   import { storeToRefs } from 'pinia';
   import { useSubsStore } from '@/store/subs';
   import { getFlowsUrlList } from '@/utils/getFlowsUrlList';
+  import { useDark } from '@vueuse/core';
 
   const { t } = useI18n();
 
@@ -31,7 +31,12 @@
   globalStore.setBottomSafeArea(navigator.standalone ? 32 : 6);
 
   // 初始化颜色主题
-  setColorThemeClass();
+  useDark({
+    selector: 'body',
+    attribute: 'class',
+    valueDark: 'dark-mode',
+    valueLight: 'light-mode',
+  });
 
   // 引入 inoBounce 禁止过度滑动橡皮筋效果
   onMounted(() => {

src/components/ArtifactsListItem.vue

@@ -102,10 +102,10 @@
   import { useArtifactsStore } from '@/store/artifacts';
   import { Dialog, Toast, Notify } from '@nutui/nutui';
   import { butifyDate } from '@/utils/butifyDate';
-  import useClipboard from 'vue-clipboard3';
   import { storeToRefs } from 'pinia';
+  import { useClipboard } from '@vueuse/core';
 
-  const { toClipboard } = useClipboard();
+  const { copy } = useClipboard();
 
   const { t } = useI18n();
 
@@ -214,17 +214,11 @@
     }
   };
 
-  const onClickCopyLink = async () => {
-    try {
-      await toClipboard(artifact.value.url);
-      Notify.success(t('syncPage.copyNotify.succeed'), {
-        duration: 1500,
-      });
-    } catch (e) {
-      Notify.danger(t('syncPage.copyNotify.succeed', { e }), {
-        duration: 1500,
-      });
-    }
+  const onClickCopyLink = () => {
+    copy(encodeURI(artifact.value.url));
+    Notify.success(t('syncPage.copyNotify.succeed'), {
+      duration: 1500,
+    });
   };
 
   const onDeleteConfirm = async () => {

src/components/SubListItem.vue

@@ -92,19 +92,19 @@
   import PreviewPanel from '@/components/PreviewPanel.vue';
   import icon from '@/assets/icons/logo.svg';
   import { isMobile } from '@/utils/isMobile';
-  import { Dialog, Notify, Toast } from '@nutui/nutui';
+  import { Dialog, Toast, Notify } from '@nutui/nutui';
   import dayjs from 'dayjs';
   import { createVNode, ref, computed, toRaw } from 'vue';
   import { useRouter } from 'vue-router';
-  import useClipboard from 'vue-clipboard3';
   import { useSubsStore } from '@/store/subs';
   import { storeToRefs } from 'pinia';
   import { useGlobalStore } from '@/store/global';
   import { getString } from '@/utils/flowTransfer';
   import { useI18n } from 'vue-i18n';
   import { useSubsApi } from '@/api/subs';
+  import { useClipboard } from '@vueuse/core';
 
-  const { toClipboard } = useClipboard();
+  const { copy } = useClipboard();
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -261,22 +261,15 @@
     });
   };
 
-  const onClickCopyLink = async () => {
-    try {
-      const host = import.meta.env.VITE_API_URL;
-      const url = `${host}/download/${
-        props.type === 'collection' ? 'collection/' : ''
-      }${name}`;
-      await toClipboard(encodeURI(url));
-      Notify.success(t('subPage.copyNotify.succeed'), {
-        duration: 1500,
-      });
-    } catch (e) {
-      Notify.danger(t('subPage.copyNotify.succeed', { e }), {
-        duration: 1500,
-      });
-      console.error(e);
-    }
+  const onClickCopyLink = () => {
+    const host = import.meta.env.VITE_API_URL;
+    const url = `${host}/download/${
+      props.type === 'collection' ? 'collection/' : ''
+    }${name}`;
+    copy(encodeURI(url));
+    Notify.success(t('subPage.copyNotify.succeed'), {
+      duration: 1500,
+    });
   };
 </script>
 

src/router/index.ts

@@ -112,7 +112,7 @@ router.beforeResolve(async to => {
                 cover: true,
               }
             );
-            await initStores(false, true, false);
+            await initStores(false, true, true);
             fetchLoading.hide();
           }
         }

src/views/SubEditor.vue

@@ -445,7 +445,7 @@
       if (configName === 'UNTITLED') {
         res = await subsApi.createSub(editType as string, data);
         await subsStore.fetchSubsData();
-        if (data.source === 'remote') await initStores(false, true, true);
+        if (data.source === 'remote') await initStores(false, true, false);
       } else {
         let apiType = '';
         if (editType === 'subs') {

src/views/editor/ActionBlock.vue

@@ -101,6 +101,7 @@
   import { useI18n } from 'vue-i18n';
   import i18nFile from '@/locales/zh';
   import { isMobile } from '@/utils/isMobile';
+  import { useEventListener } from '@vueuse/core';
 
   const { t } = useI18n();
   const drag = ref(true);
@@ -203,7 +204,7 @@
     if (!isMobile()) {
       clickValue.value = toRaw(columns.value[0]);
       const body = document.querySelector('body');
-      body.addEventListener('click', e => {
+      useEventListener(body, 'click', e => {
         const el = e.target as HTMLElement;
         if (el.className === 'nut-picker-roller-item') {
           const container = el.parentElement;