@yss123/cage-admin 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yss123/cage-admin",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "组织模型声明与 /admin 系统管理",
   "type": "module",
   "main": "dist/index.js",
@@ -17,13 +17,15 @@
   },
   "files": [
     "dist",
-    "ui"
+    "ui/index.html",
+    "ui/style.css",
+    "ui/dist"
   ],
   "dependencies": {
     "fastify": "^5.6.0",
     "zod": "^4.1.5",
     "kysely": "^0.28.5",
-    "@yss123/cage-kernel": "0.1.0"
+    "@yss123/cage-kernel": "0.2.0"
   },
   "license": "MIT",
   "repository": {
@@ -43,7 +45,8 @@
     "node": ">=24"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json --noEmit"
+    "build": "tsc -p tsconfig.json && tsc -p ui/tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p ui/tsconfig.json --noEmit",
+    "test": "vitest run"
   }
 }

package/ui/dist/app/shell.js

@@ -0,0 +1,110 @@
+import { api, can, run, state } from '../shared/api.js';
+import { emptyState, h, icon, panel } from '../shared/dom.js';
+import { navigate } from '../shared/navigation.js';
+import { renderTasks } from '../modules/tasks/index.js';
+import { renderOrg } from '../modules/org/index.js';
+import { renderRoles } from '../modules/roles/index.js';
+import { renderAudit } from '../modules/audit/index.js';
+import { renderOperations, renderSync } from '../modules/operations/index.js';
+import { loginPage } from '../modules/auth/index.js';
+const pages = {
+    tasks: {
+        title: '我的待办',
+        description: '集中处理分配给你的审批任务，让每一步协作及时推进。',
+        glyph: 'inbox',
+        category: '团队与权限',
+        render: renderTasks,
+        need: [],
+    },
+    org: {
+        title: '用户与部门',
+        description: '管理团队成员、组织关系与部门负责人。',
+        glyph: 'users',
+        category: '团队与权限',
+        render: renderOrg,
+        need: ['User.read', 'Dept.read'],
+    },
+    roles: {
+        title: '角色与授权',
+        description: '用清晰的职责边界，配置每个角色可以做什么、可以看什么。',
+        glyph: 'shield',
+        category: '团队与权限',
+        render: renderRoles,
+        need: ['Role.read'],
+    },
+    audit: {
+        title: '操作审计',
+        description: '业务操作有据可查，重要变更全程留痕。',
+        glyph: 'file',
+        category: '运行与记录',
+        render: renderAudit,
+        need: ['Sys.audit.read'],
+    },
+    ops: {
+        title: '异步任务',
+        description: '查看事件投递、处理失败事件，管理业务定时任务。',
+        glyph: 'clock',
+        category: '运行与记录',
+        render: renderOperations,
+        need: ['Sys.ops.read'],
+    },
+    sync: {
+        title: '第三方同步',
+        description: '追踪业务与外部系统之间的每一次同步。',
+        glyph: 'link',
+        category: '运行与记录',
+        render: renderSync,
+        need: ['Sys.ops.read'],
+    },
+};
+/** 应用组合层只负责导航、会话和页面加载；各管理模块维护自己的表单和请求。 */
+export async function render(boot) {
+    const root = document.getElementById('app');
+    if (!state.me) {
+        root.replaceChildren(loginPage(boot));
+        return;
+    }
+    const hash = location.hash.replace(/^#\/?/, '') || 'tasks';
+    const key = (hash in pages ? hash : 'tasks');
+    const page = pages[key];
+    const visible = Object.entries(pages).filter(([, item]) => !item.need.length || item.need.some(can));
+    const sidebar = h('aside', { class: 'app-sidebar' }, h('a', { class: 'brand', href: '#/tasks', 'aria-label': 'Cage 系统管理首页' }, h('span', { class: 'brand-mark' }, icon('grid')), h('span', {}, 'Cage', h('small', {}, '系统管理'))), ...['团队与权限', '运行与记录'].map((category) => h('div', { class: 'nav-group' }, h('p', { class: 'nav-caption' }, category), h('nav', { 'aria-label': category }, visible
+        .filter(([, item]) => item.category === category)
+        .map(([name, item]) => h('a', {
+        href: `#/${name}`,
+        class: `nav-item ${key === name ? 'active' : ''}`,
+        'aria-current': key === name ? 'page' : undefined,
+    }, icon(item.glyph), h('span', {}, item.title), key === name && h('i', { class: 'nav-active-dot' })))))), h('div', { class: 'sidebar-bottom' }, h('div', { class: 'workspace-label' }, h('span', { class: 'connection-dot' }), '团队管理工作空间'), h('a', { href: '/', class: 'back-to-business' }, icon('arrow'), '返回业务首页')));
+    const logout = h('button', {
+        class: 'icon-button',
+        'aria-label': '退出登录',
+        title: '退出登录',
+        onclick: async () => {
+            if (await run(() => api('POST', '/auth/logout'), undefined, logout)) {
+                state.me = null;
+                state.catalog = null;
+                state.csrf = null;
+                void render(boot);
+            }
+        },
+    }, icon('logout'));
+    const content = h('div', { class: 'page-content' });
+    const loading = h('div', { class: 'loading-panel', role: 'status' }, h('span', { class: 'spinner' }), '正在读取管理数据…');
+    content.append(loading);
+    const main = h('main', { class: 'app-main' }, h('header', { class: 'app-topbar' }, h('div', { class: 'breadcrumb' }, h('span', {}, '工作空间'), icon('chevron'), h('span', {}, '系统管理'), icon('chevron'), h('strong', {}, page.title)), h('div', { class: 'account' }, h('span', { class: 'avatar' }, state.me.user.name.slice(0, 1)), h('span', { class: 'account-copy' }, h('strong', {}, state.me.user.name), h('small', {}, '当前登录')), logout)), h('div', { class: 'page-container' }, h('div', { class: 'page-heading' }, h('div', {}, h('span', { class: 'eyebrow' }, '管理工作台'), h('h1', {}, page.title), h('p', {}, page.description)), h('button', { class: 'refresh-button', onclick: () => navigate(key) }, icon('refresh'), '刷新数据')), content, h('footer', { class: 'page-footer' }, h('span', {}, 'Cage · 让业务有序发生'), h('span', {}, icon('shield'), '操作受角色权限与数据范围约束'))));
+    root.replaceChildren(h('div', { class: 'admin-shell' }, sidebar, main));
+    if (page.need.length && !page.need.some(can)) {
+        loading.remove();
+        content.append(panel('访问受限', undefined, emptyState('你没有查看此页面的权限', '请联系管理员，按职责配置所需角色。', 'lock')));
+        return;
+    }
+    try {
+        await page.render(content);
+    }
+    catch (error) {
+        content.append(h('div', { class: 'error-panel', role: 'alert' }, icon('info'), h('div', {}, h('strong', {}, '暂时无法读取数据'), h('p', {}, error instanceof TypeError ? '请检查网络与 API 服务后重新尝试。' : error.message)), h('button', { onclick: () => navigate(key) }, '重新加载')));
+    }
+    finally {
+        loading.remove();
+    }
+}

package/ui/dist/app.js

@@ -0,0 +1,24 @@
+import { api, ApiError, state } from './shared/api.js';
+import { h, icon } from './shared/dom.js';
+import { render } from './app/shell.js';
+/** 浏览器入口恢复真实会话与展示目录，不包含具体页面、表单或授权逻辑。 */
+async function boot() {
+    try {
+        state.me = await api('GET', '/api/me');
+        state.catalog = await api('GET', '/api/sys/catalog');
+        await render(boot);
+    }
+    catch (error) {
+        if (error instanceof ApiError && error.code === 'UNAUTHENTICATED') {
+            await render(boot);
+            return;
+        }
+        document
+            .getElementById('app')
+            .replaceChildren(h('main', { class: 'connection-state' }, h('span', { class: 'brand-mark' }, icon('grid')), h('h1', {}, '暂时无法连接工作空间'), h('p', {}, '请检查网络与 API 服务，然后重新尝试。'), h('button', { class: 'primary', onclick: boot }, '重新连接')));
+    }
+}
+window.addEventListener('hashchange', () => void render(boot));
+window.addEventListener('cage:refresh', () => void render(boot));
+window.addEventListener('cage:session-expired', () => void render(boot));
+void boot();

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

@@ -0,0 +1,95 @@
+import { api, run, state } from '../../shared/api.js';
+import { badge, field, formatTime, h, panel, table } from '../../shared/dom.js';
+import { capabilityName, objectName } from '../../shared/labels.js';
+const kinds = {
+    write: '业务写入',
+    read: '数据读取',
+    denied: '拒绝访问',
+    ops: '运维操作',
+};
+const actors = {
+    user: '用户',
+    process: '审批流程',
+    external: '外部系统',
+    job: '定时任务',
+    system: '系统',
+};
+export async function renderAudit(main) {
+    const actor = h('input', { placeholder: '操作人的用户 ID' });
+    const aggregate = h('select', {}, h('option', { value: '' }, '全部业务对象'), state.catalog.aggregates.map((item) => h('option', { value: item.name }, item.label)));
+    const aggregateId = h('input', { placeholder: '完整单据 ID' });
+    const command = h('input', { placeholder: '例如 PurchaseOrder.approve' });
+    const kind = h('select', {}, h('option', { value: '' }, '全部操作类型'), Object.entries(kinds).map(([value, label]) => h('option', { value }, label)));
+    const fields = { actor, aggregate, aggregateId, command, kind };
+    const out = h('div');
+    const search = h('button', { type: 'submit', class: 'primary' }, '查询记录');
+    const previous = h('button', {
+        class: 'small',
+        onclick: () => {
+            page--;
+            void load();
+        },
+    }, '上一页');
+    const next = h('button', {
+        class: 'small',
+        onclick: () => {
+            page++;
+            void load();
+        },
+    }, '下一页');
+    const pageText = h('span', { class: 'muted' });
+    let page = 1;
+    main.append(panel('审计记录', '查询谁在什么时间操作了哪些数据，以及操作是否成功。', h('form', {
+        class: 'audit-filters',
+        onsubmit: (event) => {
+            event.preventDefault();
+            page = 1;
+            void load();
+        },
+    }, field('业务对象', aggregate), field('操作类型', kind), field('操作人', actor), field('单据编号', aggregateId), field('操作标识', command), search), out, h('div', { class: 'pagination' }, pageText, h('div', { class: 'row-actions' }, previous, next))));
+    async function load() {
+        const params = new URLSearchParams(Object.entries(fields)
+            .filter(([, input]) => input.value)
+            .map(([key, input]) => [key, input.value]));
+        params.set('page', String(page));
+        params.set('pageSize', '50');
+        const result = await run(() => api('GET', `/api/sys/audit?${params}`), undefined, search);
+        if (!result)
+            return;
+        out.replaceChildren(table([
+            ['发生时间', (item) => formatTime(item.at)],
+            [
+                '操作类型',
+                (item) => badge(kinds[item.kind] || '系统记录', item.kind === 'denied' ? 'red' : 'neutral'),
+            ],
+            [
+                '操作主体',
+                (item) => h('div', { class: 'stack-cell' }, h('strong', {}, actors[item.actor_kind] || '系统主体'), h('code', { title: item.actor }, item.actor.slice(0, 12)), item.on_behalf_of && h('small', {}, `代表用户 ${item.on_behalf_of.slice(0, 8)}`)),
+            ],
+            [
+                '执行操作',
+                (item) => h('div', { class: 'stack-cell' }, h('strong', {}, capabilityName(item.command || item.capability || '')), h('code', {}, item.command || item.capability || item.source)),
+            ],
+            [
+                '关联对象',
+                (item) => item.aggregate
+                    ? h('div', { class: 'stack-cell' }, h('span', {}, objectName(item.aggregate)), h('code', { title: item.aggregate_id }, item.aggregate_id?.slice(0, 12) || '—'))
+                    : '—',
+            ],
+            [
+                '结果',
+                (item) => badge(item.result === 'ok' ? '成功' : '未成功', item.result === 'ok' ? 'green' : 'red'),
+            ],
+            [
+                '变更详情',
+                (item) => item.diff
+                    ? h('details', {}, h('summary', {}, '查看变更'), h('pre', {}, JSON.stringify(item.diff, null, 2)))
+                    : h('span', { class: 'muted' }, '无字段变更'),
+            ],
+        ], result.items));
+        pageText.textContent = `第 ${page} 页 · 本页 ${result.items.length} 条，每页最多 50 条`;
+        previous.disabled = page === 1;
+        next.disabled = result.items.length < 50;
+    }
+    await load();
+}

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

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

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

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

package/ui/dist/modules/auth/login-page.js

@@ -0,0 +1,30 @@
+import { api, run, state } from '../../shared/api.js';
+import { field, h, icon } from '../../shared/dom.js';
+export function loginPage(onLogin) {
+    const username = h('input', {
+        name: 'username',
+        placeholder: '请输入登录账号',
+        autocomplete: 'username',
+        required: true,
+    });
+    const password = h('input', {
+        name: 'password',
+        type: 'password',
+        placeholder: '请输入密码',
+        autocomplete: 'current-password',
+        required: true,
+    });
+    const submit = h('button', { class: 'primary', type: 'submit' }, '登录系统管理', icon('arrow'));
+    const form = h('form', {
+        class: 'stack-form',
+        onsubmit: async (event) => {
+            event.preventDefault();
+            const result = await run(() => api('POST', '/auth/login', { username: username.value, password: password.value }), undefined, submit);
+            if (result) {
+                state.csrf = null;
+                await onLogin();
+            }
+        },
+    }, field('登录账号', username), field('密码', password), submit);
+    return h('main', { class: 'login-layout' }, h('section', { class: 'login-story' }, h('div', { class: 'login-brand' }, h('span', { class: 'brand-mark' }, icon('grid')), 'Cage'), h('div', {}, h('span', { class: 'eyebrow' }, '系统管理工作台'), h('h1', {}, '让协作有序，', h('br'), '让权限清晰。'), h('p', {}, '从团队与角色，到流程与运行记录。', h('br'), '在一个工作空间里，管理业务的基础。')), h('small', {}, '团队协作 · 权限管理 · 运行追踪')), h('section', { class: 'login-panel' }, h('span', { class: 'eyebrow' }, '欢迎回来'), h('h2', {}, '登录你的工作空间'), h('p', { class: 'muted' }, '使用管理员为你配置的账号继续。'), form, h('a', { class: 'sso-link', href: '/auth/sso' }, '使用企业单点登录', icon('arrow')), h('p', { class: 'login-footnote' }, icon('lock'), '使用安全会话连接，操作受权限与数据范围约束。')));
+}

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

@@ -0,0 +1,2 @@
+export { renderOperations } from './operations-page.js';
+export { renderSync } from './sync-page.js';

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

@@ -0,0 +1,95 @@
+import { api, can, run } from '../../shared/api.js';
+import { badge, field, formatTime, h, icon, modal, panel, table } from '../../shared/dom.js';
+import { capabilityName, eventName, jobName, statusName } from '../../shared/labels.js';
+import { navigate } from '../../shared/navigation.js';
+export async function renderOperations(main) {
+    const [summary, dead, jobs] = await Promise.all([
+        api('GET', '/api/sys/ops/summary'),
+        api('GET', '/api/sys/ops/dead-letters'),
+        api('GET', '/api/sys/ops/jobs'),
+    ]);
+    const manageable = can('Sys.ops.manage');
+    main.append(h('div', { class: 'stats-row' }, stat('待投递事件', summary.outbox.reduce((sum, item) => sum + item.n, 0), 'inbox'), stat('待处理死信', summary.deadLetters, 'info', summary.deadLetters > 0), stat('运行中定时任务', jobs.filter((job) => job.enabled).length, 'clock')));
+    main.append(panel('事件投递队列', '事件由后台 worker 按顺序投递，失败后自动退避重试。', table([
+        [
+            '处理状态',
+            (item) => badge(statusName(item.status), item.status === 'pending' ? 'amber' : 'neutral'),
+        ],
+        ['事件数量', (item) => h('strong', {}, item.n)],
+        ['最早进入时间', (item) => formatTime(item.oldest)],
+    ], summary.outbox, '投递队列已清空，没有积压事件')));
+    main.append(panel('需要处理的死信', '请先排查失败原因再重放。同一单据的后续事件会等待这条事件处理完成。', table([
+        [
+            '业务事件',
+            (item) => h('div', { class: 'stack-cell' }, h('strong', {}, eventName(item.event)), h('code', {}, item.event)),
+        ],
+        ['关联单据', (item) => h('code', { title: item.aggregate_id }, item.aggregate_id.slice(0, 12))],
+        ['尝试次数', (item) => badge(`${item.attempts} 次`, 'amber')],
+        [
+            '失败原因',
+            (item) => h('details', {}, h('summary', { class: 'failure-summary' }, (item.error || '无错误说明').slice(0, 65)), h('pre', {}, item.error || '无错误说明')),
+        ],
+        ['进入时间', (item) => formatTime(item.created_at)],
+        [
+            '处理',
+            (item) => manageable
+                ? h('div', { class: 'row-actions' }, h('button', {
+                    class: 'small primary',
+                    onclick: async (event) => {
+                        if (await run(() => api('POST', `/api/sys/ops/dead-letters/${item.id}/replay`), '事件已重新进入投递队列', event.currentTarget))
+                            navigate('ops');
+                    },
+                }, '重新投递'), h('button', { class: 'small danger', onclick: () => discard(item) }, '丢弃'))
+                : h('span', { class: 'muted' }, '仅查看'),
+        ],
+    ], dead, '当前没有待处理的死信')));
+    main.append(panel('定时任务', '按业务声明的时间执行；停用后不会继续触发新的调度。', table([
+        [
+            '任务名称',
+            (job) => h('div', { class: 'stack-cell' }, h('strong', {}, jobName(job.name)), h('code', {}, job.name)),
+        ],
+        ['执行计划', (job) => h('code', {}, job.cron)],
+        [
+            '业务操作',
+            (job) => h('div', { class: 'tag-list' }, job.calls.map((name) => badge(capabilityName(name)))),
+        ],
+        [
+            '上次运行',
+            (job) => h('div', { class: 'stack-cell' }, formatTime(job.lastRunAt), job.lastStatus &&
+                badge(statusName(job.lastStatus), job.lastStatus === 'ok' ? 'green' : 'amber')),
+        ],
+        [
+            '下次计划',
+            (job) => (job.enabled ? formatTime(job.nextRunAt) : h('span', { class: 'muted' }, '已暂停调度')),
+        ],
+        [
+            '状态与操作',
+            (job) => h('div', { class: 'row-actions' }, badge(job.enabled ? '运行中' : '已停用', job.enabled ? 'green' : 'neutral'), manageable &&
+                h('button', {
+                    class: 'small',
+                    onclick: async (event) => {
+                        if (await run(() => api('POST', `/api/sys/ops/jobs/${encodeURIComponent(job.name)}/${job.enabled ? 'disable' : 'enable'}`), '定时任务状态已更新', event.currentTarget))
+                            navigate('ops');
+                    },
+                }, job.enabled ? '停用' : '启用')),
+        ],
+    ], jobs, '当前业务没有声明定时任务')));
+    function discard(item) {
+        const confirm = h('input', { type: 'checkbox', required: true });
+        const save = h('button', { class: 'danger', type: 'submit' }, '确认丢弃事件');
+        const form = h('form', {
+            class: 'stack-form',
+            onsubmit: async (event) => {
+                event.preventDefault();
+                if (await run(() => api('POST', `/api/sys/ops/dead-letters/${item.id}/discard`), '事件已丢弃', save)) {
+                    dialog.close();
+                    navigate('ops');
+                }
+            },
+        }, h('p', {}, '丢弃后，这条事件将不再重试。请确认业务补偿或人工处理已经完成。'), field('我已了解此操作会停止该事件的后续处理', confirm), h('div', { class: 'form-actions' }, save));
+        const dialog = modal('丢弃死信事件', form);
+    }
+}
+function stat(label, value, glyph, warning = false) {
+    return h('div', { class: `stat-card ${warning ? 'attention' : ''}` }, h('span', { class: 'stat-icon' }, icon(glyph)), h('div', {}, h('span', {}, label), h('strong', {}, value)));
+}

package/ui/dist/modules/operations/sync-page.js

@@ -0,0 +1,48 @@
+import { api, run, state } from '../../shared/api.js';
+import { badge, field, formatTime, h, panel, table } from '../../shared/dom.js';
+export async function renderSync(main) {
+    const connector = h('input', { placeholder: '连接器标识，留空查看全部' });
+    const status = h('select', {}, h('option', { value: '' }, '全部结果'), h('option', { value: 'ok' }, '同步成功'), h('option', { value: 'failed' }, '同步失败'));
+    const query = h('button', { class: 'primary', type: 'submit' }, '查询记录');
+    const out = h('div');
+    main.append(panel('外部系统同步记录', '查看出站请求的结果、重试次数与失败原因，辅助第三方联调与排障。', h('form', {
+        class: 'sync-filters',
+        onsubmit: (event) => {
+            event.preventDefault();
+            void load();
+        },
+    }, field('连接器', connector), field('同步结果', status), query), out));
+    async function load() {
+        const params = new URLSearchParams();
+        if (connector.value)
+            params.set('connector', connector.value);
+        if (status.value)
+            params.set('status', status.value);
+        const result = await run(() => api('GET', `/api/sys/ops/sync-records?${params}`), undefined, query);
+        if (!result)
+            return;
+        out.replaceChildren(table([
+            [
+                '连接器 / 操作',
+                (item) => h('div', { class: 'stack-cell' }, h('strong', {}, state.catalog.labels[`connector:connector:${item.connector}`] ||
+                    state.catalog.labels[`connector:${item.connector}`] ||
+                    '外部系统连接器'), h('code', {}, `${item.connector}.${item.operation}`)),
+            ],
+            ['业务单据', (item) => h('code', {}, item.ref_id || '—')],
+            [
+                '同步结果',
+                (item) => badge(item.status === 'ok' ? '同步成功' : '同步失败', item.status === 'ok' ? 'green' : 'red'),
+            ],
+            ['响应状态', (item) => item.http_status ?? '未收到响应'],
+            ['尝试次数', (item) => `${item.attempts} 次`],
+            [
+                '错误详情',
+                (item) => item.error
+                    ? h('details', {}, h('summary', {}, '查看原因'), h('pre', {}, item.error))
+                    : h('span', { class: 'muted' }, '—'),
+            ],
+            ['最近更新', (item) => formatTime(item.updated_at)],
+        ], result, '暂无符合条件的同步记录'));
+    }
+    await load();
+}

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

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