@pubinfo-nightly/module-rbac 2025.11.14

package/src/views/region/enum.ts

@@ -0,0 +1,24 @@
+export enum ACTION {
+  /** 新增 */
+  ADD = '新增',
+  /** 编辑 */
+  EDIT = '编辑',
+  /** 删除 */
+  REMOVE = '删除',
+  /** 新建下级 */
+  ADDNEXT = '新建下级',
+}
+
+export enum RANGE {
+  /** 省 */
+  PROVINCE = '1',
+  /** 市 */
+  CITY = '2',
+  /** 区/县 */
+  COUNTY = '3',
+}
+export const rangeOptions = [
+  { label: '省', value: RANGE.PROVINCE },
+  { label: '市', value: RANGE.CITY },
+  { label: '区/县', value: RANGE.COUNTY },
+];

package/src/views/region/index.vue

@@ -0,0 +1,246 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import type { Key } from 'ant-design-vue/es/vc-table/interface';
+import { ProTable } from '@pubinfo/pro-components';
+import { message, Modal } from 'ant-design-vue';
+import { cloneDeep } from 'lodash-es';
+import { getRegionDeleteRegionByCode, getRegionGetListByParentId } from '@/api/modules/assist';
+import DrawerRegion from './components/drawerRegion.vue';
+import { ACTION } from './enum';
+
+defineOptions({
+  name: 'RegionManage',
+});
+const { auth } = useAuth();
+
+type TreeNode = API.PubRegion & {
+  children?: TreeNode[]
+};
+const query = ref<API.getRegionGetListByParentIdParams>({ parentId: '' });
+
+const data: Ref<TreeNode[]> = ref([]);
+const chilData = ref<TreeNode>({});
+
+const tableRef = ref<typeof ProTable>();
+const drawerRegionRef = ref<InstanceType<typeof DrawerRegion>>();
+
+// 刷新数据展开未重置的问题
+const expandedRowKeys = ref<Key[]>([]);
+function expandedRowsChange(expandedRows: Key[]): void {
+  expandedRowKeys.value = expandedRows;
+}
+
+const columns: ProColumns<TreeNode> = [
+  {
+    minWidth: 240,
+    title: '区域名称',
+    dataIndex: 'name',
+    ellipsis: true,
+  },
+  {
+    minWidth: 100,
+    title: '区域范围',
+    dataIndex: 'type',
+  },
+  {
+    minWidth: 140,
+    title: '行政区划编码',
+    dataIndex: 'code',
+    ellipsis: true,
+  },
+  {
+    minWidth: 100,
+    title: '区域编码',
+    dataIndex: 'regionCode',
+  },
+  {
+    minWidth: 100,
+    title: '显示顺序',
+    dataIndex: 'sort',
+  },
+  {
+    hideInSearch: true,
+    title: '操作',
+    dataIndex: 'action',
+    width: 240,
+    fixed: 'right',
+    hideInTable() {
+      return !auth([
+        'region_add_child',
+        'region_edit',
+        'region_remove',
+      ]);
+    },
+  },
+];
+
+function onAction(key: string, record?: TreeNode): void {
+  switch (key) {
+    case ACTION.ADDNEXT:
+      query.value.parentId = record!.id;
+      chilData.value = record!;
+      drawerRegionRef.value?.open(key, record);
+      break;
+    case ACTION.ADD:
+      query.value.parentId = '';
+      chilData.value = {};
+      drawerRegionRef.value?.open(key);
+      break;
+    case ACTION.EDIT:
+      query.value.parentId = record!.parentId;
+      chilData.value = getNodeById(data.value, query.value.parentId!);
+      drawerRegionRef.value?.open(key, record);
+      break;
+    case ACTION.REMOVE:
+      query.value.parentId = record!.parentId;
+      chilData.value = getNodeById(data.value, query.value.parentId!);
+      Modal.confirm({
+        title: '删除',
+        content: '确定要删除该区域吗？',
+        onOk() {
+          getRegionDeleteRegionByCode({ code: record!.code! })
+            .then((res: API.ResponseDataBoolean) => {
+              if (res.success) {
+                message.success('删除成功');
+                getRegionData();
+              }
+            });
+        },
+      });
+      break;
+  }
+}
+
+/* 获取表格数据 */
+async function request() {
+  const res = await getRegionGetListByParentId({
+    ...query.value,
+  });
+  if (chilData.value && Object.keys(chilData.value).length > 0) {
+    const length = res.data!.length;
+    if (length > 0) {
+      chilData.value.children = res.data?.map((e: API.PubRegion) => {
+        return {
+          ...e,
+          children: e.isLeaf ? undefined : [],
+        };
+      }) as TreeNode[];
+    }
+    else {
+      chilData.value.children = undefined;
+    }
+  }
+  else {
+    expandedRowKeys.value = [];
+    data.value = res.data?.map((e: API.PubRegion) => {
+      return {
+        ...e,
+        children: e.isLeaf ? undefined : [],
+      };
+    }) as TreeNode[];
+  }
+  return {
+    success: true,
+    data: data.value,
+  };
+}
+
+/* 表格中父节点展开 */
+function expand(flag: boolean, data: TreeNode) {
+  const dataTemp = cloneDeep(data);
+  if (flag) {
+    if (dataTemp.children?.length === 0) {
+      query.value.parentId = data.id;
+      chilData.value = data;
+      tableRef.value?.fetch();
+    }
+  }
+}
+
+/* 新建或者编辑后刷新列表 */
+function getRegionData() {
+  tableRef.value?.reload();
+}
+
+/* 获取某节点的信息 */
+function getNodeById(nodes: TreeNode[], id: string): any {
+  for (const node of nodes) {
+    if (node.id === id) {
+      return node;
+    }
+    if (node.children) {
+      const foundNode = getNodeById(node.children, id);
+      if (foundNode) {
+        return foundNode;
+      }
+    }
+  }
+  return undefined;
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    py-10px
+    px-10px
+  >
+    <ProTable
+      ref="tableRef"
+      row-key="id"
+      :search="false"
+      :request="request"
+      :columns="columns"
+      :data-source="data"
+      :pagination="false"
+      auto-height
+      :expanded-row-keys="expandedRowKeys"
+      :scroll="{ x: 1100 }"
+      @expanded-rows-change="expandedRowsChange"
+      @expand="expand"
+    >
+      <template #toolbar>
+        <a-button v-auth="'region_add'" type="primary" @click="onAction(ACTION.ADD)">
+          <PlusCircleOutlined />
+          {{ ACTION.ADD }}
+        </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <a-space>
+            <a
+              v-auth="'region_add_child'"
+              class="flex items-center"
+              @click="onAction(ACTION.ADDNEXT, record)"
+            >
+              <PubinfoIcon name="add-child" class="text-base" />
+              <span class="ml-4px">{{ ACTION.ADDNEXT }}</span>
+            </a>
+            <a
+              v-auth="'region_edit'"
+              class="flex items-center"
+              @click="onAction(ACTION.EDIT, record)"
+            >
+              <PubinfoIcon name="edit" class="text-base" />
+              <span class="ml-4px">{{ ACTION.EDIT }}</span>
+            </a>
+            <span
+              v-auth="'region_remove'"
+              class="flex items-center text-red-500 hover:cursor-pointer hover:opacity-80"
+              @click="onAction(ACTION.REMOVE, record)"
+            >
+              <PubinfoIcon name="remove" class="text-base" />
+              <span class="ml-4px">{{ ACTION.REMOVE }}</span>
+            </span>
+          </a-space>
+        </template>
+      </template>
+    </ProTable>
+    <DrawerRegion
+      ref="drawerRegionRef"
+      :tree-data="data"
+      @submit="getRegionData()"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,303 @@
+<script setup lang="ts">
+import type { TreeProps } from 'ant-design-vue';
+import { CaretDownOutlined } from '@ant-design/icons-vue';
+import * as popover from '@destyler/popover';
+import { normalizeProps, useMachine } from '@destyler/vue';
+import { Empty } from 'ant-design-vue';
+import ComponentsIcones from '@/components/DirectoryIcones/ComponentsIcones.vue';
+import FolderIcones from '@/components/DirectoryIcones/FolderIcones.vue';
+import ModuleIcones from '@/components/DirectoryIcones/ModuleIcones.vue';
+import PackagesIcones from '@/components/DirectoryIcones/PackagesIcones.vue';
+import SrcIcones from '@/components/DirectoryIcones/SrcIcones.vue';
+import ViewIcones from '@/components/DirectoryIcones/ViewIcones.vue';
+import VueIcones from '@/components/DirectoryIcones/VueIcones.vue';
+import { useViewStore } from '@/stores/view';
+
+defineOptions({
+  name: 'ComponentSelect',
+});
+
+const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+
+// 使用 Pinia store
+const viewStore = useViewStore();
+
+const moduleValue = defineModel<string>({
+  default: '',
+});
+
+const scope = defineModel<string>('scope', {
+  default: '',
+});
+
+const searchInputEl = useTemplateRef<HTMLInputElement>('searchInputRef');
+
+const [state, send] = useMachine(popover.machine({
+  id: useId(),
+  initialFocusEl: () => searchInputEl.value,
+}));
+const api = computed(() => popover.connect(state.value, send, normalizeProps));
+
+const visibleRef: Ref<boolean> = ref<boolean>(false);
+// 搜索关键字
+const searchQuery = ref('');
+
+// 计算：由输入框当前值与作用域，推导目录树的选中节点 key
+// 约定：根 key 为 'local' 或 'module:<id>'，叶子 key = `${root}/${path}`
+const selectedKeys = computed<string[]>(() => {
+  if (!moduleValue.value) {
+    return [];
+  }
+  const prefix = scope.value ? `module:${scope.value}` : 'local';
+  return [`${prefix}/${moduleValue.value}`];
+});
+
+// 手风琴展开：控制顶层（local、module:<id>）仅展开一个
+const expandedKeysRef = ref<string[]>([]);
+
+function isRootKey(key: string) {
+  // 根 key 无分隔符：'local' 或 'module:<id>'
+  return !key.includes('/');
+}
+
+function getRootKeyFromPathKey(key: string) {
+  // 从 'local/...' 或 'module:<id>/...' 提取根 key
+  const idx = key.indexOf('/');
+  return idx === -1 ? key : key.slice(0, idx);
+}
+
+/**
+ * 从选中叶子节点的完整 key 生成展开链（父级链，不含叶子本身）。
+ * 例如：'local/a/b/c' -> ['local', 'local/a', 'local/a/b']
+ */
+function getExpansionChainFromSelected(key: string) {
+  const parts = key.split('/');
+  const chain: string[] = [];
+  let acc = '';
+  // 到倒数第二段（父节点）即可；叶子无需加入 expandedKeys
+  for (let i = 0; i < Math.max(0, parts.length - 1); i++) {
+    const seg = parts[i];
+    acc = i === 0 ? seg : `${acc}/${seg}`;
+    chain.push(acc);
+  }
+  return chain;
+}
+
+/**
+ * 子层级允许多级展开（以便能展开到选中路径）。
+ */
+function onExpand(nextKeys: (string | number)[], e: any) {
+  const keys = (nextKeys as string[]) || [];
+  const nodeKey: string | undefined = e?.node?.key;
+  const expanded: boolean = !!e?.expanded;
+
+  let rootToKeep: string | undefined;
+  if (nodeKey && isRootKey(nodeKey)) {
+    rootToKeep = expanded ? nodeKey : undefined;
+  }
+  else if (nodeKey) {
+    rootToKeep = getRootKeyFromPathKey(nodeKey);
+  }
+  else {
+    rootToKeep = keys.find(isRootKey);
+  }
+
+  const filtered = keys.filter(k => !isRootKey(String(k)) || String(k) === rootToKeep);
+  expandedKeysRef.value = filtered as string[];
+}
+
+// 抽取：根据当前选中路径展开到对应层级
+function expandToSelected() {
+  const first = selectedKeys.value[0];
+  if (!first) {
+    return;
+  }
+  const chain = getExpansionChainFromSelected(first);
+  expandedKeysRef.value = chain;
+}
+
+// 手风琴效果：当选中项变化时，展开到对应层级
+watch(selectedKeys, () => {
+  expandToSelected();
+}, { immediate: true });
+
+// 弹层再次打开时，若之前被手动折叠，重新展开到选中层级
+watch(visibleRef, (open) => {
+  if (open) {
+    expandToSelected();
+  }
+});
+
+// 弹层再次打开时，若之前被手动折叠，重新展开到选中层级
+watch(visibleRef, (open) => {
+  if (open) {
+    expandToSelected();
+  }
+});
+
+// 从 store 获取树数据并支持搜索过滤
+const displayedTreeData = computed<TreeProps['treeData']>(() => {
+  const q = searchQuery.value.trim();
+  if (!q) {
+    return viewStore.getRouteTreeData() as unknown as TreeProps['treeData'];
+  }
+
+  return viewStore.filterRouteTree(q) as unknown as TreeProps['treeData'];
+});
+
+// 收集非叶子节点 key，用于搜索时全部展开
+function collectNonLeafKeys(nodes: any[]): string[] {
+  const keys: string[] = [];
+  const dfs = (ns: any[]) => {
+    for (const n of ns || []) {
+      const hasChildren = Array.isArray(n?.children) && n.children.length > 0;
+      if (hasChildren) {
+        keys.push(String(n.key));
+        dfs(n.children);
+      }
+    }
+  };
+  dfs(nodes);
+  return keys;
+}
+
+// 搜索展开控制：有关键字时展开所有非叶节点，清空时回到选中项展开
+watch(searchQuery, (q) => {
+  const hasQ = String(q || '').trim().length > 0;
+  if (hasQ) {
+    const data = displayedTreeData.value as any[];
+    expandedKeysRef.value = collectNonLeafKeys(data);
+  }
+  else {
+    expandToSelected();
+  }
+});
+
+// 选择项：回填路径与作用域，并关闭弹层
+function onSelect(keys: (string | number)[], e: any) {
+  const node = e?.node;
+  const data = node?.dataRef ?? node;
+  if (data?.isLeaf) {
+    // 叶子节点：写入路径与作用域
+    moduleValue.value = data.value || '';
+    scope.value = data.scope || '';
+    // 选中后清空搜索
+    searchQuery.value = '';
+    // 选中后关闭弹窗（可按需保留）
+    visibleRef.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="mt-0">
+    <div v-bind="api.getTriggerProps()">
+      <a-input
+        v-model:value="moduleValue"
+        :addon-before="scope || '本地'"
+        placeholder="请输入或选择组件路径（views下的路径）"
+      />
+    </div>
+    <!-- 始终挂载 Teleport，内部用 Transition 控制出现/消失动画 -->
+    <Teleport to="body">
+      <div
+        v-if="api.open"
+        v-bind="api.getPositionerProps()"
+        class="z-1050"
+      >
+        <div
+          v-bind="api.getContentProps()"
+          class="z-1050 w-162 rounded-md border border-solid p-4
+          border-[--g-border-color] shadow-md outline-none
+          bg-#ffffff dark:bg-#141414 text-dark dark:text-light
+          data-[state=open]:animate-in data-[state=closed]:animate-out
+          data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
+          data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+        >
+          <div class="w-152 mb-2">
+            <a-form-item-rest>
+              <a-input
+                ref="searchInputRef"
+                v-model:value="searchQuery"
+                allow-clear
+                size="small"
+                placeholder="搜索组件或路径"
+              />
+            </a-form-item-rest>
+          </div>
+          <template v-if="displayedTreeData && displayedTreeData.length">
+            <a-directory-tree
+              v-model:expanded-keys="expandedKeysRef"
+              class="w-152 h-100 overflow-y-auto directory-tree-root"
+              :selected-keys="selectedKeys"
+              :tree-data="displayedTreeData"
+              :show-icon="true"
+              :show-line="true"
+              :virtual="true"
+              expand-action="click"
+              @expand="onExpand"
+              @select="onSelect"
+            >
+              <template #switcherIcon="{ switcherCls }">
+                <CaretDownOutlined :class="switcherCls" />
+              </template>
+              <!-- 自定义展开/折叠图标：根节点（local/module:<id>）用包图标，目录与叶子分别用你提供的图标 -->
+              <template #icon="{ expanded, dataRef }">
+                <span
+                  class="inline-flex items-center text-inherit not-italic leading-[0] text-center
+                    normal-case [vertical-align:-0.125em] [text-rendering:optimizeLegibility] svg:size-4"
+                >
+                  <!-- 根：无 '/' 的 key 表示 -->
+                  <PackagesIcones v-if="dataRef?.root && !dataRef?.module" :expanded="expanded" />
+                  <ModuleIcones v-else-if="dataRef?.root && dataRef?.module" :expanded="expanded" />
+                  <!-- 叶子：Vue 文件图标 -->
+                  <VueIcones v-else-if="dataRef?.isLeaf" />
+                  <!-- 特殊目录 -->
+                  <ComponentsIcones v-else-if="['components', 'component'].includes(String(dataRef?.title).toLowerCase())" :expanded="expanded" />
+                  <ViewIcones v-else-if="['views', 'view', 'pages', 'page'].includes(String(dataRef?.title).toLowerCase())" :expanded="expanded" />
+                  <SrcIcones v-else-if="['src'].includes(String(dataRef?.title).toLowerCase())" :expanded="expanded" />
+                  <!-- 其他目录 -->
+                  <FolderIcones v-else :expanded="expanded" />
+                </span>
+              </template>
+            </a-directory-tree>
+          </template>
+          <template v-else>
+            <div class="flex items-center justify-center h-[220px]">
+              <a-empty :image="simpleImage" description="没有找到匹配的组件" />
+            </div>
+          </template>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style>
+.directory-tree-root .ant-tree-treenode-selected::before {
+  background: #e6f4ff !important;
+  border-radius: 6px !important;
+}
+
+.dark .directory-tree-root .ant-tree-treenode-selected::before {
+  /* Dark theme: use a deeper primary‑tinted background for selected row (previously #e6f4ff) */
+  background: #3166D4 !important; /* fallback solid */
+  border-radius: 6px !important;
+}
+
+.directory-tree-root .ant-tree-treenode:hover:before {
+  border-radius: 6px !important;
+}
+
+.directory-tree-root .ant-tree-title{
+  color: #000 !important;
+}
+
+.dark .directory-tree-root .ant-tree-title{
+  color: #FFF !important;
+}
+
+.directory-tree-root .anticon-file{
+  opacity: 0 !important;
+}
+</style>

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { Form } from '../interface';
+import { RESOURCE_TYPE } from '../enum';
+import ComponentSelect from './ComponentSelect.vue';
+
+defineOptions({
+  name: 'DynamicRoutesForm',
+});
+
+defineProps<{
+  parent: Form
+}>();
+
+const form = defineModel<Form>({
+  default: {
+    meta: {
+      url: '',
+      component: '',
+    },
+  },
+});
+
+const show = computed(() => {
+  const type = form.value.type as RESOURCE_TYPE;
+
+  return {
+    path: [RESOURCE_TYPE.INDEX, RESOURCE_TYPE.MENU, RESOURCE_TYPE.NON_MENU, RESOURCE_TYPE.IFRAME, RESOURCE_TYPE.LINK].includes(type),
+    component: [RESOURCE_TYPE.MENU, RESOURCE_TYPE.NON_MENU].includes(type),
+    iframe: [RESOURCE_TYPE.IFRAME].includes(type),
+    link: [RESOURCE_TYPE.LINK].includes(type),
+    routeName: [RESOURCE_TYPE.MENU, RESOURCE_TYPE.NON_MENU, RESOURCE_TYPE.IFRAME, RESOURCE_TYPE.LINK].includes(type),
+    activeMenu: [RESOURCE_TYPE.MENU, RESOURCE_TYPE.NON_MENU, RESOURCE_TYPE.IFRAME, RESOURCE_TYPE.LINK].includes(type),
+  };
+});
+
+/** 是否展示微应用/动态应用的额外表单项 */
+const isDynamicRoutesForm = computed(() => {
+  return true;
+});
+</script>
+
+<template>
+  <!-- eslint-disable-next-line -->
+  <template v-if="isDynamicRoutesForm">
+    <a-col v-if="show.path" :span="12">
+      <a-form-item label="资源路径" :name="['meta', 'url']" :rules="[{ required: true, message: '请输入资源路径' }]">
+        <a-input v-model:value="form.meta!.url" placeholder="请输入资源路径" :maxlength="256" />
+      </a-form-item>
+    </a-col>
+
+    <a-col v-if="show.component" :span="24">
+      <a-form-item label="组件路径" :name="['meta', 'component']" :rules="[{ required: true, message: '请输入组件路径' }]">
+        <ComponentSelect
+          v-model="form.meta!.component"
+          v-model:scope="form.meta!.scope"
+        />
+      </a-form-item>
+    </a-col>
+
+    <a-col v-if="show.link" :span="24">
+      <a-form-item label="外链地址" :name="['meta', 'link']">
+        <a-input v-model:value="form.meta!.link" placeholder="请输入外链地址" :maxlength="256" />
+      </a-form-item>
+    </a-col>
+
+    <a-col v-if="show.iframe" :span="24">
+      <a-form-item label="内嵌地址" :name="['meta', 'iframe']">
+        <a-input v-model:value="form.meta!.iframe" placeholder="请输入内嵌地址" :maxlength="256" />
+      </a-form-item>
+    </a-col>
+
+    <a-col v-if="show.routeName" :span="12">
+      <a-form-item label="路由名称" :name="['meta', 'routeName']">
+        <a-input v-model:value="form.meta!.routeName" placeholder="请输入路由名称（name）" :maxlength="256" />
+      </a-form-item>
+    </a-col>
+
+    <a-col v-if="show.activeMenu" :span="12">
+      <a-form-item label="激活路径" :name="['meta', 'activeMenu']" tooltip="跳转到当前路由时，需要激活的菜单路径。 当不在导航菜单中显示时，需要指定激活路径">
+        <a-input v-model:value="form.meta!.activeMenu" placeholder="请输入激活路径" :maxlength="256" />
+      </a-form-item>
+    </a-col>
+  </template>
+</template>