@pubinfo/core 2.0.0-beta.9 → 2.0.0-rc.1

package/src/features/components/PubinfoIcon/index.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import * as AntdIcons from '@ant-design/icons-vue';
+import { Icon } from '@iconify/vue';
+import { computedAsync } from '@vueuse/core';
+import { setupIcon } from '@/core';
+import { useProvider } from '../PubinfoProvider';
+
+defineOptions({
+  name: 'PubinfoIcon',
+});
+
+const props = defineProps<{
+  name: string
+  async?: boolean
+  flip?: 'horizontal' | 'vertical' | 'both'
+  rotate?: number
+  color?: string
+  size?: string | number
+}>();
+
+const { loadIcon } = useProvider();
+
+const outputType = computed(() => {
+  if (props.name.indexOf('i-') === 0) {
+    return props.async ? 'svg' : 'css';
+  }
+  else if (props.name.includes(':') && !props.name.startsWith('antd:')) {
+    return 'svg';
+  }
+  else if (props.name.startsWith('antd:')) {
+    return 'antd';
+  }
+  else {
+    return 'custom';
+  }
+});
+
+const outputName = computed(() => {
+  if (props.name.indexOf('i-') === 0) {
+    let conversionName = props.name;
+    if (props.async) {
+      conversionName = conversionName.replace('i-', '');
+    }
+    return conversionName;
+  }
+
+  if (props.name.startsWith('antd:')) {
+    return props.name.replace('antd:', '');
+  }
+
+  return props.name;
+});
+
+const style = computed(() => {
+  const transform: string[] = [];
+  if (props.flip) {
+    switch (props.flip) {
+      case 'horizontal':
+        transform.push('rotateY(180deg)');
+        break;
+      case 'vertical':
+        transform.push('rotateX(180deg)');
+        break;
+      case 'both':
+        transform.push('rotateX(180deg)');
+        transform.push('rotateY(180deg)');
+        break;
+    }
+  }
+  if (props.rotate) {
+    transform.push(`rotate(${props.rotate % 360}deg)`);
+  }
+  return {
+    ...(props.color && { color: props.color }),
+    ...(props.size && { fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size }),
+    ...(transform.length && { transform: transform.join(' ') }),
+  };
+});
+
+const icon = computedAsync(async () => {
+  const parse = parseString(props.name);
+
+  return loadIcon?.(props.name) ?? await setupIcon(`${parse.name}${parse.ext || '.svg'}`, parse.prefix);
+});
+
+interface Parsed {
+  prefix: string
+  name: string
+  ext: string
+}
+
+function parseString(str: string): Parsed {
+  let prefix = '';
+  let name = '';
+  let ext = '';
+
+  // 匹配 RBAC-[org.svg] 或 RBAC-[org]
+  const match = str.match(/^([^-\s]+)-\[(.+)\]$/);
+
+  if (match) {
+    prefix = match[1];
+    const inner = match[2];
+
+    const dotIdx = inner.lastIndexOf('.');
+    if (dotIdx !== -1) {
+      name = inner.slice(0, dotIdx);
+      ext = inner.slice(dotIdx);
+    }
+    else {
+      name = inner;
+    }
+  }
+  else {
+    // 如果没有前缀格式，就当普通文件处理
+    const dotIdx = str.lastIndexOf('.');
+    if (dotIdx !== -1) {
+      name = str.slice(0, dotIdx);
+      ext = str.slice(dotIdx);
+    }
+    else {
+      name = str;
+    }
+  }
+
+  return { prefix, name, ext };
+}
+</script>
+
+<template>
+  <i class="relative size-[1em] flex-inline items-center justify-center fill-current leading-[1em]" :style="style">
+    <i v-if="outputType === 'css'" :class="outputName" />
+    <Icon v-else-if="outputType === 'svg'" :icon="outputName" />
+    <span v-else-if="outputType === 'antd'" class="antd-icon" :data-icon="outputName">
+      <component
+        :is="AntdIcons[outputName as keyof typeof AntdIcons] as any"
+      />
+    </span>
+    <img v-else-if="icon" class="size-1em" :src="icon">
+  </i>
+</template>

