feat: 新增设置页面及其样式,采用高级玻璃拟态设计
This commit is contained in:
@@ -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;
|
||||
}
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user