@quiteer/naive-extra 0.0.1

package/src/components/button/action/utils.ts

@@ -0,0 +1,122 @@
+import type { ButtonProps } from 'naive-ui'
+import type { BaseButtonProps } from '../base/props'
+import type { ActionButtonMode, ActionItem } from './props'
+import { unref } from 'vue'
+import { DEFAULT_ACTION_ICONS } from './props'
+
+const DEFAULT_ICON = 'carbon:unknown'
+
+// 获取图标
+export function getIcon(item: ActionItem) {
+  if (item.icon)
+    return item.icon
+  return DEFAULT_ACTION_ICONS[item.key as string] || DEFAULT_ICON
+}
+
+// 判断是否禁用
+export function isDisabled(item: ActionItem) {
+  if (item.disabled === undefined)
+    return false
+  if (typeof item.disabled === 'function')
+    return item.disabled()
+  return unref(item.disabled)
+}
+
+export function getPopconfirmProps(item: ActionItem) {
+  if (!item.popconfirm)
+    return undefined
+
+  if (typeof item.popconfirm === 'object') {
+    const { onPositiveClick: _, ...rest } = item.popconfirm as any
+    return rest
+  }
+
+  return item.popconfirm
+}
+
+// 解析按钮属性
+export function resolveButtonProps(
+  item: ActionItem,
+  mode: ActionButtonMode = 'text',
+  defaultButtonProps?: ButtonProps
+): Omit<Partial<BaseButtonProps>, 'onClick'> {
+  const { onClick: _1, ...restDefaultProps } = defaultButtonProps || {}
+  const { onClick: _2, ...restItemProps } = item.props || {}
+
+  const baseProps: Partial<BaseButtonProps> = {
+    ...restDefaultProps,
+    ...restItemProps,
+    disabled: isDisabled(item),
+    size: item.size || defaultButtonProps?.size,
+    popconfirm: getPopconfirmProps(item),
+    popText: item.popText,
+    positiveText: item.positiveText,
+    negativeText: item.negativeText,
+    permission: item.permission
+  }
+
+  // Icon
+  if (mode !== 'text') {
+    baseProps.icon = getIcon(item)
+  }
+
+  // Label & Tooltip
+  if (mode === 'icon') {
+    baseProps.tooltip = item.tooltip || item.label
+  }
+  else {
+    // label is handled in template via slot
+    if (item.tooltip) {
+      baseProps.tooltip = item.tooltip
+    }
+  }
+
+  // Styling
+  if (mode === 'button') {
+    baseProps.text = false
+  }
+  else if (mode === 'secondary') {
+    baseProps.text = false
+    baseProps.secondary = true
+    baseProps.type = 'primary'
+  }
+  else {
+    baseProps.text = true
+  }
+
+  return baseProps as Omit<Partial<BaseButtonProps>, 'onClick'>
+}
+
+// 解析更多按钮属性
+export function resolveMoreButtonProps(
+  mode: ActionButtonMode = 'text',
+  defaultButtonProps?: ButtonProps
+): Omit<Partial<BaseButtonProps>, 'onClick'> {
+  const { onClick: _, ...restDefaultProps } = defaultButtonProps || {}
+
+  const baseProps: Partial<BaseButtonProps> = {
+    ...restDefaultProps
+  }
+
+  if (mode !== 'text') {
+    baseProps.icon = DEFAULT_ACTION_ICONS.more
+  }
+
+  if (mode !== 'icon') {
+    // label is handled in template via slot
+  }
+
+  if (mode === 'button') {
+    baseProps.text = false
+  }
+  else if (mode === 'secondary') {
+    baseProps.text = false
+    baseProps.secondary = true
+    baseProps.type = 'primary'
+  }
+  else {
+    baseProps.text = true
+  }
+
+  return baseProps as Omit<Partial<BaseButtonProps>, 'onClick'>
+}

package/src/components/button/base/index.ts

@@ -0,0 +1,4 @@
+import QuiBaseButton from './index.vue'
+
+export * from './props'
+export { QuiBaseButton }

