change

src/GlobalModal.tsx

@@ -5,6 +5,7 @@ import { MdClose, MdOpeninfull, MdClosefullscreen } from 'oh-vue-icons/icons'
 import asyncLoader from './utils/asyncLoader'
 addIcons(MdClose, MdOpeninfull, MdClosefullscreen)
 const SearchPage = asyncLoader(() => import('@/layout/header/search/SearchPage'))
+const AdderPage = asyncLoader(() => import('@/layout/adder/AdderPage'))
 
 const noFullList: RouteStr[] = ['global-search', 'global-adder']
 
@@ -46,7 +47,10 @@ export default defineComponent(() => {
           >
             {/* 关闭按钮 */}
             <div
-              class="w-5 h-5 flex justify-center items-center rounded-full overflow-hidden absolute top-2 right-2 bg-red-500/70 hover:bg-red-500 transition-all cursor-pointer z-30"
+              class={
+                'w-5 h-5 flex justify-center items-center rounded-full overflow-hidden absolute bg-red-500/70 hover:bg-red-500 transition-all cursor-pointer z-30 ' +
+                (router.path === 'global-adder' ? 'top-6 right-4' : 'top-2 right-2')
+              }
               onClick={() => {
                 router.path = ''
               }}
@@ -70,7 +74,13 @@ export default defineComponent(() => {
             )}
 
             <div class="w-full h-full flex justify-center items-center">
-              <Transition>{router.path === 'global-search' ? <SearchPage /> : null}</Transition>
+              <Transition>
+                {router.path === 'global-search' ? (
+                  <SearchPage />
+                ) : router.path === 'global-adder' ? (
+                  <AdderPage />
+                ) : null}
+              </Transition>
             </div>
           </div>
         )}

src/layout/adder/AdderPage.tsx

