@yss123/cage-admin 0.1.0 → 0.3.0

package/ui/dist/shared/dom.js

@@ -0,0 +1,139 @@
+/** 统一用 DOM/textContent 构建界面；业务名称、错误、审计差异不会被当作 HTML 执行。 */
+/**
+ * 创建指定标签并递归追加 children，最后赋属性以保证 select 能匹配已插入的 option。
+ * value/checked 使用 DOM 属性，aria 属性保留字符串语义；事件键去除 on 前缀后注册监听。
+ * 返回对应标签类型的未挂载节点，不做输入业务校验或权限判断。
+ */
+export function h(tag, attrs = {}, ...children) {
+    const element = document.createElement(tag);
+    const append = (child) => {
+        if (Array.isArray(child))
+            child.forEach(append);
+        else if (child !== null && child !== undefined && child !== false)
+            element.append(child instanceof Node ? child : document.createTextNode(String(child)));
+    };
+    children.forEach(append);
+    // select 的 value 必须在 option 加入后赋值，否则浏览器会丢失当前选择。
+    for (const [key, value] of Object.entries(attrs)) {
+        if (value === null || value === undefined)
+            continue;
+        if (key.startsWith('on'))
+            element.addEventListener(key.slice(2), value);
+        else if (key === 'class')
+            element.className = String(value);
+        else if (key === 'value')
+            element.value = String(value);
+        else if (key === 'checked')
+            element.checked = Boolean(value);
+        else if (key.startsWith('aria-'))
+            element.setAttribute(key, String(value));
+        else if (value !== false)
+            element.setAttribute(key, value === true ? '' : String(value));
+    }
+    return element;
+}
+const paths = {
+    grid: ['M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z'],
+    shield: ['M12 3 3 7v5c0 5 9 9 9 9s9-4 9-9V7z', 'm8 12 3 3 5-6'],
+    users: [
+        'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2',
+        'M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8',
+        'M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75',
+    ],
+    inbox: ['M4 4h16l2 12v4H2v-4z', 'M2 16h6l2 3h4l2-3h6'],
+    search: ['M21 21l-5-5', 'M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16'],
+    clock: ['M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20', 'M12 6v6l4 2'],
+    link: ['M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-2 2', 'M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l2-2'],
+    file: ['M14 2H4v20h16V8z', 'M14 2v6h6M8 13h8M8 17h5'],
+    arrow: ['M7 17 17 7M7 7h10v10'],
+    plus: ['M12 5v14M5 12h14'],
+    check: ['m5 12 4 4L19 6'],
+    chevron: ['m9 5 7 7-7 7'],
+    logout: ['M9 21H3V3h6M9 12h12m-4-4 4 4-4 4'],
+    refresh: ['M20 7a9 9 0 1 0 1 10M20 3v5h-5'],
+    info: ['M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20', 'M12 11v6M12 7h.01'],
+    lock: ['M5 10h14v11H5zM8 10V7a4 4 0 0 1 8 0v3M12 14v3'],
+};
+/** 线条图标是本地 SVG，无字体、CDN 或图片下载依赖。 */
+/**
+ * 从本地 paths 表生成装饰性 SVG，继承 currentColor 并设置 aria-hidden。
+ * name 必须来自已定义图标键；此函数不访问网络或加载外部 SVG。
+ */
+export function icon(name) {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    for (const [key, value] of Object.entries({
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        'stroke-width': '1.7',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'aria-hidden': 'true',
+        class: 'icon',
+    }))
+        svg.setAttribute(key, value);
+    for (const d of paths[name]) {
+        const path = document.createElementNS(svg.namespaceURI, 'path');
+        path.setAttribute('d', d);
+        svg.append(path);
+    }
+    return svg;
+}
+/**
+ * 把表单标签、控件和可选提示组合为一个 label，控件状态仍由调用页面维护。
+ */
+export const field = (label, control, hint) => h('label', { class: 'field' }, h('span', {}, label), control, hint && h('small', {}, hint));
+/**
+ * 将存在的时间字符串按浏览器本地时区显示为中文日期时间，null 显示占位符。
+ */
+export const formatTime = (time) => time ? new Date(time).toLocaleString('zh-CN', { hour12: false }) : '—';
+/**
+ * 生成状态徽标，tone 选择既有 CSS 色调；text 作为文本插入，徽标不判断业务终态。
+ */
+export const badge = (text, tone = 'neutral') => h('span', { class: `badge ${tone}` }, text);
+/**
+ * 以列标题与单元格渲染函数构造表格；空行集显示跨列提示。
+ * rows 是调用方已取得的数据，不在这里分页、过滤或请求服务器；单元格仍通过安全 DOM 子项追加。
+ */
+export function table(columns, rows, empty = '暂无记录') {
+    return h('div', { class: 'table-wrap' }, h('table', {}, h('thead', {}, h('tr', {}, columns.map(([name]) => h('th', { scope: 'col' }, name)))), h('tbody', {}, rows.length
+        ? rows.map((row) => h('tr', {}, columns.map(([, cell]) => h('td', {}, cell(row)))))
+        : h('tr', {}, h('td', { colspan: columns.length, class: 'table-empty' }, empty)))));
+}
+/**
+ * 构造含图标、标题和说明的空态块；由调用方区分无记录、无权限和未配置等原因。
+ */
+export function emptyState(title, message, glyph = 'inbox') {
+    return h('div', { class: 'empty-state' }, h('span', { class: 'empty-icon' }, icon(glyph)), h('h3', {}, title), h('p', {}, message));
+}
+/**
+ * 组合带标题、可选说明和内容的 section，返回未挂载面板供页面自由布局。
+ */
+export function panel(title, description, ...children) {
+    return h('section', { class: 'panel' }, h('div', { class: 'panel-heading' }, h('div', {}, h('h2', {}, title), description && h('p', {}, description))), children);
+}
+/**
+ * 创建搜索输入并将每次 input 的当前值交给 onInput。
+ * 默认不防抖、不请求服务器，调用者决定本地过滤或发起查询。
+ */
+export function searchInput(placeholder, onInput, value = '') {
+    const input = h('input', {
+        type: 'search',
+        placeholder,
+        'aria-label': placeholder,
+        value,
+        oninput: () => onInput(input.value),
+    });
+    return h('div', { class: 'search-field' }, icon('search'), input);
+}
+/**
+ * 把原生 dialog 挂到 document.body 并以模态方式打开，返回实例便于提交后关闭。
+ * close 事件只监听一次并移除节点，避免已关闭表单长期留在 DOM；不会替表单提交或保存草稿。
+ */
+export function modal(title, content) {
+    const dialog = h('dialog', { class: 'modal' }, h('div', { class: 'modal-heading' }, h('h2', {}, title), h('button', { type: 'button', class: 'icon-button', 'aria-label': '关闭窗口', onclick: () => dialog.close() }, '×')), content);
+    dialog.addEventListener('close', () => dialog.remove(), { once: true });
+    document.body.append(dialog);
+    dialog.showModal();
+    return dialog;
+}

