用户管理界面初始化提交

src/Manager/LeftBar.vue

@@ -45,7 +45,7 @@ const items = reactive([
         getItem('新闻展示', '10'),
         getItem('用户推荐', '11'),
     ], 'submenu'),
-    getItem('信息管理', 'sub4', () => h(SettingOutlined), [
+    getItem('信息管理', 'sub3', () => h(SettingOutlined), [
         getItem('项目信息管理', '12'),
         getItem('团队信息管理', '13'),
         getItem('新闻信息管理', '14'),
@@ -53,7 +53,7 @@ const items = reactive([
 ]);
 
 const state = reactive({
-    rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
+    rootSubmenuKeys: ['sub1', 'sub2', 'sub3'],
     openKeys: ['sub1'],
     selectedKeys: [],
 });

src/Manager/components/User.vue

@@ -1,3 +1,173 @@
-<template>
-用户管理
-</template>
+<template xmlns="">
+  <div class="main">
+    <div class="input">
+      <a-input class="first-input" v-model:value="value1" addonBefore="关键字" placeholder="请输入用户账号或姓名" />
+      <a-input v-model:value="value2" addonBefore="手机号码" placeholder="请输入手机号码"/>
+    </div>
+    <div class="edit">
+      <a-button class="query-button"><SearchOutlined />查询</a-button>
+      <a-button class="add-button"><PlusOutlined />新增用户</a-button>
+      <a-button class="delete-button"><DeleteOutlined />删除用户</a-button>
+    </div>
+    <div class="table">
+      <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" />
+    </div>
+  </div>
+</template>
+
+
+<script setup>
+import { watch, ref,computed,unref } from 'vue';
+import { Table } from 'ant-design-vue';
+import { SearchOutlined,PlusOutlined,DeleteOutlined} from '@ant-design/icons-vue';
+const value1 = ref('');
+const value2 = ref('');
+
+watch(value1, () => {
+  console.log(value1.value);
+});
+watch(value2, () => {
+  console.log(value2.value);
+});
+
+
+const columns = [
+  {
+    title: '序号',
+    dataIndex: 'id',
+  },
+  {
+    title: '账号昵称',
+    dataIndex: 'name',
+  },
+  {
+    title: '用户名',
+    dataIndex: 'username',
+  },
+  {
+    title: '电话',
+    dataIndex: 'tel',
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updatetime',
+  },
+  {
+    title: '用户状态',
+    dataIndex: 'state',
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+  },
+];
+const data = [];
+for (let i = 0; i < 46; i++) {
+  data.push({
+    key: i,
+    name: `Edward King ${i}`,
+    age: 32,
+    address: `London, Park Lane no. ${i}`,
+  });
+}
+const selectedRowKeys = ref([]); // Check here to configure the default column
+
+const onSelectChange = changableRowKeys => {
+  console.log('selectedRowKeys changed: ', changableRowKeys);
+  selectedRowKeys.value = changableRowKeys;
+};
+const rowSelection = computed(() => {
+  return {
+    selectedRowKeys: unref(selectedRowKeys),
+    onChange: onSelectChange,
+    hideDefaultSelections: true,
+    selections: [
+      Table.SELECTION_ALL,
+      Table.SELECTION_INVERT,
+      Table.SELECTION_NONE,
+      {
+        key: 'odd',
+        text: 'Select Odd Row',
+        onSelect: changableRowKeys => {
+          let newSelectedRowKeys = [];
+          newSelectedRowKeys = changableRowKeys.filter((_key, index) => {
+            if (index % 2 !== 0) {
+              return false;
+            }
+            return true;
+          });
+          selectedRowKeys.value = newSelectedRowKeys;
+        },
+      },
+      {
+        key: 'even',
+        text: 'Select Even Row',
+        onSelect: changableRowKeys => {
+          let newSelectedRowKeys = [];
+          newSelectedRowKeys = changableRowKeys.filter((_key, index) => {
+            if (index % 2 !== 0) {
+              return true;
+            }
+            return false;
+          });
+          selectedRowKeys.value = newSelectedRowKeys;
+        },
+      },
+    ],
+  };
+});
+</script>
+
+
+<style scoped>
+.main {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+}
+
+.input {
+  width: 30vw;
+  margin-top: 20px;
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+}
+
+.first-input {
+  margin-right: 60px;
+  margin-left: 20px;
+}
+
+
+.edit {
+  width: 20vw;
+  display: grid;
+  grid-template-columns: repeat(3, auto); /* 将容器分为三列，每个按钮占一列 */
+  column-gap: 20px;
+}
+
+.query-button {
+  background-color: dodgerblue;
+  color:white;
+  margin-left: 20px;
+}
+
+.add-button {
+  background-color: limegreen;
+  color: white;
+  margin-left: 20px;
+}
+
+.delete-button {
+  background-color: #CD5C5C;
+  color: white;
+  margin-left: 20px;
+}
+
+.table {
+  width: 100%; /* 设置表格宽度为100% */
+  height: 400px; /* 设置表格高度为400px */
+}
+</style>