From e59a11c05e06ca0c4ab645de68799ec2d37cdf7a Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Thu, 27 Nov 2025 22:49:49 +0800
Subject: [PATCH] feat: page

---
 src/api/maomaotou/cat/index.js       |   9 +
 src/api/maomaotou/post/index.js      |   9 +
 src/api/maomaotou/user/index.js      |  17 ++
 src/router/index.js                  |  75 +++++++++
 src/utils/index.js                   |   2 +-
 src/views/maomao/cat/cat/index.vue   | 185 +++++++++++++++++++++
 src/views/maomao/post/post/index.vue | 232 ++++++++++++++++++++++++++
 src/views/maomao/user/chat/index.vue | 240 +++++++++++++++++++++++++++
 src/views/maomao/user/user/index.vue | 210 +++++++++++++++++++++++
 9 files changed, 978 insertions(+), 1 deletion(-)
 create mode 100644 src/api/maomaotou/cat/index.js
 create mode 100644 src/api/maomaotou/post/index.js
 create mode 100644 src/api/maomaotou/user/index.js
 create mode 100644 src/views/maomao/cat/cat/index.vue
 create mode 100644 src/views/maomao/post/post/index.vue
 create mode 100644 src/views/maomao/user/chat/index.vue
 create mode 100644 src/views/maomao/user/user/index.vue

