@yss123/cage-admin 0.0.0-stage → 0.2.0

package/ui/dist/modules/roles/roles-page.js

@@ -0,0 +1,308 @@
+import { api, can, run, state } from '../../shared/api.js';
+import { badge, emptyState, field, h, icon, modal, searchInput } from '../../shared/dom.js';
+import { invocation, objectName, scopes } from '../../shared/labels.js';
+// 只保存页面交互，角色和权限仍以命令响应为准；搜索不会改动授权数据。
+let selectedRole = null;
+let tab = 'permissions';
+let query = '';
+let filter = 'all';
+export async function renderRoles(main) {
+    const [result, departmentResult] = await Promise.all([
+        api('GET', '/api/role?pageSize=200'),
+        can('Dept.read')
+            ? api('GET', '/api/dept?pageSize=200')
+            : Promise.resolve({ items: [] }),
+    ]);
+    let roles = result.items;
+    if (!selectedRole || !roles.some((role) => role.id === selectedRole))
+        selectedRole = roles[0]?.id ?? null;
+    const list = h('div', { class: 'role-list', 'aria-label': '角色列表' });
+    const details = h('div', { class: 'role-details' });
+    let roleQuery = '';
+    const count = badge(String(roles.length), 'neutral');
+    const sidebar = h('aside', { class: 'role-sidebar' }, h('div', { class: 'role-list-heading' }, h('h2', {}, '团队角色'), count), h('p', { class: 'muted sidebar-description' }, '选择角色，配置可以做什么、可以看哪些数据。'), searchInput('搜索角色名称或编码', (value) => {
+        roleQuery = value.toLowerCase();
+        renderList();
+    }), list);
+    if (can('Role.create'))
+        sidebar.append(h('button', { class: 'button primary create-role', onclick: createRole }, icon('plus'), '新建角色'));
+    main.append(h('div', { class: 'role-workspace' }, sidebar, details));
+    function renderList() {
+        const visible = roles.filter((role) => `${role.name} ${role.code}`.toLowerCase().includes(roleQuery));
+        list.replaceChildren(...visible.map((role) => h('button', {
+            class: `role-item ${role.id === selectedRole ? 'selected' : ''}`,
+            'aria-pressed': role.id === selectedRole,
+            onclick: () => {
+                selectedRole = role.id;
+                renderList();
+                renderDetail();
+            },
+        }, h('span', { class: 'role-avatar' }, icon('shield')), h('span', { class: 'role-item-copy' }, h('strong', {}, role.name), h('small', {}, role.code)), role.status !== 'active'
+            ? badge('停用')
+            : h('span', { class: 'role-item-count' }, role.capabilities.length))));
+        if (!visible.length)
+            list.append(h('p', { class: 'list-empty' }, '没有匹配的角色'));
+    }
+    function createRole() {
+        const name = h('input', { placeholder: '例如：采购经理', required: true, maxlength: 100 });
+        const code = h('input', {
+            placeholder: '例如：purchase_manager',
+            required: true,
+            pattern: '[a-z][a-z0-9_]*',
+        });
+        const save = h('button', { class: 'primary', type: 'submit' }, '创建角色');
+        const form = h('form', {
+            class: 'stack-form',
+            onsubmit: async (event) => {
+                event.preventDefault();
+                const created = await run(() => api('POST', '/api/role/create', { name: name.value, code: code.value }), '角色已创建，请继续配置权限', save);
+                if (created) {
+                    roles = [...roles, created];
+                    selectedRole = created.id;
+                    count.textContent = String(roles.length);
+                    dialog.close();
+                    renderList();
+                    renderDetail();
+                }
+            },
+        }, field('角色名称', name), field('角色编码', code, '用于业务识别，使用小写字母、数字和下划线。'), h('p', { class: 'inline-info' }, icon('info'), '新角色默认没有操作权限，不会自动获得已有业务能力。'), h('div', { class: 'form-actions' }, save));
+        const dialog = modal('新建团队角色', form);
+        name.focus();
+    }
+    function renderDetail() {
+        let role = roles.find((item) => item.id === selectedRole);
+        if (!role) {
+            details.replaceChildren(emptyState('从一个角色开始', '选择左侧角色，或创建一个新的团队角色。', 'shield'));
+            return;
+        }
+        const updateRole = (updated) => {
+            role = updated;
+            roles = roles.map((item) => (item.id === updated.id ? updated : item));
+            renderList();
+        };
+        const countText = h('strong', {}, String(role.capabilities.length));
+        const summary = h('div', { class: 'role-summary' }, h('div', { class: 'role-title' }, h('span', { class: 'role-emblem' }, icon('shield')), h('div', {}, h('div', { class: 'title-line' }, h('h2', {}, role.name), badge(role.status === 'active' ? '使用中' : '已停用', role.status === 'active' ? 'green' : 'neutral')), h('p', {}, h('code', {}, role.code), h('span', {}, '· 按角色统一管理访问权限')))), h('div', { class: 'permission-total' }, countText, h('span', {}, '项已授权')));
+        const body = h('div', { class: 'role-tab-body' });
+        const buttons = ['permissions', 'scopes'].map((key) => h('button', {
+            role: 'tab',
+            'aria-selected': tab === key,
+            class: tab === key ? 'active' : '',
+            onclick: () => {
+                tab = key;
+                renderDetail();
+            },
+        }, icon(key === 'permissions' ? 'shield' : 'grid'), key === 'permissions' ? '操作权限' : '数据范围'));
+        details.replaceChildren(summary, h('div', { class: 'role-tabs', role: 'tablist', 'aria-label': '角色配置' }, buttons), body);
+        if (role.status !== 'active')
+            body.append(h('div', { class: 'inline-info' }, icon('lock'), '此角色已停用，当前配置仅供查看。'));
+        if (tab === 'permissions') {
+            const grid = h('div', { class: 'permission-grid' });
+            const filteredCount = h('span', { class: 'muted result-count' });
+            const filters = h('div', { class: 'segmented', 'aria-label': '筛选操作权限' }, ['all', 'granted', 'ungranted'].map((key) => h('button', {
+                class: key === filter ? 'active' : '',
+                'aria-pressed': key === filter,
+                onclick: (event) => {
+                    filter = key;
+                    for (const button of filters.querySelectorAll('button')) {
+                        button.classList.remove('active');
+                        button.setAttribute('aria-pressed', 'false');
+                    }
+                    const button = event.currentTarget;
+                    button.classList.add('active');
+                    button.setAttribute('aria-pressed', 'true');
+                    renderGroups();
+                },
+            }, { all: '全部', granted: '已授权', ungranted: '未授权' }[key])));
+            body.append(h('div', { class: 'permission-toolbar' }, searchInput('搜索业务、操作名称或权限标识', (value) => {
+                query = value;
+                renderGroups();
+            }, query), filters), h('div', { class: 'permission-help' }, h('span', {}, icon('info'), '勾选后即时保存。只能授予你已拥有的权限。'), filteredCount), grid);
+            function renderGroups() {
+                const granted = new Map(role.capabilities.map((item) => [item.capability, item.params]));
+                const search = query.trim().toLowerCase();
+                const groups = new Map();
+                const visible = state.catalog.capabilities.filter((item) => {
+                    const has = granted.has(item.capability);
+                    return ((filter === 'all' || (filter === 'granted' ? has : !has)) &&
+                        `${item.label} ${item.description ?? ''} ${item.capability} ${item.aggregate ? objectName(item.aggregate) : '系统管理'}`
+                            .toLowerCase()
+                            .includes(search));
+                });
+                for (const capability of visible) {
+                    const key = capability.aggregate ?? 'system';
+                    if (!groups.has(key))
+                        groups.set(key, []);
+                    groups.get(key).push(capability);
+                }
+                grid.replaceChildren();
+                filteredCount.textContent = `显示 ${visible.length} 项权限`;
+                countText.textContent = String(role.capabilities.length);
+                // 客户业务排在前面，框架自带的组织与运维权限放在后面，先回答业务人员最关心的问题。
+                const builtIn = new Set(['Dept', 'User', 'Role', 'system']);
+                const ordered = [...groups].sort(([a], [b]) => Number(builtIn.has(a)) - Number(builtIn.has(b)));
+                for (const [name, capabilities] of ordered) {
+                    const isSystem = name === 'system';
+                    const grantedCount = capabilities.filter((item) => granted.has(item.capability)).length;
+                    const card = h('section', { class: 'permission-card' }, h('div', { class: 'permission-card-heading' }, h('span', { class: `group-icon ${isSystem ? 'system' : ''}` }, icon(isSystem ? 'lock' : 'grid')), h('div', { class: 'group-title' }, h('h3', {}, isSystem ? '系统管理' : objectName(name)), h('code', {}, isSystem ? 'SYSTEM' : name)), h('span', { class: 'group-progress' }, `${grantedCount} / ${capabilities.length}`)));
+                    for (const capability of capabilities)
+                        card.append(permissionRow(capability, granted));
+                    grid.append(card);
+                }
+                if (!visible.length)
+                    grid.append(emptyState('没有找到匹配的权限', '换一个关键词，或调整上方授权筛选。', 'search'));
+            }
+            function permissionRow(capability, granted) {
+                const checked = granted.has(capability.capability);
+                const authorized = role.status === 'active' &&
+                    can(checked ? 'Role.revokeCapability' : 'Role.grantCapability') &&
+                    (checked || can(capability.capability));
+                const mode = invocation(capability);
+                const toggle = h('input', {
+                    type: 'checkbox',
+                    checked,
+                    disabled: !authorized,
+                    'aria-label': `${checked ? '收回' : '授予'} ${capability.label}`,
+                    onchange: async () => {
+                        toggle.disabled = true;
+                        const updated = await run(() => api('POST', `/api/role/${role.id}/${toggle.checked ? 'grant-capability' : 'revoke-capability'}`, { capability: capability.capability }), toggle.checked ? '操作权限已授予' : '操作权限已收回');
+                        if (updated) {
+                            updateRole(updated);
+                            renderGroups();
+                        }
+                        else {
+                            toggle.checked = checked;
+                            toggle.disabled = !authorized;
+                        }
+                    },
+                });
+                const title = capability.aggregate
+                    ? capability.label.replaceAll(capability.aggregate, objectName(capability.aggregate))
+                    : capability.label;
+                const row = h('div', { class: `permission-row ${checked ? 'granted' : ''}` }, h('label', {
+                    class: 'permission-toggle',
+                    title: !authorized && !checked
+                        ? '你没有该权限，无法授予其他角色'
+                        : capability.kind === 'command'
+                            ? capability.description || title
+                            : title,
+                }, toggle, h('span', { class: 'checkbox-visual' }, icon('check')), h('span', { class: 'permission-copy' }, h('span', { class: 'permission-name' }, title), h('code', {}, capability.capability))), mode &&
+                    h('span', { class: 'invocation-badge', title: '配置此权限后，仍需通过对应流程或外部接口调用' }, mode));
+                if (checked &&
+                    (capability.capability.endsWith('.approve') ||
+                        granted.get(capability.capability)?.ceiling !== undefined)) {
+                    const ceiling = h('input', {
+                        type: 'number',
+                        min: 0,
+                        step: 'any',
+                        placeholder: '请设置额度',
+                        value: String(granted.get(capability.capability)?.ceiling ?? ''),
+                        required: true,
+                        disabled: !can('Role.grantCapability') || !can(capability.capability) || role.status !== 'active',
+                        'aria-label': `${title}额度上限`,
+                    });
+                    const save = h('button', { type: 'submit', class: 'small', disabled: ceiling.disabled }, '保存额度');
+                    row.append(h('form', {
+                        class: 'limit-form',
+                        onsubmit: async (event) => {
+                            event.preventDefault();
+                            const updated = await run(() => api('POST', `/api/role/${role.id}/grant-capability`, {
+                                capability: capability.capability,
+                                params: { ...granted.get(capability.capability), ceiling: Number(ceiling.value) },
+                            }), '额度已保存', save);
+                            if (updated) {
+                                updateRole(updated);
+                                renderGroups();
+                            }
+                        },
+                    }, h('span', {}, '额度上限'), ceiling, save));
+                }
+                return row;
+            }
+            renderGroups();
+        }
+        else {
+            body.append(h('div', { class: 'inline-info' }, icon('info'), '操作权限决定“可以做什么”，数据范围决定“可以看哪些记录”。未单独配置的对象沿用默认范围。'));
+            const scopeGrid = h('div', { class: 'scope-grid' });
+            for (const aggregate of [
+                { name: '*', label: '默认数据范围', scope: { ownerField: null, deptField: null } },
+                ...state.catalog.aggregates,
+            ])
+                scopeGrid.append(scopeCard(aggregate));
+            body.append(scopeGrid);
+        }
+        function scopeCard(aggregate) {
+            const current = role.scopes.find((scope) => scope.aggregate === aggregate.name);
+            const inherited = role.scopes.find((scope) => scope.aggregate === '*');
+            const editable = role.status === 'active' && can('Role.setScope');
+            const usable = state.catalog.combinators.filter((kind) => aggregate.name === '*' ||
+                kind === 'all' ||
+                (kind === 'self' ? aggregate.scope.ownerField : aggregate.scope.deptField));
+            const selected = new Set(current?.deptIds ?? []);
+            const departmentBox = h('div', { class: 'department-options' }, departmentResult.items.map((dept) => h('label', {}, h('input', {
+                type: 'checkbox',
+                checked: selected.has(dept.id),
+                disabled: !editable,
+                onchange: (event) => {
+                    event.currentTarget.checked
+                        ? selected.add(dept.id)
+                        : selected.delete(dept.id);
+                    dirty();
+                },
+            }), dept.name)));
+            if (!departmentResult.items.length)
+                departmentBox.append(h('p', { class: 'muted' }, can('Dept.read') ? '当前没有可选择的部门' : '需要查看部门权限才能调整部门清单，已有选择会保留。'));
+            const status = h('span', { class: 'save-state' }, '已保存');
+            const save = h('button', { class: 'small', type: 'submit', disabled: true }, '保存范围');
+            const description = h('p', { class: 'scope-description' });
+            const select = h('select', {
+                value: current?.combinator ?? '',
+                disabled: !editable,
+                'aria-label': `${aggregate.label}的数据范围`,
+                onchange: () => {
+                    updateDescription();
+                    dirty();
+                },
+            }, h('option', { value: '' }, aggregate.name === '*'
+                ? '未配置（按仅本人处理）'
+                : `沿用默认：${scopes[inherited?.combinator ?? 'self'].title}`), usable.map((kind) => h('option', { value: kind }, scopes[kind].title)));
+            function dirty() {
+                status.textContent = '尚未保存';
+                status.classList.add('pending');
+                save.disabled = !editable;
+            }
+            function updateDescription() {
+                const kind = select.value;
+                description.textContent = kind ? scopes[kind].hint : '由默认数据范围决定；默认未配置时按仅本人处理。';
+                const effective = kind || inherited?.combinator || 'self';
+                // 继承允许保留统一默认值，但不能把不适用的范围解释成“可查看本部门”。
+                // 这里只说明真实效果，不修改授权，也不替用户扩大到全部数据。
+                if (aggregate.name !== '*' && effective === 'self' && !aggregate.scope.ownerField)
+                    description.textContent += ' 此对象未设置本人归属，当前范围无法匹配记录。';
+                else if (aggregate.name !== '*' &&
+                    ['dept', 'deptSubtree', 'deptSet'].includes(effective) &&
+                    !aggregate.scope.deptField)
+                    description.textContent += ' 此对象未设置部门归属，当前范围无法匹配记录。';
+                departmentBox.hidden = kind !== 'deptSet';
+            }
+            updateDescription();
+            const form = h('form', {
+                class: `scope-card ${aggregate.name === '*' ? 'default-scope' : ''}`,
+                onsubmit: async (event) => {
+                    event.preventDefault();
+                    const updated = await run(() => api('POST', `/api/role/${role.id}/set-scope`, {
+                        aggregate: aggregate.name,
+                        combinator: select.value || null,
+                        ...(select.value === 'deptSet' ? { deptIds: [...selected] } : {}),
+                    }), '数据范围已保存', save);
+                    if (updated) {
+                        updateRole(updated);
+                        renderDetail();
+                    }
+                },
+            }, h('div', { class: 'scope-heading' }, h('div', {}, h('h3', {}, aggregate.name === '*' ? aggregate.label : objectName(aggregate.name)), h('code', {}, aggregate.name === '*' ? '适用于未单独配置的业务对象' : aggregate.name)), aggregate.name === '*' && badge('默认', 'green')), select, description, departmentBox, h('div', { class: 'scope-footer' }, status, save));
+            return form;
+        }
+    }
+    renderList();
+    renderDetail();
+}

