feat：用户页面

src/modules/permission/AccountPage.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <Action></Action>
+    <DataTable :data="tableData" :columns="tableColumns" row-key="id" :loading="isLoading" :pagination="paginationProps"
+      @sorterChange="handleSorterChange" @select="handleSelect" @selectAll="handleSelectAll" @expand="handleExpand"
+      @pageChange="handlePageChange" @sizeChange="handleSizeChange">
+    </DataTable>
+  </div>
+
+
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import DataTable from '@/views/permission-common/DataTable.vue';
+import Action from '@/views/permission-common/Action.vue';
+
+// 示例数据
+const tableData = ref([
+  { id: 1, name: '李雷', age: 25 },
+  { id: 2, name: '韩梅梅', age: 30 },
+]);
+
+const tableColumns = ref([
+  { title: '用户名', dataIndex: 'name', titleSlotName: 'nameSlot' },
+  { title: '角色', dataIndex: 'age', titleSlotName: 'ageSlot' },
+  { title: '所属部门', dataIndex: 'dept', titleSlotName: 'deptSlot' },
+  { title: '状态', dataIndex: 'status', titleSlotName: 'statusSlot' },
+  { title: '操作', dataIndex: 'operation', titleSlotName: 'operationSlot' },
+]);
+
+const isLoading = ref(false);
+const paginationProps = ref({
+  current: 1,
+  total: 100,
+  pageSize: 10,
+});
+
+// 事件处理函数
+const handleSorterChange = (sorter) => {
+  console.log('排序变化:', sorter);
+};
+
+const handleSelect = (selected, record) => {
+  console.log('选择:', selected, record);
+};
+
+const handleSelectAll = (selected, records) => {
+  console.log('选择所有:', selected, records);
+};
+
+const handleExpand = (expanded, record) => {
+  console.log('展开:', expanded, record);
+};
+
+const handlePageChange = (page) => {
+  console.log('当前页面:', page);
+};
+
+const handleSizeChange = (current, size) => {
+  console.log('当前页面和页面大小:', current, size);
+};
+</script>
+
+
+<style lang="css" scoped></style>

src/views/PermissionAccount.vue

@@ -1,64 +1,14 @@
 <template>
   <ContentContainer>
     <BreadCrumbMenu :current_label="'账号'" />
-    <DataTable :data="tableData" :columns="tableColumns" row-key="id" :loading="isLoading" :pagination="paginationProps"
-      @sorterChange="handleSorterChange" @select="handleSelect" @selectAll="handleSelectAll" @expand="handleExpand"
-      @pageChange="handlePageChange" @sizeChange="handleSizeChange">
-    </DataTable>
+
+    <AccountPage />
   </ContentContainer>
 </template>
 
 <script setup>
-import { ref } from 'vue';
 import ContentContainer from './layout/ContentContainer.vue';
 import BreadCrumbMenu from './common/BreadCrumbMenu.vue';
-import DataTable from '@/components/DataTable/index.vue';
-
-// 示例数据
-const tableData = ref([
-  { id: 1, name: '李雷', age: 25 },
-  { id: 2, name: '韩梅梅', age: 30 },
-]);
-
-const tableColumns = ref([
-  { title: '用户名', dataIndex: 'name', titleSlotName: 'nameSlot' },
-  { title: '角色', dataIndex: 'age', titleSlotName: 'ageSlot' },
-  { title: '所属部门', dataIndex: 'dept', titleSlotName: 'deptSlot' },
-  { title: '状态', dataIndex: 'status', titleSlotName: 'statusSlot' },
-  { title: '操作', dataIndex: 'operation', titleSlotName: 'operationSlot' },
-]);
-
-const isLoading = ref(false);
-const paginationProps = ref({
-  current: 1,
-  total: 100,
-  pageSize: 10,
-});
-
-// 事件处理函数
-const handleSorterChange = (sorter) => {
-  console.log('排序变化:', sorter);
-};
 
