storlead-sasa-platform/ui/smarttrade-platform/src/components/layout/Sidebar.vue

<template>
  <aside class="sidebar">
    <!-- Logo -->
    <div class="sidebar-header">
      <div class="logo">
        <div class="logo-icon">🧠</div>
        <div>
          <div class="logo-text">领存智贸</div>
          <div class="logo-subtitle">AI原生外贸CRM</div>
        </div>
      </div>
    </div>

    <!-- Navigation -->
    <nav class="nav-menu">
      <!-- AI核心 -->
      <div class="nav-section">
        <div class="nav-section-title">AI 核心</div>
        <!-- <router-link to="/" class="nav-item" :class="{ active: $route.path === '/' }">
          <i class="fas fa-brain nav-icon"></i>
          <span class="nav-text">企业大脑</span>
        </router-link> -->
        <!-- <router-link to="/prospect" class="nav-item" :class="{ active: $route.path === '/prospect' }">
          <i class="fas fa-crosshairs nav-icon"></i>
          <span class="nav-text">自动寻客</span>
          <span class="nav-badge">新</span>
        </router-link> -->
        <router-link to="/marketing" class="nav-item" :class="{ active: $route.path === '/marketing' || $route.path === '/' }">
          <i class="fas fa-paper-plane nav-icon"></i>
          <span class="nav-text">自动营销</span>
        </router-link>
        <!-- <router-link to="/strategy" class="nav-item" :class="{ active: $route.path === '/strategy' }">
          <i class="fas fa-lightbulb nav-icon"></i>
          <span class="nav-text">AI策略中心</span>
        </router-link> -->
      </div>

      <!-- 客户管理 -->
      <div class="nav-section">
        <div class="nav-section-title">客户管理</div>
        <router-link to="/customers" class="nav-item" :class="{ active: $route.path === '/customers' }">
          <i class="fas fa-users nav-icon"></i>
          <span class="nav-text">客户池</span>
        </router-link>
        <!-- <router-link to="/opportunities" class="nav-item" :class="{ active: $route.path === '/opportunities' }">
          <i class="fas fa-briefcase nav-icon"></i>
          <span class="nav-text">商机管理</span>
        </router-link>
        <router-link to="/orders" class="nav-item" :class="{ active: $route.path === '/orders' }">
          <i class="fas fa-box nav-icon"></i>
          <span class="nav-text">订单跟进</span>
        </router-link> -->
      </div>

      <!-- 数据洞察 -->
      <!-- <div class="nav-section">
        <div class="nav-section-title">数据洞察</div>
        <router-link to="/analysis" class="nav-item" :class="{ active: $route.path === '/analysis' }">
          <i class="fas fa-chart-line nav-icon"></i>
          <span class="nav-text">经营分析</span>
        </router-link>
        <router-link to="/market" class="nav-item" :class="{ active: $route.path === '/market' }">
          <i class="fas fa-globe nav-icon"></i>
          <span class="nav-text">市场情报</span>
        </router-link>
        <router-link to="/risk" class="nav-item" :class="{ active: $route.path === '/risk' }">
          <i class="fas fa-shield-alt nav-icon"></i>
          <span class="nav-text">风险风控</span>
          <span class="nav-badge" style="background: var(--warning);">3</span>
        </router-link>
      </div> -->

      <!-- 系统设置 -->
      <div class="nav-section">
        <div class="nav-section-title">系统</div>
        <router-link to="/knowledge" class="nav-item" :class="{ active: $route.path === '/knowledge' }">
          <i class="fas fa-book nav-icon"></i>
          <span class="nav-text">知识库</span>
        </router-link>
        <router-link to="/settings" class="nav-item" :class="{ active: $route.path === '/settings' }">
          <i class="fas fa-cog nav-icon"></i>
          <span class="nav-text">设置</span>
        </router-link>
      </div>
    </nav>

    <!-- User Profile -->
    <div class="sidebar-footer">
      <div class="user-card" @click="toggleUserMenu">
        <div class="user-avatar-wrapper">
          <div class="user-avatar">{{ userData?.realName?.charAt(0) }}</div>
          <div class="online-indicator"></div>
        </div>
        <div class="user-info">
          <div class="user-name">{{ userData?.realName }}</div>
          <div class="user-status">
            <span class="status-dot"></span>
            在线
          </div>
        </div>
        <i class="fas fa-chevron-up user-arrow" :class="{ rotated: showUserMenu }"></i>
      </div>

      <!-- User Dropdown Menu -->
      <transition name="dropdown">
        <div v-if="showUserMenu" class="user-menu">
          <div class="menu-header">
            <div class="menu-avatar">{{ userData?.realName?.charAt(0) }}</div>
            <div class="menu-user-info">
              <div class="menu-user-name">{{ userData?.realName }}</div>
              <div class="menu-user-email">{{ userData?.email }}</div>
            </div>
          </div>
          
          <div class="menu-divider"></div>
          
          <div class="menu-items">
            <div class="menu-item" @click="showProfileModal = true">
              <div class="menu-item-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary);">
                <i class="fas fa-user"></i>
              </div>
              <div class="menu-item-content">
                <span class="menu-item-title">个人资料</span>
                <span class="menu-item-desc">编辑头像、姓名等信息</span>
              </div>
            </div>
          </div>
          
          <div class="menu-divider"></div>
          
          <div class="menu-items">
            <div class="menu-item" @click="openPwdModal">
              <div class="menu-item-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning);">
                <i :class="isDarkMode ? 'fas fa-sun' : 'fas fa-moon'"></i>
              </div>
              <div class="menu-item-content">
                <span class="menu-item-title">修改密码</span>
              </div>
            </div>
            
            <div class="menu-item" @click="openHistoryModal">
              <div class="menu-item-icon" style="background: rgba(6, 182, 212, 0.2); color: var(--info);">
                <i class="fas fa-question-circle"></i>
              </div>
              <div class="menu-item-content">
                <span class="menu-item-title">登录历史</span>
              </div>
            </div>
          </div>
          
          <div class="menu-divider"></div>
          
          <div class="menu-footer">
            <div class="menu-item danger" @click="handleLogout">
              <div class="menu-item-icon" style="background: rgba(239, 68, 68, 0.2); color: var(--danger);">
                <i class="fas fa-sign-out-alt"></i>
              </div>
              <div class="menu-item-content">
                <span class="menu-item-title">退出登录</span>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>

    <!-- Help Modal -->
    <div v-if="showHelpModal" class="modal-overlay" @click.self="showHelpModal = false">
      <div class="modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-question-circle"></i> 帮助中心</div>
          <button class="modal-close" @click="showHelpModal = false">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="help-section">
            <h4>🚀 快速入门</h4>
            <div class="help-list">
              <div class="help-item">
                <i class="fas fa-brain"></i>
                <span>企业大脑 - 与AI对话，快速执行任务</span>
              </div>
              <div class="help-item">
                <i class="fas fa-crosshairs"></i>
                <span>自动寻客 - AI全网挖掘高匹配潜客</span>
              </div>
              <div class="help-item">
                <i class="fas fa-paper-plane"></i>
                <span>自动营销 - 多渠道自动化客户触达</span>
              </div>
            </div>
          </div>
          
          <div class="help-section">
            <h4>📞 联系支持</h4>
            <div class="contact-cards">
              <div class="contact-card">
                <i class="fas fa-envelope"></i>
                <div>
                  <div class="contact-label">邮箱</div>
                  <div class="contact-value">support@lingcunai.com</div>
                </div>
              </div>
              <div class="contact-card">
                <i class="fab fa-weixin"></i>
                <div>
                  <div class="contact-label">微信</div>
                  <div class="contact-value">领存智贸</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showHelpModal = false">关闭</button>
          <button class="btn btn-primary">
            <i class="fas fa-book"></i> 查看完整文档
          </button>
        </div>
      </div>
    </div>

    <!-- 个人信息弹窗 -->
    <div v-if="showProfileModal" class="modal-overlay" @click.self="showProfileModal = false">
      <div class="modal settings-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-user-edit"></i> 编辑个人信息</div>
          <button class="modal-close" @click="showProfileModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <el-form ref="settingsFormRef" label-width="100px">
            <el-form-item label="姓名">
              <el-input readonly v-model="userData.realName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="职位">
              <el-input readonly v-model="userData.jobName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input readonly v-model="userData.email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="电话">
              <el-input readonly v-model="userData.userName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="所属部门">
              <el-input readonly v-model="userData.deptName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="个人简介">
              <el-input type="textarea" v-model="userData.remark" :rows="3" autocomplete="off" placeholder="请输入个人简介" />
            </el-form-item>
          </el-form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showProfileModal = false">取消</button>
          <button class="btn btn-primary" @click="saveRemark">保存</button>
        </div>
      </div>
    </div>

    <!-- 修改密码弹窗 -->
    <div v-if="showPasswordModal" class="modal-overlay" @click.self="showPasswordModal = false">
      <div class="modal settings-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-key"></i> 修改密码</div>
          <button class="modal-close" @click="showPasswordModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <el-form ref="resetPwdformRef" :rules="rules" :model="pwdForm" label-width="120px">
            <el-form-item label="当前密码" prop="password">
                <el-input type='password' v-model="pwdForm.password" placeholder="请输入当前密码" @input="getPassword"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPass">
                <el-input type='password' v-model="pwdForm.newPass" placeholder="请输入新密码"
                    @input="getNPassword"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="newPassAgain">
                <el-input type='password' v-model="pwdForm.newPassAgain" placeholder="请再次输入新密码"
                    @input="getNPasswordA"></el-input>
            </el-form-item>
            <div class="password-hint">
              <i class="fas fa-info-circle"></i> 密码要求：至少8位，包含字母和数字
            </div>
          </el-form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showPasswordModal = false">取消</button>
          <button class="btn btn-primary" @click="submitForm">确认修改</button>
        </div>
      </div>
    </div>

    <!-- 登录历史弹窗 -->
    <div v-if="showLoginHistoryModal" class="modal-overlay" @click.self="showLoginHistoryModal = false">
      <div class="modal settings-modal wide" style="max-width: 520px;">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-history"></i> 登录历史记录</div>
          <button class="modal-close" @click="showLoginHistoryModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="login-history-list">
            <div v-for="login in loginHistory" :key="login.id" class="login-history-item">
              <div class="login-icon" :class="login.status == 1 ? 'success' : 'error'">
                <i :class="login.status === 1 ? 'fas fa-check-circle' : 'fas fa-times-circle'"></i>
              </div>
              <div class="login-info">
                <div class="login-time">{{ login.createTime }}</div>
                <div class="login-details">
                  <span><i class="fas fa-map-marker-alt"></i> {{ login.city }}</span>
                  <span><i class="fas fa-desktop"></i> {{ login.browser }} / {{ login.os.split(' ')[0] }}</span>
                  <span><i class="fas fa-network-wired"></i> {{ login.ip }}</span>
                </div>
              </div>
              <div class="login-status" :class="login.status == 1 ? 'success' : 'error'">{{ login.status == 1 ? '成功' : '失败' }}</div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showLoginHistoryModal = false">关闭</button>
        </div>
      </div>
    </div>

    <!-- Click outside to close menu -->
    <div v-if="showUserMenu" class="menu-backdrop" @click="showUserMenu = false"></div>
  </aside>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getUserInfo, updateUserPwd, getLoginData, updateRemark } from '@/api/layout'
