@pubinfo/module-rbac 2.0.0-rc.5 → 2.0.1

package/dist/index.js

@@ -75,9 +75,9 @@ import './index.css';var We = {
 		"src/views/page_w_setting/index.vue": () => import("./page_w_setting-B_im6vBo.js"),
 		"src/views/position/index.vue": () => import("./position-BkpbHXYP.js"),
 		"src/views/region/index.vue": () => import("./region-DVkbjI9t.js"),
-		"src/views/resource/index.vue": () => import("./resource-CyI9ZpmF.js"),
-		"src/views/role/index.vue": () => import("./role-B2tKqUvP.js"),
+		"src/views/resource/index.vue": () => import("./resource-Bzx2Tx8m.js"),
 		"src/views/role_group/index.vue": () => import("./role_group-DqzFHwKx.js"),
+		"src/views/role/index.vue": () => import("./role-B2tKqUvP.js"),
 		"src/views/safe_setting/index.vue": () => import("./safe_setting-uj9p_wW0.js"),
 		"src/views/tabbar_setting/index.vue": () => import("./tabbar_setting-HFHrLVgt.js"),
 		"src/views/tenant/index.vue": () => import("./tenant-C8kVbfgt.js"),
@@ -89,10 +89,10 @@ import './index.css';var We = {
 		"src/views/data-permission/components/createAndEditDataPermission.vue": () => import("./createAndEditDataPermission-CAaxueTy.js"),
 		"src/views/dictionary/components/drawerDictionary.vue": () => import("./drawerDictionary-Bk0BgL7i.js"),
 		"src/views/dictionary/components/drawerDictionaryItem.vue": () => import("./drawerDictionaryItem-Dy2T56AH.js"),
-		"src/views/group/components/drawerGroup.vue": () => import("./drawerGroup-ZyzAWXOl.js"),
 		"src/views/log_center/components/browserType.vue": () => import("./browserType-BGl2j5RW.js"),
 		"src/views/log_center/components/loginHistoryDetail.vue": () => import("./loginHistoryDetail-DiuNa6Sv.js"),
 		"src/views/log_center/components/operateHistoryDetail.vue": () => import("./operateHistoryDetail-r30ZBNqw.js"),
+		"src/views/group/components/drawerGroup.vue": () => import("./drawerGroup-ZyzAWXOl.js"),
 		"src/views/organization/components/drawerOrganization.vue": () => import("./drawerOrganization-HSVB8JzO.js"),
 		"src/views/organization/components/drawerRole.vue": () => import("./drawerRole-BVeaz3Yb.js"),
 		"src/views/position/components/drawerPosition.vue": () => import("./drawerPosition-vsuG4JYe.js"),
@@ -100,15 +100,15 @@ import './index.css';var We = {
 		"src/views/resource/components/ComponentSelect.vue": () => import("./ComponentSelect-Bhwuc86o.js"),
 		"src/views/resource/components/DynamicRoutesForm.vue": () => import("./DynamicRoutesForm-D35jFnxF.js"),
 		"src/views/resource/components/HoverCard.vue": () => import("./HoverCard-U5WTpvFy.js"),
-		"src/views/resource/components/IconSelect.vue": () => import("./IconSelect-Ct5FkeHI.js"),
+		"src/views/resource/components/IconSelect.vue": () => import("./IconSelect-BEetYi8i.js"),
 		"src/views/resource/components/ImportExport.vue": () => import("./ImportExport-D8uzaOMz.js"),
 		"src/views/resource/components/MetaForm.vue": () => import("./MetaForm-BSGuZXgj.js"),
-		"src/views/resource/components/ResourceEdit.vue": () => import("./ResourceEdit-oAPLPUf0.js"),
+		"src/views/resource/components/ResourceEdit.vue": () => import("./ResourceEdit-JPc5dCoU.js"),
 		"src/views/resource/components/RoleRelation.vue": () => import("./RoleRelation-YaSQQxQ2.js"),
-		"src/views/role/components/ResourceRelation.vue": () => import("./ResourceRelation-BRseTUw2.js"),
-		"src/views/role/components/drawerRole.vue": () => import("./drawerRole-tan379DU.js"),
 		"src/views/role_group/components/ResourceRelation.vue": () => import("./ResourceRelation-CKolCnHC.js"),
 		"src/views/role_group/components/drawerRole.vue": () => import("./drawerRole-CzTW_I2H.js"),
+		"src/views/role/components/ResourceRelation.vue": () => import("./ResourceRelation-BRseTUw2.js"),
+		"src/views/role/components/drawerRole.vue": () => import("./drawerRole-tan379DU.js"),
 		"src/views/tenant/components/TenantEdit.vue": () => import("./TenantEdit-C28473_2.js"),
 		"src/views/user/components/OrgAndPosition.vue": () => import("./OrgAndPosition-CF7ZJtNB.js"),
 		"src/views/user/components/UserAuthorization.vue": () => import("./UserAuthorization-C4SLMNmh.js"),
@@ -1413,7 +1413,7 @@ const rf = {
 	children: [
 		{
 			path: "resource",
-			component: () => import("./resource-CyI9ZpmF.js"),
+			component: () => import("./resource-Bzx2Tx8m.js"),
 			name: "Resource",
 			meta: {
 				title: "资源管理",

package/dist/{resource-CyI9ZpmF.js → resource-Bzx2Tx8m.js}

@@ -6,11 +6,11 @@ import "./enum-CYW8g64p.js";
 import { b as r, c as i, d as a, e as o } from "./enum-BMY6bmPA.js";
 import "./DynamicRoutesForm-CE2RPs7y.js";
 import "./HoverCard-B79q5sly.js";
-import "./IconSelect-HAhfS6hd.js";
+import "./IconSelect-D50456Yh.js";
 import "./dayjs.min-CdDcH50N.js";
 import { b as s } from "./ImportExport-ByRTssxP.js";
 import "./MetaForm-DErrpELP.js";
-import { b as c } from "./ResourceEdit-DF-2_zoi.js";
+import { b as c } from "./ResourceEdit-BVdRFGOK.js";
 import { b as l } from "./RoleRelation-DXZxscPY.js";
 import { PubinfoIcon as u, useAuth as d } from "pubinfo";
 import { computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, openBlock as b, ref as x, resolveDirective as S, toDisplayString as C, unref as w, withCtx as T, withDirectives as E } from "vue";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pubinfo/module-rbac",
   "type": "module",
-  "version": "2.0.0-rc.5",
+  "version": "2.0.1",
   "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-rc.5"
+    "pubinfo": "2.0.1"
   },
   "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-rc.5"
+    "pubinfo": "2.0.1"
   },
   "scripts": {
     "dev": "pubinfo build -w --sourcemap",

package/src/components/ResourceIcones/Select.vue

@@ -358,58 +358,63 @@ const previewBoxPadding = 4; // 与 shapeBoxDefaults 中的 padding 对齐
               <!-- 图标颜色设置：始终显示；非 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"
-                      />
-                      <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 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>
+                  <span v-if="!isAntdIcon" class="text-8px opacity-70">仅 Ant Design 图标有效</span>
+                </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">
+            <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">
-                  <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"
-                  />
+                  <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"
+                    />
+                  </div>
                 </template>
               </div>
             </div>

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>