xiaodou-ai-admin/src/components/MicroComponents/index.tsx

import { defineComponent, ref } from 'vue'
import { LoadingOutlined, ReloadOutlined, CopyTwoTone } from '@ant-design/icons-vue'
import { useCopy } from '@/hooks/dom'
import { Input } from 'ant-design-vue'

/* 此代码导出一个名为“ReloadIconTsx”的 Vue
组件，该组件显示一个用于重新加载内容的图标。该组件有两个道具：`loading`（一个布尔值，指示内容当前是否正在加载）和`reload`（单击重新加载图标时调用的函数）。该组件使用 Vue
中的“defineComponent”函数来定义其行为，并使用“@ant-design/icons-vue”库中的“LoadingOutlined”和“ReloadOutlined”图标来显示适当的图标。该组件还使用
Ant Design Vue 库中的“a-tooltip”组件在用户将鼠标悬停在图标上时显示工具提示。 */

export const ReloadIconTsx = defineComponent({
  name: 'reload-icon-tsx',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    reload: {
      type: Function,
      default: () => {}
    }
  },
  setup (props, context) {
    return () => (
      <a-tooltip
        title="刷新"
      >
         { props.loading ? <LoadingOutlined /> : <ReloadOutlined onClick={() => props.reload()} /> }
      </a-tooltip>
    )
  }
})

/**
 * 这是一个 TypeScript React 组件，用于呈现带有可自定义内容和操作插槽的警报。
 * @param props - 包含两个属性的对象：
 * @param context - `setup` 函数中的 `context`
 * 参数是一个对象，它提供对当前组件实例的属性和方法的访问。它包括“attrs”、“emit”、“slots”和“refs”等属性。在此特定代码中，“slots”属性用于访问
 * @returns 呈现具有两列的行的功能组件。第一列的内容由 valueSlot 槽确定，第二列的内容由 operaSlot
 * 槽确定。该组件还接受字符串类型的“value”属性和对象类型的“operaSlot”属性。
 */
export const AlertTsx = defineComponent({
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  setup (props, context) {
    const { slots } = context

    return () => (
      <a-row
        justify='space-between'
        align="middle"
        style={{
          backgroundColor: '#e6f7ff',
          border: '1px solid #91d5ff',
          minHeight: '40px',
          padding: '0px 20px '
        }}
      >
        <a-col>{ props.value ? props.value : slots.valueSlot!()}</a-col>
        <a-col>{slots.operaSlot!()}</a-col>
      </a-row>
    )
  }
})

/**
 * @description iconfont矢量库 使用的svg的格式 svg导入在public下的index.html里
 */
export const IconTsx = defineComponent({
  props: {
    name: {
      type: String,
      required: true
    }
  },
  setup (props, ctx) {
    return () => (
      <svg class="icon" aria-hidden="true" style={{ fill: '#fff' }} >
        <use style={{ fill: '#fff' }} xlinkHref={`#icon-${props.name}`}></use>
      </svg>
    )
  }
})

export const SelectTsx = defineComponent({
  name: 'select-tsx',
  props: {
    modelValue: {
      type: Object,
      required: true,
      default: () => ({})
    },
    request: {
      type: Function,
      default: () => {}
    }
  },
  emits: ['update:value'],
  setup (props, context) {
    const list = ref<{
      name: string,
      value: any,
      key: string
    }[]>([])

    props.request().then((r: {
      name: string,
      value: any,
      key: string
    }[]) => {
      list.value = r
    })

    const onInput = (value: string) => context.emit('update:value', value)

    return () => (
      <a-select value={props.modelValue} allowClear onChange={(value: string) => onInput(value)}>
       {
        list.value.map(item => <a-select-option key={item.key} value={item.value}>{item.name}</a-select-option>)
       }
      </a-select>
    )
  }
})

export const InputTsx = defineComponent({
  name: 'input-tsx',
  props: {
    modelValue: {
      type: String,
      required: true,
      default: ''
    },
    placeholder: {
      type: String,
      default: '输入点什么...'
    }
  },
  emits: ['update:value'],
  setup (props, ctx) {
    const onInput = (value: string) => ctx.emit('update:value', value)

    return () => (
      <Input style={{ minWidth: '170px' }} placeholder={props.placeholder} value={props.modelValue} onChange={(e) => onInput(e.target.value!)} />
    )
  }
})

/**
 * @description 文字copy按钮
 */
export const CopyTsx = defineComponent({
  name: 'copy-tsx',
  props: {
    text: {
      type: String,
      required: true
    }
  },
  emits: ['success'],
  setup (props, ctx) {
    if (!props.text) {
      console.warn('缺少必备的参数 text')
    }

    const onCopy = () => {
      useCopy(props.text)
    }

    return () => (
      <a-tooltip
        title='复制'
      >
        <CopyTwoTone style="font-size: 20px;" onClick={onCopy}/>
      </a-tooltip>
    )
  }
})

/**
 *
 */