@yss123/cage-admin 0.1.0 → 0.3.0

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

@@ -0,0 +1,243 @@
+/**
+ * 组织管理页面：按读取能力分别加载部门、用户与角色，再提供受能力控制的组织命令入口。
+ * 部门负责人用于审批选人，角色用于授权，两种配置独立维护；页面显示只反映当前取回的分页数据。
+ */
+import { api, can, run } from '../../shared/api.js';
+import { badge, field, h, icon, modal, panel, searchInput, table } from '../../shared/dom.js';
+import { navigate } from '../../shared/navigation.js';
+/** 组织编辑继续走生成命令；负责人和角色是两份配置，在界面上明确区分。 */
+/**
+ * 并行读取最多一页组织数据，缺读取能力的集合按空列表处理，后端继续约束实际范围。
+ * 部门用 ancestors 深度显示层级；用户列表支持本地搜索，写入通过生成的领域路由，成功后刷新管理页面。
+ */
+export async function renderOrg(main) {
+    const [departments, people, roleResult] = await Promise.all([
+        can('Dept.read')
+            ? api('GET', '/api/dept?pageSize=200&sort=createdAt')
+            : Promise.resolve({ items: [], total: 0 }),
+        can('User.read')
+            ? api('GET', '/api/user?pageSize=200&status=active,disabled')
+            : Promise.resolve({ items: [], total: 0 }),
+        can('Role.read')
+            ? api('GET', '/api/role?pageSize=200')
+            : Promise.resolve({ items: [] }),
+    ]);
+    const depts = departments.items, users = people.items, roles = roleResult.items;
+    const departmentName = new Map(depts.map((dept) => [dept.id, dept.name]));
+    const userName = new Map(users.map((user) => [user.id, `${user.name}（${user.username}）`]));
+    const roleName = new Map(roles.map((role) => [role.id, role.name]));
+    const depth = (dept) => Math.max(0, dept.ancestors.split('/').filter(Boolean).length - 1);
+    const selectDepartment = (value) => h('select', { ...(value ? { value } : {}) }, depts.map((dept) => h('option', { value: dept.id }, `${'　'.repeat(depth(dept))}${dept.name}`)));
+    main.append(h('div', { class: 'stats-row' }, stat('部门', departments.total, 'grid'), stat('用户', people.total, 'users'), stat('当前列表已启用', users.filter((user) => user.status === 'active').length, 'check')));
+    const deptPanel = panel('部门与负责人', '部门负责人用于审批选人；给用户分配经理角色后，仍需在这里指定负责人。');
+    const departmentActions = h('div', { class: 'section-actions' });
+    if (can('Dept.create') && depts.length)
+        departmentActions.append(h('button', { class: 'small', onclick: createDepartment }, icon('plus'), '新建部门'));
+    deptPanel.querySelector('.panel-heading').append(departmentActions);
+    deptPanel.append(table([
+        [
+            '部门名称',
+            (dept) => h('div', { class: 'entity-cell', style: `padding-left:${depth(dept) * 20}px` }, h('span', { class: 'entity-icon' }, icon('grid')), h('strong', {}, dept.name)),
+        ],
+        ['部门编码', (dept) => h('code', { class: 'muted' }, dept.code || '—')],
+        [
+            '部门负责人',
+            (dept) => {
+                if (!can('Dept.update') || !can('User.read'))
+                    return userName.get(dept.leaderId ?? '') || '未设置';
+                const select = h('select', {
+                    value: dept.leaderId ?? '',
+                    'aria-label': `${dept.name}负责人`,
+                    onchange: async () => {
+                        select.disabled = true;
+                        const updated = await run(() => api('POST', `/api/dept/${dept.id}/update`, { leaderId: select.value || null }), '部门负责人已保存');
+                        if (updated)
+                            dept.leaderId = updated.leaderId;
+                        else
+                            select.value = dept.leaderId ?? '';
+                        select.disabled = false;
+                    },
+                }, h('option', { value: '' }, '请选择负责人'), users
+                    .filter((user) => user.status === 'active')
+                    .map((user) => h('option', { value: user.id }, userName.get(user.id))));
+                return select;
+            },
+        ],
+        [
+            '状态',
+            (dept) => badge(dept.status === 'active' ? '已启用' : '已停用', dept.status === 'active' ? 'green' : 'neutral'),
+        ],
+    ], depts));
+    if (can('Dept.read'))
+        main.append(deptPanel);
+    if (can('User.read')) {
+        const out = h('div');
+        let query = '';
+        const toolbar = h('div', { class: 'table-toolbar' }, searchInput('搜索姓名、账号或部门', (value) => {
+            query = value.toLowerCase();
+            renderUsers();
+        }));
+        if (can('User.create'))
+            toolbar.append(h('button', { class: 'primary', disabled: !depts.length, onclick: createUser }, icon('plus'), '新建用户'));
+        const userPanel = panel('用户与角色', '通过角色分配操作权限；账号停用后将无法继续访问系统。', toolbar, out);
+        main.append(userPanel);
+        /**
+         * 按当前本地搜索条件重画已加载用户，并根据命令能力展示角色、密码、启停操作。
+         * 过滤范围限于当前返回的数据，不执行服务器全量搜索。
+         */
+        function renderUsers() {
+            const visible = users.filter((user) => `${user.name} ${user.username} ${departmentName.get(user.deptId) ?? ''}`
+                .toLowerCase()
+                .includes(query));
+            out.replaceChildren(table([
+                [
+                    '用户',
+                    (user) => h('div', { class: 'person-cell' }, h('span', { class: 'person-avatar' }, user.name.slice(0, 1)), h('div', {}, h('strong', {}, user.name), h('small', {}, user.username))),
+                ],
+                ['所属部门', (user) => departmentName.get(user.deptId) || '未获取部门名称'],
+                [
+                    '拥有角色',
+                    (user) => h('div', { class: 'tag-list' }, user.roleIds.length
+                        ? user.roleIds.map((id) => badge(roleName.get(id) || '未获取角色名称'))
+                        : h('span', { class: 'muted' }, '尚未分配'), can('User.assignRoles') && can('Role.read') && user.status === 'active'
+                        ? h('button', { class: 'text-button', onclick: () => assignRoles(user) }, '配置')
+                        : null),
+                ],
+                [
+                    '状态',
+                    (user) => badge(user.status === 'active' ? '已启用' : '已停用', user.status === 'active' ? 'green' : 'neutral'),
+                ],
+                [
+                    '账号操作',
+                    (user) => h('div', { class: 'row-actions' }, can('User.setPassword') && user.status === 'active'
+                        ? h('button', { class: 'text-button', onclick: () => resetPassword(user) }, '重置密码')
+                        : null, user.status === 'active' && can('User.disable')
+                        ? h('button', {
+                            class: 'text-button danger',
+                            onclick: async (event) => {
+                                if (await run(() => api('POST', `/api/user/${user.id}/disable`), '账号已停用', event.currentTarget))
+                                    navigate('org');
+                            },
+                        }, '停用')
+                        : null, user.status === 'disabled' && can('User.enable')
+                        ? h('button', {
+                            class: 'text-button',
+                            onclick: async (event) => {
+                                if (await run(() => api('POST', `/api/user/${user.id}/enable`), '账号已启用', event.currentTarget))
+                                    navigate('org');
+                            },
+                        }, '启用')
+                        : null),
+                ],
+            ], visible));
+        }
+        renderUsers();
+    }
+    if (people.total > users.length || departments.total > depts.length)
+        main.append(h('p', { class: 'muted' }, '当前仅展示前 200 条可见组织记录；超出部分请通过业务组织接口查询。'));
+    /**
+     * 打开新建部门表单，通过 Dept.create 传入父部门与资料；成功关闭弹窗并重载组织页。
+     */
+    function createDepartment() {
+        const name = h('input', { required: true, maxlength: 100, placeholder: '例如：采购部' });
+        const parent = selectDepartment();
+        const save = h('button', { type: 'submit', class: 'primary' }, '创建部门');
+        const form = h('form', {
+            class: 'stack-form',
+            onsubmit: async (event) => {
+                event.preventDefault();
+                if (await run(() => api('POST', '/api/dept/create', { name: name.value, parentId: parent.value }), '部门已创建', save)) {
+                    dialog.close();
+                    navigate('org');
+                }
+            },
+        }, field('部门名称', name), field('上级部门', parent), h('div', { class: 'form-actions' }, save));
+        const dialog = modal('新建部门', form);
+        name.focus();
+    }
+    /**
+     * 收集用户名、姓名及部门并调用用户创建命令；成功后刷新组织页，密码和角色需通过独立操作配置。
+     * 页面成功动作基于实际请求结果，不通过直接写表配置账号。
+     */
+    function createUser() {
+        const username = h('input', { required: true, placeholder: '用于登录的账号', autocomplete: 'off' });
+        const name = h('input', { required: true, placeholder: '用户真实姓名' });
+        const department = selectDepartment();
+        const save = h('button', { type: 'submit', class: 'primary' }, '创建用户');
+        const form = h('form', {
+            class: 'stack-form',
+            onsubmit: async (event) => {
+                event.preventDefault();
+                if (await run(() => api('POST', '/api/user/create', {
+                    username: username.value,
+                    name: name.value,
+                    deptId: department.value,
+                }), '用户已创建，请设置密码并分配角色', save)) {
+                    dialog.close();
+                    navigate('org');
+                }
+            },
+        }, field('登录账号', username), field('用户姓名', name), field('所属部门', department), h('p', { class: 'inline-info' }, icon('info'), '新用户默认没有角色。创建后请设置登录密码，并按职责配置角色。'), h('div', { class: 'form-actions' }, save));
+        const dialog = modal('新建用户', form);
+        username.focus();
+    }
+    /**
+     * 编辑所选用户的完整角色 ID 集合，已有选择作为初值，保存走 User.assignRoles。
+     * 界面提示不能代替服务端防提权和角色有效性检查，成功后才关闭并刷新。
+     */
+    function assignRoles(user) {
+        const selected = new Set(user.roleIds);
+        const save = h('button', { class: 'primary', type: 'submit' }, '保存角色');
+        const form = h('form', {
+            class: 'stack-form',
+            onsubmit: async (event) => {
+                event.preventDefault();
+                if (await run(() => api('POST', `/api/user/${user.id}/assign-roles`, { roleIds: [...selected] }), '用户角色已保存', save)) {
+                    dialog.close();
+                    navigate('org');
+                }
+            },
+        }, h('p', { class: 'muted' }, `为 ${user.name} 选择角色，多个角色的有效权限会共同生效。`), h('div', { class: 'choice-list' }, roles
+            .filter((role) => role.status === 'active')
+            .map((role) => h('label', {}, h('input', {
+            type: 'checkbox',
+            checked: selected.has(role.id),
+            onchange: (event) => {
+                event.currentTarget.checked
+                    ? selected.add(role.id)
+                    : selected.delete(role.id);
+            },
+        }), h('span', {}, h('strong', {}, role.name), h('small', {}, role.code))))), h('div', { class: 'form-actions' }, save));
+        const dialog = modal('配置用户角色', form);
+    }
+    /**
+     * 为指定用户打开密码重置表单，提交到独立 set-password 命令。
+     * 密码仅保留在表单和请求中；输入校验/授权由服务端再次执行，不影响角色分配。
+     */
+    function resetPassword(user) {
+        const password = h('input', {
+            type: 'password',
+            minlength: 8,
+            required: true,
+            autocomplete: 'new-password',
+            placeholder: '至少 8 位',
+        });
+        const save = h('button', { type: 'submit', class: 'primary' }, '保存新密码');
+        const form = h('form', {
+            class: 'stack-form',
+            onsubmit: async (event) => {
+                event.preventDefault();
+                if (await run(() => api('POST', `/api/user/${user.id}/set-password`, { password: password.value }), '密码已重置', save))
+                    dialog.close();
+            },
+        }, h('p', { class: 'muted' }, `正在为 ${user.name}（${user.username}）设置新密码。`), field('新密码', password), h('div', { class: 'form-actions' }, save));
+        const dialog = modal('重置登录密码', form);
+        password.focus();
+    }
+}
+/**
+ * 生成组织页的统计展示卡；value 由调用者传入，不能把本页条数误当服务器总数。
+ */
+function stat(label, value, glyph) {
+    return h('div', { class: 'stat-card' }, h('span', { class: 'stat-icon' }, icon(glyph)), h('div', {}, h('span', {}, label), h('strong', {}, value)));
+}

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

