@pubinfo/module-rbac 2.0.0-rc.1 → 2.0.0-rc.3

package/src/stores/view.ts

@@ -0,0 +1,292 @@
+import { acceptHMRUpdate, defineStore } from 'pinia';
+import { getAllRouteModules, readProjectModules } from 'pubinfo';
+
+// WebSocket 消息类型定义
+export interface WebSocketMessage {
+  type: 'custom'
+  event: 'pubinfo-resolver:update'
+  data: {
+    action: 'add' | 'unlink'
+    file: string
+    timestamp: number
+  }
+}
+
+// 路由树节点接口
+export interface RouteTreeNode {
+  title: string
+  key: string
+  root?: boolean
+  module?: boolean
+  children?: RouteTreeNode[]
+  isLeaf?: boolean
+  value?: string
+  scope?: string
+}
+
+// 模块信息接口
+interface ModuleInfo {
+  id: string
+  pages: Record<string, string>
+}
+
+export const useViewStore = defineStore('view', () => {
+  // 主项目页面路径数据
+  const projectPages = ref<Record<string, string>>({});
+
+  // 模块页面路径数据
+  const modulePages = ref<Map<string, Record<string, string>>>(new Map()); // 路由树数据
+  const routeTree = ref<RouteTreeNode[]>([]);
+
+  // 最后更新时间
+  const lastUpdateTime = ref<number>(0);
+
+  // WebSocket 连接状态
+  const wsConnected = ref<boolean>(false);
+
+  /**
+   * 初始化路由树数据
+   */
+  function initializeRouteData() {
+    // 获取主项目的 pages - 只存储路径
+    const projectStructure = readProjectModules();
+    const rawProjectPages = projectStructure?.pages || {};
+    projectPages.value = Object.keys(rawProjectPages).reduce((acc, key) => {
+      acc[key] = key; // 存储路径本身
+      return acc;
+    }, {} as Record<string, string>);
+
+    // 获取所有模块的 pages - 只存储路径
+    const routeModuleMap = getAllRouteModules();
+    const modulePageMap = new Map<string, Record<string, string>>();
+    for (const [id, moduleMap] of routeModuleMap) {
+      const pathMap = Object.keys(moduleMap).reduce((acc, key) => {
+        acc[key] = key; // 存储路径本身
+        return acc;
+      }, {} as Record<string, string>);
+      modulePageMap.set(id, pathMap);
+    }
+    modulePages.value = modulePageMap;
+
+    // 构建路由树
+    buildRouteTree();
+  }
+
+  /**
+   * 构建路由树结构
+   */
+  function buildRouteTree() {
+    const treeNodes: RouteTreeNode[] = [];
+
+    // 构建本地项目节点
+    if (Object.keys(projectPages.value).length > 0) {
+      const localPaths = Object.keys(projectPages.value);
+
+      treeNodes.push(
+        buildTreeNode('本地', 'local', localPaths),
+      );
+    }
+
+    // 构建模块节点
+    for (const [id, moduleMap] of modulePages.value) {
+      if (Object.keys(moduleMap).length > 0) {
+        treeNodes.push(
+          buildTreeNode(id, `module:${id}`, Object.keys(moduleMap), id),
+        );
+      }
+    }
+
+    routeTree.value = treeNodes;
+  }
+
+  /**
+   * 从扁平路径数组构建树节点
+   */
+  function buildTreeNode(
+    label: string,
+    keyPrefix: string,
+    paths: string[],
+    scope?: string,
+  ): RouteTreeNode {
+    const root: RouteTreeNode = {
+      title: label,
+      key: keyPrefix,
+      root: true,
+      module: keyPrefix !== 'local',
+      children: [],
+    };
+
+    const findOrCreate = (parent: RouteTreeNode, 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) {
+          // 叶子节点
+          current.children = current.children || [];
+          current.children.push({
+            title: seg,
+            key: acc,
+            isLeaf: true,
+            value: p,
+            scope,
+          });
+        }
+        else {
+          current = findOrCreate(current, seg, acc);
+        }
+      }
+    }
+
+    return root;
+  }
+
+  /**
+   * 处理 WebSocket 文件变化事件
+   */
+  function handleFileChange(message: WebSocketMessage) {
+    const { action, file, timestamp } = message.data;
+
+    // 更新时间戳
+    lastUpdateTime.value = timestamp;
+
+    // 根据操作类型处理
+    if (action === 'add') {
+      handleFileAdd(file);
+    }
+    else if (action === 'unlink') {
+      handleFileRemove(file);
+    }
+
+    // 重新构建路由树
+    buildRouteTree();
+  }
+
+  /**
+   * 处理文件添加
+   */
+  function handleFileAdd(filePath: string) {
+    // 检查是否是 views 目录下的 .vue 文件
+    const relativePath = filePath.replace(/^.*\/src\//, 'src/');
+
+    if (relativePath.startsWith('src/views/') && relativePath.endsWith('.vue')) {
+      // 添加到主项目页面数据
+      projectPages.value = {
+        ...projectPages.value,
+        [relativePath]: relativePath,
+      };
+    }
+  }
+
+  /**
+   * 处理文件删除
+   */
+  function handleFileRemove(filePath: string) {
+    // 检查是否是 views 目录下的 .vue 文件
+    const relativePath = filePath.replace(/^.*\/src\//, 'src/');
+    if (relativePath.startsWith('src/views/') && relativePath.endsWith('.vue')) {
+      // 从主项目页面数据中移除
+      const newProjectPages = { ...projectPages.value };
+      delete newProjectPages[relativePath];
+      projectPages.value = newProjectPages;
+    }
+  }
+
+  /**
+   * 设置 WebSocket 连接状态
+   */
+  function setWebSocketConnected(connected: boolean) {
+    wsConnected.value = connected;
+  }
+
+  /**
+   * 获取路由树数据（用于组件）
+   */
+  function getRouteTreeData() {
+    return routeTree.value;
+  }
+
+  /**
+   * 刷新路由树数据
+   */
+  function refreshRouteTree() {
+    initializeRouteData();
+  }
+
+  /**
+   * 根据搜索条件过滤树数据
+   */
+  function filterRouteTree(searchQuery: string): RouteTreeNode[] {
+    if (!searchQuery.trim()) {
+      return routeTree.value;
+    }
+
+    const q = searchQuery.trim().toLowerCase();
+
+    const filterNodes = (nodes: RouteTreeNode[]): RouteTreeNode[] => {
+      const result: RouteTreeNode[] = [];
+
+      for (const node of nodes) {
+        const title = node.title.toLowerCase();
+        const value = (node.value || '').toLowerCase();
+        const key = node.key.toLowerCase();
+        const selfMatch = title.includes(q) || value.includes(q) || key.includes(q);
+
+        let filteredChildren: RouteTreeNode[] | undefined;
+        if (node.children && node.children.length > 0) {
+          filteredChildren = filterNodes(node.children);
+        }
+
+        if (selfMatch || (filteredChildren && filteredChildren.length > 0)) {
+          const cloned = { ...node };
+          if (filteredChildren) {
+            cloned.children = filteredChildren;
+          }
+          result.push(cloned);
+        }
+      }
+
+      return result;
+    };
+
+    return filterNodes(routeTree.value);
+  }
+
+  return {
+    // 状态
+    projectPages: readonly(projectPages),
+    modulePages: readonly(modulePages),
+    routeTree: readonly(routeTree),
+    lastUpdateTime: readonly(lastUpdateTime),
+    wsConnected: readonly(wsConnected),
+
+    // 方法
+    initializeRouteData,
+    handleFileChange,
+    setWebSocketConnected,
+    getRouteTreeData,
+    refreshRouteTree,
+    filterRouteTree,
+  };
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useViewStore, import.meta.hot));
+}

