feat: 搭建后台管理框架

src/views/userManagement/composables/useAdminUsers.js

@@ -10,21 +10,34 @@ export function useAdminUsers() {
   const pageSize = ref(10)
   const dialogVisible = ref(false)
   const form = reactive({ username: '', name: '', role: '', ipWhitelist: '' })
-  const users = ref(demoAdminUsers.map(user => ({ ...user })))
-  const filtered = computed(() => users.value.filter(user => {
-    const query = keyword.value.trim().toLowerCase()
-    const matchesKeyword = !query || `${user.id} ${user.username} ${user.name}`.toLowerCase().includes(query)
-    return matchesKeyword && (!roleFilter.value || user.role === roleFilter.value)
-  }))
-  const paginated = computed(() => filtered.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value))
+  const users = ref(demoAdminUsers.map((user) => ({ ...user })))
+  const filtered = computed(() =>
+    users.value.filter((user) => {
+      const query = keyword.value.trim().toLowerCase()
+      const matchesKeyword =
+        !query || `${user.id} ${user.username} ${user.name}`.toLowerCase().includes(query)
+      return matchesKeyword && (!roleFilter.value || user.role === roleFilter.value)
+    })
+  )
+  const paginated = computed(() =>
+    filtered.value.slice(
+      (currentPage.value - 1) * pageSize.value,
+      currentPage.value * pageSize.value
+    )
+  )
 
-  function queryUsers() { currentPage.value = 1 }
-  function toggleStatus(user) { user.status = user.status === '启用' ? '停用' : '启用' }
+  function queryUsers() {
+    currentPage.value = 1
+  }
+  function toggleStatus(user) {
+    user.status = user.status === '启用' ? '停用' : '启用'
+  }
   function addUser() {
-    if (!form.username.trim() || !form.name.trim() || !form.role) return ElMessage.warning('请填写用户名、姓名并选择权限角色')
-    const role = roleData.find(item => item.name === form.role)
+    if (!form.username.trim() || !form.name.trim() || !form.role)
+      return ElMessage.warning('请填写用户名、姓名并选择权限角色')
+    const role = roleData.find((item) => item.name === form.role)
     users.value.unshift({
-      id: Math.max(0, ...users.value.map(user => user.id)) + 1,
+      id: Math.max(0, ...users.value.map((user) => user.id)) + 1,
       username: form.username.trim(),
       name: form.name.trim(),
       roleId: role?.id || 0,
@@ -33,7 +46,7 @@ export function useAdminUsers() {
       status: '启用',
       twoFactor: '未开启',
       createdAt: new Date().toLocaleString('sv-SE'),
-      lastLogin: '—',
+      lastLogin: '—'
     })
     Object.assign(form, { username: '', name: '', role: '', ipWhitelist: '' })
     dialogVisible.value = false
@@ -41,5 +54,18 @@ export function useAdminUsers() {
     ElMessage.success('管理员已添加')
   }
 
-  return { keyword, roleFilter, currentPage, pageSize, dialogVisible, form, users, filtered, paginated, queryUsers, toggleStatus, addUser }
+  return {
+    keyword,
+    roleFilter,
+    currentPage,
+    pageSize,
+    dialogVisible,
+    form,
+    users,
+    filtered,
+    paginated,
+    queryUsers,
+    toggleStatus,
+    addUser
+  }
 }