wip: 🚧 个人中心临时提交

src/views/profile/index.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="app-container">
-    <el-row>
-      <el-col :span="6">
     <el-tabs tab-position="left">
       <el-tab-pane label="账号信息">
         <div class="w-full">
@@ -83,41 +81,72 @@
       </el-tab-pane>
       <el-tab-pane label="安全设置">
         <el-card>
-              <el-descriptions :column="1">
+          <el-row>
-                <el-descriptions-item>
+            <el-col :span="16">
-                  <template #label>
+              <div class="font-bold">登录密码</div>
-                    <el-icon class="align-middle"><Lock /></el-icon>
+              <div class="text-14px py-2">
-                    密码
+                安全性高的密码可以使账号更安全。建议您定期更换密码，设置一个包含字母，符号或数字钟至少两项长度超过6为的密码
-                  </template>
+              </div>
-                  <el-button type="primary" @click="handleOpenDialog">
+            </el-col>
-                    修改密码
+            <el-col :span="8">
+              <div class="flex-y-center h-full">
+                <el-button
+                  type="primary"
+                  plain
+                  size="small"
+                  @click="handleOpenDialog"
+                >
+                  修改
                 </el-button>
-                </el-descriptions-item>
+              </div>
-
-                <el-descriptions-item>
-                  <template #label>
-                    <el-icon class="align-middle"><Lock /></el-icon>
-                    手机绑定
-                  </template>
-                  <el-button type="primary">设置安全问题</el-button>
-                </el-descriptions-item>
-
-                <el-descriptions-item>
-                  <template #label>
-                    <el-icon class="align-middle"><Lock /></el-icon>
-                    邮箱绑定
-                  </template>
-                  <el-button type="primary">设置安全问题</el-button>
-                </el-descriptions-item>
-              </el-descriptions>
-            </el-card>
-          </el-tab-pane>
-          <el-tab-pane label="偏好设置">Role</el-tab-pane>
-          <el-tab-pane label="接收设置">Task</el-tab-pane>
-        </el-tabs>
             </el-col>
           </el-row>
 
+          <el-row class="mt-5">
+            <el-col :span="16">
+              <div class="font-bold">手机</div>
+              <div class="text-14px py-2">
+                可用手机号加密码登录，可通过手机号找回密码
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="flex-y-center h-full">
+                <el-button
+                  type="primary"
+                  plain
+                  size="small"
+                  @click="handleOpenDialog"
+                >
+                  绑定
+                </el-button>
+              </div>
+            </el-col>
+          </el-row>
+
+          <el-row class="mt-5">
+            <el-col :span="16">
+              <div class="font-bold">邮箱</div>
+              <div class="text-14px py-2">
+                可用邮箱加密码登录，可通过邮箱找回密码
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="flex-y-center h-full">
+                <el-button
+                  type="primary"
+                  plain
+                  size="small"
+                  @click="handleOpenDialog"
+                >
+                  绑定
+                </el-button>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-tab-pane>
+    </el-tabs>
+
     <el-dialog title="修改密码" v-model:visible="dialogVisible">
       <el-form
         :model="passwordChangeForm"
@@ -147,7 +176,6 @@
 </template>
 
 <script lang="ts" setup>
-import { useRouter } from "vue-router";
 import UserAPI, {
   UserProfileVO,
   UserProfileForm,
@@ -155,7 +183,6 @@ import UserAPI, {
 } from "@/api/user";
 import { useUserStore } from "@/store/modules/user";
 import { Camera } from "@element-plus/icons-vue";
-const router = useRouter();
 const userStore = useUserStore();
 
 const userProfile = ref<UserProfileVO>({});