import { ElMessageBox } from 'element-plus'
import { encrypt } from "@/utils/jsencrypt";

const route = useRoute()
const router = useRouter()

const showProfileModal = ref(false)
const showPasswordModal = ref(false)
const showLoginHistoryModal = ref(false)
// 登录历史数据
const loginHistory = ref([])

const openHistoryModal = () => {
  getHistoryData()
  showLoginHistoryModal.value = true
}
const getHistoryData = () => {
  getLoginData({ pageIndex: 1, pageSize: 10000 }).then(res => {
    if(res.code === 200){
      loginHistory.value = res.result.records
    }
  })
}

const saveRemark = () => {
  updateRemark({ remark: userData.value.remark, id: userData.value.id }).then(res => {
    ElMessage.success("个人信息已更新");
    showProfileModal.value = false
  }).catch(err => {
    ElMessage.error(err.message);
  })
}

const showUserMenu = ref(false)
const showHelpModal = ref(false)
const isDarkMode = ref(true)

const toggleUserMenu = () => {
  showUserMenu.value = !showUserMenu.value
}

const goToSettings = (section) => {
  showUserMenu.value = false
  router.push('/settings')
}

const toggleTheme = () => {
  isDarkMode.value = !isDarkMode.value
  showUserMenu.value = false
}

