feat: 添加部门管理

src/views/account-settings/components/AccountSafe.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { deviceDetection, hideTextAtIndex } from "@pureadmin/utils";
+import { useUserInfo } from "../utils/hooks";
+defineOptions({
+  name: "AccountSafe"
+});
+
+const { handleReset, handlePhone, handleEmail, userInfo } = useUserInfo();
+</script>
+
+<template>
+  <div
+    :class="[
+      'min-w-[180px]',
+      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
+    ]"
+  >
+    <h3 class="my-8">账户安全</h3>
+    <div class="flex items-center">
+      <div class="flex-1">
+        <p>账号密码</p>
+        <el-text class="mx-1" type="info" />
+      </div>
+      <el-button type="primary" text @click="handleReset(userInfo)"
+        >修改</el-button
+      >
+    </div>
+    <el-divider />
+    <div class="flex items-center">
+      <div class="flex-1">
+        <p>绑定号码</p>
+        <el-text class="mx-1" type="info">
+          已经绑定手机：{{
+            hideTextAtIndex(userInfo.phone, { start: 3, end: 6 })
+          }}
+        </el-text>
+      </div>
+      <el-button type="primary" text @click="handlePhone(userInfo)"
+        >修改</el-button
+      >
+    </div>
+    <el-divider />
+    <div class="flex items-center">
+      <div class="flex-1">
+        <p>绑定邮箱</p>
+        <el-text class="mx-1" type="info"
+          >已绑定邮箱：{{
+            hideTextAtIndex(userInfo.email, {
+              start: 3,
+              end: userInfo.email.indexOf("@") - 1
+            })
+          }}
+        </el-text>
+      </div>
+      <el-button type="primary" text @click="handleEmail(userInfo)"
+        >修改</el-button
+      >
+    </div>
+    <el-divider />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-divider--horizontal {
+  border-top: 0.1px var(--el-border-color) var(--el-border-style);
+}
+</style>