feat: naive system init

apps/web-naive/src/components/description/description.vue

@@ -0,0 +1,79 @@
+<script lang="tsx">
+import type { DescriptionsProps } from 'naive-ui';
+
+import type { PropType } from 'vue';
+
+import type { DescriptionItemSchema, DescriptionsOptions } from './typing';
+
+import { defineComponent } from 'vue';
+
+import { get } from '@vben/utils';
+
+import { NDescriptions, NDescriptionsItem } from 'naive-ui';
+
+/** 对 Descriptions 进行二次封装 */
+const Description = defineComponent({
+  name: 'Descriptions',
+  props: {
+    data: {
+      type: Object as PropType<Record<string, any>>,
+      default: () => ({}),
+    },
+    schema: {
+      type: Array as PropType<DescriptionItemSchema[]>,
+      default: () => [],
+    },
+    // Descriptions 原生 props
+    componentProps: {
+      type: Object as PropType<DescriptionsProps>,
+      default: () => ({}),
+    },
+  },
+
+  setup(props: DescriptionsOptions) {
+    // TODO @xingyu：每个 field 的 slot 的考虑
+    // TODO @xingyu：from 5.0：extra: () => getSlot(slots, 'extra')
+    /** 过滤掉不需要展示的 */
+    const shouldShowItem = (item: DescriptionItemSchema) => {
+      if (item.hidden === undefined) return true;
+      return typeof item.hidden === 'function'
+        ? !item.hidden(props.data)
+        : !item.hidden;
+    };
+    /** 渲染内容 */
+    const renderContent = (item: DescriptionItemSchema) => {
+      if (item.content) {
+        return typeof item.content === 'function'
+          ? item.content(props.data)
+          : item.content;
+      }
+      return item.field ? get(props.data, item.field) : null;
+    };
+
+    return () => (
+      <NDescriptions
+        {...props}
+        bordered={props.componentProps?.bordered}
+        column={props.componentProps?.column}
+        size={props.componentProps?.size}
+        title={props.componentProps?.title}
+      >
+        {props.schema?.filter(shouldShowItem).map((item) => (
+          <NDescriptionsItem
+            contentStyle={item.contentStyle}
+            key={item.field || String(item.label)}
+            label={item.label as string}
+            labelStyle={item.labelStyle}
+            span={item.span}
+          >
+            {renderContent(item)}
+          </NDescriptionsItem>
+        ))}
+      </NDescriptions>
+    );
+  },
+});
+
+// TODO @xingyu：from 5.0：emits: ['register'] 事件
+export default Description;
+</script>

apps/web-naive/src/components/description/index.ts

@@ -0,0 +1,3 @@
+export { default as Description } from './description.vue';
+export * from './typing';
+export { useDescription } from './use-description';

apps/web-naive/src/components/description/typing.ts

@@ -0,0 +1,27 @@
+import type { DescriptionsProps } from 'naive-ui';
+
+import type { CSSProperties, VNode } from 'vue';
+
+// TODO @xingyu：【content】这个纠结下；1）vben2.0 是 render；https://doc.vvbin.cn/components/desc.html#usage 2）
+// TODO @xingyu：vben2.0 还有 sapn【done】、labelMinWidth、contentMinWidth
+// TODO @xingyu：【hidden】这个纠结下；1）vben2.0 是 show；
+export interface DescriptionItemSchema {
+  label: string | VNode; // 内容的描述
+  field?: string; // 对应 data 中的字段名
+  content?: ((data: any) => string | VNode) | string | VNode; // 自定义需要展示的内容，比如说 dict-tag
+  span?: number; // 包含列的数量
+  labelStyle?: CSSProperties; // 自定义标签样式
+  contentStyle?: CSSProperties; // 自定义内容样式
+  hidden?: ((data: any) => boolean) | boolean; // 是否显示
+}
+
+// TODO @xingyu：vben2.0 还有 title【done】、bordered【done】d、useCollapse、collapseOptions
+// TODO @xingyu：from 5.0：bordered 默认为 true
+// TODO @xingyu：from 5.0：column 默认为 lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4
+// TODO @xingyu：from 5.0：size 默认为 small；有 'default', 'middle', 'small', undefined
+// TODO @xingyu：from 5.0：useCollapse 默认为 true
+export interface DescriptionsOptions {
+  data?: Record<string, any>; // 数据
+  schema?: DescriptionItemSchema[]; // 描述项配置
+  componentProps?: DescriptionsProps; // antd Descriptions 组件参数
+}

apps/web-naive/src/components/description/use-description.ts