diff --git a/src/api/maomaotou/cat/index.js b/src/api/maomaotou/cat/index.js
new file mode 100644
index 0000000..647a8e5
--- /dev/null
+++ b/src/api/maomaotou/cat/index.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/management/api/maomaotou/cat/list',
+    method: 'get',
+    params: data,
+  })
+}
diff --git a/src/api/maomaotou/post/index.js b/src/api/maomaotou/post/index.js
new file mode 100644
index 0000000..98dad77
--- /dev/null
+++ b/src/api/maomaotou/post/index.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/management/api/maomaotou/post/list',
+    method: 'get',
+    params: data,
+  })
+}
diff --git a/src/api/maomaotou/user/index.js b/src/api/maomaotou/user/index.js
new file mode 100644
index 0000000..fc02551
--- /dev/null
+++ b/src/api/maomaotou/user/index.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/management/api/maomaotou/user/list',
+    method: 'get',
+    params: data,
+  })
+}
+
+export function getChatList(data) {
+  return request({
+    url: '/management/api/maomaotou/user/chat/list',
+    method: 'get',
+    params: data,
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 768a3ba..10ff993 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -48,6 +48,81 @@ export const asyncRoutes = [
       },
     ],
   },
+  {
+    path: '/maomaotou',
+    component: Layout,
+    redirect: 'noRedirect',
+    name: 'CxshMini',
+    meta: { title: '猫猫头', icon: 'cat', permissions: ['admin'] },
+    children: [
+      {
+        path: 'cat',
+        component: EmptyLayout,
+        alwaysShow: true,
+        redirect: 'noRedirect',
+        name: 'cat',
+        meta: {
+          title: '猫猫',
+          icon: 'cat',
+          permissions: ['admin'],
+        },
+        children: [
+          {
+            path: 'cat',
+            name: 'Cat',
+            component: () => import('@/views/maomao/cat/cat/index'),
+            meta: { title: '猫猫' },
+          },
+        ],
+      },
+      {
+        path: 'post',
+        component: EmptyLayout,
+        alwaysShow: true,
+        redirect: 'noRedirect',
+        name: 'Post',
+        meta: {
+          title: '帖子',
+          icon: 'post',
+          permissions: ['admin'],
+        },
+        children: [
+          {
+            path: 'post',
+            name: 'Post',
+            component: () => import('@/views/maomao/post/post/index'),
+            meta: { title: '帖子' },
+          },
+        ],
+      },
+      {
+        path: 'user',
+        component: EmptyLayout,
+        alwaysShow: true,
+        redirect: 'noRedirect',
+        name: 'User',
+        meta: {
+          title: '用户',
+          icon: 'user',
+          permissions: ['admin'],
+        },
+        children: [
+          {
+            path: 'user',
+            name: 'User',
+            component: () => import('@/views/maomao/user/user/index'),
+            meta: { title: '用户' },
+          },
+          {
+            path: 'userChat',
+            name: 'UserChat',
+            component: () => import('@/views/maomao/user/chat/index'),
+            meta: { title: '聊天' },
+          },
+        ],
+      },
+    ],
+  },
   {
     path: '/cxshMini',
     component: Layout,
diff --git a/src/utils/index.js b/src/utils/index.js
index a6b37c8..b04d547 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -83,7 +83,7 @@ export function formatTime(time, option) {
   if (option) {
     return parseTime(time, option)
   } else {
-    return `${time.getMonth() + 1}月${time.getDate()}日${time.getHours()}时${time.getMinutes()}分`
+    return `${time.getFullYear()}/${time.getMonth() + 1}/${time.getDate()} ${time.getHours()}:${time.getMinutes()}`
   }
 }
 
diff --git a/src/views/maomao/cat/cat/index.vue b/src/views/maomao/cat/cat/index.vue
new file mode 100644
index 0000000..822f39f
--- /dev/null
+++ b/src/views/maomao/cat/cat/index.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="cat-container">
+    <vab-query-form>
+      <vab-query-form-left-panel :span="12">
+        <!-- <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button> -->
+        <!-- <el-button icon="el-icon-delete" type="danger" @click="handleDelete">批量删除</el-button> -->
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model.trim="queryForm.permission" clearable placeholder="请输入查询条件" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+
+    <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
+      <!-- <el-table-column show-overflow-tooltip type="selection" /> -->
+      <el-table-column align="center" label="头像" width="100">
+        <template slot-scope="scope">
+          <!-- 使用 show-overflow-tooltip 显示图片，并添加 tooltip -->
+          <el-tooltip class="item" :content="scope.row.name" effect="dark" placement="top">
+            <img alt="image" :src="host + scope.row.avatar" style="width: 50px; height: 50px; object-fit: cover; border-radius: 50%" />
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column align="left" label="猫咪信息" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div>
+            <div>
+              <strong>名称：</strong>
+              {{ row.name }}
+            </div>
+            <div>
+              <strong>品种：</strong>
+              {{ row.breed }}
+            </div>
+            <div>
+              <strong>年龄：</strong>
+              {{ row.age }}
+            </div>
+            <div>
+              <strong>描述：</strong>
+              {{ row.description }}
+            </div>
+            <div>
+              <strong>性别：</strong>
+              {{ row.gender ? (row.gender === 'male' ? '男' : '女') : '未公开' }}
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="铲屎官" show-overflow-tooltip>
+        <template #default="{ row }">
+          <img alt="image" :src="row.owner.avatar" style="width: 50px; height: 50px; object-fit: cover; border-radius: 50%" />
+        </template>
+      </el-table-column>
+      <el-table-column align="left" label="铲屎官信息" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div>
+            <div>
+              <strong>名称：</strong>
+              {{ row.owner.nickname }}
+            </div>
+            <div>
+              <strong>宣言</strong>
+              {{ row.owner.bio }}
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="创建时间" show-overflow-tooltip>
+        <template #default="{ row }">
+          {{ formatTime(row.createdAt) }}
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="操作" show-overflow-tooltip width="200">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+  import { getList } from '@/api/maomaotou/cat'
+  import { formatTime } from '@/utils'
+
+  export default {
+    name: 'Cat',
+    data() {
+      return {
+        host: 'https://file.lihailezzc.com/',
+        list: null,
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          permission: '',
+        },
+        timeOutID: null,
+      }
+    },
+    created() {
+      this.fetchData()
+    },
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    methods: {
+      formatTime,
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleEdit(row) {
+        if (row.id) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: [row.id] })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids: ids.split(',') })
+              this.$baseMessage(msg, 'success')
+              this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data } = await getList(this.queryForm)
+        this.list = data.list
+        this.total = data.totalCount
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 300)
+      },
+    },
+  }
+</script>
diff --git a/src/views/maomao/post/post/index.vue b/src/views/maomao/post/post/index.vue
new file mode 100644
index 0000000..e015904
--- /dev/null
+++ b/src/views/maomao/post/post/index.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="cat-container">
+    <vab-query-form>
+      <!-- <vab-query-form-left-panel :span="12"> -->
+      <!-- <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button> -->
+      <!-- <el-button icon="el-icon-delete" type="danger" @click="handleDelete">批量删除</el-button> -->
+      <!-- </vab-query-form-left-panel> -->
+      <vab-query-form-left-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-select v-model="queryForm.ownerId" clearable filterable placeholder="请选择作者">
+              <el-option v-for="author in authorList" :key="author.id" :label="author.nickname" :value="author.id">
+                <!-- 自定义内容 -->
+                <template #default>
+                  <div class="author-option">
+                    <img alt="avatar" class="author-avatar" :src="author.avatar" />
+                    <span class="author-name">{{ author.nickname }}</span>
+                  </div>
+                </template>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!-- <el-form-item>
+            <el-input v-model.trim="queryForm.permission" clearable placeholder="请输入查询条件" />
+          </el-form-item> -->
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-left-panel>
+    </vab-query-form>
+
+    <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
+      <!-- <el-table-column show-overflow-tooltip type="selection" /> -->
+      <el-table-column align="center" label="内容" prop="content" show-overflow-tooltip />
+      <el-table-column align="center" label="图片" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div class="image-grid">
+            <img v-for="(img, index) in row.images" :key="index" alt="image" class="grid-image" :src="host + img" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="作者" show-overflow-tooltip>
+        <template #default="{ row }">
+          <img alt="image" :src="row.owner.avatar" style="width: 50px; height: 50px; object-fit: cover; border-radius: 50%" />
+        </template>
+      </el-table-column>
+      <el-table-column align="left" label="作者信息" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div>
+            <div>
+              <strong>名称：</strong>
+              {{ row.owner.nickname }}
+            </div>
+            <div>
+              <strong>宣言</strong>
+              {{ row.owner.bio }}
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="left" label="动态信息" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div>
+            <div>
+              <strong>点赞数：</strong>
+              {{ row.likeCount || 0 }}
+            </div>
+            <div>
+              <strong>评论数：</strong>
+              {{ row.commentCount || 0 }}
+            </div>
+            <div>
+              <strong>审核状态：</strong>
+              <el-tag v-if="row.auditStatus === 'approved'" type="success">已通过</el-tag>
+              <el-tag v-else-if="row.auditStatus === 'rejected'" type="danger">未通过</el-tag>
+              <el-tag v-else type="info">未审核</el-tag>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="创建时间" show-overflow-tooltip>
+        <template #default="{ row }">
+          {{ formatTime(row.createdAt) }}
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="操作" show-overflow-tooltip width="200">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+  import { getList } from '@/api/maomaotou/post'
+  import { getList as getUserList } from '@/api/maomaotou/user'
+  import { formatTime } from '@/utils'
+
+  export default {
+    name: 'Cat',
+    data() {
+      return {
+        host: 'https://file.lihailezzc.com/',
+        list: null,
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        authorList: [],
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          permission: '',
+          userId: '',
+        },
+        timeOutID: null,
+      }
+    },
+    created() {
+      this.fetchData()
+      this.fetchAuthorList()
+    },
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    methods: {
+      formatTime,
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleEdit(row) {
+        if (row.id) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: [row.id] })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids: ids.split(',') })
+              this.$baseMessage(msg, 'success')
+              this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data } = await getList(this.queryForm)
+        this.list = data.list
+        this.total = data.totalCount
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 300)
+      },
+      async fetchAuthorList() {
+        const { data } = await getUserList({
+          pageNo: 1,
+          pageSize: 1000,
+        })
+        this.authorList = data.list
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .author-option {
+    display: flex;
+    align-items: center;
+  }
+  .author-avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-right: 8px;
+  }
+  .author-name {
+    font-size: 14px;
+  }
+  .image-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .grid-image {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 8px;
+  }
+</style>
diff --git a/src/views/maomao/user/chat/index.vue b/src/views/maomao/user/chat/index.vue
new file mode 100644
index 0000000..99e8314
--- /dev/null
+++ b/src/views/maomao/user/chat/index.vue
@@ -0,0 +1,240 @@
+<template>
+  <div class="cat-chat-container">
+    <vab-query-form>
+      <!-- <vab-query-form-left-panel :span="12"> -->
+      <!-- <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button> -->
+      <!-- <el-button icon="el-icon-delete" type="danger" @click="handleDelete">批量删除</el-button> -->
+      <!-- </vab-query-form-left-panel> -->
+      <vab-query-form-left-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-select v-model="queryForm.fromUserId" clearable filterable placeholder="请选择发送者">
+              <el-option v-for="author in authorList" :key="author.id" :label="author.nickname" :value="author.id">
+                <!-- 自定义内容 -->
+                <template #default>
+                  <div class="author-option">
+                    <img alt="avatar" class="author-avatar" :src="author.avatar" />
+                    <span class="author-name">{{ author.nickname }}</span>
+                  </div>
+                </template>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="queryForm.toUserId" clearable filterable placeholder="请选择接收者">
+              <el-option v-for="author in authorList" :key="author.id" :label="author.nickname" :value="author.id">
+                <!-- 自定义内容 -->
+                <template #default>
+                  <div class="author-option">
+                    <img alt="avatar" class="author-avatar" :src="author.avatar" />
+                    <span class="author-name">{{ author.nickname }}</span>
+                  </div>
+                </template>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-left-panel>
+    </vab-query-form>
+
+    <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
+      <!-- <el-table-column show-overflow-tooltip type="selection" /> -->
+      <el-table-column align="center" label="发送者" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div class="avatar-nickname">
+            <img alt="avatar" class="avatar-image" :src="row.fromUser.avatar" />
+            <div class="nickname-text">
+              {{ row.fromUser.nickname }}
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="接收者" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div class="avatar-nickname">
+            <img alt="avatar" class="avatar-image" :src="row.toUser.avatar" />
+            <div class="nickname-text">
+              {{ row.toUser.nickname }}
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="类型" show-overflow-tooltip>
+        <template #default="{ row }">
+          {{ row.type === 'text' ? '文本' : '图片' }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="内容" prop="content" show-overflow-tooltip />
+      <el-table-column align="center" label="创建时间" show-overflow-tooltip>
+        <template #default="{ row }">
+          {{ formatTime(row.createdAt) }}
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="操作" show-overflow-tooltip width="200">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+  import { getList as getUserList, getChatList } from '@/api/maomaotou/user'
+  import { formatTime } from '@/utils'
+
+  export default {
+    name: 'CatChat',
+    data() {
+      return {
+        host: 'https://file.lihailezzc.com/',
+        list: null,
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        authorList: [],
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          permission: '',
+          fromUserId: '',
+          toUserId: '',
+        },
+        timeOutID: null,
+      }
+    },
+    created() {
+      this.fetchData()
+      this.fetchAuthorList()
+    },
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    methods: {
+      formatTime,
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleEdit(row) {
+        if (row.id) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: [row.id] })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids: ids.split(',') })
+              this.$baseMessage(msg, 'success')
+              this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data } = await getChatList(this.queryForm)
+        this.list = data.list
+        this.total = data.totalCount
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 300)
+      },
+      async fetchAuthorList() {
+        const { data } = await getUserList({
+          pageNo: 1,
+          pageSize: 1000,
+        })
+        this.authorList = data.list
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .author-option {
+    display: flex;
+    align-items: center;
+  }
+  .author-avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-right: 8px;
+  }
+  .author-name {
+    font-size: 14px;
+  }
+  .image-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .grid-image {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 8px;
+  }
+  .avatar-nickname {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .avatar-image {
+    width: 50px;
+    height: 50px;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+
+  .nickname-text {
+    margin-top: 4px;
+    font-size: 14px;
+    color: #333;
+  }
+</style>
diff --git a/src/views/maomao/user/user/index.vue b/src/views/maomao/user/user/index.vue
new file mode 100644
index 0000000..7f9b805
--- /dev/null
+++ b/src/views/maomao/user/user/index.vue
@@ -0,0 +1,210 @@
+<template>
+  <div class="cat-user-container">
+    <vab-query-form>
+      <!-- <vab-query-form-left-panel :span="12"> -->
+      <!-- <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button> -->
+      <!-- <el-button icon="el-icon-delete" type="danger" @click="handleDelete">批量删除</el-button> -->
+      <!-- </vab-query-form-left-panel> -->
+      <vab-query-form-left-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model.trim="queryForm.permission" clearable placeholder="请输入查询条件" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-left-panel>
+    </vab-query-form>
+
+    <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
+      <el-table-column align="center" label="头像" show-overflow-tooltip>
+        <template #default="{ row }">
+          <img alt="image" :src="row.avatar" style="width: 50px; height: 50px; object-fit: cover; border-radius: 50%" />
+        </template>
+      </el-table-column>
+      <el-table-column align="left" label="信息" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div>
+            <div>
+              <strong>名称：</strong>
+              {{ row.nickname }}
+            </div>
+            <div>
+              <strong>宣言：</strong>
+              {{ row.bio }}
+            </div>
+            <div>
+              <strong>性别：</strong>
+              {{ row.gender ? (row.gender === 'male' ? '男' : '女') : '未公开' }}
+            </div>
+            <div>
+              <strong>平台：</strong>
+              {{ row.platform }}
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="left" label="社交信息" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div>
+            <div>
+              <strong>粉丝：</strong>
+              {{ row.followers }}
+            </div>
+            <div>
+              <strong>关注数：</strong>
+              {{ row.followings }}
+            </div>
+            <div>
+              <strong>好友：</strong>
+              {{ row.friends }}
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="背景图" show-overflow-tooltip>
+        <template #default="{ row }">
+          <img v-if="row.cover" :src="host + row.cover" style="width: 50px; height: 50px; object-fit: cover" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="创建时间" show-overflow-tooltip>
+        <template #default="{ row }">
+          {{ formatTime(row.createdAt) }}
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="操作" show-overflow-tooltip width="200">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+  import { getList } from '@/api/maomaotou/user'
+  import { formatTime } from '@/utils'
+
+  export default {
+    name: 'User',
+    data() {
+      return {
+        host: 'https://file.lihailezzc.com/',
+        list: null,
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          permission: '',
+        },
+        timeOutID: null,
+      }
+    },
+    created() {
+      this.fetchData()
+    },
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    methods: {
+      formatTime,
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleEdit(row) {
+        if (row.id) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: [row.id] })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids: ids.split(',') })
+              this.$baseMessage(msg, 'success')
+              this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data } = await getList(this.queryForm)
+        this.list = data.list
+        this.total = data.totalCount
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 300)
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .author-option {
+    display: flex;
+    align-items: center;
+  }
+  .author-avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-right: 8px;
+  }
+  .author-name {
+    font-size: 14px;
+  }
+  .image-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .grid-image {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 8px;
+  }
+</style>