xto-fronted 0.4.93 → 0.4.95

package/src/views/system/role/index.vue

@@ -1,583 +1,583 @@
-<script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
-import { Form, FormItem, Input, Select, Switch } from '@xto/form'
-import { Tag, Pagination } from '@xto/data'
-import { Modal, Message, Popconfirm } from '@xto/feedback'
-import { Space, Button } from '@xto/base'
-import { Status, StatusOptions } from '@/enums'
-
-// 角色数据类型
-interface Role {
-  id: number
-  name: string
-  code: string
-  description: string
-  status: Status
-  permissions: string[]
-  createTime: string
-}
-
-// Mock 数据
-const mockRoles: Role[] = [
-  { id: 1, name: '超级管理员', code: 'admin', description: '拥有所有权限', status: Status.ENABLED, permissions: ['*'], createTime: '2024-01-01 10:00:00' },
-  { id: 2, name: '编辑', code: 'editor', description: '内容编辑权限', status: Status.ENABLED, permissions: ['user:read', 'user:write'], createTime: '2024-01-02 10:00:00' },
-  { id: 3, name: '访客', code: 'viewer', description: '只读权限', status: Status.ENABLED, permissions: ['user:read'], createTime: '2024-01-03 10:00:00' }
-]
-
-const loading = ref(false)
-const roleList = ref<Role[]>([])
-const total = ref(0)
-const currentPage = ref(1)
-const pageSize = ref(10)
-
-// 搜索条件
-const searchForm = reactive({
-  keyword: '',
-  status: undefined as Status | undefined
-})
-
-// 弹窗
-const modalVisible = ref(false)
-const modalTitle = computed(() => formData.id ? '编辑角色' : '新增角色')
-const formData = reactive({
-  id: 0,
-  name: '',
-  code: '',
-  description: '',
-  status: Status.ENABLED,
-  permissions: [] as string[]
-})
-
-const rules: Record<string, any[]> = {
-  name: [
-    { required: true, message: '请输入角色名称', trigger: 'blur' }
-  ],
-  code: [
-    { required: true, message: '请输入角色编码', trigger: 'blur' }
-  ]
-}
-
-const formRef = ref()
-
-// 获取角色列表
-const getRoleList = () => {
-  loading.value = true
-  setTimeout(() => {
-    let list = [...mockRoles]
-
-    if (searchForm.keyword) {
-      list = list.filter(role =>
-        role.name.includes(searchForm.keyword) ||
-        role.code.includes(searchForm.keyword)
-      )
-    }
-    if (searchForm.status !== undefined) {
-      list = list.filter(role => role.status === searchForm.status)
-    }
-
-    total.value = list.length
-    roleList.value = list.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
-    loading.value = false
-  }, 300)
-}
-
-// 搜索
-const handleSearch = () => {
-  currentPage.value = 1
-  getRoleList()
-}
-
-// 重置
-const handleReset = () => {
-  searchForm.keyword = ''
-  searchForm.status = undefined
-  currentPage.value = 1
-  getRoleList()
-}
-
-// 新增
-const handleAdd = () => {
-  Object.assign(formData, {
-    id: 0,
-    name: '',
-    code: '',
-    description: '',
-    status: Status.ENABLED,
-    permissions: []
-  })
-  modalVisible.value = true
-}
-
-// 编辑
-const handleEdit = (row: Role) => {
-  Object.assign(formData, row)
-  modalVisible.value = true
-}
-
-// 删除
-const handleDelete = (_id: number) => {
-  Message.success('删除成功')
-  getRoleList()
-}
-
-// 提交
-const handleSubmit = async () => {
-  try {
-    await formRef.value?.validate()
-    Message.success(formData.id ? '编辑成功' : '新增成功')
-    modalVisible.value = false
-    getRoleList()
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-// 状态切换
-const handleStatusChange = (row: Role) => {
-  Message.success(`已${row.status === Status.ENABLED ? '启用' : '禁用'}角色 ${row.name}`)
-}
-
-onMounted(() => {
-  getRoleList()
-})
-</script>
-
-<template>
-  <div class="role-page">
-    <!-- 搜索栏 -->
-    <div class="search-section">
-      <Form :model="searchForm" inline class="search-form">
-        <FormItem label="关键词">
-          <Input
-            v-model="searchForm.keyword"
-            placeholder="角色名称/编码"
-            clearable
-            @keyup.enter="handleSearch"
-          />
-        </FormItem>
-        <FormItem label="状态">
-          <Select
-            v-model="searchForm.status"
-            :options="StatusOptions"
-            placeholder="请选择"
-            clearable
-          />
-        </FormItem>
-        <FormItem>
-          <Space>
-            <Button type="primary" @click="handleSearch">
-              <template #icon>
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <circle cx="11" cy="11" r="8"/>
-                  <path d="M21 21l-4.35-4.35"/>
-                </svg>
-              </template>
-              搜索
-            </Button>
-            <Button @click="handleReset">
-              <template #icon>
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M3 12a9 9 0 109-9 9.75 9.75 0 00-6.74 2.74L3 8"/>
-                  <path d="M3 3v5h5"/>
-                </svg>
-              </template>
-              重置
-            </Button>
-          </Space>
-        </FormItem>
-      </Form>
-    </div>
-
-    <!-- 表格 -->
-    <div class="table-section">
-      <!-- 工具栏 -->
-      <div class="table-toolbar">
-        <div class="toolbar-left">
-          <Button type="primary" @click="handleAdd">
-            <template #icon>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="12" y1="5" x2="12" y2="19"/>
-                <line x1="5" y1="12" x2="19" y2="12"/>
-              </svg>
-            </template>
-            新增角色
-          </Button>
-        </div>
-        <div class="toolbar-right">
-          <span class="table-count">共 {{ total }} 条数据</span>
-        </div>
-      </div>
-
-      <!-- 表格 -->
-      <div class="table-wrapper">
-        <table class="data-table">
-          <thead>
-            <tr>
-              <th class="col-id">ID</th>
-              <th class="col-name">角色名称</th>
-              <th class="col-code">角色编码</th>
-              <th class="col-desc">描述</th>
-              <th class="col-status">状态</th>
-              <th class="col-time">创建时间</th>
-              <th class="col-actions">操作</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-if="loading">
-              <td colspan="7" class="loading-cell">
-                <div class="loading-content">
-                  <div class="loading-spinner"></div>
-                  <span>加载中...</span>
-                </div>
-              </td>
-            </tr>
-            <tr v-else-if="roleList.length === 0">
-              <td colspan="7" class="empty-cell">
-                <div class="empty-content">
-                  <svg viewBox="0 0 64 41" fill="none">
-                    <g transform="translate(0 1)">
-                      <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"/>
-                      <g stroke="var(--color-text-placeholder)" stroke-width="2">
-                        <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"/>
-                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--color-fill)"/>
-                      </g>
-                    </g>
-                  </svg>
-                  <span>暂无数据</span>
-                </div>
-              </td>
-            </tr>
-            <tr v-else v-for="row in roleList" :key="row.id" class="data-row">
-              <td class="col-id">
-                <span class="id-badge">{{ row.id }}</span>
-              </td>
-              <td class="col-name">
-                <span class="role-name">{{ row.name }}</span>
-              </td>
-              <td class="col-code">
-                <Tag type="primary" size="small">{{ row.code }}</Tag>
-              </td>
-              <td class="col-desc">
-                <span class="desc-text">{{ row.description }}</span>
-              </td>
-              <td class="col-status">
-                <div class="status-switch">
-                  <Switch
-                    :model-value="row.status === Status.ENABLED"
-                    @update:model-value="row.status = $event ? Status.ENABLED : Status.DISABLED; handleStatusChange(row)"
-                  />
-                  <span class="status-text" :class="{ enabled: row.status === Status.ENABLED }">
-                    {{ row.status === Status.ENABLED ? '已启用' : '已禁用' }}
-                  </span>
-                </div>
-              </td>
-              <td class="col-time">
-                <span class="time-text">{{ row.createTime }}</span>
-              </td>
-              <td class="col-actions">
-                <Space class="action-buttons">
-                  <Button type="primary" link size="small" @click="handleEdit(row)">
-                    <template #icon>
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
-                        <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
-                      </svg>
-                    </template>
-                    编辑
-                  </Button>
-                  <Popconfirm title="确定删除该角色吗？" @confirm="handleDelete(row.id)">
-                    <Button type="danger" link size="small">
-                      <template #icon>
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                          <polyline points="3,6 5,6 21,6"/>
-                          <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
-                          <line x1="10" y1="11" x2="10" y2="17"/>
-                          <line x1="14" y1="11" x2="14" y2="17"/>
-                        </svg>
-                      </template>
-                      删除
-                    </Button>
-                  </Popconfirm>
-                </Space>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- 分页 -->
-      <div class="pagination-wrapper">
-        <Pagination
-          v-model:current-page="currentPage"
-          v-model:page-size="pageSize"
-          :total="total"
-          :page-sizes="[10, 20, 50, 100]"
-          layout="total, sizes, prev, pager, next"
-          @current-change="getRoleList"
-          @size-change="getRoleList"
-        />
-      </div>
-    </div>
-
-    <!-- 编辑弹窗 -->
-    <Modal v-model="modalVisible" :title="modalTitle" width="520px" class="role-modal">
-      <Form ref="formRef" :model="formData" :rules="rules" label-width="80px" class="role-form">
-        <FormItem label="角色名称" prop="name">
-          <Input v-model="formData.name" placeholder="请输入角色名称" />
-        </FormItem>
-        <FormItem label="角色编码" prop="code">
-          <Input v-model="formData.code" placeholder="请输入角色编码" />
-        </FormItem>
-        <FormItem label="描述">
-          <Input v-model="formData.description" placeholder="请输入描述" />
-        </FormItem>
-        <FormItem label="状态">
-          <div class="status-field">
-            <Switch v-model="formData.status" :active-value="Status.ENABLED" :inactive-value="Status.DISABLED" />
-            <span class="status-label">{{ formData.status === Status.ENABLED ? '启用' : '禁用' }}</span>
-          </div>
-        </FormItem>
-      </Form>
-      <template #footer>
-        <Space>
-          <Button @click="modalVisible = false">取消</Button>
-          <Button type="primary" @click="handleSubmit">确定</Button>
-        </Space>
-      </template>
-    </Modal>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.role-page {
-  padding: 24px;
-  background: var(--bg-color-page);
-  min-height: 100%;
-}
-
-// 搜索区域
-.search-section {
-  background: var(--bg-color);
-  border-radius: var(--border-radius-large);
-  padding: 20px 24px;
-  margin-bottom: 16px;
-  box-shadow: var(--box-shadow-card);
-
-  .search-form {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-
-    :deep(.x-form-item) {
-      margin-bottom: 0;
-    }
-
-    :deep(.x-input),
-    :deep(.x-select) {
-      width: 200px;
-    }
-  }
-}
-
-// 表格区域
-.table-section {
-  background: var(--bg-color);
-  border-radius: var(--border-radius-large);
-  box-shadow: var(--box-shadow-card);
-  overflow: hidden;
-}
-
-.table-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 24px;
-  border-bottom: 1px solid var(--color-border-lighter);
-
-  .toolbar-left {
-    display: flex;
-    gap: 12px;
-  }
-
-  .table-count {
-    font-size: 14px;
-    color: var(--color-text-secondary);
-  }
-}
-
-.table-wrapper {
-  overflow-x: auto;
-}
-
-// 表格样式
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-
-  th, td {
-    padding: 14px 16px;
-    text-align: left;
-    border-bottom: 1px solid var(--color-border-lighter);
-  }
-
-  th {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--color-text-secondary);
-    background: var(--color-fill-light);
-    white-space: nowrap;
-  }
-
-  .data-row {
-    transition: background-color 0.2s;
-
-    &:hover {
-      background: var(--color-primary-light-6);
-    }
-  }
-
-  td {
-    vertical-align: middle;
-  }
-
-  .loading-cell,
-  .empty-cell {
-    padding: 60px 20px;
-  }
-
-  .loading-content,
-  .empty-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
-    color: var(--color-text-placeholder);
-
-    svg {
-      width: 64px;
-      height: 41px;
-    }
-  }
-
-  .loading-spinner {
-    width: 32px;
-    height: 32px;
-    border: 3px solid var(--color-border-lighter);
-    border-top-color: var(--color-primary);
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-  }
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-// 列样式
-.col-id {
-  width: 80px;
-}
-
-.id-badge {
-  display: inline-block;
-  min-width: 32px;
-  padding: 4px 10px;
-  background: var(--color-fill);
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  text-align: center;
-}
-
-.col-name {
-  min-width: 120px;
-}
-
-.role-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.col-code {
-  min-width: 100px;
-}
-
-.col-desc {
-  min-width: 150px;
-}
-
-.desc-text {
-  font-size: 14px;
-  color: var(--color-text-secondary);
-}
-
-.col-status {
-  min-width: 120px;
-}
-
-.status-switch {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.status-text {
-  font-size: 13px;
-  color: var(--color-text-secondary);
-
-  &.enabled {
-    color: var(--color-success);
-  }
-}
-
-.col-time {
-  min-width: 160px;
-}
-
-.time-text {
-  font-size: 13px;
-  color: var(--color-text-secondary);
-}
-
-.col-actions {
-  min-width: 140px;
-}
-
-.action-buttons {
-  :deep(.x-button) {
-    padding: 4px 8px;
-
-    svg {
-      width: 14px;
-      height: 14px;
-      margin-right: 4px;
-    }
-  }
-}
-
-// 分页
-.pagination-wrapper {
-  display: flex;
-  justify-content: flex-end;
-  padding: 16px 24px;
-  border-top: 1px solid var(--color-border-lighter);
-}
-
-// 弹窗表单
-.role-form {
-  padding: 16px 0;
-
-  .status-field {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .status-label {
-    font-size: 14px;
-    color: var(--color-text-secondary);
-  }
-}
-</style>
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import { Form, FormItem, Input, Select, Switch } from '@xto/form'
+import { Tag, Pagination } from '@xto/data'
+import { Modal, Message, Popconfirm } from '@xto/feedback'
+import { Space, Button } from '@xto/base'
+import { Status, StatusOptions } from '@/enums'
+
+// 角色数据类型
+interface Role {
+  id: number
+  name: string
+  code: string
+  description: string
+  status: Status
+  permissions: string[]
+  createTime: string
+}
+
+// Mock 数据
+const mockRoles: Role[] = [
+  { id: 1, name: '超级管理员', code: 'admin', description: '拥有所有权限', status: Status.ENABLED, permissions: ['*'], createTime: '2024-01-01 10:00:00' },
+  { id: 2, name: '编辑', code: 'editor', description: '内容编辑权限', status: Status.ENABLED, permissions: ['user:read', 'user:write'], createTime: '2024-01-02 10:00:00' },
+  { id: 3, name: '访客', code: 'viewer', description: '只读权限', status: Status.ENABLED, permissions: ['user:read'], createTime: '2024-01-03 10:00:00' }
+]
+
+const loading = ref(false)
+const roleList = ref<Role[]>([])
+const total = ref(0)
+const currentPage = ref(1)
+const pageSize = ref(10)
+
+// 搜索条件
+const searchForm = reactive({
+  keyword: '',
+  status: undefined as Status | undefined
+})
+
+// 弹窗
+const modalVisible = ref(false)
+const modalTitle = computed(() => formData.id ? '编辑角色' : '新增角色')
+const formData = reactive({
+  id: 0,
+  name: '',
+  code: '',
+  description: '',
+  status: Status.ENABLED,
+  permissions: [] as string[]
+})
+
+const rules: Record<string, any[]> = {
+  name: [
+    { required: true, message: '请输入角色名称', trigger: 'blur' }
+  ],
+  code: [
+    { required: true, message: '请输入角色编码', trigger: 'blur' }
+  ]
+}
+
+const formRef = ref()
+
+// 获取角色列表
+const getRoleList = () => {
+  loading.value = true
+  setTimeout(() => {
+    let list = [...mockRoles]
+
+    if (searchForm.keyword) {
+      list = list.filter(role =>
+        role.name.includes(searchForm.keyword) ||
+        role.code.includes(searchForm.keyword)
+      )
+    }
+    if (searchForm.status !== undefined) {
+      list = list.filter(role => role.status === searchForm.status)
+    }
+
+    total.value = list.length
+    roleList.value = list.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
+    loading.value = false
+  }, 300)
+}
+
+// 搜索
+const handleSearch = () => {
+  currentPage.value = 1
+  getRoleList()
+}
+
+// 重置
+const handleReset = () => {
+  searchForm.keyword = ''
+  searchForm.status = undefined
+  currentPage.value = 1
+  getRoleList()
+}
+
+// 新增
+const handleAdd = () => {
+  Object.assign(formData, {
+    id: 0,
+    name: '',
+    code: '',
+    description: '',
+    status: Status.ENABLED,
+    permissions: []
+  })
+  modalVisible.value = true
+}
+
+// 编辑
+const handleEdit = (row: Role) => {
+  Object.assign(formData, row)
+  modalVisible.value = true
+}
+
+// 删除
+const handleDelete = (_id: number) => {
+  Message.success('删除成功')
+  getRoleList()
+}
+
+// 提交
+const handleSubmit = async () => {
+  try {
+    await formRef.value?.validate()
+    Message.success(formData.id ? '编辑成功' : '新增成功')
+    modalVisible.value = false
+    getRoleList()
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 状态切换
+const handleStatusChange = (row: Role) => {
+  Message.success(`已${row.status === Status.ENABLED ? '启用' : '禁用'}角色 ${row.name}`)
+}
+
+onMounted(() => {
+  getRoleList()
+})
+</script>
+
+<template>
+  <div class="role-page">
+    <!-- 搜索栏 -->
+    <div class="search-section">
+      <Form :model="searchForm" inline class="search-form">
+        <FormItem label="关键词">
+          <Input
+            v-model="searchForm.keyword"
+            placeholder="角色名称/编码"
+            clearable
+            @keyup.enter="handleSearch"
+          />
+        </FormItem>
+        <FormItem label="状态">
+          <Select
+            v-model="searchForm.status"
+            :options="StatusOptions"
+            placeholder="请选择"
+            clearable
+          />
+        </FormItem>
+        <FormItem>
+          <Space>
+            <Button type="primary" @click="handleSearch">
+              <template #icon>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <circle cx="11" cy="11" r="8"/>
+                  <path d="M21 21l-4.35-4.35"/>
+                </svg>
+              </template>
+              搜索
+            </Button>
+            <Button @click="handleReset">
+              <template #icon>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M3 12a9 9 0 109-9 9.75 9.75 0 00-6.74 2.74L3 8"/>
+                  <path d="M3 3v5h5"/>
+                </svg>
+              </template>
+              重置
+            </Button>
+          </Space>
+        </FormItem>
+      </Form>
+    </div>
+
+    <!-- 表格 -->
+    <div class="table-section">
+      <!-- 工具栏 -->
+      <div class="table-toolbar">
+        <div class="toolbar-left">
+          <Button type="primary" @click="handleAdd">
+            <template #icon>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="12" y1="5" x2="12" y2="19"/>
+                <line x1="5" y1="12" x2="19" y2="12"/>
+              </svg>
+            </template>
+            新增角色
+          </Button>
+        </div>
+        <div class="toolbar-right">
+          <span class="table-count">共 {{ total }} 条数据</span>
+        </div>
+      </div>
+
+      <!-- 表格 -->
+      <div class="table-wrapper">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th class="col-id">ID</th>
+              <th class="col-name">角色名称</th>
+              <th class="col-code">角色编码</th>
+              <th class="col-desc">描述</th>
+              <th class="col-status">状态</th>
+              <th class="col-time">创建时间</th>
+              <th class="col-actions">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="loading">
+              <td colspan="7" class="loading-cell">
+                <div class="loading-content">
+                  <div class="loading-spinner"></div>
+                  <span>加载中...</span>
+                </div>
+              </td>
+            </tr>
+            <tr v-else-if="roleList.length === 0">
+              <td colspan="7" class="empty-cell">
+                <div class="empty-content">
+                  <svg viewBox="0 0 64 41" fill="none">
+                    <g transform="translate(0 1)">
+                      <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"/>
+                      <g stroke="var(--color-text-placeholder)" stroke-width="2">
+                        <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"/>
+                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--color-fill)"/>
+                      </g>
+                    </g>
+                  </svg>
+                  <span>暂无数据</span>
+                </div>
+              </td>
+            </tr>
+            <tr v-else v-for="row in roleList" :key="row.id" class="data-row">
+              <td class="col-id">
+                <span class="id-badge">{{ row.id }}</span>
+              </td>
+              <td class="col-name">
+                <span class="role-name">{{ row.name }}</span>
+              </td>
+              <td class="col-code">
+                <Tag type="primary" size="small">{{ row.code }}</Tag>
+              </td>
+              <td class="col-desc">
+                <span class="desc-text">{{ row.description }}</span>
+              </td>
+              <td class="col-status">
+                <div class="status-switch">
+                  <Switch
+                    :model-value="row.status === Status.ENABLED"
+                    @update:model-value="row.status = $event ? Status.ENABLED : Status.DISABLED; handleStatusChange(row)"
+                  />
+                  <span class="status-text" :class="{ enabled: row.status === Status.ENABLED }">
+                    {{ row.status === Status.ENABLED ? '已启用' : '已禁用' }}
+                  </span>
+                </div>
+              </td>
+              <td class="col-time">
+                <span class="time-text">{{ row.createTime }}</span>
+              </td>
+              <td class="col-actions">
+                <Space class="action-buttons">
+                  <Button type="primary" link size="small" @click="handleEdit(row)">
+                    <template #icon>
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
+                        <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
+                      </svg>
+                    </template>
+                    编辑
+                  </Button>
+                  <Popconfirm title="确定删除该角色吗？" @confirm="handleDelete(row.id)">
+                    <Button type="danger" link size="small">
+                      <template #icon>
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                          <polyline points="3,6 5,6 21,6"/>
+                          <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
+                          <line x1="10" y1="11" x2="10" y2="17"/>
+                          <line x1="14" y1="11" x2="14" y2="17"/>
+                        </svg>
+                      </template>
+                      删除
+                    </Button>
+                  </Popconfirm>
+                </Space>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination-wrapper">
+        <Pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next"
+          @current-change="getRoleList"
+          @size-change="getRoleList"
+        />
+      </div>
+    </div>
+
+    <!-- 编辑弹窗 -->
+    <Modal v-model="modalVisible" :title="modalTitle" width="520px" class="role-modal">
+      <Form ref="formRef" :model="formData" :rules="rules" label-width="80px" class="role-form">
+        <FormItem label="角色名称" prop="name">
+          <Input v-model="formData.name" placeholder="请输入角色名称" />
+        </FormItem>
+        <FormItem label="角色编码" prop="code">
+          <Input v-model="formData.code" placeholder="请输入角色编码" />
+        </FormItem>
+        <FormItem label="描述">
+          <Input v-model="formData.description" placeholder="请输入描述" />
+        </FormItem>
+        <FormItem label="状态">
+          <div class="status-field">
+            <Switch v-model="formData.status" :active-value="Status.ENABLED" :inactive-value="Status.DISABLED" />
+            <span class="status-label">{{ formData.status === Status.ENABLED ? '启用' : '禁用' }}</span>
+          </div>
+        </FormItem>
+      </Form>
+      <template #footer>
+        <Space>
+          <Button @click="modalVisible = false">取消</Button>
+          <Button type="primary" @click="handleSubmit">确定</Button>
+        </Space>
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.role-page {
+  padding: 24px;
+  background: var(--bg-color-page);
+  min-height: 100%;
+}
+
+// 搜索区域
+.search-section {
+  background: var(--bg-color);
+  border-radius: var(--border-radius-large);
+  padding: 20px 24px;
+  margin-bottom: 16px;
+  box-shadow: var(--box-shadow-card);
+
+  .search-form {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+
+    :deep(.x-form-item) {
+      margin-bottom: 0;
+    }
+
+    :deep(.x-input),
+    :deep(.x-select) {
+      width: 200px;
+    }
+  }
+}
+
+// 表格区域
+.table-section {
+  background: var(--bg-color);
+  border-radius: var(--border-radius-large);
+  box-shadow: var(--box-shadow-card);
+  overflow: hidden;
+}
+
+.table-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--color-border-lighter);
+
+  .toolbar-left {
+    display: flex;
+    gap: 12px;
+  }
+
+  .table-count {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+  }
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+// 表格样式
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  th, td {
+    padding: 14px 16px;
+    text-align: left;
+    border-bottom: 1px solid var(--color-border-lighter);
+  }
+
+  th {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    background: var(--color-fill-light);
+    white-space: nowrap;
+  }
+
+  .data-row {
+    transition: background-color 0.2s;
+
+    &:hover {
+      background: var(--color-primary-light-6);
+    }
+  }
+
+  td {
+    vertical-align: middle;
+  }
+
+  .loading-cell,
+  .empty-cell {
+    padding: 60px 20px;
+  }
+
+  .loading-content,
+  .empty-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    color: var(--color-text-placeholder);
+
+    svg {
+      width: 64px;
+      height: 41px;
+    }
+  }
+
+  .loading-spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--color-border-lighter);
+    border-top-color: var(--color-primary);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+// 列样式
+.col-id {
+  width: 80px;
+}
+
+.id-badge {
+  display: inline-block;
+  min-width: 32px;
+  padding: 4px 10px;
+  background: var(--color-fill);
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  text-align: center;
+}
+
+.col-name {
+  min-width: 120px;
+}
+
+.role-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.col-code {
+  min-width: 100px;
+}
+
+.col-desc {
+  min-width: 150px;
+}
+
+.desc-text {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+}
+
+.col-status {
+  min-width: 120px;
+}
+
+.status-switch {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-text {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+
+  &.enabled {
+    color: var(--color-success);
+  }
+}
+
+.col-time {
+  min-width: 160px;
+}
+
+.time-text {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+.col-actions {
+  min-width: 140px;
+}
+
+.action-buttons {
+  :deep(.x-button) {
+    padding: 4px 8px;
+
+    svg {
+      width: 14px;
+      height: 14px;
+      margin-right: 4px;
+    }
+  }
+}
+
+// 分页
+.pagination-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px 24px;
+  border-top: 1px solid var(--color-border-lighter);
+}
+
+// 弹窗表单
+.role-form {
+  padding: 16px 0;
+
+  .status-field {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .status-label {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+  }
+}
+</style>