zc-unify-admin-pages

众诚统一认证后台管理页面包——从 zc-unify-auth-system-web（管理端）抽取的后台页面，供门户 zc-unify-door-web 的 /admin 模块引用，实现"门户内切换后台管理"。

源码包（不做预编译），由宿主 webpack 直接编译。包内不依赖任何宿主的 store / cookie / 配置——运行时依赖全部通过 Vue.use 注入（见注入协议）。

环境要求

| 依赖 | 版本 | 说明 | |---|---|---| | vue | ^2.6.14 || ^2.7.14 | peerDependency | | element-ui | ^2.15.9 | peerDependency，Vue.use(element-ui) 全局注册 | | zc-framework-ui | 3.0.48 | peerDependency，Vue.use(zcUI)——页面内 theme-* 系列组件由它提供 | | 宿主构建 | vue-cli 5 / webpack 5 | 需将本包加入 transpileDependencies |

宿主还需全局可用：Vue.prototype.$message / $confirm（element-ui 提供）、约 30 个全局业务组件（Pagination、ThTable、Wangeditor、ImportBtn 等，与 zc-framework-ui 工程惯例一致）。

包内容

| 版本 | 页面 | |---|---| | 0.1.0 | 在线用户（userMenu/onLineUser/index）：列表分页 / 条件查询 / 强制下线 |

规划中（enCode 即管理端后端菜单 enCode）：应用中心（applicationManagement / comRoute/appConfig）、用户中心（unifyUser / unifyOrganization / userCenter）、公告管理（searchNotice / publicNotice / manageNotice / bannerManage）、新闻管理（newsManagement）。

快速接入

1. 安装

// 宿主 package.json dependencies
"zc-unify-admin-pages": "^0.1.0"

2. 构建配置（vue.config.js）

// 源码包需纳入 babel 转译
transpileDependencies: ['zc-unify-admin-pages'],

// chainWebpack：包自带 svg 图标目录并入 svg-sprite 处理
const adminPagesIcons = resolve('node_modules/zc-unify-admin-pages/src/icons');
config.module.rule('svg').exclude.add(resolve('src/assets/icons')).add(adminPagesIcons).end();
config.module.rule('icons').test(/\.svg$/)
  .include.add(resolve('src/assets/icons')).add(adminPagesIcons).end();

3. 运行时注入（main.js）

import AdminPages from 'zc-unify-admin-pages';
import Cookies from 'js-cookie';

Vue.use(AdminPages, {
  request: {
    // 后台网关前缀（管理端形态为双 auth 路径）。必须跨域直连后端：
    // 后端鉴权优先解析 cookie 中的 SSO 令牌，同源请求自动携带门户 cookie 会导致
    // 身份被解析为门户侧、管理数据被权限过滤为空（HTTP 200 + 空列表，无报错）。
    baseURL: () => process.env.VUE_APP_BASE_API.replace(/\/+$/, '') + '/auth',
    // isToken 为 true 表示该请求声明了 headers.isToken === false，可省略 token 头
    getHeaders: isToken => {
      const headers = { 'client-type': 'auth', source: 'back' };
      // 优先管理端会话（同域 cookie，登录过认证系统即有）；此时不混发 SSO 令牌
      const authTokenName = Cookies.get('authTokenName');
      const authTokenValue = Cookies.get('authTokenValue');
      if (!isToken && authTokenName && authTokenValue) {
        headers[authTokenName] = authTokenValue;
      }
      return headers;
    },
    // 会话过期（code 70004）用户选择重新登录后
    onUnauthorized: () => store.dispatch('FedLogOut'),
  },
  getUserInfo: () => store.getters.userInfo,
  getPermissions: () => store.getters.permissions || [],
});

4. 路由（三件套之 1）

/admin 必须挂在常量路由（否则被动态路由的 path: '*' 兜底抢走）：

{
  path: '/admin',
  component: AdminLayout,
  redirect: '/admin/index',
  children: [
    { path: 'index', component: AdminHome, meta: { title: '首页' } },
    ...AdminPages.routes,   // 或按 createAdminRoutes() 逐条接入
  ],
}

5. 侧边栏菜单（三件套之 2，缺它菜单不显示）

页面可达 ≠ 菜单可见——侧边栏数据源与路由表分离，需在菜单数据（如 src/views/admin/menu.js）追加：

{ path: '/admin/onLineUser', meta: { title: '在线用户', icon: 'peoples' }, hidden: false },

（三件套之 3 为包内页面本身，随包分发。）

注入协议参考

Vue.use(zc-unify-admin-pages, options) 的完整 options：

| 字段 | 类型 | 必填 | 说明 | |---|---|---|---| | request.baseURL | () => string | ✅ | 后台网关前缀；每次请求动态求值，支持运行时切换环境 | | request.getHeaders | (isToken) => object | ✅ | 请求头工厂（token / 单点登录令牌 / client-type / source）；isToken === true 表示该请求声明了 headers.isToken === false | | request.onUnauthorized | () => void | ✅ | 会话过期（code 70004）后用户选择重新登录的动作（登出 + 跳转） | | getUserInfo | () => object \| null | ⛔ | 当前用户信息（runtime.getUserInfo()） | | getPermissions | () => string[] | ⛔ | 按钮权限标识列表（v-hasPermi 指令用） |

install 同时注册：Vue.prototype.msgSuccess / msgWarning / msgError / parseTime / resetForm（宿主已存在则跳过）、v-hasPermi 指令。

包导出：

import AdminPages, { resolveView, createAdminRoutes, setOptions } from 'zc-unify-admin-pages';
// resolveView(enCode)  → 命中返回页面组件工厂，未命中返回 null（宿主动态路由 loadView 双级解析用）
// createAdminRoutes()  → 静态兜底路由数组

源工程开发（薄壳模式）

包常驻管理端仓库 packages/zc-unify-admin-pages，与 src/ 并存：

• 抽取套路：页面复制进包（仅改 import 为包内相对路径，逻辑零改动）→ 管理端原路径入口 index.vue 改薄壳（template 直接渲染包内组件，name 保留原组件名）→ 管理端路由/菜单机制不动；
• 管理端自身：package.json 以 link:./packages/zc-unify-admin-pages 消费包，改包源码即时生效；
• 验证纪律：每个模块完成后双端回归（管理端原生环境 + 门户注入环境），数据一致才算通过。

发版

管理端仓库根目录：

npm run publish:admin-pages        # 0.1.x → patch：问题修复、README 等
npm run publish:admin-pages:minor  # x.0   → minor：新增页面/菜单

命令固化流程：bump 版本（不自动 git tag）→ 发版闸门检查（包内禁止 @/ 别名 import）→ 发布 npmjs（提示时输入 6 位 OTP）。

版本策略：页面无破坏性调整 patch；新增页面 minor；注入协议或路由结构变化 major。

常见问题

| 现象 | 原因与处理 | |---|---| | 页面 404 | 菜单 enCode 未在包内 src/viewMap.js 注册，或宿主未加路由 | | 侧边栏无菜单项 | 菜单数据源未配置（见快速接入第 5 步——路由与菜单数据是分离的） | | 页面能开但列表为空（无报错） | 请求走了同源代理携带门户 cookie，被后端鉴权解析为门户身份 → 检查 baseURL 是否跨域直连、getHeaders 是否混发 SSO 令牌 | | 编译报 Can't resolve '@/...' | 包内出现宿主别名引用（应只有相对路径）——跑 npm run lint:check 定位 | | 请求 401 | 宿主 getHeaders 未按约定返回管理端会话 token | | 图标不显示 | 图标 svg 未在包 src/icons/ 或宿主 svg 集合中 |