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

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

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

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

* fix: 补上遗漏的逗号

* fix: 移除重复出现的依赖项
This commit is contained in:
悠静萝莉 2023-11-17 09:53:24 +08:00 committed by GitHub
parent 20bcad218c
commit 2dd41f4a50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 30 additions and 24 deletions

View File

@ -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"
},

View File

@ -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 { toClipboard } = useClipboard();
toClipboard(text)
const sourceText = JSON.stringify(formData.value, null, 4);
const { copy } = useClipboard({ source: sourceText });
copy()
.then(() => {
MessagePlugin.closeAll();
MessagePlugin.success('复制成功');

View File

@ -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,

View File

@ -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(() => {

View File

@ -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(() => {
window.removeEventListener('resize', updateContainer);
const { width, height } = useWindowSize();
watch([width, height], () => {
updateContainer();
});
onDeactivated(() => {

View File

@ -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(() => {
window.removeEventListener('resize', updateContainer);
const { width, height } = useWindowSize();
watch([width, height], () => {
updateContainer();
});
watch(

View File

@ -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(() => {
window.removeEventListener('resize', updateContainer);
const { width, height } = useWindowSize();
watch([width, height], () => {
updateContainer();
});
watch(

View File

@ -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(() => {
window.removeEventListener('resize', updateContainer);
const { width, height } = useWindowSize();
watch([width, height], () => {
updateContainer();
});
onDeactivated(() => {