feat(hook): 替换窗口大小变化监听器 (#638)

* feat(hook): 替换窗口大小变化监听器

* feat(state): 替换响应式数据监听器

* feat(clipboard): 移除无用依赖，替换剪贴方法

* fix: 补上遗漏的逗号

* fix: 移除重复出现的依赖项

package.json

@@ -19,6 +19,7 @@
     "test:coverage": "echo \"no test:coverage specified,work in process\""
   },
   "dependencies": {
+    "@vueuse/core": "^10.6.1",
     "axios": "^1.6.2",
     "dayjs": "^1.11.10",
     "echarts": "5.1.2",
@@ -32,7 +33,6 @@
     "tdesign-vue-next": "^1.6.8",
     "tvision-color": "^1.6.0",
     "vue": "^3.3.8",
-    "vue-clipboard3": "^2.0.0",
     "vue-i18n": "^9.6.5",
     "vue-router": "~4.2.4"
   },

src/layouts/setting.vue

@@ -98,10 +98,10 @@
   </t-drawer>
 </template>
 <script setup lang="ts">
+import { useClipboard } from '@vueuse/core';
 import type { PopupVisibleChangeContext } from 'tdesign-vue-next';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { computed, onMounted, ref, watchEffect } from 'vue';
-import useClipboard from 'vue-clipboard3';
 
 import SettingAutoIcon from '@/assets/assets-setting-auto.svg';
 import SettingDarkIcon from '@/assets/assets-setting-dark.svg';
@@ -169,9 +169,9 @@ const onPopupVisibleChange = (visible: boolean, context: PopupVisibleChangeConte
 };
 
 const handleCopy = () => {
-  const text = JSON.stringify(formData.value, null, 4);
+  const sourceText = JSON.stringify(formData.value, null, 4);
-  const { toClipboard } = useClipboard();
+  const { copy } = useClipboard({ source: sourceText });
-  toClipboard(text)
+  copy()
     .then(() => {
       MessagePlugin.closeAll();
       MessagePlugin.success('复制成功');

src/locales/index.ts

@@ -1,3 +1,4 @@
+import { useLocalStorage, usePreferredLanguages } from '@vueuse/core';
 import { DropdownOption } from 'tdesign-vue-next';
 import { computed } from 'vue';
 import { createI18n } from 'vue-i18n';
@@ -12,7 +13,7 @@ export const langCode: Array<string> = [];
 export const localeConfigKey = 'tdesign-starter-locale';
 
 // 获取浏览器默认语言环境
-const browserLanguage = navigator.language.replace('-', '_');
+const languages = usePreferredLanguages();
 
 // 生成语言模块列表
 const generateLangModuleMap = () => {
@@ -42,7 +43,7 @@ const importMessages = computed(() => {
 
 export const i18n = createI18n({
   legacy: false,
-  locale: localStorage.getItem(localeConfigKey) || browserLanguage || 'zh_CN',
+  locale: useLocalStorage(localeConfigKey, 'zh_CN').value || languages.value[0] || 'zh_CN',
   fallbackLocale: 'zh_CN',
   messages: importMessages.value,
   globalInjection: true,

src/locales/useLocale.ts

@@ -1,3 +1,4 @@
+import { useLocalStorage } from '@vueuse/core';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -12,7 +13,7 @@ export function useLocale() {
     }
 
     locale.value = lang;
-    localStorage.setItem(localeConfigKey, lang);
+    useLocalStorage(localeConfigKey, 'zh_CN').value = lang;
   }
 
   const getComponentsLocale = computed(() => {

src/pages/dashboard/base/components/MiddleChart.vue

@@ -43,11 +43,12 @@
 </template>
 
 <script setup lang="ts">
+import { useWindowSize } from '@vueuse/core';
 import { LineChart, PieChart } from 'echarts/charts';
 import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import { computed, nextTick, onDeactivated, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, nextTick, onDeactivated, onMounted, ref, watch } from 'vue';
 
 import { useSettingStore } from '@/store';
 import { changeChartsTheme } from '@/utils/color';
@@ -128,11 +129,11 @@ onMounted(() => {
   nextTick(() => {
     updateContainer();
   });
-  window.addEventListener('resize', updateContainer, false);
 });
 
-onUnmounted(() => {
+const { width, height } = useWindowSize();
-  window.removeEventListener('resize', updateContainer);
+watch([width, height], () => {
+  updateContainer();
 });
 
 onDeactivated(() => {

src/pages/dashboard/base/components/OutputOverview.vue

@@ -70,11 +70,12 @@ export default {
 </script>
 
 <script setup lang="ts">
+import { useWindowSize } from '@vueuse/core';
 import { LineChart } from 'echarts/charts';
 import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
 
 // 导入样式
 import Trend from '@/components/trend/index.vue';
@@ -127,11 +128,11 @@ onMounted(() => {
   nextTick(() => {
     updateContainer();
   });
-  window.addEventListener('resize', updateContainer, false);
 });
 
-onUnmounted(() => {
+const { width, height } = useWindowSize();
-  window.removeEventListener('resize', updateContainer);
+watch([width, height], () => {
+  updateContainer();
 });
 
 watch(

src/pages/dashboard/base/components/TopPanel.vue

@@ -55,11 +55,12 @@ export default {
 </script>
 
 <script setup lang="ts">
+import { useWindowSize } from '@vueuse/core';
 import { BarChart, LineChart } from 'echarts/charts';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { FileIcon, UsergroupIcon } from 'tdesign-icons-vue-next';
-import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { nextTick, onMounted, ref, watch } from 'vue';
 
 // 导入样式
 import Trend from '@/components/trend/index.vue';
@@ -152,11 +153,11 @@ onMounted(() => {
   nextTick(() => {
     updateContainer();
   });
-  window.addEventListener('resize', updateContainer, false);
 });
 
-onUnmounted(() => {
+const { width, height } = useWindowSize();
-  window.removeEventListener('resize', updateContainer);
+watch([width, height], () => {
+  updateContainer();
 });
 
 watch(

src/pages/dashboard/detail/index.vue

@@ -69,11 +69,12 @@ export default {
 </script>
 
 <script setup lang="ts">
+import { useWindowSize } from '@vueuse/core';
 import { LineChart, ScatterChart } from 'echarts/charts';
 import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import { computed, nextTick, onDeactivated, onMounted, onUnmounted, watch } from 'vue';
+import { computed, nextTick, onDeactivated, onMounted, watch } from 'vue';
 
 import ProductCard from '@/components/product-card/index.vue';
 import Trend from '@/components/trend/index.vue';
@@ -126,14 +127,14 @@ const renderCharts = () => {
 
 onMounted(() => {
   renderCharts();
-  window.addEventListener('resize', updateContainer, false);
   nextTick(() => {
     updateContainer();
   });
 });
 
-onUnmounted(() => {
+const { width, height } = useWindowSize();
-  window.removeEventListener('resize', updateContainer);
+watch([width, height], () => {
+  updateContainer();
 });
 
 onDeactivated(() => {