package/ui/dist/modules/tasks/index.js

@@ -0,0 +1 @@
+export { renderTasks } from './tasks-page.js';

package/ui/dist/modules/tasks/tasks-page.js

@@ -0,0 +1,60 @@
+import { api, run, state } from '../../shared/api.js';
+import { badge, emptyState, formatTime, h, panel, table } from '../../shared/dom.js';
+import { objectName } from '../../shared/labels.js';
+import { navigate } from '../../shared/navigation.js';
+export async function renderTasks(main) {
+    const hasApprovals = state.catalog.approvals.length > 0;
+    if (!hasApprovals) {
+        main.append(panel('我的审批待办', undefined, emptyState('当前没有启用审批流程', '业务启用审批后，分配给你的任务会显示在这里。')));
+        return;
+    }
+    const tasks = await api('GET', '/api/approval/tasks');
+    if (!tasks.length) {
+        main.append(panel('我的审批待办', undefined, emptyState('待办已处理完毕', '新的审批任务分配给你后，会显示在这里。')));
+        return;
+    }
+    main.append(panel('等待你处理', `共 ${tasks.length} 项待办。审批结论会继续执行业务权限与规则校验。`, table([
+        [
+            '审批事项',
+            (task) => h('div', { class: 'stack-cell' }, h('strong', {}, task.title), h('small', {}, state.catalog.approvals.find((item) => item.process === task.process)?.label || '业务审批')),
+        ],
+        [
+            '关联单据',
+            (task) => h('div', { class: 'stack-cell' }, badge(objectName(task.aggregate)), h('code', {}, task.businessKey.slice(0, 8))),
+        ],
+        ['提交时间', (task) => formatTime(task.createdAt)],
+        [
+            '流程信息',
+            (task) => h('details', {}, h('summary', {}, '查看详情'), h('pre', {}, JSON.stringify(task.vars, null, 2))),
+        ],
+        [
+            '处理意见与操作',
+            (task) => {
+                const comment = h('input', {
+                    placeholder: '填写审批意见（可选）',
+                    'aria-label': `${task.title}审批意见`,
+                });
+                const actions = h('div', { class: 'row-actions' });
+                const submit = async (action, button) => {
+                    // 一项待办的两个结论互斥，发送期间同时禁用，避免界面重复提交相反结论。
+                    for (const item of actions.querySelectorAll('button'))
+                        item.disabled = true;
+                    const result = await run(() => api('POST', `/api/approval/tasks/${task.id}/${action}`, { comment: comment.value }), action === 'approve' ? '已通过审批' : '已驳回', button);
+                    if (result)
+                        navigate('tasks');
+                    else
+                        for (const item of actions.querySelectorAll('button'))
+                            item.disabled = false;
+                };
+                actions.append(h('button', {
+                    class: 'small',
+                    onclick: (event) => submit('reject', event.currentTarget),
+                }, '驳回'), h('button', {
+                    class: 'small primary',
+                    onclick: (event) => submit('approve', event.currentTarget),
+                }, '通过审批'));
+                return h('div', { class: 'task-actions' }, comment, actions);
+            },
+        ],
+    ], tasks)));
+}

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

@@ -0,0 +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>
+    <div id="notifications" aria-live="polite"></div>
+    <script type="module" src="./dist/app.js"></script>
+  </body>
+</html>