package/ui/dist/shared/labels.js

@@ -0,0 +1,84 @@
+/**
+ * 把目录技术标识映射为系统管理页面的中文展示文字。
+ * 目录由应用启动阶段加载，函数按现有 state.catalog 查找；默认文案只影响显示，不改能力标识、状态或授权规则。
+ */
+import { state } from './api.js';
+/**
+ * 范围组合子的固定名称和说明，供角色范围编辑器复用。实际可见记录仍由聚合字段与服务端授权决定。
+ */
+export const scopes = {
+    self: { title: '仅本人', hint: '仅查看归属于自己的记录' },
+    dept: { title: '本部门', hint: '查看本人所在部门的记录' },
+    deptSubtree: { title: '本部门及下级', hint: '查看本人部门及下属部门的记录' },
+    deptSet: { title: '指定部门', hint: '仅查看所选部门的记录' },
+    all: { title: '全部数据', hint: '查看当前租户内的全部记录' },
+};
+/**
+ * 按聚合标识查找中文 label/description，没有独立中文名时返回通用对象名。
+ */
+export function objectName(name) {
+    const object = state.catalog.aggregates.find((item) => item.name === name);
+    return object?.label && object.label !== name ? object.label : object?.description || '业务对象';
+}
+/**
+ * 先使用能力目录解释操作名，再处理不属于目录的登录与运维审计动作。
+ * 找不到映射时返回通用名称，原始 capability 仍应保留供诊断。
+ */
+export function capabilityName(capability) {
+    const item = state.catalog.capabilities.find((item) => item.capability === capability);
+    if (item)
+        return item.aggregate ? item.label.replaceAll(item.aggregate, objectName(item.aggregate)) : item.label;
+    // 这些审计操作不属于领域能力目录，单独命名，避免登录和运维都显示成“业务操作”。
+    const operations = {
+        'auth.login': '账号登录',
+        'deadLetter.replay': '重新投递事件',
+        'deadLetter.discard': '丢弃死信事件',
+        'job.enable': '启用定时任务',
+        'job.disable': '停用定时任务',
+    };
+    return operations[capability] || '业务操作';
+}
+/**
+ * 为不能由 user 直接调用的命令生成流程来源提示；含 user 或没有调用身份限制时返回空串。
+ */
+export function invocation(capability) {
+    if (!capability.invokedBy || capability.invokedBy.includes('user'))
+        return '';
+    const names = {
+        process: '审批流程',
+        external: '外部系统',
+        job: '定时任务',
+        system: '系统内部',
+        reaction: '自动反应',
+    };
+    return capability.invokedBy.map((item) => names[item] || '自动流程').join(' / ') + '调用';
+}
+/**
+ * 组织与运行记录的常见状态文案表；展示映射不推断事件已完成或远端调用成功。
+ */
+export const statusNames = {
+    active: '已启用',
+    disabled: '已停用',
+    archived: '已停用',
+    pending: '等待处理',
+    processing: '处理中',
+    running: '执行中',
+    done: '已完成',
+    ok: '成功',
+    failed: '失败',
+    error: '失败',
+    dead: '已进入死信',
+    retry: '等待重试',
+};
+/**
+ * 返回常见状态的中文说明，未知值显示待确认，避免将新状态误写为成功。
+ */
+export const statusName = (status) => statusNames[status] || '待确认';
+/**
+ * 从项目图谱 labels 查事件中文名，缺配置时只给通用说明。
+ */
+export const eventName = (name) => state.catalog.labels[`event:${name}`] || '业务事件';
+/**
+ * 从当前目录查定时任务展示名；不读取调度执行状态或任务结果。
+ */
+export const jobName = (name) => state.catalog.jobs.find((item) => item.name === name)?.label || '定时任务';