@@ -0,0 +1,5 @@
+/**
+ * 助理性格配置与试聊模块的公开入口。
+ * 应用壳通过这里组合页面，其他模块无需依赖内部表单实现；导出本身不发请求或执行管理操作。
+ */
+export { renderPersonalities } from './personalities-page.js';

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

@@ -0,0 +1,161 @@
+import { api, postEvents, run } from '../../shared/api.js';
+import { badge, field, h } from '../../shared/dom.js';
+/** 编辑器只提交框架协议；配置与试聊的权限、模型和持久化全部由 AI 运行时处理。 */
+/**
+ * 读取性格目录并装配默认选择、卡片、编辑器和试聊区。
+ * 保存期间冻结表单，成功才清草稿并替换服务端版本；失败保留输入，finally 恢复控件。
+ * 试聊逐段追加文本并在 done 时校准最终回复；断流和取消保留已收到内容并给出明确状态。
+ */
+export async function renderPersonalities(main) {
+    let catalog = await api('GET', '/api/ai/admin/personalities');
+    let selected = catalog.settings.defaultKey, saving = false, activePreview = null;
+    const drafts = new Map();
+    const grid = h('div', { class: 'persona-grid', 'aria-label': '性格列表' });
+    const editor = h('div', { class: 'persona-editor-area' });
+    const defaults = h('div', { class: 'persona-default' });
+    const current = () => drafts.get(selected) ?? catalog.items.find(p => p.key === selected);
+    /**
+     * 重建默认性格选择，只列已启用项；提交携带 settings.version，成功后更新目录和默认标记。
+     */
+    function drawDefault() {
+        const select = h('select', { 'aria-label': '默认性格', value: catalog.settings.defaultKey }, catalog.items.filter(p => p.enabled).map(p => h('option', { value: p.key }, `${p.avatar} ${p.label}`)));
+        const save = h('button', { onclick: async () => {
+                const result = await run(() => api('POST', '/api/ai/admin/assistant-settings', {
+                    version: catalog.settings.version, defaultKey: select.value,
+                }), '默认性格已更新', save);
+                if (result) {
+                    catalog.settings = result;
+                    drawCards();
+                    drawDefault();
+                }
+            } }, '设为默认');
+        defaults.replaceChildren(h('div', {}, h('strong', {}, '默认的相处方式'), h('p', {}, '跟随默认的会话，从下一条消息开始使用此性格。')), h('div', { class: 'persona-default-actions' }, select, save));
+    }
+    /**
+     * 合并已保存目录与新建草稿生成卡片；选择只改变本页编辑对象，保存期间禁止切换。
+     */
+    function drawCards() {
+        const all = new Map(catalog.items.map(p => [p.key, p]));
+        for (const [key, draft] of drafts)
+            if (!all.has(key))
+                all.set(key, draft);
+        grid.replaceChildren(...[...all.values()].map(profile => h('button', { class: `persona-card${selected === profile.key ? ' selected' : ''}`,
+            'aria-pressed': selected === profile.key, onclick: () => { if (saving)
+                return; selected = profile.key; drawCards(); drawEditor(); },
+        }, h('span', { class: 'persona-avatar', 'aria-hidden': 'true' }, profile.avatar), h('span', { class: 'persona-card-copy' }, h('strong', {}, profile.label), h('small', {}, profile.description)), h('span', { class: 'persona-card-tags' }, profile.key === catalog.settings.defaultKey ? badge('默认', 'green') : !profile.enabled ? badge('已停用') : badge(profile.builtin ? '预设' : '自定义')))));
+    }
+    /**
+     * 取消上一份预览，再依据当前草稿/目录构造编辑器。
+     * 表单 input 保存内存草稿；试聊使用当前未保存字段，保存与设默认是独立请求。
+     */
+    function drawEditor() {
+        activePreview?.abort();
+        activePreview = null;
+        let profile = current();
+        const label = h('input', { value: profile.label, required: true, maxlength: 40 });
+        const avatar = h('input', { value: profile.avatar, required: true, maxlength: 16 });
+        const description = h('textarea', { rows: 5, required: true, maxlength: 3000, value: profile.description, placeholder: '描述你希望助理怎样表达、解释和与你相处…' });
+        const verbosity = h('select', { value: profile.verbosity }, ...[['concise', '简短利落'], ['balanced', '详略适中'], ['detailed', '详细解释']].map(([value, text]) => h('option', { value }, text)));
+        const emoji = h('select', { value: profile.emoji }, ...[['none', '不使用'], ['light', '偶尔点缀'], ['expressive', '活泼一些']].map(([value, text]) => h('option', { value }, text)));
+        const address = h('input', { value: profile.address, maxlength: 40, placeholder: '留空，自然称呼' });
+        const examples = [0, 1, 2].map(i => h('input', { value: profile.examples[i] ?? '', maxlength: 400, 'aria-label': `说话示例 ${i + 1}`, placeholder: `示例 ${i + 1}（可选）` }));
+        const enabled = h('input', { type: 'checkbox', checked: profile.enabled });
+        const status = h('p', { class: 'persona-save-status', role: 'status' }, drafts.has(profile.key) ? '有未保存的修改' : profile.version ? `已保存 · 版本 ${profile.version}` : '框架预设，可直接调整');
+        const values = () => ({ label: label.value, avatar: avatar.value, description: description.value,
+            verbosity: verbosity.value, emoji: emoji.value, address: address.value,
+            examples: examples.map(e => e.value.trim()).filter(Boolean), enabled: enabled.checked });
+        const save = h('button', { class: 'primary', type: 'submit' }, '保存性格');
+        const form = h('form', { class: 'persona-form', oninput: () => {
+                drafts.set(profile.key, { ...profile, ...values() });
+                status.textContent = '有未保存的修改';
+            }, onsubmit: async (event) => {
+                event.preventDefault();
+                if (saving)
+                    return;
+                saving = true;
+                // 保存期间冻结这份表单，避免请求结束后把后来输入的草稿误标为已保存。
+                const controls = [label, avatar, description, verbosity, emoji, address, ...examples, enabled];
+                controls.forEach(control => { control.disabled = true; });
+                try {
+                    const result = await run(() => api('POST', `/api/ai/admin/personalities/${encodeURIComponent(profile.key)}`, {
+                        ...values(), version: profile.version,
+                    }).catch(error => { status.textContent = error.message; throw error; }), '性格已保存', save);
+                    if (result) {
+                        profile = result;
+                        drafts.delete(result.key);
+                        catalog.items = [...catalog.items.filter(p => p.key !== result.key), result];
+                        status.textContent = `已保存 · 版本 ${result.version} · 后续消息生效`;
+                        drawCards();
+                        drawDefault();
+                    }
+                }
+                finally {
+                    saving = false;
+                    controls.forEach(control => { control.disabled = false; });
+                }
+            } }, h('div', { class: 'persona-section-heading' }, h('span', { class: 'eyebrow' }, 'CHARACTER'), h('h2', {}, '定义它的表达方式')), h('div', { class: 'persona-fields' }, field('性格名称', label), field('头像符号', avatar, '输入一个表情或短符号'), field('回复长度', verbosity), field('表情使用', emoji)), field('性格描述', description), field('如何称呼用户', address), h('div', { class: 'persona-examples' }, h('strong', {}, '说话示例'), h('small', {}, '两三句自然的话，帮助助理找到语气。'), examples), h('label', { class: 'persona-enabled' }, enabled, '允许用户选择此性格'), h('div', { class: 'persona-save-row' }, status, save));
+        const output = h('div', { class: 'persona-preview-answer', role: 'log', 'aria-live': 'polite' }, '先打个招呼，听听它会怎么说。');
+        const message = h('textarea', { rows: 2, required: true, maxlength: 2000, 'aria-label': '试聊消息', value: '今天事情有点多，你能怎么帮我？' });
+        const previewStatus = h('p', { class: 'persona-preview-status', role: 'status' });
+        const tryButton = h('button', { class: 'primary', type: 'submit' }, '试聊一下');
+        const stop = h('button', { type: 'button', hidden: true, onclick: () => activePreview?.abort() }, '停止');
+        const preview = h('form', { class: 'persona-preview', onsubmit: async (event) => {
+                event.preventDefault();
+                if (activePreview || !form.reportValidity())
+                    return;
+                const controller = new AbortController();
+                activePreview = controller;
+                tryButton.disabled = true;
+                stop.hidden = false;
+                output.textContent = '';
+                previewStatus.textContent = '正在准备回复…';
+                let done = false;
+                const abort = () => controller.abort();
+                window.addEventListener('hashchange', abort, { once: true });
+                window.addEventListener('cage:session-expired', abort, { once: true });
+                try {
+                    await postEvents('/api/ai/admin/personality-preview', { profile: values(), message: message.value }, value => {
+                        if (value.type === 'delta') {
+                            output.append(document.createTextNode(value.text));
+                            previewStatus.textContent = '正在回复…';
+                        }
+                        if (value.type === 'done') {
+                            output.textContent = value.result.text;
+                            previewStatus.textContent = `试聊完成 · ${(value.result.latencyMs / 1000).toFixed(1)} 秒`;
+                            done = true;
+                        }
+                        if (value.type === 'error')
+                            throw new Error(value.code === 'RATE_LIMITED' ? '已有试聊正在进行，请稍后重试' : `试聊未完成（${value.code}），请检查模型配置后重试`);
+                    }, controller.signal);
+                    if (!done)
+                        throw new Error('试聊连接中断，请重试');
+                }
+                catch (error) {
+                    previewStatus.textContent = controller.signal.aborted ? '已停止，保留已收到的文字' : error.message;
+                }
+                finally {
+                    window.removeEventListener('hashchange', abort);
+                    window.removeEventListener('cage:session-expired', abort);
+                    if (activePreview === controller)
+                        activePreview = null;
+                    tryButton.disabled = false;
+                    stop.hidden = true;
+                }
+            } }, h('span', { class: 'eyebrow' }, 'SAY HELLO'), h('h2', {}, '先聊两句'), h('p', { class: 'persona-preview-intro' }, '直接体验当前草稿的语气，不必先保存。这里仅预览表达风格，不处理实际业务。'), output, previewStatus, field('你想说什么', message), h('div', { class: 'persona-preview-actions' }, stop, tryButton));
+        editor.replaceChildren(form, preview);
+    }
+    const create = h('button', { class: 'primary', onclick: () => {
+            if (saving)
+                return;
+            const key = `custom-${crypto.randomUUID()}`;
+            drafts.set(key, { key, label: '我的助理', avatar: '✨', description: '', verbosity: 'balanced', address: '', emoji: 'light', examples: [], enabled: true, version: 0, builtin: false, updatedAt: null });
+            selected = key;
+            drawCards();
+            drawEditor();
+            editor.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        } }, '＋ 自定义性格');
+    main.append(h('div', { class: 'persona-overview' }, h('div', {}, h('span', { class: 'eyebrow' }, 'A LITTLE CHARACTER'), h('h2', {}, '同样的可靠，多一点个性。'), h('p', {}, '选一种合拍的语气，或创造属于团队的助理。')), create), defaults, grid, editor);
+    drawDefault();
+    drawCards();
+    drawEditor();
+}

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

@@ -0,0 +1,5 @@
+/**
+ * 角色能力和范围配置模块的公开入口。
+ * 应用壳通过这里组合页面，其他模块无需依赖内部表单实现；导出本身不发请求或执行管理操作。
+ */
+export { renderRoles } from './roles-page.js';