From cc46aafb3b974e9de6f87ec7968d8e0d97f4904b Mon Sep 17 00:00:00 2001
From: expdsn <18111002318@163.com>
Date: Fri, 15 Nov 2024 18:11:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=BD=91=E5=9D=80=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA-=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BD=91=E5=9D=80?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA-=E6=96=87=E5=AD=97=E5=92=8C=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E9=80=89=E6=8B=A9=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=EF=BC=88=E5=8F=82=E8=80=83=E5=A4=87=E6=B3=A8=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/adder/CustomAdder.tsx |  99 +++++++--------
 src/utils/NativeColorPicker.tsx  | 200 ++++++++++++++++---------------
 src/utils/ThemeProvider.tsx      |   1 +
 3 files changed, 157 insertions(+), 143 deletions(-)

diff --git a/src/layout/adder/CustomAdder.tsx b/src/layout/adder/CustomAdder.tsx
index bfa3726..0e1c11a 100644
--- a/src/layout/adder/CustomAdder.tsx
+++ b/src/layout/adder/CustomAdder.tsx
@@ -15,6 +15,7 @@ import { AddToToken } from './AdderPage'
 import DefaultImg from '/tab/icons/bgGameCloud.png'
 import useAdderPageStore, { type EditBlockItemType } from './useAdderPageStore'
 import useRouterStore from '@/useRouterStore'