package/src/{components → features/components}/PubinfoProvider/index.ts

@@ -19,7 +19,6 @@ export default defineComponent({
   props: {
     loadIcon: {
       type: Function as PubinfoProviderProps['loadIcon'],
-      required: true,
     },
   },
   setup(props, { slots }) {
@@ -27,7 +26,7 @@ export default defineComponent({
 
     createPubinfoProvider({
       loadIcon(name) {
-        return props.loadIcon(name) ?? provider?.loadIcon?.(name);
+        return props?.loadIcon?.(name) ?? provider?.loadIcon?.(name);
       },
     });
 

package/src/{composables → features/composables}/auth.ts

@@ -1,4 +1,4 @@
-import { useSettingsStore, useUserStore } from '@/stores';
+import { useSettingsStore, useUserStore } from '@/features/stores';
 
 /**
  * 处理身份验证和权限检查的自定义钩子。
@@ -14,7 +14,7 @@ export function useAuth() {
     const settingsStore = useSettingsStore();
     const userStore = useUserStore();
     if (settingsStore.settings.app.enablePermission) {
-      return userStore.permissions.includes(permission);
+      return userStore.user.permissions.includes(permission);
     }
     else {
       return true;

package/src/{composables → features/composables}/theme.ts

@@ -1,4 +1,4 @@
-import { useSettingsStore } from '@/stores';
+import { useSettingsStore } from '@/features/stores';
 
 export function useTheme() {
   const settingsStore = useSettingsStore();

package/src/{composables → features/composables}/watchDiff.ts

@@ -35,7 +35,7 @@ export function watchDiffObject<
 ) {
   let oldValue: Record<string, any> = options?.immediate
     ? {}
-    : cloneDeep(source instanceof Function
+    : cloneDeep(typeof source === 'function'
         ? source()
         : source,
       );

package/src/features/context/index.ts

@@ -0,0 +1,40 @@
+import type { Router } from 'vue-router';
+import type { RequestInstance } from '@/core';
+
+import { createContext } from '@/utils';
+
+interface InternalContext {
+  router: Router
+  requestAuth: RequestInstance
+  requestBasic: RequestInstance
+}
+
+// 持久化全局上下文，支持 HMR 后恢复
+const g = globalThis as any;
+g.__PUBINFO__ = g.__PUBINFO__ || {};
+if (!g.__PUBINFO__.ctx) {
+  g.__PUBINFO__.ctx = createContext<InternalContext>();
+}
+const ctx = g.__PUBINFO__.ctx as ReturnType<typeof createContext<InternalContext>>;
+
+// 旧 state 恢复
+if (g.__PUBINFO__.state) {
+  try {
+    ctx.set(g.__PUBINFO__.state);
+  }
+  catch {}
+}
+
+/** 初始化全局 context */
+export function createPubinfoContext(newState: InternalContext) {
+  // 缓存用于 wrapProxy 兜底
+  g.__PUBINFO__.state = newState;
+  ctx.set(newState);
+  // 立即激活 use()
+  ctx.use();
+}
+
+/** 读取全局 context */
+export function usePubinfoContext() {
+  return ctx.use();
+}

package/src/features/enum.ts

@@ -0,0 +1,21 @@
+/** 资源类型 */
+export enum RESOURCE_TYPE {
+  /** 静态应用 */
+  APP = '1',
+  /** 目录 */
+  INDEX = '2',
+  /** 菜单 */
+  MENU = '3',
+  /** 按钮 */
+  BUTTON = '4',
+  /** 非菜单页 */
+  NON_MENU = '5',
+  /** 微应用 */
+  MICRO_APP = '6',
+  /** 动态应用 */
+  DYNAMIC_APP = '7',
+  /** 内嵌 */
+  IFRAME = '8',
+  /** 外链 */
+  LINK = '9',
+}

package/src/features/index.ts

@@ -0,0 +1,8 @@
+import './assets/styles/index.ts';
+
+export * from './components';
+export * from './composables';
+export * from './enum';
+export * from './router';
+export * from './settings';
+export * from './stores';

package/src/{pages/system/[...all].vue → features/pages/not-found/index.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useSettingsStore, useTabbarStore } from '@/stores';
+import { useSettingsStore, useTabbarStore } from '@/features/stores';
 
 const route = useRoute();
 const router = useRouter();
@@ -59,16 +59,14 @@ function goBack() {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .allIcon {
-  background: url("@/assets/icons/404.svg") no-repeat;
+  background: url("./assets/404.svg") no-repeat;
   background-size: 100% 100%;
 }
 
-[data-theme="dark"] {
-  .allIcon {
-    background: url("@/assets/icons/404_dark.svg") no-repeat;
-    background-size: 100% 100%;
-  }
+[data-theme="dark"] .allIcon {
+  background: url("./assets/404_dark.svg") no-repeat;
+  background-size: 100% 100%;
 }
 </style>

package/src/{pages/personal → features/pages}/profile/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { ProColumns } from '@pubinfo/pro-components';
-import { getRbacUserUserEntireInfo } from '@/api/modules/rbac';
 import { SchemaForm } from '@pubinfo/pro-components';
 import { isNil } from 'lodash-es';
+import { getRbacUserUserEntireInfo } from '@/features/api/modules/rbac';
 
 // TODO 解耦组件库
 

package/src/features/router/asyncRoutes.ts

@@ -0,0 +1,35 @@
+import type { Route } from '#/vue-router';
+
+// #region --- 本地异步路由
+interface AsyncRoutesOptions {
+  /** 路由排序 */
+  sort?: number
+}
+
+interface RawAsyncRoute extends Required<AsyncRoutesOptions> {
+  routes: Route.recordMainRaw[]
+}
+
+const rawAsyncRoutes: RawAsyncRoute[] = [];
+
+/**
+ * 定义并注册本地异步路由
+ */
+export function defineAsyncRoutes(routes: Route.recordMainRaw[], options?: AsyncRoutesOptions) {
+  rawAsyncRoutes.push({
+    routes,
+    sort: options?.sort ?? 0,
+  });
+  return routes;
+}
+
+/**
+ * 读取注册的本地异步路由
+ */
+export function getAsyncRoutes() {
+  return rawAsyncRoutes
+    .sort((a, b) => a?.sort - b?.sort)
+    .map(e => e.routes)
+    .flat();
+}
+// #endregion

package/src/features/router/index.ts

@@ -0,0 +1,2 @@
+export * from './asyncRoutes';
+export * from './systemRoutes';

package/src/features/router/systemRoutes.ts

@@ -0,0 +1,45 @@
+import type { RouteRecordRaw } from 'vue-router';
+import { setupDefaultLayout } from '@/core';
+import { useSettingsStore } from '@/features/stores';
+
+// #region --- 系统路由
+const systemRoutes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    meta: {
+      title: () => useSettingsStore().settings.home.title,
+      breadcrumb: false,
+    },
+    children: [
+      // TODO 优化掉该页面
+      {
+        path: 'profile',
+        name: 'Profile',
+        component: () => import('@/features/pages/profile/index.vue'),
+        meta: {
+          title: '个人中心',
+          i18n: 'route.personal.profile',
+          icon: 'i-iconamoon-profile-duotone',
+        },
+      },
+    ],
+  },
+];
+
+/**
+ * 定义并注册系统路由（含Layout）
+ */
+export function defineSystemRoutes(routes: RouteRecordRaw[]) {
+  systemRoutes[0].children?.push(...routes);
+}
+
+/**
+ * 读取注册的系统路由
+ */
+export function getSystemRoutes() {
+  if (!systemRoutes[0].component) {
+    systemRoutes[0].component = setupDefaultLayout();
+  }
+  return systemRoutes;
+}
+// #endregion

package/src/{config/settings.ts → features/settings/index.ts}

@@ -14,7 +14,6 @@ let globalSettings: RequiredDeep<Settings.all> = {
     storagePrefix: 'wsy_rbac',
     // enableWatermark: false,
     enableErrorLog: false,
-    routeBaseOn: 'frontend',
     enableUserPreferences: true,
     enableSettingPreferences: true,
     enableAppSetting: true,

package/src/{stores/enum/index.ts → features/stores/enum.ts}

@@ -1,5 +1,4 @@
 export enum STORE_NAME {
-
   /** @description 标签管理 */
   FAVORITES = 'favorites',
 

package/src/features/stores/index.ts

@@ -0,0 +1 @@
+export * from './modules';

package/src/{stores → features/stores}/modules/keepAlive.ts

@@ -1,5 +1,6 @@
 import { isArray, isString } from 'lodash-es';
 import { defineStore } from 'pinia';
+import { useWarn } from '@/features/composables';
 import { STORE_NAME } from '../enum';
 
 /**

package/src/{stores → features/stores}/modules/menu.ts

@@ -1,9 +1,10 @@
 import type { Menu } from '#/menu';
 
-import { resolveRoutePath } from '@/utils';
 import { get, isNumber } from 'lodash-es';
+import { match } from 'path-to-regexp';
 import { defineStore } from 'pinia';
-
+import { useWarn } from '@/features/composables';
+import { resolveRoutePath } from '@/utils';
 import { STORE_NAME } from '../enum';
 import useRouteStore from './route';
 import useSettingsStore from './settings';
@@ -106,7 +107,7 @@ const useMenuStore = defineStore(
     });
 
     /**
-     * TODO: 如果第一个菜单是一个isDev为true的菜单，那么这个计算属性可能会出现问题
+     * TODO V1: 如果第一个菜单是一个isDev为true的菜单，那么这个计算属性可能会出现问题
      * 返回第一个侧边栏菜单的最深路径的计算属性。
      *
      * @returns {string} 第一个侧边栏菜单的最深路径，如果没有侧边栏菜单则返回'/'。
@@ -125,13 +126,26 @@ const useMenuStore = defineStore(
      */
     function getDeepestPath(menu: Menu.recordRaw, rootPath = '') {
       let retnPath = '';
-      if (menu.children) {
+      if (menu.children && menu.children.length > 0) {
+        // CLOSE: 优化菜单查找逻辑，优先找到可显示在侧边栏的菜单
         const item = menu.children.find(item => item.meta?.sidebar !== false);
         if (item) {
           retnPath = getDeepestPath(item, resolveRoutePath(rootPath, menu.path));
         }
         else {
-          retnPath = getDeepestPath(menu.children[0], resolveRoutePath(rootPath, menu.path));
+          // TODO: 如果没有找到可显示的菜单，检查是否所有子菜单都被隐藏
+          const hasVisibleChildren = menu.children.some(child =>
+            child.meta?.sidebar !== false || (child.children && child.children.length > 0),
+          );
+
+          if (hasVisibleChildren) {
+            retnPath = getDeepestPath(menu.children[0], resolveRoutePath(rootPath, menu.path));
+          }
+          else {
+            // FIX-ME: 目录下没有可显示的菜单时，返回当前路径或默认路径
+            useWarn(`目录"${menu.meta?.title || menu.path}"下没有可显示的菜单项`);
+            retnPath = resolveRoutePath(rootPath, menu.path);
+          }
         }
       }
       else {
@@ -185,13 +199,37 @@ const useMenuStore = defineStore(
       }
       else {
         // 如果是 string 类型，则认为是路由，需要查找对应的主导航索引
-        const findIndex = allMenus.value.findIndex(item => item.children.some(r => data.indexOf(`${r.path}/`) === 0 || data === r.path));
+        const findIndex = findRootIndexByPath(allMenus.value, data);
         if (findIndex >= 0) {
           actived.value = findIndex;
         }
       }
     }
 
+    /**
+     * 根据路径查找主导航索引
+     */
+    function findRootIndexByPath(routes: Menu.recordRaw[], targetPath: string) {
+      function containsPath(route: Menu.recordRaw): boolean {
+        const matcher = match(route.path ?? '', { decode: decodeURIComponent });
+        if (matcher(targetPath)) {
+          return true;
+        }
+        if (route.children) {
+          return route.children.some(child => containsPath(child));
+        }
+        return false;
+      }
+
+      for (let i = 0; i < routes.length; i++) {
+        if (containsPath(routes[i])) {
+          return i;
+        }
+      }
+
+      return 0;
+    }
+
     return {
       menus,
       actived,