修改f001-f006

2024-11-14 18:59:48 +08:00 · 2024-11-14 18:59:48 +08:00 · 3a07dae8b3
parent 0735174e73
commit 3a07dae8b3
7 changed files with 110 additions and 23 deletions
--- 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 />
--- 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
  }
 })

@ -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) {
            // 小组件
--- 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%',
--- 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}
--- 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
 }
+
--- 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"
--- 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={() => {
+                    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
+                        name: selected.value.name,
+                        id: uuid()
                      })
+                    }
+
+                    menu.showEditPage = false
+
                  }}
                >
                  <OhVueIcon name="px-check" />
-                  添加页面
+                  {menu.selectPage ? "修改页面" : "添加页面"}
                </div>
              </div>
            )}