From 3a07dae8b38a37d112a0f248779e0fade2b1579e Mon Sep 17 00:00:00 2001
From: expdsn <18111002318@163.com>
Date: Thu, 14 Nov 2024 18:59:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9f001-f006?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                     |  8 ++++-
 src/layout/GlobalMenu.tsx       | 46 ++++++++++++++++++++----
 src/layout/grid/WelcomePage.tsx |  7 ++--
 src/layout/grid/index.tsx       |  3 ++
 src/layout/layout.types.ts      |  3 +-
 src/layout/sider/ModeSwitch.tsx |  3 ++
 src/layout/sider/index.tsx      | 63 +++++++++++++++++++++++++++------
 7 files changed, 110 insertions(+), 23 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6b57a3d..a07d417 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,7 +30,13 @@ const layout = useLayoutStore()
 <template>
   <div class="fixed left-0 top-0 w-full h-screen style-root" @contextmenu.prevent>
     <Header />
-    <Background />
+    <Background
+      @dblclick="
+        () => {
+          layout.state.simple = !layout.state.simple
+        }
+      "
+    />
     <GLobalModal />
     <SettingsOverlay />
     <SettingsButton />
diff --git a/src/layout/GlobalMenu.tsx b/src/layout/GlobalMenu.tsx
index 6ead049..06c3113 100644
--- a/src/layout/GlobalMenu.tsx
+++ b/src/layout/GlobalMenu.tsx
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
-import { computed, defineComponent, onUnmounted, reactive } from 'vue'
-import type { Block } from './layout.types'
+import { computed, defineComponent, onUnmounted, reactive, ref } from 'vue'
+import type { Block, LayoutPages } from './layout.types'
 import clsx from 'clsx'
 import useLayoutStore from './useLayoutStore'
 import widgetList from '@/widgets'