package/src/utils/routeSystem.ts

@@ -0,0 +1,53 @@
+import { useWebSocketManager } from '@/composables/useWebSocketManager';
+import { useViewStore } from '@/stores/view';
+
+/**
+ * 应用启动时的路由数据初始化
+ */
+export function initializeRouteSystem() {
+  const viewStore = useViewStore();
+  const wsManager = useWebSocketManager();
+
+  try {
+    // 初始化路由数据
+    viewStore.initializeRouteData();
+
+    // 初始化 WebSocket 管理器
+    wsManager.initializeWebSocket();
+
+    return {
+      viewStore,
+      wsManager,
+    };
+  }
+  catch (error) {
+    console.error('[RBAC] 路由系统初始化失败:', error);
+    throw error;
+  }
+}
+
+/**
+ * 应用关闭时的清理逻辑
+ */
+export function cleanupRouteSystem() {
+  try {
+    const wsManager = useWebSocketManager();
+    wsManager.cleanupWebSocket();
+  }
+  catch (error) {
+    console.error('[RBAC] 路由系统清理失败:', error);
+  }
+}
+
+/**
+ * 手动刷新路由数据
+ */
+export function refreshRouteSystem() {
+  try {
+    const viewStore = useViewStore();
+    viewStore.refreshRouteTree();
+  }
+  catch (error) {
+    console.error('[RBAC] 路由系统数据刷新失败:', error);
+  }
+}

