@yss123/cage-admin 0.1.0 → 0.2.0

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

@@ -0,0 +1,213 @@
+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';
+/** 组织编辑继续走生成命令；负责人和角色是两份配置，在界面上明确区分。 */
+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 条可见组织记录；超出部分请通过业务组织接口查询。'));
+    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();
+    }
+    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);
+    }
+    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();
+    }
+}
+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/roles/index.js

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

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)));
+}