feature:界面美化

package-lock.json

@@ -832,6 +832,7 @@
       "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -941,6 +942,7 @@
       "resolved": "https://registry.npmmirror.com/vite/-/vite-8.0.3.tgz",
       "integrity": "sha512-B9ifbFudT1TFhfltfaIPgjo9Z3mDynBTJSUYxTjOQruf/zHH+ezCQKcoqO+h7a9Pw9Nm/OtlXAiGT1axBgwqrQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
@@ -1017,6 +1019,7 @@
       "version": "3.5.31",
       "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.31.tgz",
       "integrity": "sha512-iV/sU9SzOlmA/0tygSmjkEN6Jbs3nPoIPFhCMLD2STrjgOU8DX7ZtzMhg4ahVwf5Rp9KoFzcXeB1ZrVbLBp5/Q==",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.31",
         "@vue/compiler-sfc": "3.5.31",

src/App.vue

@@ -6,6 +6,7 @@ import Account from './components/Account.vue';
 const isLogin = ref(false);
 const userName = ref('');
 const email = ref('');
+const activeNav = ref('profile');
 
 //初始化登录信息
 var bearer = localStorage.getItem('bearer');
@@ -62,29 +63,68 @@ function Login() {
     'height=700,width=1000,top=300,left=200,toolbar=no,menubar=no, scrollbars=no,resizable=no,location=no, status=no'
   )
 }
+
+function setActiveNav(name) {
+  activeNav.value = name;
+}
 </script>
 
 <template>
   <div class="TopBar">
-    <span v-if="!isLogin">请先登录</span>
-    <button @click="Login()">
-      {{ isLogin? '登出':'登录' }}
-    </button>
+    <div class="logo">
+      <div class="logo-icon">A</div>
+      <span>账户中心</span>
+    </div>
+    <div class="user-section">
+      <div class="user-info" v-if="isLogin">
+        <div class="user-avatar">{{ userName.charAt(0).toUpperCase() }}</div>
+        <span>{{ userName }}</span>
+      </div>
+      <button v-if="!isLogin" class="login-btn" @click="Login()">
+        登录
+      </button>
+      <button v-else class="logout-btn" @click="Login()">
+        登出
+      </button>
+    </div>
   </div>
+  
   <div class="Notice">
-      <span>提示:修改密码请登出后使用忘记密码功能</span>
-    </div>
-  <div class="Content" v-if="isLogin">
+    <span class="Notice-icon">⚠️</span>
+    <span>提示：修改密码请登出后使用忘记密码功能</span>
+  </div>
+  
+  <div v-if="isLogin" class="main-container">
     <div class="LeftBar">
-      <RouterLink :to="{name: 'profile'}">
-        <button>个人资料</button>
-      </RouterLink>
-      <RouterLink :to="{name: 'passkey'}">
-        <button>通行密钥</button>
-      </RouterLink>
+      <div class="nav-title">导航菜单</div>
+      <div class="nav-list">
+        <RouterLink :to="{name: 'profile'}" @click="setActiveNav('profile')">
+          <div class="nav-item" :class="{ active: activeNav === 'profile' }">
+            <div class="nav-icon">👤</div>
+            <span>个人资料</span>
+          </div>
+        </RouterLink>
+        <RouterLink :to="{name: 'passkey'}" @click="setActiveNav('passkey')">
+          <div class="nav-item" :class="{ active: activeNav === 'passkey' }">
+            <div class="nav-icon">🔑</div>
+            <span>通行密钥</span>
+          </div>
+        </RouterLink>
+      </div>
+    </div>
+    <div class="content-area">
+      <RouterView :UserName="userName" :Email="email"/>
+    </div>
+  </div>
+  
+  <div v-else class="login-prompt">
+    <div class="login-card">
+      <div class="login-icon">🔐</div>
+      <h2 class="login-title">欢迎使用账户中心</h2>
+      <p class="login-desc">请登录以管理您的账户信息和安全设置</p>
+      <button class="login-btn" @click="Login()">
+        立即登录
+      </button>
     </div>
-    <!-- <Account :UserName="userName" :Email="email" /> -->
-    <RouterView class="RouterView" :UserName="userName" :Email="email"/>
   </div>
 </template>
-

src/components/Account.vue

@@ -1,23 +1,115 @@
 <script setup>
-  const props = defineProps({
-    UserName: String,
-    Email: String,
-  })
+const props = defineProps({
+  UserName: String,
+  Email: String,
+})
 </script>
 
 <template>
-  <div class="Account">
-    <div class="UserName">
-      <span>用户名</span>
-      <span>:</span>
-      <span>{{ props.UserName }}</span>
-      <button disabled>编辑</button>
+  <div class="profile-page">
+    <div class="page-header">
+      <h1 class="page-title">个人资料</h1>
+      <p class="page-subtitle">管理您的账户基本信息</p>
     </div>
     
