fix：组件初始化

src/components/DataTable/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <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="column in columns" v-if="column.slotName" :key="column.slotName"
+        v-slot:[column.slotName]="{ record, rowIndex, column }">
+        <slot :name="column.slotName" v-bind="{ record, rowIndex, column }"></slot>
+      </template>
+    </a-table>
+    <a-pagination :current="pagination.current" :total="pagination.total" :page-size="pagination.pageSize"
+      @change="handlePageChange" @show-size-change="handleSizeChange" />
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits } from 'vue';
+
+// 定义接收的 props
+const props = defineProps({
+  data: Array,
+  columns: Array,
+  rowKey: String,
+  loading: Boolean,
+  pagination: Object
+});
+
+// 定义 emit 事件
+const emit = defineEmits(['sorterChange', 'select', 'selectAll', 'expand', 'pageChange', 'sizeChange']);
+
+// 分页事件处理
+const handlePageChange = (page) => {
+  emit('pageChange', page);
+};
+
+const handleSizeChange = (current, size) => {
+  emit('sizeChange', current, size);
+};
+
+// 排序事件处理
+const handleSorterChange = (sorter) => {
+  emit('sorterChange', sorter);
+};
+
+// 选择事件处理
+const handleSelect = (selected, record) => {
+  emit('select', selected, record);
+};
+
+const handleSelectAll = (selected, records) => {
+  emit('selectAll', selected, records);
+};
+
+// 展开事件处理
+const handleExpand = (expanded, record) => {
+  emit('expand', expanded, record);
+};
+</script>

src/views/common/NavItem.vue

@@ -20,7 +20,6 @@ const props = defineProps({
 const is_active = computed(() => {
   const target = props.to;
   const route = useRoute();
-
   const cur_path = route.path;
 
   if (target === '/chat') {
@@ -63,10 +62,12 @@ const img_src = computed(() => {
 
   color: var(--color-text-1);
 }
+
 .nav-item:hover {
   background-color: var(--color-fill-4);
   color: #fff;
 }
+
 .nav-item.is-active {
   background-color: rgb(var(--primary-6));
   color: #fff;
@@ -79,6 +80,7 @@ const img_src = computed(() => {
 
   margin-right: 5px;
 }
+
 .nav-item-icon img {
   width: 18px;
 }

src/views/layout/ContentContainer.vue

@@ -9,6 +9,6 @@
   background-color: var(--color-fill-2);
   flex-grow: 1;
 
-  padding: 30px;
+  padding: 16px;
 }
 </style>

src/views/permission/PermissionAccount.vue

@@ -1,11 +1,60 @@
 <template>
   <ContentContainer>
     <BreadCrumbMenu :current_label="'账号'" />
-    <div class="permission-account">权限管理: 账号</div>
+    <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>
   </ContentContainer>
 </template>
 
 <script setup>
 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', slotName: 'nameSlot' },
+  { title: '年龄', dataIndex: 'age', slotName: 'ageSlot' },
+]);
+
+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>

vite.config.mjs

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 
 import vue from '@vitejs/plugin-vue';
 import vueDevTools from 'vite-plugin-vue-devtools';
+import path from 'path'; // 导入 path 模块
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -38,6 +39,11 @@ export default defineConfig({
 
     emptyOutDir: true
   },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'), // 配置@指向src目录
+    }
+  },
   plugins: [
     vue(),
     /**