@pubinfo/module-rbac 2.0.11 → 2.0.13

package/src/components/ResourceIcones/BoxColorPicker.vue

@@ -3,12 +3,13 @@ import { ref, watch } from 'vue';
 
 defineOptions({ name: 'ResourceIconesBoxColorPicker' });
 
-const props = defineProps<{ angle?: number | string, background?: Background, radius?: number | string, disabled?: boolean }>();
+const props = defineProps<{ angle?: number | string, background?: Background, radius?: number | string, iconSize?: number | string, disabled?: boolean }>();
 
 const emit = defineEmits<{
   (e: 'update:angle', v: number | string): void
   (e: 'update:background', v: Background): void
   (e: 'update:radius', v: number | string): void
+  (e: 'update:iconSize', v: number | string): void
 }>();
 
 type Background = string | { from: string, to: string };
@@ -34,17 +35,53 @@ function normalizeBg(b?: Background): { from: string, to: string } {
   }
   return { from: b.from, to: b.to };
 }
+// 圆角改为百分比：内部使用纯数字 0-50 表示 0%-50%，对外发射 'xx%'
 function normalizeRadius(r?: number | string): number {
+  if (typeof r === 'string' && r.trim().endsWith('%')) {
+    const n = Number.parseFloat(r);
+    if (Number.isFinite(n)) {
+      return clampPercent(n);
+    }
+  }
   if (typeof r === 'number' && Number.isFinite(r)) {
-    return Math.max(0, r);
+    return clampPercent(r);
   }
   if (typeof r === 'string') {
     const n = Number.parseFloat(r);
     if (Number.isFinite(n)) {
-      return Math.max(0, n);
+      return clampPercent(n);
+    }
+  }
+  return 50;
+}
+
+// 图标大小（百分比）：内部使用 0-100 数字，外部发射 'xx%'
+function normalizeIconSize(v?: number | string): number {
+  if (typeof v === 'string' && v.trim().endsWith('%')) {
+    const n = Number.parseFloat(v);
+    if (Number.isFinite(n)) {
+      return clamp100(n);
+    }
+  }
+  if (typeof v === 'number' && Number.isFinite(v)) {
+    return clamp100(v);
+  }
+  if (typeof v === 'string') {
+    const n = Number.parseFloat(v);
+    if (Number.isFinite(n)) {
+      return clamp100(n);
     }
   }
-  return 6; // default px
+  return 50;
+}
+
+function clampPercent(n: number) {
+  // 一般正方形圆角超过 50% 没有意义，这里限制 0-50
+  return Math.min(50, Math.max(0, n));
+}
+
+function clamp100(n: number) {
+  return Math.min(100, Math.max(0, n));
 }
 
 const init = normalizeBg(props.background);
@@ -52,6 +89,7 @@ const fromColor = ref<string>(init.from);
 const toColor = ref<string>(init.to);
 const angleRef = ref<number>(normalizeAngle(props.angle));
 const radiusRef = ref<number>(normalizeRadius(props.radius));
+const iconSizeRef = ref<number>(normalizeIconSize(props.iconSize));
 
 // 原生 color 输入：放在前缀里，用透明绝对定位来锚定弹层位置
 const fromColorPickerRef = ref<HTMLInputElement | null>(null);
