@pubinfo/module-rbac 2.0.0 → 2.0.2

package/dist/views/user/index.vue.d.ts

@@ -1,50 +1,50 @@
 import { CurrentOrg } from './interface';
 import { ACTION } from './enum';
 declare const _default: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').DefineComponent<{}, {}, {}, {}, {}, import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').ComponentOptionsMixin, import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').ComponentOptionsMixin, {}, string, import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').ComponentProvideOptions, true, {
-    tableRef: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').CreateComponentPublicInstanceWithMixins<Readonly<globalThis.ExtractPropTypes<{
-        request: PropType<import('@pubinfo/pro-components').ProTableProps["request"]>;
+    tableRef: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').ExtractPropTypes<{
+        request: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["request"]>;
         dataSource: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["dataSource"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["dataSource"]>;
             default: () => never[];
         };
         params: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["params"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["params"]>;
             default: () => {};
         };
         columns: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["columns"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["columns"]>;
             default: () => never[];
         };
         columnsState: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["columnsState"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["columnsState"]>;
             default: () => {};
         };
         search: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["search"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["search"]>;
             default: boolean;
         };
         toolbar: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["toolbar"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["toolbar"]>;
             default: boolean;
         };
         beforeSearchSubmit: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["beforeSearchSubmit"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["beforeSearchSubmit"]>;
             default: (arg: import('@pubinfo/pro-components').QueryData) => any;
         };
         postData: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["postData"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["postData"]>;
             default: (arg: import('@pubinfo/pro-components').Recordable[]) => import('@pubinfo/pro-components').Recordable[];
         };
         cardBordered: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["cardBordered"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["cardBordered"]>;
             default: boolean;
         };
         autoHeight: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["autoHeight"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["autoHeight"]>;
             default: boolean;
         };
         manualRequest: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["manualRequest"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["manualRequest"]>;
             default: boolean;
         };
         prefixCls: {
@@ -472,26 +472,26 @@ declare const _default: import('../../../../../node_modules/.pnpm/vue@3.5.17_typ
                 type: NumberConstructor;
             };
             submitter: {
-                type: PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["submitter"]>;
+                type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["submitter"]>;
                 default: () => {};
             };
             onFinish: {
-                type: PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["onFinish"]>;
+                type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["onFinish"]>;
             };
             readonly: {
-                type: PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["readonly"]>;
+                type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["readonly"]>;
                 default: boolean;
             };
             grid: {
-                type: PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["grid"]>;
+                type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["grid"]>;
                 default: boolean;
             };
             rowProps: {
-                type: PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["rowProps"]>;
+                type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["rowProps"]>;
                 default: () => {};
             };
             colProps: {
-                type: PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["colProps"]>;
+                type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["colProps"]>;
                 default: () => {};
             };
             layout: any;
@@ -716,7 +716,7 @@ declare const _default: import('../../../../../node_modules/.pnpm/vue@3.5.17_typ
         toolbar: boolean | Partial<import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').ExtractPropTypes<{
             title: StringConstructor;
             settings: {
-                type: PropType<import('@pubinfo/pro-components').ToolBarSetting[] | boolean>;
+                type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ToolBarSetting[] | boolean>;
                 default: () => never[];
             };
         }>> | undefined;
@@ -758,50 +758,50 @@ declare const _default: import('../../../../../node_modules/.pnpm/vue@3.5.17_typ
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<globalThis.ExtractPropTypes<{
-        request: PropType<import('@pubinfo/pro-components').ProTableProps["request"]>;
+    }, Readonly<import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').ExtractPropTypes<{
+        request: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["request"]>;
         dataSource: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["dataSource"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["dataSource"]>;
             default: () => never[];
         };
         params: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["params"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["params"]>;
             default: () => {};
         };
         columns: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["columns"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["columns"]>;
             default: () => never[];
         };
         columnsState: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["columnsState"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["columnsState"]>;
             default: () => {};
         };
         search: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["search"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["search"]>;
             default: boolean;
         };
         toolbar: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["toolbar"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["toolbar"]>;
             default: boolean;
         };
         beforeSearchSubmit: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["beforeSearchSubmit"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["beforeSearchSubmit"]>;
             default: (arg: import('@pubinfo/pro-components').QueryData) => any;
         };
         postData: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["postData"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["postData"]>;
             default: (arg: import('@pubinfo/pro-components').Recordable[]) => import('@pubinfo/pro-components').Recordable[];
         };
         cardBordered: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["cardBordered"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["cardBordered"]>;
             default: boolean;
         };
         autoHeight: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["autoHeight"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["autoHeight"]>;
             default: boolean;
         };
         manualRequest: {
-            type: PropType<import('@pubinfo/pro-components').ProTableProps["manualRequest"]>;
+            type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ProTableProps["manualRequest"]>;
             default: boolean;
         };
         prefixCls: {
@@ -1229,26 +1229,26 @@ declare const _default: import('../../../../../node_modules/.pnpm/vue@3.5.17_typ
                 type: NumberConstructor;
             };
             submitter: {
-                type: PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["submitter"]>;
+                type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["submitter"]>;
                 default: () => {};
             };
             onFinish: {
-                type: PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["onFinish"]>;
+                type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["onFinish"]>;
             };
             readonly: {
-                type: PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["readonly"]>;
+                type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["readonly"]>;
                 default: boolean;
             };
             grid: {
-                type: PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["grid"]>;
+                type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["grid"]>;
                 default: boolean;
             };
             rowProps: {
-                type: PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["rowProps"]>;
+                type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["rowProps"]>;
                 default: () => {};
             };
             colProps: {
-                type: PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["colProps"]>;
+                type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('node_modules/@pubinfo/pro-components/es/pro-form/components').CommonFormProps["colProps"]>;
                 default: () => {};
             };
             layout: any;
@@ -1473,7 +1473,7 @@ declare const _default: import('../../../../../node_modules/.pnpm/vue@3.5.17_typ
         toolbar: boolean | Partial<import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').ExtractPropTypes<{
             title: StringConstructor;
             settings: {
-                type: PropType<import('@pubinfo/pro-components').ToolBarSetting[] | boolean>;
+                type: import('../../../../../node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue').PropType<import('@pubinfo/pro-components').ToolBarSetting[] | boolean>;
                 default: () => never[];
             };
         }>> | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pubinfo/module-rbac",
   "type": "module",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -24,7 +24,7 @@
     "@pubinfo/pro-components": "^1.7.3",
     "alova": "^3.3.4",
     "ant-design-vue": "^4.2.6",
-    "pubinfo": "2.0.0"
+    "pubinfo": "2.0.2"
   },
   "dependencies": {
     "@destyler/color-picker": "^0.1.0",
@@ -48,7 +48,7 @@
     "alova": "^3.3.4",
     "ant-design-vue": "^4.2.6",
     "type-fest": "^4.41.0",
-    "pubinfo": "2.0.0"
+    "pubinfo": "2.0.2"
   },
   "scripts": {
     "dev": "pubinfo build -w --sourcemap",

package/src/components/ResourceIcones/Select.vue

@@ -356,73 +356,87 @@ const previewBoxPadding = 4; // 与 shapeBoxDefaults 中的 padding 对齐
                 />
               </div>
               <!-- 图标颜色设置：始终显示；非 AntD 图标时禁用 -->
-              <div class="flex items-center gap-3 w-full">
-                <label class="text-12px opacity-70 w-14 shrink-0">图标色</label>
-                <a-input
-                  v-model:value="iconColor"
-                  allow-clear
-                  :placeholder="boxType === 'null' ? '默认' : '#ffffff'"
-                  size="small"
-                  class="flex-1 min-w-0"
-                  :disabled="!isAntdIcon"
-                >
-                  <template #prefix>
-                    <div class="relative inline-flex items-center">
-                      <button
-                        type="button"
-                        :disabled="!isAntdIcon"
-                        class="w-4 h-4 rounded border border-gray-300 dark:border-gray-700"
-                        :class="!isAntdIcon ? 'opacity-50 cursor-not-allowed' : ''"
-                        :style="{ background: iconColor || '#ffffff' }"
-                        @click="openIconColorPicker"
+              <div class="flex items-center gap-3 mb-0! w-full flex-col">
+                <div class="flex">
+                  <label class="text-12px opacity-70 w-14 shrink-0 flex items-center">
+                    图标色
+                    <a-tooltip>
+                      <template #title>
+                        仅 Ant Design 图标有效
+                      </template>
+                      <PubinfoIcon name="i-carbon-information" size="12px" class="ml-1 cursor-help" />
+                    </a-tooltip>
+                  </label>
+                  <div class="flex flex-col">
+                    <a-input
+                      v-model:value="iconColor"
+                      allow-clear
+                      :placeholder="boxType === 'null' ? '默认' : '#ffffff'"
+                      size="small"
+                      class="flex-1 min-w-0"
+                      :disabled="!isAntdIcon"
+                    >
+                      <template #prefix>
+                        <div class="relative inline-flex items-center">
+                          <button
+                            type="button"
+                            :disabled="!isAntdIcon"
+                            class="w-4 h-4 rounded border border-gray-300 dark:border-gray-700"
+                            :class="!isAntdIcon ? 'opacity-50 cursor-not-allowed' : ''"
+                            :style="{ background: iconColor || '#ffffff' }"
+                            @click="openIconColorPicker"
+                          />
+                          <input
+                            ref="iconColorPickerRef"
+                            type="color"
+                            :value="iconColor || '#ffffff'"
+                            :disabled="!isAntdIcon"
+                            class="absolute left-0 top-0 opacity-0 pointer-events-none"
+                            style="width:16px;height:16px;"
+                            @input="iconColor = ($event.target as HTMLInputElement).value"
+                          >
+                        </div>
+                      </template>
+                    </a-input>
+                  </div>
+                </div>
+              </div>
+              <!-- 预览：固定底部 -->
+              <div class="w-full mt-auto flex aspect-square">
+                <div class="flex-1 w-full h-full py-4 rounded-md border-t border-t-dashed border-t-[#d0d7de] dark:border-t-[#30363d] flex flex-col items-center gap-2">
+                  <template v-if="tempValueRef">
+                    <div class="w-full h-full flex items-center justify-center">
+                      <PubinfoIcon
+                        v-if="boxType === 'null'"
+                        :name="tempValueRef"
+                        :size="80"
+                        :color="(isAntdIcon && iconColor) ? iconColor : undefined"
+                      />
+                      <PubinfoIcon
+                        v-else
+                        :name="tempValueRef"
+                        :box="boxType"
+                        :size="80"
+                        :angle="boxAngle"
+                        :background="boxBackground"
+                        :radius="boxRadius"
+                        :color="isAntdIcon ? (iconColor || '#ffffff') : undefined"
                       />
-                      <input
-                        ref="iconColorPickerRef"
-                        type="color"
-                        :value="iconColor || '#ffffff'"
-                        :disabled="!isAntdIcon"
-                        class="absolute left-0 top-0 opacity-0 pointer-events-none"
-                        style="width:16px;height:16px;"
-                        @input="iconColor = ($event.target as HTMLInputElement).value"
-                      >
                     </div>
                   </template>
-                </a-input>
+                </div>
               </div>
             </div>
-            <!-- 预览：固定底部 -->
-            <div class="w-full mt-auto">
-              <div class="py-4 rounded-md border-t border-t-dashed border-t-[#d0d7de] dark:border-t-[#30363d] flex flex-col items-center gap-2">
-                <template v-if="tempValueRef">
-                  <PubinfoIcon
-                    v-if="boxType === 'null'"
-                    :name="tempValueRef"
-                    :size="80"
-                    :color="(isAntdIcon && iconColor) ? iconColor : undefined"
-                  />
-                  <PubinfoIcon
-                    v-else
-                    :name="tempValueRef"
-                    :box="boxType"
-                    :size="80"
-                    :angle="boxAngle"
-                    :background="boxBackground"
-                    :radius="boxRadius"
-                    :color="isAntdIcon ? (iconColor || '#ffffff') : undefined"
-                  />
-                </template>
-              </div>
+            <!-- 侧栏底部操作按钮 -->
+            <div class="mt-4 flex justify-end gap-2">
+              <a-button @click="handleClose">
+                取消
+              </a-button>
+              <a-button type="primary" @click="handleConfirm">
+                确定
+              </a-button>
             </div>
           </div>
-          <!-- 侧栏底部操作按钮 -->
-          <div class="mt-4 flex justify-end gap-2">
-            <a-button @click="handleClose">
-              取消
-            </a-button>
-            <a-button type="primary" @click="handleConfirm">
-              确定
-            </a-button>
-          </div>
         </div>
       </div>
     </a-modal>

package/src/views/resource/components/IconSelect.vue

@@ -17,32 +17,77 @@ const modelValue = defineModel<Form>({
   },
 });
 
-// 将外部存储扩展到 meta.iconOptions，避免破坏后端接口的 `icon: string` 结构
-const iconOptions = computed({
-  get() {
-    const meta = (modelValue.value.meta as any) || ((modelValue.value.meta as any) = {});
-    if (!meta.iconOptions) {
-      meta.iconOptions = {
-        boxType: 'null',
-        angle: 65,
-        background: { from: '#65E54A', to: '#35C724' },
-        radius: 6,
-        iconColor: '',
-      };
+// 仅当选择了非空的 boxType 时才把 iconOptions 持久化到 meta.iconOptions，
+// 避免未选择边框模式时仍写入多余数据导致后端解析问题。
+interface LocalIconOptions {
+  boxType: 'null' | 'square' | 'prism'
+  angle: number
+  background: { from: string, to: string } | string
+  radius: number
+  iconColor: string
+}
+
+function createDefaultIconOptions(): LocalIconOptions {
+  return {
+    boxType: 'null',
+    angle: 65,
+    background: { from: '#65E54A', to: '#35C724' },
+    radius: 6,
+    iconColor: '',
+  };
+}
+
+const metaRef = computed(() => (modelValue.value.meta as any) || ((modelValue.value.meta as any) = {}));
+
+// 本地响应式副本，解决：刷新后后端异步填充 meta.iconOptions（对象引用被整体替换）导致视图仍指向初始默认对象的问题。
+const iconOptions = reactive<LocalIconOptions>(createDefaultIconOptions());
+
+// 监听 meta.iconOptions 的“引用”变化（后端数据覆盖时）并合并到本地副本；
+// 不用 deep 避免属性级别循环触发。
+watch(
+  () => metaRef.value.iconOptions,
+  (val) => {
+    if (val) {
+      Object.assign(iconOptions, createDefaultIconOptions(), val);
+    }
+    else {
+      // 若后端未提供，重置为默认值
+      Object.assign(iconOptions, createDefaultIconOptions());
     }
-    return meta.iconOptions;
   },
-  set(val) {
-    const meta = (modelValue.value.meta as any) || ((modelValue.value.meta as any) = {});
-    meta.iconOptions = val || {
-      boxType: 'null',
-      angle: 65,
-      background: { from: '#65E54A', to: '#35C724' },
-      radius: 6,
-      iconColor: '',
-    };
+  { immediate: true },
+);
+
+// 将本地修改“写回” meta.iconOptions，使用浅比较避免无限循环。
+watch(
+  iconOptions,
+  (val) => {
+    if (!modelValue.value.icon) {
+      if (metaRef.value.iconOptions) {
+        Reflect.deleteProperty(metaRef.value, 'iconOptions');
+      }
+      return;
+    }
+    const current = metaRef.value.iconOptions;
+    let changed = false;
+    if (!current) {
+      changed = true;
+    }
+    else {
+      const keys = new Set([...Object.keys(current), ...Object.keys(val as any)]);
+      for (const k of keys) {
+        if ((current as any)[k] !== (val as any)[k]) {
+          changed = true;
+          break;
+        }
+      }
+    }
+    if (changed) {
+      metaRef.value.iconOptions = { ...(val as any) };
+    }
   },
-});
+  { deep: true },
+);
 
 const show = computed(() => {
   const type = modelValue.value.type as RESOURCE_TYPE;
@@ -61,13 +106,14 @@ const isDynamicRoutesForm = computed(() => {
 function clearIcon(e: MouseEvent) {
   e.stopPropagation();
   if (modelValue.value.icon) {
-    modelValue.value.icon = undefined; // 设为空串以触发 v-if 切换
+    modelValue.value.icon = undefined; // 设为 undefined 以触发 v-if 切换
+    Reflect.deleteProperty(metaRef.value, 'iconOptions');
   }
 }
 </script>
 
 <template>
-  <div v-if="isDynamicRoutesForm && show.icon" class="w-full h-full flex justify-center  mb-4">
+  <a-form-item v-if="isDynamicRoutesForm && show.icon" label="资源图标">
     <ResourceIconesSelect
       v-slot="{ open }"
       v-model="modelValue.icon"
@@ -81,17 +127,17 @@ function clearIcon(e: MouseEvent) {
       <template v-if="modelValue.icon">
         <!-- 已选择图标展示盒子 -->
         <div
-          class="size-20 flex justify-center items-center cursor-pointer
+          class="size-64px flex justify-center items-center cursor-pointer
           rounded-md border-px border-dashed relative group
           border-[#d9d9d9] dark:border-[#424242]
-          hover:border-[#5794f7] dark:hover:border-[#5187e1]"
+          hover:border-[#5794f7] dark:hover:border-[#5187e1] p-8px"
           @click="open"
         >
           <PubinfoIcon
             v-if="iconOptions.boxType && iconOptions.boxType !== 'null'"
             :name="modelValue.icon"
             :box="iconOptions.boxType"
-            :size="76"
+            size="48px"
             :radius="iconOptions.radius"
             :background="iconOptions.background"
             :angle="iconOptions.angle"
@@ -100,7 +146,7 @@ function clearIcon(e: MouseEvent) {
           <PubinfoIcon
             v-else
             :name="modelValue.icon"
-            size="76px"
+            size="48px"
             :color="(modelValue.icon || '').startsWith('antd:') ? (iconOptions.iconColor || undefined) : undefined"
           />
           <!-- 清除按钮 -->
@@ -118,7 +164,7 @@ function clearIcon(e: MouseEvent) {
       <!-- null icon select box -->
       <template v-else>
         <div
-          class="size-20 flex justify-center items-center
+          class="size-64px flex justify-center items-center
           rounded-md border-px border-dashed cursor-pointer
           border-[#d9d9d9] dark:border-[#424242]
           hover:border-[#5794f7] dark:hover:border-[#5187e1]
@@ -134,5 +180,5 @@ function clearIcon(e: MouseEvent) {
         </div>
       </template>
     </ResourceIconesSelect>
-  </div>
+  </a-form-item>
 </template>

package/src/views/resource/components/ResourceEdit.vue

@@ -203,42 +203,40 @@ defineExpose({
         :label-col="{ style: { width: '100px' } }"
       >
         <a-row :gutter="8">
-          <a-col :span="12">
-            <a-col v-if="parentNode?.name" :span="24">
-              <a-form-item name="parentId">
-                <template #label>
-                  <DatabaseOutlined class="mr-1" />
-                  父资源
-                </template>
-                {{ parentNode?.name }}
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="资源类型" name="type">
-                <div
-                  v-if="state.title === ACTION.EDIT"
-                  class="flex items-center space-x-1"
-                >
-                  <!-- <PubinfoIcon v-if="form.type" :name="`resource-${RESOURCE_ICON[Number(form.type)]}`" class="text-xl" />
+          <a-col v-if="parentNode?.name" :span="24">
+            <a-form-item name="parentId">
+              <template #label>
+                <DatabaseOutlined class="mr-1" />
+                父资源
+              </template>
+              {{ parentNode?.name }}
+            </a-form-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-item label="资源类型" name="type">
+              <div
+                v-if="state.title === ACTION.EDIT"
+                class="flex items-center space-x-1"
+              >
+                <!-- <PubinfoIcon v-if="form.type" :name="`resource-${RESOURCE_ICON[Number(form.type)]}`" class="text-xl" />
                 <span>
                   {{ resourceComputedOptions.find(e => e.value === form.type)?.label }}
                 </span> -->
 
-                  <a-tag v-if="form.type" :color="RESOURCE_COLOR[Number(form.type)]" :bordered="false">
-                    {{ resourceComputedOptions.find(e => e.value === form.type)?.label }}
-                  </a-tag>
-                </div>
-                <a-radio-group
-                  v-else
-                  v-model:value="form.type"
-                  :options="resourceComputedOptions"
-                  option-type="button"
-                  button-style="solid"
-                />
-              </a-form-item>
-            </a-col>
+                <a-tag v-if="form.type" :color="RESOURCE_COLOR[Number(form.type)]" :bordered="false">
+                  {{ resourceComputedOptions.find(e => e.value === form.type)?.label }}
+                </a-tag>
+              </div>
+              <a-radio-group
+                v-else
+                v-model:value="form.type"
+                :options="resourceComputedOptions"
+                option-type="button"
+                button-style="solid"
+              />
+            </a-form-item>
           </a-col>
-          <a-col :span="12">
+          <a-col :span="24">
             <ResourceIconSelect v-model="form" />
           </a-col>
         </a-row>