cloudy2333/account
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature:界面美化

Browse Source
This commit is contained in:
starlight
2026-03-26 22:18:35 +08:00
parent 2b775e1018
commit 8950188921
5 changed files with 622 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package-lock.json generated
View File

@@ -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",

78
src/App.vue
View File

@@ -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">
<div class="LeftBar">
<RouterLink :to="{name: 'profile'}">
<button>个人资料</button>
</RouterLink>
<RouterLink :to="{name: 'passkey'}">
<button>通行密钥</button>
</RouterLink>
</div>
<!-- <Account :UserName="userName" :Email="email" /> -->
<RouterView class="RouterView" :UserName="userName" :Email="email"/>
<span class="Notice-icon">⚠️</span>
<span>提示：修改密码请登出后使用忘记密码功能</span>
</div>
</template>
<div v-if="isLogin" class="main-container">
<div class="LeftBar">
<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>
</div>
</template>

124
src/components/Account.vue
View File

@@ -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>
</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>

92
src/components/PassKey.vue
View File

@@ -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>
</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>

392
src/style.css
View File

@@ -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;
}
}