From bc06db113a4e4266522f0fc0a1e3f510d9ea4fa8 Mon Sep 17 00:00:00 2001 From: expdsn <18111002318@163.com> Date: Wed, 30 Oct 2024 19:07:10 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=AE=BE=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config.ts | 4 +- src/layout/grid/DockSetting.tsx | 61 ++++++++++ src/layout/grid/Reset.tsx | 25 ++++ src/layout/grid/SiderSetting.tsx | 92 ++++++++++++++ src/layout/header/GlobalTime.tsx | 14 +-- src/layout/sider/ModeSwitch.tsx | 69 +++++++---- src/layout/sider/index.tsx | 153 ++++++++++++++---------- src/settings/SettingsOverlayContent.tsx | 9 ++ src/settings/useSettingsStore.ts | 4 +- src/widgets/gameVideo/Large.tsx | 4 +- 10 files changed, 339 insertions(+), 96 deletions(-) create mode 100644 src/layout/grid/DockSetting.tsx create mode 100644 src/layout/grid/Reset.tsx create mode 100644 src/layout/grid/SiderSetting.tsx diff --git a/src/config.ts b/src/config.ts index 70064d9..71c89ee 100644 --- a/src/config.ts +++ b/src/config.ts @@ -2,8 +2,8 @@ export const aIUrl = 'https://metaso.cn/?s=uitab&referrer_s=uitab&q=' export const translateUrl = 'https://fanyi.baidu.com/mtpe-individual/multimodal?lang=zh2en&query=' // oss地址 export const ossBase = import.meta.env.PROD - ? 'http://newfatfox.oss-cn-beijing.aliyuncs.com' - : 'http://newfatfox.oss-cn-beijing.aliyuncs.com' + ? 'https://oss.goosetab.com' + : 'https://oss.goosetab.com' // 前端地址 export const frontAddress = import.meta.env.PROD diff --git a/src/layout/grid/DockSetting.tsx b/src/layout/grid/DockSetting.tsx new file mode 100644 index 0000000..1ea6229 --- /dev/null +++ b/src/layout/grid/DockSetting.tsx @@ -0,0 +1,61 @@ +import SettingItem from '@/settings/SettingItem' +import useSettingsStore from '@/settings/useSettingsStore' +import { Select, Switch } from 'ant-design-vue' +import clsx from 'clsx' +import { defineComponent } from 'vue' +import useLayoutStore from '../useLayoutStore' + +export default defineComponent({ + name: 'SiderSetting', + props: {}, + setup() { + const settings = useSettingsStore() + const layout = useLayoutStore() + + return () => ( +
+
快捷栏开关
+ }} + > + { + if (e) settings.state.showDock = '' + else settings.state.showDock = 'show' + }} + /> + {' '} +
自动隐藏
+ }} + > + { + if (e) settings.state.showDock = 'auto' + else settings.state.showDock = 'show' + }} + /> + {' '} +
+ 快捷键设置 +

选中要更换快捷键的目标，点击键盘即可更换快捷键