package/src/components/button/base/index.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import type { ButtonProps, PopconfirmProps } from 'naive-ui'
+import type { BaseButtonProps } from './props'
+import { QuiIcon } from '../../icon'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<BaseButtonProps>(), {
+  type: 'default',
+  size: 'small',
+  text: false,
+  secondary: false,
+  disabled: undefined
+})
+
+const emit = defineEmits<{
+  click: [e: MouseEvent]
+  positiveClick: [e: MouseEvent]
+}>()
+
+const computedButtonProps = computed<ButtonProps>(() => {
+  const { icon: _1, tooltip: _2, popconfirm: _3, popText: _4, positiveText: _5, negativeText: _6, permission: _7, disabled: _8, ...others } = props
+  return others as ButtonProps
+})
+
+const permissionCheck = computed(() => {
+  if (!props.permission) {
+    return { visible: true, disabled: false }
+  }
+
+  const { group, disabled } = props.permission
+  const [codes, code] = group
+
+  // 如果权限组为空或当前权限为空，认为有权限（或者根据业务逻辑，这里假设必须都有值）
+  // 按照通常逻辑，如果没传 code，就不校验
+  if (!codes || !code) {
+    return { visible: true, disabled: false }
+  }
+
+  const hasPermission = codes.includes(code)
+
+  if (hasPermission) {
+    return { visible: true, disabled: false }
+  }
+
+  // 无权限
+  if (disabled) {
+    return { visible: true, disabled: true }
+  }
+
+  // 默认隐藏
+  return { visible: false, disabled: false }
+})
+
+const finalDisabled = computed(() => {
+  if (props.disabled !== undefined) {
+    return props.disabled
+  }
+  return permissionCheck.value.disabled
+})
+
+const computedPopconfirm = computed<PopconfirmProps | undefined>(() => {
+  const { popconfirm, positiveText, negativeText, popText } = props
+  if (!popconfirm && !positiveText && !negativeText && !popText)
+    return undefined
+
+  let basePopconfirm: PopconfirmProps = {}
+
+  if (popconfirm) {
+    basePopconfirm = { ...popconfirm }
+  }
+  else if (popText) {
+    basePopconfirm.showIcon = true
+  }
+
+  if (positiveText) {
+    basePopconfirm.positiveText = positiveText
+  }
+  if (negativeText) {
+    basePopconfirm.negativeText = negativeText
+  }
+
+  return Object.keys(basePopconfirm).length > 0 ? basePopconfirm : undefined
+})
+
+const popconfirmTitle = computed(() => {
+  const { popText } = props
+  if (popText)
+    return popText
+  return '确认进行此操作？'
+})
+</script>
+
+<template>
+  <template v-if="permissionCheck.visible">
+    <!-- 带气泡确认的按钮 -->
+    <NPopconfirm
+      v-if="computedPopconfirm || $slots.popconfirm"
+      v-bind="computedPopconfirm"
+      @positive-click="emit('positiveClick', $event)"
+    >
+      <template #trigger>
+        <NButton
+          v-bind="{ ...computedButtonProps, ...$attrs }"
+          :disabled="finalDisabled"
+          @click="emit('click', $event)"
+        >
+          <template v-if="icon" #icon>
+            <QuiIcon :icon="icon" />
+          </template>
+          <slot />
+        </NButton>
+      </template>
+      <slot name="popconfirm">
+        {{ popconfirmTitle }}
+      </slot>
+    </NPopconfirm>
+
+    <!-- 普通按钮 -->
+    <template v-else>
+      <!-- 带提示的按钮 -->
+      <NTooltip v-if="tooltip || $slots.tooltip" trigger="hover">
+        <template #trigger>
+          <NButton
+            v-bind="{ ...computedButtonProps, ...$attrs }"
+            :disabled="finalDisabled"
+            @click="emit('click', $event)"
+          >
+            <template v-if="icon" #icon>
+              <QuiIcon :icon="icon" />
+            </template>
+            <slot />
+          </NButton>
+        </template>
+        <slot name="tooltip">
+          {{ tooltip }}
+        </slot>
+      </NTooltip>
+
+      <!-- 仅按钮 -->
+      <NButton
+        v-else
+        v-bind="{ ...computedButtonProps, ...$attrs }"
+        :disabled="finalDisabled"
+        @click="emit('click', $event)"
+      >
+        <template v-if="icon" #icon>
+          <QuiIcon :icon="icon" />
+        </template>
+        <slot />
+      </NButton>
+    </template>
+  </template>
+</template>

