UI优化完善初版

platform/backend/static/users.html

@@ -123,31 +123,85 @@
                 async fetchUsers() {
                     try {
                         const token = localStorage.getItem('authToken');
-                        const response = await fetch('/api/admin/users', { headers: { 'Authorization': 'Bearer ' + token } });
-                        if (!response.ok) throw new Error('获取失败');
+                        if (!token) {
+                            this.$message.error('请先登录');
+                            return;
+                        }
+                        const response = await fetch('/api/admin/users', {
+                            headers: { 'Authorization': 'Bearer ' + token }
+                        });
+                        if (!response.ok) {
+                            const errorData = await response.json().catch(() => ({}));
+                            throw new Error(errorData.detail || `请求失败: ${response.status}`);
+                        }
                         const data = await response.json();
                         this.users = data || [];
+                        this.$message.success('用户列表加载成功');
                     } catch (error) {
-                        console.log('使用模拟数据');
-                        this.users = [
-                            { id: 'admin', username: '管理员', role: 'admin', created_at: '2026-04-01 09:00' },
-                            { id: 'editor1', username: '编辑小王', role: 'editor', created_at: '2026-04-05 14:30' },
-                            { id: 'editor2', username: '编辑小李', role: 'editor', created_at: '2026-04-10 10:15' }
-                        ];
+                        console.error('获取用户失败:', error);
+                        this.$message.error(`获取用户失败: ${error.message}`);
+                        this.users = [];
                     }
                 },
-                addUser() {
-                    const newId = 'user' + Date.now();
-                    this.users.push({ id: newId, username: '新用户', role: 'editor', created_at: new Date().toISOString().slice(0, 16).replace('T', ' ') });
-                    this.$message.success('添加用户成功');
+                async addUser() {
+                    try {
+                        const token = localStorage.getItem('authToken');
+                        if (!token) {
+                            this.$message.error('请先登录');
+                            return;
+                        }
+                        // 使用默认用户名，添加时间戳避免重复
+                        const username = '新用户' + Date.now().toString().slice(-4);
+                        const response = await fetch('/api/admin/users', {
+                            method: 'POST',
+                            headers: {
+                                'Authorization': 'Bearer ' + token,
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({ username: username, role: 'editor' })
+                        });
+                        if (!response.ok) {
+                            const errorData = await response.json().catch(() => ({}));
+                            throw new Error(errorData.detail || `请求失败: ${response.status}`);
+                        }
+                        const newUser = await response.json();
+                        this.users.push(newUser);
+                        this.$message.success('添加用户成功');
+                    } catch (error) {
+                        console.error('添加用户失败:', error);
+                        this.$message.error(`添加用户失败: ${error.message}`);
+                    }
                 },
-                deleteUser(id) {
+                async deleteUser(id) {
                     if (id === 'admin') {
                         this.$message.warning('不能删除管理员用户');
                         return;
                     }
                     this.$confirm('确定删除该用户？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
-                        .then(() => { this.users = this.users.filter(u => u.id !== id); this.$message.success('删除用户成功'); }).catch(() => {});
+                        .then(async () => {
+                            try {
+                                const token = localStorage.getItem('authToken');
+                                if (!token) {
+                                    this.$message.error('请先登录');
+                                    window.location.href = '/';
+                                    return;
+                                }
+                                const response = await fetch(`/api/admin/users/${encodeURIComponent(id)}`, {
+                                    method: 'DELETE',
+                                    headers: { 'Authorization': 'Bearer ' + token }
+                                });
+                                if (!response.ok) {
+                                    const errorData = await response.json().catch(() => ({}));
+                                    throw new Error(errorData.detail || `请求失败: ${response.status}`);
+                                }
+                                this.users = this.users.filter(u => u.id !== id);
+                                this.$message.success('删除用户成功');
+                            } catch (error) {
+                                console.error('删除用户失败:', error);
+                                this.$message.error(`删除用户失败: ${error.message}`);
+                            }
+                        })
+                        .catch(() => {});
                 },
                 handleLogout() { localStorage.removeItem('authToken'); window.location.href = '/'; },
                 redirectToPage(page) { window.location.href = '/' + page; },