From 224d9473ca2afa8e4edcdd44ce2ea339e2545b72 Mon Sep 17 00:00:00 2001 From: zyronon Date: Thu, 7 Dec 2023 00:06:36 +0800 Subject: [PATCH] update ui and add notice collect dialog --- components.d.ts | 1 + src/App.vue | 2 + src/assets/css/style.scss | 5 +- src/components/BaseButton.vue | 5 +- src/components/CollectNotice.vue | 181 +++++++++++++++++++++++++++++++ src/components/RightTopBar.vue | 6 +- src/components/dialog/Dialog.vue | 2 +- src/components/icon/Close.vue | 12 +- src/components/toolbar/index.vue | 9 +- src/pages/practice/Footer.vue | 1 + src/pages/practice/Panel.vue | 1 + src/pages/test.vue | 13 ++- src/stores/setting.ts | 20 +++- 13 files changed, 238 insertions(+), 20 deletions(-) create mode 100644 src/components/CollectNotice.vue diff --git a/components.d.ts b/components.d.ts index e4314c9c..7c5a2a0c 100644 --- a/components.d.ts +++ b/components.d.ts @@ -16,6 +16,7 @@ declare module 'vue' { BaseList: typeof import('./src/components/list/BaseList.vue')['default'] ChapterName: typeof import('./src/components/toolbar/ChapterName.vue')['default'] Close: typeof import('./src/components/icon/Close.vue')['default'] + CollectNotice: typeof import('./src/components/CollectNotice.vue')['default'] Dialog: typeof import('./src/components/dialog/Dialog.vue')['default'] DictDiglog: typeof import('./src/components/dialog/DictDiglog.vue')['default'] DictGroup: typeof import('./src/components/list/DictGroup.vue')['default'] diff --git a/src/App.vue b/src/App.vue index 5a2bf45a..2c77b85e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,6 +13,7 @@ import * as localforage from "localforage"; import SettingDialog from "@/components/dialog/SettingDialog.vue"; import ArticleContentDialog from "@/components/dialog/ArticleContentDialog.vue"; import {useStartKeyboardEventListener} from "@/hooks/event.ts"; +import CollectNotice from "@/components/CollectNotice.vue"; const store = useBaseStore() const runtimeStore = useRuntimeStore() @@ -91,6 +92,7 @@ onMounted(() => { diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss index 504b148f..3104317f 100644 --- a/src/assets/css/style.scss +++ b/src/assets/css/style.scss @@ -36,6 +36,9 @@ --toolbar-height: 54rem; --panel-width: 400rem; --space: 20rem; + --radius: 8rem; + --shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; + --shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;; --panel-margin-left: calc(50% - var(--practice-wrapper-translateX) / 2 + var(--toolbar-width) / 2 + 24rem); --article-panel-margin-left: calc(50% - var(--practice-wrapper-translateX) / 2 + var(--article-width) / 2 + 24rem); --anim-time: 0.5s; @@ -156,7 +159,7 @@ html, body { } a { - $main: rgb(64,158,255); + $main: rgb(64, 158, 255); color: $main; text-decoration: none; } diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue index 2c8d777b..48ffd220 100644 --- a/src/components/BaseButton.vue +++ b/src/components/BaseButton.vue @@ -85,7 +85,10 @@ defineEmits(['click']) &.large { height: 50rem; font-size: 18rem; - padding: 0 18rem; + padding: 0 22rem; + & > span { + font-size: 18rem; + } } diff --git a/src/components/CollectNotice.vue b/src/components/CollectNotice.vue new file mode 100644 index 00000000..7c043748 --- /dev/null +++ b/src/components/CollectNotice.vue @@ -0,0 +1,181 @@ + + + + + \ No newline at end of file diff --git a/src/components/RightTopBar.vue b/src/components/RightTopBar.vue index 4bc9c772..68c07313 100644 --- a/src/components/RightTopBar.vue +++ b/src/components/RightTopBar.vue @@ -18,10 +18,7 @@ const settingStore = useSettingStore() \ No newline at end of file diff --git a/src/components/toolbar/index.vue b/src/components/toolbar/index.vue index 2dde6b7d..e75cfc02 100644 --- a/src/components/toolbar/index.vue +++ b/src/components/toolbar/index.vue @@ -18,6 +18,7 @@ import {$ref} from "vue/macros"; import {DictType, ShortcutKey} from "@/types.ts"; import ChapterName from "@/components/toolbar/ChapterName.vue"; import {emitter, EventKey} from "@/utils/eventBus.ts"; +import BaseIcon from "@/components/BaseIcon.vue"; const {toggleTheme} = useTheme() const store = useBaseStore() @@ -113,7 +114,10 @@ watch(() => store.load, n => { - + @@ -149,6 +153,8 @@ watch(() => store.load, n => { color="#999"/> + + \ No newline at end of file diff --git a/src/stores/setting.ts b/src/stores/setting.ts index 4c5c249d..251a7755 100644 --- a/src/stores/setting.ts +++ b/src/stores/setting.ts @@ -1,5 +1,5 @@ import {defineStore} from "pinia" -import {cloneDeep} from "lodash-es"; +import {cloneDeep, merge} from "lodash-es"; import {DefaultShortcutKeyMap, SaveConfig} from "@/types.ts"; export interface SettingState { @@ -36,7 +36,9 @@ export interface SettingState { theme: string, collapse: boolean, chapterWordNumber: number, - shortcutKeyMap: Record + shortcutKeyMap: Record, + first: boolean + load: boolean } export const DefaultChapterWordNumber = 30 @@ -78,14 +80,18 @@ export const useSettingStore = defineStore('setting', { theme: 'auto', collapse: false, chapterWordNumber: DefaultChapterWordNumber, - shortcutKeyMap: cloneDeep(DefaultShortcutKeyMap) + shortcutKeyMap: cloneDeep(DefaultShortcutKeyMap), + first: true, + load: false } }, actions: { setState(obj: any) { - for (const [key, value] of Object.entries(obj)) { - this[key] = value - } + // for (const [key, value] of Object.entries(obj)) { + // this[key] = value + // } + //这样不会丢失watch的值的引用 + merge(this, obj) }, init() { return new Promise(resolve => { @@ -99,6 +105,7 @@ export const useSettingStore = defineStore('setting', { if (!obj.version) { setDefaultConfig() } else { + obj.val.load = false if (obj.version !== SaveConfig.version) { for (const [key, value] of Object.entries(this.shortcutKeyMap)) { if (obj.val.shortcutKeyMap[key]) this.shortcutKeyMap[key] = obj.val.shortcutKeyMap[key] @@ -120,6 +127,7 @@ export const useSettingStore = defineStore('setting', { setDefaultConfig() } } + this.load = true resolve(true) }) }