const handleLogout = () => {
  ElMessageBox.confirm(
    '确定要退出登录吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    localStorage.clear()
    router.push({ path: '/login' })
  })
}

const pwdForm = ref({
    password: '',
    newPass: '',
    newPassAgain: ''
});
const resetPwdformRef = ref();
const getPassword = (data) => {
    pwdForm.value.password = data.replace(/\s+/g, '')
}
const getNPassword = (data) => {
    pwdForm.value.newPass = data.replace(/\s+/g, '')
}
const getNPasswordA = (data) => {
    pwdForm.value.newPassAgain = data.replace(/\s+/g, '')
}
const openPwdModal = () => {
    showPasswordModal.value = true
    resetPwdformRef.value?.resetFields();
    pwdForm.value.password = ''
    pwdForm.value.newPass = ''
    pwdForm.value.newPassAgain = ''
}
var validatePass1 = (rule, value, callback) => {
    const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\W]{8,}$/;
    if (value === '') {
        callback(new Error('请输入新密码'));
    } else if (!reg.test(value)) {
        callback(new Error('密码须包含字母+数字且长度大于8位!'));
    } else {
        callback();
    }
};
var validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入新密码'));
    } else if (value !== pwdForm.value.newPass) {
        callback(new Error('两次输入密码不一致!'));
    } else {
        callback();
    }
};
const rules = ref({
    password: [
        { required: true, message: '请输入现在使用的密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
    ],
    newPass: [
        { required: true, validator: validatePass1, trigger: 'blur' },
    ],
    newPassAgain: [
        { required: true, validator: validatePass2, trigger: 'blur' },
    ],
});
const submitForm = () => {
    resetPwdformRef.value?.validate((valid) => {
        if (valid) {
            let params = {
              password: encrypt(pwdForm.value.password),
              newPass: encrypt(pwdForm.value.newPass),
              newPassAgain: encrypt(pwdForm.value.newPassAgain)
            }
            updateUserPwd(params).then(res => {
              localStorage.clear()
              ElMessage.success("修改成功");
              router.push({ path: '/login' })
            }).catch(err => {
              ElMessage.error(err.message);
            })
        } else {
        }
    });
}

const userData = ref()
onMounted(() => {
  getUserInfo().then((res) => {
    if(res.code == 200) {
      userData.value = res.result
      localStorage.setItem('userInfo', JSON.stringify(res.result))
    }
  })
})
</script>

<style scoped>
.sidebar {
  width: 260px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: var(--gradient-1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.logo-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.logo-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Navigation Menu */
.nav-menu {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
}

.nav-section {
  margin-bottom: 20px;
}

.nav-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 12px;
  margin-bottom: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 4px;
  color: var(--text-secondary);
  text-decoration: none;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary);
}

.nav-icon {
  width: 20px;
  font-size: 16px;
}

.nav-text {
  flex: 1;
  font-size: 13px;
}

.nav-badge {
  background: var(--danger);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
}

/* User Card */
.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--border);
  position: relative;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-hover);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.user-card:hover {
  background: var(--border);
}

