@pubinfo-nightly/module-rbac 2025.11.14

package/src/components/ResourceIcones/Select.vue

@@ -0,0 +1,474 @@
+<script setup lang="ts">
+import * as AntdIcons from '@ant-design/icons-vue';
+import { Empty } from 'ant-design-vue';
+import { getAllIconModules, PubinfoIcon } from 'pubinfo-nightly';
+import { computed, ref, watch } from 'vue';
+import ResourceIconesBoxColorPicker from './BoxColorPicker.vue';
+
+defineOptions({ name: 'ResourceIconesSelect' });
+
+// v-model（对外的值）
+const modelValueRef = defineModel<string>();
+// 额外样式参数的多路 v-model：边框(boxType)、角度(angle)、背景(background)、圆角(radius)、图标色(iconColor)
+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' } });
+// 圆角使用百分比，默认 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 ?? '50%');
+const boxIconSize = ref<number | string>(modelIconSize.value ?? '50%');
+// 图标颜色：无背景默认不着色（空字符串表示未设置）；有背景默认白色
+const iconColor = ref<string>(modelIconColor.value ?? '');
+const iconColorPickerRef = ref<HTMLInputElement | null>(null);
+
+// 弹窗
+const visibleRef = ref(false);
+function handleOpenModal() {
+  // 打开时同步一次外部值到临时值，避免未确认的变更影响外部
+  tempValueRef.value = modelValueRef.value;
+  // 同步样式参数到对话框内部状态
+  boxType.value = modelBoxType.value || 'null';
+  boxAngle.value = modelAngle.value ?? 65;
+  // 深拷贝背景，避免未确认时影响外部，同时确保确认时能产生新引用
+  const bg = modelBackground.value;
+  boxBackground.value = typeof bg === 'string'
+    ? bg
+    : (bg ? { ...(bg as any) } : { from: '#65E54A', to: '#35C724' });
+  boxRadius.value = modelRadius.value ?? '50%';
+  boxIconSize.value = modelIconSize.value ?? '50%';
+  iconColor.value = modelIconColor.value ?? '';
+  visibleRef.value = true;
+}
+function handleClose() {
+  visibleRef.value = false;
+}
+function handleConfirm() {
+  // 将临时值写回 v-model，再关闭弹窗
+  modelValueRef.value = tempValueRef.value as any;
+  // 回写样式参数
+  modelBoxType.value = boxType.value;
+  modelAngle.value = boxAngle.value;
+  // 使用新对象引用写回，确保仅背景变化也会触发更新
+  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;
+}
+
+// 基础数据
+interface IconItem { name: string, module?: string }
+
+// 提取文件名(去后缀)
+function extractName(path: string) {
+  const seg = path.split(/[\\/]/).pop() || path;
+  return seg.replace(/\.(svg|png|jpe?g)$/i, '');
+}
+
+// 资产图标模块 -> 图标列表 (Map 迭代)
+const moduleIconMap = computed(() => {
+  const m = new Map<string, string[]>();
+  const all = getAllIconModules();
+  for (const [mod, record] of all.entries()) {
+    const arr = Object.keys(record)
+      .map(extractName)
+      .sort();
+    m.set(mod, arr);
+  }
+  return m;
+});
+
+// AntD 图标（带前缀 antd:）
+const antdIcons = computed<string[]>(() => Object.keys(AntdIcons)
+  .filter(n => /(?:Outlined|Filled|TwoTone)$/.test(n))
+  .map(n => `antd:${n}`)
+  .sort(),
+);
+
+// 模块列表（全部 + 本地(local) 优先 + 其余模块 + Ant Design）
+const moduleOptions = computed(() => {
+  const keys = Array.from(moduleIconMap.value.keys());
+  const hasLocal = keys.includes('local');
+  const others = keys.filter(k => k !== 'local').sort();
+  return [
+    { label: '全部', value: 'all' },
+    ...(hasLocal ? [{ label: '本地', value: 'local' }] : []),
+    ...others.map(v => ({ label: v, value: v })),
+    { label: 'Ant Design', value: 'antd' },
+  ];
+});
+const activeModule = ref('all');
+
+// 搜索关键字
+const keyword = ref('');
+
+// 所有图标集合
+const allIcons = computed<IconItem[]>(() => {
+  const list: IconItem[] = [];
+  for (const [mod, arr] of moduleIconMap.value.entries()) {
+    arr.forEach((n) => {
+      if (mod === 'local') {
+        list.push({ name: n, module: mod });
+      }
+      else {
+        list.push({ name: `${mod}-[${n}]`, module: mod });
+      }
+    });
+  }
+  antdIcons.value.forEach(n => list.push({ name: n, module: 'antd' }));
+  return list;
+});
+
+// 模块过滤
+const moduleFiltered = computed(() => {
+  if (activeModule.value === 'all') {
+    return allIcons.value;
+  }
+  if (activeModule.value === 'antd') {
+    return allIcons.value.filter(i => i.module === 'antd');
+  }
+  return allIcons.value.filter(i => i.module === activeModule.value);
+});
+
+// 搜索过滤（名称包含）
+const filtered = computed(() => {
+  const k = keyword.value.trim().toLowerCase();
+  if (!k) {
+    return moduleFiltered.value;
+  }
+  return moduleFiltered.value.filter(i => i.name.toLowerCase().includes(k));
+});
+
+// 计数
+function moduleCount(val: string) {
+  if (val === 'all') {
+    return allIcons.value.length;
+  }
+  if (val === 'antd') {
+    return allIcons.value.filter(i => i.module === 'antd').length;
+  }
+  return allIcons.value.filter(i => i.module === val).length;
+}
+
+// 分页 (30/页)
+const pageSize = 30;
+const currentPage = ref(1);
+const pageCount = computed(() => Math.max(1, Math.ceil(filtered.value.length / pageSize)));
+const pageIcons = computed(() => {
+  const start = (currentPage.value - 1) * pageSize;
+  return filtered.value.slice(start, start + pageSize);
+});
+watch([keyword, activeModule], () => {
+  currentPage.value = 1;
+});
+// 当过滤结果长度变化时，若当前页超出范围则回退到最后一页
+watch(filtered, () => {
+  if (currentPage.value > pageCount.value) {
+    currentPage.value = pageCount.value;
+  }
+});
+function onPageChange(page: number) {
+  currentPage.value = page;
+}
+
+// 选择
+function handleSelect(icon: IconItem) {
+  tempValueRef.value = icon.name;
+}
+
+const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+function openIconColorPicker() {
+  if (!((tempValueRef.value || '').startsWith('antd:'))) {
+    return;
+  }
+  const el = iconColorPickerRef.value;
+  if (el) {
+    el.style.width = '16px';
+    el.style.height = '16px';
+    el.click();
+  }
+}
+// 当前选中是否为 AntD 图标
+const isAntdIcon = computed(() => (tempValueRef.value || '').startsWith('antd:'));
+
+// 当切换背景时，控制图标颜色的默认值：
+// - 选择背景（从无到有）时，默认为白色
+// - 取消背景（从有到无）时，恢复为未设置（使用图标默认颜色）
+watch(boxType, (val, oldVal) => {
+  if (oldVal === 'null' && val !== 'null' && !iconColor.value) {
+    iconColor.value = '#ffffff';
+  }
+});
+
+// 预览统一尺寸（外层 box 尺寸）与 padding，确保三个选项视觉对齐
+const previewBoxOuter = 24; // 与 Square/Prism 默认保持一致
+const previewBoxPadding = 4; // 与 shapeBoxDefaults 中的 padding 对齐
+</script>
+
+<template>
+  <slot :open="handleOpenModal">
+    <a-input :value="modelValueRef" readonly @click="handleOpenModal">
+      <template #addonAfter>
+        <a-tooltip>
+          <template #title>
+            <PubinfoIcon :name="modelValueRef || ''" size="40px" class="cursor-default" />
+          </template>
+          <PubinfoIcon :name="modelValueRef || ''" size="20px" class="cursor-default" />
+        </a-tooltip>
+      </template>
+    </a-input>
+  </slot>
+  <a-form-item-rest>
+    <a-modal
+      v-model:open="visibleRef"
+      title="选择图标"
+      width="1200px"
+      :footer="null"
+      destroy-on-close
+      @cancel="handleClose"
+    >
+      <div class="flex gap-4 min-h-[600px]">
+        <!-- 左侧模块列表 -->
+        <div class="w-58 flex flex-col border-r border-[#e5e7eb] dark:border-[#30363d] pr-3">
+          <div class="mb-3">
+            <a-input
+              v-model:value="keyword"
+              allow-clear
+              :bordered="true"
+              placeholder="搜索图标"
+              class="h-9 text-13px"
+            >
+              <template #prefix>
+                <PubinfoIcon name="i-carbon-search" size="16" class="text-[#7a869a]" />
+              </template>
+            </a-input>
+          </div>
+          <div class="flex-1 overflow-auto space-y-1 pr-1">
+            <div
+              v-for="m in moduleOptions"
+              :key="m.value"
+              class="flex items-center justify-between px-3 py-2 rounded-md cursor-pointer text-13px border border-transparent hover:bg-[#f3f6fa] dark:hover:bg-[#262c33] transition"
+              :class="activeModule === m.value ? 'bg-[#eef5ff] dark:bg-[#1e2a33] border-[#1677ff] text-[#1677ff] font-medium' : 'text-[#4b5563]'"
+              @click="activeModule = m.value"
+            >
+              <span class="truncate max-w-[120px]">{{ m.label }}</span>
+              <span class="ml-2 inline-block min-w-6 text-center text-11px rounded bg-[#eef1f5] dark:bg-[#2d3339] px-1 text-[#5d6671] dark:text-[#9aa3ad]">{{ moduleCount(m.value) }}</span>
+            </div>
+          </div>
+        </div>
+        <!-- 主体 -->
+        <div class="flex-1 flex flex-col min-w-0">
+          <template v-if="filtered.length">
+            <div class="grid grid-cols-6 gap-3 auto-rows-[96px] overflow-auto flex-1 p-1">
+              <a-tooltip
+                v-for="icon in pageIcons"
+                :key="`${icon.module || ''}:${icon.name}`"
+                :mouse-enter-delay="0.35"
+              >
+                <template #title>
+                  <div class="text-12px leading-tight space-y-1">
+                    <div class="font-medium">
+                      {{ icon.name }}
+                    </div>
+                    <div v-if="icon.module" class="opacity-70">
+                      模块: {{ icon.module }}
+                    </div>
+                  </div>
+                </template>
+                <div
+                  class="group relative flex flex-col items-center justify-center cursor-pointer rounded-md border"
+                  :class="tempValueRef === icon.name
+                    ? 'border-solid border-[#1677ff]'
+                    : 'border-dashed border-[#e5e7eb] dark:border-[#30363d]'"
+                  @click="handleSelect(icon)"
+                >
+                  <PubinfoIcon :name="icon.name" size="30px" />
+                </div>
+              </a-tooltip>
+            </div>
+            <!-- 分页 -->
+            <div class="mt-4 flex justify-center select-none">
+              <a-pagination
+                :current="currentPage"
+                :page-size="pageSize"
+                :total="filtered.length"
+                :show-size-changer="false"
+                show-quick-jumper
+                @change="onPageChange"
+              />
+            </div>
+          </template>
+          <div v-else class="flex-1 flex items-center justify-center">
+            <a-empty :image="simpleImage" description="没有匹配的图标" />
+          </div>
+        </div>
+        <!-- 右侧预留区域 -->
+        <div v-if="tempValueRef" class="relative w-60 flex flex-col border-l border-[#e5e7eb] dark:border-[#30363d] pl-4 min-h-0">
+          <div class="flex flex-col flex-1 w-full rounded-md border border-dashed border-[#d0d7de] dark:border-[#30363d] text-12px text-[#6b7280] dark:text-[#94a3b8] p-3 overflow-hidden">
+            <!-- 选项：固定顶部 -->
+            <div class="shrink-0 flex justify-center items-center pb-4 border-b border-b-dashed border-b-[#d0d7de] dark:border-b-[#30363d]">
+              <a-radio-group v-model:value="boxType" class="flex justify-center items-center">
+                <a-radio-button value="null">
+                  <div class="w-8 h-8 flex justify-center items-center">
+                    <PubinfoIcon :name="tempValueRef" :size="previewBoxOuter - previewBoxPadding * 2" />
+                  </div>
+                </a-radio-button>
+                <a-radio-button value="square">
+                  <div class="w-8 h-8 flex justify-center items-center">
+                    <PubinfoIcon
+                      :name="tempValueRef"
+                      box="square"
+                      :size="previewBoxOuter"
+                      radius="25%"
+                      color="#ffffff"
+                    />
+                  </div>
+                </a-radio-button>
+                <a-radio-button value="prism">
+                  <div class="w-8 h-8 flex justify-center items-center">
+                    <PubinfoIcon
+                      :name="tempValueRef"
+                      box="prism"
+                      :size="previewBoxOuter"
+                      color="#ffffff"
+                      radius="2%"
+                    />
+                  </div>
+                </a-radio-button>
+              </a-radio-group>
+            </div>
+            <!-- 中间配置：保持在中部，可滚动，占据剩余空间 -->
+            <div class="flex-1 w-full mt-3 px-2 overflow-auto space-y-3">
+              <!-- 背景设置：始终显示；当 boxType 为 null 时禁用 -->
+              <div class="flex flex-col justify-start w-full opacity-100">
+                <div class="text-12px mb-2 opacity-70">
+                  背景设置
+                </div>
+                <ResourceIconesBoxColorPicker
+                  v-model:angle="boxAngle"
+                  v-model:background="boxBackground"
+                  v-model:radius="boxRadius"
+                  v-model:icon-size="boxIconSize"
+                  :disabled="boxType === 'null'"
+                />
+              </div>
+              <!-- 图标颜色设置：始终显示；非 AntD 图标时禁用 -->
+              <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"
+                        :icon-size="boxIconSize"
+                        :color="isAntdIcon ? (iconColor || '#ffffff') : undefined"
+                      />
+                    </div>
+                  </template>
+                </div>
+              </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>
+      </div>
+    </a-modal>
+  </a-form-item-rest>
+</template>
+
+<style scoped>
+/* Center radio group and prevent wrapper stretching */
+:deep(.ant-radio-group) {
+  display: inline-flex;
+  align-items: center;
+}
+:deep(.ant-radio-button-wrapper) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 10px;
+  height: auto !important;
+  line-height: 1 !important;
+  flex: 0 0 auto;
+}
+:deep(.ant-radio-button-wrapper > span) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/src/components/ResourceSelector/enum.ts

