@vue-ui-kit/ant 2.4.5 → 2.5.0

package/src/packages/components/PGrid.vue

@@ -5,18 +5,21 @@
   setup
 >
   import { ColumnProps, PFormItemProps, PGridProps, ResponsePathConfig } from '#/antProxy';
+  // 锚定 ant-design-vue 间接依赖的类型路径，避免 vue-tsc 推断默认导出时引用 .pnpm 物理路径触发 TS2742
+  import type {} from 'scroll-into-view-if-needed';
+  import type {} from 'vue-types';
   import PFormCol from '@/components/PFormCol.vue';
   import RenderDefaultSlots from '@/components/RenderDefaultSlots';
   import RenderTitleSlots from '@/components/RenderTitleSlots';
   import { $confirm } from '@/hooks/useMessage';
   import Icon from '@/renders/Icon';
-  import { getGridDefaults } from '@/utils/config';
   import {
     createAutoViewportBoxController,
     parseAutoViewportBoxOffset,
     type AutoViewportBoxController,
     type AutoViewportBoxOffsetInput,
   } from '@/utils/autoViewportBox';
+  import { getGridDefaults } from '@/utils/config';
   import { cleanCol, defaultLabelCol } from '@/utils/core';
   import { isGoodValue } from '@/utils/is';
   import { eachTree } from '@/utils/treeHelper';
@@ -678,12 +681,14 @@
                   :ghost="btn.ghost"
                   :block="btn.block"
                 >
-                  <Icon v-if="btn.icon" :icon="btn.icon" />
-                  <template v-if="btn.content && isStringContent(renderContent(btn.content))">
-                    {{ renderContent(btn.content) }}
-                  </template>
-                  <component v-else-if="btn.content" :is="renderContent(btn.content)" />
-                  <DownOutlined />
+                  <div class="flex items-center gap-4px">
+                    <Icon v-if="btn.icon" :icon="btn.icon" />
+                    <template v-if="btn.content && isStringContent(renderContent(btn.content))">
+                      {{ renderContent(btn.content) }}
+                    </template>
+                    <component v-else-if="btn.content" :is="renderContent(btn.content)" />
+                    <DownOutlined />
+                  </div>
                 </a-button>
               </a-dropdown>
               <a-button
@@ -698,11 +703,13 @@
                 :block="btn.block"
                 @click="debounceToolBtnClick(btn.code)"
               >
-                <Icon v-if="btn.icon" :icon="btn.icon" />
-                <template v-if="btn.content && isStringContent(renderContent(btn.content))">
-                  {{ renderContent(btn.content) }}
-                </template>
-                <component v-else-if="btn.content" :is="renderContent(btn.content)" />
+                <div class="flex items-center gap-4px">
+                  <Icon v-if="btn.icon" :icon="btn.icon" />
+                  <template v-if="btn.content && isStringContent(renderContent(btn.content))">
+                    {{ renderContent(btn.content) }}
+                  </template>
+                  <component v-else-if="btn.content" :is="renderContent(btn.content)" />
+                </div>
               </a-button>
               <div v-else></div>
             </template>
@@ -723,11 +730,13 @@
               @click="debounceToolToolClick(tool.code)"
               :loading="loading.toolbar || (!!tool.code && codeLoadings[tool.code])"
             >
-              <Icon v-if="tool.icon" :icon="tool.icon" />
-              <template v-if="tool.content && isStringContent(renderContent(tool.content))">
-                {{ renderContent(tool.content) }}
-              </template>
-              <component v-else-if="tool.content" :is="renderContent(tool.content)" />
+              <div class="flex items-center gap-4px">
+                <Icon v-if="tool.icon" :icon="tool.icon" />
+                <template v-if="tool.content && isStringContent(renderContent(tool.content))">
+                  {{ renderContent(tool.content) }}
+                </template>
+                <component v-else-if="tool.content" :is="renderContent(tool.content)" />
+              </div>
             </a-button>
           </template>
         </span>

package/src/packages/renders/Icon.ts

@@ -1,8 +1,16 @@
-import { createVNode } from 'vue';
+import { createVNode, type VNode } from 'vue';
 import * as $Icon from '@ant-design/icons-vue';
