添加网址导航-自定义网址导航-文字和背景选择样式优化（参考备注）

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>
-        <Form.Item label="地址">
+        <Form.Item label="地址" class={'relative'}>
-          <InputGroup compact style="display:flex">
           <Input
             v-model:value={form.link}
             placeholder="搜索想要添加的网址导航"
-              class="w-0 flex-grow"
+            class={isGame?.value ? '' : ' bg-black/10 '}
           />
-            <Button
+          <span
+            class={'absolute right-[-70px] top-1/2 -translate-y-1/2 cursor-pointer'}
             onClick={() => {
               debounced.value = debounced.value + ' '
             }}
           >
             获取地址
-            </Button>
+          </span>
-          </InputGroup>
         </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="图标背景">
-              <Form.Item
+              <NativeColorPicker
-                label="文字颜色"
+                size={30}
-                class="w-0 flex-grow"
+                colorList={[
-                labelCol={{
+                  'rgb(227, 127, 53)',
-                  span: 8
+                  '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
                 }}
-              >
+              ></NativeColorPicker>
-                <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>
             <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>
           </>
         )}

src/utils/NativeColorPicker.tsx

@@ -1,11 +1,11 @@
-import clsx from "clsx";
+import clsx from 'clsx'
-import { computed } from "vue";
+import { computed } from 'vue'
-import { defineComponent } from "vue";
+import { defineComponent } from 'vue'
-import { MdCheck } from "oh-vue-icons/icons";
+import { MdCheck } from 'oh-vue-icons/icons'
-import { addIcons, OhVueIcon } from "oh-vue-icons";
+import { addIcons, OhVueIcon } from 'oh-vue-icons'
 addIcons(MdCheck)
 export default defineComponent({
-    name: "NativeColorPicker",
+  name: 'NativeColorPicker',
   props: {
     value: {
       type: String,
@@ -15,18 +15,21 @@ export default defineComponent({
       type: Array<string>
     },
     class: {
-            type: String,
+      type: String
     },
     transparent: {
-            type: Boolean,
+      type: Boolean
     },
     firstColor: {
-            type: String,
+      type: String
-
+    },
+    size: {
+      type: Number,
+      default: 20
     }
   },
   emits: {
-        "update:value": (_value: string) => true,
+    'update:value': (_value: string) => true
   },
   setup(props, context) {
     const firstColor = props.value
@@ -53,13 +56,16 @@ export default defineComponent({
       }
       return list
     })
-        return () => <div class={clsx("flex items-center gap-x-2 ", props.class)}>
+    return () => (
-            {
+      <div class={clsx('flex items-center gap-x-2 ', props.class)}>
-                colorList.value.map((item, index) => < div
+        {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"
+            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'
@@ -78,24 +84,25 @@ export default defineComponent({
             }"
                 >
         </Checkmark16Filled> */}
-                    {
+            {props.value === item && (
-                        props.value === item &&
+              <OhVueIcon class="text-[#888]" name={MdCheck.name}></OhVueIcon>
-                        <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"
+          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) => {
-                        onInput={(e: any)=> {
                 context.emit('update:value', e?.target.value)
               }}
               ref="inputRef"
@@ -104,6 +111,7 @@ export default defineComponent({
             />
           </div>
         </div>
-        </div >
+      </div>
+    )
   }
 })

src/utils/ThemeProvider.tsx

@@ -21,6 +21,7 @@ export default defineComponent({
           },
 
           components: {
+      
             Slider: {
               railSize: 6
             },