xyyd-fatfox/src/layout/adder/CustomAdder.tsx

import { computed, defineComponent, reactive, ref, watch } 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, MdCheck } from 'oh-vue-icons/icons'
import clsx from 'clsx'
import ImageUploader from '@/utils/ImageUploader'
import useLink from './useLink'

addIcons(MdUpload, MdImage, MdCheck)

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={'flex justify-center flex-col items-center gap-y-1'}>
          <div
            class="w-[47px] relative h-[47px] 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)'
            }}
            onClick={() => {
              ctx.emit('update:value', 0)
            }}
          >
            {!props.icon && <OhVueIcon name="md-image" fill="white" scale={1.8} />}
            {props.value === 0 && (
              <div
                class={
                  'w-[20px] h-[20px] rounded bg-white/50 flex items-center justify-center absolute right-0 bottom-0'
                }
              >
                <OhVueIcon name="md-check" fill="red" scale={0.8}></OhVueIcon>
              </div>
            )}
          </div>
          <span class={'text-[12px]'}>默认</span>
        </div>
        <div class={'flex justify-center flex-col items-center gap-y-1 '}>
          <div
            class="w-[44px] relative h-[44px] 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
            }}
            onClick={() => {
              ctx.emit('update:value', 1)
            }}
          >
            <span
              class="text-[20px]"
              style={{
                color: props.color
              }}
            >
              {props.text ? props.text.substring(0, 2) : 'A'}
            </span>
            {props.value === 1 && (
              <div
                class={
                  'w-[20px] h-[20px] rounded bg-white/50 flex items-center justify-center absolute right-0 bottom-0'
                }
              >
                <OhVueIcon name="md-check" fill="red" scale={0.8}></OhVueIcon>
              </div>
            )}
          </div>
          <span class={'text-[12px]'}>文字</span>
        </div>
        <div class={'flex justify-center flex-col items-center gap-y-1'}>
          <div class="w-[44px] h-[44px] rounded-lg flex justify-center items-center bg-white shadow cursor-pointer hover:scale-105 transition-all">
            <ImageUploader
              width={44}
              onUpdate:value={(e) => {
                ctx.emit('update:icon', e)
              }}
            ></ImageUploader>
          </div>
          <span class={'text-[12px]'}>自定义</span>
        </div>
      </div>
    )
  }
})

export default defineComponent({
  props: {
    mode: {
      type: Number,
      default: 0
    },
    page: {
      type: Number,
      default: 0
    }
  },
  setup(props, ctx) {
    const layout = useLayoutStore()
    const form = reactive({
      link: '',
      name: '',
      text: '',
      background: '#f7a94e',
      color: 'rgba(255,255,255,1)',
      icon: '',
      type: 0 // 0 默认，1 文字
    })
    const isGame = computed(() => layout.state.current === 0)
    const debounced = ref('')
    watch(
      () => form.link,
      (val, _, onCleanup) => {
        const it = setTimeout(() => {
          debounced.value = val
        }, 500)
        onCleanup(() => {
          clearTimeout(it)
        })
      }
    )

    const info = useLink(debounced)
    console.log(info);
    
    watch(info, (val) => {
      console.log(val);
      
      if (val.name) form.name = val.name
      if (val.icon) form.icon = val.icon

    })
    return () => (
      <div
        class={
          'absolute left-0 top-0 w-full h-full rounded-2xl p-5 ' +
          (isGame.value ? 'bg-white/20' : 'bg-white/20')
        }
      >
        <div class="flex flex-col">
          <div></div>
        </div>
        <div class={clsx('flex flex-col text-[14px] gap-y-3', isGame.value ? 'text-white' : '')}>
          <div class={clsx('gap-x-6 flex items-center')}>
            <span>地址</span>
            <input
              v-model={form.link}
              placeholder="搜索想要添加的网址导航"
              class={clsx(
                'w-[350px] rounded-md outline-none h-[40px] px-[10px]',
                isGame.value ? 'bg-black/[.1]' : ''
              )}
            ></input>
            <span class={'cursor-pointer'}>获取地址</span>
          </div>
          <div class={clsx('gap-x-6 flex items-center')}>
            <span>名称</span>
            <input
              v-model={form.name}
              placeholder="网站名称"
              class={clsx(
                'w-[350px] rounded-md outline-none h-[40px] px-[10px]',
                isGame.value ? 'bg-black/[.1]' : ''
              )}
            ></input>
          </div>
          <div class={clsx('gap-x-6 flex items-start')}>
            <span>图标</span>
            <TypeSelector
              v-model:value={form.type}
              v-model:icon={form.icon}
              text={form.text}
              color={form.color}
              background={form.background}
            />
          </div>
          <div class={clsx('gap-x-6 flex items-center')}>
            <span></span>
            <button
              v-model:value={form.name}
              placeholder="网站名称"
              class={clsx(
                'bg-gradient-to-b from-[#ffaa4e] to-[#ff6227]  rounded-lg w-[94px] h-[40px] text-[16px] ',
                isGame.value ? 'bg-black/[.1]' : ''
              )}
            >
              确定
            </button>
          </div>
        </div>
      </div>
    )
  }
})