ZKit管理端

Zkit-admin/src/views/Users.vue

@@ -0,0 +1,295 @@
+<template>
+  <div class="users">
+    <div class="card">
+      <div class="card-header">
+        <h3>所有用户</h3>
+        <button class="btn-primary" @click="openAddModal">
+          <i class="fa-solid fa-plus"></i> 新增用户
+        </button>
+      </div>
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>姓名</th>
+              <th>邮箱</th>
+              <th>角色</th>
+              <th>状态</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="user in paginatedUsers" :key="user.id">
+              <td>#{{ user.id }}</td>
+              <td>
+                <span class="username-text">{{ user.name }}</span>
+              </td>
+              <td>{{ user.email }}</td>
+              <td><span class="badge role">{{ user.role }}</span></td>
+              <td><span class="badge status" :class="getStatusClass(user.status)">{{ getStatusText(user.status) }}</span></td>
+              <td>
+                <div class="actions">
+                  <button class="action-btn edit" @click="openEditModal(user)" title="编辑">
+                    <i class="fa-solid fa-pen-to-square"></i>
+                  </button>
+                  <button class="action-btn delete" @click="deleteUser(user.id)" title="删除">
+                    <i class="fa-solid fa-trash"></i>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      
+      <Pagination 
+        :total="users.length" 
+        v-model:page-size="pageSize" 
+        v-model:current-page="currentPage" 
+      />
+    </div>
+
+    <!-- User Modal -->
+    <Modal
+      v-model:visible="modalVisible"
+      :title="isEdit ? '编辑用户' : '新增用户'"
+      @confirm="handleSave"
+    >
+      <form class="modal-form">
+        <div class="form-group">
+          <label>姓名</label>
+          <input type="text" v-model="form.name" placeholder="请输入姓名" />
+        </div>
+        <div class="form-group">
+          <label>邮箱</label>
+          <input type="email" v-model="form.email" placeholder="请输入邮箱" />
+        </div>
+        <div class="form-group">
+          <label>角色</label>
+          <select v-model="form.role">
+            <option value="管理员">管理员</option>
+            <option value="编辑">编辑</option>
+            <option value="访客">访客</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>状态</label>
+          <select v-model="form.status">
+            <option value="active">正常</option>
+            <option value="inactive">停用</option>
+            <option value="pending">待审核</option>
+          </select>
+        </div>
+      </form>
+    </Modal>
+
+    <!-- Confirm Delete Modal -->
+    <ConfirmModal
+      v-model:visible="confirmVisible"
+      title="确认删除"
+      message="确定要删除该用户吗？此操作无法撤销。"
+      @confirm="confirmDelete"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue'
+import Modal from '../components/Modal.vue'
+import ConfirmModal from '../components/ConfirmModal.vue'
+import Pagination from '../components/Pagination.vue'
+
+const users = ref([
+  { id: 1, name: 'John Doe', email: 'john@example.com', role: '管理员', status: 'active' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: '编辑', status: 'active' },
+  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: '访客', status: 'inactive' },
+  { id: 4, name: 'Alice Williams', email: 'alice@example.com', role: '编辑', status: 'active' },
+  { id: 5, name: 'Charlie Brown', email: 'charlie@example.com', role: '访客', status: 'pending' },
+  { id: 6, name: 'David Lee', email: 'david@example.com', role: '访客', status: 'active' },
+  { id: 7, name: 'Eva Green', email: 'eva@example.com', role: '编辑', status: 'inactive' },
+  { id: 8, name: 'Frank White', email: 'frank@example.com', role: '管理员', status: 'active' },
+  { id: 9, name: 'Grace Black', email: 'grace@example.com', role: '访客', status: 'pending' },
+  { id: 10, name: 'Henry Ford', email: 'henry@example.com', role: '编辑', status: 'active' },
+  { id: 11, name: 'Ivy Wilson', email: 'ivy@example.com', role: '访客', status: 'inactive' },
+  { id: 12, name: 'Jack Brown', email: 'jack@example.com', role: '管理员', status: 'active' },
+])
+
+const currentPage = ref(1)
+const pageSize = ref(7)
+
+const paginatedUsers = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  const end = start + pageSize.value
+  return users.value.slice(start, end)
+})
+
+const modalVisible = ref(false)
+const isEdit = ref(false)
+const confirmVisible = ref(false)
+const deleteId = ref(null)
+const form = reactive({
+  id: null,
+  name: '',
+  email: '',
+  role: '访客',
+  status: 'active'
+})
+
+const getStatusText = (status) => {
+  const map = {
+    active: '正常',
+    inactive: '停用',
+    pending: '待审核'
+  }
+  return map[status] || status
+}
+
+const getStatusClass = (status) => {
+  const map = {
+    active: 'bg-light-success',
+    inactive: 'bg-light-danger',
+    pending: 'bg-light-warning'
+  }
+  return map[status] || 'bg-light-dark'
+}
+
+const openAddModal = () => {
+  isEdit.value = false
+  Object.assign(form, { id: null, name: '', email: '', role: '访客', status: 'active' })
+  modalVisible.value = true
+}
+
+const openEditModal = (user) => {
+  isEdit.value = true
+  Object.assign(form, user)
+  modalVisible.value = true
+}
+
+const handleSave = () => {
+  if (isEdit.value) {
+    const index = users.value.findIndex(u => u.id === form.id)
+    if (index !== -1) {
+      users.value[index] = { ...form }
+    }
+  } else {
+    const newId = Math.max(...users.value.map(u => u.id)) + 1
+    users.value.push({ ...form, id: newId })
+    const totalPages = Math.ceil(users.value.length / pageSize.value)
+    currentPage.value = totalPages
+  }
+  modalVisible.value = false
+}
+
+const deleteUser = (id) => {
+  deleteId.value = id
+  confirmVisible.value = true
+}
+
+const confirmDelete = () => {
+  users.value = users.value.filter(u => u.id !== deleteId.value)
+  deleteId.value = null
+  const totalPages = Math.ceil(users.value.length / pageSize.value)
+  if (currentPage.value > totalPages && totalPages > 0) {
+    currentPage.value = totalPages
+  }
+}
+</script>
+
+<style scoped>
+.card-header {
+  padding: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px dashed #eff2f5;
+}
+
+.card-header h3 {
+  font-size: 18px;
+  color: #181c32;
+  font-weight: 600;
+  margin: 0;
+}
+
+.table-container {
+  overflow-x: auto;
+}
+
+.username-text {
+  font-weight: 600;
+  color: #181c32;
+  font-size: 14px;
+}
+
+.badge.role {
+  background-color: #f5f8fa;
+  color: #5e6278;
+  font-weight: 600;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+}
+
+.action-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: #b5b5c3;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+}
+
+.action-btn:hover {
+  background-color: #f5f8fa;
+  color: var(--primary);
+}
+
+.action-btn.delete:hover {
+  background-color: #ffe2e5;
+  color: #f64e60;
+}
+
+/* Form Styles */
+.modal-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #3f4254;
+}
+
+.form-group input,
+.form-group select {
+  padding: 12px;
+  border: 1px solid #e4e6ef;
+  border-radius: 8px;
+  font-size: 14px;
+  color: #5e6278;
+  outline: none;
+  transition: border-color 0.2s;
+  background-color: #fff;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+  border-color: #07C160;
+}
+</style>