@k3000/ce 0.0.1 → 0.1.0

package/console/pages/system-menu.mjs

@@ -0,0 +1,179 @@
+import { getMenusByPage, deleteMenu, saveMenu, toggleMenuStatus } from "../api/mock.mjs";
+
+export const innerHTML = `
+<div class="h-full flex flex-col p-6 gap-6">
+    <!-- Header Component -->
+    <common-header title="菜单管理" description="配置系统导航菜单及权限标识">
+        <common-toolbar button-text="新增菜单" placeholder="搜索菜单..." value="{{searchQuery}}" onsearch="{{onSearch}}" onadd="{{onAdd}}"></common-toolbar>
+    </common-header>
+
+    <!-- Content Card -->
+    <div class="flex-1 bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 overflow-hidden flex flex-col relative">
+        
+        <!-- Table Section -->
+        <div class="flex-1 overflow-auto custom-scrollbar">
+            <table class="w-full text-left border-collapse">
+                <thead class="bg-gray-50/50 dark:bg-gray-700/30 sticky top-0 z-10 backdrop-blur-md border-b border-white/20 dark:border-white/5">
+                    <tr>
+                        <th each="{{ths}}" class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider {{typeof scope === 'string' ? '' : classStr}}">
+                        {{typeof scope === 'string' ? scope : title}}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody onclick="{{dispatchAction}}" class="divide-y divide-gray-100 dark:divide-gray-700">
+                    <tr each="{{menuList}}" class="hover:bg-white/40 dark:hover:bg-white/5 transition-colors group border-b border-transparent hover:border-white/20">
+                        <td class="px-6 py-4 text-sm text-gray-500 font-mono">{{id}}</td>
+                        <td class="px-6 py-4">
+                            <div class="flex items-center gap-3">
+                                <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-100 to-indigo-100 dark:from-blue-900/30 dark:to-indigo-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 shadow-sm">
+                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{icon}}"></path>
+                                    </svg>
+                                </div>
+                                <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{menuName}}</span>
+                            </div>
+                        </td>
+                        <td class="px-6 py-4">
+                            <span class="px-2 py-1 rounded-md bg-gray-100 dark:bg-gray-800 text-xs font-mono text-gray-600 dark:text-gray-400 border border-gray-200/50 dark:border-gray-700/50">{{path}}</span>
+                        </td>
+                        <td class="px-6 py-4">
+                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium {{status === 'active' ? 'bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400' : 'bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400'}}">
+                                <span class="w-1.5 h-1.5 rounded-full {{status === 'active' ? 'bg-green-500' : 'bg-red-500'}}"></span>
+                                {{status === 'active' ? '正常' : '禁用'}}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4 text-sm text-gray-500">{{sort}}</td>
+                        <td class="px-6 py-4 text-sm text-gray-500">{{createdAt}}</td>
+                        <td class="px-6 py-4 text-right">
+                            <div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                                <common-action-button action="toggle" id="{{id}}" title="{{status === 'active' ? '禁用' : '启用'}}"></common-action-button>
+                                <common-action-button action="edit" id="{{id}}"></common-action-button>
+                                <common-action-button action="delete" id="{{id}}"></common-action-button>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <!-- Empty State -->
+            <div class="flex flex-col items-center justify-center py-20 text-gray-400 {{menuList.length === 0 ? '' : 'hidden'}}">
+                <div class="w-16 h-16 bg-gray-50 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4">
+                    <svg class="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
+                </div>
+                <span class="text-sm font-medium">暂无菜单数据</span>
+            </div>
+        </div>
+
+        <!-- Pagination Component -->
+        <common-pagination 
+            current="{{currentPage}}" 
+            total="{{totalItems}}" 
+            psize="{{pageSize}}"
+            onchange="{{onPageChange}}">
+        </common-pagination>
+    </div>
+
+    <!-- Add/Edit Modal -->
+    <common-modal title="{{isEditMode ? '编辑菜单' : '新增菜单'}}" visible="{{modalVisible}}" onclose="{{onCloseModal}}" onsave="{{onSave}}">
+        <div class="grid grid-cols-2 gap-5">
+            <div class="col-span-2">
+                <common-input label="菜单名称" obj="{{currentMenu}}" prop="menuName" placeholder="请输入菜单名称"></common-input>
+            </div>
+            <common-input label="访问路径" obj="{{currentMenu}}" prop="path" placeholder="请输入路径 (如: /system/menu)"></common-input>
+            <common-input label="排序" type="number" obj="{{currentMenu}}" prop="sort" placeholder="显示排序"></common-input>
+            <div class="col-span-2">
+                <common-input label="图标 (SVG Path)" type="textarea" obj="{{currentMenu}}" prop="icon" placeholder="请输入图标的 SVG Path"></common-input>
+            </div>
+        </div>
+    </common-modal>
+</div>
+`
+
+export default class extends HTMLElement {
+    // Page State
+    menuList = []
+    modalVisible = false
+    isEditMode = false
+    currentMenu = { id: '', menuName: '', path: '', icon: '', sort: 0, status: 'active' }
+    searchQuery = ''
+    ths = [
+        'ID',
+        '菜单名称',
+        '路径',
+        '状态',
+        '排序',
+        '创建时间',
+        { title: '操作', classStr: 'text-right' }
+    ]
+
+    // Pagination State
+    currentPage = 1
+    pageSize = 10
+    totalItems = 0
+
+    constructor() {
+        super()
+        this.loadData()
+    }
+
+    async loadData() {
+        const { list, total } = await getMenusByPage(this.currentPage, this.pageSize, { key: this.searchQuery })
+        this.menuList = list
+        this.totalItems = total
+    }
+
+    onSearch(e) {
+        this.searchQuery = e.detail
+        this.currentPage = 1
+        this.loadData()
+    }
+
+    onAdd() {
+        this.isEditMode = false
+        this.currentMenu = { id: '', menuName: '', path: '', icon: '', sort: 0, status: 'active' }
+        this.modalVisible = true
+    }
+
+    onPageChange(e) {
+        this.currentPage = e.detail
+        this.loadData()
+    }
+
+    onCloseModal() {
+        this.modalVisible = false
+    }
+
+    async onSave() {
+        try {
+            await saveMenu(this.currentMenu)
+            this.modalVisible = false
+            this.loadData()
+        } catch (err) {
+            alert(err)
+        }
+    }
+
+    async dispatchAction(e) {
+        const btn = e.target.closest('[data-action]')
+        if (!btn) return
+
+        const { action, id } = btn.dataset
+
+        if (action === 'edit') {
+            const menu = this.menuList.find(m => m.id == id)
+            if (menu) {
+                this.isEditMode = true
+                this.currentMenu = { ...menu }
+                this.modalVisible = true
+            }
+        } else if (action === 'delete') {
+            if (confirm('确定要删除该菜单吗？')) {
+                await deleteMenu(id)
+                this.loadData()
+            }
+        } else if (action === 'toggle') {
+            await toggleMenuStatus(id)
+            this.loadData()
+        }
+    }
+}

