From aa5c4f6251e8a416431b3ac20c599d76b2bdb218 Mon Sep 17 00:00:00 2001
From: NagoColer <nagocoler@qq.com>
Date: Sun, 20 Aug 2023 00:26:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=B8=AA=E4=BA=BA=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E8=AE=BE=E7=BD=AE=E9=A1=B5=E9=9D=A2=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 my-project-frontend/src/components/Card.vue   |  55 +++++++++
 my-project-frontend/src/router/index.js       |   7 ++
 my-project-frontend/src/views/IndexView.vue   |   5 +-
 .../src/views/settings/UserSetting.vue        | 104 ++++++++++++++++++
 4 files changed, 169 insertions(+), 2 deletions(-)
 create mode 100644 my-project-frontend/src/components/Card.vue
 create mode 100644 my-project-frontend/src/views/settings/UserSetting.vue

diff --git a/my-project-frontend/src/components/Card.vue b/my-project-frontend/src/components/Card.vue
new file mode 100644
index 0000000..f89b6ed
--- /dev/null
+++ b/my-project-frontend/src/components/Card.vue
@@ -0,0 +1,55 @@
+<script setup>
+import {ElIcon} from "element-plus";
+
+defineProps({
+  title: String,
+  desc: String,
+  icon: Object
+})
+</script>
+
+<template>
+  <div class="card">
+    <div class="card-header" v-if="title">
+      <div>
+        <el-icon style="margin-right: 3px">
+          <component :is="icon"/>
+        </el-icon>
+        {{title}}
+      </div>
+      <div>{{desc}}</div>
+    </div>
+    <slot/>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.card {
+  border-radius: 5px;
+  border: solid 1px var(--el-border-color);
+  background-color: var(--el-bg-color);
+  box-sizing: border-box;
+  min-height: 20px;
+  padding: 10px;
+}
+
+.card-header {
+  border-bottom: solid 1px var(--el-border-color);
+  padding-bottom: 5px;
+  margin-bottom: 10px;
+
+  .el-icon {
+    translate: 0 2px;
+  }
+
+  & > :first-child {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  & > :last-child {
+    font-size: 13px;
+    color: grey;
+  }
+}
+</style>
diff --git a/my-project-frontend/src/router/index.js b/my-project-frontend/src/router/index.js
index 18069ec..cb5a3df 100644
--- a/my-project-frontend/src/router/index.js
+++ b/my-project-frontend/src/router/index.js
@@ -27,6 +27,13 @@ const router = createRouter({
             path: '/index',
             name: 'index',
             component: () => import('@/views/IndexView.vue'),
+            children: [
+                {
+                    path: 'user-setting',
+                    name: 'user-setting',
+                    component: () => import('@/views/settings/UserSetting.vue')
+                }
+            ]
         }
     ]
 })
diff --git a/my-project-frontend/src/views/IndexView.vue b/my-project-frontend/src/views/IndexView.vue
index 8766259..ef67568 100755
--- a/my-project-frontend/src/views/IndexView.vue
+++ b/my-project-frontend/src/views/IndexView.vue
@@ -83,8 +83,9 @@ function userLogout() {
         <el-aside width="230px">
           <el-scrollbar style="height: calc(100vh - 55px)">
             <el-menu
+                router
                 style="min-height: calc(100vh - 55px)"
-                default-active="1-1"
+                :default-active="$route.path"
                 class="el-menu-vertical-demo"
                 :collapse="isCollapse">
               <el-sub-menu index="1">
@@ -167,7 +168,7 @@ function userLogout() {
                   <el-icon><Operation/></el-icon>
                   <span><b>个人设置</b></span>
                 </template>
-                <el-menu-item index="3-1">
+                <el-menu-item index="/index/user-setting">
                   <template #title>
                     <el-icon><User/></el-icon>
                     个人信息设置
diff --git a/my-project-frontend/src/views/settings/UserSetting.vue b/my-project-frontend/src/views/settings/UserSetting.vue
new file mode 100644
index 0000000..add29da
--- /dev/null
+++ b/my-project-frontend/src/views/settings/UserSetting.vue
@@ -0,0 +1,104 @@
+<script setup>
+
+import Card from "@/components/Card.vue";
+import {Message, Refresh, Select, User} from "@element-plus/icons-vue";
+import {useStore} from "@/store";
+import {computed} from "vue";
+
+const store = useStore();
+
+const registerTime = computed(() => new Date(store.user.registerTime).toLocaleString())
+</script>
+
+<template>
+  <div style="display: flex">
+    <div class="settings-left">
+      <card :icon="User" title="账号信息设置" desc="在这里编辑您的个人信息，您可以在隐私设置中选择是否展示这些信息">
+        <el-form label-position="top" style="margin: 0 10px 10px 10px">
+          <el-form-item label="用户名">
+            <el-input/>
+          </el-form-item>
+          <el-form-item label="电子邮件">
+            <el-input/>
+          </el-form-item>
+          <el-form-item label="性别">
+            <el-radio-group>
+              <el-radio label="1" size="large">男</el-radio>
+              <el-radio label="2" size="large">女</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="手机号">
+            <el-input/>
+          </el-form-item>
+          <el-form-item label="QQ号">
+            <el-input/>
+          </el-form-item>
+          <el-form-item label="微信号">
+            <el-input/>
+          </el-form-item>
+          <el-form-item label="个人简介">
+            <el-input type="textarea" :rows="6"/>
+          </el-form-item>
+          <div>
+            <el-button :icon="Select" type="success">保存用户信息</el-button>
+          </div>
+        </el-form>
+      </card>
+      <card style="margin-top: 10px" :icon="Message" title="电子邮件设置" desc="您可以在这里修改默认绑定的电子邮件地址">
+        <el-form label-position="top" style="margin: 0 10px 10px 10px">
+          <el-form-item label="电子邮件">
+            <el-input/>
+          </el-form-item>
+          <el-form-item>
+            <el-row style="width: 100%" :gutter="10">
+              <el-col :span="18">
+                <el-input placeholder="请获取验证码"/>
+              </el-col>
+              <el-col :span="6">
+                <el-button type="success" style="width: 100%" plain>获取验证码</el-button>
+              </el-col>
+            </el-row>
+          </el-form-item>
+          <div>
+            <el-button :icon="Refresh" type="success">保存电子邮件</el-button>
+          </div>
+        </el-form>
+      </card>
+    </div>
+    <div class="settings-right">
+      <div style="position: sticky;top: 20px">
+        <card>
+          <div style="text-align: center;padding: 5px 15px 0 15px">
+            <div style="display: inline-block">
+              <el-avatar :size="70" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
+              <div style="font-weight: bold">你好, {{store.user.username}}</div>
+            </div>
+          </div>
+          <el-divider style="margin: 10px 0"/>
+          <div style="padding: 10px;font-size: 14px;color: grey">
+            还打算登记卡手动滑稽啊扩大合计阿卡手打啊世纪大厦健康大厦登记卡
+            撒谎登记卡手动滑稽卡死打卡机阿萨高大上科技大厦打撒黑科技
+            撒活动卡萨丁卡仕达酱啊受打击卡萨
+            大萨达哈萨克大豪科技啊打卡机阿萨达
+          </div>
+        </card>
+        <card style="margin-top: 10px;font-size: 14px">
+          <div>账号注册时间: {{registerTime}}</div>
+          <div style="color: grey">欢迎加入我们的学习论坛！</div>
+        </card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.settings-left {
+  flex: 1;
+  margin: 20px;
+}
+
+.settings-right {
+  width: 300px;
+  margin: 20px;
+}
+</style>