.user-avatar-wrapper {
  position: relative;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: var(--gradient-1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.online-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: var(--success);
  border: 2px solid var(--bg-card);
  border-radius: 50%;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
}

.user-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.status-dot {
  width: 6px;
  height: 6px;
  background: var(--success);
  border-radius: 50%;
}

.user-arrow {
  color: var(--text-muted);
  font-size: 12px;
  transition: transform 0.2s;
}

.user-arrow.rotated {
  transform: rotate(180deg);
}

/* User Menu Dropdown */
.menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 98;
}

.user-menu {
  position: absolute;
  bottom: 100%;
  left: 12px;
  right: 12px;
  margin-bottom: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  z-index: 99;
  overflow: hidden;
}

.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.2s ease;
}

.dropdown-enter-from,
.dropdown-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

.menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-hover);
}

.menu-avatar {
  width: 44px;
  height: 44px;
  background: var(--gradient-1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.menu-user-info {
  flex: 1;
}

.menu-user-name {
  font-size: 14px;
  font-weight: 600;
}

.menu-user-email {
  font-size: 12px;
  color: var(--text-secondary);
}

.menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.menu-items {
  padding: 8px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  color: inherit;
}

.menu-item:hover {
  background: var(--bg-hover);
}

.menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.menu-item.danger .menu-item-title {
  color: var(--danger);
}

.menu-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.menu-item-content {
  flex: 1;
}

.menu-item-title {
  display: block;
  font-size: 13px;
  font-weight: 500;
}

.menu-item-desc {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.menu-footer {
  padding: 8px;
  padding-top: 0;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: var(--bg-card);
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-title i {
  color: var(--primary);
}

.modal-close {
  width: 32px;
  height: 32px;
  background: var(--bg-hover);
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: var(--border);
  color: var(--text-primary);
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid var(--border);
}

/* Help Section */
.help-section {
  margin-bottom: 20px;
}

.help-section:last-child {
  margin-bottom: 0;
}

.help-section h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.help-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--bg-hover);
  border-radius: 8px;
  font-size: 13px;
}

.help-item i {
  color: var(--primary);
  width: 20px;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg-hover);
  border-radius: 10px;
}

.contact-card i {
  font-size: 20px;
  color: var(--primary);
}

.contact-label {
  font-size: 11px;
  color: var(--text-muted);
}

.contact-value {
  font-size: 13px;
  font-weight: 500;
}

/* Login History Modal */
.login-history-list { display: flex; flex-direction: column; gap: 12px; }
.login-history-item { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--bg-hover); border-radius: 10px; }
.login-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.login-icon.success { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.login-icon.error { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
.login-info { flex: 1; }
.login-time { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.login-details { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
.login-details span { display: flex; align-items: center; gap: 4px; }
.login-status { font-size: 12px; padding: 4px 10px; border-radius: 10px; }
.login-status.success { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.login-status.error { background: rgba(239, 68, 68, 0.2); color: var(--danger); }

:deep(.el-form-item){
    display: flex;
    flex-direction: column;
}
:deep(.el-form-item .el-form-item__label){
    justify-content: flex-start;
}
:deep(.el-form-item__label), :deep(.el-radio__label), :deep(.el-checkbox__label) {
    color: var(--text-secondary);
}
:deep(.el-input__inner) {
    color: var(--text-primary);
}
:deep(.el-input__wrapper), :deep(.el-textarea__inner), :deep(.el-select__wrapper){
    background: var(--bg-dark);
    border: 1px solid var(--border);
    box-shadow: none;
    border-radius: 8px;
    color: var(--text-primary);
}
</style>