package/console/pages/system-role.mjs

@@ -0,0 +1,199 @@
+import { getRolesByPage, deleteRole, saveRole, toggleRoleStatus } from "../api/mock.mjs"
+
+export const innerHTML = `
+<style>
+/* Scoped styles if needed, but we rely mostly on Tailwind */
+.modal-enter { opacity: 0; transform: scale(0.95); }
+.modal-create { opacity: 1; transform: scale(1); }
+</style>
+<div class="h-full flex flex-col p-6 gap-6">
+    <!-- Header -->
+    <common-header title="角色管理" description="管理系统的角色与权限分配">
+        <common-toolbar button-text="新增角色" placeholder="搜索角色..." onadd="{{onAdd}}" onsearch="{{onSearch}}"></common-toolbar>
+    </common-header>
+    <!-- Table Card -->
+    <div class="flex-1 bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 overflow-hidden flex flex-col relative">
+        <div class="overflow-x-auto flex-1 custom-scrollbar">
+            <table class="w-full text-left border-collapse">
+                <thead class="bg-gray-50/50 dark:bg-gray-700/30 sticky top-0 z-10 backdrop-blur-md border-b border-white/20 dark:border-white/5">
+                    <tr>
+                        <th each="{{ths}}" class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider {{typeof scope === 'string' ? '' : classStr}}">
+                        {{typeof scope === 'string' ? scope : title}}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody onclick="{{dispatchAction}}" class="divide-y divide-gray-100 dark:divide-gray-700">
+                    <tr each="{{roles}}" class="hover:bg-white/40 dark:hover:bg-white/5 transition-colors group border-b border-transparent hover:border-white/20">
+                        <td class="px-6 py-4 text-sm text-gray-500 font-mono">{{id}}</td>
+                        <td class="px-6 py-4">
+                            <div class="flex items-center gap-3">
+                                <div class="w-9 h-9 rounded-full bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900/30 dark:to-pink-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold text-sm shadow-sm">
+                                    {{roleName.charAt(0).toUpperCase()}}
+                                </div>
+                                <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{roleName}}</span>
+                            </div>
+                        </td>
+                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">{{description}}</td>
+                        <td class="px-6 py-4">
+                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium {{status === 'active' ? 'bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400' : 'bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400'}}">
+                                <span class="w-1.5 h-1.5 rounded-full {{status === 'active' ? 'bg-green-500' : 'bg-red-500'}}"></span>
+                                {{status === 'active' ? '正常' : '禁用'}}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4 text-sm text-gray-500">{{createdAt}}</td>
+                        <td class="px-6 py-4 text-right">
+                            <div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                                <common-action-button action="toggle" id="{{id}}" title="{{status === 'active' ? '禁用' : '启用'}}"></common-action-button>
+                                <common-action-button action="edit" id="{{id}}"></common-action-button>
+                                <common-action-button action="delete" id="{{id}}"></common-action-button>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            
+             <!-- Empty State -->
+             <div class="flex flex-col items-center justify-center py-20 text-gray-400 {{roles.length === 0 ? '' : 'hidden'}}">
+                <div class="w-16 h-16 bg-gray-50 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4">
+                    <svg class="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
+                </div>
+                <span class="text-sm font-medium">暂无角色数据</span>
+            </div>
+        </div>
+        
+        <!-- Pagination -->
+        <common-pagination current-page="{{currentPage}}" page-size="{{pageSize}}" total="{{total}}" onchange="{{onPageChange}}"></common-pagination>
+    </div>
+
+    <!-- Modal Component -->
+    <common-modal title="{{isEditMode ? '编辑角色' : '新增角色'}}" visible="{{modalVisible}}" onclose="{{onCloseModal}}" onsave="{{onSave}}">
+        <div class="space-y-5">
+            <common-input label="角色名称" obj="{{currentRole}}" prop="roleName" placeholder="请输入角色名称"></common-input>
+            <common-input label="角色描述" type="textarea" obj="{{currentRole}}" prop="description" placeholder="请输入角色描述"></common-input>
+        </div>
+    </common-modal>
+</div>
+`
+
+export default class extends HTMLElement {
+
+    roles = []
+    modalVisible = false
+    isEditMode = false
+    currentRole = { id: '', roleName: '', description: '', status: 'active' }
+    searchQuery = ''
+    ths = [
+        'ID',
+        '角色名称',
+        '描述',
+        '状态',
+        '创建时间',
+        {
+            title: '操作',
+            classStr: 'text-right'
+        }
+    ]
+
+    // Pagination State
+    currentPage = 1
+    pageSize = 10
+    total = 0
+
+    constructor() {
+        super()
+    }
+
+    ready() {
+        this.loadData()
+    }
+
+    async loadData() {
+        await this.fetchRoles()
+        console.log('Role data loaded')
+    }
+
+    async fetchRoles() {
+        try {
+            const res = await getRolesByPage(this.currentPage, this.pageSize, {
+                key: this.searchQuery
+            })
+
+            this.roles = res.list
+            this.total = res.total
+
+            // Ensure current page is valid after search/filter
+            const totalPage = Math.ceil(this.total / this.pageSize) || 1
+            if (this.currentPage > totalPage) {
+                this.currentPage = 1
+                return this.fetchRoles()
+            }
+        } catch (error) {
+            console.error('Failed to fetch roles:', error)
+        }
+    }
+
+    async onPageChange(page) {
+        this.currentPage = page
+        await this.fetchRoles()
+    }
+
+    async onSearch(e) {
+        this.searchQuery = (e.detail?.value ?? e.target.value).trim()
+        this.currentPage = 1
+        await this.fetchRoles()
+    }
+
+    onAdd() {
+        this.isEditMode = false
+        Object.assign(this.currentRole, { id: '', roleName: '', description: '', status: 'active' })
+        this.modalVisible = true
+    }
+
+    onCloseModal() {
+        this.modalVisible = false
+    }
+
+    async dispatchAction(e) {
+        const btn = e.target.closest('button[data-action]')
+        if (!btn) return
+
+        const action = btn.dataset.action
+        const id = parseInt(btn.dataset.id)
+
+        if (action === 'delete') {
+            if (confirm(`确定要删除角色 ID:${id} 吗?`)) {
+                await deleteRole(id)
+                await this.fetchRoles()
+            }
+        } else if (action === 'toggle') {
+            await toggleRoleStatus(id)
+            await this.fetchRoles()
+        } else if (action === 'edit') {
+            const role = this.roles.find(r => r.id === id)
+            if (role) this.prepareEdit(role)
+        }
+    }
+
+    prepareEdit(role) {
+        this.isEditMode = true
+        Object.assign(this.currentRole, role)
+        this.modalVisible = true
+    }
+
+    async onSave() {
+        console.log(this.currentRole)
+        if (!this.currentRole.roleName) {
+            alert('角色名称不能为空')
+            return
+        }
+
+        try {
+            await saveRole(this.currentRole)
+            await this.fetchRoles()
+            this.modalVisible = false
+        } catch (error) {
+            alert('保存失败: ' + error)
+        }
+    }
+
+}