@@ -0,0 +1,71 @@
+import type { DescriptionsOptions } from './typing';
+
+import { defineComponent, h, isReactive, reactive, watch } from 'vue';
+
+import Description from './description.vue';
+
+/** 描述列表 api 定义 */
+class DescriptionApi {
+  private state = reactive<Record<string, any>>({});
+
+  constructor(options: DescriptionsOptions) {
+    this.state = { ...options };
+  }
+
+  getState(): DescriptionsOptions {
+    return this.state as DescriptionsOptions;
+  }
+
+  // TODO @xingyu：【setState】纠结下：1）vben2.0 是 data https://doc.vvbin.cn/components/desc.html#usage；
+  setState(newState: Partial<DescriptionsOptions>) {
+    this.state = { ...this.state, ...newState };
+  }
+}
+
+export type ExtendedDescriptionApi = DescriptionApi;
+
+export function useDescription(options: DescriptionsOptions) {
+  const IS_REACTIVE = isReactive(options);
+  const api = new DescriptionApi(options);
+  // 扩展 API
+  const extendedApi: ExtendedDescriptionApi = api as never;
+  const Desc = defineComponent({
+    name: 'UseDescription',
+    inheritAttrs: false,
+    setup(_, { attrs, slots }) {
+      // 合并props和attrs到state
+      api.setState({ ...attrs });
+
+      return () =>
+        h(
+          Description,
+          {
+            ...api.getState(),
+            ...attrs,
+          },
+          slots,
+        );
+    },
+  });
+
+  // 响应式支持
+  if (IS_REACTIVE) {
+    watch(
+      () => options.schema,
+      (newSchema) => {
+        api.setState({ schema: newSchema });
+      },
+      { immediate: true, deep: true },
+    );
+
+    watch(
+      () => options.data,
+      (newData) => {
+        api.setState({ data: newData });
+      },
+      { immediate: true, deep: true },
+    );
+  }
+
+  return [Desc, extendedApi] as const;
+}

apps/web-naive/src/components/table-action/icons.ts

@@ -0,0 +1,13 @@
+export const ACTION_ICON = {
+  DOWNLOAD: 'lucide:download',
+  UPLOAD: 'lucide:upload',
+  ADD: 'lucide:plus',
+  EDIT: 'lucide:edit',
+  DELETE: 'lucide:trash-2',
+  REFRESH: 'lucide:refresh-cw',
+  SEARCH: 'lucide:search',
+  FILTER: 'lucide:filter',
+  MORE: 'lucide:ellipsis-vertical',
+  VIEW: 'lucide:eye',
+  COPY: 'lucide:copy',
+};

apps/web-naive/src/components/table-action/index.ts

@@ -0,0 +1,4 @@
+export * from './icons';
+
+export { default as TableAction } from './table-action.vue';
+export * from './typing';

apps/web-naive/src/components/table-action/table-action.vue

