diff --git a/src/App.vue b/src/App.vue index e32c46d..2e89d85 100644 --- a/src/App.vue +++ b/src/App.vue @@ -34,13 +34,24 @@ const layout = useLayoutStore() - + - -
+ +
diff --git a/src/GlobalModal.tsx b/src/GlobalModal.tsx index c9d8634..3e8ea1c 100644 --- a/src/GlobalModal.tsx +++ b/src/GlobalModal.tsx @@ -24,9 +24,10 @@ export default defineComponent(() => { watch(router, () => { full.value = false }) + return () => (
e.stopPropagation()} onKeydown={(e) => e.stopPropagation()} > @@ -42,10 +43,10 @@ export default defineComponent(() => { )} {/* 弹框主体 */} - + {show.value && (
- {settings.state.showTime && ( -
- {text.value.timeStr} -
- )} + + { + layout.state.simple ? + settings.state.simpleModeShowString.includes('showTime') && +
+ {text.value.timeStr} +
+ : + settings.state!.showTime && +
+ {text.value.timeStr} +
+ } - {settings.state.showTime && ( -
- {settings.state.timeOptions.includes('date') &&
{text.value.dateStr}
} - - {!layout.isCompact && settings.state.timeOptions.includes('week') && ( -
星期{info.value.dayWeek}
- )} - - - {!layout.isCompact && settings.state.timeOptions.includes('lunal') && ( -
{info.value.day}
- )} - -
- )} + { + layout.state.simple ? + settings.state.simpleModeShowString.includes('showDate') && +
+ {settings.state.timeOptions.includes('date') &&
{text.value.dateStr}
} + + {!layout.isCompact && settings.state.timeOptions.includes('week') && ( +
星期{info.value.dayWeek}
+ )} + + + {!layout.isCompact && settings.state.timeOptions.includes('lunal') && ( +
{info.value.day}
+ )} + +
+ : + settings.state!.showTime && +
+ {settings.state.timeOptions.includes('date') &&
{text.value.dateStr}
} + + {!layout.isCompact && settings.state.timeOptions.includes('week') && ( +
星期{info.value.dayWeek}
+ )} + + + {!layout.isCompact && settings.state.timeOptions.includes('lunal') && ( +
{info.value.day}
+ )} + +
+ } +
) diff --git a/src/layout/header/ModeChange.tsx b/src/layout/header/ModeChange.tsx index d17026b..30d8fb2 100644 --- a/src/layout/header/ModeChange.tsx +++ b/src/layout/header/ModeChange.tsx @@ -1,16 +1,50 @@ import { addIcons, OhVueIcon } from "oh-vue-icons"; import { defineComponent, ref } from "vue"; import { BiEyeFill } from "oh-vue-icons/icons"; -import { BiEyeSlashFill } from "oh-vue-icons/icons"; +import { BiEyeSlashFill, MdMorevert } from "oh-vue-icons/icons"; import useLayoutStore from "../useLayoutStore"; import clsx from "clsx"; -import useSettingsStore from "@/settings/useSettingsStore"; -addIcons(BiEyeFill, BiEyeSlashFill) +import useSettingsStore, { SimpleShowStringType } from "@/settings/useSettingsStore"; +import { Dropdown, type MenuProps } from "ant-design-vue"; +addIcons(BiEyeFill, BiEyeSlashFill, MdMorevert) +const items: MenuProps['items'] = [ + { + key: '1', + label: ( + + 1st menu item + + ), + }, + { + key: '2', + label: ( + + 2nd menu item (disabled) + + ), + disabled: true, + }, + { + key: '3', + label: ( + + 3rd menu item (disabled) + + ), + disabled: true, + }, + { + key: '4', + danger: true, + label: 'a danger item', + }, +]; export default defineComponent(() => { const layoutStore = useLayoutStore() const settingStore = useSettingsStore() const show = ref(false) - + const showOptions = ref(false) return () => (
{ : '-top-[30px]' : 'top-5' )}> - { - layoutStore.state.simple = !layoutStore.state.simple - }} - >{layoutStore.state.simple ? '极简' : '常规'} +
+ { + e.stopPropagation() + showOptions.value = !showOptions.value + }}> + { + layoutStore.state.simple && + + + } + { + showOptions.value + && +
{ + showOptions.value = false + }}> + { + SimpleShowStringType.map(item => ( +
{ + e.stopPropagation() + settingStore.state.simpleModeShowString.includes(item.value) ? + settingStore.state.simpleModeShowString = settingStore.state.simpleModeShowString.filter(el => el !== item.value) + : + settingStore.state.simpleModeShowString.push(item.value) + }} + > + {item.label} +
+ )) + } +
+ } + + + { + layoutStore.state.simple = !layoutStore.state.simple + }} + >{layoutStore.state.simple ? '极简' : '常规'} +
+
{ settingStore.state.showTop = settingStore.state.showTop === 'auto' ? 'show' : 'auto' }}> diff --git a/src/main.css b/src/main.css index 5250346..0ac2a4b 100644 --- a/src/main.css +++ b/src/main.css @@ -163,19 +163,16 @@ body { .modal-enter-active, .modal-leave-active { transition: - transform 0.3s ease-in-out, - opacity 0.3s ease-in-out; + transform 2s ease-in-out, + opacity 2s ease-in-out; } .modal-enter-from { - transform: translate(-50%, -60%); opacity: 0; } .modal-leave-to { - transform: translate(-50%, -40%); opacity: 0; } - /* 设置框动画 */ .settings-enter-active, .settings-leave-active { diff --git a/src/settings/useSettingsStore.ts b/src/settings/useSettingsStore.ts index f397d60..d0c8fa7 100644 --- a/src/settings/useSettingsStore.ts +++ b/src/settings/useSettingsStore.ts @@ -3,6 +3,32 @@ import { computed, reactive } from 'vue' export type VisibleState = 'show' | 'auto' | '' export type TimeUnit = 'date' | 'week' | '12hour' | 'lunal' | 'second' + + +export const SimpleShowStringType = [{ + label: "侧边栏", + value: 'showSider', +}, +{ + label: "底部栏", + value: 'showDock', + +}, +{ + label: "时间", + value: 'showTime', + +}, { + label: "日期", + value: 'showDate', + +}, { + label: "AI助手", + value: 'showPet', +} +] +type SimpleValueType = typeof SimpleShowStringType[number]['value']; + export default defineStore( 'settings', () => { @@ -33,7 +59,9 @@ export default defineStore( // 侧边栏 siderDirection: 'left' as 'left' | 'right', // 禁用快捷键 - disabledShortcut: false + disabledShortcut: false, + // 极简模式显式 + simpleModeShowString: ['showTime', 'showDate'] as SimpleValueType[] }) return { state, blockInner: computed(() => state.blockSize - 2 * state.blockPadding) } }, diff --git a/src/widgets/work/useTomatoStore.ts b/src/widgets/work/useTomatoStore.ts index 32315fd..2a26fe5 100644 --- a/src/widgets/work/useTomatoStore.ts +++ b/src/widgets/work/useTomatoStore.ts @@ -91,7 +91,6 @@ export default defineStore("work", () => { } watch(remainingTime, (val) => { - console.log(val); if (val < 0) { stopTomatoTime()