@pubinfo/module-rbac 2.0.0-beta.9 → 2.0.0-rc.2

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

@@ -0,0 +1,400 @@
+<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 { getAllRouteModules, readProjectModules } from 'pubinfo';
+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';
+
+defineOptions({
+  name: 'ComponentSelect',
+});
+
+const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+
+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();
+  }
+});
+
+// 自定义树形结构
+interface ComponentTreeNode {
+  title: string
+  key: string
+  // 是否为根节点（如：'local'/'module:<id>'）
+  root?: boolean
+  module?: boolean
+  children?: ComponentTreeNode[]
+  isLeaf?: boolean
+  // 额外数据，选择时可用
+  value?: string
+  scope?: string
+}
+
+/**
+ * 从扁平路径数组构建“目录树”节点
+ * @param label 根节点标题（如：'本地'/'模块名'）
+ * @param keyPrefix 根节点 key（如：'local'/'module:<id>'）
+ * @param paths 叶子路径（views 相对路径）
+ * @param scope 作用域（模块 id），本地为 undefined
+ */
+function buildTree(label: string, keyPrefix: string, paths: string[], scope?: string): ComponentTreeNode {
+  const root: ComponentTreeNode = { title: label, key: keyPrefix, root: true, module: keyPrefix !== 'local', children: [] };
+
+  // 便捷查找当前层的子节点
+  const findOrCreate = (parent: ComponentTreeNode, title: string, key: string) => {
+    if (!parent.children) {
+      parent.children = [];
+    }
+    let node = parent.children.find(n => n.title === title && !n.isLeaf);
+    if (!node) {
+      node = { title, key, children: [] };
+      parent.children.push(node);
+    }
+    return node;
+  };
+
+  for (const p of paths) {
+    const segs = p.split('/').filter(Boolean);
+    let current = root;
+    let acc = keyPrefix;
+    for (let i = 0; i < segs.length; i++) {
+      const seg = segs[i];
+      acc = acc ? `${acc}/${seg}` : seg;
+      const isLast = i === segs.length - 1;
+      if (isLast) {
+        // 叶子结点携带 value 与 scope 信息
+        current.children = current.children || [];
+        current.children.push({
+          title: seg,
+          key: acc,
+          isLeaf: true,
+          value: p,
+          scope,
+        });
+      }
+      else {
+        current = findOrCreate(current, seg, acc);
+      }
+    }
+  }
+
+  return root;
+}
+
+// 计算：树数据，根为“本地”和各模块名，叶子为 views 下的路径
+const componentTreeOptions = computed<TreeProps['treeData']>(() => {
+  // 获取主项目的 pages
+  const projectStructure = readProjectModules();
+  const mainPages = projectStructure?.pages || {};
+
+  // 获取所有模块的 pages
+  const routeModuleMap = getAllRouteModules();
+
+  const treeNodes: ComponentTreeNode[] = [];
+
+  // 本地节点
+  treeNodes.push(
+    buildTree('本地', 'local', Object.keys(mainPages)),
+  );
+
+  // 模块节点
+  for (const [id, moduleMap] of routeModuleMap) {
+    treeNodes.push(
+      buildTree(id, `module:${id}`, Object.keys(moduleMap), id),
+    );
+  }
+
+  return treeNodes as unknown as TreeProps['treeData'];
+});
+
+// 根据搜索关键字过滤树数据，保留匹配节点及其祖先
+const displayedTreeData = computed<TreeProps['treeData']>(() => {
+  const q = searchQuery.value.trim().toLowerCase();
+  const source = componentTreeOptions.value as any[];
+  if (!q) {
+    return source as unknown as TreeProps['treeData'];
+  }
+
+  const filterNodes = (nodes: any[]): any[] => {
+    const res: any[] = [];
+    for (const n of nodes || []) {
+      const title = String(n?.title ?? '').toLowerCase();
+      const value = String(n?.value ?? '').toLowerCase();
+      const keyStr = String(n?.key ?? '').toLowerCase();
+      const selfMatch = title.includes(q) || value.includes(q) || keyStr.includes(q);
+      let childrenFiltered: any[] | undefined;
+      if (Array.isArray(n?.children) && n.children.length) {
+        childrenFiltered = filterNodes(n.children);
+      }
+      if (selfMatch || (childrenFiltered && childrenFiltered.length)) {
+        const cloned = { ...n };
+        if (childrenFiltered) {
+          cloned.children = childrenFiltered;
+        }
+        else if (cloned.children) {
+          delete cloned.children;
+        }
+        res.push(cloned);
+      }
+    }
+    return res;
+  };
+
+  return filterNodes(source) 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;
+}
+
+.directory-tree-root .ant-tree-treenode:hover:before {
+  border-radius: 6px !important;
+}
+
+.directory-tree-root .ant-tree-title{
+  color: #000 !important;
+}
+
+.directory-tree-root .anticon-file{
+  opacity: 0 !important;
+}
+</style>

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

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { Form } from '../interface';
+import ResourceIconesSelect from '@/components/ResourceIcones/Select.vue';
+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.MICRO_APP, 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),
+    icon: [RESOURCE_TYPE.DYNAMIC_APP, RESOURCE_TYPE.MICRO_APP, RESOURCE_TYPE.INDEX, RESOURCE_TYPE.MENU, RESOURCE_TYPE.IFRAME, 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.icon" :span="12">
+      <a-form-item label="资源图标" name="icon">
+        <ResourceIconesSelect v-model="form.icon" />
+      </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>