feat: 个人设置

src/hooks/useGlobalProperties.ts

@@ -0,0 +1,3 @@
+// 用于全局使用globalProperties
+import { getCurrentInstance, ComponentInternalInstance } from "vue";
+export default () => (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;

src/main.ts

@@ -19,8 +19,10 @@ import i18n from "@/lang/index";
 import "@/assets/fonts/fonts.scss";
 // vchart-arco-theme 主题关联-黑暗模式
 import { initVChartArcoTheme } from "@visactor/vchart-arco-theme";
+
 initVChartArcoTheme();
 const app = createApp(App);
+
 app.use(ArcoVue, {
   componentPrefix: "arco"
 });

src/router/route.ts

@@ -242,6 +242,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
       {
         path: "/personal-center",
         name: "personal-center",
+        redirect: "/personal-center/userinfo",
         meta: {
           title: "personal-center",
           link: "",

src/typings/arco.d.ts

@@ -0,0 +1,7 @@
+/* ArcoDesign命名空间 */
+declare namespace ArcoDesign {
+  interface ArcoSubmit {
+    values: Record<string, any>;
+    errors: Record<string, any> | undefined;
+  }
+}

src/views/form-management/step-form/step-form.vue

@@ -161,12 +161,8 @@ const rules = ref({
   ]
 });
 const formRef = ref();
-interface ISubmit {
+
-  values: Record<string, any>;
+const handleSubmit = ({ errors }: ArcoDesign.ArcoSubmit) => {
-  errors: Record<string, any> | undefined;
-}
-const handleSubmit = ({ values, errors }: ISubmit) => {
-  console.log("values:", values, "\nerrors:", errors);
   if (errors) return;
   if (currentStep.value == 3) return;
   if (currentStep.value == 2) {

src/views/personal-center/user-settings/components/basic-info.vue

@@ -2,94 +2,112 @@
   <a-row align="center" :gutter="[0, 16]">
     <a-col :span="24">
       <a-card title="基本信息">
-        <template #extra>
+        <a-form :model="form" :rules="rules" :style="{ width: '600px' }" @submit="onSubmit">
-          <a-link>修改基本信息</a-link>
+          <a-form-item field="userId" label="用户ID">
-        </template>
+            <a-input v-model="form.userId" disabled />
-        <a-form :model="form" :style="{ width: '600px' }">
-          <a-form-item field="name" label="用户ID">
-            <a-input v-model="form.name" placeholder="请输入用户昵称" disabled />
           </a-form-item>
-          <a-form-item field="name" label="用户昵称">
+          <a-form-item field="username" label="用户名">
-            <a-input v-model="form.name" placeholder="请输入用户昵称" />
+            <a-input v-model="form.username" placeholder="请输入用户名" allow-clear />
           </a-form-item>
-          <a-form-item field="name" label="角色">
+          <a-form-item field="nickname" label="用户昵称">
-            <a-input v-model="form.name" placeholder="请选择角色" />
+            <a-input v-model="form.nickname" placeholder="请输入用户昵称" allow-clear />
           </a-form-item>
-          <a-form-item field="name" label="权限">
+          <a-form-item field="role" label="角色">
-            <a-input v-model="form.name" placeholder="请选择权限" />
+            <a-select :style="{ width: '320px' }" v-model="form.role" placeholder="请选择角色" allow-clear>
+              <a-option>系统管理员</a-option>
+              <a-option>普通角色</a-option>
+            </a-select>
           </a-form-item>
-          <a-form-item field="name" label="注册时间">
+          <a-form-item field="address" label="所在区域">
-            <a-input v-model="form.name" placeholder="请输入注册时间" />
+            <a-cascader
+              v-model="form.address"
+              :options="options"
+              expand-trigger="hover"
+              :style="{ width: '320px' }"
+              placeholder="请选择所在区域"
+              allow-clear
+            />
+          </a-form-item>
+          <a-form-item field="introduce" label="简介">
+            <a-textarea placeholder="请输入简介" v-model="form.introduce" allow-clear />
           </a-form-item>
           <a-form-item>
-            <a-button>提交</a-button>
+            <a-space>
+              <a-button type="primary" html-type="submit">提交</a-button>
+            </a-space>
           </a-form-item>
         </a-form>
       </a-card>
     </a-col>
-    <a-col :span="24">
-      <a-card title="个性信息">
-        <template #extra>
-          <a-link>修改个性信息</a-link>
-        </template>
-        <a-form :model="privateForm" layout="horizontal" :label-col-props="{ span: 8 }" :wrapper-col-props="{ span: 16 }">
-          <a-row :gutter="16">
-            <a-col :span="8">
-              <a-form-item field="name" label="我用语雀">
-                <a-input v-model="privateForm.name" placeholder="请输入姓名" allow-clear />
-              </a-form-item>
-              <a-form-item field="name" label="个性性格">
-                <a-input v-model="privateForm.name" placeholder="请输入姓名" allow-clear />
-              </a-form-item>
-              <a-form-item field="name" label="职业工作">
-                <a-input v-model="privateForm.name" placeholder="请输入姓名" allow-clear />
-              </a-form-item>
-              <a-form-item field="name" label="现居城市">
-                <a-input v-model="privateForm.name" placeholder="请输入姓名" allow-clear />
-              </a-form-item>
-              <a-form-item field="name" label="兴趣爱好">
-                <a-input v-model="privateForm.name" placeholder="请输入姓名" allow-clear />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item field="phone" label="邮箱">
-                <a-input v-model="privateForm.name" placeholder="请输入手机号" allow-clear />
-              </a-form-item>
-              <a-form-item field="phone" label="微信">
-                <a-input v-model="privateForm.name" placeholder="请输入手机号" allow-clear />
-              </a-form-item>
-              <a-form-item field="phone" label="思否">
-                <a-input v-model="privateForm.name" placeholder="请输入手机号" allow-clear />
-              </a-form-item>
-              <a-form-item field="phone" label="掘金">
-                <a-input v-model="privateForm.name" placeholder="请输入手机号" allow-clear />
-              </a-form-item>
-              <a-form-item field="phone" label="gitee">
-                <a-input v-model="privateForm.name" placeholder="请输入手机号" allow-clear />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item field="name" label="公众号">
-                <a-input v-model="privateForm.name" placeholder="请输入姓名" allow-clear />
-              </a-form-item>
-              <a-form-item field="name" label="公众号二维码">
-                <a-input v-model="privateForm.name" placeholder="请输入姓名" allow-clear />
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </a-card>
-    </a-col>
   </a-row>
 </template>
 
 <script setup lang="ts">
+import useGlobalProperties from "@/hooks/useGlobalProperties";
+const proxy = useGlobalProperties();
 const form = ref({
-  name: ""
+  userId: "1000001",
-});
+  username: "admin",
-const privateForm = ref({
+  nickname: "兔子先森",
-  name: ""
+  role: "系统管理员",
+  address: "guanggu",
+  introduce: ""
 });
+const rules = {
+  userId: [
+    {
+      required: true,
+      message: "用户ID不能为空"
+    }
+  ],
+  username: [
+    {
+      required: true,
+      message: "用户名不能为空"
+    }
+  ]
+};
+
+const options = ref([
+  {
+    value: "hubei",
+    label: "湖北",
+    children: [
+      {
+        value: "wuhan",
+        label: "武汉",
+        children: [
+          {
+            value: "guanggu",
+            label: "光谷"
+          }
+        ]
+      },
+      {
+        value: "xiaogan",
+        label: "孝感"
+      },
+      {
+        value: "jingzhou",
+        label: "荆州"
+      }
+    ]
+  },
+  {
+    value: "hunan",
+    label: "湖南",
+    children: [
+      {
+        value: "changsha",
+        label: "长沙"
+      }
+    ]
+  }
+]);
+const onSubmit = ({ errors }: ArcoDesign.ArcoSubmit) => {
+  if (errors) return;
+  proxy.$message.success("修改基本信息");
+};
 </script>
 
 <style lang="scss" scoped>

src/views/personal-center/user-settings/components/security-settings.vue

@@ -1,32 +1,65 @@
 <template>
   <div>
-    <a-form :model="form" :style="{ width: '600px' }">
+    <a-row align="center" :gutter="[0, 16]">
-      <a-form-item field="name" label="登录密码">
+      <a-col :span="24">
-        <a-input v-model="form.name" placeholder="请输入登录密码" />
+        <a-card title="安全设置">
-      </a-form-item>
+          <a-form :model="form" :rules="rules" :style="{ width: '600px' }" @submit="onSubmit">
-      <a-form-item field="name" label="安全手机">
+            <a-form-item field="password" label="登录密码">
-        <a-input v-model="form.name" placeholder="请输入安全手机" />
+              <a-input-password v-model="form.password" placeholder="请输入登录密码" allow-clear />
-      </a-form-item>
+            </a-form-item>
-      <a-form-item field="name" label="安全邮箱">
+            <a-form-item field="phone" label="安全手机">
-        <a-input v-model="form.name" placeholder="请输入安全邮箱" />
+              <a-input v-model="form.phone" placeholder="请输入安全手机" allow-clear>
-      </a-form-item>
+                <template #prepend> +86 </template>
-      <a-form-item field="name" label="密保问题">
+              </a-input>
-        <a-input v-model="form.name" placeholder="请输入密保问题" />
+            </a-form-item>
-      </a-form-item>
+            <a-form-item field="email" label="安全邮箱">
-      <a-form-item field="name" label="密保答案">
+              <a-input v-model="form.email" placeholder="请输入安全邮箱" allow-clear />
-        <a-input v-model="form.name" placeholder="请输入密保答案" />
+            </a-form-item>
-      </a-form-item>
+            <a-form-item field="question" label="密保问题">
-      <a-form-item>
+              <a-input v-model="form.question" placeholder="请输入密保问题" allow-clear />
-        <a-button>提交</a-button>
+            </a-form-item>
-      </a-form-item>
+            <a-form-item field="answer" label="密保答案">
-    </a-form>
+              <a-input v-model="form.answer" placeholder="请输入密保答案" allow-clear />
+            </a-form-item>
+            <a-form-item>
+              <a-button type="primary" html-type="submit">提交</a-button>
+            </a-form-item>
+          </a-form>
+        </a-card>
+      </a-col>
+    </a-row>
   </div>
 </template>
 
 <script setup lang="ts">
+import useGlobalProperties from "@/hooks/useGlobalProperties";
+const proxy = useGlobalProperties();
 const form = ref({
-  name: ""
+  password: "123456",
+  phone: "15888888888",
+  email: "",
+  question: "",
+  answer: ""
 });
+const rules = {
+  password: [
+    {
+      required: true,
+      message: "登录密码不能为空"
+    }
+  ],
+  phone: [
+    {
+      required: true,
+      message: "安全手机不能为空"
+    }
+  ]
+};
+
+const onSubmit = ({ errors }: ArcoDesign.ArcoSubmit) => {
+  if (errors) return;
+  proxy.$message.success("修改基本信息");
+};
 </script>
 
 <style lang="scss" scoped>

src/views/personal-center/user-settings/user-settings.vue

@@ -45,8 +45,8 @@ import myImage from "@/assets/img/my-image.jpg";
 import BasicInfo from "@/views/personal-center/user-settings/components/basic-info.vue";
 import SecuritySettings from "@/views/personal-center/user-settings/components/security-settings.vue";
 import Accreditation from "@/views/personal-center/user-settings/components/accreditation.vue";
-import { getCurrentInstance } from "vue";
+import useGlobalProperties from "@/hooks/useGlobalProperties";
-const { proxy } = getCurrentInstance();
+const proxy = useGlobalProperties();
 
 const type = ref("rounded");
 const size = ref("medium");