-const handleSelect = (selected, record) => {
-  console.log('选择:', selected, record);
-};
-
-const handleSelectAll = (selected, records) => {
-  console.log('选择所有:', selected, records);
-};
-
-const handleExpand = (expanded, record) => {
-  console.log('展开:', expanded, record);
-};
-
-const handlePageChange = (page) => {
-  console.log('当前页面:', page);
-};
-
-const handleSizeChange = (current, size) => {
-  console.log('当前页面和页面大小:', current, size);
-};
+import AccountPage from '@/modules/permission/AccountPage.vue';
 </script>
-
-<style lang="css" scoped></style>

src/views/common/BreadCrumbMenu.vue

@@ -1,11 +1,9 @@
 <template>
-  <div>
-    <a-breadcrumb>
-      <a-breadcrumb-item>Home</a-breadcrumb-item>
-      <a-breadcrumb-item>权限管理</a-breadcrumb-item>
-      <a-breadcrumb-item>{{ current_label }}</a-breadcrumb-item>
-    </a-breadcrumb>
-  </div>
+  <a-breadcrumb class="breadcrumb">
+    <a-breadcrumb-item><icon-apps /></a-breadcrumb-item>
+    <a-breadcrumb-item>权限管理</a-breadcrumb-item>
+    <a-breadcrumb-item>{{ current_label }}</a-breadcrumb-item>
+  </a-breadcrumb>
 </template>
 
 <script setup>
@@ -14,4 +12,8 @@ const props = defineProps({
 });
 </script>
 
-<style lang="css" scoped></style>
+<style lang="css" scoped>
+.breadcrumb {
+  margin-bottom: 16px;
+}
+</style>

src/views/permission-common/Actions.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="table-page-search-wrapper">
+    <div class="search-wrapper">
+      <div>
+        <a-input v-model="formModel.name" :style="{ width: '320px' }" :placeholder="$t('请输入')" />
+      </div>
+      <div>
+        <a-button type="primary" style="margin-right: 20px; margin-left: 10px" @click="search">
+          <template #icon>
+            <icon-search />
+          </template>
+          查询
+        </a-button>
+        <a-button @click="reset">
+          <template #icon>
+            <icon-refresh />
+          </template>
+          重制
+        </a-button>
+      </div>
+    </div>
+    <div class="search-wrapper">
+      <div>
+        <a-space>
+          <a-button type="primary" :align="'right'" @click="operation(0)">+ 新建用户组</a-button>
+        </a-space>
+      </div>
+      <div class="wrapper-icon">
+        <a-tooltip :content="$t('searchTable.actions.refresh')">
+          <div class="action-icon" @click="search">
+            <icon-refresh size="18" />
+          </div>
+        </a-tooltip>
+        <a-dropdown @select="handleSelectDensity">
+          <a-tooltip :content="$t('searchTable.actions.density')">
+            <div class="action-icon">
+              <icon-line-height size="18" />
+            </div>
+          </a-tooltip>
+          <template #content>
+            <a-doption v-for="item in densityList" :key="item.value" :value="item.value"
+              :class="{ active: item.value === size }">
+              <span>{{ item.name }}</span>
+            </a-doption>
+          </template>
+        </a-dropdown>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>

src/components/DataTable/index.vue → src/views/permission-common/DataTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <a-card>
     <a-table :columns="columns" :data="data" :row-key="rowKey" :loading="loading" :pagination="false"
       @sorter-change="handleSorterChange" @select="handleSelect" @select-all="handleSelectAll" @expand="handleExpand">
       <template v-for="item in columns" :key="item.slotName" #[item.slotName]="{ record, rowIndex, column }">
@@ -14,7 +14,7 @@
     </a-table>
     <a-pagination class="pagination" v-if="pagination.total" :current="pagination.current" :total="pagination.total"
       :page-size="pagination.pageSize" @change="handlePageChange" @show-size-change="handleSizeChange" />
-  </div>
+  </a-card>
 </template>
 
 <script setup>