+
+
+ {layout.state.dockLabels.split('').map((val, idx) => ( +
+ {idx + 1} +
+ +
+
+ ))} +
+
+
+ ) + } +}) diff --git a/src/layout/grid/Reset.tsx b/src/layout/grid/Reset.tsx new file mode 100644 index 0000000..b7cf263 --- /dev/null +++ b/src/layout/grid/Reset.tsx @@ -0,0 +1,25 @@ +import SettingItem from '@/settings/SettingItem' +import useSettingsStore from '@/settings/useSettingsStore' +import { Button, Switch } from 'ant-design-vue' +import clsx from 'clsx' +import { defineComponent } from 'vue' + +export default defineComponent({ + name: 'SiderSetting', + props: {}, + setup() { + const settings = useSettingsStore() + return () => ( +
+
重置
+ }} + > + + +

将会把您的历史调整清空，恢复成最初的样式

+
+ ) + } +}) diff --git a/src/layout/grid/SiderSetting.tsx b/src/layout/grid/SiderSetting.tsx new file mode 100644 index 0000000..e0106c6 --- /dev/null +++ b/src/layout/grid/SiderSetting.tsx @@ -0,0 +1,92 @@ +import SettingItem from '@/settings/SettingItem' +import useSettingsStore from '@/settings/useSettingsStore' +import { Switch } from 'ant-design-vue' +import clsx from 'clsx' +import { defineComponent } from 'vue' + +export default defineComponent({ + name: 'SiderSetting', + props: {}, + setup() { + const settings = useSettingsStore() + return () => ( +
+
+
+
{ + settings.state.siderDirection = 'left' + }} + class={clsx( + 'bg-white flex flex-col h-[92px] w-full p-3 justify-between rounded-lg cursor-pointer border-[1px] ', + settings.state.siderDirection === 'left' ? 'border-[#ffa94d]' : 'border-transparent' + )} + > +
+
+
+
+ +
+
+
{ + settings.state.siderDirection = 'right' + }} + class={clsx( + 'bg-white flex items-end w-full flex-col h-[92px] p-3 justify-between rounded-lg cursor-pointer border-[1px] ', + settings.state.siderDirection === 'right' + ? 'border-[#ffa94d]' + : 'border-transparent' + )} + > +
+
+
+
+ +
+
+
自动隐藏
+ }} + > + { + if (e) settings.state.showSider = 'auto' + else settings.state.showSider = 'show' + }} + /> + {' '} +
+ ) + } +}) diff --git a/src/layout/header/GlobalTime.tsx b/src/layout/header/GlobalTime.tsx index f269bd9..62c2d8f 100644 --- a/src/layout/header/GlobalTime.tsx +++ b/src/layout/header/GlobalTime.tsx @@ -8,13 +8,13 @@ export default defineComponent({ setup() { const time = useTimeStore() const text = computed(() => { - if (!useSettingsStore().state.timeOptions.includes('12hour')) { - return { - timeStr: `${time.date.getHours()}:${time.date.getMinutes()}:${time.date.getSeconds()}`, - dateStr: `${time.date.getMonth() + 1}月${time.date.getDate()}日` - } + const is24h = useSettingsStore().state.timeOptions.includes('12hour') + const hasSec = useSettingsStore().state.timeOptions.includes('second') + let h = time.date.getHours() + if (is24h) { + h = h % 12 // 转换成12小时制 + h = h ? h : 12 // 0点要转换成12 } - const h = time.date.getHours() const hour = h < 10 ? '0' + h : h const m = time.date.getMinutes() const minute = m < 10 ? '0' + m : m @@ -22,7 +22,7 @@ export default defineComponent({ const second = s < 10 ? '0' + s : s const dateStr = `${time.date.getMonth() + 1}月${time.date.getDate()}日` return { - timeStr: `${hour}:${minute}:${second}`, + timeStr: hasSec ? `${hour}:${minute}:${second}` : `${hour}:${minute}`, dateStr } }) diff --git a/src/layout/sider/ModeSwitch.tsx b/src/layout/sider/ModeSwitch.tsx index 2dc9dcf..5dd7f50 100644 --- a/src/layout/sider/ModeSwitch.tsx +++ b/src/layout/sider/ModeSwitch.tsx @@ -2,11 +2,14 @@ import { defineComponent, ref, watch } from 'vue' import useLayoutStore from '../useLayoutStore' import { OhVueIcon, addIcons } from 'oh-vue-icons' import { MdVideogameassetTwotone, MdWorkhistoryTwotone, MdStarsTwotone } from 'oh-vue-icons/icons' +import useSettingsStore from '@/settings/useSettingsStore' +import clsx from 'clsx' addIcons(MdVideogameassetTwotone, MdWorkhistoryTwotone, MdStarsTwotone) export default defineComponent(() => { const hover = ref(false) + const settings = useSettingsStore() const selected = ref<0 | 1 | 2>(0) const layout = useLayoutStore() watch( @@ -33,46 +36,68 @@ export default defineComponent(() => { fill-opacity={hover.value ? 1 : 0} fill={hover.value ? 'rgba(0,0,0,.4)' : 'transparent'} /> - + {layout.state.current === 0 ? '游戏' : layout.state.current === 1 ? '工作' : '休闲'} - + 模式 {/* 转盘 */}
-
+
游戏
-
+
工作
-
+
休闲
- + { const selected = ref(icons[0]) const router = useRouterStore() const layout = useLayoutStore() + const settings = useSettingsStore() const user = useUserStore() + const show = ref(false) const label = ref('') watch( selected, @@ -71,70 +75,95 @@ export default defineComponent(() => { return () => ( {layout.ready && ( -
-
- -
-