package/ui/dist/shared/navigation.js

@@ -0,0 +1,14 @@
+/**
+ * 管理模块共享的导航意图出口，避免页面反向依赖应用壳。
+ * 改变 hash 触发壳的 hashchange；当前页面再次导航则派发刷新事件重新读取数据。
+ */
+// 事件让模块只发出导航意图，不反向导入应用壳。
+/**
+ * 进入指定管理页面或刷新同一页面。page 是应用壳识别的页面键，不是任意外部 URL。
+ */
+export function navigate(page) {
+    if (location.hash !== `#/${page}`)
+        location.hash = `#/${page}`;
+    else
+        window.dispatchEvent(new Event('cage:refresh'));
+}

package/ui/dist/shared/types.js

@@ -0,0 +1 @@
+export {};

package/ui/index.html

@@ -1,13 +1,15 @@
 <!doctype html>
+<!-- 系统管理浏览器文档入口。应用脚本挂载到 app，通知层由共享反馈工具管理；页面数据通过认证后的接口加载。 -->
 <html lang="zh-CN">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>系统管理</title>
-  <link rel="stylesheet" href="./style.css" />
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module" src="./app.js"></script>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>系统管理</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <div id="notifications" aria-live="polite"></div>
+    <script type="module" src="./dist/app.js"></script>
+  </body>
 </html>