@@ -83,7 +121,11 @@ function openToPicker() {
 watch([fromColor, toColor, angleRef, radiusRef], () => {
   emit('update:background', { from: fromColor.value, to: toColor.value });
   emit('update:angle', angleRef.value);
-  emit('update:radius', radiusRef.value);
+  emit('update:radius', `${radiusRef.value}%`);
+}, { immediate: true });
+
+watch(iconSizeRef, () => {
+  emit('update:iconSize', `${iconSizeRef.value}%`);
 }, { immediate: true });
 
 watch(() => props.background, (b) => {
@@ -107,6 +149,13 @@ watch(() => props.radius, (r) => {
   radiusRef.value = normalizeRadius(r);
 });
 
+watch(() => props.iconSize, (v) => {
+  if (v == null) {
+    return;
+  }
+  iconSizeRef.value = normalizeIconSize(v);
+});
+
 // 提示：预览区已移除以节省侧栏空间
 </script>
 
@@ -162,11 +211,18 @@ watch(() => props.radius, (r) => {
       <span class="text-12px opacity-70">deg</span>
     </div>
 
-    <!-- 圆角：仅使用数字输入，节省横向空间 -->
+    <!-- 圆角（百分比）：仅使用数字输入，节省横向空间 -->
     <div class="flex items-center gap-3">
       <label class="text-12px opacity-70 w-14 shrink-0">圆角</label>
-      <a-input-number v-model:value="radiusRef" :disabled="props.disabled" :min="0" :max="48" :step="1" size="small" class="w-28" />
-      <span class="text-12px opacity-70">px</span>
+      <a-input-number v-model:value="radiusRef" :disabled="props.disabled" :min="0" :max="50" :step="1" size="small" class="w-28" />
+      <span class="text-12px opacity-70">%</span>
+    </div>
+
+    <!-- 图标大小（百分比）：仅在盒子内生效，控制内层图标比例 -->
+    <div class="flex items-center gap-3">
+      <label class="text-12px opacity-70 w-14 shrink-0">图标大小</label>
+      <a-input-number v-model:value="iconSizeRef" :disabled="props.disabled" :min="0" :max="100" :step="1" size="small" class="w-28" />
+      <span class="text-12px opacity-70">%</span>
     </div>
   </div>
 </template>

package/src/components/ResourceIcones/Select.vue

@@ -13,15 +13,19 @@ const modelValueRef = defineModel<string>();
 const modelBoxType = defineModel<'null' | 'square' | 'prism'>('boxType', { default: 'null' });
 const modelAngle = defineModel<number | string>('angle', { default: 65 });
 const modelBackground = defineModel<string | { from: string, to: string }>('background', { default: { from: '#65E54A', to: '#35C724' } });
-const modelRadius = defineModel<number | string>('radius', { default: 6 });
+// 圆角使用百分比，默认 50%
+const modelRadius = defineModel<number | string>('radius', { default: '50%' });
 const modelIconColor = defineModel<string>('iconColor', { default: '' });
+// 图标大小（百分比或 CSS 长度），默认 50%
+const modelIconSize = defineModel<number | string>('iconSize', { default: '50%' });
 // 对话框内部临时选择值（仅在点击确定时写回到 v-model）
 const tempValueRef = ref<string | undefined>(modelValueRef.value);
 // 对话框内部样式状态
 const boxType = ref<'null' | 'square' | 'prism'>(modelBoxType.value || 'null');
 const boxAngle = ref<number | string>(modelAngle.value ?? 65);
 const boxBackground = ref<string | { from: string, to: string }>(modelBackground.value ?? { from: '#65E54A', to: '#35C724' });
-const boxRadius = ref<number | string>(modelRadius.value ?? 6);
+const boxRadius = ref<number | string>(modelRadius.value ?? '50%');
+const boxIconSize = ref<number | string>(modelIconSize.value ?? '50%');
 // 图标颜色：无背景默认不着色（空字符串表示未设置）；有背景默认白色
 const iconColor = ref<string>(modelIconColor.value ?? '');
 const iconColorPickerRef = ref<HTMLInputElement | null>(null);
@@ -39,7 +43,8 @@ function handleOpenModal() {
   boxBackground.value = typeof bg === 'string'
     ? bg
     : (bg ? { ...(bg as any) } : { from: '#65E54A', to: '#35C724' });
-  boxRadius.value = modelRadius.value ?? 6;
+  boxRadius.value = modelRadius.value ?? '50%';
+  boxIconSize.value = modelIconSize.value ?? '50%';
   iconColor.value = modelIconColor.value ?? '';
   visibleRef.value = true;
 }
@@ -56,6 +61,7 @@ function handleConfirm() {
   const bg2 = boxBackground.value as any;
   modelBackground.value = typeof bg2 === 'string' ? bg2 : (bg2 ? { ...bg2 } : bg2);
   modelRadius.value = boxRadius.value;
+  modelIconSize.value = boxIconSize.value;
   modelIconColor.value = iconColor.value;
   visibleRef.value = false;
 }
@@ -323,7 +329,7 @@ const previewBoxPadding = 4; // 与 shapeBoxDefaults 中的 padding 对齐
                       :name="tempValueRef"
                       box="square"
                       :size="previewBoxOuter"
-                      radius="6px"
+                      radius="25%"
                       color="#ffffff"
                     />
                   </div>
@@ -335,7 +341,7 @@ const previewBoxPadding = 4; // 与 shapeBoxDefaults 中的 padding 对齐
                       box="prism"
                       :size="previewBoxOuter"
                       color="#ffffff"
-                      radius="2px"
+                      radius="2%"
                     />
                   </div>
                 </a-radio-button>
@@ -352,6 +358,7 @@ const previewBoxPadding = 4; // 与 shapeBoxDefaults 中的 padding 对齐
                   v-model:angle="boxAngle"
                   v-model:background="boxBackground"
                   v-model:radius="boxRadius"
+                  v-model:icon-size="boxIconSize"
                   :disabled="boxType === 'null'"
                 />
               </div>
@@ -420,6 +427,7 @@ const previewBoxPadding = 4; // 与 shapeBoxDefaults 中的 padding 对齐
                         :angle="boxAngle"
                         :background="boxBackground"
                         :radius="boxRadius"
+                        :icon-size="boxIconSize"
                         :color="isAntdIcon ? (iconColor || '#ffffff') : undefined"
                       />
                     </div>

package/src/index.ts

@@ -43,6 +43,7 @@ export function rbac(options: RbacOptions): ModuleOptions {
 }
 
 export * from './components/OrgUserSelector';
+export { default as ResourceSelector } from './components/ResourceSelector/index.vue';
 export * from './composables/useWebSocketManager';
 export * from './interface';
 export * from './stores/view';

package/src/views/organization/index.vue

@@ -42,7 +42,7 @@ const expandedRowKeys = ref<string[]>([]);
 
 const query = ref<API.getRbacOrgOrgListByParentIdParams>({ parentId: '0' });
 
-const tableData: Ref<ChilData[]> = ref([]);
+const tableData = ref<ChilData[]>([]);
 
 const tableRef = ref<VxeTableInstance<ChilData>>();
 const DrawerOrganizationRef = ref();
@@ -150,12 +150,11 @@ function reset() {
   generateData();
 }
 
-function generateData(): void {
+async function generateData() {
   expandedRowKeys.value = [];
   setLoading(true);
-  getRbacOrgOrgListByParentId({
-    parentId: '0',
-  }).then((res: any) => {
+  try {
+    const res = await getRbacOrgOrgListByParentId({ parentId: '0' });
     if (res?.success) {
       tableData.value = res.data?.map((e: API.PubOrg) => {
         return {
@@ -163,11 +162,13 @@ function generateData(): void {
           children: [],
           hasChild: !e.leaf,
         };
-      });
+      }) ?? [];
       tableRef.value?.reloadData(tableData.value);
     }
+  }
+  finally {
     setLoading(false);
-  });
+  }
 }
 
 generateData();
@@ -175,13 +176,14 @@ generateData();
 const operateRow = ref<ChilData>({});
 const operateType = ref<string>('');
 
-function updateData() {
+async function updateData() {
   if (operateType.value === ACTION.ADD) {
     searchId.value = '';
     isSearch.value = false;
     generateData();
   }
-  else if (operateType.value === ACTION.ADDNEXT) {
+
+  if (operateType.value === ACTION.ADDNEXT) {
     if (operateRow.value.hasChild) {
       tableRef.value?.setTreeExpand(operateRow.value.children, false);
       tableRef.value?.reloadTreeExpand(operateRow.value);
@@ -198,9 +200,14 @@ function updateData() {
       }
     }
   }
+
   // 编辑某一行数据后，把父节点关闭然后重新打开，页面数据才更新
-  else if (operateType.value === ACTION.EDIT) {
+  if (operateType.value === ACTION.EDIT) {
     const parentNode = getNodeById(tableData.value, operateRow.value.parentId!);
+    if (!parentNode) {
+      await generateData();
+      return;
+    }
     tableRef.value?.setTreeExpand(parentNode.children, false);
     tableRef.value?.reloadTreeExpand(parentNode);
   }

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

@@ -23,8 +23,9 @@ interface LocalIconOptions {
   boxType: 'null' | 'square' | 'prism'
   angle: number
   background: { from: string, to: string } | string
-  radius: number
+  radius: number | string
   iconColor: string
+  iconSize?: number | string
 }
 
 function createDefaultIconOptions(): LocalIconOptions {
@@ -32,8 +33,9 @@ function createDefaultIconOptions(): LocalIconOptions {
     boxType: 'null',
     angle: 65,
     background: { from: '#65E54A', to: '#35C724' },
-    radius: 6,
+    radius: '50%',
     iconColor: '',
+    iconSize: '50%',
   };
 }
 
@@ -122,6 +124,7 @@ function clearIcon(e: MouseEvent) {
       v-model:background="iconOptions.background"
       v-model:radius="iconOptions.radius"
       v-model:icon-color="iconOptions.iconColor"
+      v-model:icon-size="iconOptions.iconSize"
     >
       <!-- select box -->
       <template v-if="modelValue.icon">
@@ -141,6 +144,7 @@ function clearIcon(e: MouseEvent) {
             :radius="iconOptions.radius"
             :background="iconOptions.background"
             :angle="iconOptions.angle"
+            :icon-size="iconOptions.iconSize"
             :color="(modelValue.icon || '').startsWith('antd:') ? (iconOptions.iconColor || '#ffffff') : undefined"
           />
           <PubinfoIcon

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

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { Form } from '../interface';
+import { useLayoutForm } from '../hooks/useLayoutForm';
+import HoverCard from './HoverCard.vue';
+
+/**
+ * 修改系统层的布局
+ *
+ * ## Methods
+ * - 控制 侧边栏 是否显示
+ * - 控制 顶栏 是否显示
+ * - 控制 Tabs 是否显示
+ * - 控制 面包屑 是否显示
+ */
+
+defineOptions({
+  name: 'LayoutForm',
+});
+
+const form = defineModel<Form>({
+  default: {
+    meta: {
+      layout: {
+        header: true,
+        sidebar: true,
+        tabs: true,
+        toolbar: true,
+      },
+    },
+  },
+});
+
+const { layoutForm, show } = useLayoutForm(form);
+</script>
+
+<template>
+  <div v-if="show">
+    <a-divider>布局配置</a-divider>
+
+    <a-row :gutter="[8, 8]">
+      <a-col :span="12">
+        <a-form-item name="enable" :label-col="{ span: 0 }">
+          <HoverCard class="flex items-center justify-between">
+            <div class="text-sm font-medium">
+              显示 Header
+            </div>
+            <a-switch v-model:checked="layoutForm.header" />
+          </HoverCard>
+        </a-form-item>
+      </a-col>
+
+      <a-col :span="12">
+        <a-form-item name="enable" :label-col="{ span: 0 }">
+          <HoverCard class="flex items-center justify-between">
+            <div class="text-sm font-medium">
+              显示 Sidebar
+            </div>
+            <a-switch v-model:checked="layoutForm.sidebar" />
+          </HoverCard>
+        </a-form-item>
+      </a-col>
+
+      <a-col :span="12">
+        <a-form-item name="enable" :label-col="{ span: 0 }">
+          <HoverCard class="flex items-center justify-between">
+            <div class="text-sm font-medium">
+              显示 Tabs
+            </div>
+            <a-switch v-model:checked="layoutForm.tabs" />
+          </HoverCard>
+        </a-form-item>
+      </a-col>
+
+      <a-col :span="12">
+        <a-form-item name="enable" :label-col="{ span: 0 }">
+          <HoverCard class="flex items-center justify-between">
+            <div class="text-sm font-medium">
+              显示 Toolbar
+            </div>
+            <a-switch v-model:checked="layoutForm.toolbar" />
+          </HoverCard>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.form-item-bottom-0, .ant-form-item {
+  margin-bottom: 0;
+}
+</style>

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

@@ -5,6 +5,7 @@ import type { AddForm, EditForm, Form, TreeNode } from '../interface';
 import { useToggle } from '@vueuse/core';
 import { message } from 'ant-design-vue';
 import { cloneDeep } from 'lodash-es';
+import { PartyLoginModal } from 'pubinfo';
 import { getRbacResourceInfo, postRbacResourceAddResource, postRbacResourceResourceUpdate } from '@/api/modules/rbac';
 import { DATA_PERMISSION_TYPE, dataPermissionOptions } from '@/views/data-permission/enum';
 import { ACTION, RESOURCE_COLOR, RESOURCE_TYPE, resourceOptions } from '../enum';
@@ -12,6 +13,7 @@ import { useMetaForm } from '../hooks/useMetaForm';
 import { defaultMeta } from '../model';
 import DynamicRoutesForm from './DynamicRoutesForm.vue';
 import ResourceIconSelect from './IconSelect.vue';
+import LayoutForm from './LayoutForm.vue';
 import MetaForm from './MetaForm.vue';
 
 defineOptions({
@@ -94,6 +96,11 @@ const resourceComputedOptions = computed(() => {
 
 const { show, resetIncompatibleOptions } = useMetaForm(form);
 
+// 计算第三方登录的目标URL (iframe或link地址)
+const partyLoginTargetUrl = computed(() => {
+  return form.value.meta?.iframe || form.value.meta?.link || '';
+});
+
 const [formLoading, setFormLoading] = useToggle(false);
 async function onOpen(key: ACTION, record?: Form) {
   state.title = key;
@@ -268,6 +275,22 @@ defineExpose({
           </a-col>
         </a-row>
 
+        <a-row v-if="show.dynamic" :gutter="8">
+          <a-col :span="24">
+            <a-form-item label="对接第三方" name="description" :label-col="{ span: 3 }">
+              <PartyLoginModal v-model="form.meta!.partyLogin" :target-url="partyLoginTargetUrl">
+                <template #trigger>
+                  <a-input
+                    :value="form.meta!.partyLogin && form.meta!.partyLogin.length > 0 ? '已配置第三方登录流程' : ''"
+                    placeholder="配置第三方登录流程"
+                    readonly
+                  />
+                </template>
+              </PartyLoginModal>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
         <a-row :gutter="8">
           <a-col :span="24">
             <a-form-item label="描述" name="description" :label-col="{ span: 3 }">
@@ -296,6 +319,7 @@ defineExpose({
         </a-row>
 
         <MetaForm v-model="form" />
+        <LayoutForm v-model="form" />
       </a-form>
     </a-spin>
 

package/src/views/resource/hooks/useLayoutForm.ts

@@ -0,0 +1,57 @@
+import type { Ref } from 'vue';
+import type { Form } from '../interface';
+import type { CustomMetaLayout } from '../model';
+import { RESOURCE_TYPE } from '../enum';
+
+/**
+ * 需要判断是否显示布局配置项
+ * 因为这是后续增加的一个功能，所以在之前是没有的。
+ * 这就意味着，对于已有的数据，如果没有 layout 字段，则默认都显示
+ * @param form 资源表单对象
+ */
+export function useLayoutForm(form: Ref<Form>) {
+  // 仅在 资源类型 为 内嵌 的时候显示布局配置项
+  const show = computed(() => {
+    const type = form.value.type as RESOURCE_TYPE;
+    return [RESOURCE_TYPE.APP, RESOURCE_TYPE.DYNAMIC_APP].includes(type);
+  });
+
+  /**
+   * 在这里是为了让 LayoutForm 的 v-model 绑定有一个稳定的对象引用
+   * 避免直接绑定 form.value.meta.layout 导致的引用变化问题
+   *
+   * @step-1 在这里会判断 layout 是否存在，不存在则创建默认值
+   *
+   * @step-2 有可能 layout 是有部分字段缺失的，所以需要补全，
+   * 虽然这可能不会存在，但是这需要在我们的考虑范围之内
+   *
+   */
+  const layoutForm = computed<CustomMetaLayout>(() => {
+    // 如果没有 layout 字段，则默认都显示
+    if (!form.value.meta?.layout) {
+      return {
+        header: true,
+        sidebar: true,
+        tabs: true,
+        toolbar: true,
+      };
+    }
+    // 如果 layout 存在，但有部分字段缺失，则补全
+    const defaultLayout: CustomMetaLayout = {
+      header: true,
+      sidebar: true,
+      tabs: true,
+      toolbar: true,
+    };
+    form.value.meta.layout = {
+      ...defaultLayout,
+      ...form.value.meta.layout,
+    };
+    return form.value.meta.layout;
+  });
+
+  return {
+    show,
+    layoutForm,
+  };
+}

package/src/views/resource/hooks/useMetaForm.ts

@@ -23,6 +23,8 @@ export function useMetaForm(form: Ref<Form>) {
       tabbar: ![RESOURCE_TYPE.APP, RESOURCE_TYPE.DYNAMIC_APP, RESOURCE_TYPE.INDEX, RESOURCE_TYPE.BUTTON].includes(type),
 
       breadcrumb: ![RESOURCE_TYPE.BUTTON].includes(type),
+
+      dynamic: [RESOURCE_TYPE.IFRAME, RESOURCE_TYPE.LINK].includes(type),
     };
   });
 

package/src/views/resource/model.ts

@@ -1,3 +1,13 @@
+/**
+ * 默认的 meta.layout 对象
+ */
+export interface CustomMetaLayout {
+  header: boolean
+  sidebar: boolean
+  tabs: boolean
+  toolbar: boolean
+}
+
 /**
  * 默认的 meta 对象
  *
@@ -17,6 +27,7 @@
  * @param breadcrumb 是否在面包屑显示
  * @param link 外链地址
  * @param iframe 内嵌地址
+ * @param partyLogin 第三方登录配置
  */
 export interface CustomMeta {
   url: string
@@ -35,6 +46,8 @@ export interface CustomMeta {
   breadcrumb: boolean
   link?: string
   iframe?: string
+  layout: CustomMetaLayout
+  partyLogin?: any[] // 第三方登录配置数据
 }
 
 export const defaultMeta: CustomMeta = {
@@ -44,7 +57,7 @@ export const defaultMeta: CustomMeta = {
   scope: '',
   activeMenu: undefined,
   isDev: false,
-  devText: '该功能暂未上线，敬请期待！',
+  devText: '该功能暂未上线,敬请期待！',
   cache: false,
   cacheName: undefined,
   noCache: undefined,
@@ -54,4 +67,11 @@ export const defaultMeta: CustomMeta = {
   breadcrumb: true,
   link: undefined,
   iframe: undefined,
+  layout: {
+    header: true,
+    sidebar: true,
+    tabs: true,
+    toolbar: true,
+  },
+  partyLogin: undefined,
 };