package/console/pages/system-user.mjs

@@ -0,0 +1,199 @@
+import { getUsersByPage, deleteUser, saveUser, toggleUserStatus } from "../api/mock.mjs"
+
+export const innerHTML = `
+<style>
+/* Scoped styles if needed, but we rely mostly on Tailwind */
+.modal-enter { opacity: 0; transform: scale(0.95); }
+.modal-create { opacity: 1; transform: scale(1); }
+</style>
+<div class="h-full flex flex-col p-6 gap-6">
+    <!-- Header -->
+    <common-header title="用户管理" description="管理系统用户的账号与权限">
+        <common-toolbar button-text="新增用户" placeholder="搜索用户..." onadd="{{onAdd}}" onsearch="{{onSearch}}"></common-toolbar>
+    </common-header>
+
+    <!-- Table Card -->
+    <div class="flex-1 bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 overflow-hidden flex flex-col relative">
+        <div class="overflow-x-auto flex-1 custom-scrollbar">
+            <table class="w-full text-left border-collapse">
+                <thead class="bg-gray-50/50 dark:bg-gray-700/30 sticky top-0 z-10 backdrop-blur-md border-b border-white/20 dark:border-white/5">
+                    <tr>
+                        <th each="{{ths}}" class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider {{typeof scope === 'string' ? '' : classStr}}">
+                        {{typeof scope === 'string' ? scope : title}}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody onclick="{{dispatchAction}}" class="divide-y divide-gray-100 dark:divide-gray-700">
+                    <tr each="{{users}}" class="hover:bg-white/40 dark:hover:bg-white/5 transition-colors group border-b border-transparent hover:border-white/20">
+                        <td class="px-6 py-4 text-sm text-gray-500 font-mono">{{id}}</td>
+                        <td class="px-6 py-4">
+                            <div class="flex items-center gap-3">
+                                <div class="w-9 h-9 rounded-full bg-gradient-to-br from-blue-100 to-indigo-100 dark:from-blue-900/30 dark:to-indigo-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 font-bold text-sm shadow-sm">
+                                    {{username.charAt(0).toUpperCase()}}
+                                </div>
+                                <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{username}}</span>
+                            </div>
+                        </td>
+                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">{{name}}</td>
+                        <td class="px-6 py-4">
+                            <!-- Helper logic needed for conditional class, simplified here -->
+                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium {{status === 'active' ? 'bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400' : 'bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400'}}">
+                                <span class="w-1.5 h-1.5 rounded-full {{status === 'active' ? 'bg-green-500' : 'bg-red-500'}}"></span>
+                                {{status === 'active' ? '正常' : '禁用'}}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4 text-sm text-gray-500">{{createdAt}}</td>
+                        <td class="px-6 py-4 text-right">
+                            <div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                                <common-action-button action="toggle" id="{{id}}" title="{{status === 'active' ? '禁用' : '启用'}}"></common-action-button>
+                                <common-action-button action="edit" id="{{id}}"></common-action-button>
+                                <common-action-button action="delete" id="{{id}}"></common-action-button>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            
+             <!-- Empty State -->
+             <div class="flex flex-col items-center justify-center py-20 text-gray-400 {{users.length === 0 ? '' : 'hidden'}}">
+                <div class="w-16 h-16 bg-gray-50 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4">
+                    <svg class="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
+                </div>
+                <span class="text-sm font-medium">暂无用户数据</span>
+            </div>
+        </div>
+        
+        <!-- Pagination -->
+        <common-pagination current-page="{{currentPage}}" page-size="{{pageSize}}" total="{{total}}" onchange="{{onPageChange}}"></common-pagination>
+    </div>
+
+    <!-- Modal Component -->
+    <common-modal title="{{isEditMode ? '编辑用户' : '新增用户'}}" visible="{{modalVisible}}" onclose="{{onCloseModal}}" onsave="{{onSave}}">
+        <div class="space-y-5">
+            <common-input label="用户名" obj="{{currentUser}}" prop="username" placeholder="请输入用户名"></common-input>
+            <common-input label="姓名" obj="{{currentUser}}" prop="name" placeholder="请输入姓名"></common-input>
+            <common-input label="密码" type="password" obj="{{currentUser}}" prop="password" placeholder="请输入密码" class="{{isEditMode ? 'hidden' : ''}}"></common-input>
+        </div>
+    </common-modal>
+</div>
+`
+
+export default class extends HTMLElement {
+
+    username = ''
+    users = []
+    modalVisible = false
+    isEditMode = false
+    currentUser = { id: '', username: '', name: '', password: '', status: 'active' }
+    searchQuery = ''
+    ths = [
+        'ID',
+        '用户',
+        '姓名',
+        '状态',
+        '创建时间',
+        {
+            title: '操作',
+            classStr: 'text-right'
+        }
+    ]
+
+    // Pagination State
+    currentPage = 1
+    pageSize = 10
+    total = 0
+
+    ready() {
+        this.loadData()
+    }
+
+    async loadData() {
+        await this.fetchUsers()
+        console.log('Data loaded')
+    }
+
+    async fetchUsers() {
+        try {
+            const res = await getUsersByPage(this.currentPage, this.pageSize, {
+                key: this.searchQuery
+            })
+
+            this.users = res.list
+            this.total = res.total
+            // Ensure current page is valid after search/filter
+            const totalPage = Math.ceil(this.total / this.pageSize) || 1
+            if (this.currentPage > totalPage) {
+                this.currentPage = 1
+                return this.fetchUsers()
+            }
+        } catch (error) {
+            console.error('Failed to fetch users:', error)
+        }
+    }
+
+    async onPageChange(page) {
+        this.currentPage = page
+        await this.fetchUsers()
+    }
+
+    async onSearch(e) {
+        this.searchQuery = (e.detail?.value ?? e.target.value).trim()
+        this.currentPage = 1 // Reset to first page on search
+        await this.fetchUsers()
+    }
+
+    onAdd() {
+        this.isEditMode = false
+        Object.assign(this.currentUser, { id: '', username: '', name: '', password: '', status: 'active' })
+        this.modalVisible = true
+    }
+
+    onCloseModal() {
+        this.modalVisible = false
+    }
+
+    async dispatchAction(e) {
+        // Find the button (could be clicked on svg or path)
+        const btn = e.target.closest('button[data-action]')
+        if (!btn) return
+
+        const action = btn.dataset.action
+        const id = parseInt(btn.dataset.id)
+
+        if (action === 'delete') {
+            if (confirm(`确定要删除用户 ID:${id} 吗?`)) {
+                await deleteUser(id)
+                await this.fetchUsers()
+            }
+        } else if (action === 'toggle') {
+            await toggleUserStatus(id)
+            await this.fetchUsers()
+        } else if (action === 'edit') {
+            const user = this.users.find(u => u.id === id)
+            if (user) this.prepareEdit(user)
+        }
+    }
+
+    prepareEdit(user) {
+        this.isEditMode = true
+        // Clone to avoid direct mutation of list item until saved
+        Object.assign(this.currentUser, user, { password: '' })
+        this.modalVisible = true
+    }
+
+    async onSave() {
+        console.log(123123, this.currentUser)
+        if (!this.currentUser.username || !this.currentUser.name) {
+            alert('用户名和姓名不能为空')
+            return
+        }
+
+        try {
+            await saveUser(this.currentUser)
+            await this.fetchUsers()
+            this.modalVisible = false
+        } catch (error) {
+            alert('保存失败: ' + error)
+        }
+    }
+}