feat: 新增设置页面及其样式,采用高级玻璃拟态设计

This commit is contained in:
2026-02-02 16:18:49 +08:00
parent 5dafefa1ab
commit 7da1f57c13
2 changed files with 105 additions and 5 deletions

View File

@@ -723,9 +723,75 @@
transition: all 0.2s ease;
}
.settings-text-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-lighter);
background: rgba(255, 255, 255, 0.9);
/* Version History */
.version-history {
margin-top: var(--spacing-md);
}
.version-item {
position: relative;
padding-left: var(--spacing-xl);
padding-bottom: var(--spacing-xl);
border-left: 2px solid var(--glass-border);
}
.version-item:last-child {
border-left-color: transparent;
}
.version-item::before {
content: '';
position: absolute;
left: -6px;
top: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-primary);
border: 2px solid white;
box-shadow: 0 0 0 2px var(--color-primary-lighter);
}
.version-header {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.version-number {
font-weight: 700;
color: var(--color-text);
font-size: var(--font-base);
}
.version-date {
font-size: var(--font-xs);
color: var(--color-text-secondary);
background: var(--color-bg-tertiary);
padding: 2px 8px;
border-radius: var(--radius-full);
}
.version-changes {
list-style: none;
padding: 0;
margin: 0;
}
.version-changes li {
display: flex;
align-items: flex-start;
gap: var(--spacing-xs);
font-size: 0.9rem;
color: var(--color-text-secondary);
margin-bottom: 4px;
line-height: 1.5;
}
.version-changes li::before {
content: '•';
color: var(--color-primary);
font-weight: bold;
}

View File

@@ -24,6 +24,21 @@ interface GeneralSettings {
firstDayOfWeek: number;
}
const CHANGELOG = [
{
version: '1.0.0',
date: '2026-02-02',
changes: [
'应用正式发布',
'支持多账户、多账本管理',
'集成 AI 智能记账助手',
'全新玻璃拟态 UI 设计',
'支持暗色模式与自定义主题色',
'提供详细的财务健康评分与建议'
]
}
];
/**
* Settings Page Component
* Application settings and preferences
@@ -548,6 +563,25 @@ function Settings() {
</div>
</div>
<div className="about-info">
<h4></h4>
<div className="version-history">
{CHANGELOG.map((log, index) => (
<div key={index} className="version-item">
<div className="version-header">
<span className="version-number">v{log.version}</span>
<span className="version-date">{log.date}</span>
</div>
<ul className="version-changes">
{log.changes.map((change, i) => (
<li key={i}>{change}</li>
))}
</ul>
</div>
))}
</div>
</div>
<div className="about-info">
<h4></h4>
<dl className="system-info">