save

src/App.vue

@@ -34,13 +34,24 @@ const layout = useLayoutStore()
     <SettingsOverlay />
     <SettingsButton />
 
-    <Sider v-if="!layout.state.simple" />
+    <Sider
+      v-if="
+        !layout.state.simple ||
+        (layout.state.simple && settings.state.simpleModeShowString.includes('showSider'))
+      "
+    />
     <LoginModal v-if="router.path === 'global-login'" />
     <Transition>
       <Grid v-if="layout.ready && !layout.state.simple" />
     </Transition>
-    <Dock v-if="!layout.state.simple" />
+    <Dock
-    <div class="fixed z-40 right-[14%] top-8" v-if="!layout.state.simple">
+      v-if="
+        !layout.state.simple ||
+        (layout.state.simple && settings.state.simpleModeShowString.includes('showDock'))
+      "
+    />
+    <div class="fixed z-40 right-[14%] top-8" v-if="!layout.state.simple ||
+        (layout.state.simple && settings.state.simpleModeShowString.includes('showPet'))">
       <Fox />
     </div>
     <DirModal />

src/GlobalModal.tsx

@@ -24,6 +24,7 @@ export default defineComponent(() => {
   watch(router, () => {
     full.value = false
   })
+
   return () => (
     <div
       class="fixed left-0 top-0  z-50 w-full"
@@ -42,10 +43,10 @@ export default defineComponent(() => {
         )}
       </Transition>
       {/* 弹框主体 */}
-      <Transition name="modal">
+      <Transition >
         {show.value && (
           <div
-            class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden transition-all"
+            class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden "
             style={{
               width: full.value ? '100%' : '984px',
               height: full.value ? '100vh' : '580px',

src/layout/header/GlobalTime.tsx

@@ -49,7 +49,10 @@ export default defineComponent({
         }}
       >
         <Transition>
-          {settings.state.showTime && (
+
+          {
+            layout.state.simple ?
+              settings.state.simpleModeShowString.includes('showTime') &&
               <div
                 class={
                   'transition-all ' +
@@ -58,10 +61,22 @@ export default defineComponent({
               >
                 {text.value.timeStr}
               </div>
-          )}
+              :
+              settings.state!.showTime &&
+              <div
+                class={
+                  'transition-all ' +
+                  (layout.isCompact ? 'text-[1.4rem] leading-[1.4rem]' : 'text-[8vh] leading-[4rem]')
+                }
+              >
+                {text.value.timeStr}
+              </div>
+          }
         </Transition>
         <Transition>
-          {settings.state.showTime && (
+          {
+            layout.state.simple ?
+              settings.state.simpleModeShowString.includes('showDate') &&
               <div
                 class={'flex items-center gap-4 mt-4 ' + (layout.isCompact ? '' : 'justify-center')}
               >
@@ -77,8 +92,26 @@ export default defineComponent({
                   )}
                 </Transition>
               </div>
+              :
+              settings.state!.showTime &&
+              <div
+                class={'flex items-center gap-4 mt-4 ' + (layout.isCompact ? '' : 'justify-center')}
+              >
+                {settings.state.timeOptions.includes('date') && <div>{text.value.dateStr}</div>}
+                <Transition>
+                  {!layout.isCompact && settings.state.timeOptions.includes('week') && (
+                    <div>星期{info.value.dayWeek}</div>
                   )}
                 </Transition>
+                <Transition>
+                  {!layout.isCompact && settings.state.timeOptions.includes('lunal') && (
+                    <div>{info.value.day}</div>
+                  )}
+                </Transition>
+              </div>
+          }
+
+        </Transition>
       </div>
     )
   }

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";
+import useSettingsStore, { SimpleShowStringType } from "@/settings/useSettingsStore";
-addIcons(BiEyeFill, BiEyeSlashFill)
+import { Dropdown, type MenuProps } from "ant-design-vue";
+addIcons(BiEyeFill, BiEyeSlashFill, MdMorevert)
+const items: MenuProps['items'] = [
+    {
+        key: '1',
+        label: (
+            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
+                1st menu item
+            </a>
+        ),
+    },
+    {
+        key: '2',
+        label: (
+            <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
+                2nd menu item (disabled)
+            </a>
+        ),
+        disabled: true,
+    },
+    {
+        key: '3',
+        label: (
+            <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
+                3rd menu item (disabled)
+            </a>
+        ),
+        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 () => (
         <div class={"fixed w-[200px] h-[50px]  text-white right-0 top-0 z-10    "}
 
@@ -28,11 +62,53 @@ export default defineComponent(() => {
                         : '-top-[30px]'
                     : 'top-5'
             )}>
-                <span class={"px-2 py-1 hover:bg-black/20 rounded cursor-pointer"}
+                <div class={"hover:bg-black/30 p-1 rounded"}>
+                    <span class={"cursor-pointer relative"} onClick={(e) => {
+                        e.stopPropagation()
+                        showOptions.value = !showOptions.value
+                    }}>
+                        {
+                            layoutStore.state.simple &&
+                            <OhVueIcon name={MdMorevert.name} fill="white" class={"opacity-60"}></OhVueIcon>
+
+                        }
+                        {
+                            showOptions.value
+                            &&
+                            <div class={"z-[100] bg-white/50 backdrop-blur-md  p-2 w-[140px] absolute flex flex-col right-5 top-0 rounded-lg gap-y-1"}
+
+                                v-outside-click={() => {
+                                    showOptions.value = false
+                                }}>
+                                {
+                                    SimpleShowStringType.map(item => (
+                                        <div class={clsx("flex items-center whitespace-nowrap py-1 rounded  hover:text-[#333]  justify-center",
+                                            settingStore.state.simpleModeShowString.includes(item.value) ?
+                                                "bg-black/20  text-[#333] " : "text-[#666]"
+                                        )}
+                                            onClick={(e) => {
+                                                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)
+                                            }}
+                                        >
+                                            <span class={""}>{item.label}</span>
+                                        </div>
+                                    ))
+                                }
+                            </div>
+                        }
+
+                    </span>
+                    <span class={"px-2 py-[7px] hover:bg-black/20 opacity-60 rounded cursor-pointer"}
                         onClick={() => {
                             layoutStore.state.simple = !layoutStore.state.simple
                         }}
                     >{layoutStore.state.simple ? '极简' : '常规'}</span>
+                </div>
+
                 <div onClick={() => {
                     settingStore.state.showTop = settingStore.state.showTop === 'auto' ? 'show' : 'auto'
                 }}>

src/main.css

@@ -163,19 +163,16 @@ body {
 .modal-enter-active,
 .modal-leave-active {
   transition:
-    transform 0.3s ease-in-out,
+    transform 2s ease-in-out,
-    opacity 0.3s 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 {

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) }
   },

src/widgets/work/useTomatoStore.ts

@@ -91,7 +91,6 @@ export default defineStore("work", () => {
 
     }
     watch(remainingTime, (val) => {
-        console.log(val);
         
         if (val < 0) {
             stopTomatoTime()