feat: 整体pure，核心功能对接完成

Yi.Pure.Vue3/src/views/account-settings/components/AccountManagement.vue

@@ -12,27 +12,30 @@ const list = ref([
     title: "账户密码",
     illustrate: "当前密码强度：强",
     button: "修改"
-  },
-  {
-    title: "密保手机",
-    illustrate: "已经绑定手机：158****6789",
-    button: "修改"
-  },
-  {
-    title: "密保问题",
-    illustrate: "未设置密保问题，密保问题可有效保护账户安全",
-    button: "修改"
-  },
-  {
-    title: "备用邮箱",
-    illustrate: "已绑定邮箱：pure***@163.com",
-    button: "修改"
   }
+  // {
+  //   title: "密保手机",
+  //   illustrate: "已经绑定手机：158****6789",
+  //   button: "修改"
+  // },
+  // {
+  //   title: "密保问题",
+  //   illustrate: "未设置密保问题，密保问题可有效保护账户安全",
+  //   button: "修改"
+  // },
+  // {
+  //   title: "备用邮箱",
+  //   illustrate: "已绑定邮箱：pure***@163.com",
+  //   button: "修改"
+  // }
 ]);
 
 function onClick(item) {
-  console.log("onClick", item.title);
-  message("请根据具体业务自行实现", { type: "success" });
+  switch (item.title) {
+    case "账户密码":
+      message("密码更改成功", { type: "success" });
+      break;
+  }
 }
 </script>
 

Yi.Pure.Vue3/src/views/account-settings/components/Profile.vue

@@ -2,11 +2,19 @@
 import { reactive, ref } from "vue";
 import { formUpload } from "@/api/mock";
 import { message } from "@/utils/message";
-import { type UserInfo, getMine } from "@/api/user";
 import type { FormInstance, FormRules } from "element-plus";
 import ReCropperPreview from "@/components/ReCropperPreview";
 import { createFormData, deviceDetection } from "@pureadmin/utils";
 import uploadLine from "@iconify-icons/ri/upload-line";
