diff --git a/package-lock.json b/package-lock.json
index 925de1c..ec54964 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "autoprefixer": "^10.4.14",
         "axios": "^1.3.4",
+        "moment": "^2.29.4",
         "pinia": "^2.0.32",
         "postcss-px-to-viewport": "^1.1.1",
         "tdesign-icons-vue-next": "^0.1.5",
@@ -1311,6 +1312,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
@@ -2741,6 +2750,11 @@
         "mime-db": "1.52.0"
       }
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
diff --git a/package.json b/package.json
index c613530..2e76c88 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "autoprefixer": "^10.4.14",
     "axios": "^1.3.4",
+    "moment": "^2.29.4",
     "pinia": "^2.0.32",
     "postcss-px-to-viewport": "^1.1.1",
     "tdesign-icons-vue-next": "^0.1.5",
diff --git a/src/api/user.js b/src/api/user.js
index 205b410..3909b53 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -7,3 +7,20 @@ export const addUserApi = data => {
     data,
   })
 }
+
+export const userListApi = () => {
+  return request({
+    url: `/account/list`,
+    method: 'GET',
+  })
+}
+
+export const deleteUserApi = username => {
+  return request({
+    url: `/account/delete`,
+    method: 'POST',
+    data: {
+      username,
+    },
+  })
+}
diff --git a/src/components/User.vue b/src/components/User.vue
index abe092d..2c0faab 100644
--- a/src/components/User.vue
+++ b/src/components/User.vue
@@ -71,79 +71,20 @@
       <t-table
         bordered
         hover
+        stripe
         tableLayout="auto"
         row-key="id"
-        :data="data"
+        :data="tableData"
         :columns="columns"
         resizable
       />
-      <t-pagination class="page" :total="30" />
     </t-card>
   </div>
 </template>
 
 <script lang="jsx">
-import { MessagePlugin } from 'tdesign-vue-next'
-import { addUserApi } from '@/api/user'
-import {
-  FileCopyIcon,
-  ErrorCircleFilledIcon,
-  CheckCircleFilledIcon,
-  CloseCircleFilledIcon,
-} from 'tdesign-icons-vue-next'
-function copyToClipboard(text) {
-  if (navigator.clipboard) {
-    navigator.clipboard.writeText(text)
-  } else {
-    const textarea = document.createElement('textarea')
-    document.body.appendChild(textarea)
-    textarea.style.position = 'fixed'
-    textarea.style.clip = 'rect(0 0 0 0)'
-    textarea.style.top = '10px'
-    textarea.value = text
-    textarea.select()
-    document.execCommand('copy', true)
-    document.body.removeChild(textarea)
-  }
-  MessagePlugin.success('文本复制成功')
-}
-
-const data = []
-const total = 5
-for (let i = 0; i < total; i++) {
-  data.push({
-    id: i + 1,
-    applicant: ['贾明（kyrieJia）', '张三（threeZhang)', '王芳（fangWang)'][
-      i % 3
-    ],
-    status: i % 3,
-    channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
-    desc: ['单元格文本超出省略设置', '这是普通文本的超出省略'][i % 2],
-    link: '点击查看审批详情',
-    something: '仅标题省略',
-    // 透传 Tooltip Props 到浮层组件
-    ellipsisProps: [
-      'w.cezkdudy@lhll.au',
-      'r.nmgw@peurezgn.sl',
-      'p.cumx@rampblpa.ru',
-    ][i % 3],
-    // 完全自定义超出省略的 Tips 内容
-    ellipsisContent: [
-      '宣传物料制作费用',
-      'algolia 服务报销',
-      '相关周边制作费',
-      '激励奖品快递费',
-    ][i % 4],
-    propsAndContent1: [
-      '2021-11-01',
-      '2021-12-01',
-      '2022-01-01',
-      '2022-02-01',
-      '2022-03-01',
-    ][i % 4],
-    propsAndContent2: [2, 3, 1, 4][i % 4],
-  })
-}
+import { addUserApi, userListApi, deleteUserApi } from '@/api/user'
+import moment from 'moment'
 const INITIAL_DATA = {
   username: '',
   role: '',
@@ -202,109 +143,50 @@ export default {
         ],
         role: [{ required: true, message: '用户角色必填' }],
       },
-      data,
       visible: false,