@@ -0,0 +1,221 @@
+<!-- add by 星语：参考 vben2 的方式，增加 TableAction 组件 -->
+<script setup lang="ts">
+import type { DropdownMixedOption } from 'naive-ui/es/dropdown/src/interface';
+
+import type { PropType } from 'vue';
+
+import type { ActionItem, PopConfirm } from './typing';
+
+import { computed, unref, watch } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { IconifyIcon } from '@vben/icons';
+import { isBoolean, isFunction } from '@vben/utils';
+
+import { NButton, NDropdown, NPopconfirm, NSpace } from 'naive-ui';
+
+const props = defineProps({
+  actions: {
+    type: Array as PropType<ActionItem[]>,
+    default() {
+      return [];
+    },
+  },
+  dropDownActions: {
+    type: Array as PropType<ActionItem[]>,
+    default() {
+      return [];
+    },
+  },
+  divider: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { hasAccessByCodes } = useAccess();
+
+/** 检查是否显示 */
+function isIfShow(action: ActionItem): boolean {
+  const ifShow = action.ifShow;
+  let isIfShow = true;
+  if (isBoolean(ifShow)) {
+    isIfShow = ifShow;
+  }
+  if (isFunction(ifShow)) {
+    isIfShow = ifShow(action);
+  }
+  if (isIfShow) {
+    isIfShow =
+      hasAccessByCodes(action.auth || []) || (action.auth || []).length === 0;
+  }
+  return isIfShow;
+}
+
+/** 处理按钮 actions */
+const getActions = computed(() => {
+  const actions = props.actions || [];
+  return actions.filter((action: ActionItem) => isIfShow(action));
+});
+
+/** 处理下拉菜单 actions */
+const getDropdownList = computed((): DropdownMixedOption[] => {
+  const dropDownActions = props.dropDownActions || [];
+  return dropDownActions
+    .filter((action: ActionItem) => isIfShow(action))
+    .map((action: ActionItem, index: number) => ({
+      label: action.label || '',
+      onClick: () => action.onClick?.(),
+      key: getActionKey(action, index),
+      disabled: action.disabled,
+      divider: action.divider || false,
+    }));
+});
+
+/** Space 组件的 size */
+const spaceSize = computed(() => {
+  const actions = unref(getActions);
+  return actions?.some((item: ActionItem) => item.type === 'primary') ? 4 : 8;
+});
+
+/** 获取 PopConfirm 属性 */
+function getPopConfirmProps(popConfirm: PopConfirm) {
+  if (!popConfirm) return {};
+
+  const attrs: Record<string, any> = {};
+
+  // 复制基本属性，排除函数
+  Object.keys(popConfirm).forEach((key) => {
+    if (key !== 'confirm' && key !== 'cancel' && key !== 'icon') {
+      attrs[key] = popConfirm[key as keyof PopConfirm];
+    }
+  });
+
+  // 单独处理事件函数
+  if (popConfirm.confirm && isFunction(popConfirm.confirm)) {
+    attrs.positiveConfirm = popConfirm.confirm;
+  }
+  if (popConfirm.cancel && isFunction(popConfirm.cancel)) {
+    attrs.negativeCancel = popConfirm.cancel;
+  }
+  if (popConfirm.okText) {
+    attrs.positiveText = popConfirm.okText;
+  }
+  if (popConfirm.cancelText) {
+    attrs.negativeText = popConfirm.cancelText;
+  }
+
+  return attrs;
+}
+
+/** 获取 Button 属性 */
+function getButtonProps(action: ActionItem) {
+  return {
+    type: action.type || 'primary',
+    quaternary: action.quaternary || false,
+    text: action.text || false,
+    disabled: action.disabled,
+    loading: action.loading,
+    size: action.size,
+  };
+}
+
+// /** 获取 Tooltip 属性 */
+// function getTooltipProps(tooltip: any | string) {
+//   if (!tooltip) return {};
+//   return typeof tooltip === 'string' ? { title: tooltip } : { ...tooltip };
+// }
+
+/** 处理菜单点击 */
+function handleMenuClick(key: number) {
+  const action = getDropdownList.value.find((item) => item.key === key);
+  if (action && action.onClick && isFunction(action.onClick)) {
+    action.onClick();
+  }
+}
+
+/** 生成稳定的 key */
+function getActionKey(action: ActionItem, index: number) {
+  return `${action.label || ''}-${action.type || ''}-${index}`;
+}
+
+/** 处理按钮点击 */
+function handleButtonClick(action: ActionItem) {
+  if (action.onClick && isFunction(action.onClick)) {
+    action.onClick();
+  }
+}
+
+function handlePopconfirmClick(popconfirm: PopConfirm, type: string) {
+  if (type === 'positive') {
+    popconfirm.confirm();
+  } else if (type === 'negative' && popconfirm.cancel) {
+    popconfirm.cancel();
+  }
+}
+
+/** 监听props变化，强制重新计算 */
+watch(
+  () => [props.actions, props.dropDownActions],
+  () => {
+    // 这里不需要额外处理，computed会自动重新计算
+  },
+  { deep: true },
+);
+</script>
+
+<template>
+  <div class="flex">
+    <NSpace :size="spaceSize">
+      <template
+        v-for="(action, index) in getActions"
+        :key="getActionKey(action, index)"
+      >
+        <NPopconfirm
+          v-if="action.popConfirm"
+          v-bind="getPopConfirmProps(action.popConfirm)"
+          @positive-click="handlePopconfirmClick(action.popConfirm, 'positive')"
+          @negative-click="handlePopconfirmClick(action.popConfirm, 'negative')"
+        >
+          <template v-if="action.popConfirm.icon" #icon>
+            <IconifyIcon :icon="action.popConfirm.icon" />
+          </template>
+          <template #trigger>
+            <NButton v-bind="getButtonProps(action)">
+              <template v-if="action.icon" #icon>
+                <IconifyIcon :icon="action.icon" />
+              </template>
+              {{ action.label }}
+            </NButton>
+          </template>
+          <span>{{ getPopConfirmProps(action.popConfirm).title }}</span>
+        </NPopconfirm>
+        <NButton
+          v-else
+          v-bind="getButtonProps(action)"
+          @click="handleButtonClick(action)"
+        >
+          <template v-if="action.icon" #icon>
+            <IconifyIcon :icon="action.icon" />
+          </template>
+          {{ action.label }}
+        </NButton>
+      </template>
+    </NSpace>
+
+    <NDropdown
+      v-if="getDropdownList.length > 0"
+      trigger="click"
+      :options="getDropdownList"
+      :show-arrow="true"
+      @select="handleMenuClick"
+    >
+      <NButton type="primary" text>
+        {{ $t('page.action.more') }}
+        <template #icon>
+          <IconifyIcon icon="lucide:ellipsis-vertical" />
+        </template>
+      </NButton>
+    </NDropdown>
+  </div>
+</template>

apps/web-naive/src/components/table-action/typing.ts

@@ -0,0 +1,28 @@
+import type { ButtonProps } from 'naive-ui/es/button/src/Button';
+import type { TooltipProps } from 'naive-ui/es/tooltip/src/Tooltip';
+
+export interface PopConfirm {
+  title: string;
+  okText?: string;
+  cancelText?: string;
+  confirm: () => void;
+  cancel?: () => void;
+  icon?: string;
+  disabled?: boolean;
+}
+
+export interface ActionItem extends ButtonProps {
+  onClick?: () => void;
+  type?: ButtonProps['type'];
+  label?: string;
+  color?: 'error' | 'success' | 'warning';
+  icon?: string;
+  popConfirm?: PopConfirm;
+  disabled?: boolean;
+  divider?: boolean;
+  // 权限编码控制是否显示
+  auth?: string[];
+  // 业务控制是否显示
+  ifShow?: ((action: ActionItem) => boolean) | boolean;
+  tooltip?: string | TooltipProps;
+}