完成模式切换按钮

src/App.vue

@@ -33,11 +33,14 @@ const layout = useLayoutStore()
     <GLobalModal />
     <SettingsOverlay />
     <SettingsButton />
-    <Sider />
+
-    <LoginModal v-if="router.path === 'global-login'"/>
+    <Sider v-if="!layout.state.simple" />
-    <Grid v-if="layout.ready" />
+    <LoginModal v-if="router.path === 'global-login'" />
-    <Dock />
+    <Transition>
-    <div class="fixed z-40 right-[14%] top-8">
+      <Grid v-if="layout.ready && !layout.state.simple" />
+    </Transition>
+    <Dock v-if="!layout.state.simple" />
+    <div class="fixed z-40 right-[14%] top-8" v-if="!layout.state.simple">
       <Fox />
     </div>
     <DirModal />

src/layout/header/GlobalTime.tsx

@@ -44,7 +44,7 @@ export default defineComponent({
           color: 'white',
           transitionDuration: '.4s',
           left: layout.isCompact ? '20px' : '50%',
-          top: layout.isCompact ? '20px' : '50px',
+          top: layout.isCompact ? '20px' : layout.state.simple?'100px':'50px',
           transform: layout.isCompact ? '' : 'translate(-50%,0)'
         }}
       >

src/layout/header/ModeChange.tsx

@@ -0,0 +1,51 @@
+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 useLayoutStore from "../useLayoutStore";
+import clsx from "clsx";
+import useSettingsStore from "@/settings/useSettingsStore";
+addIcons(BiEyeFill, BiEyeSlashFill)
+export default defineComponent(() => {
+    const layoutStore = useLayoutStore()
+    const settingStore = useSettingsStore()
+    const show = ref(false)
+
+    return () => (
+        <div class={"fixed w-[200px] h-[50px]  text-white right-0 top-0 z-10    "}
+
+            onMouseenter={() => {
+                show.value = true
+            }}
+            onMouseleave={() => {
+                show.value = false
+            }}
+        >
+            <div class={clsx("absolute duration-300 right-7 text-[14px] items-center  flex gap-x-4",
+                settingStore.state.showTop === 'auto'
+                    ? show.value
+                        ? 'top-5'
+                        : '-top-[30px]'
+                    : 'top-5'
+            )}>
+                <span class={"px-2 py-1 hover:bg-black/20 rounded cursor-pointer"}
+                    onClick={() => {
+                        layoutStore.state.simple = !layoutStore.state.simple
+                    }}
+                >{layoutStore.state.simple ? '极简' : '常规'}</span>
+                <div onClick={() => {
+                    settingStore.state.showTop = settingStore.state.showTop === 'auto' ? 'show' : 'auto'
+                }}>
+                    {
+                        settingStore.state.showTop === 'auto' ?
+                            <OhVueIcon name={BiEyeSlashFill.name} class={"cursor-pointer opacity-60 hover:opacity-100"} fill="#fff" scale={1.5}></OhVueIcon>
+                            :
+                            <OhVueIcon name={BiEyeFill.name} class={"cursor-pointer opacity-60 hover:opacity-100"} fill="#fff" scale={1.5}></OhVueIcon>
+
+                    }
+
+                </div>
+            </div>
+        </div>
+    )
+})

src/layout/header/index.tsx

@@ -1,5 +1,6 @@
 import { defineAsyncComponent, defineComponent } from 'vue'
 import Search from './search'
+import ModeChange from './ModeChange'
 
 const GlobalTime = defineAsyncComponent({
   loader: () => import('./GlobalTime')
@@ -11,6 +12,7 @@ export default defineComponent({
       <>
         <GlobalTime />
         <Search />
+        <ModeChange />
       </>
     )
   }

src/layout/header/search/index.tsx

@@ -23,7 +23,7 @@ export default defineComponent((props: {
 
         } :
           {
-            top: layout.isCompact ? '40px' : '172px',
+            top: layout.isCompact ? '40px' : layout.state.simple ? '230px' : '172px',
             width: settings.state.searchWidth + 'rem'
           }}
     >

src/main.css

@@ -134,7 +134,7 @@ body {
 /* 默认动画 */
 .v-enter-active,
 .v-leave-active {
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.15s ease-in-out;
 }
 
 .v-enter-from,

src/settings/useSettingsStore.ts

@@ -15,6 +15,7 @@ export default defineStore(
       showSider: 'show' as VisibleState,
       showDock: 'show' as VisibleState,
       showPet: 'show' as VisibleState,
+      showTop: 'show' as VisibleState,
       showTime: true,
       timeOptions: ['date', 'week', '12hour', 'lunal', 'second'] as TimeUnit[],
       showAdder: true,

src/widgets/discount/Modal.tsx

@@ -1,12 +1,9 @@
 import { defineComponent, onMounted, ref, watch, type VNodeRef } from 'vue'
-import useGameNews from './useDiscountStore'
 import { RiTimeLine } from 'oh-vue-icons/icons'
 import { addIcons, OhVueIcon } from 'oh-vue-icons'
 import { IoCloseCircleOutline, RiCloseCircleLine } from 'oh-vue-icons/icons'
-import dayjs from 'dayjs'
 import useDiscountStore from './useDiscountStore'
 import { debounce } from 'lodash'
-import { request } from 'http'
 addIcons(RiTimeLine, IoCloseCircleOutline, RiCloseCircleLine)
 export default defineComponent(() => {
   const store = useDiscountStore()
@@ -22,7 +19,6 @@ export default defineComponent(() => {
     }
   }
   const debouncedHandler = debounce((newValue) => {
-    console.log('数值改变并已防抖处理:', newValue)
     searchText.value = newValue
     store.state.find = newValue
     store.searchList = []
@@ -101,7 +97,7 @@ export default defineComponent(() => {
                               {item.typename}
                             </span>
                           </div>
-                          <div class="bg-white/20 flex rounded items-center">
+                          <div class="bg-white/20 flex rounded items-center gap-x-2">
                             <div class="bg-[#ef5a41] h-full text-white rounded px-2 text-[18px] font-bold ">
                               -13%
                             </div>
@@ -111,8 +107,8 @@ export default defineComponent(() => {
                             <span class="text-[12px] text-[#bdbdbd] line-through decoration-current">
                               ￥{item.commdity[0]?.oldprice}
                             </span>
-                            <span class="text-[12px] text-[#ebebeb] line-through decoration-current">
+                            <span class="text-[12px] text-[#ebebeb] ">
-                              剩余{item.commdity[0]?.oldprice}天
+                              剩余{1}天
                             </span>
                           </div>
                         </div>