From 996d1a2cf8b8057acecbba6a9763fd66f489646e Mon Sep 17 00:00:00 2001
From: junleea <354425203@qq.com>
Date: Wed, 19 Mar 2025 20:01:03 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=EF=BC=8C=E7=94=A8=E6=88=B7=E4=B8=AD=E5=BF=83=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json            | 136 +++++++++++++++++++
 package.json                 |   2 +
 src/api/tool.ts              |  48 +++++++
 src/components/header.vue    |   3 -
 src/types/user.ts            |  36 +++++
 src/views/pages/login.vue    | 238 ++++++++++++++++----------------
 src/views/pages/register.vue |   8 ++
 src/views/pages/ucenter.vue  | 211 +++++++++++++++++++++++------
 src/views/pages/ucenter2.vue | 253 -----------------------------------
 src/views/system/user.vue    | 187 ++++++++++++++++++++------
 yarn.lock                    | 121 ++++++++++++++++-
 11 files changed, 796 insertions(+), 447 deletions(-)
 create mode 100644 src/api/tool.ts
 delete mode 100644 src/views/pages/ucenter2.vue

diff --git a/package-lock.json b/package-lock.json
index b599228..9e29c08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
 				"@wangeditor/editor-for-vue": "^5.1.12",
 				"axios": "^1.6.3",
 				"countup.js": "^2.8.0",
+				"cropperjs": "^2.0.0",
 				"echarts": "^5.5.0",
 				"echarts-wordcloud": "^2.1.0",
 				"element-plus": "^2.6.3",
@@ -22,6 +23,7 @@
 				"pinia": "^2.1.7",
 				"vue": "^3.4.5",
 				"vue-cropper": "1.1.1",
+				"vue-cropperjs": "^5.0.0",
 				"vue-echarts": "^6.6.9",
 				"vue-router": "^4.2.5",
 				"vue-schart": "^2.0.0",
@@ -69,6 +71,115 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@cropper/element": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element/-/element-2.0.0.tgz",
+			"integrity": "sha512-lsthn0nQq73GExUE7Mg/ss6Q3RXADGDv055hxoLFwvl/wGHgy6ZkYlfLZ/VmgBHC6jDK5IgPBFnqrPqlXWSGBA==",
+			"dependencies": {
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/element-canvas": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element-canvas/-/element-canvas-2.0.0.tgz",
+			"integrity": "sha512-GPtGJgSm92crJhhhwUsaMw3rz2KfJWWSz7kRAlufFEV/EHTP5+6r6/Z1BCGRna830i+Avqbm435XLOtA7PVJwA==",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/element-crosshair": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element-crosshair/-/element-crosshair-2.0.0.tgz",
+			"integrity": "sha512-KfPfyrdeFvUC31Ws7ATtcalWWSaMtrC6bMoCipZhqbUOE7wZoL4ecDSL6BUOZxPa74awZUqfzirCDjHvheBfyw==",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/element-grid": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element-grid/-/element-grid-2.0.0.tgz",
+			"integrity": "sha512-i78SQ0IJTLFveKX6P7svkfMYVdgHrQ8ZmmEw8keFy9n1ZVbK+SK0UHK5FNMRNI/gtVhKJOGEnK/zeyjUdj4Iyw==",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/element-handle": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element-handle/-/element-handle-2.0.0.tgz",
+			"integrity": "sha512-ZJvW+0MkK9E8xYymGdoruaQn2kwjSHFpNSWinjyq6csuVQiCPxlX5ovAEDldmZ9MWePPtWEi3vLKQOo2Yb0T8g==",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/element-image": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element-image/-/element-image-2.0.0.tgz",
+			"integrity": "sha512-9BxiTS/aHRmrjopaFQb9mQQXmx4ruhYHGkDZMVz24AXpMFjUY6OpqrWse/WjzD9tfhMFvEdu17b3VAekcAgpeg==",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/element-canvas": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/element-selection": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element-selection/-/element-selection-2.0.0.tgz",
+			"integrity": "sha512-ensNnbIfJsJ8bhbJTH/RXtk2URFvTOO4TvfRk461n2FPEC588D7rwBmUJxQg74IiTi4y1JbCI+6j+4LyzYBLCQ==",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/element-canvas": "^2.0.0",
+				"@cropper/element-image": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/element-shade": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element-shade/-/element-shade-2.0.0.tgz",
+			"integrity": "sha512-jv/2bbNZnhU4W+T4G0c8ADocLIZvQFTXgCf2RFDNhI5UVxurzWBnDdb8Mx8LnVplnkTqO+xUmHZYve0CwgWo+Q==",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/element-canvas": "^2.0.0",
+				"@cropper/element-selection": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/element-viewer": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/element-viewer/-/element-viewer-2.0.0.tgz",
+			"integrity": "sha512-zY+3VRN5TvpM8twlphYtXw0tzJL2VgzeK7ufhL1BixVqOdRxwP13TprYIhqwGt9EW/SyJZUiaIu396T89kRX8A==",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/element-canvas": "^2.0.0",
+				"@cropper/element-image": "^2.0.0",
+				"@cropper/element-selection": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/elements": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/elements/-/elements-2.0.0.tgz",
+			"integrity": "sha512-PQkPo1nUjxLFUQuHYu+6atfHxpX9B41Xribao6wpvmvmNIFML6LQdNqqWYb6LyM7ujsu71CZdBiMT5oetjJVoQ==",
+			"dependencies": {
+				"@cropper/element": "^2.0.0",
+				"@cropper/element-canvas": "^2.0.0",
+				"@cropper/element-crosshair": "^2.0.0",
+				"@cropper/element-grid": "^2.0.0",
+				"@cropper/element-handle": "^2.0.0",
+				"@cropper/element-image": "^2.0.0",
+				"@cropper/element-selection": "^2.0.0",
+				"@cropper/element-shade": "^2.0.0",
+				"@cropper/element-viewer": "^2.0.0"
+			}
+		},
+		"node_modules/@cropper/utils": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@cropper/utils/-/utils-2.0.0.tgz",
+			"integrity": "sha512-cprLYr+7kK3faGgoOsTW9gIn5sefDr2KwOmgyjzIXk+8PLpW8FgFKEg5FoWfRD5zMAmkCBuX6rGKDK3VdUEGrg=="
+		},
 		"node_modules/@ctrl/tinycolor": {
 			"version": "3.6.1",
 			"resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
@@ -847,6 +958,15 @@
 				"node": ">=0.8"
 			}
 		},
+		"node_modules/cropperjs": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-2.0.0.tgz",
+			"integrity": "sha512-TO2j0Qre01kPHbow4FuTrbdEB4jTmGRySxW49jyEIqlJZuEBfrvCTT0vC3eRB2WBXudDfKi1Onako6DKWKxeAQ==",
+			"dependencies": {
+				"@cropper/elements": "^2.0.0",
+				"@cropper/utils": "^2.0.0"
+			}
+		},
 		"node_modules/csstype": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -2474,6 +2594,22 @@
 			"resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-1.1.1.tgz",
 			"integrity": "sha512-WsqKMpaBf9Osi1LQlE/5AKdD0nHWOy1asLXocaG8NomOWO07jiZi968+/PbMmnD0QbPJOumDQaGuGa13qys85A=="
 		},