-const Icon = (props: { icon: string }) => {
+import { getUIKitConfig } from '@/utils/config';
+
+const Icon = (props: { icon: string }): VNode | null => {
   const { icon } = props;
+  const customRender = getUIKitConfig().icon?.render;
+  if (customRender) {
+    const custom = customRender(icon);
+    if (custom) return custom as VNode;
+  }
   const antIcon: { [key: string]: any } = $Icon;
-  return antIcon[icon] ? createVNode(antIcon[icon]) : antIcon[icon];
+  if (antIcon[icon]) return createVNode(antIcon[icon]);
+  return null;
 };
 export default Icon;

package/src/packages/store/renderStore.tsx

@@ -1,4 +1,9 @@
-import { RenderFormParams, RenderOptions, RenderTableParams } from '#/antProxy';
+import {
+  RenderFormParams,
+  RenderOptions,
+  RenderReadonlyParams,
+  RenderTableParams,
+} from '#/antProxy';
 import {
   Button,
   Dropdown,
@@ -49,6 +54,11 @@ export interface RenderWorkshop {
     params: RenderTableParams,
     defaultHandler: Recordable,
   ) => any;
+  renderReadonly?: (
+    options: RenderOptions,
+    params: RenderReadonlyParams,
+    defaultHandler: Recordable,
+  ) => any;
   renderEdit?: (
     model: Ref<any>,
     options: RenderOptions,
@@ -191,6 +201,21 @@ const renderBasic = (name: string) => {
         <DynamicComponent is={name} {...props} />
       );
     },
+    renderReadonly(
+      { props = {}, attrs = {} }: RenderOptions,
+      { data, field }: RenderReadonlyParams,
+    ) {
+      return field ? (
+        <DynamicComponent
+          is={name}
+          v-model:value={data[field]}
+          {...attrs}
+          {...merge({}, antDefaultProps[name], { disabled: true }, props)}
+        />
+      ) : (
+        <DynamicComponent is={name} {...merge({}, { disabled: true }, props)} />
+      );
+    },
     renderEdit(
       model: Ref<any>,
       { props = antDefaultProps[name] ?? {}, attrs = {}, events = {} }: RenderOptions,
@@ -516,6 +541,15 @@ const renders: RenderFactory = {
         />
       ) : null;
     },
+    renderReadonly({ props = {}, options }: RenderOptions, { data, field }: RenderReadonlyParams) {
+      return valued(field) ? (
+        <RadioGroup
+          v-model:value={data[field!]}
+          {...merge({}, { disabled: true }, props)}
+          options={props.options ?? options ?? []}
+        />
+      ) : null;
+    },
   },
   $autoComplete: {
     renderItemContent(
@@ -559,6 +593,11 @@ const renders: RenderFactory = {
         />
       ) : null;
     },
+    renderReadonly({ props = {} }: RenderOptions, { data, field }: RenderReadonlyParams) {
+      return valued(field) ? (
+        <Switch v-model:checked={data[field!]} {...merge({}, { disabled: true }, props)} />
+      ) : null;
+    },
   },
   $checkbox: {
     renderItemContent(
@@ -588,6 +627,15 @@ const renders: RenderFactory = {
         />
       ) : null;
     },
+    renderReadonly({ props = {}, options }: RenderOptions, { data, field }: RenderReadonlyParams) {
+      return valued(field) ? (
+        <CheckboxGroup
+          v-model:value={data[field!]}
+          {...merge({}, { disabled: true }, props)}
+          options={props.options ?? options ?? []}
+        />
+      ) : null;
+    },
   },
   $paragraph: {
     renderDefault({ props = {} }: RenderOptions, { row, field }: RenderTableParams) {
@@ -690,7 +738,7 @@ const renders: RenderFactory = {
 };
 export const addRender = (
   name: string,
-  { renderItemContent, renderDefault, renderEdit }: RenderWorkshop,
+  { renderItemContent, renderDefault, renderReadonly, renderEdit }: RenderWorkshop,
 ) => {
   if (renders.hasOwnProperty(name)) {
     console.warn(`render ${name} already exists, you are trying to override it`);
@@ -698,6 +746,7 @@ export const addRender = (
   renders[name] = {
     renderItemContent,
     renderDefault,
+    renderReadonly,
     renderEdit,
   };
 };

package/src/packages/utils/config.ts

@@ -26,6 +26,12 @@ export interface UIKitConfig {
    * @param content tooltip 内容，字符串或返回 VNode 的函数
    */
   renderTooltip?: (defaultSlot: () => VNode, content: string | (() => VNode)) => VNode;
+  /**
+   * 自定义图标：按 `icon` 名字渲染；返回值为真时优先于 `@ant-design/icons-vue` 同名组件。
+   */
+  icon?: {
+    render?: (name: string) => unknown;
+  };
 }
 
 // 默认配置
@@ -45,6 +51,7 @@ const defaultConfig: UIKitConfig = {
     ENABLE_FINDER: true,
     AUTO_ROW_HEIGHT: true,
   },
+  icon: {},
 };
 
 // 当前配置（可被修改）
@@ -66,6 +73,10 @@ export function setUIKitConfig(config: Partial<UIKitConfig>): void {
       ...config.canvasTable,
     },
     renderTooltip: config.renderTooltip ?? currentConfig.renderTooltip,
+    icon: {
+      ...currentConfig.icon,
+      ...config.icon,
+    },
   };
 }