Skip to content

Commit 3b72fdc

Browse files
ayangwebayangweb
authored
feat: 模型切换时增加提示信息以提升体验 (#917)
1 parent db1e87c commit 3b72fdc

9 files changed

Lines changed: 76 additions & 50 deletions

File tree

‎src/locales/en-US.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"pages": {
33
"main": {
44
"hints": {
5-
"redrawing": "Redrawing..."
5+
"redrawing": "Redrawing...",
6+
"switching": "Switching..."
67
}
78
},
89
"preference": {

‎src/locales/pt-BR.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"pages": {
33
"main": {
44
"hints": {
5-
"redrawing": "Redimensionando..."
5+
"redrawing": "Redimensionando...",
6+
"switching": "Alternando..."
67
}
78
},
89
"preference": {

‎src/locales/vi-VN.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"pages": {
33
"main": {
44
"hints": {
5-
"redrawing": "Đang đổi kích thước..."
5+
"redrawing": "Đang đổi kích thước...",
6+
"switching": "Đang chuyển đổi..."
67
}
78
},
89
"preference": {

‎src/locales/zh-CN.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"pages": {
33
"main": {
44
"hints": {
5-
"redrawing": "重绘中..."
5+
"redrawing": "重绘中...",
6+
"switching": "切换中..."
67
}
78
},
89
"preference": {

‎src/locales/zh-TW.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"pages": {
33
"main": {
44
"hints": {
5-
"redrawing": "重繪中…"
5+
"redrawing": "重繪中…",
6+
"switching": "切換中…"
67
}
78
},
89
"preference": {

‎src/pages/main/index.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,8 @@ watch(() => modelStore.currentModel, async (model) => {
8181
modelStore.supportKeys[fileName] = join(groupDir, file.name)
8282
}
8383
}
84+
85+
modelStore.modelReady = true
8486
}, { deep: true, immediate: true })
8587
8688
watch([() => catStore.window.scale, modelSize], async ([scale, modelSize]) => {
@@ -192,11 +194,11 @@ function handleMouseMove(event: MouseEvent) {
192194
>
193195

194196
<div
195-
v-show="resizing"
197+
v-show="resizing || !modelStore.modelReady"
196198
class="flex items-center justify-center bg-black"
197199
>
198200
<span class="text-center text-[10vw] text-white">
199-
{{ $t('pages.main.hints.redrawing') }}
201+
{{ resizing ? $t('pages.main.hints.redrawing') : $t('pages.main.hints.switching') }}
200202
</span>
201203
</div>
202204
</div>

‎src/pages/preference/components/model/index.vue‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,14 @@ function setFirstItemRef(el: Element | ComponentPublicInstance | null, index: nu
3838
}
3939
}
4040
41+
function handleToggle(nextModel: Model) {
42+
if (modelStore.currentModel?.id === nextModel.id) return
43+
44+
modelStore.modelReady = false
45+
46+
modelStore.currentModel = nextModel
47+
}
48+
4149
async function handleDelete(item: Model) {
4250
const { id, path } = item
4351
@@ -75,7 +83,7 @@ async function handleDelete(item: Model) {
7583
class="[&_[class^='i-']]:text-4"
7684
hoverable
7785
size="small"
78-
@click="modelStore.currentModel = item"
86+
@click="handleToggle(item)"
7987
>
8088
<template #cover>
8189
<img

‎src/pages/preference/index.vue‎

Lines changed: 51 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow'
3-
import { Flex } from 'ant-design-vue'
3+
import { Flex, Spin } from 'ant-design-vue'
44
import { computed, ref, watch } from 'vue'
55
import { useI18n } from 'vue-i18n'
66
@@ -14,13 +14,15 @@ import UpdateApp from '@/components/update-app/index.vue'
1414
import { useTray } from '@/composables/useTray'
1515
import { useAppStore } from '@/stores/app'
1616
import { useGeneralStore } from '@/stores/general'
17+
import { useModelStore } from '@/stores/model'
1718
import { isMac } from '@/utils/platform'
1819
1920
useTray()
2021
const appStore = useAppStore()
2122
const current = ref(0)
2223
const { t } = useI18n()
2324
const generalStore = useGeneralStore()
25+
const modelStore = useModelStore()
2426
const appWindow = getCurrentWebviewWindow()
2527
2628
watch(() => generalStore.appearance.language, () => {
@@ -57,52 +59,59 @@ const menus = computed(() => [
5759
</script>
5860

5961
<template>
60-
<Flex class="h-screen">
61-
<div
62-
class="h-full w-30 flex flex-col items-center gap-4 overflow-auto dark:(bg-color-3 bg-none) bg-gradient-from-primary-1 bg-gradient-to-black/1 bg-gradient-linear"
63-
:class="[isMac ? 'pt-8' : 'pt-4']"
64-
data-tauri-drag-region
65-
>
66-
<div class="flex flex-col items-center gap-2">
67-
<div class="b b-color-2 rounded-2xl b-solid">
68-
<img
69-
class="size-15"
70-
data-tauri-drag-region
71-
src="/logo.png"
72-
>
73-
</div>
62+
<UpdateApp />
7463

75-
<span class="font-bold">{{ appStore.name }}</span>
76-
</div>
64+
<Spin
65+
class="max-h-unset!"
66+
size="large"
67+
:spinning="!modelStore.modelReady"
68+
:tip="t('pages.main.hints.switching')"
69+
>
70+
<Flex class="h-screen">
71+
<div
72+
class="h-full w-30 flex flex-col items-center gap-4 overflow-auto dark:(bg-color-3 bg-none) bg-gradient-from-primary-1 bg-gradient-to-black/1 bg-gradient-linear"
73+
:class="[isMac ? 'pt-8' : 'pt-4']"
74+
data-tauri-drag-region
75+
>
76+
<div class="flex flex-col items-center gap-2">
77+
<div class="b b-color-2 rounded-2xl b-solid">
78+
<img
79+
class="size-15"
80+
data-tauri-drag-region
81+
src="/logo.png"
82+
>
83+
</div>
84+
85+
<span class="font-bold">{{ appStore.name }}</span>
86+
</div>
7787

78-
<div class="flex flex-col gap-2">
79-
<div
80-
v-for="(item, index) in menus"
81-
:key="item.label"
82-
class="size-20 flex flex-col cursor-pointer items-center justify-center gap-2 rounded-lg hover:bg-color-7 dark:text-color-2 text-color-3 transition"
83-
:class="{ 'bg-color-2! text-primary-5 dark:text-primary-7 font-bold dark:bg-color-8!': current === index }"
84-
@click="current = index"
85-
>
88+
<div class="flex flex-col gap-2">
8689
<div
87-
class="size-8"
88-
:class="item.icon"
89-
/>
90+
v-for="(item, index) in menus"
91+
:key="item.label"
92+
class="size-20 flex flex-col cursor-pointer items-center justify-center gap-2 rounded-lg hover:bg-color-7 dark:text-color-2 text-color-3 transition"
93+
:class="{ 'bg-color-2! text-primary-5 dark:text-primary-7 font-bold dark:bg-color-8!': current === index }"
94+
@click="current = index"
95+
>
96+
<div
97+
class="size-8"
98+
:class="item.icon"
99+
/>
90100

91-
<span>{{ item.label }}</span>
101+
<span>{{ item.label }}</span>
102+
</div>
92103
</div>
93104
</div>
94-
</div>
95-
96-
<div
97-
v-for="(item, index) in menus"
98-
v-show="current === index"
99-
:key="item.label"
100-
class="flex-1 overflow-auto bg-color-8 dark:bg-color-2 p-4"
101-
data-tauri-drag-region
102-
>
103-
<component :is="item.component" />
104-
</div>
105-
</Flex>
106105

107-
<UpdateApp />
106+
<div
107+
v-for="(item, index) in menus"
108+
v-show="current === index"
109+
:key="item.label"
110+
class="flex-1 overflow-auto bg-color-8 dark:bg-color-2 p-4"
111+
data-tauri-drag-region
112+
>
113+
<component :is="item.component" />
114+
</div>
115+
</Flex>
116+
</Spin>
108117
</template>

‎src/stores/model.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export interface Model {
1818
}
1919

2020
export const useModelStore = defineStore('model', () => {
21+
const modelReady = ref(true)
2122
const models = ref<Model[]>([])
2223
const currentModel = ref<Model>()
2324
const supportKeys = reactive<Record<string, string>>({})
@@ -53,6 +54,7 @@ export const useModelStore = defineStore('model', () => {
5354
}
5455

5556
return {
57+
modelReady,
5658
models,
5759
currentModel,
5860
supportKeys,

0 commit comments

Comments
 (0)