+		"node_modules/vue-cropperjs": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/vue-cropperjs/-/vue-cropperjs-5.0.0.tgz",
+			"integrity": "sha512-RhnC8O33uRZNkn74aiHZwNHnBJOXWlS4P6gsRI0lw4cZlWjKSCywZI9oSI9POlIPI6OYv30jvnHMXGch85tw7w==",
+			"dependencies": {
+				"cropperjs": "^1.5.6"
+			},
+			"peerDependencies": {
+				"vue": ">=3.0.0"
+			}
+		},
+		"node_modules/vue-cropperjs/node_modules/cropperjs": {
+			"version": "1.6.2",
+			"resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz",
+			"integrity": "sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA=="
+		},
 		"node_modules/vue-echarts": {
 			"version": "6.6.9",
 			"resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.6.9.tgz",
diff --git a/package.json b/package.json
index 1271716..0f1eded 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
 		"@wangeditor/editor-for-vue": "^5.1.12",
 		"axios": "^1.6.3",
 		"countup.js": "^2.8.0",
+		"cropperjs": "^2.0.0",
 		"echarts": "^5.5.0",
 		"echarts-wordcloud": "^2.1.0",
 		"element-plus": "^2.6.3",
@@ -22,6 +23,7 @@
 		"pinia": "^2.1.7",
 		"vue": "^3.4.5",
 		"vue-cropper": "1.1.1",
+		"vue-cropperjs": "^5.0.0",
 		"vue-echarts": "^6.6.9",
 		"vue-router": "^4.2.5",
 		"vue-schart": "^2.0.0",
diff --git a/src/api/tool.ts b/src/api/tool.ts
new file mode 100644
index 0000000..2c34087
--- /dev/null
+++ b/src/api/tool.ts
@@ -0,0 +1,48 @@
+import request from '@/utils/request2'
+
+
+export const GetRedisInfoService = (Data) => {
+    const params = new URLSearchParams();
+    for (let key in Data) {
+        params.append(key, Data[key])
+    }
+    let request1 = getRequest();
+    return request1.post('/tool/get_redis', params,{
+        headers: {
+            'token': Data.token, // 闂佽绻愭蹇涘箯閿燂拷 token 闂備礁鎼ú锔锯偓绗涘啰鏆﹂柛娆忣槺閳绘棃鏌ｉ幋鐏活亝绂嶉崼鏇熺厽闁靛ǹ鍎遍褔鏌熼煬鎻掆偓婵嬪箖瑜忔禒锔炬喆閿濆懍澹曢梺璺ㄥ櫐閹凤拷  
+        }
+    })
+}
+function getRequest() {
+    let server = localStorage.getItem('cid_server');
+    let request1 = null;
+    if (server === "tx.ljsea.top") {
+        request1 = request;
+    }else{
+        request1 = request;
+    }
+    return request1;
+}
+
+export const UploadFileService = (formData,token) => {
+    //let request1 = getRequest();
+    return request.post('/tool/upload', formData,{
+        headers: {
+            'Content-Type': 'multipart/form-data',
+            'token': token, 
+        }
+    })
+}
+
+export const GetFileInfoByMd5Service = (Data) => {
+    const params = new URLSearchParams();
+    for (let key in Data) {
+        params.append(key, Data[key])
+    }
+    //let request1 = getRequest();
+    return request.post('/tool/file_list', params,{
+        headers: {
+            'token': Data.token, 
+        }
+    })
+}
\ No newline at end of file
diff --git a/src/components/header.vue b/src/components/header.vue
index 9fad25f..dd9f6c0 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -45,9 +45,6 @@
 					</span>
 					<template #dropdown>
 						<el-dropdown-menu>
-							<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
-								<el-dropdown-item>项目仓库</el-dropdown-item>
-							</a>
 							<el-dropdown-item command="user">个人中心</el-dropdown-item>
 							<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
 						</el-dropdown-menu>
diff --git a/src/types/user.ts b/src/types/user.ts
index beb701f..b38d0e7 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -13,4 +13,40 @@ export interface Register {
     username: string;
     password: string;
     email: string;
+}
+
+/**
+ * 
+ *         "ID": 1,
+        "CreatedAt": "2024-08-30T14:35:15.556734+08:00",
+        "UpdatedAt": "2025-03-11T15:13:27.972681+08:00",
+        "DeletedAt": null,
+        "Name": "lijun",
+        "Age": 24,
+        "Email": "lijun@ljsea.top",
+        "Password": "",
+        "Gender": "男",
+        "Role": "admin",
+        "Redis": true,
+        "Run": true,
+        "Upload": true,
+        "VideoFunc": true,
+        "DeviceFunc": true,
+        "CIDFunc": true,
+        "Avatar": "https://gep.ljsea.top/tool/file/d5a17d88-1641-4666-a9e1-53fbb04a6abf.jpg",
+        "CreateTime": "",
+        "UpdateTime": ""
+ */
+export interface UserInfo {
+    ID: number;
+    CreatedAt: string;
+    UpdatedAt: string;
+    DeletedAt: string;
+    Name: string;
+    Password: string;
+    Age: number;
+    Email: string;
+    Gender: string;
+    Role: string;
+    Avatar: string;
 }
\ No newline at end of file
diff --git a/src/views/pages/login.vue b/src/views/pages/login.vue
index 132b141..2efc5e8 100644
--- a/src/views/pages/login.vue
+++ b/src/views/pages/login.vue
@@ -1,58 +1,71 @@
 <template>
-    <div class="login-bg">
-        <div class="login-container">
-            <div class="login-header">
-                <img class="logo mr10" src="../../assets/img/logo.svg" alt="" />
-                <div class="login-title">大学生学业作品AI生成工具</div>
-            </div>
-            <el-form :model="param" :rules="rules" ref="login" size="large">
-                <el-form-item prop="username">
-                    <el-input v-model="param.username" placeholder="用户名或邮箱">
-                        <template #prepend>
-                            <el-icon>
-                                <User />
-                            </el-icon>
-                        </template>
-                    </el-input>
-                </el-form-item>
-                <el-form-item prop="password">
-                    <el-input
-                        type="password"
-                        placeholder="密码"
-                        v-model="param.password"
-                        @keyup.enter="submitForm(login)"
-                    >
-                        <template #prepend>
-                            <el-icon>
-                                <Lock />
-                            </el-icon>
-                        </template>
-                    </el-input>
-                </el-form-item>
-                <div class="pwd-tips">
-                    <el-checkbox class="pwd-checkbox" v-model="checked" label="记住密码" />
-                    <el-link type="primary" @click="$router.push('/reset-pwd')">忘记密码</el-link>
-                </div>
-                <el-button class="login-btn" type="primary" size="large" @click="onLogin">登录</el-button>
-                <p class="login-text">
-                    没有账号？<el-link type="primary" @click="$router.push('/register')">立即注册</el-link>
-                </p>
-            </el-form>
+  <div class="login-bg">
+    <div class="login-container">
+      <div class="login-header">
+        <img class="logo mr10" src="../../assets/img/logo.svg" alt="" />
+        <div class="login-title">大学生学业作品AI生成工具</div>
+      </div>
+      <el-form :model="param" :rules="rules" ref="login" size="large">
+        <el-form-item prop="username">
+          <el-input v-model="param.username" placeholder="用户名或邮箱">
+            <template #prepend>
+              <el-icon>
+                <User />
+              </el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input
+            type="password"
+            placeholder="密码"
+            v-model="param.password"
+            @keyup.enter="submitForm(login)"
+          >
+            <template #prepend>
+              <el-icon>
+                <Lock />
+              </el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <div class="pwd-tips">
+          <el-checkbox
+            class="pwd-checkbox"
+            v-model="checked"
+            label="记住密码"
+          />
+          <el-link type="primary" @click="$router.push('/reset-pwd')"
+            >忘记密码</el-link
+          >
         </div>
+        <el-button
+          class="login-btn"
+          type="primary"
+          size="large"
+          @click="onLogin"
+          >登录</el-button
+        >
+        <p class="login-text">
+          没有账号？<el-link type="primary" @click="$router.push('/register')"
+            >立即注册</el-link
+          >
+        </p>
+      </el-form>
     </div>
+  </div>
 </template>
 
 <script setup>
-import { ref, reactive,inject } from 'vue';
-import { useRouter } from 'vue-router';
-import { ElMessage } from 'element-plus';
-import {loginService} from "@/api/user";
-import {GetUserInfoService} from "@/api/user";
-import { usePermissStore } from '@/store/permiss';
-
+import { ref, reactive, inject } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { loginService } from "@/api/user";
+import { GetUserInfoService } from "@/api/user";
+import { usePermissStore } from "@/store/permiss";
 
 // 从本地存储获取登录参数
-const lgStr = localStorage.getItem('login-param');
+const lgStr = localStorage.getItem("login-param");
 const defParam = lgStr ? JSON.parse(lgStr) : null;
 const globalData = inject("globalData");
 const permiss = usePermissStore();
@@ -62,26 +75,26 @@ const checked = ref(lgStr ? true : false);
 const router = useRouter();
 // 登录表单数据
 const param = reactive({
-    username: defParam ? defParam.username : '',
-    password: defParam ? defParam.password : ''
+  username: defParam ? defParam.username : "",
+  password: defParam ? defParam.password : "",
 });
 
 // 表单验证规则
 const rules = {
-    username: [
-        {
-            required: true,
-            message: '请输入用户名',
-            trigger: 'blur'
-        }
-    ],
-    password: [
-        {
-            required: true,
-            message: '请输入密码',
-            trigger: 'blur'
-        }
-    ]
+  username: [
+    {
+      required: true,
+      message: "请输入用户名",
+      trigger: "blur",
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: "请输入密码",
+      trigger: "blur",
+    },
+  ],
 };
 // 表单引用
 const login = ref(null);
@@ -96,16 +109,16 @@ var loginData = ref({
 
 //登录接口调用
 const onLogin = async () => {
-    console.log("params:",param)
+  console.log("params:", param);
 
-loginData.value.username = param.username;
-loginData.value.password = param.password;
+  loginData.value.username = param.username;
+  loginData.value.password = param.password;
   let result = await loginService(loginData);
   console.log("login result:", result);
   if (result.code !== 0) {
     //alert(result.message);
     ElMessage.error("登录失败！用户名或密码错误");
-    return
+    return;
   }
   globalData.token = result.data;
   localStorage.setItem("token", result.data.token);
@@ -115,22 +128,16 @@ loginData.value.password = param.password;
   localStorage.setItem("end_time", now.setDate(now.getHours() + 12)); //过期时间
   await getMyUserInfo(result.data.id);
   //token.value= result.data;
-    ElMessage.success('登录成功');
-    localStorage.setItem('ms_username', result.data.username);
-    const keys = permiss.defaultList[result.data.username == 'admin' ? 'admin' : 'user'];
-    permiss.handleSet(keys);
-    localStorage.setItem('ms_keys', JSON.stringify(keys));
-  router.push("/");
-};
 
+};
 
 const getMyUserInfo = async (id) => {
   let result = {};
   try {
-    let tokenData ={
+    let tokenData = {
       token: localStorage.getItem("token"),
       id: id,
-    }
+    };
     result = await GetUserInfoService(tokenData);
     if (result.code === 0) {
       //console.log("token data:",this.tokenData)
@@ -139,6 +146,14 @@ const getMyUserInfo = async (id) => {
       localStorage.setItem("cid_func", result.data.CIDFunc);
       localStorage.setItem("role", result.data.Role);
 
+      ElMessage.success("登录成功");
+        localStorage.setItem("ms_username", result.data.Name);
+        const keys =
+            permiss.defaultList[result.data.Role == "admin" ? "admin" : "user"];
+        permiss.handleSet(keys);
+        localStorage.setItem("ms_keys", JSON.stringify(keys));
+        router.push("/");
+
       //alert("video_func:" + localStorage.getItem("video_func")+"    type:" +typeof(localStorage.getItem("video_func")));
     }
   } catch (e) {
@@ -147,72 +162,71 @@ const getMyUserInfo = async (id) => {
 };
 
 // 获取标签存储并清空标签
-
 </script>
 
 <style scoped>
 .login-bg {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background: url(../../assets/img/login-bg3.jpg) center/cover no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: url(../../assets/img/login-bg3.jpg) center/cover no-repeat;
 }
 
 .login-header {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 40px;
 }
 
 .logo {
-    width: 35px;
+  width: 35px;
 }
 
 .login-title {
-    font-size: 22px;
-    color: #333;
-    font-weight: bold;
+  font-size: 22px;
+  color: #333;
+  font-weight: bold;
 }
 
 .login-container {
-    width: 450px;
-    border-radius: 5px;
-    background: #fff;
-    padding: 40px 50px 50px;
-    box-sizing: border-box;
+  width: 450px;
+  border-radius: 5px;
+  background: #fff;
+  padding: 40px 50px 50px;
+  box-sizing: border-box;
 }
 
 .pwd-tips {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 14px;
-    margin: -10px 0 10px;
-    color: #787878;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  margin: -10px 0 10px;
+  color: #787878;
 }
 
 .pwd-checkbox {
-    height: auto;
+  height: auto;
 }
 
 .login-btn {
-    display: block;
-    width: 100%;
+  display: block;
+  width: 100%;
 }
 
 .login-tips {
-    font-size: 12px;
-    color: #999;
+  font-size: 12px;
+  color: #999;
 }
 
 .login-text {
-    display: flex;
-    align-items: center;
-    margin-top: 20px;
-    font-size: 14px;
-    color: #787878;
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  font-size: 14px;
+  color: #787878;
 }
 </style>
diff --git a/src/views/pages/register.vue b/src/views/pages/register.vue
index adabb7f..8f7869f 100644
--- a/src/views/pages/register.vue
+++ b/src/views/pages/register.vue
@@ -105,6 +105,14 @@ const getMyUserInfo = async (id) => {
       localStorage.setItem("cid_func", result.data.CIDFunc);
       localStorage.setItem("role", result.data.Role);
 
+      ElMessage.success("注册成功");
+        localStorage.setItem("ms_username", result.data.Name);
+        const keys =
+            permiss.defaultList[result.data.Role == "admin" ? "admin" : "user"];
+        permiss.handleSet(keys);
+        localStorage.setItem("ms_keys", JSON.stringify(keys));
+        router.push("/");
+
       //alert("video_func:" + localStorage.getItem("video_func")+"    type:" +typeof(localStorage.getItem("video_func")));
     }
   } catch (e) {
diff --git a/src/views/pages/ucenter.vue b/src/views/pages/ucenter.vue
index c5457ef..8a8464d 100644
--- a/src/views/pages/ucenter.vue
+++ b/src/views/pages/ucenter.vue
@@ -8,28 +8,16 @@
                 </div>
                 <div class="user-info">
                     <div class="info-name">{{ name }}</div>
-                    <div class="info-desc">
-                        <span>@lin-xin</span>
-                        <el-divider direction="vertical" />
-                        <el-link href="https://lin-xin.gitee.io" target="_blank">lin-xin.gitee.io</el-link>
-                    </div>
-                    <div class="info-desc">FE Developer</div>
-                    <div class="info-icon">
-                        <a href="https://github.com/lin-xin" target="_blank"> <i class="el-icon-lx-github-fill"></i></a>
-                        <i class="el-icon-lx-qq-fill"></i>
-                        <i class="el-icon-lx-facebook-fill"></i>
-                        <i class="el-icon-lx-twitter-fill"></i>
-                    </div>
                 </div>
                 <div class="user-footer">
                     <div class="user-footer-item">
-                        <el-statistic title="Follower" :value="1800" />
+                        <el-statistic title="提问数" :value="1800" />
                     </div>
                     <div class="user-footer-item">
-                        <el-statistic title="Following" :value="666" />
+                        <el-statistic title="会话数" :value="666" />
                     </div>
                     <div class="user-footer-item">
-                        <el-statistic title="Total Post" :value="888" />
+                        <el-statistic title="总计" :value="888" />
                     </div>
                 </div>
             </el-card>
@@ -39,9 +27,9 @@
                 :body-style="{ padding: '20px 50px', height: '100%', boxSizing: 'border-box' }"
             >
                 <el-tabs tab-position="left" v-model="activeName">
-                    <el-tab-pane name="label1" label="消息通知" class="user-tabpane">
+                    <!-- <el-tab-pane name="label1" label="消息通知" class="user-tabpane">
                         <TabsComp />
-                    </el-tab-pane>
+                    </el-tab-pane> -->
                     <el-tab-pane name="label2" label="我的头像" class="user-tabpane">
                         <div class="crop-wrap" v-if="activeName === 'label2'">
                             <vueCropper
@@ -72,24 +60,13 @@
                                 <el-input type="password" v-model="form.new1"></el-input>
                             </el-form-item>
                             <el-form-item>
-                                <el-button type="primary" @click="onSubmit">保存</el-button>
+                                <el-button type="primary" @click="resetPassword ">保存</el-button>
                             </el-form-item>
+                            <el-link type="primary" @click="reset_password()">忘记密码？使用验证码重置</el-link>
                         </el-form>
                     </el-tab-pane>
-                    <el-tab-pane name="label4" label="赞赏作者" class="user-tabpane">
-                        <div class="plugins-tips">
-                            如果该框架
-                            <el-link href="https://github.com/lin-xin/vue-manage-system" target="_blank"
-                                >vue-manage-system</el-link
-                            >
-                            对你有帮助，那就请作者喝杯饮料吧！<el-icon>
-                                <ColdDrink />
-                            </el-icon>
-                            加微信号 linxin_20 探讨问题。
-                        </div>
-                        <div>
-                            <img src="https://lin-xin.gitee.io/images/weixin.jpg" />
-                        </div>
+                    <el-tab-pane name="label4"  v-if="isUserInfoLoaded" label="详细信息" class="user-tabpane">
+                        <TableEdit :form-data="userInfo" :options="options_edit" :edit="true" :update="updateUserInfo" />
                     </el-tab-pane>
                 </el-tabs>
             </el-card>
@@ -103,6 +80,15 @@ import { VueCropper } from 'vue-cropper';
 import 'vue-cropper/dist/index.css';
 import avatar from '@/assets/img/img.jpg';
 import TabsComp from '../element/tabs.vue';
+import {GetUserInfoService} from "@/api/user";
+import { UploadFileService } from "@/api/tool";
+import { UserInfo } from '@/types/user';
+import { FormOption, FormOptionList } from '@/types/form-option';
+import { avatarEmits, ElMessage } from 'element-plus';
+import TableEdit from '@/components/table-edit.vue';
+import {genResetPassword} from "@/api/user";
+import {updateUserInfoService} from "@/api/user";
+import { useRouter } from "vue-router";
 
 const name = localStorage.getItem('ms_username');
 const form = reactive({
@@ -111,17 +97,31 @@ const form = reactive({
     old: '',
 });
 const onSubmit = () => {};
+const userInfo = ref<UserInfo>({});
+const isUserInfoLoaded = ref(false);
 
-const activeName = ref('label1');
-
-const avatarImg = ref(avatar);
-const imgSrc = ref(avatar);
+const activeName = ref('label2');
+const router = useRouter();
+const avatarImg = ref('');
+const imgSrc = ref('');
 const cropImg = ref('');
 const cropper: any = ref();
 
+const reset_password = () => {
+    localStorage.removeItem("ms_username");
+    router.push('/reset-pwd');
+};
+
 const setImage = (e: any) => {
     const file = e.target.files[0];
     if (!file.type.includes('image/')) {
+        ElMessage.error('请选择图片文件');
+        return;
+    }
+        // 可选：检查文件大小
+    const maxSize = 5 * 1024 * 1024; // 5MB
+    if (file.size > maxSize) {
+        console.error('文件大小超过限制');
         return;
     }
     const reader = new FileReader();
@@ -132,12 +132,147 @@ const setImage = (e: any) => {
     reader.readAsDataURL(file);
 };
 
+const updateUserInfo = async (data: any) => {
+    let result ={}
+      try{
+        let req={};
+        req.token=localStorage.getItem("token");
+        //修改后的数据
+        req.id = data.ID;
+        req.name = data.Name;
+        req.age = data.Age;
+        req.gender = data.Gender;
+        req.password = data.Password;
+        req.email = data.Email;
+        req.avatar = data.Avatar;
+        req.Role = data.Role;
+        result = await updateUserInfoService(req)
+        if (result.code === 0) {
+          ElMessage.success("更新成功");
+          this.updateDialogVisible = false;
+        } else {
+          ElMessage.error("更新失败");
+        }
+
+      }catch(e){
+        console.log(e);
+      }
+};
+
+const resetPassword = async () =>{
+    let req={
+        old_password: form.old,
+        new_password: form.new1,
+        email: userInfo.value.Email,
+        type:1
+    }
+    try{
+        let result = await genResetPassword(req);
+        if (result.code === 0) {
+            //重置成功，返回新token
+            if (result.data.token) {
+                localStorage.setItem('token', result.data.token);
+                globalData.token = result.data.token;
+                ElMessage.success('重置密码成功');
+            }
+        } else {
+            ElMessage.error(result.msg);
+        }
+    }catch(e){
+        console.log(e)
+    }
+
+};
+
+//编辑弹窗
+let options_edit = ref<FormOption>({
+    labelWidth: '100px',
+    span: 12,
+    list: [
+        // {prop: 'Avatar',label: '头像', type: 'input', required: false},
+        { type: 'input', label: '用户ID', prop: 'ID', required: true,disabled:true },
+        { type: 'input', label: '用户名', prop: 'Name', required: true },
+        { type: 'input', label: '年龄', prop: 'Age', required: false },
+        { type: 'input', label: '密码', prop: 'Password', required: false,disabled:true  },
+        { type: 'input', label: '邮箱', prop: 'Email', required: true,disabled:true },
+        { type: 'input', label: '性别', prop: 'Gender', required: false },
+        //select 选择框,可选择admin与user两种角色
+        { type: 'select', label: '角色', prop: 'Role', opts: [{label:"管理员",value:"admin"},{label:"普通用户",value:"user"}], required: false,disabled:true },
+
+        { type: 'input', label: '注册时间', prop: 'CreatedAt', required: false,disabled:true  },
+        { type: 'input', label: '上次修改时间', prop: 'UpdatedAt', required: false,disabled:true },
+    ]
+})
+
+const GetMyUserInfo = async () => {
+    let req = {
+        token: localStorage.getItem('token'),
+        id: localStorage.getItem('userId')
+    };
+    try{
+        let result = await GetUserInfoService(req);
+        if (result.code == 0) {
+            avatarImg.value = result.data.Avatar == '' ? avatar : result.data.Avatar;
+            imgSrc.value = avatarImg.value;
+            userInfo.value = result.data;
+            userInfo.value.Password = '**********';
+        }else{
+            ElMessage.error(result.msg);
+        }
+        isUserInfoLoaded.value = true;
+    }catch(e){
+        console.log(e);
+    }
+};
+GetMyUserInfo();
+
 const cropImage = () => {
     cropImg.value = cropper.value?.getCroppedCanvas().toDataURL();
 };
 
-const saveAvatar = () => {
-    avatarImg.value = cropImg.value;
+// Data URL 转 File 对象的函数
+const dataURLtoFile = (dataurl, filename) => {
+    const arr = dataurl.split(',');
+    const mime = arr[0].match(/:(.*?);/)?.[1];
+    const bstr = atob(arr[1]);
+    let n = bstr.length;
+    const u8arr = new Uint8Array(n);
+    while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new File([u8arr], filename, { type: mime });
+};
+
+
+const saveAvatar =async () => {
+    let token = localStorage.getItem('token');
+        avatarImg.value = cropImg.value;
+        let formData = new FormData();
+        //文件
+        let file= dataURLtoFile(imgSrc.value, 'avatar.jpg');
+
+        formData.append('file', file);
+        //console.log("add file: " + this.file);
+        formData.append('upload_type', "1");
+        formData.append('md5',  "");
+        formData.append('auth_type', "public");
+        //console.log("formData:",formData);
+
+        
+        let result = await UploadFileService(formData, token);
+        if (result.code !== 0) {
+            ElMessage.error('上传文件失败，请稍后再试');
+            return;
+        }
+        let resp_data = result.data;
+
+        //console.log("resp:",resp_data);
+        let url = "https://tx.ljsea.top/tool/file/"+resp_data.FileStoreName;
+
+        userInfo.value.Avatar = url;
+        avatarImg.value = url;
+        //更新用户信息
+        await updateUserInfo(userInfo.value);
 };
 </script>
 
diff --git a/src/views/pages/ucenter2.vue b/src/views/pages/ucenter2.vue
deleted file mode 100644
index 4a30060..0000000
--- a/src/views/pages/ucenter2.vue
+++ /dev/null
@@ -1,253 +0,0 @@
-<template>
-	<div class="user-container">
-		<el-card class="user-profile mgb20" shadow="hover" :body-style="{ padding: '0px' }">
-			<div class="user-profile-bg"></div>
-			<div class="user-avatar-wrap">
-				<el-avatar class="user-avatar" :size="120" :src="avatarImg" />
-			</div>
-			<div class="user-info">
-				<div class="info-name">{{ name }}</div>
-				<div class="info-desc">
-					<!-- <span>{{ name }}</span>
-					<el-divider direction="vertical" /> -->
-					<span>FE Developer</span>
-					<el-divider direction="vertical" />
-					<el-link href="https://lin-xin.gitee.io" target="_blank">lin-xin.gitee.io</el-link>
-				</div>
-				<!-- <div class="info-icon">
-					<a href="https://github.com/lin-xin" target="_blank"> <i class="el-icon-lx-github-fill"></i></a>
-					<i class="el-icon-lx-qq-fill"></i>
-					<i class="el-icon-lx-facebook-fill"></i>
-					<i class="el-icon-lx-twitter-fill"></i>
-				</div> -->
-			</div>
-			<!-- <div class="user-footer">
-				<div class="user-footer-item">
-					<el-statistic title="Follower" value="18K" />
-				</div>
-				<div class="user-footer-item">
-					<el-statistic title="Following" :value="666" />
-				</div>
-				<div class="user-footer-item">
-					<el-statistic title="Total Post" :value="888" />
-				</div>
-			</div> -->
-		</el-card>
-		<el-card class="user-content" shadow="hover"
-			:body-style="{ padding: '20px 50px', height: '100%', boxSizing: 'border-box' }">
-			<el-tabs v-model="activeName">
-
-				<el-tab-pane name="label1" label="消息通知" class="user-tabpane">
-					<TabsComp />
-				</el-tab-pane>
-				<el-tab-pane name="label2" label="我的头像" class="user-tabpane">
-					<div class="crop-wrap" v-if="activeName === 'label2'">
-						<vueCropper ref="cropper" :img="imgSrc" :autoCrop="true" :centerBox="true" :full="true"
-							mode="contain">
-						</vueCropper>
-					</div>
-					<el-button class="crop-demo-btn" type="primary">选择图片
-						<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
-					</el-button>
-					<el-button type="success" @click="saveAvatar">上传并保存</el-button>
-				</el-tab-pane>
-				<el-tab-pane name="label3" label="修改密码" class="user-tabpane">
-					<el-form class="w500" label-position="top">
-						<el-form-item label="旧密码：">
-							<el-input type="password" v-model="form.old"></el-input>
-						</el-form-item>
-						<el-form-item label="新密码：">
-							<el-input type="password" v-model="form.new"></el-input>
-						</el-form-item>
-						<el-form-item label="确认新密码：">
-							<el-input type="password" v-model="form.new1"></el-input>
-						</el-form-item>
-						<el-form-item>
-							<el-button type="primary" @click="onSubmit">保存</el-button>
-						</el-form-item>
-					</el-form>
-				</el-tab-pane>
-				<el-tab-pane name="label4" label="赞赏作者" class="user-tabpane">
-					<div class="plugins-tips">
-						如果该框架 <el-link href="https://github.com/lin-xin/vue-manage-system"
-							target="_blank">vue-manage-system</el-link> 对你有帮助，那就请作者喝杯饮料吧！<el-icon>
-							<ColdDrink />
-						</el-icon> 加微信号 linxin_20 探讨问题。
-					</div>
-					<div>
-						<img src="https://lin-xin.gitee.io/images/weixin.jpg" />
-					</div>
-				</el-tab-pane>
-			</el-tabs>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="ucenter">
-import { reactive, ref } from 'vue';
-import { VueCropper } from "vue-cropper"
-import 'vue-cropper/dist/index.css'
-import avatar from '@/assets/img/img.jpg';
-import TabsComp from '../element/tabs.vue';
-
-const name = localStorage.getItem('ms_username');
-const form = reactive({
-	new1: '',
-	new: '',
-	old: ''
-});
-const onSubmit = () => { };
-
-const activeName = ref('label1');
-
-const avatarImg = ref(avatar);
-const imgSrc = ref(avatar);
-const cropImg = ref('');
-const cropper: any = ref();
-
-const setImage = (e: any) => {
-	const file = e.target.files[0];
-	if (!file.type.includes('image/')) {
-		return;
-	}
-	const reader = new FileReader();
-	reader.onload = (event: any) => {
-		imgSrc.value = event.target.result;
-		cropper.value && cropper.value.replace(event.target.result);
-	};
-	reader.readAsDataURL(file);
-};
-
-const cropImage = () => {
-	cropImg.value = cropper.value?.getCroppedCanvas().toDataURL();
-};
-
-const saveAvatar = () => {
-	avatarImg.value = cropImg.value;
-};
-</script>
-
-<style scoped>
-/* .user-container {
-	display: flex;
-} */
-
-.user-profile-bg {
-	width: 100%;
-	height: 150px;
-	background-image: url('../../assets/img/bahnhofsidylle.jpg');
-	background-size: cover;
-	background-position: center;
-	background-repeat: no-repeat;
-}
-
-.user-profile {
-	position: relative;
-	/* width: 500px; */
-	/* margin-right: 20px; */
-	/* flex: 0 0 auto;
-	align-self: flex-start;
-} */
-}
-
-.user-avatar-wrap {
-	position: absolute;
-	top: 90px;
-	width: 100%;
-	text-align: center;
-}
-
-.user-avatar {
-	border: 5px solid #fff;
-	border-radius: 50%;
-	overflow: hidden;
-	box-shadow: 0 7px 12px 0 rgba(62, 57, 107, .16)
-}
-
-.user-info {
-	text-align: center;
-	padding: 70px 0 20px;
-}
-
-.info-name {
-	margin: 0 0 10px;
-	font-size: 22px;
-	font-weight: 500;
-	color: #373a3c;
-}
-
-.info-desc {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.info-desc,
-.info-desc a {
-	font-size: 18px;
-	color: #55595c;
-}
-
-.info-icon {
-	margin-top: 10px;
-}
-
-.info-icon i {
-	font-size: 30px;
-	margin: 0 10px;
-	color: #343434;
-}
-
-.user-content {
-	flex: 1
-}
-
-.user-tabpane {
-	padding: 10px 20px;
-}
-
-.crop-wrap {
-	width: 600px;
-	height: 350px;
-	margin-bottom: 20px;
-}
-
-.crop-demo-btn {
-	position: relative;
-}
-
-.crop-input {
-	position: absolute;
-	width: 100px;
-	height: 40px;
-	left: 0;
-	top: 0;
-	opacity: 0;
-	cursor: pointer;
-}
-
-.w500 {
-	width: 500px;
-}
-
-.user-footer {
-	display: flex;
-	border-top: 1px solid rgba(83, 70, 134, 0.1);
-}
-
-.user-footer-item {
-	padding: 20px 0;
-	width: 33.3333333333%;
-	text-align: center;
-}
-
-.user-footer>div+div {
-	border-left: 1px solid rgba(83, 70, 134, 0.1);
-}
-</style>
-
-<style>
-.el-tabs.el-tabs--left {
-	height: 100%;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/system/user.vue b/src/views/system/user.vue
index 57d4d36..91286a5 100644
--- a/src/views/system/user.vue
+++ b/src/views/system/user.vue
@@ -5,14 +5,18 @@
             <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
                 :delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
                 <template #toolbarBtn>
-                    <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
+                    <el-button type="warning" :icon="CirclePlusFilled" @click="visible_add = true">新增</el-button>
                 </template>
             </TableCustom>
 
         </div>
-        <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
+        <el-dialog :title="isEdit ? '编辑': '编辑'" v-model="visible" width="700px" destroy-on-close
             :close-on-click-modal="false" @close="closeDialog">
-            <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" />
+            <TableEdit :form-data="rowData" :options="options_edit" :edit="isEdit" :update="updateData" />
+        </el-dialog>
+        <el-dialog :title="isAdd ? '新增' : '新增'" v-model="visible_add" width="700px" destroy-on-close
+            :close-on-click-modal="false" @close="closeDialog">
+            <TableEdit :form-data="rowData" :options="options" :edit="isAdd" :update="addData" />
         </el-dialog>
         <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
             <TableDetail :data="viewData"></TableDetail>
@@ -24,8 +28,11 @@
 import { ref, reactive } from 'vue';
 import { ElMessage } from 'element-plus';
 import { CirclePlusFilled } from '@element-plus/icons-vue';
-import { User } from '@/types/user';
+import { UserInfo } from '@/types/user';
 import { fetchUserData } from '@/api';
+import { SearchUserService } from "@/api/user";
+import {GetUserInfoService} from "@/api/user";
+import {updateUserInfoService} from "@/api/user";
 import TableCustom from '@/components/table-custom.vue';
 import TableDetail from '@/components/table-detail.vue';
 import TableSearch from '@/components/table-search.vue';
@@ -36,30 +43,59 @@ const query = reactive({
     name: '',
 });
 const searchOpt = ref<FormOptionList[]>([
-    { type: 'input', label: '用户名：', prop: 'name' }
+    { type: 'input', label: '用户名或ID：', prop: 'name' }
 ])
-const handleSearch = () => {
-    changePage(1);
+const handleSearch = async () => {
+    let search_id= -1;
+    let keyword_ = "";
+     //判断search_id是字符串还是数字
+     if(isNaN(query.name)){
+          //是字符串，说明是关键字
+            keyword_ = query.name;
+        }else if(isFinite(query.name)){
+          //是数字，说明是ID
+            search_id = parseInt(query.name);
+        }else{
+          //不是数字也不是字符串
+          ElMessage.error("输入错误，请输入数字或者关键字");
+          return;
+        }
+    let req={
+        token: localStorage.getItem('token'),
+        id: search_id,
+        keyword: keyword_,
+    }
+    let result = await SearchUserService(req);
+    tableData.value = result.data;
+    page.total = result.data.length;
 };
 
 // 表格相关
 let columns = ref([
     { type: 'index', label: '序号', width: 55, align: 'center' },
-    { prop: 'name', label: '用户名' },
-    { prop: 'phone', label: '手机号' },
-    { prop: 'role', label: '角色' },
+    { prop: 'ID', label: '用户ID' },
+    { prop: 'Name', label: '用户名' },
+    { prop: 'Age', label: '年龄'},
+    { prop: 'Role', label: '角色' },
+    { prop: 'CreatedAt', label: '创建时间',type: 'date' },
+    { prop: 'Email', label: '邮箱' },
     { prop: 'operator', label: '操作', width: 250 },
 ])
 const page = reactive({
     index: 1,
     size: 10,
-    total: 0,
+    total: 122,
 })
-const tableData = ref<User[]>([]);
+const tableData = ref<UserInfo[]>([]);
 const getData = async () => {
-    const res = await fetchUserData()
-    tableData.value = res.data.list;
-    page.total = res.data.pageTotal;
+    let req={
+        token: localStorage.getItem('token'),
+        id: -1,
+        keyword: "_121",
+    }
+    let result = await SearchUserService(req);
+    tableData.value = result.data;
+    page.total = result.data.length;
 };
 getData();
 
@@ -68,33 +104,100 @@ const changePage = (val: number) => {
     getData();
 };
 
-// 新增/编辑弹窗相关
+// 新增弹窗
 let options = ref<FormOption>({
     labelWidth: '100px',
     span: 12,
     list: [
-        { type: 'input', label: '用户名', prop: 'name', required: true },
-        { type: 'input', label: '手机号', prop: 'phone', required: true },
-        { type: 'input', label: '密码', prop: 'password', required: true },
-        { type: 'input', label: '邮箱', prop: 'email', required: true },
-        { type: 'input', label: '角色', prop: 'role', required: true },
+        { type: 'input', label: '用户名', prop: 'Name', required: true },
+        { type: 'input', label: '密码', prop: 'Password', required: true },
+        { type: 'input', label: '邮箱', prop: 'Email', required: true },
+        { type: 'input', label: '角色', prop: 'Role', required: true },
     ]
 })
+
+//编辑弹窗
+let options_edit = ref<FormOption>({
+    labelWidth: '100px',
+    span: 12,
+    list: [
+        {prop: 'Avatar',label: '头像', type: 'input', required: false},
+        { type: 'input', label: '用户名', prop: 'Name', required: true },
+        { type: 'input', label: '年龄', prop: 'Age', required: false },
+        { type: 'input', label: '密码', prop: 'Password', required: false },
+        { type: 'input', label: '邮箱', prop: 'Email', required: true },
+        { type: 'input', label: '性别', prop: 'Gender', required: false },
+        //select 选择框,可选择admin与user两种角色
+        { type: 'select', label: '角色', prop: 'Role', opts: [{label:"管理员",value:"admin"},{label:"普通用户",value:"user"}],required: false },
+
+    ]
+})
+
 const visible = ref(false);
+const visible_add = ref(false);
 const isEdit = ref(false);
+const isAdd = ref(false);
 const rowData = ref({});
-const handleEdit = (row: User) => {
-    rowData.value = { ...row };
+const handleEdit = async (row: UserInfo) => {
+    let data = await getUserInfo(row.ID);
+
+    rowData.value = data;
     isEdit.value = true;
     visible.value = true;
 };
-const updateData = () => {
-    closeDialog();
-    getData();
+const updateData = async (data) => {
+    let result ={}
+      try{
+        let req={};
+        req.token=localStorage.getItem("token");
+        //console.log(rowData.value);
+
+        //修改后的数据
+        req.id = data.ID;
+        req.name = data.Name;
+        req.age = data.Age;
+        req.gender = data.Gender;
+        req.password = data.Password;
+        req.email = data.Email;
+        req.avatar = data.Avatar;
+        req.Role = data.Role;
+
+        result = await updateUserInfoService(req)
+        if (result.code === 0) {
+          ElMessage.success("更新成功");
+          this.updateDialogVisible = false;
+        } else {
+          ElMessage.error("更新失败");
+        }
+
+      }catch(e){
+        console.log(e);
+      }
+      closeDialog();
+    handleSearch();
 };
 
+const getUserInfo = async (id) => {
+      let result = {};
+      try{
+        //获取用户信息
+        let req={
+            token: localStorage.getItem('token'),
+            id: id,
+        };
+        result = await GetUserInfoService(req)
+        if(result.code===0){
+          return result.data;
+        }
+      }catch(e){
+        console.log(e);
+      }
+      return {};
+    }
+
 const closeDialog = () => {
     visible.value = false;
+    visible_add.value = false;
     isEdit.value = false;
 };
 
@@ -104,43 +207,47 @@ const viewData = ref({
     row: {},
     list: []
 });
-const handleView = (row: User) => {
-    viewData.value.row = { ...row }
+const handleView =async (row: UserInfo) => {
+    let data = await getUserInfo(row.ID);
+    viewData.value.row = data;
     viewData.value.list = [
         {
-            prop: 'id',
+            prop: 'Avatar',
+            label: '头像', //显示头像
+            type: 'image',
+            width: 100,
+        },
+        {
+            prop: 'ID',
             label: '用户ID',
         },
         {
-            prop: 'name',
+            prop: 'Name',
             label: '用户名',
         },
         {
-            prop: 'password',
-            label: '密码',
-        },
-        {
-            prop: 'email',
+            prop: 'Email',
             label: '邮箱',
         },
         {
-            prop: 'phone',
-            label: '电话',
+            prop: 'Gender',
+            label: '性别',
         },
         {
-            prop: 'role',
+            prop: 'Role',
             label: '角色',
         },
         {
-            prop: 'date',
+            prop: 'CreatedAt',
             label: '注册日期',
+            type: 'date',
         },
     ]
     visible1.value = true;
 };
 
 // 删除相关
-const handleDelete = (row: User) => {
+const handleDelete = (row: UserInfo) => {
     ElMessage.success('删除成功');
 }
 </script>
diff --git a/yarn.lock b/yarn.lock
index 2c6108e..fe58214 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19,6 +19,105 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@cropper/element-canvas@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@cropper/element-canvas/-/element-canvas-2.0.0.tgz"
+  integrity sha512-GPtGJgSm92crJhhhwUsaMw3rz2KfJWWSz7kRAlufFEV/EHTP5+6r6/Z1BCGRna830i+Avqbm435XLOtA7PVJwA==
+  dependencies:
+    "@cropper/element" "^2.0.0"
+    "@cropper/utils" "^2.0.0"
+
+"@cropper/element-crosshair@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@cropper/element-crosshair/-/element-crosshair-2.0.0.tgz"
+  integrity sha512-KfPfyrdeFvUC31Ws7ATtcalWWSaMtrC6bMoCipZhqbUOE7wZoL4ecDSL6BUOZxPa74awZUqfzirCDjHvheBfyw==
+  dependencies:
+    "@cropper/element" "^2.0.0"
+    "@cropper/utils" "^2.0.0"
+
+"@cropper/element-grid@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@cropper/element-grid/-/element-grid-2.0.0.tgz"
+  integrity sha512-i78SQ0IJTLFveKX6P7svkfMYVdgHrQ8ZmmEw8keFy9n1ZVbK+SK0UHK5FNMRNI/gtVhKJOGEnK/zeyjUdj4Iyw==
+  dependencies:
+    "@cropper/element" "^2.0.0"
+    "@cropper/utils" "^2.0.0"
+
+"@cropper/element-handle@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@cropper/element-handle/-/element-handle-2.0.0.tgz"
+  integrity sha512-ZJvW+0MkK9E8xYymGdoruaQn2kwjSHFpNSWinjyq6csuVQiCPxlX5ovAEDldmZ9MWePPtWEi3vLKQOo2Yb0T8g==
+  dependencies:
+    "@cropper/element" "^2.0.0"
+    "@cropper/utils" "^2.0.0"
+
+"@cropper/element-image@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@cropper/element-image/-/element-image-2.0.0.tgz"
+  integrity sha512-9BxiTS/aHRmrjopaFQb9mQQXmx4ruhYHGkDZMVz24AXpMFjUY6OpqrWse/WjzD9tfhMFvEdu17b3VAekcAgpeg==
+  dependencies:
+    "@cropper/element" "^2.0.0"
+    "@cropper/element-canvas" "^2.0.0"
+    "@cropper/utils" "^2.0.0"
+
+"@cropper/element-selection@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@cropper/element-selection/-/element-selection-2.0.0.tgz"
+  integrity sha512-ensNnbIfJsJ8bhbJTH/RXtk2URFvTOO4TvfRk461n2FPEC588D7rwBmUJxQg74IiTi4y1JbCI+6j+4LyzYBLCQ==
+  dependencies:
+    "@cropper/element" "^2.0.0"
+    "@cropper/element-canvas" "^2.0.0"
+    "@cropper/element-image" "^2.0.0"
+    "@cropper/utils" "^2.0.0"
+
+"@cropper/element-shade@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@cropper/element-shade/-/element-shade-2.0.0.tgz"
+  integrity sha512-jv/2bbNZnhU4W+T4G0c8ADocLIZvQFTXgCf2RFDNhI5UVxurzWBnDdb8Mx8LnVplnkTqO+xUmHZYve0CwgWo+Q==
+  dependencies:
+    "@cropper/element" "^2.0.0"
+    "@cropper/element-canvas" "^2.0.0"
+    "@cropper/element-selection" "^2.0.0"
+    "@cropper/utils" "^2.0.0"
+
+"@cropper/element-viewer@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@cropper/element-viewer/-/element-viewer-2.0.0.tgz"
+  integrity sha512-zY+3VRN5TvpM8twlphYtXw0tzJL2VgzeK7ufhL1BixVqOdRxwP13TprYIhqwGt9EW/SyJZUiaIu396T89kRX8A==
+  dependencies:
+    "@cropper/element" "^2.0.0"
+    "@cropper/element-canvas" "^2.0.0"
+    "@cropper/element-image" "^2.0.0"
+    "@cropper/element-selection" "^2.0.0"
+    "@cropper/utils" "^2.0.0"
+
+"@cropper/element@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@cropper/element/-/element-2.0.0.tgz"
+  integrity sha512-lsthn0nQq73GExUE7Mg/ss6Q3RXADGDv055hxoLFwvl/wGHgy6ZkYlfLZ/VmgBHC6jDK5IgPBFnqrPqlXWSGBA==
+  dependencies:
+    "@cropper/utils" "^2.0.0"
+
+"@cropper/elements@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@cropper/elements/-/elements-2.0.0.tgz"
+  integrity sha512-PQkPo1nUjxLFUQuHYu+6atfHxpX9B41Xribao6wpvmvmNIFML6LQdNqqWYb6LyM7ujsu71CZdBiMT5oetjJVoQ==
+  dependencies:
+    "@cropper/element" "^2.0.0"
+    "@cropper/element-canvas" "^2.0.0"
+    "@cropper/element-crosshair" "^2.0.0"
+    "@cropper/element-grid" "^2.0.0"
+    "@cropper/element-handle" "^2.0.0"
+    "@cropper/element-image" "^2.0.0"
+    "@cropper/element-selection" "^2.0.0"
+    "@cropper/element-shade" "^2.0.0"
+    "@cropper/element-viewer" "^2.0.0"
+
+"@cropper/utils@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@cropper/utils/-/utils-2.0.0.tgz"
+  integrity sha512-cprLYr+7kK3faGgoOsTW9gIn5sefDr2KwOmgyjzIXk+8PLpW8FgFKEg5FoWfRD5zMAmkCBuX6rGKDK3VdUEGrg==
+
 "@ctrl/tinycolor@^3.4.1":
   version "3.6.1"
   resolved "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz"
@@ -498,6 +597,19 @@ crc-32@~1.2.0, crc-32@~1.2.1:
   resolved "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz"
   integrity sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==
 
+cropperjs@^1.5.6:
+  version "1.6.2"
+  resolved "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz"
+  integrity sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA==
+
+cropperjs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/cropperjs/-/cropperjs-2.0.0.tgz"
+  integrity sha512-TO2j0Qre01kPHbow4FuTrbdEB4jTmGRySxW49jyEIqlJZuEBfrvCTT0vC3eRB2WBXudDfKi1Onako6DKWKxeAQ==
+  dependencies:
+    "@cropper/elements" "^2.0.0"
+    "@cropper/utils" "^2.0.0"
+
 csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
@@ -1282,6 +1394,13 @@ vue-cropper@1.1.1:
   resolved "https://registry.npmjs.org/vue-cropper/-/vue-cropper-1.1.1.tgz"
   integrity sha512-WsqKMpaBf9Osi1LQlE/5AKdD0nHWOy1asLXocaG8NomOWO07jiZi968+/PbMmnD0QbPJOumDQaGuGa13qys85A==
 
+vue-cropperjs@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/vue-cropperjs/-/vue-cropperjs-5.0.0.tgz"
+  integrity sha512-RhnC8O33uRZNkn74aiHZwNHnBJOXWlS4P6gsRI0lw4cZlWjKSCywZI9oSI9POlIPI6OYv30jvnHMXGch85tw7w==
+  dependencies:
+    cropperjs "^1.5.6"
+
 vue-demi@*:
   version "0.14.7"
   resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz"
@@ -1326,7 +1445,7 @@ vue-tsc@^0.38.4:
   dependencies:
     "@volar/vue-typescript" "0.38.9"
 
-"vue@^2.6.12 || ^3.1.1", "vue@^2.6.14 || ^3.3.0", "vue@^3.0.0-0 || ^2.6.0", vue@^3.0.5, vue@^3.2.0, vue@^3.2.25, vue@^3.2.47, vue@^3.4.5, "vue@2 || 3", vue@3.4.21:
+"vue@^2.6.12 || ^3.1.1", "vue@^2.6.14 || ^3.3.0", "vue@^3.0.0-0 || ^2.6.0", vue@^3.0.5, vue@^3.2.0, vue@^3.2.25, vue@^3.2.47, vue@^3.4.5, vue@>=3.0.0, "vue@2 || 3", vue@3.4.21:
   version "3.4.21"
   resolved "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz"
   integrity sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==