package/src/components/button/base/props.ts

@@ -0,0 +1,29 @@
+import type { ButtonProps, PopconfirmProps } from 'naive-ui'
+
+export interface ButtonPermission {
+  /** 权限组：[拥有的权限列表, 需要的权限] */
+  group: [string[], string]
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否显示 */
+  show?: boolean
+}
+
+export interface BaseButtonProps extends /* @vue-ignore */ ButtonProps {
+  /** 图标名称 */
+  icon?: string
+  /** 提示文本 */
+  tooltip?: string
+  /** 是否为文本按钮 */
+  text?: boolean
+  /** Popconfirm 配置 */
+  popconfirm?: PopconfirmProps
+  /** Popconfirm 内容文本 */
+  popText?: string
+  /** Popconfirm 确认按钮文本 */
+  positiveText?: string
+  /** Popconfirm 取消按钮文本 */
+  negativeText?: string
+  /** 权限 */
+  permission?: ButtonPermission
+}

package/src/components/button/index.ts

@@ -0,0 +1,4 @@
+export { QuiActionButton } from './action'
+export type { ActionItem } from './action'
+export { QuiBaseButton } from './base'
+export type { BaseButtonProps } from './base'

package/src/components/button/types.ts

@@ -0,0 +1,2 @@
+export type { ActionButtonMode, ActionItem } from './action'
+export type { BaseButtonProps } from './base'

package/src/components/form/helper.ts

@@ -0,0 +1,73 @@
+import type { Recordable } from '../../const'
+import type { FormSchema } from './props'
+import { isArray, isBoolean, isFunction, isNullOrUnDef, isObject, isString } from '@quiteer/is'
+import {
+  NCascader,
+  NDatePicker,
+  NDynamicInput,
+  NDynamicTags,
+  NInput,
+  NInputNumber,
+  NSelect,
+  NSwitch,
+  NTimePicker
+} from 'naive-ui'
+import { QuiUpload } from '../upload'
+
+// 加工 form values
+export function handleFormValues(values: Recordable) {
+  if (!isObject(values)) {
+    return {}
+  }
+  const res: Recordable = {}
+  for (const item of Object.entries(values)) {
+    let [key, value] = item
+    if (!key || (isArray(value) && value.length === 0) || isFunction(value) || isNullOrUnDef(value)) {
+      continue
+    }
+    // 删除空格
+    if (isString(value)) {
+      value = value.trim()
+    }
+
+    Reflect.set(res, key, value)
+  }
+  return res
+}
+
+export function getComponentProps(schema: FormSchema, disabled: boolean) {
+  const compProps = schema.componentProps ?? {}
+
+  const isReadonly = isBoolean(compProps.disabled) ? compProps.disabled : disabled
+
+  const props = {
+    clearable: !isReadonly,
+    ...compProps
+  }
+
+  if (schema.component === 'NInput')
+    return { ...props, readonly: isReadonly }
+
+  return {
+    disabled: isReadonly,
+    ...props
+  }
+}
+
+// 获取对应组件
+export function getComponent(schema: FormSchema) {
+  const components = {
+    NInput,
+    NInputNumber,
+    NSelect,
+    NSwitch,
+    NDatePicker,
+    NTimePicker,
+    NCascader,
+    NDynamicInput,
+    NDynamicTags,
+    NUpload: QuiUpload
+  }
+
+  return Reflect.get(components, schema.component ?? '')
+}

