style: web-bak页面设计优化,采用浅色设计语言

- index.css: 添加CSS自定义属性设计系统色彩令牌
- App.css: 所有组件样式更新为CSS自定义属性
- App.tsx: 主题配置更新,通知位置改为右上角
- LoginPage.tsx: 重新设计登录页面
- RemoteControlApp.tsx: 移除所有emoji,替换硬编码颜色
- AuthGuard.tsx: 移除emoji,替换渐变背景
- InstallPage.tsx: 移除emoji,替换硬编码颜色
- DeviceFilter.tsx: 替换硬编码颜色
- DeviceInfoCard.tsx: 替换硬编码颜色
- GalleryView.tsx: 移除emoji,替换硬编码颜色
- ScreenReader.tsx: 移除所有emoji,替换注释为英文
This commit is contained in:
wdvipa
2026-02-15 15:28:48 +08:00
parent f91c6dc2eb
commit 115b15c0fc
17 changed files with 833 additions and 3441 deletions

View File

@@ -117,7 +117,7 @@ const DeviceFilterComponent: React.FC<DeviceFilterProps> = ({ onFilterChange, st
fontWeight: 500,
color: '#262626'
}}>
<FilterOutlined style={{ color: '#1890ff' }} />
<FilterOutlined style={{ color: 'var(--md-primary)' }} />
<span style={{ fontSize: '12px', color: '#666' }}>
({getFilteredCount()})

View File

@@ -57,13 +57,13 @@ export const DeviceInfoCard: React.FC<DeviceInfoCardProps> = ({ device }) => {
<div><strong>:</strong> {device?.model}</div>
<div><strong>:</strong> {device?.systemVersionName ? `${device.systemVersionName} (${device.osVersion})` : `Android ${device?.osVersion ?? ''}`}</div>
{device?.romType && device.romType !== '原生Android' && (
<div><strong>ROM:</strong> <span style={{ color: '#1890ff' }}>{device.romType}</span></div>
<div><strong>ROM:</strong> <span style={{ color: 'var(--md-primary)' }}>{device.romType}</span></div>
)}
{device?.romVersion && device.romVersion !== '未知版本' && (
<div><strong>ROM版本:</strong> <span style={{ color: '#52c41a' }}>{device.romVersion}</span></div>
<div><strong>ROM版本:</strong> <span style={{ color: 'var(--md-success)' }}>{device.romVersion}</span></div>
)}
{device?.osBuildVersion && (
<div><strong>:</strong> <span style={{ color: '#722ed1' }}>{device.osBuildVersion}</span></div>
<div><strong>:</strong> <span style={{ color: 'var(--md-tertiary)' }}>{device.osBuildVersion}</span></div>
)}
<div><strong>:</strong> {device?.screenWidth}×{device?.screenHeight}</div>
<div><strong>IP:</strong> {device?.publicIP || '未知'}</div>