+import NativeColorPicker from '@/utils/NativeColorPicker'
 addIcons(MdUpload, MdImage, MdCheck)
 
 const TypeSelector = defineComponent({
@@ -171,6 +172,20 @@ export default defineComponent(() => {
     if (val.name) form.name = val.name
     if (val.icon) form.icon = val.icon
   })
+  watch(
+    () => form.type,
+    (cur, pre) => {
+      if (cur === 1) {
+        if (!form.name) {
+          globalToast.error('文字图标请至少填写文字或者名称')
+          form.type = pre
+          return
+        } else {
+          form.text = form.name.substring(0, 2).toLocaleUpperCase()
+        }
+      }
+    }
+  )
   const addTo = inject(AddToToken)
   return () => (
     <div
@@ -179,25 +194,24 @@ export default defineComponent(() => {
         (isGame.value ? 'bg-white/20' : 'bg-white/70')
       }
     >
-      <Form labelCol={{ span: 4 }} labelAlign="left">
-        <Form.Item label="地址">
-          <InputGroup compact style="display:flex">
-            <Input
-              v-model:value={form.link}
-              placeholder="搜索想要添加的网址导航"
-              class="w-0 flex-grow"
-            />
-            <Button
-              onClick={() => {
-                debounced.value = debounced.value + ' '
-              }}
-            >
-              获取地址
-            </Button>
-          </InputGroup>
+      <Form>
+        <Form.Item label="地址" class={'relative'}>
+          <Input
+            v-model:value={form.link}
+            placeholder="搜索想要添加的网址导航"
+            class={isGame?.value ? '' : ' bg-black/10 '}
+          />
+          <span
+            class={'absolute right-[-70px] top-1/2 -translate-y-1/2 cursor-pointer'}
+            onClick={() => {
+              debounced.value = debounced.value + ' '
+            }}
+          >
+            获取地址
+          </span>
         </Form.Item>
         <Form.Item label="名称">
-          <Input v-model:value={form.name} />
+          <Input v-model:value={form.name} class={isGame?.value ? '' : ' bg-black/10 '} />
         </Form.Item>
         <Form.Item label="图标">
           <TypeSelector
@@ -211,38 +225,29 @@ export default defineComponent(() => {
         </Form.Item>
         {form.type === 1 && (
           <>
-            <div class="flex">
-              <Form.Item
-                label="文字颜色"
-                class="w-0 flex-grow"
-                labelCol={{
-                  span: 8
+            <Form.Item label="图标背景">
+              <NativeColorPicker
+                size={30}
+                colorList={[
+                  'rgb(227, 127, 53)',
+                  'rgb(239, 195, 57)',
+                  'rgb(65, 201, 117)',
+                  'rgb(67, 195, 195)',
+                  'rgb(97, 182, 255)',
+                  'rgb(153, 91, 179)'
+                ]}
+                value={form.background}
+                onUpdate:value={(e) => {
+                  form.background = e
                 }}
-              >
-                <ColorPicker
-                  class="shadow-lg"
-                  format="rgb"
-                  shape="square"
-                  v-model:pureColor={form.color}
-                />
-              </Form.Item>
-              <Form.Item
-                label="图标背景"
-                class="w-0 flex-grow"
-                labelCol={{
-                  span: 8
-                }}
-              >
-                <ColorPicker
-                  class="shadow-lg"
-                  format="rgb"
-                  shape="square"
-                  v-model:pureColor={form.background}
-                />
-              </Form.Item>
-            </div>
+              ></NativeColorPicker>
+            </Form.Item>
             <Form.Item label="图标文字">
-              <Input v-model:value={form.text} maxlength={2} />
+              <Input
+                v-model:value={form.text}
+                maxlength={2}
+                class={isGame?.value ? '' : ' bg-black/10 '}
+              />
             </Form.Item>
           </>
         )}
diff --git a/src/utils/NativeColorPicker.tsx b/src/utils/NativeColorPicker.tsx
index 9c113ca..4bc7ef8 100644
--- a/src/utils/NativeColorPicker.tsx
+++ b/src/utils/NativeColorPicker.tsx
@@ -1,76 +1,82 @@
-import clsx from "clsx";
-import { computed } from "vue";
-import { defineComponent } from "vue";
-import { MdCheck } from "oh-vue-icons/icons";
-import { addIcons, OhVueIcon } from "oh-vue-icons";
+import clsx from 'clsx'
+import { computed } from 'vue'
+import { defineComponent } from 'vue'
+import { MdCheck } from 'oh-vue-icons/icons'
+import { addIcons, OhVueIcon } from 'oh-vue-icons'
 addIcons(MdCheck)
 export default defineComponent({
-    name: "NativeColorPicker",
-    props: {
-        value: {
-            type: String,
-            default: ''
-        },
-        colorList: {
-            type: Array<string>
-        },
-        class: {
-            type: String,
-        },
-        transparent: {
-            type: Boolean,
-        },
-        firstColor: {
-            type: String,
-
-        }
+  name: 'NativeColorPicker',
+  props: {
+    value: {
+      type: String,
+      default: ''
     },
-    emits: {
-        "update:value": (_value: string) => true,
+    colorList: {
+      type: Array<string>
     },
-    setup(props, context) {
-        const firstColor = props.value
-        const colorList = computed(() => {
-            let list = [
-                '#ffffff',
-                '#000000',
-                '#FA9B3F',
-                '#333333',
-                '#6D7278',
-                '#D8D8D8',
-                '#0091FF',
-                '#B620E0',
-                '#F31260'
-            ]
-            if (props.colorList) {
-                list = props.colorList
-            }
-            if (props.transparent) {
-                list.push('transparent')
-            }
-            if (!list.includes(firstColor)) {
-                list.unshift(firstColor)
-            }
-            return list
-        })
-        return () => <div class={clsx("flex items-center gap-x-2 ", props.class)}>
-            {
-                colorList.value.map((item, index) => < div
-                    key={index}
-                    onClick={() => context.emit('update:value', item)}
-                    class="text-[12px] cursor-pointer w-[20px] h-[20px] shadow-[0_0_2px_#999] rounded-full"
-                    style={{
-                        backgroundColor: item === 'transparent' ? '' : item,
-                        backgroundImage:
-                            item === 'transparent'
-                                ? `linear-gradient(45deg, rgba(0, 0, 0, 0.4) 25%, white 25%, transparent 75%,rgba(0, 0, 0, 0.4) 75%),
+    class: {
+      type: String
+    },
+    transparent: {
+      type: Boolean
+    },
+    firstColor: {
+      type: String
+    },
+    size: {
+      type: Number,
+      default: 20
+    }
+  },
+  emits: {
+    'update:value': (_value: string) => true
+  },
+  setup(props, context) {
+    const firstColor = props.value
+    const colorList = computed(() => {
+      let list = [
+        '#ffffff',
+        '#000000',
+        '#FA9B3F',
+        '#333333',
+        '#6D7278',
+        '#D8D8D8',
+        '#0091FF',
+        '#B620E0',
+        '#F31260'
+      ]
+      if (props.colorList) {
+        list = props.colorList
+      }
+      if (props.transparent) {
+        list.push('transparent')
+      }
+      if (!list.includes(firstColor)) {
+        list.unshift(firstColor)
+      }
+      return list
+    })
+    return () => (
+      <div class={clsx('flex items-center gap-x-2 ', props.class)}>
+        {colorList.value.map((item, index) => (
+          <div
+            key={index}
+            onClick={() => context.emit('update:value', item)}
+            class="text-[12px] cursor-pointer w-[20px] h-[20px] flex items-center justify-center shadow-[0_0_2px_#999] rounded-full"
+            style={{
+              width: props.size + 'px',
+              height: props.size + 'px',
+              backgroundColor: item === 'transparent' ? '' : item,
+              backgroundImage:
+                item === 'transparent'
+                  ? `linear-gradient(45deg, rgba(0, 0, 0, 0.4) 25%, white 25%, transparent 75%,rgba(0, 0, 0, 0.4) 75%),
             linear-gradient(45deg,rgba(0, 0, 0, 0.4) 25%, white 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%)`
-                                : '',
-                        backgroundPosition: item === 'transparent' ? '0 0, 2px 2px' : '',
-                        backgroundSize: item === 'transparent' ? '4px 4px' : ''
-                    }}
-                >
-                    {/* <Checkmark16Filled
+                  : '',
+              backgroundPosition: item === 'transparent' ? '0 0, 2px 2px' : '',
+              backgroundSize: item === 'transparent' ? '4px 4px' : ''
+            }}
+          >
+            {/* <Checkmark16Filled
                 class="text-[#888]"
             : class="props.modelValue === item ? '' : 'hidden'"
             : style="{
@@ -78,32 +84,34 @@ export default defineComponent({
             }"
                 >
         </Checkmark16Filled> */}
-                    {
-                        props.value === item &&
-                        <OhVueIcon class="text-[#888]" name={MdCheck.name} ></OhVueIcon>
+            {props.value === item && (
+              <OhVueIcon class="text-[#888]" name={MdCheck.name}></OhVueIcon>
+            )}
+          </div>
+        ))}
 
-                    }
-                </div >)
-            }
-
-            <div
-                class="text-[12px] cursor-pointer w-[20px] h-[20px] shadow-[0_0_2px_#999] rounded-full relative"
-            >
-                <div
-                    class="w-full h-full rounded-full cursor-pointer"
-                    style="background: conic-gradient(#dd0010, yellow, green, #0091ff, red)"
-                >
-                    <input
-
-                        onInput={(e: any)=> {
-                            context.emit('update:value', e?.target.value)
-                        }}
-                        ref="inputRef"
-                        type="color"
-                        style="opacity: 0"
-                    />
-                </div>
-            </div>
-        </div >
-    }
-})
\ No newline at end of file
+        <div
+          class="text-[12px] cursor-pointer  shadow-[0_0_2px_#999] rounded-full relative"
+          style={{
+            width: props.size + 'px',
+            height: props.size + 'px'
+          }}
+        >
+          <div
+            class="w-full h-full rounded-full cursor-pointer"
+            style="background: conic-gradient(#dd0010, yellow, green, #0091ff, red)"
+          >
+            <input
+              onInput={(e: any) => {
+                context.emit('update:value', e?.target.value)
+              }}
+              ref="inputRef"
+              type="color"
+              style="opacity: 0"
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+})
diff --git a/src/utils/ThemeProvider.tsx b/src/utils/ThemeProvider.tsx
index 24395d1..031deff 100644
--- a/src/utils/ThemeProvider.tsx
+++ b/src/utils/ThemeProvider.tsx
@@ -21,6 +21,7 @@ export default defineComponent({
           },
 
           components: {
+      
             Slider: {
               railSize: 6
             },