-    <div class="Email">
-      <span>邮箱</span>
-      <span>:</span>
-      <span>{{ props.Email }}</span>
+    <div class="card">
+      <div class="card-header">
+        <h3 class="card-title">基本信息</h3>
+      </div>
+      <div class="card-body">
+        <div class="form-group">
+          <label class="form-label">用户名</label>
+          <div class="form-row">
+            <div class="form-value">{{ props.UserName }}</div>
+            <button class="edit-btn" disabled>编辑</button>
+          </div>
+        </div>
+        
+        <div class="form-group">
+          <label class="form-label">邮箱地址</label>
+          <div class="form-row">
+            <div class="form-value">{{ props.Email }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="card" style="margin-top: 24px;">
+      <div class="card-header">
+        <h3 class="card-title">账户安全</h3>
+      </div>
+      <div class="card-body">
+        <div class="security-item">
+          <div class="security-info">
+            <div class="security-icon">🛡️</div>
+            <div>
+              <div class="security-title">双重认证</div>
+              <div class="security-desc">增强账户安全性</div>
+            </div>
+          </div>
+          <button class="edit-btn">设置</button>
+        </div>
+        
+        <div class="security-item">
+          <div class="security-info">
+            <div class="security-icon">📱</div>
+            <div>
+              <div class="security-title">绑定手机</div>
+              <div class="security-desc">用于接收验证码和通知</div>
+            </div>
+          </div>
+          <button class="edit-btn">绑定</button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.profile-page {
+  max-width: 800px;
+}
+
+.form-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.form-value {
+  flex: 1;
+}
+
+.security-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.security-item:last-child {
+  border-bottom: none;
+}
+
+.security-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.security-icon {
+  font-size: 24px;
+}
+
+.security-title {
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+.security-desc {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+</style>

src/components/PassKey.vue

@@ -1,5 +1,91 @@
 <template>
-  <div class="PassKey">
-    暂不支持通行密钥
+  <div class="passkey-page">
+    <div class="page-header">
+      <h1 class="page-title">通行密钥</h1>
+      <p class="page-subtitle">管理您的无密码登录方式</p>
+    </div>
+    
+    <div class="card">
+      <div class="card-body">
+        <div class="empty-state">
+          <div class="empty-icon">🔑</div>
+          <h3 class="empty-title">暂不支持通行密钥</h3>
+          <p class="empty-desc">该功能正在开发中，敬请期待。届时您将可以使用生物识别或安全密钥进行无密码登录。</p>
+        </div>
+      </div>
+    </div>
+    
+    <div class="card" style="margin-top: 24px;">
+      <div class="card-header">
+        <h3 class="card-title">关于通行密钥</h3>
+      </div>
+      <div class="card-body">
+        <div class="feature-list">
+          <div class="feature-item">
+            <div class="feature-icon">🔐</div>
+            <div class="feature-content">
+              <div class="feature-title">更安全</div>
+              <div class="feature-desc">无需密码，使用生物识别或硬件密钥验证身份</div>
+            </div>
+          </div>
+          
+          <div class="feature-item">
+            <div class="feature-icon">⚡</div>
+            <div class="feature-content">
+              <div class="feature-title">更便捷</div>
+              <div class="feature-desc">一键登录，无需记忆复杂密码</div>
+            </div>
+          </div>
+          
+          <div class="feature-item">
+            <div class="feature-icon">🌐</div>
+            <div class="feature-content">
+              <div class="feature-title">跨平台</div>
+              <div class="feature-desc">支持多种设备和浏览器</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.passkey-page {
+  max-width: 800px;
+}
+
+.feature-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.feature-item {
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+  background: var(--background);
+  border-radius: var(--radius);
+}
+
+.feature-icon {
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.feature-content {
+  flex: 1;
+}
+
+.feature-title {
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+.feature-desc {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+</style>

src/style.css

@@ -1,55 +1,389 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --primary-color: #4f46e5;
+  --primary-hover: #4338ca;
+  --secondary-color: #6366f1;
+  --background: #f8fafc;
+  --card-bg: #ffffff;
+  --text-primary: #1e293b;
+  --text-secondary: #64748b;
+  --border-color: #e2e8f0;
+  --success-color: #22c55e;
+  --warning-color: #f59e0b;
+  --error-color: #ef4444;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --radius: 8px;
+  --radius-lg: 12px;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background-color: var(--background);
+  color: var(--text-primary);
+  line-height: 1.6;
+}
+
 button {
   cursor: pointer;
+  border: none;
+  background: none;
+  font-family: inherit;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
 }
 
 .TopBar {
   display: flex;
-  flex-direction: row;
-  justify-content: end;
-  padding: 20px;
-  margin-bottom: 10px;
-  background-color: #d7d7d7;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  background: var(--card-bg);
+  border-bottom: 1px solid var(--border-color);
+  box-shadow: var(--shadow);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.logo {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--primary-color);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.logo-icon {
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 18px;
+}
+
+.user-section {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--background);
+  border-radius: var(--radius);
+}
+
+.user-avatar {
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.login-btn {
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  color: white;
+  padding: 8px 20px;
+  border-radius: var(--radius);
+  font-weight: 500;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3);
+}
+
+.login-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(79, 70, 229, 0.4);
+}
+
+.logout-btn {
+  background: var(--background);
+  color: var(--text-secondary);
+  padding: 8px 20px;
+  border-radius: var(--radius);
+  font-weight: 500;
+  transition: all 0.2s ease;
+  border: 1px solid var(--border-color);
+}
+
+.logout-btn:hover {
+  background: #fee2e2;
+  color: var(--error-color);
+  border-color: #fecaca;
 }
 
 .Notice {
-  background-color: rgba(200, 200, 0, 0.5);
-  padding: 10px;
-  margin-bottom: 10px;
-  border-radius: 10px;
-  border-width: 2px;
-  border-color: yellow;
-  border-style: solid;
+  background: linear-gradient(135deg, #fef3c7, #fde68a);
+  padding: 12px 24px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #92400e;
+  font-size: 14px;
 }
 
-.Content {
+.Notice-icon {
+  color: var(--warning-color);
+}
+
+.main-container {
   display: flex;
-  flex-direction: row;
+  min-height: calc(100vh - 120px);
 }
 
 .LeftBar {
-   flex: 1;
-   display: flex;
-   flex-direction: column;
-   align-items: center;
+  width: 240px;
+  background: var(--card-bg);
+  border-right: 1px solid var(--border-color);
+  padding: 24px 16px;
 }
 
-.LeftBar button {
-  height: 100px;
-  border: none;
-  background-color: transparent;
+.nav-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 16px;
+  padding-left: 12px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: var(--radius);
+  color: var(--text-secondary);
+  transition: all 0.2s ease;
+  margin-bottom: 4px;
+}
+
+.nav-item:hover {
+  background: var(--background);
+  color: var(--text-primary);
+}
+
+.nav-item.active {
+  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(99, 102, 241, 0.1));
+  color: var(--primary-color);
+}
+
+.nav-icon {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content-area {
+  flex: 1;
+  padding: 32px;
+  background: var(--background);
+}
+
+.page-header {
+  margin-bottom: 32px;
+}
+
+.page-title {
   font-size: 24px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.page-subtitle {
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.card {
+  background: var(--card-bg);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.card-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.card-body {
+  padding: 24px;
+}
+
+.form-group {
+  margin-bottom: 24px;
+}
+
+.form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.form-value {
+  padding: 12px 16px;
+  background: var(--background);
+  border-radius: var(--radius);
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.edit-btn {
+  background: var(--background);
+  color: var(--text-secondary);
+  padding: 8px 16px;
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  border: 1px solid var(--border-color);
+}
+
+.edit-btn:hover:not(:disabled) {
+  background: #e0e7ff;
+  color: var(--primary-color);
+  border-color: #c7d2fe;
+}
+
+.edit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 48px 24px;
+  color: var(--text-secondary);
+}
+
+.empty-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
   opacity: 0.5;
 }
 
-.LeftBar button:hover {
-  opacity: 1;
+.empty-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 8px;
 }
 
-.RouterView {
-  flex: 3;
-  padding: 10px;
+.empty-desc {
+  font-size: 14px;
+  max-width: 300px;
+  margin: 0 auto;
 }
 
-.Account > * {
-  margin-bottom: 100px;
+.login-prompt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  text-align: center;
+  padding: 24px;
+}
+
+.login-card {
+  background: var(--card-bg);
+  padding: 48px;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  max-width: 400px;
+  width: 100%;
+}
+
+.login-icon {
+  width: 64px;
+  height: 64px;
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 32px;
+  margin: 0 auto 24px;
+}
+
+.login-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.login-desc {
+  color: var(--text-secondary);
+  margin-bottom: 24px;
+}
+
+@media (max-width: 768px) {
+  .main-container {
+    flex-direction: column;
+  }
+  
+  .LeftBar {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid var(--border-color);
+    padding: 16px;
+  }
+  
+  .nav-title {
+    display: none;
+  }
+  
+  .LeftBar .nav-list {
+    display: flex;
+    gap: 8px;
+  }
+  
+  .content-area {
+    padding: 24px 16px;
+  }
+  
+  .TopBar {
+    padding: 12px 16px;
+  }
+  
+  .user-info {
+    display: none;
+  }
 }