feat:统一表格

src/assets/styles/common.scss

@@ -3,6 +3,9 @@
   width: 100%;
   &.table {
     overflow: hidden; //表格需要hidden
+    display: grid;
+    grid-template-rows: 50px 1fr;
+    gap:$normolGap;
   }
   &.white-bg {
     background: #fff;

src/assets/styles/variable.scss

@@ -4,4 +4,9 @@ $primaryColorPressed: #2B7AEB;// 比主色深10%的深蓝色
 $primaryColorSuppl: #5A95FF;   // 介于主色和hover之间的蓝色
 // 字体相关颜色
 $titleTextColor:#808080; //标题颜色
-$dashLineColor:#E7E7E7; //border-color的颜色
+$dashLineColor:#E7E7E7; //border-color的颜色
+// 间距相关
+$miniGap:8px;
+$smallGap:12px;
+$normolGap:16px;
+$bigGap:24px;

src/views/role/pages/Auth.vue

@@ -1,8 +1,88 @@
 <template>
-  <div class="main__container white-bg table">权限管理菜单内容</div>
+  <div class="main__container table">
+    <header class="table-header">
+      <n-input-group style="width:440px">
+        <n-input :style="{ width: '50%' }" placeholder="请输入用户名称" v-model="roleName" />
+        <n-button strong secondary type="primary">
+          搜索
+          <template #icon>
+            <n-icon>
+              <SearchOutline />
+            </n-icon>
+          </template>
+        </n-button>
+      </n-input-group>
+    </header>
+    <main class="table-main" ref="tableMainRef">
+      <n-data-table v-if="height" :columns="columns" :data="data" :max-height="`${height}px`"
+        :min-height="`${height}px`" />
+      <div class="table-main__pagination">
+        <n-pagination v-model:page="pagination.page" v-model:page-size="pagination.pageSize" :page-count="data.length"
+          show-size-picker :page-sizes="[10, 20, 30, 40]" />
+      </div>
+    </main>
+  </div>
 </template>
 
 <script setup lang='ts'>
+import { SearchOutline } from '@vicons/ionicons5';
+
+const tableMainRef = ref<HTMLElement | null>(null);
+const roleName = ref('');
+const pagination = reactive({
+  pageSize: 10,
+  page: 1,
+});
+
+const columns = [
+  {
+    title: 'Name',
+    key: 'name'
+  },
+  {
+    title: 'Age',
+    key: 'age'
+  },
+  {
+    title: 'Address',
+    key: 'address'
+  }
+];
+const height = ref(null);
+const data = Array.from({ length: 46 }).map((_, index) => ({
+  key: index,
+  name: `Edward King ${index}`,
+  age: 32,
+  address: `London, Park Lane no. ${index}`
+}));
+onMounted(() => {
+  if (tableMainRef.value) {
+    height.value = tableMainRef.value.clientHeight - 64 - 50; //减去两次内边距 - 分页的大小
+  }
+});
+
 </script>
 <style scoped lang='scss'>
+.table-header {
+  background: #fff;
+  border-radius: 4px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 $normolGap;
+}
+
+.table-main {
+  background: #fff;
+  padding: $normolGap;
+  border-radius: 4px;
+  height: calc(100% - 2 * $normolGap);
+
+  &__pagination {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}
 </style>