diff --git a/src/api/ApiService.js b/src/api/ApiService.js
index 767998ac47f58b0f06c650f95a4d4f403043994e..751637635281e5ff8de002860695ddae791744ce 100644
--- a/src/api/ApiService.js
+++ b/src/api/ApiService.js
@@ -1,4 +1,5 @@
 import axios from 'axios'
+
 const BASE_URL = 'http://localhost:80'
 // 创建一个名为 ApiService 的对象，包含您的异步方法
 const ApiService = {
@@ -107,19 +108,26 @@ const ApiService = {
 		return await axios.get(BASE_URL + '/csdn/followFans/deleteFollow')
 	},
 	//我的图片
-	async queryPic(currentPage, pageSize, picType) {
-		return await axios.get(BASE_URL + '/picInfo/page', {
-			params: {
-				page: currentPage,
-				pageSize: pageSize,
-				picType: picType,
-			},
+	async queryPic(currentPage, pageSize, formInline) {
+		return await axios.post(BASE_URL + '/picInfo/page', {
+			page: currentPage,
+			pageSize: pageSize,
+			type: formInline.type == '全部' ? '' : formInline.type,
+			picName: formInline.picName,
 		})
 	},
-	async editPicConfirm(currentRowId, type) {
+	async editPicConfirm(currentRowId, type, picName) {
 		return await axios.post(BASE_URL + '/picInfo/update', {
 			id: currentRowId,
 			type: type,
+			picName: picName,
+		})
+	},
+
+	async batchUpdatePic(ids, type) {
+		return await axios.post(BASE_URL + '/picInfo/batchUpdatePic', {
+			ids: ids,
+			type: type,
 		})
 	},
 	//余额管理
@@ -149,5 +157,38 @@ const ApiService = {
 			endDate: formInline.accountDate != null ? formInline.accountDate[1] : '',
 		})
 	},
+	//用户管理
+	async multiTriplet(userNames) {
+		return await axios.post(BASE_URL + '/csdn/multiTriplet', userNames)
+	},
+	async autoReply() {
+		return await axios.get(BASE_URL + '/csdn/autoReply')
+	},
+	async singleTriplet(userName) {
+		return await axios.get(BASE_URL + '/csdn/singleTriplet?username=' + userName)
+	},
+
+	//私信管理
+	async dealMessageOne(userName) {
+		return await axios.get(BASE_URL + '/csdn/message/dealMessageOne?userName=' + userName)
+	},
+	async dealMessage() {
+		return await axios.get(BASE_URL + '/csdn/message/dealMessage')
+	},
+	async dealLikeCollect() {
+		return await axios.get(BASE_URL + '/csdn/likeCollect/dealLikeCollect')
+	},
+	async acquireMessage() {
+		return await axios.get(BASE_URL + '/csdn/message/acquireMessage')
+	},
+	async messagePage(currentPage, pageSize, formInline) {
+		return await axios.post('http://localhost:80/csdn/message/page', {
+			page: currentPage,
+			pageSize: pageSize,
+			userName: formInline.userName,
+			nickName: formInline.nickName,
+			hasReplied: formInline.hasRepliedInfo == -1 ? null : formInline.hasRepliedInfo,
+		})
+	},
 }
 export default ApiService
diff --git a/src/components/MyLogin.vue b/src/components/MyLogin.vue
index 3cd1fe75a022d15607fec6ffcc75b0409d276fe0..210a7d559bb1689cf1724074fe6cbfca78e64352 100644
--- a/src/components/MyLogin.vue
+++ b/src/components/MyLogin.vue
@@ -1,109 +1,113 @@
 <template>
-	<div class="login-container">
-		<div class="login-box">
-			<!-- 头像区域 -->
-			<div class="text-center avatar-box">
-				<img src="../assets/kwan.png" class="img-thumbnail avatar" alt="kwan的解忧杂货铺" />
-			</div>
+  <div class="login-container">
+    <div class="login-box">
+      <!-- 头像区域 -->
+      <div class="text-center avatar-box">
+        <img src="../assets/kwan.png" class="img-thumbnail avatar" alt="kwan的解忧杂货铺"/>
+      </div>
 
-			<!-- 表单区域 -->
-			<div class="form-login p-4">
-				<!-- 登录名称 -->
-				<div class="form-group form-inline">
-					<label for="username">登录名称</label>
-					<input type="text" class="form-control ml-2" id="username" placeholder="请输入登录名称" autocomplete="off" v-model.trim="username" />
-				</div>
-				<!-- 登录密码 -->
-				<div class="form-group form-inline">
-					<label for="password">登录密码</label>
-					<input type="password" class="form-control ml-2" id="password" placeholder="请输入登录密码" v-model.trim="password" />
-				</div>
-				<!-- 登录和重置按钮 -->
-				<div class="form-group form-inline d-flex justify-content-end">
-					<button type="button" class="btn btn-secondary mr-2" @click="reset">重置</button>
-					<button type="button" class="btn btn-primary" @click="login">登录</button>
-				</div>
-			</div>
-		</div>
-	</div>
+      <!-- 表单区域 -->
+      <div class="form-login p-4">
+        <!-- 登录名称 -->
+        <div class="form-group form-inline">
+          <label for="username">登录名称</label>
+          <input type="text" class="form-control ml-2" id="username" placeholder="请输入登录名称" autocomplete="off"
+                 v-model.trim="username"/>
+        </div>
+        <!-- 登录密码 -->
+        <div class="form-group form-inline">
+          <label for="password">登录密码</label>
+          <input type="password" class="form-control ml-2" id="password" placeholder="请输入登录密码" v-model.trim="password"/>
+        </div>
+        <!-- 登录和重置按钮 -->
+        <div class="form-group form-inline d-flex justify-content-end">
+          <button type="button" class="btn btn-secondary mr-2" @click="reset">重置</button>
+          <button type="button" class="btn btn-primary" @click="login">登录</button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'MyLogin',
-    data() {
-        return {
-            username: '',
-            password: '',
-        }
+  name: 'MyLogin',
+  data() {
+    return {
+      username: '',
+      password: '',
+    }
+  },
+  methods: {
+    reset() {
+      this.username = ''
+      this.password = ''
     },
-    methods: {
-        reset() {
-            this.username = ''
-            this.password = ''
-        },
-        login() {
-            if (this.username === 'admin' && this.password === '888888') {
-                // 登录成功
-                // 1. 存储 token
-                localStorage.setItem('token', 'Bearer xxxx')
-                // 2. 跳转到后台主页
-                this.$router.push('/home')
-            } else {
-                // 登录失败
-                localStorage.removeItem('token')
-                this.errorMsg('登录失败，请检查您的用户名或密码；由于用户名密码是写死的，需要在项目中查看！！！')
-            }
-        },
-        errorMsg(msg) {
-            this.$message({
-                showClose: true,
-                message: msg,
-                type: 'error',
-            })
-        },
+    login() {
+      if (this.username === 'admin' && this.password === '716288') {
+        // 登录成功
+        // 1. 存储 token
+        localStorage.setItem('token', 'Bearer xxxx')
+        // 2. 跳转到后台主页
+        this.$router.push('/home')
+      } else {
+        // 登录失败
+        localStorage.removeItem('token')
+        this.errorMsg('登录失败，请检查您的用户名或密码；由于用户名密码是写死的，需要在项目中查看！！！')
+      }
     },
+    errorMsg(msg) {
+      this.$message({
+        showClose: true,
+        message: msg,
+        type: 'error',
+      })
+    },
+  },
 }
 </script>
 
 <style lang="less" scoped>
 .login-container {
-	background-color: #35495e;
-	height: 100%;
-	.login-box {
-		width: 400px;
-		height: 250px;
-		background-color: #fff;
-		border-radius: 3px;
-		position: absolute;
-		left: 50%;
-		top: 50%;
-		transform: translate(-50%, -50%);
-		box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
-		.form-login {
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			box-sizing: border-box;
-		}
-	}
+  background-color: #35495e;
+  height: 100%;
+
+  .login-box {
+    width: 400px;
+    height: 250px;
+    background-color: #fff;
+    border-radius: 3px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
+
+    .form-login {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
 }
 
 .form-control {
-	flex: 1;
+  flex: 1;
 }
 
 .avatar-box {
-	position: absolute;
-	width: 100%;
-	top: -65px;
-	left: 0;
-	.avatar {
-		width: 120px;
-		height: 120px;
-		border-radius: 50% !important;
-		box-shadow: 0 0 6px #efefef;
-	}
+  position: absolute;
+  width: 100%;
+  top: -65px;
+  left: 0;
+
+  .avatar {
+    width: 120px;
+    height: 120px;
+    border-radius: 50% !important;
+    box-shadow: 0 0 6px #efefef;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/menus/MyAlgorithmic.vue b/src/components/menus/MyAlgorithmic.vue
index f24c96dadb69e3368f70db179f1fd8a178b2b96c..5b68f56af8c7413df0d485f52065c55f8542dafd 100644
--- a/src/components/menus/MyAlgorithmic.vue
+++ b/src/components/menus/MyAlgorithmic.vue
@@ -2,73 +2,14 @@
 	<div>
 		<el-container>
 			<el-main>
-				<el-dialog title="新增算法问题" :visible.sync="dialogFormVisible" style="width: 100%">
-					<el-form :model="form" class="custom-form">
-						<el-form-item label="算法问题" :label-width="formLabelWidth" class="form-item">
-							<el-input v-model="form.questionName" autocomplete="off" style="width: 100%"></el-input>
-						</el-form-item>
-						<el-form-item label="问题类型" :label-width="formLabelWidth" class="form-item">
-							<el-select v-model="form.questionType" placeholder="请选择问题类型">
-								<el-option v-for="item in allOptions" :key="item" :label="item" :value="item"></el-option>
-							</el-select>
-						</el-form-item>
-						<el-form-item label="重要程度" :label-width="formLabelWidth" class="form-item">
-							<el-input v-model="form.degreeOfImportance" autocomplete="off" style="width: 100%"></el-input>
-						</el-form-item>
-						<el-form-item label="难易程度" :label-width="formLabelWidth" class="form-item">
-							<el-input v-model="form.degreeOfDifficulty" autocomplete="off" style="width: 100%"></el-input>
-						</el-form-item>
-						<el-form-item label="难易分数" :label-width="formLabelWidth" class="form-item">
-							<el-input v-model="form.difficultyOfScore" autocomplete="off" style="width: 100%"></el-input>
-						</el-form-item>
-						<el-form-item label="力扣题号" :label-width="formLabelWidth" class="form-item">
-							<el-input v-model="form.leetcodeNumber" autocomplete="off" style="width: 100%"></el-input>
-						</el-form-item>
-						<el-form-item label="力扣链接" :label-width="formLabelWidth" class="form-item">
-							<el-input v-model="form.leetcodeLink" autocomplete="off" style="width: 100%"></el-input>
-						</el-form-item>
-					</el-form>
-					<div slot="footer" class="dialog-footer">
-						<el-button @click="dialogFormVisible = false">取 消</el-button>
-						<el-button type="primary" @click="handleConfirm(0)">确 定</el-button>
-					</div>
-				</el-dialog>
-				<el-dialog class="red-title" :visible.sync="dialogMutiFormVisible">
-					<div class="red-title" slot="title">批量新增算法问题(多个问题换行填写)</div>
-					<el-form :model="form" class="custom-form">
-						<el-form-item label="算法问题" :label-width="formLabelWidth" class="form-item">
-							<el-input type="textarea" v-model="form.questionName" autocomplete="off" :rows="5" :cols="30" style="width: 100%"></el-input>
-						</el-form-item>
-					</el-form>
-					<div slot="footer" class="dialog-footer">
-						<el-button @click="dialogMutiFormVisible = false">取 消</el-button>
-						<el-button type="primary" @click="handleConfirm(1)">确 定</el-button>
-					</div>
-				</el-dialog>
-				<el-dialog title="随机一题" :visible.sync="randomFormVisible" style="width: 100%">
-					<el-descriptions class="margin-top" title="随机选择的题目如下:" :column="3" border>
-						<el-descriptions-item v-model="randomAlgorithmic.questionName">
-							<template slot="label">题目名称</template>
-							{{ randomAlgorithmic.questionName }}
-						</el-descriptions-item>
-						<el-descriptions-item>
-							<template slot="label">力扣题号</template>
-							{{ randomAlgorithmic.leetcodeNumber }}
-						</el-descriptions-item>
-						<el-descriptions-item show-overflow-tooltip>
-							<template slot="label">力扣链接</template>
-							<a :href="randomAlgorithmic.leetcodeLink" target="_blank">{{ randomAlgorithmic.leetcodeLink }}</a>
-						</el-descriptions-item>
-					</el-descriptions>
-					<div slot="footer" class="dialog-footer">
-						<el-button @click="randomFormVisible = false">取 消</el-button>
-					</div>
-				</el-dialog>
 				<el-form :inline="true" :model="formInline" class="demo-form-inline">
 					<el-form-item>
 						<el-input clearable v-model="formInline.questionName" placeholder="请输入问题" @keydown.enter.native="algorithmPage"></el-input>
 					</el-form-item>
-					<el-select v-model="formInline.questionType" placeholder="请选择" @change="algorithmPage">
+					<el-select v-model="formInline.questionType" clearable placeholder="请选择" @change="algorithmPage">
+						<el-option v-for="item in questionType" :key="item" :label="item" :value="item"></el-option>
+					</el-select>
+					<el-select v-model="formInline.tag" clearable multiple placeholder="请选择">
 						<el-option v-for="item in allOptions" :key="item" :label="item" :value="item"></el-option>
 					</el-select>
 					<el-form-item>
@@ -76,12 +17,79 @@
 					</el-form-item>
 					<el-form-item>
 						<el-button type="primary" @click="prepareRandom">随机一题</el-button>
+						<el-dialog title="随机一题" :visible.sync="randomFormVisible" style="width: 100%">
+							<el-descriptions class="margin-top" title="随机选择的题目如下:" :column="3" border>
+								<el-descriptions-item v-model="randomAlgorithmic.questionName">
+									<template slot="label">题目名称</template>
+									{{ randomAlgorithmic.questionName }}
+								</el-descriptions-item>
+								<el-descriptions-item>
+									<template slot="label">力扣题号</template>
+									{{ randomAlgorithmic.leetcodeNumber }}
+								</el-descriptions-item>
+								<el-descriptions-item show-overflow-tooltip>
+									<template slot="label">力扣链接</template>
+									<a :href="randomAlgorithmic.leetcodeLink" target="_blank">{{ randomAlgorithmic.leetcodeLink }}</a>
+								</el-descriptions-item>
+							</el-descriptions>
+							<div slot="footer" class="dialog-footer">
+								<el-button @click="randomFormVisible = false">取 消</el-button>
+							</div>
+						</el-dialog>
 					</el-form-item>
 					<el-form-item>
 						<el-button type="primary" @click="prepareAdd">新增</el-button>
+						<el-dialog title="新增算法问题" :visible.sync="dialogFormVisible" style="width: 100%">
+							<el-form :model="form" class="custom-form">
+								<el-form-item label="算法问题" :label-width="formLabelWidth" class="form-item">
+									<el-input v-model="form.questionName" autocomplete="off" style="width: 100%"></el-input>
+								</el-form-item>
+								<el-form-item label="问题标签" :label-width="formLabelWidth" class="form-item">
+									<el-select v-model="form.tag" multiple placeholder="请选择">
+										<el-option v-for="item in allOptions" :key="item" :label="item" :value="item"></el-option>
+									</el-select>
+								</el-form-item>
+								<el-form-item label="问题集" :label-width="formLabelWidth" class="form-item">
+									<el-select v-model="form.questionType" placeholder="请选择">
+										<el-option v-for="item in questionType" :key="item" :label="item" :value="item"></el-option>
+									</el-select>
+								</el-form-item>
+								<el-form-item label="重要程度" :label-width="formLabelWidth" class="form-item">
+									<el-input v-model="form.degreeOfImportance" autocomplete="off" style="width: 100%"></el-input>
+								</el-form-item>
+								<el-form-item label="难易程度" :label-width="formLabelWidth" class="form-item">
+									<el-input v-model="form.degreeOfDifficulty" autocomplete="off" style="width: 100%"></el-input>
+								</el-form-item>
+								<el-form-item label="难易分数" :label-width="formLabelWidth" class="form-item">
+									<el-input v-model="form.difficultyOfScore" autocomplete="off" style="width: 100%"></el-input>
+								</el-form-item>
+								<el-form-item label="力扣题号" :label-width="formLabelWidth" class="form-item">
+									<el-input v-model="form.leetcodeNumber" autocomplete="off" style="width: 100%"></el-input>
+								</el-form-item>
+								<el-form-item label="力扣链接" :label-width="formLabelWidth" class="form-item">
+									<el-input v-model="form.leetcodeLink" autocomplete="off" style="width: 100%"></el-input>
+								</el-form-item>
+							</el-form>
+							<div slot="footer" class="dialog-footer">
+								<el-button @click="dialogFormVisible = false">取 消</el-button>
+								<el-button type="primary" @click="handleConfirm(0)">确 定</el-button>
+							</div>
+						</el-dialog>
 					</el-form-item>
 					<el-form-item>
 						<el-button type="primary" @click="prepareMutiAdd">批量新增</el-button>
+						<el-dialog class="red-title" :visible.sync="dialogMutiFormVisible">
+							<div class="red-title" slot="title">批量新增算法问题(多个问题换行填写)</div>
+							<el-form :model="form" class="custom-form">
+								<el-form-item label="算法问题" :label-width="formLabelWidth" class="form-item">
+									<el-input type="textarea" v-model="form.questionName" autocomplete="off" :rows="5" :cols="30" style="width: 100%"></el-input>
+								</el-form-item>
+							</el-form>
+							<div slot="footer" class="dialog-footer">
+								<el-button @click="dialogMutiFormVisible = false">取 消</el-button>
+								<el-button type="primary" @click="handleConfirm(1)">确 定</el-button>
+							</div>
+						</el-dialog>
 					</el-form-item>
 				</el-form>
 				<el-table border :data="algorithmicList" v-loading="loading">
@@ -92,11 +100,23 @@
 						</template>
 					</el-table-column>
 					<el-table-column prop="leetcodeNumber" label="力扣题号" width="100" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="questionType" label="问题类型" show-overflow-tooltip align="center">
+
+					<el-table-column prop="tags" label="标签" width="150px" show-overflow-tooltip>
+						<template slot-scope="scope">
+							<div class="tag-flex">
+								<div :style="{ 'margin-left': index > 0 ? '2px' : '0', 'margin-bottom': '2px' }" v-for="(tag, index) in scope.row.tags" :key="index">
+									<el-tag :type="getTagType(tag)">{{ tag }}</el-tag>
+								</div>
+							</div>
+						</template>
+					</el-table-column>
+
+					<el-table-column prop="questionType" label="问题集" show-overflow-tooltip align="center">
 						<template slot-scope="scope">
 							<span :style="{ color: getColorForValue(scope.row.questionType) }" v-html="scope.row.questionType"></span>
 						</template>
 					</el-table-column>
+
 					<el-table-column sortable prop="degreeOfImportance" label="重要程度" show-overflow-tooltip></el-table-column>
 					<el-table-column prop="degreeOfDifficulty" label="难易程度" show-overflow-tooltip></el-table-column>
 					<el-table-column prop="difficultyOfScore" label="难易分数" show-overflow-tooltip></el-table-column>
@@ -108,17 +128,25 @@
 					</el-table-column>
 					<el-table-column prop="操作" label="操作">
 						<template slot-scope="props">
-							<el-button type="success" @click.prevent="preEdit(props.row.id, props.row.questionName, props.row.questionType, props.row.degreeOfImportance, props.row.degreeOfDifficulty, props.row.difficultyOfScore, props.row.leetcodeNumber, props.row.leetcodeLink)" width="200">编辑</el-button>
+							<el-button type="success" @click.prevent="preEdit(props.row.id, props.row.questionName, props.row.questionType, props.row.tags, props.row.degreeOfImportance, props.row.degreeOfDifficulty, props.row.difficultyOfScore, props.row.leetcodeNumber, props.row.leetcodeLink)" width="200">编辑</el-button>
 							<el-dialog title="编辑算法问题" :visible.sync="editVisible">
 								<el-form :model="form">
 									<el-form-item label="算法问题" :label-width="formLabelWidth" class="form-item">
 										<el-input v-model="form.questionName" autocomplete="off" style="width: 100%"></el-input>
 									</el-form-item>
-									<el-form-item label="问题类型" :label-width="formLabelWidth" class="form-item">
-										<el-select v-model="form.questionType" placeholder="请选择活动区域">
+
+									<el-form-item label="问题标签" :label-width="formLabelWidth" class="form-item">
+										<el-select v-model="form.tag" multiple placeholder="请选择">
 											<el-option v-for="item in allOptions" :key="item" :label="item" :value="item"></el-option>
 										</el-select>
 									</el-form-item>
+
+									<el-form-item label="问题集" :label-width="formLabelWidth" class="form-item">
+										<el-select v-model="form.questionType" placeholder="请选择">
+											<el-option v-for="item in questionType" :key="item" :label="item" :value="item"></el-option>
+										</el-select>
+									</el-form-item>
+
 									<el-form-item label="重要程度" :label-width="formLabelWidth" class="form-item">
 										<el-input v-model="form.degreeOfImportance" autocomplete="off" style="width: 100%"></el-input>
 									</el-form-item>
@@ -161,326 +189,358 @@
 <script>
 import axios from 'axios'
 export default {
-	name: 'MyInterview',
+    name: 'MyInterview',
+
+    data() {
+        return {
+            // 用户列表数据
+            algorithmicList: [],
+            randomAlgorithmic: {
+                questionName: '',
+                leetcodeNumber: '',
+                leetcodeLink: '',
+            },
+            loading: false,
+            elementui_page_component_key: 0,
+            currentPage: Number(localStorage.getItem('algorithmLastPage')) || 1,
+            pageSize: 9,
+            total: 0,
+            formInline: {
+                questionName: '',
+                questionType: '',
+                tag: [],
+            },
+            allOptions: ['hash表', '递归', '数组', '栈', '回溯', '双指针', '二分法', '滑动窗口', '动态规划', '链表', '二叉树', '组合'],
+            questionType: ['HOT-100', '周赛', '网络'],
+            // 新增的内容
+            dialogFormVisible: false,
+            randomFormVisible: false,
+            dialogMutiFormVisible: false,
+            form: {
+                questionName: '',
+                questionType: '',
+                degreeOfImportance: 5,
+                degreeOfDifficulty: 1,
+                difficultyOfScore: 1200,
+                leetcodeNumber: '',
+                leetcodeLink: '',
+                tag: [],
+            },
+            formLabelWidth: '120px',
+            dialogVisible: false,
+            editVisible: false,
+            currentRowId: null,
+            colorMap: {}, // 创建一个空的颜色映射关系对象
+        }
+    },
+    watch: {
+        formInline: {
+            handler(newVal, oldVal) {
+                this.currentPage = 1
+                localStorage.setItem('algorithmLastPage', this.currentPage)
+                this.algorithmPage()
+            },
+            deep: true,
+        },
+        // 监听currentPage的变化，将新值保存到localStorage中
+        currentPage(newPage) {
+            localStorage.setItem('algorithmLastPage', newPage.toString())
+        },
+    },
+    created() {
+        //获取问题类型的枚举
+        this.algorithmPage()
+    },
+    mounted() {
+        this.currentPage = 1
+    },
+    methods: {
+        prepareAdd() {
+            this.form.questionName = ''
+            this.form.questionType = ''
+            this.dialogFormVisible = true
+        },
+        prepareRandom() {
+            this.randomAlgorithmic = []
+            this.randomFormVisible = true
+            this.interviewRandom()
+        },
+        prepareMutiAdd() {
+            this.form.questionName = ''
+            this.form.questionType = ''
+            this.dialogMutiFormVisible = true
+        },
+
+        prepareDelete(id) {
+            this.currentRowId = id
+            this.dialogVisible = true
+        },
+        preEdit(id, questionName, questionType, tags, degreeOfImportance, degreeOfDifficulty, difficultyOfScore, leetcodeNumber, leetcodeLink) {
+            this.form.questionName = questionName
+            this.form.degreeOfImportance = degreeOfImportance
+            this.form.degreeOfDifficulty = degreeOfDifficulty
+            this.form.difficultyOfScore = difficultyOfScore
+            this.form.leetcodeNumber = leetcodeNumber
+            this.form.leetcodeLink = leetcodeLink
+            this.form.questionType = questionType
+            this.form.tag = tags
+            this.currentRowId = id
+            this.editVisible = true
+        },
+        handleClose(done) {
+            this.$confirm('确认关闭？')
+                .then((_) => {
+                    done()
+                })
+                .catch((_) => {})
+        },
+        handleConfirm(addType) {
+            this.dialogFormVisible = false // 关闭对话框
+            this.dialogMutiFormVisible = false
+            this.addQuestion(addType) // 发送请求
+        },
 
-	data() {
-		return {
-			// 用户列表数据
-			algorithmicList: [],
-			randomAlgorithmic: {
-				questionName: '',
-				leetcodeNumber: '',
-				leetcodeLink: '',
-			},
-			loading: false,
-			elementui_page_component_key: 0,
-			currentPage: Number(localStorage.getItem('algorithmLastPage')) || 1,
-			pageSize: 9,
-			total: 0,
-			formInline: {
-				questionName: '',
-				questionType: '',
-			},
-			allOptions: ['hash表', '回溯', '双指针', '二分法', '滑动窗口', '动态规划', '链表', '二叉树'],
-			// 新增的内容
-			dialogFormVisible: false,
-			randomFormVisible: false,
-			dialogMutiFormVisible: false,
-			form: {
-				questionName: '',
-				questionType: '',
-				degreeOfImportance: 5,
-				degreeOfDifficulty: 1,
-				difficultyOfScore: 1200,
-				leetcodeNumber: '',
-				leetcodeLink: '',
-			},
-			formLabelWidth: '120px',
-			dialogVisible: false,
-			editVisible: false,
-			currentRowId: null,
-			colorMap: {}, // 创建一个空的颜色映射关系对象
-		}
-	},
-	watch: {
-		formInline: {
-			handler(newVal, oldVal) {
-				this.currentPage = 1
-				localStorage.setItem('algorithmLastPage', this.currentPage)
-				this.algorithmPage()
-			},
-			deep: true,
-		},
-		// 监听currentPage的变化，将新值保存到localStorage中
-		currentPage(newPage) {
-			localStorage.setItem('algorithmLastPage', newPage.toString())
-		},
-	},
-	created() {
-		//获取问题类型的枚举
-		this.algorithmPage()
-	},
-	mounted() {
-		this.currentPage = 1
-	},
-	methods: {
-		prepareAdd() {
-			this.form.questionName = ''
-			this.form.questionType = ''
-			this.dialogFormVisible = true
-		},
-		prepareRandom() {
-			this.randomAlgorithmic = []
-			this.randomFormVisible = true
-			this.interviewRandom()
-		},
-		prepareMutiAdd() {
-			this.form.questionName = ''
-			this.form.questionType = ''
-			this.dialogMutiFormVisible = true
-		},
+        async algorithmPage() {
+            this.loading = true
+            const { data: res } = await axios.post('http://localhost:80/algorithmicProblem/page', {
+                page: this.currentPage,
+                pageSize: this.pageSize,
+                questionName: this.formInline.questionName,
+                questionType: this.formInline.questionType,
+                tag: this.formInline.tag,
+            })
+            if (res.code === 200) {
+                this.total = res.result.totalElements
+                res.result.content.forEach((item) => {
+                    item.tags = item && item.tag ? item.tag.split(',') : []
+                })
+                this.algorithmicList = res.result.content
+            }
+            this.loading = false
+        },
 
-		prepareDelete(id) {
-			this.currentRowId = id
-			this.dialogVisible = true
-		},
-		preEdit(id, questionName, questionType, degreeOfImportance, degreeOfDifficulty, difficultyOfScore, leetcodeNumber, leetcodeLink) {
-			this.form.questionName = questionName
-			this.form.degreeOfImportance = degreeOfImportance
-			this.form.degreeOfDifficulty = degreeOfDifficulty
-			this.form.difficultyOfScore = difficultyOfScore
-			this.form.leetcodeNumber = leetcodeNumber
-			this.form.leetcodeLink = leetcodeLink
-			this.form.questionType = questionType
-			this.currentRowId = id
-			this.editVisible = true
-		},
-		handleClose(done) {
-			this.$confirm('确认关闭？')
-				.then((_) => {
-					done()
-				})
-				.catch((_) => {})
-		},
-		handleConfirm(addType) {
-			this.dialogFormVisible = false // 关闭对话框
-			this.dialogMutiFormVisible = false
-			this.addQuestion(addType) // 发送请求
-		},
+        async addQuestion(addType) {
+            try {
+                this.loading = true
+                const { data: res } = await axios.post('http://localhost:80/algorithmicProblem/add', {
+                    addType: addType,
+                    questionName: this.form.questionName,
+                    questionType: this.form.questionType,
+                    tag: this.form.tag,
+                    degreeOfImportance: this.form.degreeOfImportance,
+                    degreeOfDifficulty: this.form.degreeOfDifficulty,
+                    difficultyOfScore: this.form.difficultyOfScore,
+                    leetcodeNumber: this.form.leetcodeNumber,
+                    leetcodeLink: this.form.leetcodeLink,
+                })
+                if (res.code === 200) {
+                    this.currentPage = 1
+                    this.form.questionName = ''
+                    this.form.questionType = 0
+                    this.form.degreeOfImportance = 5
+                    this.form.degreeOfDifficulty = 1
+                    this.form.difficultyOfScore = 1200
+                    this.form.leetcodeNumber = ''
+                    this.form.leetcodeLink = ''
+                    this.form.tag = []
+                    this.algorithmPage()
+                } else {
+                    console.error('Received non-200 status code', res)
+                    this.errorMsg(res.message)
+                }
+            } catch (error) {
+                console.error('An error occurred while adding the questionName:', error)
+                // 异常处理逻辑
+            } finally {
+                this.loading = false
+            }
+        },
 
-		async addQuestion(addType) {
-			try {
-				this.loading = true
-				const { data: res } = await axios.post('http://localhost:80/algorithmicProblem/add', {
-					addType: addType,
-					questionName: this.form.questionName,
-					questionType: this.form.questionType,
-					degreeOfImportance: this.form.degreeOfImportance,
-					degreeOfDifficulty: this.form.degreeOfDifficulty,
-					difficultyOfScore: this.form.difficultyOfScore,
-					leetcodeNumber: this.form.leetcodeNumber,
-					leetcodeLink: this.form.leetcodeLink,
-				})
-				if (res.code === 200) {
-					this.currentPage = 1
-					this.form.questionName = ''
-					this.form.questionType = 0
-					this.form.degreeOfImportance = 5
-					this.form.degreeOfDifficulty = 1
-					this.form.difficultyOfScore = 1200
-					this.form.leetcodeNumber = ''
-					this.form.leetcodeLink = ''
-					this.algorithmPage()
-				} else {
-					console.error('Received non-200 status code', res)
-					this.errorMsg(res.message)
-				}
-			} catch (error) {
-				console.error('An error occurred while adding the questionName:', error)
-				// 异常处理逻辑
-			} finally {
-				this.loading = false
-			}
-		},
-		errorMsg(msg) {
-			this.$message({
-				showClose: true,
-				message: msg,
-				type: 'error',
-			})
-		},
-		async editConfirm() {
-			try {
-				this.loading = true
-				const { data: res } = await axios.post('http://localhost:80/algorithmicProblem/update', {
-					id: this.currentRowId,
-					questionName: this.form.questionName,
-					questionType: this.form.questionType,
-					degreeOfImportance: this.form.degreeOfImportance,
-					degreeOfDifficulty: this.form.degreeOfDifficulty,
-					difficultyOfScore: this.form.difficultyOfScore,
-					leetcodeNumber: this.form.leetcodeNumber,
-					leetcodeLink: this.form.leetcodeLink,
-				})
-				if (res.code === 200) {
-					this.form.questionName = ''
-					this.form.questionType = 0
-					this.editVisible = false
-					currentRowId: null
-					this.algorithmPage()
-				} else {
-					console.error('Received non-200 status code', res)
-				}
-			} catch (error) {
-				console.error('An error occurred while adding the questionName:', error)
-				// 异常处理逻辑
-			} finally {
-				this.loading = false
-			}
-		},
+        async editConfirm() {
+            try {
+                this.loading = true
+                const { data: res } = await axios.post('http://localhost:80/algorithmicProblem/update', {
+                    id: this.currentRowId,
+                    questionName: this.form.questionName,
+                    questionType: this.form.questionType,
+                    degreeOfImportance: this.form.degreeOfImportance,
+                    degreeOfDifficulty: this.form.degreeOfDifficulty,
+                    difficultyOfScore: this.form.difficultyOfScore,
+                    leetcodeNumber: this.form.leetcodeNumber,
+                    leetcodeLink: this.form.leetcodeLink,
+                    tag: this.form.tag,
+                })
+                if (res.code === 200) {
+                    this.form.questionName = ''
+                    this.form.questionType = 0
+                    this.editVisible = false
+                    currentRowId: null
+                    this.algorithmPage()
+                } else {
+                    console.error('Received non-200 status code', res)
+                }
+            } catch (error) {
+                console.error('An error occurred while adding the questionName:', error)
+                // 异常处理逻辑
+            } finally {
+                this.loading = false
+            }
+        },
 
-		async onDelete(id) {
-			this.dialogVisible = false
-			this.loading = true
-			const { data: res } = await axios.get('http://localhost:80/algorithmicProblem/delete', {
-				params: {
-					id: id,
-				},
-			})
-			this.algorithmPage()
-			this.loading = false
-		},
-		refreshPage() {
-			//获取问题类型的枚举
-			this.algorithmPage()
-			location.reload()
-		},
+        async onDelete(id) {
+            this.dialogVisible = false
+            this.loading = true
+            const { data: res } = await axios.get('http://localhost:80/algorithmicProblem/delete', {
+                params: {
+                    id: id,
+                },
+            })
+            this.algorithmPage()
+            this.loading = false
+        },
+        refreshPage() {
+            //获取问题类型的枚举
+            this.algorithmPage()
+            location.reload()
+        },
 
-		async algorithmPage() {
-			this.loading = true
-			const { data: res } = await axios.get('http://localhost:80/algorithmicProblem/page', {
-				params: {
-					page: this.currentPage,
-					pageSize: this.pageSize,
-					questionName: this.formInline.questionName,
-					questionType: this.formInline.questionType,
-				},
-			})
-			if (res.code === 200) {
-				this.total = res.result.totalElements
-				this.algorithmicList = res.result.content
-			}
-			this.loading = false
-		},
-		async interviewRandom() {
-			this.loading = true
-			const { data: res } = await axios.get('http://localhost:80/algorithmicProblem/random', { params: {} })
-			if (res.code === 200) {
-				this.randomAlgorithmic.questionName = res.result.questionName
-				this.randomAlgorithmic.leetcodeNumber = res.result.leetcodeNumber
-				this.randomAlgorithmic.leetcodeLink = res.result.leetcodeLink
-			}
-			this.loading = false
-		},
-		handleCurrentChange(currentPage) {
-			this.currentPage = currentPage
-			this.algorithmPage()
-		},
-		getColorForValue(value) {
-			// 检查颜色映射关系中是否已经有该值对应的颜色
-			if (!this.colorMap[value]) {
-				// 如果没有，随机生成一个颜色并将其关联到该值
-				this.colorMap[value] = this.getRandomColor()
-			}
-			// 返回值对应的颜色
-			return this.colorMap[value]
-		},
-		getRandomColor() {
-			// 从颜色数组中随机选取一个颜色
-			const colorArray = [
-				'red',
-				'blue',
-				'green',
-				'purple',
-				'orange',
-				'pink',
-				'brown',
-				'magenta',
-				'maroon',
-				'navy',
-				'olive',
-				'teal',
-				'silver',
-				'gray',
-				'indigo',
-				'violet',
-				'coral',
-				'salmon',
-				'orchid',
-				'slategray',
-				'thistle',
-				'burlywood',
-				'cadetblue',
-				'chocolate',
-				'crimson',
-				'darkblue',
-				'darkcyan',
-				'darkgoldenrod',
-				'darkgray',
-				'darkgreen',
-				'darkkhaki',
-				'darkmagenta',
-				'darkolivegreen',
-				'darkorange',
-				'darkorchid',
-				'darkred',
-				'darksalmon',
-				'darkseagreen',
-				'darkslateblue',
-				'darkslategray',
-				'darkturquoise',
-				'darkviolet',
-				'deeppink',
-				'deepskyblue',
-				'dodgerblue',
-				'firebrick',
-				'forestgreen',
-				'fuchsia',
-				'hotpink',
-				'indianred',
-				'lightcoral',
-				'lightpink',
-				'lightsalmon',
-				'lightseagreen',
-				'lightskyblue',
-				'lightslategray',
-				'lightsteelblue',
-				'mediumaquamarine',
-				'mediumblue',
-				'mediumorchid',
-				'mediumpurple',
-				'mediumslateblue',
-				'mediumturquoise',
-				'mediumvioletred',
-				'midnightblue',
-				'orangered',
-				'palevioletred',
-				'peru',
-				'rosybrown',
-				'saddlebrown',
-				'seagreen',
-				'sienna',
-				'skyblue',
-				'slateblue',
-				'tan',
-				'thistle',
-				'tomato',
-				'violet',
-			]
-			const randomIndex = Math.floor(Math.random() * colorArray.length)
-			return colorArray[randomIndex]
-		},
-	},
+        async interviewRandom() {
+            this.loading = true
+            const { data: res } = await axios.get('http://localhost:80/algorithmicProblem/random', { params: {} })
+            if (res.code === 200) {
+                this.randomAlgorithmic.questionName = res.result.questionName
+                this.randomAlgorithmic.leetcodeNumber = res.result.leetcodeNumber
+                this.randomAlgorithmic.leetcodeLink = res.result.leetcodeLink
+            }
+            this.loading = false
+        },
+        handleCurrentChange(currentPage) {
+            this.currentPage = currentPage
+            this.algorithmPage()
+        },
+        getColorForValue(value) {
+            // 检查颜色映射关系中是否已经有该值对应的颜色
+            if (!this.colorMap[value]) {
+                // 如果没有，随机生成一个颜色并将其关联到该值
+                this.colorMap[value] = this.getRandomColor()
+            }
+            // 返回值对应的颜色
+            return this.colorMap[value]
+        },
+        getTagType(tag) {
+            switch (tag.trim()) {
+                case '链表':
+                case '二叉树':
+                case '栈':
+                case '数组':
+                    return 'primary'
+                case 'hash表':
+                case '回溯':
+                case '双指针':
+                case '二分法':
+                    return 'success'
+                case '滑动窗口':
+                case '动态规划':
+                    return 'danger'
+                case '组合':
+                    return 'warning'
+                default:
+                    return 'info'
+            }
+        },
+        getRandomColor() {
+            // 从颜色数组中随机选取一个颜色
+            const colorArray = [
+                'red',
+                'blue',
+                'green',
+                'purple',
+                'orange',
+                'pink',
+                'brown',
+                'magenta',
+                'maroon',
+                'navy',
+                'olive',
+                'teal',
+                'silver',
+                'gray',
+                'indigo',
+                'violet',
+                'coral',
+                'salmon',
+                'orchid',
+                'slategray',
+                'thistle',
+                'burlywood',
+                'cadetblue',
+                'chocolate',
+                'crimson',
+                'darkblue',
+                'darkcyan',
+                'darkgoldenrod',
+                'darkgray',
+                'darkgreen',
+                'darkkhaki',
+                'darkmagenta',
+                'darkolivegreen',
+                'darkorange',
+                'darkorchid',
+                'darkred',
+                'darksalmon',
+                'darkseagreen',
+                'darkslateblue',
+                'darkslategray',
+                'darkturquoise',
+                'darkviolet',
+                'deeppink',
+                'deepskyblue',
+                'dodgerblue',
+                'firebrick',
+                'forestgreen',
+                'fuchsia',
+                'hotpink',
+                'indianred',
+                'lightcoral',
+                'lightpink',
+                'lightsalmon',
+                'lightseagreen',
+                'lightskyblue',
+                'lightslategray',
+                'lightsteelblue',
+                'mediumaquamarine',
+                'mediumblue',
+                'mediumorchid',
+                'mediumpurple',
+                'mediumslateblue',
+                'mediumturquoise',
+                'mediumvioletred',
+                'midnightblue',
+                'orangered',
+                'palevioletred',
+                'peru',
+                'rosybrown',
+                'saddlebrown',
+                'seagreen',
+                'sienna',
+                'skyblue',
+                'slateblue',
+                'tan',
+                'thistle',
+                'tomato',
+                'violet',
+            ]
+            const randomIndex = Math.floor(Math.random() * colorArray.length)
+            return colorArray[randomIndex]
+        },
+        errorMsg(msg) {
+            this.$message({
+                showClose: true,
+                message: msg,
+                type: 'error',
+            })
+        },
+    },
 }
 </script>
 
@@ -499,6 +559,7 @@ export default {
 	margin-top: 16px;
 	text-align: right;
 }
+
 .header-button-item {
 	margin-right: 15px;
 	font-size: 20px;
@@ -524,11 +585,19 @@ export default {
 	cursor: pointer;
 	z-index: 999;
 }
+
 .custom-textarea {
 	width: 100%;
 	text-align: left;
 }
+
 .backtop:hover {
 	background-color: #0050a0;
 }
+
+.tag-flex {
+	display: flex;
+	width: 150px;
+	flex-wrap: wrap;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/menus/MyArticleInfo.vue b/src/components/menus/MyArticleInfo.vue
index 6fc34082d83adce56fb41eb3067555de0e0ad9d0..a9c3ed2aec5cd8f633bac0b2691efb5592450c6c 100644
--- a/src/components/menus/MyArticleInfo.vue
+++ b/src/components/menus/MyArticleInfo.vue
@@ -124,7 +124,7 @@
 						</el-dialog>
 					</el-form-item>
 				</el-form>
-				<el-table ref="multipleTable" v-loading="loading" :data="articleInfoList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
+				<el-table border ref="multipleTable" v-loading="loading" :data="articleInfoList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
 					<el-table-column type="selection" width="50"></el-table-column>
 					<el-table-column prop="articleId" label="文章id" show-overflow-tooltip></el-table-column>
 					<el-table-column prop="userName" label="用户名称" show-overflow-tooltip></el-table-column>
@@ -282,7 +282,7 @@ export default {
 				{ type: 2, name: '评论已满' },
 				{ type: 3, name: '禁言' },
 				{ type: 4, name: '评论太快' },
-				{ type: 5, name: '评论已经到了40条' },
+				{ type: 5, name: '评论已到40条' },
 				{ type: 8, name: '其他错误' },
 				{ type: 9, name: '评论成功' },
 			],
@@ -605,7 +605,7 @@ export default {
 				return 'info'
 			} else if (statusName == '已经点过赞' || statusName == '已经收藏过' || statusName == '已经评论过') {
 				return 'success'
-			} else if (statusName == '文章状态不能点赞' || statusName == '收藏已满' || statusName == '收藏夹不存在' || statusName == '评论已满' || statusName == '禁言' || statusName == '评论已经到了40条') {
+			} else if (statusName == '文章状态不能点赞' || statusName == '收藏已满' || statusName == '收藏夹不存在' || statusName == '评论已满' || statusName == '禁言' || statusName == '评论已到40条') {
 				return 'danger'
 			} else if (statusName == '点赞成功' || statusName == '收藏成功' || statusName == '评论成功') {
 				return 'success'
diff --git a/src/components/menus/MyCsdnUser.vue b/src/components/menus/MyCsdnUser.vue
index 36e691f5b4568db71f62740266297682919ed30e..ba9a7d1f5d704b818f7e8f2a0a3d3b8a1810f694 100644
--- a/src/components/menus/MyCsdnUser.vue
+++ b/src/components/menus/MyCsdnUser.vue
@@ -80,18 +80,9 @@
 							</div>
 						</el-dialog>
 					</el-form-item>
-
 					<el-form-item>
-						<el-button size="small" type="primary" @click="prepareAllTriplet">三连</el-button>
-						<el-dialog title="提示" :visible.sync="allTripletDialogVisible" width="30%" :before-close="handleClose">
-							<span>确认三连吗?</span>
-							<span slot="footer" class="dialog-footer">
-								<el-button @click="allTripletDialogVisible = false">取 消</el-button>
-								<el-button type="primary" @click.prevent="allTriplet()">确 定</el-button>
-							</span>
-						</el-dialog>
+						<el-button size="small" type="primary" @click="multiTriplet">三连</el-button>
 					</el-form-item>
-
 					<el-form-item>
 						<el-button size="small" type="warning" @click="prepareResetLikesComment">核验状态</el-button>
 						<el-dialog title="提示" :visible.sync="resetLikesCommentDialogVisible" width="30%" :before-close="handleClose">
@@ -104,17 +95,10 @@
 					</el-form-item>
 
 					<el-form-item>
-						<el-button size="small" type="success" @click="prepareAutoReply">自动评论</el-button>
-						<el-dialog title="提示" :visible.sync="autoReplyDialogVisible" width="30%" :before-close="handleClose">
-							<span>确认自动评论吗?</span>
-							<span slot="footer" class="dialog-footer">
-								<el-button @click="autoReplyDialogVisible = false">取 消</el-button>
-								<el-button type="primary" @click.prevent="autoReply()">确 定</el-button>
-							</span>
-						</el-dialog>
+						<el-button size="small" type="success" @click="autoReply">自动评论</el-button>
 					</el-form-item>
 				</el-form>
-				<el-table ref="multipleTable" v-loading="loading" :data="csdnUserList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
+				<el-table border ref="multipleTable" v-loading="loading" :data="csdnUserList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
 					<el-table-column type="selection" width="55"></el-table-column>
 					<el-table-column prop="userName" label="用户名称" show-overflow-tooltip></el-table-column>
 					<el-table-column prop="nickName" label="用户昵称" show-overflow-tooltip>
@@ -143,7 +127,12 @@
 
 					<el-table-column prop="userWeightName" label="用户权重" show-overflow-tooltip></el-table-column>
 
-					<el-table-column prop="articleType" label="文章类型" show-overflow-tooltip></el-table-column>
+					<el-table-column prop="articleType" label="文章类型" show-overflow-tooltip>
+						<template slot-scope="scope">
+							<el-tag :type="getArticleType(scope.row.articleType)">{{ scope.row.articleType }}</el-tag>
+						</template>
+					</el-table-column>
+
 					<el-table-column label="更新时间">
 						<template slot-scope="props">
 							{{ props.row.updateTime | dateFormat }}
@@ -151,22 +140,8 @@
 					</el-table-column>
 					<el-table-column prop="操作" label="操作" width="380px">
 						<template slot-scope="props">
-							<el-button type="primary" @click="prepareTriplet(props.row.userName)" size="small">三连</el-button>
-							<el-dialog title="提示" :visible.sync="tripletVisible" width="30%" :before-close="handleClose">
-								<span>确认三连?</span>
-								<span slot="footer" class="dialog-footer">
-									<el-button @click="tripletVisible = false">取 消</el-button>
-									<el-button type="primary" @click.prevent="triplet(currentUserName)">确 定</el-button>
-								</span>
-							</el-dialog>
-							<el-button type="warning" @click="prepareResetUserDayStatus(props.row.userName)" size="small">重置</el-button>
-							<el-dialog title="提示" :visible.sync="resetUserDayStatusVisible" width="30%" :before-close="handleClose">
-								<span>确认重置?</span>
-								<span slot="footer" class="dialog-footer">
-									<el-button @click="resetUserDayStatusVisible = false">取 消</el-button>
-									<el-button type="primary" @click.prevent="resetUserDayStatus(currentUserName)">确 定</el-button>
-								</span>
-							</el-dialog>
+							<el-button type="primary" @click="triplet(props.row.userName)" size="small">三连</el-button>
+							<el-button type="warning" @click="resetUserDayStatus(props.row.userName)" size="small">重置</el-button>
 							<el-button type="success" @click.prevent="preEdit(props.row.id, props.row.userName, props.row.nickName, props.row.userHomeUrl, props.row.userWeight)" width="200" size="small">编辑</el-button>
 							<el-dialog title="编辑用户信息" :visible.sync="editVisible">
 								<el-form :model="form">
@@ -209,7 +184,7 @@
 						</template>
 					</el-table-column>
 				</el-table>
-				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[8, 10, 50, 100, 200, 400]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
+				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[ 10, 50, 100, 200, 400]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
 			</el-main>
 			<el-backtop class="backtop"></el-backtop>
 		</el-container>
@@ -218,419 +193,416 @@
 
 <script>
 import axios from 'axios'
+import ApiService from '../../api/ApiService'
 export default {
-	name: 'MyCsdnUser',
+    name: 'MyCsdnUser',
+
+    data() {
+        return {
+            form: {
+                userName: '',
+                nickName: '',
+                userHomeUrl: '',
+                userWeight: null,
+            },
+            formInline: {
+                userName: '',
+                nickName: '',
+                articleType: '',
+                likeStatus: null,
+                collectStatus: null,
+                commentStatus: null,
+            },
+            allOptions: [
+                {
+                    type: -1,
+                    name: '全部',
+                },
+                {
+                    type: 9,
+                    name: '铁子',
+                },
+                { type: 8, name: '闺蜜' },
+                { type: 7, name: '基友' },
+                { type: 0, name: '默认' },
+            ],
+            articleType: ['全部', 'blog', 'blink', 'download', 'ask'],
+            likeStatus: [
+                {
+                    type: -1,
+                    name: '全部',
+                },
+                {
+                    type: 0,
+                    name: '未处理',
+                },
+                { type: 1, name: '已经点过赞' },
+                { type: 2, name: '点赞已满' },
+                { type: 3, name: '取消点赞' },
+                { type: 4, name: '文章状态不能点赞' },
+                { type: 8, name: '其他错误' },
+                { type: 9, name: '点赞成功' },
+            ],
+            collectStatus: [
+                {
+                    type: -1,
+                    name: '全部',
+                },
+                {
+                    type: 0,
+                    name: '未处理',
+                },
+                { type: 1, name: '已经收藏过' },
+                { type: 2, name: '收藏已满' },
+                { type: 3, name: '参数缺失' },
+                { type: 4, name: '收藏夹不存在' },
+                { type: 8, name: '其他错误' },
+                { type: 9, name: '收藏成功' },
+            ],
+            commentStatus: [
+                {
+                    type: -1,
+                    name: '全部',
+                },
+                {
+                    type: 0,
+                    name: '未处理',
+                },
+                { type: 1, name: '已经评论过' },
+                { type: 2, name: '评论已满' },
+                { type: 3, name: '禁言' },
+                { type: 4, name: '评论太快' },
+                { type: 5, name: '评论已到40条' },
+                { type: 8, name: '其他错误' },
+                { type: 9, name: '评论成功' },
+            ],
+            dialogFormVisible: false,
+            dialogMutiFormVisible: false,
+            dialogVisible: false,
+            editVisible: false,
+            blog10DialogVisible: false,
+            resetLikesCommentDialogVisible: false,
+            // 用户列表数据
+            csdnUserList: [],
+            loading: false,
+            elementui_page_component_key: 0,
+            currentPage: Number(localStorage.getItem('csdnUserPage')) || 1,
+            pageSize: 10,
+            total: 0,
+            // 新增的内容
+            formLabelWidth: '120px',
+            currentRowId: null,
+            currentUserName: null,
+            multipleSelection: [],
+        }
+    },
+    watch: {
+        formInline: {
+            handler(newVal, oldVal) {
+                this.currentPage = 1
+                localStorage.setItem('csdnUserPage', this.currentPage)
+                this.userPage()
+            },
+            deep: true,
+        },
+        // 监听currentPage的变化，将新值保存到localStorage中
+        currentPage(newPage) {
+            localStorage.setItem('csdnUserPage', newPage.toString())
+        },
+    },
+    created() {
+        //获取问题类型的枚举
+        this.userPage()
+    },
+    mounted() {
+        this.currentPage = 1
+    },
+    methods: {
+        prepareAdd() {
+            this.form.userName = ''
+            this.form.nickName = ''
+            this.dialogFormVisible = true
+        },
+        prepareBlog10(userName) {
+            this.blog10DialogVisible = true
+            this.currentUserName = userName
+        },
+        prepareResetLikesComment() {
+            this.resetLikesCommentDialogVisible = true
+        },
+
+        prepareMutiAdd() {
+            this.form.userName = ''
+            this.dialogMutiFormVisible = true
+        },
+        prepareDelete(id) {
+            this.currentRowId = id
+            this.dialogVisible = true
+        },
+        preEdit(id, userName, nickName, userHomeUrl, userWeight) {
+            this.form.userName = userName
+            this.form.nickName = nickName
+            this.form.userHomeUrl = userHomeUrl
+            this.form.userWeight = userWeight
+            this.currentRowId = id
+            this.editVisible = true
+        },
+        handleClose(done) {
+            this.$confirm('确认关闭？')
+                .then((_) => {
+                    done()
+                })
+                .catch((_) => {})
+        },
+        handleConfirm(addType) {
+            this.dialogFormVisible = false // 关闭对话框
+            this.dialogMutiFormVisible = false
+            this.addUser(addType) // 发送请求
+        },
+        handleSelectionChange(val) {
+            this.multipleSelection = val
+        },
+
+        async addUser(addType) {
+            try {
+                this.loading = true
+                const { data: res } = await axios.post('http://localhost:80/csdn/user/add', {
+                    addType: addType,
+                    userName: this.form.userName,
+                    nickName: this.form.nickName,
+                    userWeight: this.form.userWeight,
+                })
+                if (res.code === 200) {
+                    this.currentPage = 1
+                    this.form.userName = ''
+                    this.form.nickName = ''
+                    this.form.userWeight = null
+                    this.userPage()
+                } else {
+                    this.errorMsg(res.message)
+                    console.error('Received non-200 status code', res)
+                }
+            } catch (error) {
+                console.error('An error occurred while adding the questionName:', error)
+                // 异常处理逻辑
+            } finally {
+                this.loading = false
+            }
+        },
+        async editConfirm() {
+            try {
+                this.loading = true
+                const { data: res } = await axios.post('http://localhost:80/csdn/user/update', {
+                    id: this.currentRowId,
+                    userName: this.form.userName,
+                    nickName: this.form.nickName,
+                    userWeight: this.form.userWeight,
+                    userHomeUrl: this.form.userHomeUrl,
+                })
+                if (res.code === 200) {
+                    this.form.userName = ''
+                    this.form.nickName = ''
+                    this.form.userHomeUrl = ''
+                    this.form.userWeight = null
+                    this.editVisible = false
+                    currentRowId: null
+                    this.userPage()
+                } else {
+                    console.error('Received non-200 status code', res)
+                }
+            } catch (error) {
+                console.error('An error occurred while adding the questionName:', error)
+                // 异常处理逻辑
+            } finally {
+                this.loading = false
+            }
+        },
+
+        async multiTriplet() {
+            this.loading = true
+            if (this.multipleSelection && this.multipleSelection.length === 0) {
+                this.loading = false
+                this.errorMsg('请选择需要处理项')
+            } else {
+                let userNames = this.multipleSelection.map((item) => item.userName)
+                const { data: res } = await ApiService.multiTriplet(userNames)
+                if (res.code === 200) {
+                    this.multipleSelection = []
+                    this.userPage()
+                } else {
+                    console.error('Received non-200 status code', res)
+                }
+            }
+            this.loading = false
+        },
 
-	data() {
-		return {
-			form: {
-				userName: '',
-				nickName: '',
-				userHomeUrl: '',
-				userWeight: null,
-			},
-			formInline: {
-				userName: '',
-				nickName: '',
-				articleType: '',
-				likeStatus: null,
-				collectStatus: null,
-				commentStatus: null,
-			},
-			allOptions: [
-				{
-					type: -1,
-					name: '全部',
-				},
-				{
-					type: 9,
-					name: '铁子',
-				},
-				{ type: 8, name: '闺蜜' },
-				{ type: 7, name: '基友' },
-				{ type: 0, name: '默认' },
-			],
-			articleType: ['全部', 'blog', 'blink', 'download', 'ask'],
-			likeStatus: [
-				{
-					type: -1,
-					name: '全部',
-				},
-				{
-					type: 0,
-					name: '未处理',
-				},
-				{ type: 1, name: '已经点过赞' },
-				{ type: 2, name: '点赞已满' },
-				{ type: 3, name: '取消点赞' },
-				{ type: 4, name: '文章状态不能点赞' },
-				{ type: 8, name: '其他错误' },
-				{ type: 9, name: '点赞成功' },
-			],
-			collectStatus: [
-				{
-					type: -1,
-					name: '全部',
-				},
-				{
-					type: 0,
-					name: '未处理',
-				},
-				{ type: 1, name: '已经收藏过' },
-				{ type: 2, name: '收藏已满' },
-				{ type: 3, name: '参数缺失' },
-				{ type: 4, name: '收藏夹不存在' },
-				{ type: 8, name: '其他错误' },
-				{ type: 9, name: '收藏成功' },
-			],
-			commentStatus: [
-				{
-					type: -1,
-					name: '全部',
-				},
-				{
-					type: 0,
-					name: '未处理',
-				},
-				{ type: 1, name: '已经评论过' },
-				{ type: 2, name: '评论已满' },
-				{ type: 3, name: '禁言' },
-				{ type: 4, name: '评论太快' },
-				{ type: 5, name: '评论已经到了40条' },
-				{ type: 8, name: '其他错误' },
-				{ type: 9, name: '评论成功' },
-			],
-			dialogFormVisible: false,
-			dialogMutiFormVisible: false,
-			dialogVisible: false,
-			editVisible: false,
-			tripletVisible: false,
-			allTripletDialogVisible: false,
-			autoReplyDialogVisible: false,
-			resetUserDayStatusVisible: false,
-			blog10DialogVisible: false,
-			resetLikesCommentDialogVisible: false,
-			// 用户列表数据
-			csdnUserList: [],
-			loading: false,
-			elementui_page_component_key: 0,
-			currentPage: Number(localStorage.getItem('csdnUserPage')) || 1,
-			pageSize: 8,
-			total: 0,
-			// 新增的内容
-			formLabelWidth: '120px',
-			currentRowId: null,
-			currentUserName: null,
-			multipleSelection: [],
-		}
-	},
-	watch: {
-		formInline: {
-			handler(newVal, oldVal) {
-				this.currentPage = 1
-				localStorage.setItem('csdnUserPage', this.currentPage)
-				this.userPage()
-			},
-			deep: true,
-		},
-		// 监听currentPage的变化，将新值保存到localStorage中
-		currentPage(newPage) {
-			localStorage.setItem('csdnUserPage', newPage.toString())
-		},
-	},
-	created() {
-		//获取问题类型的枚举
-		this.userPage()
-	},
-	mounted() {
-		this.currentPage = 1
-	},
-	methods: {
-		prepareAdd() {
-			this.form.userName = ''
-			this.form.nickName = ''
-			this.dialogFormVisible = true
-		},
-		prepareAllTriplet() {
-			this.allTripletDialogVisible = true
-		},
-		prepareResetUserDayStatus(userName) {
-			this.resetUserDayStatusVisible = true
-			this.currentUserName = userName
-		},
-		prepareBlog10(userName) {
-			this.blog10DialogVisible = true
-			this.currentUserName = userName
-		},
-		prepareResetLikesComment() {
-			this.resetLikesCommentDialogVisible = true
-		},
-		prepareAutoReply() {
-			this.autoReplyDialogVisible = true
-		},
-		prepareMutiAdd() {
-			this.form.userName = ''
-			this.dialogMutiFormVisible = true
-		},
-		prepareDelete(id) {
-			this.currentRowId = id
-			this.dialogVisible = true
-		},
-		prepareTriplet(userName) {
-			this.currentUserName = userName
-			this.tripletVisible = true
-		},
-		preEdit(id, userName, nickName, userHomeUrl, userWeight) {
-			this.form.userName = userName
-			this.form.nickName = nickName
-			this.form.userHomeUrl = userHomeUrl
-			this.form.userWeight = userWeight
-			this.currentRowId = id
-			this.editVisible = true
-		},
-		handleClose(done) {
-			this.$confirm('确认关闭？')
-				.then((_) => {
-					done()
-				})
-				.catch((_) => {})
-		},
-		handleConfirm(addType) {
-			this.dialogFormVisible = false // 关闭对话框
-			this.dialogMutiFormVisible = false
-			this.addUser(addType) // 发送请求
-		},
-		handleSelectionChange(val) {
-			this.multipleSelection = val
-		},
+        async autoReply() {
+            this.loading = true
+            const { data: res } = await ApiService.autoReply()
+            if (res.code === 200) {
+                this.userPage()
+            } else {
+                console.error('Received non-200 status code', res)
+            }
+            this.loading = false
+        },
 
-		async addUser(addType) {
-			try {
-				this.loading = true
-				const { data: res } = await axios.post('http://localhost:80/csdn/user/add', {
-					addType: addType,
-					userName: this.form.userName,
-					nickName: this.form.nickName,
-					userWeight: this.form.userWeight,
-				})
-				if (res.code === 200) {
-					this.currentPage = 1
-					this.form.userName = ''
-					this.form.nickName = ''
-					this.form.userWeight = null
-					this.userPage()
-				} else {
-					this.errorMsg(res.message)
-					console.error('Received non-200 status code', res)
-				}
-			} catch (error) {
-				console.error('An error occurred while adding the questionName:', error)
-				// 异常处理逻辑
-			} finally {
-				this.loading = false
-			}
-		},
-		errorMsg(msg) {
-			this.$message({
-				showClose: true,
-				message: msg,
-				type: 'error',
-			})
-		},
-		async editConfirm() {
-			try {
-				this.loading = true
-				const { data: res } = await axios.post('http://localhost:80/csdn/user/update', {
-					id: this.currentRowId,
-					userName: this.form.userName,
-					nickName: this.form.nickName,
-					userWeight: this.form.userWeight,
-					userHomeUrl: this.form.userHomeUrl,
-				})
-				if (res.code === 200) {
-					this.form.userName = ''
-					this.form.nickName = ''
-					this.form.userHomeUrl = ''
-					this.form.userWeight = null
-					this.editVisible = false
-					currentRowId: null
-					this.userPage()
-				} else {
-					console.error('Received non-200 status code', res)
-				}
-			} catch (error) {
-				console.error('An error occurred while adding the questionName:', error)
-				// 异常处理逻辑
-			} finally {
-				this.loading = false
-			}
-		},
+        async triplet(userName) {
+            this.loading = true
+            const { data: res } = await ApiService.singleTriplet(userName)
+            if (res.code === 200) {
+                this.currentUserName = null
+                this.userPage()
+            } else {
+                console.error('Received non-200 status code', res)
+            }
+            this.loading = false
+        },
+        async fixUserLikesStatus() {
+            this.loading = true
+            this.resetLikesCommentDialogVisible = false
+            const { data: res } = await axios.get('http://localhost:80/csdn/user/fixUserLikesStatus')
+            if (res.code === 200) {
+                this.userPage()
+            } else {
+                console.error('Received non-200 status code', res)
+            }
+            this.loading = false
+        },
+        async onBlog10(userName) {
+            this.loading = true
+            this.blog10DialogVisible = false
+            const { data: res } = await axios.get('http://localhost:80/csdn/user/add10Blog?username=' + userName)
+            if (res.code === 200) {
+                this.currentUserName = null
+                this.userPage()
+            } else {
+                console.error('Received non-200 status code', res)
+            }
+            this.loading = false
+        },
+        async resetUserDayStatus(userName) {
+            this.loading = true
+            const { data: res } = await axios.get('http://localhost:80/csdn/user/resetCsdnUserInfo?username=' + userName)
+            if (res.code === 200) {
+                this.currentUserName = null
+                this.userPage()
+            } else {
+                console.error('Received non-200 status code', res)
+            }
+            this.loading = false
+        },
+        async onDelete(id) {
+            this.loading = true
+            const { data: res } = await axios.get('http://localhost:80/csdn/user/delete', {
+                params: {
+                    id: id,
+                },
+            })
+            this.dialogVisible = false
+            this.userPage()
+            this.loading = false
+        },
+        refreshPage() {
+            //获取问题类型的枚举
+            this.userPage()
+            location.reload()
+        },
+        async userPage() {
+            this.loading = true
+            const { data: res } = await axios.post('http://localhost:80/csdn/user/page', {
+                page: this.currentPage,
+                pageSize: this.pageSize,
+                userName: this.formInline.userName,
+                nickName: this.formInline.nickName,
+                articleType: this.formInline.articleType == '全部' ? '' : this.formInline.articleType,
+                userWeight: this.formInline.userWeight == -1 ? null : this.formInline.userWeight,
+                likeStatus: this.formInline.likeStatus == -1 ? null : this.formInline.likeStatus,
+                collectStatus: this.formInline.collectStatus == -1 ? null : this.formInline.collectStatus,
+                commentStatus: this.formInline.commentStatus == -1 ? null : this.formInline.commentStatus,
+            })
+            if (res.code === 200) {
+                this.total = res.result.totalElements
 
-		async allTriplet() {
-			this.loading = true
-			this.allTripletDialogVisible = false
-			if (this.multipleSelection && this.multipleSelection.length === 0) {
-				console.error('请选择需要处理的项')
-			} else {
-				let userNames = this.multipleSelection.map((item) => item.userName)
-				const { data: res } = await axios.post('http://localhost:80/csdn/multiTriplet', userNames)
-				if (res.code === 200) {
-					this.multipleSelection = []
-					this.userPage()
-				} else {
-					console.error('Received non-200 status code', res)
-				}
-			}
-			this.loading = false
-		},
-		async triplet(userName) {
-			this.loading = true
-			this.tripletVisible = false
-			const { data: res } = await axios.get('http://localhost:80/csdn/singleTriplet?username=' + userName)
-			if (res.code === 200) {
-				this.currentUserName = null
-				this.userPage()
-			} else {
-				console.error('Received non-200 status code', res)
-			}
-			this.loading = false
-		},
-		async fixUserLikesStatus() {
-			this.loading = true
-			this.resetLikesCommentDialogVisible = false
-			const { data: res } = await axios.get('http://localhost:80/csdn/user/fixUserLikesStatus')
-			if (res.code === 200) {
-				this.userPage()
-			} else {
-				console.error('Received non-200 status code', res)
-			}
-			this.loading = false
-		},
-		async onBlog10(userName) {
-			this.loading = true
-			this.blog10DialogVisible = false
-			const { data: res } = await axios.get('http://localhost:80/csdn/user/add10Blog?username=' + userName)
-			if (res.code === 200) {
-				this.currentUserName = null
-				this.userPage()
-			} else {
-				console.error('Received non-200 status code', res)
-			}
-			this.loading = false
-		},
-		async resetUserDayStatus(userName) {
-			this.loading = true
-			this.resetUserDayStatusVisible = false
-			const { data: res } = await axios.get('http://localhost:80/csdn/user/resetCsdnUserInfo?username=' + userName)
-			if (res.code === 200) {
-				this.currentUserName = null
-				this.userPage()
-			} else {
-				console.error('Received non-200 status code', res)
-			}
-			this.loading = false
-		},
-		async onDelete(id) {
-			this.loading = true
-			const { data: res } = await axios.get('http://localhost:80/csdn/user/delete', {
-				params: {
-					id: id,
-				},
-			})
-			this.dialogVisible = false
-			this.userPage()
-			this.loading = false
-		},
-		refreshPage() {
-			//获取问题类型的枚举
-			this.userPage()
-			location.reload()
-		},
-		async userPage() {
-			this.loading = true
-			const { data: res } = await axios.post('http://localhost:80/csdn/user/page', {
-				page: this.currentPage,
-				pageSize: this.pageSize,
-				userName: this.formInline.userName,
-				nickName: this.formInline.nickName,
-				articleType: this.formInline.articleType == '全部' ? '' : this.formInline.articleType,
-				userWeight: this.formInline.userWeight == -1 ? null : this.formInline.userWeight,
-				likeStatus: this.formInline.likeStatus == -1 ? null : this.formInline.likeStatus,
-				collectStatus: this.formInline.collectStatus == -1 ? null : this.formInline.collectStatus,
-				commentStatus: this.formInline.commentStatus == -1 ? null : this.formInline.commentStatus,
-			})
-			if (res.code === 200) {
-				this.total = res.result.totalElements
+                const userWeightMap = {}
+                this.allOptions.forEach((option) => {
+                    userWeightMap[option.type] = option.name
+                })
+                res.result.content.forEach((item) => {
+                    item.userWeightName = userWeightMap[item.userWeight]
+                })
 
-				const userWeightMap = {}
-				this.allOptions.forEach((option) => {
-					userWeightMap[option.type] = option.name
-				})
-				res.result.content.forEach((item) => {
-					item.userWeightName = userWeightMap[item.userWeight]
-				})
+                const likeStatusMap = {}
+                this.likeStatus.forEach((option) => {
+                    likeStatusMap[option.type] = option.name
+                })
+                res.result.content.forEach((item) => {
+                    item.likeStatusName = likeStatusMap[item.likeStatus]
+                })
 
-				const likeStatusMap = {}
-				this.likeStatus.forEach((option) => {
-					likeStatusMap[option.type] = option.name
-				})
-				res.result.content.forEach((item) => {
-					item.likeStatusName = likeStatusMap[item.likeStatus]
-				})
+                const collectStatusMap = {}
+                this.collectStatus.forEach((option) => {
+                    collectStatusMap[option.type] = option.name
+                })
+                res.result.content.forEach((item) => {
+                    item.collectStatusName = collectStatusMap[item.collectStatus]
+                })
 
-				const collectStatusMap = {}
-				this.collectStatus.forEach((option) => {
-					collectStatusMap[option.type] = option.name
-				})
-				res.result.content.forEach((item) => {
-					item.collectStatusName = collectStatusMap[item.collectStatus]
-				})
+                const commentStatusMap = {}
+                this.commentStatus.forEach((option) => {
+                    commentStatusMap[option.type] = option.name
+                })
+                res.result.content.forEach((item) => {
+                    item.commentStatusName = commentStatusMap[item.commentStatus]
+                })
 
-				const commentStatusMap = {}
-				this.commentStatus.forEach((option) => {
-					commentStatusMap[option.type] = option.name
-				})
-				res.result.content.forEach((item) => {
-					item.commentStatusName = commentStatusMap[item.commentStatus]
-				})
+                this.csdnUserList = res.result.content
+            }
+            this.loading = false
+        },
+        handleCurrentChange(currentPage) {
+            this.currentPage = currentPage
+            this.userPage()
+        },
+        handleSizeChange(currentSize) {
+            this.pageSize = currentSize
+            this.userPage()
+        },
+        getTagType(statusName) {
+            if (statusName == '未处理') {
+                return 'info'
+            } else if (statusName == '已经点过赞' || statusName == '已经收藏过' || statusName == '已经评论过') {
+                return 'success'
+            } else if (statusName == '文章状态不能点赞' || statusName == '收藏已满' || statusName == '收藏夹不存在' || statusName == '评论已满' || statusName == '禁言' || statusName == '评论已到40条') {
+                return 'danger'
+            } else if (statusName == '点赞成功' || statusName == '收藏成功' || statusName == '评论成功') {
+                return 'success'
+            } else if (statusName == '点赞已满' || statusName == '参数缺失' || statusName == '其他错误' || statusName == '取消点赞' || statusName == '评论太快') {
+                return 'warning'
+            }
+        },
+        getArticleType(articleType) {
+            if (articleType == 'blog') {
+                return 'success'
+            } else if (articleType == 'blink') {
+                return 'danger'
+            } else if (articleType == 'topic') {
+                return 'warning'
+            } else if (articleType == 'download') {
+                return 'primary'
+            } else if (articleType == 'ask') {
+                return 'info'
+            }
+        },
 
-				this.csdnUserList = res.result.content
-			}
-			this.loading = false
-		},
-		handleCurrentChange(currentPage) {
-			this.currentPage = currentPage
-			this.userPage()
-		},
-		handleSizeChange(currentSize) {
-			this.pageSize = currentSize
-			this.userPage()
-		},
-		getTagType(statusName) {
-			if (statusName == '未处理') {
-				return 'info'
-			} else if (statusName == '已经点过赞' || statusName == '已经收藏过' || statusName == '已经评论过') {
-				return 'success'
-			} else if (statusName == '文章状态不能点赞' || statusName == '收藏已满' || statusName == '收藏夹不存在' || statusName == '评论已满' || statusName == '禁言' || statusName == '评论已经到了40条') {
-				return 'danger'
-			} else if (statusName == '点赞成功' || statusName == '收藏成功' || statusName == '评论成功') {
-				return 'success'
-			} else if (statusName == '点赞已满' || statusName == '参数缺失' || statusName == '其他错误' || statusName == '取消点赞' || statusName == '评论太快') {
-				return 'warning'
-			}
-		},
-		async autoReply() {
-			this.loading = true
-			this.autoReplyDialogVisible = false
-			const { data: res } = await axios.get('http://localhost:80/csdn/autoReply')
-			if (res.code === 200) {
-				this.userPage()
-			} else {
-				console.error('Received non-200 status code', res)
-			}
-			this.loading = false
-		},
-	},
+        errorMsg(msg) {
+            this.$message({
+                showClose: true,
+                message: msg,
+                type: 'error',
+            })
+        },
+    },
 }
 </script>
 
diff --git a/src/components/menus/MyMessage.vue b/src/components/menus/MyMessage.vue
index e3108a3535e76fed4d1f14cc966b97241348d6f2..d31ae78e7c034afe80adbfff5f965f1a6c237f39 100644
--- a/src/components/menus/MyMessage.vue
+++ b/src/components/menus/MyMessage.vue
@@ -1,332 +1,288 @@
 <template>
-	<div>
-		<el-container>
-			<el-main>
-				<el-form :inline="true" :model="formInline" class="demo-form-inline">
-					<el-form-item>
-						<el-input size="small" clearable v-model="formInline.userName" placeholder="请输入用户名" @keydown.enter.native="messagePage"></el-input>
-					</el-form-item>
-					<el-form-item>
-						<el-input size="small" clearable v-model="formInline.nickName" placeholder="请输入用户昵称" @keydown.enter.native="messagePage"></el-input>
-					</el-form-item>
-					<el-form-item>
-						<el-select size="small" v-model="formInline.hasRepliedInfo" placeholder="请选择收藏状态" @change="messagePage">
-							<el-option v-for="item in hasRepliedInfo" :key="item.type" :label="item.name" :value="item.type"></el-option>
-						</el-select>
-					</el-form-item>
-					<el-form-item>
-						<el-button size="small" type="primary" @click="messagePage">查询</el-button>
-					</el-form-item>
+  <div>
+    <el-container>
+      <el-main>
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item>
+            <el-input size="small" clearable v-model="formInline.userName" placeholder="请输入用户名"
+                      @keydown.enter.native="messagePage"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-input size="small" clearable v-model="formInline.nickName" placeholder="请输入用户昵称"
+                      @keydown.enter.native="messagePage"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-select size="small" v-model="formInline.hasRepliedInfo" placeholder="请选择收藏状态" @change="messagePage">
+              <el-option v-for="item in hasRepliedInfo" :key="item.type" :label="item.name"
+                         :value="item.type"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="small" type="primary" @click="messagePage">查询</el-button>
+          </el-form-item>
 
-					<el-form-item>
-						<el-button size="small" type="primary" @click="prepareRefreshMessage">刷新私信列表</el-button>
-						<el-dialog title="提示" :visible.sync="refreshMessageDialogVisible" width="30%" :before-close="handleClose">
-							<span>确认刷新私信列表吗?</span>
-							<span slot="footer" class="dialog-footer">
+          <el-form-item>
+            <el-button size="small" type="primary" @click="prepareRefreshMessage">刷新私信列表</el-button>
+            <el-dialog title="提示" :visible.sync="refreshMessageDialogVisible" width="30%" :before-close="handleClose">
+              <span>确认刷新私信列表吗?</span>
+              <span slot="footer" class="dialog-footer">
 								<el-button @click="refreshMessageDialogVisible = false">取 消</el-button>
-								<el-button type="primary" @click.prevent="refreshMessage()">确 定</el-button>
+								<el-button type="primary" @click.prevent="acquireMessage()">确 定</el-button>
 							</span>
-						</el-dialog>
-					</el-form-item>
+            </el-dialog>
+          </el-form-item>
 
-					<el-form-item>
-						<el-button size="small" type="primary" @click="prepareMeaasge">私信点赞收藏</el-button>
-						<el-dialog title="提示" :visible.sync="messageDialogVisible" width="30%" :before-close="handleClose">
-							<span>确认处理私信点赞收藏吗?</span>
-							<span slot="footer" class="dialog-footer">
-								<el-button @click="messageDialogVisible = false">取 消</el-button>
-								<el-button type="primary" @click.prevent="messageDeal()">确 定</el-button>
-							</span>
-						</el-dialog>
-					</el-form-item>
-				</el-form>
-				<el-table ref="multipleTable" v-loading="loading" :data="csdnMessageList" tooltip-effect="dark" style="width: 100%">
-					<el-table-column prop="id" label="序号" width="100" sortable></el-table-column>
-					<el-table-column prop="userName" label="用户名称" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="nickName" label="用户昵称" show-overflow-tooltip>
-						<template slot-scope="scope">
-							<a :href="scope.row.messageUrl" target="_blank">{{ scope.row.nickName }}</a>
-						</template>
-					</el-table-column>
+          <el-form-item>
+            <el-button size="small" type="primary" @click="messageDeal">私信点赞收藏</el-button>
+          </el-form-item>
+        </el-form>
+        <el-table  border ref="multipleTable" v-loading="loading" :data="csdnMessageList" tooltip-effect="dark"
+                  style="width: 100%">
+          <el-table-column prop="id" label="序号" width="100" sortable></el-table-column>
+          <el-table-column prop="userName" label="用户名称" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="nickName" label="用户昵称" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <a :href="scope.row.messageUrl" target="_blank">{{ scope.row.nickName }}</a>
+            </template>
+          </el-table-column>
 
-					<el-table-column prop="hasRepliedName" label="是否回复" show-overflow-tooltip>
-						<template slot-scope="scope">
-							<el-tag :type="getTagType(scope.row.hasRepliedName)">{{ scope.row.hasRepliedName }}</el-tag>
-						</template>
-					</el-table-column>
+          <el-table-column prop="hasRepliedName" label="是否回复" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <el-tag :type="getTagType(scope.row.hasRepliedName)">{{ scope.row.hasRepliedName }}</el-tag>
+            </template>
+          </el-table-column>
 
-					<el-table-column prop="content" label="回复内容" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="content" label="回复内容" show-overflow-tooltip></el-table-column>
 
-					<el-table-column label="更新时间">
-						<template slot-scope="props">
-							{{ props.row.updateTime | dateFormat }}
-						</template>
-					</el-table-column>
-					<el-table-column prop="操作" label="操作" width="380px">
-						<template slot-scope="props">
-							<el-button type="primary" @click="prepareDealMessageOne(props.row.userName)" size="small">私信</el-button>
-							<el-dialog title="提示" :visible.sync="dealMessageOneVisible" width="30%" :before-close="handleClose">
-								<span>确认私信吗?</span>
-								<span slot="footer" class="dialog-footer">
-									<el-button @click="dealMessageOneVisible = false">取 消</el-button>
-									<el-button type="primary" @click.prevent="dealMessageOne(currentUserName)">确 定</el-button>
-								</span>
-							</el-dialog>
-							<el-button type="danger" @click="prepareDelete(props.row.id)" size="small">删除</el-button>
-							<el-dialog title="提示" :visible.sync="deleteDialogVisible" width="30%" :before-close="handleClose">
-								<span>确认删除?</span>
-								<span slot="footer" class="dialog-footer">
-									<el-button @click="deleteDialogVisible = false">取 消</el-button>
-									<el-button type="primary" @click.prevent="onDelete(currentRowId)">确 定</el-button>
-								</span>
-							</el-dialog>
-						</template>
-					</el-table-column>
-				</el-table>
-				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[8, 50, 100, 200, 400]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
-			</el-main>
-			<el-backtop class="backtop"></el-backtop>
-		</el-container>
-	</div>
+          <el-table-column label="更新时间">
+            <template slot-scope="props">
+              {{ props.row.updateTime | dateFormat }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="操作" label="操作" width="380px">
+            <template slot-scope="props">
+              <el-button type="primary" @click="dealMessageOne(props.row.userName)" size="small">私信</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
+                       :page-sizes="[8, 50, 100, 200, 400]" :page-size="pageSize"
+                       layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
+      </el-main>
+      <el-backtop class="backtop"></el-backtop>
+    </el-container>
+  </div>
 </template>
 
 <script>
 import axios from 'axios'
+import ApiService from '../../api/ApiService'
 export default {
-	name: 'MyMessage',
+  name: 'MyMessage',
 
-	data() {
-		return {
-			formInline: {
-				userName: '',
-				nickName: '',
-				hasRepliedInfo: null,
-			},
-			hasRepliedInfo: [
-				{
-					type: -1,
-					name: '全部',
-				},
-				{
-					type: 0,
-					name: '未回复',
-				},
-				{ type: 1, name: '已回复' },
-			],
-			deleteDialogVisible: false,
-			dealMessageOneVisible: false,
-			messageDialogVisible: false,
-			refreshMessageDialogVisible: false,
-			// 用户列表数据
-			csdnMessageList: [],
-			loading: false,
-			elementui_page_component_key: 0,
-			currentPage: Number(localStorage.getItem('csdnUserPage')) || 1,
-			pageSize: 8,
-			total: 0,
-			currentRowId: null,
-			currentUserName: null,
-		}
-	},
-	watch: {
-		'formInline.userName'(newVal, oldVal) {
-			if (newVal !== oldVal) {
-				this.currentPage = 1
-				localStorage.setItem('csdnUserPage', this.currentPage)
-				this.messagePage()
-			}
-		},
-		'formInline.nickName'(newVal, oldVal) {
-			if (newVal !== oldVal) {
-				this.currentPage = 1
-				localStorage.setItem('csdnUserPage', this.currentPage)
-				this.messagePage()
-			}
-		},
-		// 监听currentPage的变化，将新值保存到localStorage中
-		currentPage(newPage) {
-			localStorage.setItem('csdnUserPage', newPage.toString())
-		},
-	},
-	created() {
-		//获取问题类型的枚举
-		this.messagePage()
-	},
-	mounted() {
-		this.currentPage = 1
-	},
-	methods: {
-		prepareMeaasge() {
-			this.messageDialogVisible = true
-		},
-		prepareRefreshMessage() {
-			this.refreshMessageDialogVisible = true
-		},
-		prepareDelete(id) {
-			this.currentRowId = id
-			this.deleteDialogVisible = true
-		},
-		prepareDealMessageOne(userName) {
-			this.currentUserName = userName
-			this.dealMessageOneVisible = true
-		},
+  data() {
+    return {
+      formInline: {
+        userName: '',
+        nickName: '',
+        hasRepliedInfo: null,
+      },
+      hasRepliedInfo: [
+        {
+          type: -1,
+          name: '全部',
+        },
+        {
+          type: 0,
+          name: '未回复',
+        },
+        {type: 1, name: '已回复'},
+      ],
+      refreshMessageDialogVisible: false,
+      // 用户列表数据
+      csdnMessageList: [],
+      loading: false,
+      elementui_page_component_key: 0,
+      currentPage: Number(localStorage.getItem('csdnUserPage')) || 1,
+      pageSize: 8,
+      total: 0,
+      currentRowId: null,
+      currentUserName: null,
+    }
+  },
+  watch: {
+    'formInline.userName'(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.currentPage = 1
+        localStorage.setItem('csdnUserPage', this.currentPage)
+        this.messagePage()
+      }
+    },
+    'formInline.nickName'(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.currentPage = 1
+        localStorage.setItem('csdnUserPage', this.currentPage)
+        this.messagePage()
+      }
+    },
+    // 监听currentPage的变化，将新值保存到localStorage中
+    currentPage(newPage) {
+      localStorage.setItem('csdnUserPage', newPage.toString())
+    },
+  },
+  created() {
+    //获取问题类型的枚举
+    this.messagePage()
+  },
+  mounted() {
+    this.currentPage = 1
+  },
+  methods: {
+    prepareRefreshMessage() {
+      this.refreshMessageDialogVisible = true
+    },
 
-		handleClose(done) {
-			this.$confirm('确认关闭？')
-				.then((_) => {
-					done()
-				})
-				.catch((_) => {})
-		},
-		handleConfirm(addType) {
-			this.dialogFormVisible = false // 关闭对话框
-			this.dialogMutiFormVisible = false
-			this.addUser(addType) // 发送请求
-		},
-		async messagePage() {
-			this.loading = true
-			const { data: res } = await axios.post('http://localhost:80/csdn/message/page', {
-				page: this.currentPage,
-				pageSize: this.pageSize,
-				userName: this.formInline.userName,
-				nickName: this.formInline.nickName,
-				hasReplied: this.formInline.hasRepliedInfo == -1 ? null : this.formInline.hasRepliedInfo,
-			})
-			if (res.code === 200) {
-				this.total = res.result.totalElements
-				const userWeightMap = {}
-				this.hasRepliedInfo.forEach((option) => {
-					userWeightMap[option.type] = option.name
-				})
-				res.result.content.forEach((item) => {
-					item.hasRepliedName = userWeightMap[item.hasReplied]
-				})
-				this.csdnMessageList = res.result.content
-			}
-			this.loading = false
-		},
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+          .then((_) => {
+            done()
+          })
+          .catch((_) => {
+          })
+    },
+    handleConfirm(addType) {
+      this.dialogFormVisible = false // 关闭对话框
+      this.dialogMutiFormVisible = false
+      this.addUser(addType) // 发送请求
+    },
+    async messagePage() {
+      this.loading = true
+      const {data: res} = await ApiService.messagePage(this.currentPage, this.pageSize, this.formInline)
+      if (res.code === 200) {
+        this.total = res.result.totalElements
+        const userWeightMap = {}
+        this.hasRepliedInfo.forEach((option) => {
+          userWeightMap[option.type] = option.name
+        })
+        res.result.content.forEach((item) => {
+          item.hasRepliedName = userWeightMap[item.hasReplied]
+        })
+        this.csdnMessageList = res.result.content
+      }
+      this.loading = false
+    },
 
-		async dealMessageOne(userName) {
-			this.loading = true
-			this.dealMessageOneVisible = false
-			const { data: res } = await axios.get('http://localhost:80/csdn/message/dealMessageOne?userName=' + userName)
-			if (res.code === 200) {
-				this.currentUserName = null
-				this.messagePage()
-			} else {
-				console.error('Received non-200 status code', res)
-			}
-			this.loading = false
-		},
+    async dealMessageOne(userName) {
+      this.loading = true
+      const {data: res} = await ApiService.dealMessageOne(userName)
+      if (res.code === 200) {
+        this.currentUserName = null
+        await this.messagePage()
+      } else {
+        console.error('Received non-200 status code', res)
+      }
+      this.loading = false
+    },
 
-		async messageDeal() {
-			this.loading = true
-			this.messageDialogVisible = false
-			const { data: res1 } = await axios.get('http://localhost:80/csdn/message/dealMessage')
-			if (res1.code === 200) {
-				this.messagePage()
-			} else {
-				console.error('Received non-200 status code', res1)
-			}
-			const { data: res2 } = await axios.get('http://localhost:80/csdn/likeCollect/dealLikeCollect')
-			if (res2.code === 200) {
-				this.messagePage()
-			} else {
-				console.error('Received non-200 status code', res2)
-			}
-			this.loading = false
-		},
-		async refreshMessage() {
-			this.loading = true
-			this.refreshMessageDialogVisible = false
-			const { data: res } = await axios.get('http://localhost:80/csdn/message/acquireMessage')
-			if (res.code === 200) {
-				this.messagePage()
-			} else {
-				console.error('Received non-200 status code', res)
-			}
-			this.loading = false
-		},
-		async onDelete(id) {
-			this.loading = true
-			const { data: res } = await axios.get('http://localhost:80/csdn/user/delete', {
-				params: {
-					id: id,
-				},
-			})
-			this.deleteDialogVisible = false
-			this.messagePage()
-			this.loading = false
-		},
-		refreshPage() {
-			//获取问题类型的枚举
-			this.messagePage()
-			location.reload()
-		},
-		handleCurrentChange(currentPage) {
-			this.currentPage = currentPage
-			this.messagePage()
-		},
-		handleSizeChange(currentSize) {
-			this.pageSize = currentSize
-			this.messagePage()
-		},
-		getTagType(hasRepliedName) {
-			if (hasRepliedName == '未回复') {
-				return 'warning'
-			} else {
-				return 'success'
-			}
-		},
-	},
+    async messageDeal() {
+      this.loading = true
+      const {data: res1} = await ApiService.dealMessage()
+      if (res1.code === 200) {
+        await this.messagePage()
+      } else {
+        console.error('Received non-200 status code', res1)
+      }
+      const {data: res2} = await ApiService.dealLikeCollect()
+      if (res2.code === 200) {
+        await this.messagePage()
+      } else {
+        console.error('Received non-200 status code', res2)
+      }
+      this.loading = false
+    },
+    async acquireMessage() {
+      this.loading = true
+      this.refreshMessageDialogVisible = false
+      const {data: res} = await ApiService.acquireMessage()
+      if (res.code === 200) {
+        await this.messagePage()
+      } else {
+        console.error('Received non-200 status code', res)
+      }
+      this.loading = false
+    },
+    refreshPage() {
+      //获取问题类型的枚举
+      this.messagePage()
+      location.reload()
+    },
+    handleCurrentChange(currentPage) {
+      this.currentPage = currentPage
+      this.messagePage()
+    },
+    handleSizeChange(currentSize) {
+      this.pageSize = currentSize
+      this.messagePage()
+    },
+    getTagType(hasRepliedName) {
+      if (hasRepliedName == '未回复') {
+        return 'warning'
+      } else {
+        return 'success'
+      }
+    },
+  },
 }
 </script>
 
 <style lang="less" scoped>
 .el-header {
-	background-color: #b3c0d1;
-	color: #333;
-	line-height: 60px;
+  background-color: #b3c0d1;
+  color: #333;
+  line-height: 60px;
 }
 
 .el-aside {
-	color: #333;
+  color: #333;
 }
 
 .pagination {
-	margin-top: 16px;
-	text-align: right;
+  margin-top: 16px;
+  text-align: right;
 }
+
 .header-button-item {
-	margin-right: 15px;
-	font-size: 20px;
+  margin-right: 15px;
+  font-size: 20px;
 }
 
 .red-title {
-	line-height: 24px;
-	font-size: 18px;
-	color: red;
+  line-height: 24px;
+  font-size: 18px;
+  color: red;
 }
 
 .backtop {
-	position: fixed;
-	bottom: 50px;
-	right: 50px;
-	height: 40px;
-	width: 40px;
-	line-height: 40px;
-	text-align: center;
-	border-radius: 20px;
-	background-color: #007aff;
-	color: #fff;
-	cursor: pointer;
-	z-index: 999;
+  position: fixed;
+  bottom: 50px;
+  right: 50px;
+  height: 40px;
+  width: 40px;
+  line-height: 40px;
+  text-align: center;
+  border-radius: 20px;
+  background-color: #007aff;
+  color: #fff;
+  cursor: pointer;
+  z-index: 999;
 }
+
 .custom-textarea {
-	width: 100%;
-	text-align: left;
+  width: 100%;
+  text-align: left;
 }
+
 .backtop:hover {
-	background-color: #0050a0;
+  background-color: #0050a0;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/menus/MyPic.vue b/src/components/menus/MyPic.vue
index b48a258eed163d4b924a2675f03f2467155ea6aa..30fbf94d5c6e0f91f3ba328f7e2f9d26e30f260a 100644
--- a/src/components/menus/MyPic.vue
+++ b/src/components/menus/MyPic.vue
@@ -4,8 +4,11 @@
 			<el-main>
 				<el-form :inline="true" :model="formInline" class="demo-form-inline">
 					<el-form-item>
-						<el-select size="small" v-model="picType" placeholder="请选择" @change="queryPic">
-							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+						<el-input size="small" clearable v-model="formInline.picName" placeholder="请输入图片名称" @keydown.enter.native="queryPic"></el-input>
+					</el-form-item>
+					<el-form-item>
+						<el-select size="small" clearable v-model="formInline.type" placeholder="请选择" @change="queryPic">
+							<el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
 						</el-select>
 					</el-form-item>
 					<el-form-item>
@@ -14,22 +17,44 @@
 					<el-form-item>
 						<el-button size="small" type="primary" @click="prepareAddPic">新增图片</el-button>
 						<el-dialog title="新增图片" :visible.sync="addPicVisible" style="width: 100%">
-							<el-upload ref="upload" :limit="30" accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx" name="files" multiple action="http://localhost:80/picInfo/upload" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :on-success="handleUploadSuccess">
+							<el-select size="small" v-model="formInline.type" placeholder="请选择图片类型">
+								<el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
+							</el-select>
+							<el-upload ref="upload" :limit="30" accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx" name="files" multiple :action="getUploadAction()" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :on-success="handleUploadSuccess">
 								<el-button slot="trigger" size="small" type="primary">选择图片</el-button>
 								<el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
 							</el-upload>
 						</el-dialog>
 					</el-form-item>
-				</el-form>
 
-				<el-table border :data="picList" v-loading="loading">
+					<el-form-item>
+						<el-button size="small" type="primary" @click="prepareBatchUpdatePic">批量修改</el-button>
+						<el-dialog title="批量修改" :visible.sync="batchUpdatePicVisible" style="width: 100%">
+							<el-form :model="form" class="custom-form">
+								<el-form-item label="图片类型" :label-width="formLabelWidth" class="form-item">
+									<el-select size="small" v-model="form.type" placeholder="请选择图片类型">
+										<el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
+									</el-select>
+								</el-form-item>
+							</el-form>
+							<div slot="footer" class="dialog-footer">
+								<el-button @click="batchUpdatePicVisible = false">取 消</el-button>
+								<el-button type="primary" @click="batchUpdatePic()">确 定</el-button>
+							</div>
+						</el-dialog>
+					</el-form-item>
+				</el-form>
+				<el-table border ref="multipleTable" v-loading="loading" :data="picList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
+					<el-table-column type="selection" width="55"></el-table-column>
 					<el-table-column prop="id" label="序号" align="center" sortable></el-table-column>
 					<el-table-column prop="picName" label="图片名字" align="center" show-overflow-tooltip></el-table-column>
+					<el-table-column prop="type" label="图片类型" align="center" show-overflow-tooltip></el-table-column>
 					<el-table-column align="center">
 						<template slot-scope="props">
 							<img :src="props.row.picUrl" alt="图片" height="100px" @click="showImageDialog(props.row.picUrl, props.$index)" style="cursor: pointer" />
 						</template>
 					</el-table-column>
+
 					<el-table-column label="创建时间" align="center">
 						<template slot-scope="props">
 							{{ props.row.createTime | dateFormat }}
@@ -38,18 +63,20 @@
 
 					<el-table-column prop="操作" label="操作" width="100px" align="center">
 						<template slot-scope="props">
-							<el-button size="small" type="primary" @click.prevent="prePicEdit(props.row.id, props.row.picUrl, props.row.type)">编辑</el-button>
+							<el-button size="small" type="primary" @click.prevent="prePicEdit(props.row.id, props.row.picName, props.row.picUrl, props.row.type)">编辑</el-button>
 							<el-dialog title="编辑图片信息" :visible.sync="editPicVisible">
 								<el-form :model="form" class="custom-form">
 									<el-form-item align="center" class="form-item">
 										<img :src="form.picUrl" alt="图片" height="100px" style="cursor: pointer" />
 									</el-form-item>
-
 									<el-form-item label="" class="form-item" align="middle">
 										<el-select v-model="form.type" placeholder="请选择">
-											<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+											<el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
 										</el-select>
 									</el-form-item>
+									<el-form-item>
+										<el-input clearable v-model="form.picName" placeholder="请输入图片名称"></el-input>
+									</el-form-item>
 								</el-form>
 								<div slot="footer" class="dialog-footer">
 									<el-button @click="editPicVisible = false">取 消</el-button>
@@ -83,15 +110,19 @@ export default {
 	name: 'MyPic',
 	data() {
 		return {
+			fileUrl: 'http://localhost:80/picInfo/upload',
 			form: {
+				picName: '',
 				picUrl: '',
-				type: 0,
+				type: '',
 			},
 			formInline: {
-				picType: 0,
+				type: '',
+				picName: '',
 			},
 			//待上传的图片
 			fileList: [],
+			multipleSelection: [],
 			// 用户列表数据
 			picList: [],
 			loading: false,
@@ -99,54 +130,43 @@ export default {
 			currentPage: 1,
 			pageSize: 6,
 			total: 0,
+			formLabelWidth: '120px',
 			imageDialogVisible: false,
+			batchUpdatePicVisible: false,
 			addPicVisible: false,
 			editPicVisible: false,
 			enlargedImageUrl: '',
 			currentRowId: null,
 			imageIndex: 0, // 当前展示的图片索引
-			options: [
-				{
-					value: 0,
-					label: '宝宝',
-				},
-				{
-					value: 1,
-					label: '学习',
-				},
-				{
-					value: 2,
-					label: '风景',
-				},
-				{
-					value: 3,
-					label: '美女',
-				},
-				{
-					value: 4,
-					label: '猫咪',
-				},
-				{
-					value: 5,
-					label: '素材',
-				},
-				{
-					value: 6,
-					label: '动漫',
-				},
-				{
-					value: 99,
-					label: '其他',
-				},
-			],
-			picType: 0,
+			options: ['全部', '宝宝', '学习', '风景', '美女', '猫咪', '素材', '动漫', '其他'],
 		}
 	},
+	watch: {
+		formInline: {
+			handler(newVal, oldVal) {
+				this.currentPage = 1
+				localStorage.setItem('picPage', this.currentPage)
+				this.queryPic()
+			},
+			deep: true,
+		},
+		// 监听currentPage的变化，将新值保存到localStorage中
+		currentPage(newPage) {
+			localStorage.setItem('picPage', newPage.toString())
+		},
+	},
 	created() {
 		// 调用请求数据的方法
 		this.queryPic()
 	},
 	methods: {
+		prepareBatchUpdatePic() {
+			this.form.type = ''
+			this.batchUpdatePicVisible = true
+		},
+		getUploadAction() {
+			return this.fileUrl + '?type=' + this.formInline.type
+		},
 		async submitUpload() {
 			this.$refs.upload.submit()
 			this.addPicVisible = false
@@ -160,8 +180,9 @@ export default {
 		prepareAddPic() {
 			this.addPicVisible = true
 		},
-		prePicEdit(id, picUrl, type) {
+		prePicEdit(id, picName, picUrl, type) {
 			this.currentRowId = id
+			this.form.picName = picName
 			this.form.picUrl = picUrl
 			this.form.type = type
 			this.editPicVisible = true
@@ -199,7 +220,7 @@ export default {
 		},
 		async queryPic() {
 			this.loading = true
-			const { data: res } = await ApiService.queryPic(this.currentPage, this.pageSize, this.picType)
+			const { data: res } = await ApiService.queryPic(this.currentPage, this.pageSize, this.formInline)
 			if (res.code === 200) {
 				this.picList = res.result.records
 				this.total = res.result.total
@@ -210,9 +231,10 @@ export default {
 			try {
 				this.loading = true
 				this.editPicVisible = false
-				const { data: res } = await ApiService.editPicConfirm(this.currentRowId, this.form.type)
+				const { data: res } = await ApiService.editPicConfirm(this.currentRowId, this.form.type, this.form.picName)
 				if (res.code === 200) {
-					this.form.type = 0
+					this.form.picName = ''
+					this.form.type = ''
 					this.form.picUrl = null
 					this.currentRowId = null
 					this.queryPic()
@@ -227,6 +249,26 @@ export default {
 			}
 		},
 
+		async batchUpdatePic() {
+			this.loading = true
+			this.batchUpdatePicVisible = false
+			if (this.multipleSelection && this.multipleSelection.length === 0) {
+				this.loading = false
+				this.errorMsg('请选择需要处理项')
+			} else {
+				let ids = this.multipleSelection.map((item) => item.id)
+				const { data: res } = await ApiService.batchUpdatePic(ids, this.form.type)
+				if (res.code === 200) {
+					this.multipleSelection = []
+					this.form.type = ''
+					this.queryPic()
+				} else {
+					console.error('Received non-200 status code', res)
+				}
+			}
+			this.loading = false
+		},
+
 		handleCurrentChange(currentPage) {
 			this.currentPage = currentPage
 			this.queryPic()
@@ -235,6 +277,16 @@ export default {
 			this.pageSize = currentSize
 			this.queryPic()
 		},
+		handleSelectionChange(val) {
+			this.multipleSelection = val
+		},
+		errorMsg(msg) {
+			this.$message({
+				showClose: true,
+				message: msg,
+				type: 'error',
+			})
+		},
 	},
 }
 </script>
diff --git a/src/components/menus/MyTripletDayInfo.vue b/src/components/menus/MyTripletDayInfo.vue
index a7744983556e3acadfb0bc8ada3447f237058559..d77d6ab58fcf96638819658e1be8dd551e3aee3d 100644
--- a/src/components/menus/MyTripletDayInfo.vue
+++ b/src/components/menus/MyTripletDayInfo.vue
@@ -32,13 +32,11 @@
 							{{ props.row.tripletDate | dateDayFormat }}
 						</template>
 					</el-table-column>
-
 					<el-table-column align="center" sortable prop="likeNum" label="点赞数量" show-overflow-tooltip>
 						<template slot-scope="scope">
 							<el-tag :type="isMaxValue(scope.row.likeNum, 'likeNum')">{{ scope.row.likeNum }}</el-tag>
 						</template>
 					</el-table-column>
-
 					<el-table-column align="center" sortable prop="collectNum" label="收藏数量" show-overflow-tooltip>
 						<template slot-scope="scope">
 							<el-tag :type="isMaxValue(scope.row.collectNum, 'collectNum')">{{ scope.row.collectNum }}</el-tag>
@@ -79,7 +77,6 @@
 </template>
 
 <script>
-import axios from 'axios'
 import ApiService from '../../api/ApiService'
 export default {
     name: 'MyTripletDayInfo',
@@ -126,6 +123,8 @@ export default {
                 endDate: null,
                 weekInfo: null,
             },
+            form: {
+            },
             tripletDayInfoList: [],
             weekInfo: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
             likeStatus: [
@@ -174,7 +173,7 @@ export default {
                 { type: 2, name: '评论已满' },
                 { type: 3, name: '禁言' },
                 { type: 4, name: '评论太快' },
-                { type: 5, name: '评论已经到了40条' },
+                { type: 5, name: '评论已到40条' },
                 { type: 8, name: '其他错误' },
                 { type: 9, name: '评论成功' },
             ],
@@ -249,7 +248,6 @@ export default {
                 res.result.from.content.forEach((item) => {
                     item.commentStatusName = commentStatusMap[item.commentStatus]
                 })
-
                 this.tripletDayInfoList = res.result.from.content
             }
             this.loading = false
@@ -271,7 +269,7 @@ export default {
                 return 'info'
             } else if (statusName == '已经点过赞' || statusName == '已经收藏过' || statusName == '已经评论过') {
                 return 'success'
-            } else if (statusName == '文章状态不能点赞' || statusName == '收藏已满' || statusName == '收藏夹不存在' || statusName == '评论已满' || statusName == '禁言' || statusName == '评论已经到了40条') {
+            } else if (statusName == '文章状态不能点赞' || statusName == '收藏已满' || statusName == '收藏夹不存在' || statusName == '评论已满' || statusName == '禁言' || statusName == '评论已到40条') {
                 return 'danger'
             } else if (statusName == '点赞成功' || statusName == '收藏成功' || statusName == '评论成功') {
                 return 'success'