+      tableData: [],
       columns: [
         {
-          colKey: 'applicant',
-          title: '申请人',
+          colKey: 'username',
+          title: '用户名',
           ellipsis: true,
-        },
-        {
-          colKey: 'status',
-          title: '审批状态',
           width: 120,
-          cell: (h, { row }) => {
-            const statusNameListMap = {
-              0: {
-                label: '审批通过',
-                theme: 'success',
-                icon: <CheckCircleFilledIcon />,
-              },
-              1: {
-                label: '审批失败',
-                theme: 'danger',
-                icon: <CloseCircleFilledIcon />,
-              },
-              2: {
-                label: '审批过期',
-                theme: 'warning',
-                icon: <ErrorCircleFilledIcon />,
-              },
-            }
-            return (
-              <t-tag
-                shape="round"
-                theme={statusNameListMap[row.status].theme}
-                variant="light-outline"
-              >
-                {statusNameListMap[row.status].icon}
-                {statusNameListMap[row.status].label}
-              </t-tag>
-            )
-          },
         },
         {
-          title: '签署方式（超长标题示例）',
-          colKey: 'channel',
-          width: 120,
-          ellipsisTitle: true,
+          colKey: 'nickname',
+          title: '昵称',
+          ellipsis: true,
         },
         {
-          title: '邮箱地址',
-          colKey: 'ellipsisProps',
-          // 浮层浅色背景，方向默认朝下出现
-          ellipsis: {
-            theme: 'light',
-            placement: 'bottom',
+          title: '角色',
+          colKey: 'role',
+          cell: (h, { row }) => {
+            if (row.role == 'ROLE_ADMIN') {
+              return '管理员'
+            } else {
+              return '操作员'
+            }
           },
         },
         {
-          title: '申请事项',
-          colKey: 'ellipsisContent',
-          // ellipsis 定义超出省略的浮层内容，cell 定义单元格内容
-          ellipsis: (h, { row }) => (
-            <div>
-              {row.ellipsisContent}
-              <FileCopyIcon
-                style={{ cursor: 'pointer', marginLeft: '4px' }}
-                onClick={() => copyToClipboard(row.ellipsisContent)}
-              />
-            </div>
-          ),
-        },
-        {
-          title: '审核时间',
-          colKey: 'propsAndContent1',
-          // 支持同时设置 tooltipProps 和 浮层内容,
-          width: 100,
-          ellipsis: {
-            props: {
-              theme: 'light',
-              placement: 'bottom-right',
-            },
-            content: (h, { row }) => (
-              <div>
-                <p>
-                  <b>创建日期:</b> {row.propsAndContent1}
-                </p>
-                <p>
-                  <b>审核时长(天):</b> {row.propsAndContent2}
-                </p>
-              </div>
-            ),
+          title: '创建时间',
+          colKey: 'createTime',
+          ellipsis: true,
+          cell: (h, { row }) => {
+            return moment(row.createTime).format('YYYY-MM-DD')
           },
         },
         {
           title: '操作',
-          colKey: 'link',
-          // 超出省略的内容显示纯文本，不带任何样式和元素
-          ellipsis: (h, { row }) => row.link,
-          // 注意这种 JSX 写法需设置 <script lang="jsx" setup>
           cell: (h, { row }) => (
-            <a href="/vue-next/components/table" target="_blank">
-              {row.link}
-            </a>
+            <div>
+              <t-button
+                theme="danger"
+                onClick={() => this.delUser(row.username)}
+              >
+                删除
+              </t-button>
+            </div>
           ),
         },
       ],
@@ -318,6 +200,15 @@ export default {
     onReset() {
       this.$message.success('重置成功')
     },
+    async delUser(username) {
+      const res = await deleteUserApi(username)
+      if (res?.code == 200) {
+        if (res?.data?.result) {
+          this.$message.success('删除成功！')
+          this.getUserList()
+        }
+      }
+    },
     async onSubmit({ validateResult, firstError }) {
       if (validateResult === true) {
         // 新增用户
@@ -325,6 +216,7 @@ export default {
         if (res?.code == 200) {
           this.visible = false
           this.$message.success('提交成功')
+          this.getUserList()
         } else {
           this.$message.error(res.msg)
         }
@@ -332,6 +224,17 @@ export default {
         this.$message.warning(firstError)
       }
     },
+    async getUserList() {
+      const res = await userListApi()
+      if (res?.code == 200) {
+        this.tableData = res.data
+      } else {
+        this.$message.error('获取用户列表失败')
+      }
+    },
+  },
+  mounted() {
+    this.getUserList()
   },
 }
 </script>
diff --git a/yarn.lock b/yarn.lock
index 651354a..0061883 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -811,6 +811,11 @@
   dependencies:
     "mime-db" "1.52.0"
 
+"moment@^2.29.4":
+  "integrity" "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+  "resolved" "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz"
+  "version" "2.29.4"
+
 "ms@2.1.2":
   "integrity" "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
   "resolved" "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz"