zant-admin 2.0.2 → 2.0.4

package/src/views/baiscstatis/center.vue

@@ -1,474 +1,474 @@
-<template>
-  <div class="user-center">
-    <a-card title="个人中心" :bordered="false" class="user-center-card">
-      <a-row :gutter="32">
-        <!-- 左侧用户信息 -->
-        <a-col :span="6">
-          <div class="user-info">
-            <div class="avatar-section">
-              <a-avatar :size="80" :src="userInfo.avatar" class="user-avatar">
-                {{ userInfo.username?.charAt(0) || 'U' }}
-              </a-avatar>
-              <div class="user-basic-info">
-                <h3>{{ userInfo.username || '用户' }}</h3>
-                <p class="user-role">{{ userInfo.roleName || '普通用户' }}</p>
-              </div>
-            </div>
-          </div>
-        </a-col>
-
-        <!-- 右侧功能区域 -->
-        <a-col :span="18">
-          <a-tabs v-model:activeKey="activeTab" type="card">
-            <!-- 基本信息 -->
-            <a-tab-pane key="basic" tab="基本信息">
-              <div class="basic-info-container">
-                <a-descriptions title="用户信息" bordered :column="2">
-                  <a-descriptions-item label="账号名称">
-                    {{ userInfo.username || '未设置' }}
-                  </a-descriptions-item>
-                  <a-descriptions-item label="手机号">
-                    {{ userInfo.phone || '未设置' }}
-                  </a-descriptions-item>
-                  <a-descriptions-item label="邮箱">
-                    {{ userInfo.email || '未设置' }}
-                  </a-descriptions-item>
-                  <a-descriptions-item label="角色">
-                    {{ userInfo.roleName || '普通用户' }}
-                  </a-descriptions-item>
-                  <a-descriptions-item label="最后登录时间" :span="2">
-                    {{
-                      userInfo.lastLoginTime
-                        ? formatDate(userInfo.lastLoginTime)
-                        : '从未登录'
-                    }}
-                  </a-descriptions-item>
-                  <a-descriptions-item label="注册时间" :span="2">
-                    {{
-                      userInfo.createTime
-                        ? formatDate(userInfo.createTime)
-                        : '未知'
-                    }}
-                  </a-descriptions-item>
-                </a-descriptions>
-              </div>
-            </a-tab-pane>
-
-            <!-- 修改密码 -->
-            <a-tab-pane key="password" tab="修改密码">
-              <div class="password-form-container">
-                <a-form
-                  :model="passwordForm"
-                  :label-col="{ span: 8 }"
-                  :wrapper-col="{ span: 12 }"
-                  layout="horizontal"
-                  :rules="passwordRules"
-                  ref="formRef"
-                >
-                  <a-form-item label="原密码" name="oldPassword">
-                    <a-input-password
-                      v-model:value="passwordForm.oldPassword"
-                      placeholder="请输入原密码"
-                    />
-                  </a-form-item>
-                  <a-form-item label="新密码" name="newPassword">
-                    <a-input-password
-                      v-model:value="passwordForm.newPassword"
-                      placeholder="请输入新密码"
-                    />
-                  </a-form-item>
-                  <a-form-item label="确认密码" name="confirmPassword">
-                    <a-input-password
-                      v-model:value="passwordForm.confirmPassword"
-                      placeholder="请再次输入新密码"
-                    />
-                  </a-form-item>
-                  <a-form-item :wrapper-col="{ offset: 8, span: 12 }">
-                    <a-button type="primary" @click="changePassword"
-                      >修改密码</a-button
-                    >
-                    <a-button
-                      style="margin-left: 10px"
-                      @click="resetPasswordForm"
-                      >重置</a-button
-                    >
-                  </a-form-item>
-                </a-form>
-              </div>
-            </a-tab-pane>
-
-            <!-- 安全设置 -->
-            <!-- <a-tab-pane key="security" tab="安全设置">
-              <a-list item-layout="horizontal">
-                <a-list-item>
-                  <a-list-item-meta
-                    title="登录提醒"
-                    description="开启后，当有新设备登录时会发送提醒"
-                  />
-                  <template #actions>
-                    <a-switch v-model:checked="securitySettings.loginAlert" />
-                  </template>
-                </a-list-item>
-                <a-list-item>
-                  <a-list-item-meta
-                    title="双重验证"
-                    description="开启双重验证，提高账户安全性"
-                  />
-                  <template #actions>
-                    <a-switch v-model:checked="securitySettings.twoFactorAuth" />
-                  </template>
-                </a-list-item>
-                <a-list-item>
-                  <a-list-item-meta
-                    title="会话管理"
-                    description="查看和管理当前登录的设备"
-                  />
-                  <template #actions>
-                    <a-button type="link" @click="showSessionManager">管理</a-button>
-                  </template>
-                </a-list-item>
-              </a-list>
-              <div style="margin-top: 20px; text-align: center;">
-                <a-button type="primary" @click="saveSecuritySettings">保存设置</a-button>
-              </div>
-            </a-tab-pane> -->
-          </a-tabs>
-        </a-col>
-      </a-row>
-    </a-card>
-
-    <!-- 会话管理模态框 -->
-    <a-modal
-      v-model:visible="sessionModalVisible"
-      title="会话管理"
-      width="600px"
-      :footer="null"
-    >
-      <a-list item-layout="horizontal" :data-source="sessions">
-        <template #renderItem="{ item }">
-          <a-list-item>
-            <a-list-item-meta
-              :title="item.device"
-              :description="`最后活动: ${formatDate(item.lastActivity)}`"
-            />
-            <template #actions>
-              <a-button type="link" danger @click="logoutSession(item.id)"
-                >强制下线</a-button
-              >
-            </template>
-          </a-list-item>
-        </template>
-      </a-list>
-    </a-modal>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted } from 'vue'
-import { message } from 'ant-design-vue'
-import { useUserStore } from '@/stores/user'
-import sysAccount from '@/api/methods/sysAccount'
-
-// 用户存储
-const userStore = useUserStore()
-
-// 响应式数据
-const activeTab = ref('basic')
-const sessionModalVisible = ref(false)
-const formRef = ref(null)
-// 用户信息
-const userInfo = reactive({
-  username: '',
-  email: '',
-  phone: '',
-  position: '',
-  roleName: '',
-  avatar: '',
-  lastLoginTime: null,
-  createTime: null,
-})
-
-// 密码表单
-const passwordForm = reactive({
-  oldPassword: '',
-  newPassword: '',
-  confirmPassword: '',
-})
-
-// 安全设置
-const securitySettings = reactive({
-  loginAlert: false,
-  twoFactorAuth: false,
-})
-
-// 会话列表
-const sessions = ref([])
-
-// 密码验证规则
-const passwordRules = {
-  oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
-  newPassword: [
-    { required: true, message: '请输入新密码', trigger: 'blur' },
-    // { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
-  ],
-  confirmPassword: [
-    { required: true, message: '请确认新密码', trigger: 'blur' },
-    {
-      validator: (rule, value) => {
-        if (value !== passwordForm.newPassword) {
-          return Promise.reject('两次输入的密码不一致')
-        }
-        return Promise.resolve()
-      },
-      trigger: 'blur',
-    },
-  ],
-}
-
-// 生命周期
-onMounted(() => {
-  loadUserInfo()
-})
-
-// 加载用户信息
-const loadUserInfo = async () => {
-  try {
-    // 从用户存储获取基本信息
-    const currentUser = userStore.userInfo
-    if (currentUser) {
-      Object.assign(userInfo, {
-        username: currentUser.name || '',
-        email: currentUser.email || '',
-        phone: currentUser.mobile || '',
-        position: currentUser.position || '',
-        roleName: currentUser.roleId === 1 ? '管理员' : '普通用户',
-        avatar: currentUser.profilePicture || '',
-        lastLoginTime: currentUser.lastLoginTime || null,
-        createTime: currentUser.createTime || null,
-      })
-    }
-
-    // 这里可以添加API调用获取更详细的用户信息
-    // const response = await getUserDetail()
-    // if (response.success) {
-    //   Object.assign(userInfo, response.data)
-    // }
-  } catch (error) {
-    console.error('加载用户信息失败:', error)
-    message.error('加载用户信息失败')
-  }
-}
-
-// 修改密码
-const changePassword = async () => {
-  try {
-    // 验证表单
-    await formRef.value.validate()
-
-    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
-      message.error('两次输入的密码不一致')
-      return
-    }
-
-    // 调用修改密码接口
-    const res = await sysAccount.updatePwd({
-      id: userStore.userInfo.id,
-      oldPwd: passwordForm.oldPassword,
-      newPwd: passwordForm.newPassword,
-    })
-
-    message.success('密码修改成功')
-    resetPasswordForm()
-  } catch (error) {
-    console.error('修改密码失败:', error)
-    // message.error('修改密码失败')
-  }
-}
-
-// 重置密码表单
-const resetPasswordForm = () => {
-  Object.assign(passwordForm, {
-    oldPassword: '',
-    newPassword: '',
-    confirmPassword: '',
-  })
-}
-
-// 保存安全设置
-const saveSecuritySettings = async () => {
-  try {
-    // 这里添加保存安全设置的API调用
-    // await updateSecuritySettings(securitySettings)
-    message.success('安全设置保存成功')
-  } catch (error) {
-    console.error('保存安全设置失败:', error)
-    message.error('保存安全设置失败')
-  }
-}
-
-// 显示会话管理
-const showSessionManager = () => {
-  sessionModalVisible.value = true
-  loadSessions()
-}
-
-// 加载会话列表
-const loadSessions = async () => {
-  try {
-    // 这里添加获取会话列表的API调用
-    // const response = await getUserSessions()
-    // sessions.value = response.data || []
-
-    // 模拟数据
-    sessions.value = [
-      {
-        id: 1,
-        device: 'Windows Chrome',
-        lastActivity: new Date(),
-        location: '中国 北京',
-      },
-      {
-        id: 2,
-        device: 'Mac Safari',
-        lastActivity: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2小时前
-        location: '中国 上海',
-      },
-    ]
-  } catch (error) {
-    console.error('加载会话列表失败:', error)
-  }
-}
-
-// 强制下线会话
-const logoutSession = async sessionId => {
-  try {
-    // 这里添加强制下线会话的API调用
-    // await forceLogoutSession(sessionId)
-    message.success('会话已强制下线')
-    loadSessions()
-  } catch (error) {
-    console.error('强制下线失败:', error)
-    message.error('强制下线失败')
-  }
-}
-
-// 格式化日期
-const formatDate = date => {
-  if (!date) return '未知'
-  const d = new Date(date)
-  return d.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}
-</script>
-
-<style scoped>
-
-
-.user-center-card {
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.user-info {
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 100%;
-  min-height: 400px;
-}
-
-.avatar-section {
-  margin-bottom: 24px;
-}
-
-.user-avatar {
-  margin-bottom: 16px;
-  border: 3px solid #fff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  background-color: #1677ff !important;
-  font-size: 38px !important;
-  font-weight: 600 !important;
-}
-.user-basic-info h3 {
-  margin: 0 0 8px 0;
-  font-size: 20px;
-  color: #262626;
-}
-
-.user-role {
-  margin: 0 0 4px 0;
-  color: #8c8c8c;
-  font-size: 14px;
-}
-
-.user-stats {
-  margin-top: 24px;
-  padding: 16px;
-  background: #fafafa;
-  border-radius: 6px;
-}
-
-.stat-item {
-  text-align: center;
-}
-
-.stat-number {
-  font-size: 18px;
-  font-weight: 600;
-  color: #1890ff;
-  margin-bottom: 4px;
-}
-
-.stat-label {
-  font-size: 12px;
-  color: #8c8c8c;
-}
-
-:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab) {
-  border-radius: 6px 6px 0 0;
-}
-
-:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active) {
-  background: #fff;
-}
-
-.basic-info-container {
-  padding: 20px;
-}
-
-:deep(.ant-descriptions) {
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-:deep(.ant-descriptions-title) {
-  font-size: 18px;
-  font-weight: 600;
-  color: #262626;
-  margin-bottom: 16px;
-}
-
-:deep(.ant-descriptions-item-label) {
-  font-weight: 500;
-  background: #f8f9fa;
-}
-
-.password-form-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 300px;
-  padding: 20px;
-}
-
-:deep(.password-form-container .ant-form) {
-  width: 100%;
-  max-width: 400px;
-}
-</style>
+<template>
+  <div class="user-center">
+    <a-card title="个人中心" :bordered="false" class="user-center-card">
+      <a-row :gutter="32">
+        <!-- 左侧用户信息 -->
+        <a-col :span="6">
+          <div class="user-info">
+            <div class="avatar-section">
+              <a-avatar :size="80" :src="userInfo.avatar" class="user-avatar">
+                {{ userInfo.username?.charAt(0) || 'U' }}
+              </a-avatar>
+              <div class="user-basic-info">
+                <h3>{{ userInfo.username || '用户' }}</h3>
+                <p class="user-role">{{ userInfo.roleName || '普通用户' }}</p>
+              </div>
+            </div>
+          </div>
+        </a-col>
+
+        <!-- 右侧功能区域 -->
+        <a-col :span="18">
+          <a-tabs v-model:activeKey="activeTab" type="card">
+            <!-- 基本信息 -->
+            <a-tab-pane key="basic" tab="基本信息">
+              <div class="basic-info-container">
+                <a-descriptions title="用户信息" bordered :column="2">
+                  <a-descriptions-item label="账号名称">
+                    {{ userInfo.username || '未设置' }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="手机号">
+                    {{ userInfo.phone || '未设置' }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="邮箱">
+                    {{ userInfo.email || '未设置' }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="角色">
+                    {{ userInfo.roleName || '普通用户' }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="最后登录时间" :span="2">
+                    {{
+                      userInfo.lastLoginTime
+                        ? formatDate(userInfo.lastLoginTime)
+                        : '从未登录'
+                    }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="注册时间" :span="2">
+                    {{
+                      userInfo.createTime
+                        ? formatDate(userInfo.createTime)
+                        : '未知'
+                    }}
+                  </a-descriptions-item>
+                </a-descriptions>
+              </div>
+            </a-tab-pane>
+
+            <!-- 修改密码 -->
+            <a-tab-pane key="password" tab="修改密码">
+              <div class="password-form-container">
+                <a-form
+                  :model="passwordForm"
+                  :label-col="{ span: 8 }"
+                  :wrapper-col="{ span: 12 }"
+                  layout="horizontal"
+                  :rules="passwordRules"
+                  ref="formRef"
+                >
+                  <a-form-item label="原密码" name="oldPassword">
+                    <a-input-password
+                      v-model:value="passwordForm.oldPassword"
+                      placeholder="请输入原密码"
+                    />
+                  </a-form-item>
+                  <a-form-item label="新密码" name="newPassword">
+                    <a-input-password
+                      v-model:value="passwordForm.newPassword"
+                      placeholder="请输入新密码"
+                    />
+                  </a-form-item>
+                  <a-form-item label="确认密码" name="confirmPassword">
+                    <a-input-password
+                      v-model:value="passwordForm.confirmPassword"
+                      placeholder="请再次输入新密码"
+                    />
+                  </a-form-item>
+                  <a-form-item :wrapper-col="{ offset: 8, span: 12 }">
+                    <a-button type="primary" @click="changePassword"
+                      >修改密码</a-button
+                    >
+                    <a-button
+                      style="margin-left: 10px"
+                      @click="resetPasswordForm"
+                      >重置</a-button
+                    >
+                  </a-form-item>
+                </a-form>
+              </div>
+            </a-tab-pane>
+
+            <!-- 安全设置 -->
+            <!-- <a-tab-pane key="security" tab="安全设置">
+              <a-list item-layout="horizontal">
+                <a-list-item>
+                  <a-list-item-meta
+                    title="登录提醒"
+                    description="开启后，当有新设备登录时会发送提醒"
+                  />
+                  <template #actions>
+                    <a-switch v-model:checked="securitySettings.loginAlert" />
+                  </template>
+                </a-list-item>
+                <a-list-item>
+                  <a-list-item-meta
+                    title="双重验证"
+                    description="开启双重验证，提高账户安全性"
+                  />
+                  <template #actions>
+                    <a-switch v-model:checked="securitySettings.twoFactorAuth" />
+                  </template>
+                </a-list-item>
+                <a-list-item>
+                  <a-list-item-meta
+                    title="会话管理"
+                    description="查看和管理当前登录的设备"
+                  />
+                  <template #actions>
+                    <a-button type="link" @click="showSessionManager">管理</a-button>
+                  </template>
+                </a-list-item>
+              </a-list>
+              <div style="margin-top: 20px; text-align: center;">
+                <a-button type="primary" @click="saveSecuritySettings">保存设置</a-button>
+              </div>
+            </a-tab-pane> -->
+          </a-tabs>
+        </a-col>
+      </a-row>
+    </a-card>
+
+    <!-- 会话管理模态框 -->
+    <a-modal
+      v-model:visible="sessionModalVisible"
+      title="会话管理"
+      width="600px"
+      :footer="null"
+    >
+      <a-list item-layout="horizontal" :data-source="sessions">
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <a-list-item-meta
+              :title="item.device"
+              :description="`最后活动: ${formatDate(item.lastActivity)}`"
+            />
+            <template #actions>
+              <a-button type="link" danger @click="logoutSession(item.id)"
+                >强制下线</a-button
+              >
+            </template>
+          </a-list-item>
+        </template>
+      </a-list>
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import { useUserStore } from '@/stores/user'
+import sysAccount from '@/api/methods/sysAccount'
+
+// 用户存储
+const userStore = useUserStore()
+
+// 响应式数据
+const activeTab = ref('basic')
+const sessionModalVisible = ref(false)
+const formRef = ref(null)
+// 用户信息
+const userInfo = reactive({
+  username: '',
+  email: '',
+  phone: '',
+  position: '',
+  roleName: '',
+  avatar: '',
+  lastLoginTime: null,
+  createTime: null,
+})
+
+// 密码表单
+const passwordForm = reactive({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: '',
+})
+
+// 安全设置
+const securitySettings = reactive({
+  loginAlert: false,
+  twoFactorAuth: false,
+})
+
+// 会话列表
+const sessions = ref([])
+
+// 密码验证规则
+const passwordRules = {
+  oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
+  newPassword: [
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+    // { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, message: '请确认新密码', trigger: 'blur' },
+    {
+      validator: (rule, value) => {
+        if (value !== passwordForm.newPassword) {
+          return Promise.reject('两次输入的密码不一致')
+        }
+        return Promise.resolve()
+      },
+      trigger: 'blur',
+    },
+  ],
+}
+
+// 生命周期
+onMounted(() => {
+  loadUserInfo()
+})
+
+// 加载用户信息
+const loadUserInfo = async () => {
+  try {
+    // 从用户存储获取基本信息
+    const currentUser = userStore.userInfo
+    if (currentUser) {
+      Object.assign(userInfo, {
+        username: currentUser.name || '',
+        email: currentUser.email || '',
+        phone: currentUser.mobile || '',
+        position: currentUser.position || '',
+        roleName: currentUser.roleId === 1 ? '管理员' : '普通用户',
+        avatar: currentUser.profilePicture || '',
+        lastLoginTime: currentUser.lastLoginTime || null,
+        createTime: currentUser.createTime || null,
+      })
+    }
+
+    // 这里可以添加API调用获取更详细的用户信息
+    // const response = await getUserDetail()
+    // if (response.success) {
+    //   Object.assign(userInfo, response.data)
+    // }
+  } catch (error) {
+    console.error('加载用户信息失败:', error)
+    message.error('加载用户信息失败')
+  }
+}
+
+// 修改密码
+const changePassword = async () => {
+  try {
+    // 验证表单
+    await formRef.value.validate()
+
+    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
+      message.error('两次输入的密码不一致')
+      return
+    }
+
+    // 调用修改密码接口
+    const res = await sysAccount.updatePwd({
+      id: userStore.userInfo.id,
+      oldPwd: passwordForm.oldPassword,
+      newPwd: passwordForm.newPassword,
+    })
+
+    message.success('密码修改成功')
+    resetPasswordForm()
+  } catch (error) {
+    console.error('修改密码失败:', error)
+    // message.error('修改密码失败')
+  }
+}
+
+// 重置密码表单
+const resetPasswordForm = () => {
+  Object.assign(passwordForm, {
+    oldPassword: '',
+    newPassword: '',
+    confirmPassword: '',
+  })
+}
+
+// 保存安全设置
+const saveSecuritySettings = async () => {
+  try {
+    // 这里添加保存安全设置的API调用
+    // await updateSecuritySettings(securitySettings)
+    message.success('安全设置保存成功')
+  } catch (error) {
+    console.error('保存安全设置失败:', error)
+    message.error('保存安全设置失败')
+  }
+}
+
+// 显示会话管理
+const showSessionManager = () => {
+  sessionModalVisible.value = true
+  loadSessions()
+}
+
+// 加载会话列表
+const loadSessions = async () => {
+  try {
+    // 这里添加获取会话列表的API调用
+    // const response = await getUserSessions()
+    // sessions.value = response.data || []
+
+    // 模拟数据
+    sessions.value = [
+      {
+        id: 1,
+        device: 'Windows Chrome',
+        lastActivity: new Date(),
+        location: '中国 北京',
+      },
+      {
+        id: 2,
+        device: 'Mac Safari',
+        lastActivity: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2小时前
+        location: '中国 上海',
+      },
+    ]
+  } catch (error) {
+    console.error('加载会话列表失败:', error)
+  }
+}
+
+// 强制下线会话
+const logoutSession = async sessionId => {
+  try {
+    // 这里添加强制下线会话的API调用
+    // await forceLogoutSession(sessionId)
+    message.success('会话已强制下线')
+    loadSessions()
+  } catch (error) {
+    console.error('强制下线失败:', error)
+    message.error('强制下线失败')
+  }
+}
+
+// 格式化日期
+const formatDate = date => {
+  if (!date) return '未知'
+  const d = new Date(date)
+  return d.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+</script>
+
+<style scoped>
+
+
+.user-center-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.user-info {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  min-height: 400px;
+}
+
+.avatar-section {
+  margin-bottom: 24px;
+}
+
+.user-avatar {
+  margin-bottom: 16px;
+  border: 3px solid #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background-color: #1677ff !important;
+  font-size: 38px !important;
+  font-weight: 600 !important;
+}
+.user-basic-info h3 {
+  margin: 0 0 8px 0;
+  font-size: 20px;
+  color: #262626;
+}
+
+.user-role {
+  margin: 0 0 4px 0;
+  color: #8c8c8c;
+  font-size: 14px;
+}
+
+.user-stats {
+  margin-top: 24px;
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 6px;
+}
+
+.stat-item {
+  text-align: center;
+}
+
+.stat-number {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1890ff;
+  margin-bottom: 4px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab) {
+  border-radius: 6px 6px 0 0;
+}
+
+:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active) {
+  background: #fff;
+}
+
+.basic-info-container {
+  padding: 20px;
+}
+
+:deep(.ant-descriptions) {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+:deep(.ant-descriptions-title) {
+  font-size: 18px;
+  font-weight: 600;
+  color: #262626;
+  margin-bottom: 16px;
+}
+
+:deep(.ant-descriptions-item-label) {
+  font-weight: 500;
+  background: #f8f9fa;
+}
+
+.password-form-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+  padding: 20px;
+}
+
+:deep(.password-form-container .ant-form) {
+  width: 100%;
+  max-width: 400px;
+}
+</style>