@@ -0,0 +1,107 @@
+import { computed, defineComponent, ref, Transition } from 'vue'
+import AdderPageBack from './AdderPageBack'
+import useLayoutStore from '../useLayoutStore'
+import { OhVueIcon, addIcons } from 'oh-vue-icons'
+import { MdKeyboardcommandkey, FaCompass, FaPencilRuler } from 'oh-vue-icons/icons'
+import CustomAdder from './CustomAdder'
+addIcons(MdKeyboardcommandkey, FaCompass, FaPencilRuler)
+
+const ItemButton = defineComponent({
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['click'],
+  setup(props, ctx) {
+    const layout = useLayoutStore()
+    const isGame = computed(() => layout.state.current === 0)
+    return () => (
+      <div
+        onClick={() => {
+          ctx.emit('click')
+        }}
+        class={
+          'py-2 px-4 mb-2 rounded-lg text-sm cursor-pointer transition-all ' +
+          (isGame.value
+            ? props.active
+              ? 'bg-[#626471] text-[#f7a94e]'
+              : 'hover:text-[#f7a94e] text-[#b4b5bb]'
+            : props.active
+              ? 'bg-white text-black/80 shadow'
+              : 'hover:text-black/80 hover:bg-white text-black/50')
+        }
+      >
+        <OhVueIcon name={props.name} />
+        <span class="ml-2">{props.label}</span>
+      </div>
+    )
+  }
+})
+
+export default defineComponent(() => {
+  const layout = useLayoutStore()
+  const isGame = computed(() => layout.state.current === 0)
+  const type = ref(1)
+  return () => (
+    <div class="w-full h-full relative flex">
+      {isGame.value && <AdderPageBack />}
+      <div
+        class={
+          'w-[200px] h-full relative z-10 pt-[100px] ' +
+          (isGame.value ? 'pl-6 pr-2' : 'bg-white/60 backdrop-blur px-4')
+        }
+      >
+        <ItemButton
+          name="md-keyboardcommandkey"
+          label="功能组件"
+          active={type.value === 0}
+          onClick={() => {
+            type.value = 0
+          }}
+        />
+        <ItemButton
+          name="fa-compass"
+          label="网站图标"
+          active={type.value === 1}
+          onClick={() => {
+            type.value = 1
+          }}
+        />
+        <ItemButton
+          name="fa-pencil-ruler"
+          label="自定义网址"
+          active={type.value === 2}
+          onClick={() => {
+            type.value = 2
+          }}
+        />
+      </div>
+      <div
+        class={
+          'w-0 h-full flex-grow relative z-10 flex flex-col ' +
+          (isGame.value ? '' : 'bg-white/40 backdrop-blur')
+        }
+        onContextmenu={(e) => e.stopPropagation()}
+      >
+        <div class="w-full h-[60px]"></div>
+        <div class="w-full h-0 flex-grow p-6">
+          <div class="w-full h-full relative">
+            <Transition>
+              {type.value === 0 ? '' : type.value === 1 ? '' : <CustomAdder />}
+            </Transition>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})

src/layout/adder/AdderPageBack.tsx

@@ -0,0 +1,37 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent(() => () => (
+  <svg
+    width="900"
+    height="540"
+    viewBox="0 0 900 540"
+    fill="none"
+    class="absolute left-0 top-0 w-full h-full z-0"
+  >
+    <path
+      d="M16 16C20 11.5 20 5 20 5H880.084C880.084 5 879.089 12.4299 883.067 16.8879C887.045 21.3458 895 21.8411 895 21.8411V518C895 518 887.045 516.5 883.067 521.5C879.089 526.5 880.084 535 880.084 535H20C20 535 19 528.5 16 524C13 519.5 5 518 5 518V22.5C5 22.5 12 20.5 16 16Z"
+      fill="#1F2028"
+    />
+    <path
+      d="M804.5 26.5C804.5 9.5 793.333 6.83333 789 6H878.5C878.5 6 885.5 6.85714 890 12C894.5 17.1429 894.5 22.5 894.5 22.5V67.5C894.5 67.5 856.5 66.5 853.5 58C850.5 49.5 854 38.5 850.5 30.5C848 25.5 840.5 25 831 27C821.5 29 804 35 804.5 26.5Z"
+      fill="white"
+      fill-opacity="0.06"
+    />
+    <path
+      d="M789 6C793.333 6.83333 804.5 9.5 804.5 26.5C804 35 821.5 29 831 27C840.5 25 848 25.5 850.5 30.5C854 38.5 850.5 49.5 853.5 58C856.5 66.5 894.5 67.5 894.5 67.5"
+      stroke="#39394A"
+      stroke-linecap="round"
+    />
+    <path
+      d="M796 6C800.313 6.79946 811 8.69106 811 25C810.502 33.1545 829.045 26.4187 838.5 24.5C847.955 22.5813 854.72 24.7073 857.209 29.5041C860.692 37.1789 857.209 47.7317 860.194 55.8862C863.18 64.0406 894 64 894 64"
+      stroke="#39394A"
+      stroke-linecap="round"
+    />
+    <path d="M882.017 516C874.5 520 875.5 534 875.5 534" stroke="#515260" />
+    <path d="M882 516.025C886.5 512.525 894 513 894 513" stroke="#515260" />
+    <line x1="892.5" y1="22" x2="892.5" y2="513" stroke="#515260" />
+    <path d="M7.5 25L7.50002 518" stroke="#515260" />
+    <path d="M23 6C23 6 22.6838 15 17 19.1497C14.1712 22.0032 7.5 25.5 7.5 25.5" stroke="#515260" />
+    <rect x="16" y="15" width="190" height="508" fill="#333747" />
+  </svg>
+))

src/layout/adder/CustomAdder.tsx

@@ -0,0 +1,132 @@
+import { computed, defineComponent, reactive } from 'vue'
+import useLayoutStore from '../useLayoutStore'
+import { ConfigProvider, Form, Input, theme } from 'ant-design-vue'
+import { OhVueIcon, addIcons } from 'oh-vue-icons'
+import { MdUpload, MdImage } from 'oh-vue-icons/icons'
+
+addIcons(MdUpload, MdImage)
+
+const TypeSelector = defineComponent({
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    text: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: ''
+    },
+    background: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: {
+    'update:value': (() => true) as (val: number) => boolean,
+    'update:icon': (() => true) as (val: string) => boolean
+  },
+  setup(props, ctx) {
+    return () => (
+      <div class="flex gap-4">
+        <div
+          class="w-[64px] h-[65px] bg-center bg-no-repeat bg-cover rounded-lg overflow-hidden flex justify-center items-center cursor-pointer hover:scale-105 transition-all"
+          style={{
+            backgroundImage: `url('${props.icon}')`,
+            backgroundColor: props.icon ? '' : 'rgba(0,0,0,0.2)'
+          }}
+        >
+          {!props.icon && <OhVueIcon name="md-image" fill="white" scale={1.8} />}
+        </div>
+        <div
+          class="w-[64px] h-[65px] bg-center bg-no-repeat bg-cover rounded-lg overflow-hidden flex justify-center items-center cursor-pointer hover:scale-105 transition-all"
+          style={{
+            backgroundColor: props.background
+          }}
+        >
+          <span
+            class="text-[30px]"
+            style={{
+              color: props.color
+            }}
+          >
+            {props.text ? props.text.substring(0, 2) : 'A'}
+          </span>
+        </div>
+        <div class="w-[64px] h-[65px] rounded-lg flex justify-center items-center bg-white shadow cursor-pointer hover:scale-105 transition-all">
+          <OhVueIcon name="md-upload" fill="rgba(0,0,0,0.4)" scale={1.8} />
+        </div>
+      </div>
+    )
+  }
+})
+
+export default defineComponent({
+  props: {
+    mode: {
+      type: Number,
+      default: 0
+    },
+    page: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(props, ctx) {
+    const layout = useLayoutStore()
+    const isGame = computed(() => layout.state.current === 0)
+    const form = reactive({
+      link: '',
+      name: '',
+      text: '',
+      background: '#f7a94e',
+      color: 'rgba(255,255,255,1)',
+      icon: '',
+      type: 0 // 0 默认，1 文字
+    })
+    return () => (
+      <div
+        class={
+          'absolute left-0 top-0 w-full h-full rounded-lg p-4 ' +
+          (isGame.value ? 'bg-white/10' : 'bg-white/80')
+        }
+      >
+        <ConfigProvider
+          theme={{
+            token: isGame.value
+              ? theme.darkAlgorithm(theme.defaultSeed)
+              : theme.defaultAlgorithm(theme.defaultSeed)
+          }}
+        >
+          <Form labelCol={{ span: 6 }} model={form} class="grid grid-cols-2 gap-4" colon={false}>
+            <Form.Item label="地址" name="link" class="col-span-2" labelCol={{ span: 3 }}>
+              <Input v-model:value={form.link} />
+            </Form.Item>
+            <Form.Item label="名称" name="name">
+              <Input v-model:value={form.name} />
+            </Form.Item>
+            <Form.Item name="type" label=" " class="col-span-2" labelCol={{ span: 3 }}>
+              <TypeSelector
+                v-model:value={form.type}
+                v-model:icon={form.icon}
+                text={form.text}
+                color={form.color}
+                background={form.background}
+              />
+            </Form.Item>
+            <Form.Item label="图标文字" name="text">
+              <Input v-model:value={form.text} />
+            </Form.Item>
+          </Form>
+        </ConfigProvider>
+      </div>
+    )
+  }
+})