@@ -11,11 +11,17 @@ import useSettingsStore from '@/settings/useSettingsStore'
 const defaultDisplay = {
   x: 0,
   y: 0,
-  type: 'global' as Block | 'global' | 'dock'
+  type: 'global' as Block | 'global' | 'dock' | 'page'
 }
 
 export const useMenuStore = defineStore('menu', () => {
   const display = reactive(defaultDisplay)
+  const selectPage = ref<{
+    id: string,
+    label: string,
+    name: string,
+  }>()
+  const showEditPage = ref(false)
   const mPos = {
     x: 0,
     y: 0
@@ -43,7 +49,9 @@ export const useMenuStore = defineStore('menu', () => {
     display,
     open,
     dismiss,
-    show
+    show,
+    selectPage,
+    showEditPage
   }
 })
 
@@ -75,8 +83,8 @@ const Item = defineComponent({
         style={
           props.noStyle
             ? {
-                padding: '6px 10px'
-              }
+              padding: '6px 10px'
+            }
             : {}
         }
         onClick={() => {
@@ -184,6 +192,32 @@ export default defineComponent(() => {
               </>
             )
           }
+          if (menu.display.type === 'page') {
+            return (
+              <>
+                <Item
+                  onClick={() => {
+                    menu.showEditPage = true
+                    menu.dismiss()
+                  }}
+                >
+                  编辑
+                </Item>
+                <Item
+                  alert
+                  onClick={() => {
+                    // 删除链接
+                    const idx = layout.currentPage.list.findIndex((el) => el.id === block.id)
+                    if (idx < 0) return
+                    layout.currentPage.list.splice(idx, 1)
+                    menu.dismiss()
+                  }}
+                >
+                  删除
+                </Item>
+              </>
+            )
+          }
           const block = menu.display.type
           if (!block.link) {
             // 小组件
diff --git a/src/layout/grid/WelcomePage.tsx b/src/layout/grid/WelcomePage.tsx
index ceac05f..d55bf7e 100644
--- a/src/layout/grid/WelcomePage.tsx
+++ b/src/layout/grid/WelcomePage.tsx
@@ -2,7 +2,6 @@ import { computed, defineComponent, onMounted, ref, Transition } from 'vue'
 import WelcomeImg from '~/icons/welcome/welcomeTitle.png'
 import DivBgImg from '~/icons/welcome/back.png'
 import startUseImg from '~/icons/welcome/startUse.png'
-import useBackgroundStore from '../background/useBackgroundStore'
 import useLayoutStore from '../useLayoutStore'
 import request from '@/utils/request'
 import useStatisticStore from '@/utils/useStatisticStore'
@@ -13,7 +12,7 @@ export const DefaultPageSetting = [
       'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/831a4d4c-61ff-4bae-ad31-9c0f4fa2db1c.webp',
     contentUrl:
       'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/b2f3ed2f-f550-499b-8ea1-dfd192cfd388.webp',
-    desct: '聚合多类游戏工具，以及 资讯、排行榜'
+    desct: '聚合多类游戏工具，以及 资讯、排行榜等'
   },
   {
     name: '工作台',
@@ -29,7 +28,7 @@ export const DefaultPageSetting = [
       'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/73164094-cb0d-4366-8d1a-afc84ac119cc.webp',
     contentUrl:
       'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/bcbbffc6-c8a4-4c8e-8ba5-36fa1fbad4f9.webp',
-    desct: '综合办公、学习、游戏等 属性，功能较为均'
+    desct: '综合办公、学习、游戏等 属性，功能较为均勺'
   }
 ]
 export default defineComponent(() => {
@@ -97,7 +96,7 @@ export default defineComponent(() => {
 
                       }}
                       style={{
-                        transform: `translate(${idx === selectMode.value ? 80 : idx === (selectMode.value + 1) % 2 ? 219 : -52}px) scale(${idx === selectMode.value ? 1 : 0.85
+                        transform: `translate(${idx === selectMode.value ? 80 : (((selectMode.value === 2 && idx === 0) || (selectMode.value + 1 === idx)) ? 219 : -52)}px) scale(${idx === selectMode.value ? 1 : 0.85
                           })`,
                         backgroundImage: `url('${DivBgImg}')`,
                         backgroundSize: '100% 100%',
diff --git a/src/layout/grid/index.tsx b/src/layout/grid/index.tsx
index a5d9a3e..a9e4985 100644
--- a/src/layout/grid/index.tsx
+++ b/src/layout/grid/index.tsx
@@ -21,6 +21,8 @@ export default defineComponent(() => {
 
   return () => (
     <div
+
+
       class="absolute left-0 top-0 w-full h-screen overflow-y-auto no-scrollbar pt-[240px] px-[calc((100%_-_var(--main-width))_/_2)]"
       onScroll={(e) => {
         const h = (e.target as any).scrollTop
@@ -57,6 +59,7 @@ export default defineComponent(() => {
       }}
     >
       <div
+
         class="w-full grid justify-center grid-flow-row-dense pb-[200px]"
         style="grid-template-columns:repeat(auto-fill, var(--block-size));grid-auto-rows:var(--block-size)"
         ref={container}
diff --git a/src/layout/layout.types.ts b/src/layout/layout.types.ts
index 6fcfc08..5210357 100644
--- a/src/layout/layout.types.ts
+++ b/src/layout/layout.types.ts
@@ -26,7 +26,7 @@ export interface Block {
   extra?: any
 }
 
-export type LayoutPages = { list: Block[]; label: string; name: string }[]
+export type LayoutPages = { list: Block[]; label: string; name: string; id: string }[]
 
 export interface Layout {
   content: [
@@ -52,3 +52,4 @@ export interface Layout {
   dockLabels: string
   simple: boolean
 }
+
diff --git a/src/layout/sider/ModeSwitch.tsx b/src/layout/sider/ModeSwitch.tsx
index 5dd7f50..2334c65 100644
--- a/src/layout/sider/ModeSwitch.tsx
+++ b/src/layout/sider/ModeSwitch.tsx
@@ -16,9 +16,12 @@ export default defineComponent(() => {
     () => layout.state.current,
     (val) => {
       selected.value = val
+      hover.value = false
+
     },
     { immediate: true }
   )
+
   return () => (
     <div
       class="w-[56px] h-[56px] relative cursor-pointer"
diff --git a/src/layout/sider/index.tsx b/src/layout/sider/index.tsx
index 4f5a9b1..d05346b 100644
--- a/src/layout/sider/index.tsx
+++ b/src/layout/sider/index.tsx
@@ -9,7 +9,8 @@ import useUserStore from '@/user/useUserStore'
 import AvatarCircle from '@/user/AvatarCircle'
 import clsx from 'clsx'
 import useSettingsStore from '@/settings/useSettingsStore'
-
+import { useMenuStore } from '../GlobalMenu'
+import { v4 as uuid } from 'uuid'
 initIcons()
 addIcons(PxHeadset, PxAddBox, PxCheck)
 const Item = defineComponent({
@@ -29,6 +30,10 @@ const Item = defineComponent({
     active: {
       type: Boolean,
       default: false
+    },
+    id: {
+      type: String,
+      default: ''
     }
   },
   emits: ['click'],
@@ -36,6 +41,16 @@ const Item = defineComponent({
     const hover = ref(false)
     return () => (
       <div
+        onContextmenu={(e) => {
+          useMenuStore().open('page')
+          useMenuStore().selectPage = {
+            id: props.id,
+            label: props.label,
+            name: props.name,
+          }
+          e.stopPropagation()
+          e.preventDefault()
+        }}
         class={
           'relative z-10 w-full h-[56px] flex flex-col justify-center items-center text-[13px] cursor-pointer transition-all font-bold ' +
           (props.active ? 'text-white' : hover.value ? 'text-white' : 'text-white/80')
@@ -57,7 +72,7 @@ const Item = defineComponent({
   }
 })
 export default defineComponent(() => {
-  const showEdit = ref(false)
+  const menu = useMenuStore()
   const selected = ref(icons[0])
   const router = useRouterStore()
   const layout = useLayoutStore()
@@ -72,6 +87,21 @@ export default defineComponent(() => {
     },
     { immediate: true }
   )
+  watch(
+    () => menu.selectPage,
+    (val) => {
+      if (val) {
+        selected.value = {
+          name: val.name,
+          label: val.label
+        }
+        label.value = val.label
+      } else {
+        selected.value = icons[0]
+        label.value = ''
+      }
+    }
+  )
   return () => (
     <Transition>
       {layout.ready && (
@@ -112,6 +142,7 @@ export default defineComponent(() => {
                       key={idx}
                       name={el.name}
                       label={el.label}
+                      id={el.id}
                       idx={idx}
                       active={layout.state.currentPage === idx}
                       onClick={() => {
@@ -137,7 +168,7 @@ export default defineComponent(() => {
                 name="px-add-box"
                 label="添加"
                 onClick={() => {
-                  showEdit.value = true
+                  menu.showEditPage = true
                 }}
               />
               <Item
@@ -161,14 +192,14 @@ export default defineComponent(() => {
               </div>
             </div>
             {/* 添加页面 */}
-            {showEdit.value && (
+            {menu.showEditPage && (
               <div
                 class={clsx(
                   'absolute  bottom-0 w-56 rounded-lg p-4 bg-white/40 backdrop-blur shadow-lg',
                   settings.state.siderDirection === 'left' ? 'left-[70px]' : 'right-[70px]'
                 )}
                 v-outside-click={() => {
-                  showEdit.value = false
+                  menu.showEditPage = false
                 }}
               >
                 <input
@@ -196,15 +227,25 @@ export default defineComponent(() => {
                 <div
                   class="w-full mt-2 py-1 rounded-lg bg-white text-center text-sm shadow hover:shadow-lg transition-all cursor-pointer"
                   onClick={() => {
-                    layout.currentMode.pages.push({
-                      list: [],
-                      label: label.value,
-                      name: selected.value.name
-                    })
+                    if (menu.selectPage) {
+                      menu.selectPage.name = selected.value.name
+                      menu.selectPage.label = label.value
+        
+                    } else {
+                      layout.currentMode.pages.push({
+                        list: [],
+                        label: label.value,
+                        name: selected.value.name,
+                        id: uuid()
+                      })
+                    }
+
+                    menu.showEditPage = false
+
                   }}
                 >
                   <OhVueIcon name="px-check" />
-                  添加页面
+                  {menu.selectPage ? "修改页面" : "添加页面"}
                 </div>
               </div>
             )}