package/src/views/region/index.vue

@@ -116,7 +116,7 @@ async function request() {
   const res = await getRegionGetListByParentId({
     ...query.value,
   });
-  if (Object.keys(chilData.value).length > 0) {
+  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) => {

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

@@ -1,8 +1,9 @@
 <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';
@@ -10,6 +11,7 @@ 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',
@@ -17,6 +19,9 @@ defineOptions({
 
 const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
 
+// 使用 Pinia store
+const viewStore = useViewStore();
+
 const moduleValue = defineModel<string>({
   default: '',
 });
@@ -25,6 +30,14 @@ 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('');
@@ -115,131 +128,21 @@ watch(visibleRef, (open) => {
   }
 });
 
-// 自定义树形结构
-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),
-    );
+// 弹层再次打开时，若之前被手动折叠，重新展开到选中层级
+watch(visibleRef, (open) => {
+  if (open) {
+    expandToSelected();
   }
-
-  return treeNodes as unknown as TreeProps['treeData'];
 });
 
-// 根据搜索关键字过滤树数据，保留匹配节点及其祖先
+// 从 store 获取树数据并支持搜索过滤
 const displayedTreeData = computed<TreeProps['treeData']>(() => {
-  const q = searchQuery.value.trim().toLowerCase();
-  const source = componentTreeOptions.value as any[];
+  const q = searchQuery.value.trim();
   if (!q) {
-    return source as unknown as TreeProps['treeData'];
+    return viewStore.getRouteTreeData() 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'];
+  return viewStore.filterRouteTree(q) as unknown as TreeProps['treeData'];
 });
 
 // 收集非叶子节点 key，用于搜索时全部展开
@@ -287,72 +190,87 @@ function onSelect(keys: (string | number)[], e: any) {
 </script>
 
 <template>
-  <a-popover
-    v-model:open="visibleRef"
-    :arrow="false"
-    trigger="click"
-    placement="bottom"
-  >
-    <a-input
-      v-model:value="moduleValue"
-      :addon-before="scope || '本地'"
-      placeholder="请输入或选择组件路径（views下的路径）"
-    />
-    <template #content>
-      <div class="w-156 mb-2">
-        <a-form-item-rest>
-          <a-input
-            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-156 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"
+  <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"
         >
-          <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"
+          <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"
             >
-              <!-- 根：无 '/' 的 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 #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>
-        </a-directory-tree>
-      </template>
-      <template v-else>
-        <div class="flex items-center justify-center h-[220px]">
-          <a-empty :image="simpleImage" description="没有找到匹配的组件" />
         </div>
-      </template>
-    </template>
-  </a-popover>
+      </div>
+    </Teleport>
+  </div>
 </template>
 
 <style>