shumengya/cwd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(login): 更新登录页面UI设计并添加背景图

Browse Source 
- 重新设计登录页面布局，增加右侧背景图区域
- 调整配色方案为深色主题，使用硬编码颜色值替换CSS变量
- 优化响应式设计，在移动设备上隐藏背景图
- 添加密码显示/隐藏切换按钮的图标组件
- 改进表单元素的视觉样式和交互效果
This commit is contained in:
anghunk
2026-02-04 16:55:17 +08:00
parent 287097ce76
commit 87cd6fc39d
3 changed files with 96 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
cwd-admin/src/views/LoginView/index.vue
View File

@@ -1,47 +1,55 @@
<template>
<div class="login-page">
<div class="login-card">
<img class="login-icon" src="https://cwd.js.org/icon.png" alt="icon" />
<div class="login-subtitle">
<h1 class="login-title">CWD</h1>
- 简洁的自托管评论系统管理面板
</div>
<form class="login-form" @submit.prevent="handleSubmit">
<div class="form-item">
<label class="form-label">API 地址</label>
<input v-model="apiBaseUrl" class="form-input" type="text" />
<div class="login-container">
<div class="login-card">
<img class="login-icon" src="https://cwd.js.org/icon.png" alt="icon" />
<div class="login-subtitle">
<h1 class="login-title">CWD</h1>
- 简洁的自托管评论系统管理面板
</div>
<div class="form-item">
<label class="form-label">管理员账号</label>
<input v-model="name" class="form-input" type="text" autocomplete="username" />
</div>
<div class="form-item">
<label class="form-label">密码</label>
<div class="form-input-wrapper">
<input
v-model="password"
class="form-input"
:type="showPassword ? 'text' : 'password'"
autocomplete="current-password"
/>
<button
type="button"
class="password-toggle"
:aria-label="showPassword ? '隐藏密码' : '显示密码'"
@click="showPassword = !showPassword"
>
<PhEye v-if="!showPassword" :size="16" />
<PhEyeSlash v-else :size="16" />
</button>
<form class="login-form" @submit.prevent="handleSubmit">
<div class="form-item">
<label class="form-label">API 地址</label>
<input v-model="apiBaseUrl" class="form-input" type="text" />
</div>
</div>
<div v-if="error" class="form-error">{{ error }}</div>
<button class="form-button" type="submit" :disabled="submitting">
<span v-if="submitting">登录中...</span>
<span v-else>登录</span>
</button>
</form>
<div class="form-item">
<label class="form-label">管理员账号</label>
<input
v-model="name"
class="form-input"
type="text"
autocomplete="username"
/>
</div>
<div class="form-item">
<label class="form-label">密码</label>
<div class="form-input-wrapper">
<input
v-model="password"
class="form-input"
:type="showPassword ? 'text' : 'password'"
autocomplete="current-password"
/>
<button
type="button"
class="password-toggle"
:aria-label="showPassword ? '隐藏密码' : '显示密码'"
@click="showPassword = !showPassword"
>
<PhEye v-if="!showPassword" :size="16" />
<PhEyeSlash v-else :size="16" />
</button>
</div>
</div>
<div v-if="error" class="form-error">{{ error }}</div>
<button class="form-button" type="submit" :disabled="submitting">
<span v-if="submitting">登录中...</span>
<span v-else>登录</span>
</button>
</form>
</div>
</div>
<div class="login-bg"></div>
</div>
</template>