@yss123/cage-admin 0.1.0 → 0.2.0

package/ui/dist/shared/api.js

@@ -0,0 +1,84 @@
+import { h, icon } from './dom.js';
+export const state = {
+    me: null,
+    catalog: null,
+    csrf: null,
+};
+const errors = {
+    UNAUTHENTICATED: '登录已过期，请重新登录',
+    FORBIDDEN: '你没有执行此操作的权限',
+    NOT_FOUND: '记录不存在或不在你的数据范围内',
+    INVALID_INPUT: '请检查填写内容',
+    INVALID_TRANSITION: '当前状态不允许此操作',
+    CONSTRAINT_VIOLATED: '未满足操作规则',
+    INVARIANT_VIOLATED: '数据未满足业务规则',
+    CONFLICT: '数据已更新，请刷新后重试',
+    DOMAIN_ERROR: '业务规则未满足',
+    RATE_LIMITED: '操作过于频繁，请稍后再试',
+};
+export class ApiError extends Error {
+    code;
+    constructor(code, message) {
+        super(message);
+        this.code = code;
+    }
+}
+/** 系统管理同样使用会话、CSRF 和幂等键，不拥有绕过领域命令的写入通道。 */
+export async function api(method, url, body) {
+    const headers = { accept: 'application/json' };
+    if (method === 'POST') {
+        if (!state.csrf) {
+            const response = await fetch('/auth/csrf', { credentials: 'include' });
+            if (!response.ok)
+                throw new Error('无法获取安全令牌，请刷新后重试');
+            state.csrf = (await response.json()).token;
+        }
+        headers['content-type'] = 'application/json';
+        headers['x-csrf-token'] = state.csrf;
+        headers['idempotency-key'] = crypto.randomUUID();
+    }
+    const response = await fetch(url, {
+        method,
+        credentials: 'include',
+        headers,
+        body: method === 'POST' ? JSON.stringify(body ?? {}) : undefined,
+    });
+    const data = await response.json();
+    if (!response.ok) {
+        if (response.status === 401 && url !== '/auth/login') {
+            state.me = null;
+            state.catalog = null;
+            state.csrf = null;
+            window.dispatchEvent(new Event('cage:session-expired'));
+        }
+        const detail = data.domainCode || data.detail?.message || (typeof data.detail === 'string' ? data.detail : '');
+        const message = `${errors[data.code] ?? '服务暂时无法处理请求'}${detail ? `：${detail}` : ''}`;
+        throw new ApiError(data.code, message);
+    }
+    return data;
+}
+export const can = (capability) => Boolean(state.me?.capabilities.includes(capability));
+export function toast(message, failed = false) {
+    const item = h('div', { class: `toast ${failed ? 'error' : 'success'}`, role: failed ? 'alert' : 'status' }, icon(failed ? 'info' : 'check'), message);
+    document.getElementById('notifications').append(item);
+    setTimeout(() => item.remove(), 5000);
+}
+/** 失败会明确显示原因；按钮等待返回，避免界面把未保存的授权显示成成功。 */
+export async function run(action, success, button) {
+    if (button)
+        button.disabled = true;
+    try {
+        const result = await action();
+        if (success)
+            toast(success);
+        return result;
+    }
+    catch (error) {
+        toast(error instanceof TypeError ? '连接失败，请检查网络与 API 服务' : error.message, true);
+        return null;
+    }
+    finally {
+        if (button)
+            button.disabled = false;
+    }
+}

package/ui/dist/shared/dom.js

@@ -0,0 +1,103 @@
+/** 统一用 DOM/textContent 构建界面；业务名称、错误、审计差异不会被当作 HTML 执行。 */
+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 或图片下载依赖。 */
+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;
+}
+export const field = (label, control, hint) => h('label', { class: 'field' }, h('span', {}, label), control, hint && h('small', {}, hint));
+export const formatTime = (time) => time ? new Date(time).toLocaleString('zh-CN', { hour12: false }) : '—';
+export const badge = (text, tone = 'neutral') => h('span', { class: `badge ${tone}` }, text);
+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));
+}
+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);
+}
+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);
+}
+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,55 @@
+import { state } from './api.js';
+export const scopes = {
+    self: { title: '仅本人', hint: '仅查看归属于自己的记录' },
+    dept: { title: '本部门', hint: '查看本人所在部门的记录' },
+    deptSubtree: { title: '本部门及下级', hint: '查看本人部门及下属部门的记录' },
+    deptSet: { title: '指定部门', hint: '仅查看所选部门的记录' },
+    all: { title: '全部数据', hint: '查看当前租户内的全部记录' },
+};
+export function objectName(name) {
+    const object = state.catalog.aggregates.find((item) => item.name === name);
+    return object?.label && object.label !== name ? object.label : object?.description || '业务对象';
+}
+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] || '业务操作';
+}
+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] || '待确认';
+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,7 @@
+// 事件让模块只发出导航意图，不反向导入应用壳。
+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,14 @@
 <!doctype html>
 <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>