@@ -0,0 +1,5 @@
+export enum RESOURCE_MODE {
+  ROLE = 1,
+  DATA_PERMISSION = 2,
+}
+export type ResourceMode = RESOURCE_MODE.ROLE | RESOURCE_MODE.DATA_PERMISSION;

package/src/components/ResourceSelector/hooks/useAppAndResource.ts

@@ -0,0 +1,96 @@
+import type { ResourceMode } from '../enum';
+import { getRbacResourceAppList, getRbacResourceGroupResourceTree } from '@/api/modules/rbac';
+import { RESOURCE_MODE } from '../enum';
+
+export type TreeNode = API.PubResource & {
+  children?: TreeNode[]
+  disabled?: boolean
+};
+export interface StringMap<T> { [key: string]: T };
+
+export interface SelectedResourceInfo {
+  id: string
+  name: string
+}
+
+export default function useAppAndResource(mode?: ResourceMode) {
+  const resourceModelRef = ref();
+  const appList: Ref<API.PubResource[] | { label: string | undefined, value: string | undefined }[]> = ref([]);
+  const treeData: Ref<TreeNode[]> = ref([]);
+  const resourceMap: Ref<StringMap<string>> = ref({});
+  const selectedResources = ref<SelectedResourceInfo[]>([]);
+  const isDataPermissionMode = computed(() => mode === RESOURCE_MODE.DATA_PERMISSION);
+
+  function getAppList() {
+    getRbacResourceAppList().then((res) => {
+      if (res?.success) {
+        const data = res.data ?? [];
+        const list: { label: string | undefined, value: string | undefined }[] = data.map((item: API.PubResource) => {
+          return { label: item.name, value: item.id };
+        });
+        appList.value = list;
+      }
+    });
+  }
+
+  async function updateTreeDataAndResourceMap(appId: string) {
+    const treeRes = await getRbacResourceGroupResourceTree({ appId });
+    treeData.value = treeRes?.data ?? [];
+    markDisabledNodesAndGenerateMap(treeData.value);
+  }
+
+  function markDisabledNodesAndGenerateMap(nodes: TreeNode[]) {
+    nodes.forEach((node) => {
+      if (node.id) {
+        resourceMap.value[node.id] = node.name!;
+      }
+
+      if (isDataPermissionMode.value && node.enableDataPermission === false) {
+        // 未开启数据权限的节点标记为不可选
+        node.disabled = true;
+      }
+
+      if (node.children && node.children.length) {
+        markDisabledNodesAndGenerateMap(node.children);
+      }
+    });
+  }
+
+  function setSelectedResources(resources: SelectedResourceInfo[]) {
+    selectedResources.value = resources;
+  };
+
+  function updateSelectedResources(resourceIds: string[]) {
+    if (!resourceIds.length || !Object.keys(resourceMap.value).length) {
+      return [];
+    }
+    selectedResources.value = resourceIds.map((id) => {
+      return { id, name: resourceMap.value[id] };
+    }).filter(item => item.name);
+  };
+
+  function clearSelectedResources() {
+    selectedResources.value = [];
+  }
+
+  function openResourceModel(resourceIds: string[]) {
+    if (resourceModelRef.value && resourceModelRef.value.open) {
+      resourceModelRef.value.open(resourceIds, treeData.value, resourceMap.value);
+    }
+  }
+
+  return {
+    appList,
+    resourceModelRef,
+    treeData,
+    resourceMap,
+    selectedResources,
+    isDataPermissionMode,
+    getAppList,
+    updateTreeDataAndResourceMap,
+    setSelectedResources,
+    updateSelectedResources,
+    clearSelectedResources,
+    openResourceModel,
+  };
+}