+import { useUserStoreHook } from "@/store/modules/user";
+import {
+  getUserProfile,
+  updateUserIcon,
+  updateUserProfile
+} from "@/api/system/user";
+import userAvatar from "@/assets/user.jpg";
+import { getFileUrl } from "@/utils/file";
+import { uploadFile } from "@/api/file";
 
 defineOptions({
   name: "Profile"
@@ -20,15 +28,16 @@ const isShow = ref(false);
 const userInfoFormRef = ref<FormInstance>();
 
 const userInfos = reactive({
-  avatar: "",
-  nickname: "",
+  icon: "",
+  nick: "",
   email: "",
   phone: "",
-  description: ""
+  introduction: ""
 });
 
-const rules = reactive<FormRules<UserInfo>>({
-  nickname: [{ required: true, message: "昵称必填", trigger: "blur" }]
+const rules = reactive<FormRules>({
+  userName: [{ required: true, message: "用户名必填", trigger: "blur" }],
+  nick: [{ required: true, message: "昵称必填", trigger: "blur" }]
 });
 
 function queryEmail(queryString, callback) {
@@ -70,11 +79,13 @@ const onCropper = ({ blob }) => (cropperBlob.value = blob);
 
 const handleSubmitImage = () => {
   const formData = createFormData({
-    files: new File([cropperBlob.value], "avatar")
+    files: new File([cropperBlob.value], "file")
   });
-  formUpload(formData)
-    .then(({ success, data }) => {
-      if (success) {
+  uploadFile(formData)
+    .then(async ({ status, data }) => {
+      if (status == 200) {
+        await updateUserIcon(data[0].id);
+        useUserStoreHook().SET_AVATAR(data[0].id);
         message("更新头像成功", { type: "success" });
         handleClose();
       } else {
@@ -88,18 +99,17 @@ const handleSubmitImage = () => {
 
 // 更新信息
 const onSubmit = async (formEl: FormInstance) => {
-  await formEl.validate((valid, fields) => {
+  await formEl.validate(async (valid, fields) => {
     if (valid) {
-      console.log(userInfos);
+      await updateUserProfile(userInfos);
       message("更新信息成功", { type: "success" });
     } else {
       console.log("error submit!", fields);
     }
   });
 };
-
-getMine().then(res => {
-  Object.assign(userInfos, res.data);
+getUserProfile().then(res => {
+  Object.assign(userInfos, res.data.user);
 });
 </script>
 
@@ -118,7 +128,7 @@ getMine().then(res => {
       :model="userInfos"
     >
       <el-form-item label="头像">
-        <el-avatar :size="80" :src="userInfos.avatar" />
+        <el-avatar :size="80" :src="getFileUrl(userInfos.icon, userAvatar)" />
         <el-upload
           ref="uploadRef"
           accept="image/*"
@@ -135,7 +145,7 @@ getMine().then(res => {
         </el-upload>
       </el-form-item>
       <el-form-item label="昵称" prop="nickname">
-        <el-input v-model="userInfos.nickname" placeholder="请输入昵称" />
+        <el-input v-model="userInfos.nick" placeholder="请输入昵称" />
       </el-form-item>
       <el-form-item label="邮箱" prop="email">
         <el-autocomplete
@@ -156,7 +166,7 @@ getMine().then(res => {
       </el-form-item>
       <el-form-item label="简介">
         <el-input
-          v-model="userInfos.description"
+          v-model="userInfos.introduction"
           placeholder="请输入简介"
           type="textarea"
           :autosize="{ minRows: 6, maxRows: 8 }"

Yi.Pure.Vue3/src/views/account-settings/components/SecurityLog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from "dayjs";
-import { getMineLogs } from "@/api/user";
+// import { getMineLogs } from "@/api/user";
 import { reactive, ref, onMounted } from "vue";
 import { deviceDetection } from "@pureadmin/utils";
 import type { PaginationProps } from "@pureadmin/table";
@@ -55,11 +55,11 @@ const columns: TableColumnList = [
 
 async function onSearch() {
   loading.value = true;
-  const { data } = await getMineLogs();
-  dataList.value = data.list;
-  pagination.total = data.total;
-  pagination.pageSize = data.pageSize;
-  pagination.currentPage = data.currentPage;
+  // const { data } = await getMineLogs();
+  // dataList.value = data.list;
+  // pagination.total = data.total;
+  // pagination.pageSize = data.pageSize;
+  // pagination.currentPage = data.currentPage;
 
   setTimeout(() => {
     loading.value = false;

Yi.Pure.Vue3/src/views/account-settings/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { getMine } from "@/api/user";
 import { useRouter } from "vue-router";
 import { ref, onBeforeMount } from "vue";
 import { ReText } from "@/components/ReText";
@@ -11,11 +10,14 @@ import AccountManagement from "./components/AccountManagement.vue";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 import LaySidebarTopCollapse from "@/layout/components/lay-sidebar/components/SidebarTopCollapse.vue";
 
+import userAvatar from "@/assets/user.jpg";
+import { getFileUrl } from "@/utils/file";
 import leftLine from "@iconify-icons/ri/arrow-left-s-line";
 import ProfileIcon from "@iconify-icons/ri/user-3-line";
 import PreferencesIcon from "@iconify-icons/ri/settings-3-line";
 import SecurityLogIcon from "@iconify-icons/ri/window-line";
 import AccountManagementIcon from "@iconify-icons/ri/profile-line";
+import { getUserProfile } from "@/api/system/user";
 
 defineOptions({
   name: "AccountSettings"
@@ -29,7 +31,7 @@ onBeforeMount(() => {
 });
 
 const userInfo = ref({
-  avatar: "",
+  icon: "",
   userName: "",
   nick: ""
 });
@@ -40,12 +42,12 @@ const panes = [
     icon: ProfileIcon,
     component: Profile
   },
-  {
-    key: "preferences",
-    label: "偏好设置",
-    icon: PreferencesIcon,
-    component: Preferences
-  },
+  // {
+  //   key: "preferences",
+  //   label: "偏好设置",
+  //   icon: PreferencesIcon,
+  //   component: Preferences
+  // },
   {
     key: "securityLog",
     label: "安全日志",
@@ -61,8 +63,8 @@ const panes = [
 ];
 const witchPane = ref("profile");
 
-getMine().then(res => {
-  userInfo.value = res.data;
+getUserProfile().then(res => {
+  userInfo.value = res.data.user;
 });
 </script>
 
@@ -84,13 +86,13 @@ getMine().then(res => {
           </div>
         </el-menu-item>
         <div class="flex items-center ml-8 mt-4 mb-4">
-          <el-avatar :size="48" :src="userInfo.avatar" />
+          <el-avatar :size="48" :src="getFileUrl(userInfo.icon, userAvatar)" />
           <div class="ml-4 flex flex-col max-w-[130px]">
             <ReText class="font-bold !self-baseline">
-              {{ userInfo.nickname }}
+              {{ userInfo.nick }}
             </ReText>
             <ReText class="!self-baseline" type="info">
-              {{ userInfo.username }}
+              {{ userInfo.nick }}
             </ReText>
           </div>
         </div>