设置-缺少重置功能

src/layout/background/BackgroundPage.tsx

@@ -1,4 +1,4 @@
-import { Button, Select, Slider } from 'ant-design-vue'
+import { Button,  Slider } from 'ant-design-vue'
 import { defineComponent, ref, Transition, watch } from 'vue'
 import useLayoutStore from '../useLayoutStore'
 import { DownloadOutlined, EyeInvisibleOutlined, SwapOutlined } from '@ant-design/icons-vue'
@@ -23,7 +23,7 @@ export default defineComponent(() => {
   const settings = useSettingsStore()
   return () => (
     <div class="absolute left-0 top-0 w-full h-full p-4 overflow-y-auto scrollbar-hide">
-      <SettingItem
+      {/* <SettingItem
         noBg
         v-slots={{
           label: () => <div>所属模式</div>
@@ -38,7 +38,7 @@ export default defineComponent(() => {
           ]}
           v-model:value={selected.value}
         />
-      </SettingItem>
+      </SettingItem> */}
       <div class="px-4">
         <div class="h-[180px]">
           {layout.background.video && layout.background.type !== 'own' ? (

src/layout/grid/Reset.tsx

@@ -1,12 +1,18 @@
 import SettingItem from '@/settings/SettingItem'
 import useSettingsStore from '@/settings/useSettingsStore'
-import { Button, Switch } from 'ant-design-vue'
+import { Button, Modal, Switch } from 'ant-design-vue'
 import clsx from 'clsx'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
+import useLayoutStore from '../useLayoutStore'
 
 export default defineComponent({
   setup() {
     const settings = useSettingsStore()
+    const open = ref(false)
+    const layout = useLayoutStore()
+    const isGame = computed(() => {
+      return layout.state.current === 0
+    })
     return () => (
       <div class="p-4 flex flex-col  ">
         <SettingItem
@@ -14,9 +20,45 @@ export default defineComponent({
             label: () => <div >重置</div>
           }}
         >
-          <Button type="primary">立即重置</Button>
+          <Button type="primary" onClick={() => {
+            open.value = true
+          }}>立即重置</Button>
         </SettingItem>
         <p class={'text-[#666] text-[12px]'}>将会把您的历史调整清空，恢复成最初的样式</p>
+        {
+          open.value &&
+          <div class={"w-[300px] h-[210px] absolute  rounded-2xl right-[-310px] z-10 bg-[#2c2e3e]"} style={
+            isGame.value ?
+              {
+                backgroundImage: `url('/tab/bg/addBorder.png')`,
+                backgroundSize: '100% 100%',
+                backgroundColor: '#2c2e3e'
+              } : {}}>
+
+            <div class={"flex flex-col w-full h-full p-7 border-b-[1px] items-center justify-between"}>
+              <span class={isGame.value ? "" : ""}>恢复提醒</span>
+              <div class={clsx("w-full h-[1px]", isGame.value ? " bg-white/20" : "bg-black/20")}></div>
+              <span class={clsx("text-[14px] leading-[20px] mb-2 text-center", isGame.value ? "text-[#fff9]" : "")}>此操作会将您的历史调整的数据清空，为防止您的误操作，请再次确认是否要进行重置</span>
+              <div class={"flex justify-between w-full"}>
+                <button
+                  onClick={() => {
+                    layout.resetAll()
+     
+                    open.value = false
+                  }}
+                  class={clsx("w-[118px] rounded-lg py-1 flex justify-center", isGame.value ? "bg-white/20" : "")}>重置</button>
+                <button
+                  onClick={() => {
+                    open.value = false
+
+                  }}
+                  class={clsx("w-[118px] rounded-lg py-1 flex justify-center", isGame.value ? "bg-[#ff7372]" : "")}>取消</button>
+
+              </div>
+            </div>
+          </div>
+        }
+
       </div >
     )
   }

src/layout/useLayoutStore.ts

@@ -26,7 +26,7 @@ const defaultLayout: Layout = {
 export default defineStore('layout', () => {
   const settings = useSettingsStore()
   const user = useUserStore()
-  const state = reactive(defaultLayout)
+  const state = reactive({ ...defaultLayout })
   const ready = ref(false)
 
   db.getItem<Layout>('layout').then((res) => {
@@ -112,7 +112,17 @@ export default defineStore('layout', () => {
     }
     return block.label || ''
   }
+  const resetAll = () => {
+    request('GET', '/api/app/desktop').then((res: any) => {
+      if (!res) return
+      state.dir = res.dir
+      state.content = res.content
 
+    }).catch(() => {
+      Object.assign(state, defaultLayout)
+
+    })
+  }
   const changeBackground = (url: string) => {
     state.content[state.current].background = url
   }
@@ -161,6 +171,7 @@ export default defineStore('layout', () => {
     openDir,
     checkDir,
     getLabel,
-    changeBackground
+    changeBackground,
+    resetAll
   }
 })

src/settings/SettingsOverlay.tsx

@@ -4,7 +4,6 @@ import useUserStore from '@/user/useUserStore'
 import useRouterStore from '@/useRouterStore'
 import asyncLoader from '@/utils/asyncLoader'
 import clsx from 'clsx'
-import { OhVueIcon } from 'oh-vue-icons'
 import { computed, defineComponent, Transition } from 'vue'
 import SettingLineImg from '~/icons/settingLine.png'
 const Content = asyncLoader(() => import('./SettingsOverlayContent'))
@@ -58,7 +57,7 @@ export default defineComponent(() => {
     return layout.state.current === 0
   })
   return () => (
-    <div class="fixed left-0 bottom-0 z-40 w-full">
+    <div class="fixed left-0 bottom-0 z-40 w-full rounded-lg">
       {/* 背景遮罩 */}
       {show.value && (
         <div
@@ -73,13 +72,20 @@ export default defineComponent(() => {
         {show.value && (
           <div
             class={clsx(
-              'absolute left-6 bottom-10   w-[660px] h-[580px] rounded-lg overflow-hidden shadow-2xl flex',
+              'absolute left-6 bottom-10   w-[660px] h-[580px] rounded-2xl  shadow-2xl flex',
               isGame.value ? 'bg-[#2c2e3e] text-white' : 'text-[#000] bg-white'
             )}
+            style={
+              isGame.value &&
+              {
+                backgroundImage: `url('/tab/bg/gameModel.png')`,
+                backgroundSize: '100% 100%',
+              }
+            }
           >
             <div
               class={clsx(
-                'w-[200px] p-4 h-full  backdrop-blur flex flex-col',
+                'w-[200px] p-4 h-full   flex flex-col rounded-lg',
                 isGame.value ? 'bg-[#fff]/10 text-white ' : 'bg-[#ebebeb]'
               )}
             >
@@ -135,7 +141,10 @@ export default defineComponent(() => {
                 <SettingsTab label="问题反馈" path="settings-fallback" />
               </div>
             </div>
+            <div class={"flex-1 w-0 h-full relative"}>
               <Content />
+
+            </div>
           </div>
         )}
       </Transition>

src/settings/SettingsOverlayContent.tsx

@@ -15,7 +15,7 @@ export default defineComponent(() => {
   const router = useRouterStore()
 
   return () => (
-    <div class="w-0 h-full flex-grow  backdrop-blur">
+    <div class="w-full h-full   rounded-xl">
       <ThemeProvider>
         {router.path === 'settings-user' ? (
           <UserPage />