package/src/components/form/index.ts

@@ -0,0 +1,5 @@
+import QuiForm from './index.vue'
+
+export { QuiForm }
+
+export type { CustomSwitchProps, Props as FormProps, FormSchema } from './props'

package/src/components/form/index.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import type { FormProps, FormRules, GridProps, NForm } from 'naive-ui'
+import type { Recordable } from '../../const'
+import type { Props } from './props'
+import { isArray, isBoolean, isNullOrUnDef } from '@quiteer/is'
+import { computed, nextTick, onMounted, reactive, ref, toRaw, unref, useAttrs } from 'vue'
+import { getComponent, getComponentProps, handleFormValues } from './helper'
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  labelWidth: 80,
+  labelPlacement: 'top',
+  layout: 'inline',
+  inline: false,
+  size: 'medium',
+  isFull: true,
+  gridProps: undefined
+})
+
+const emit = defineEmits<{
+  reset: []
+}>()
+const attrs = useAttrs()
+const formProps = computed((): FormProps => {
+  const rules: FormRules = {}
+
+  props.schemas.forEach((item) => {
+    if (item.rules && isArray(item.rules)) {
+      rules[item.field as string] = item.rules
+    }
+  })
+
+  return {
+    labelWidth: props.labelWidth,
+    inline: props.inline,
+    size: props.size,
+    labelPlacement: props.labelPlacement,
+    labelAlign: 'left',
+    rules,
+    ...unref(attrs)
+  }
+})
+
+const getGrid = computed((): GridProps => {
+  return {
+    cols: props.inline ? '1 s:2 m:4 l:5 2xl:6' : '1',
+    xGap: 10,
+    responsive: 'screen',
+    ...props.gridProps
+  }
+})
+
+const formElRef = ref<InstanceType<typeof NForm>>()
+const formModel = reactive<Recordable>({})
+const defaultFormModel = ref<Recordable>({})
+
+// 初始化默认值
+function initDefault() {
+  const obj: Record<string, string | number> = {}
+  props.schemas.forEach((item) => {
+    const { defaultValue } = item
+    if (!isNullOrUnDef(defaultValue)) {
+      obj[item.field as string] = defaultValue
+      formModel[item.field as string] = defaultValue
+    }
+  })
+  defaultFormModel.value = obj
+}
+
+onMounted(() => {
+  initDefault()
+})
+
+// 验证
+/**
+ * 表单校验函数：
+ * 统一返回 Promise<void>，避免类型推断依赖 async-validator 的内部路径。
+ */
+function validate(): Promise<void> {
+  const form = unref(formElRef)
+  if (!form) {
+    return Promise.resolve()
+  }
+
+  return form.validate().then(() => {})
+}
+
+/**
+ * 清空校验状态：
+ * 当表单未挂载时直接返回已完成的 Promise，保证返回类型稳定。
+ */
+async function clearValidate(): Promise<void> {
+  const form = unref(formElRef)
+  if (!form) {
+    return
+  }
+  await form.restoreValidation()
+}
+
+// 重置
+async function resetFields(): Promise<void> {
+  const formEl = unref(formElRef)
+  if (!formEl)
+    return
+
+  Object.keys(formModel).forEach((key) => {
+    formModel[key] = unref(defaultFormModel)[key] || null
+  })
+  await clearValidate()
+  emit('reset')
+}
+
+// 获取表单值
+function getFieldsValue() {
+  const form = handleFormValues(toRaw(formModel))
+  return form
+}
+
+const isSetFieldsValue = ref(false)
+
+defineExpose({
+  // 验证
+  validate,
+  // 重置
+  resetFields,
+  // 清空校验
+  clearValidate,
+  // 获取表单值
+  getFieldsValue,
+  // 设置表单字段值
+  setFieldsValue(values: Recordable) {
+    isSetFieldsValue.value = true
+    const fields = unref(props.schemas)
+      ?.map(item => item.field)
+      ?.filter(Boolean)
+
+    Object.keys(values).forEach((key) => {
+      const value = values[key]
+      if (value && fields.includes(key)) {
+        formModel[key] = value
+      }
+    })
+    nextTick(() => {
+      isSetFieldsValue.value = false
+    })
+  }
+})
+</script>
+
+<template>
+  <NForm v-bind="formProps" id="__AI_FORM__" ref="formElRef" :model="formModel">
+    <NGrid v-bind="getGrid" :style="gridStyle">
+      <NFormItemGi
+        v-for="schema in schemas"
+        v-bind="schema.giProps ? schema.giProps : giProps"
+        :key="schema.field"
+        :label="schema.label"
+        :path="schema.field"
+      >
+        <!-- 标签名右侧温馨提示 -->
+        <template v-if="schema.labelMessage" #label>
+          <span class="inline-flex items-center">
+            {{ schema.label }}
+            <NTooltip trigger="hover" :style="schema.labelMessageStyle">
+              <template #trigger>
+                <i class="i-material-symbols-info-outline ml-1 text-4 text-amber" />
+              </template>
+              {{ schema.labelMessage }}
+            </NTooltip>
+          </span>
+        </template>
+
+        <!-- 判断插槽 -->
+        <template v-if="schema.slot">
+          <slot :name="schema.slot" :model="formModel" :field="schema.field" :value="formModel[schema.field]" />
+        </template>
+
+        <!-- NCheckbox -->
+        <template v-else-if="schema.component === 'NCheckbox' && schema.componentProps">
+          <NCheckboxGroup
+            v-model:value="formModel[schema.field]"
+            :disabled="isBoolean(schema.componentProps.disabled) ? schema.componentProps.disabled : disabled"
+          >
+            <NSpace>
+              <NCheckbox
+                v-for="item in schema.componentProps.options"
+                :key="item.value"
+                :value="item.value"
+                :label="item.label"
+              />
+            </NSpace>
+          </NCheckboxGroup>
+        </template>
+
+        <!-- NRadioGroup -->
+        <template v-else-if="schema.component === 'NRadioGroup' && schema.componentProps">
+          <NRadioGroup v-model:value="formModel[schema.field]" v-bind="getComponentProps(schema, disabled)">
+            <NSpace>
+              <NRadio v-for="item in schema.componentProps.options" :key="item.value" :value="item.value">
+                {{ item.label }}
+              </NRadio>
+            </NSpace>
+          </NRadioGroup>
+        </template>
+
+        <!-- NSwitch -->
+        <template v-else-if="schema.component === 'NSwitch' && schema.componentProps">
+          <NSwitch v-model:value="formModel[schema.field]" v-bind="getComponentProps(schema, disabled)">
+            <template #checked>
+              {{ schema.componentProps?.checkedText }}
+            </template>
+            <template #unchecked>
+              {{ schema.componentProps?.uncheckedText }}
+            </template>
+          </NSwitch>
+        </template>
+
+        <!-- 动态渲染表单组件 -->
+        <component
+          v-bind="getComponentProps(schema, disabled)"
+          :is="getComponent(schema)"
+          v-else
+          v-model:value="formModel[schema.field]"
+          :is-set-fields-value="isSetFieldsValue"
+          :class="{ 'w-full': schema.isFull !== false && isFull }"
+        />
+        <!-- 组件后面的内容 -->
+        <template v-if="schema.suffix">
+          <slot :name="schema.suffix" :model="formModel" :field="schema.field" :value="formModel[schema.field]" />
+        </template>
+      </NFormItemGi>
+
+      <!-- 提交 重置 展开 收起 按钮 -->
+      <NGi :span="inline ? '' : 24" :suffix="inline ? true : false">
+        <NSpace align="center" justify="end" class="h-full">
+          <slot name="action-button" :model="formModel" />
+        </NSpace>
+      </NGi>
+    </NGrid>
+  </NForm>
+</template>
+
+<style lang="scss" scoped></style>