cc/web-bak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore: 配置git忽略node_modules文件夹

Browse Source
This commit is contained in:
wdvipa
2026-02-16 13:19:15 +08:00
parent ce2551cf70
commit caf11b406a
2784 changed files with 145 additions and 164298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.css
View File

@@ -17,7 +17,7 @@
/* Header */
.app-header {
padding: 0 24px;
background: var(--md-surface-container);
background: var(--md-surface-container-lowest);
display: flex;
align-items: center;
justify-content: space-between;
@@ -77,7 +77,7 @@
.device-list-card {
background: var(--md-surface-container-lowest);
border-radius: var(--md-shape-md);
border-radius: var(--md-shape-lg);
padding: 20px;
box-shadow: var(--md-elevation-1);
flex: 1;
@@ -220,7 +220,7 @@
.text-input-bar input:focus {
border-color: var(--md-primary);
box-shadow: 0 0 0 2px rgba(91, 95, 199, 0.12);
box-shadow: 0 0 0 2px rgba(212, 160, 168, 0.15);
}
.text-input-bar input::placeholder {
@@ -242,7 +242,7 @@
.text-input-bar button:hover:not(:disabled) {
box-shadow: var(--md-elevation-1);
filter: brightness(1.08);
filter: brightness(1.05);
}
.text-input-bar button:disabled {
@@ -316,7 +316,7 @@
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.32);
background: rgba(0, 0, 0, 0.25);
z-index: 999;
animation: fadeIn 0.2s ease;
}

15
src/App.tsx
View File

@@ -9,17 +9,18 @@ import './App.css'
/**
* Ant Design theme token constants
* Soft pink + sky blue dopamine palette
*/
const PRIMARY_COLOR = '#5b5fc7'
const PRIMARY_COLOR = '#d4a0a8'
const BORDER_RADIUS = 12
const FONT_FAMILY = '"Google Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif'
const SURFACE_CONTAINER_LOWEST = '#ffffff'
const SURFACE_CONTAINER_LOW = '#f7f5fc'
const SURFACE_CONTAINER = '#f1eff6'
const OUTLINE_VARIANT = '#c7c5d0'
const ON_SURFACE = '#1b1b21'
const ON_SURFACE_VARIANT = '#46464f'
const SURFACE_CONTAINER_LOW = '#f8f6f7'
const SURFACE_CONTAINER = '#f3f1f2'
const OUTLINE_VARIANT = '#d6cfd2'
const ON_SURFACE = '#2c2a2b'
const ON_SURFACE_VARIANT = '#6b6568'
/**
* Main application component
@@ -44,7 +45,7 @@ function App() {
Table: {
headerBg: SURFACE_CONTAINER_LOW,
headerColor: ON_SURFACE_VARIANT,
rowHoverBg: '#e0e0ff',
rowHoverBg: '#fce4ec',
borderRadius: BORDER_RADIUS,
},
Card: {

87
src/components/APKManager.tsx
View File

@@ -568,16 +568,16 @@ const APKManager: React.FC<APKManagerProps> = ({ serverUrl }) => {
<div style={{
padding: '80px 20px',
textAlign: 'center',
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
background: 'var(--md-surface)',
minHeight: '60vh',
borderRadius: '16px',
color: 'white'
color: 'var(--md-on-surface)'
}}>
<Spin size="large" style={{ color: 'white' }} />
<Title level={3} style={{ marginTop: 24, color: 'white' }}>
🔄 加载 APK 信息中...
<Spin size="large" />
<Title level={3} style={{ marginTop: 24, color: 'var(--md-on-surface)' }}>
加载 APK 信息中...
</Title>
<Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: '16px' }}>
<Text style={{ color: 'var(--md-on-surface-variant)', fontSize: '16px' }}>
正在加载APK状态
</Text>
</div>
@@ -589,35 +589,36 @@ const APKManager: React.FC<APKManagerProps> = ({ serverUrl }) => {
padding: '24px',
width: '100%',
flex: 1,
background: 'linear-gradient(135deg, #f0f2f5 0%, #e8f2ff 100%)',
background: 'var(--md-surface)',
minHeight: '100vh',
display: 'flex',
flexDirection: 'column'
}}>
{/* 现代化页面头部 */}
{/* 页面头部 */}
<div style={{
marginBottom: 32,
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
background: 'var(--md-surface-container-lowest)',
padding: '32px',
borderRadius: '16px',
color: 'white'
color: 'var(--md-on-surface)',
border: '1px solid var(--md-outline-variant)',
boxShadow: 'var(--md-elevation-1)'
}}>
<Row justify="space-between" align="middle">
<Col span={16}>
<Space size="large" align="center">
<div style={{
background: 'rgba(255,255,255,0.2)',
background: 'var(--md-secondary-container)',
padding: '16px',
borderRadius: '12px',
backdropFilter: 'blur(10px)'
borderRadius: '12px'
}}>
<AndroidOutlined style={{ fontSize: '48px', color: 'white' }} />
<AndroidOutlined style={{ fontSize: '48px', color: 'var(--md-secondary)' }} />
</div>
<div>
<Title level={2} style={{ color: 'white', margin: 0 }}>
<Title level={2} style={{ color: 'var(--md-on-surface)', margin: 0 }}>
APK 构建中心
</Title>
<Paragraph style={{ color: 'rgba(255,255,255,0.8)', margin: 0, fontSize: '16px' }}>
<Paragraph style={{ color: 'var(--md-on-surface-variant)', margin: 0, fontSize: '16px' }}>
一键构建和部署 Android 远程控制客户端
</Paragraph>
</div>
@@ -630,11 +631,6 @@ const APKManager: React.FC<APKManagerProps> = ({ serverUrl }) => {
icon={<SyncOutlined />}
onClick={fetchAPKInfo}
loading={loading}
style={{
background: 'rgba(255,255,255,0.2)',
borderColor: 'rgba(255,255,255,0.3)',
color: 'white'
}}
>
刷新状态
</Button>
@@ -647,12 +643,12 @@ const APKManager: React.FC<APKManagerProps> = ({ serverUrl }) => {
{data?.apkInfo?.exists ? (
<Card
style={{
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
color: 'white',
border: 'none',
background: 'var(--md-surface-container-lowest)',
color: 'var(--md-on-surface)',
border: '1px solid var(--md-outline-variant)',
borderRadius: '20px',
marginBottom: 24,
boxShadow: '0 20px 40px rgba(102, 126, 234, 0.3)'
boxShadow: 'var(--md-elevation-2)'
}}
styles={{ body: { padding: '40px' } }}
>
@@ -660,7 +656,7 @@ const APKManager: React.FC<APKManagerProps> = ({ serverUrl }) => {
<Col xs={24} sm={24} md={6} lg={6} xl={6}>
<div style={{ textAlign: 'center', marginBottom: window.innerWidth < 768 ? '20px' : '0' }}>
<div style={{
background: 'linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%)',
background: 'var(--md-success-container)',
borderRadius: '50%',
width: '100px',
height: '100px',
@@ -668,47 +664,42 @@ const APKManager: React.FC<APKManagerProps> = ({ serverUrl }) => {
alignItems: 'center',
justifyContent: 'center',
margin: '0 auto',
boxShadow: '0 8px 32px rgba(0,0,0,0.1)',
backdropFilter: 'blur(10px)',
border: '1px solid rgba(255,255,255,0.2)'
boxShadow: 'var(--md-elevation-1)'
}}>
<AndroidOutlined style={{ fontSize: '48px', color: 'white' }} />
<AndroidOutlined style={{ fontSize: '48px', color: 'var(--md-success)' }} />
</div>
</div>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Title level={2} style={{ color: 'white', margin: 0, marginBottom: 20 }}>
🎉 APK 构建成功！
<Title level={2} style={{ color: 'var(--md-on-surface)', margin: 0, marginBottom: 20 }}>
APK 构建成功
</Title>
<Space direction="vertical" size={12}>
<div style={{
background: 'rgba(255,255,255,0.1)',
background: 'var(--md-surface-container-low)',
padding: '8px 16px',
borderRadius: '8px',
backdropFilter: 'blur(10px)'
borderRadius: '8px'
}}>
<Text style={{ color: 'white', fontSize: '16px', fontWeight: 500 }}>
<Text style={{ color: 'var(--md-on-surface)', fontSize: '16px', fontWeight: 500 }}>
<FileOutlined style={{ marginRight: 8 }} />
{data.apkInfo.filename}
</Text>
</div>
<div style={{
background: 'rgba(255,255,255,0.1)',
background: 'var(--md-surface-container-low)',
padding: '8px 16px',
borderRadius: '8px',
backdropFilter: 'blur(10px)'
borderRadius: '8px'
}}>
<Text style={{ color: 'white', fontSize: '16px', fontWeight: 500 }}>
📦 {data.apkInfo.size ? formatSize(data.apkInfo.size) : '未知大小'}
<Text style={{ color: 'var(--md-on-surface)', fontSize: '16px', fontWeight: 500 }}>
{data.apkInfo.size ? formatSize(data.apkInfo.size) : '未知大小'}
</Text>
</div>
<div style={{
background: 'rgba(255,255,255,0.1)',
background: 'var(--md-surface-container-low)',
padding: '8px 16px',
borderRadius: '8px',
backdropFilter: 'blur(10px)'
borderRadius: '8px'
}}>
<Text style={{ color: 'white', fontSize: '16px', fontWeight: 500 }}>
<Text style={{ color: 'var(--md-on-surface)', fontSize: '16px', fontWeight: 500 }}>
<ClockCircleOutlined style={{ marginRight: 8 }} />
{data.apkInfo.buildTime
? new Date(data.apkInfo.buildTime).toLocaleString()
@@ -726,16 +717,10 @@ const APKManager: React.FC<APKManagerProps> = ({ serverUrl }) => {
icon={<CloudDownloadOutlined />}
onClick={downloadAPK}
style={{
background: 'linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%)',
borderColor: 'rgba(255,255,255,0.3)',
height: '60px',
fontSize: '18px',
fontWeight: 600,
borderRadius: '12px',
backdropFilter: 'blur(10px)',
boxShadow: '0 8px 32px rgba(0,0,0,0.1)',
border: '1px solid rgba(255,255,255,0.2)',
color: 'white',
width: '100%'
}}
>

12
src/components/InstallPage.tsx
View File

@@ -150,10 +150,10 @@ const InstallPage: React.FC<InstallPageProps> = ({ onInstallComplete }) => {
}}>
*
</div>
<Title level={2} style={{ margin: 0, color: '#1a1a1a' }}>
<Title level={2} style={{ margin: 0, color: 'var(--md-on-surface)' }}>
远程控制系统
</Title>
<Text style={{ color: '#666', fontSize: '16px' }}>
<Text style={{ color: 'var(--md-on-surface-variant)', fontSize: '16px' }}>
系统初始化向导
</Text>
</div>
@@ -337,15 +337,15 @@ const InstallPage: React.FC<InstallPageProps> = ({ onInstallComplete }) => {
</Paragraph>
{lockFilePath && (
<div style={{
background: '#f6f6f6',
background: 'var(--md-surface-container-low)',
padding: '12px',
borderRadius: '6px',
marginTop: '16px',
textAlign: 'left'
}}>
<Text strong style={{ color: '#666' }}>重要提示：</Text>
<Text strong style={{ color: 'var(--md-on-surface-variant)' }}>重要提示：</Text>
<br />
<Text style={{ fontSize: '12px', color: '#666' }}>
<Text style={{ fontSize: '12px', color: 'var(--md-on-surface-variant)' }}>
系统已创建初始化锁文件，防止重复初始化。
</Text>
<br />
@@ -353,7 +353,7 @@ const InstallPage: React.FC<InstallPageProps> = ({ onInstallComplete }) => {
{lockFilePath}
</Text>
<br />
<Text style={{ fontSize: '12px', color: '#666' }}>
<Text style={{ fontSize: '12px', color: 'var(--md-on-surface-variant)' }}>
如需重新初始化，请先删除此文件。
</Text>
</div>

16
src/components/Layout/Header.tsx
View File

@@ -28,11 +28,11 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick, onConnectClick }) => {
const getConnectionStatusIcon = () => {
switch (connectionStatus) {
case 'connected':
return <WifiOutlined style={{ color: '#52c41a' }} />
return <WifiOutlined style={{ color: 'var(--md-success)' }} />
case 'connecting':
return <WifiOutlined style={{ color: '#faad14' }} />
return <WifiOutlined style={{ color: 'var(--md-warning)' }} />
default:
return <DisconnectOutlined style={{ color: '#ff4d4f' }} />
return <DisconnectOutlined style={{ color: 'var(--md-error)' }} />
}
}
@@ -64,9 +64,9 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick, onConnectClick }) => {
return (
<AntHeader style={{
background: '#fff',
background: 'var(--md-surface-container-lowest)',
padding: '0 24px',
borderBottom: '1px solid #f0f0f0',
borderBottom: '1px solid var(--md-outline-variant)',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
@@ -80,7 +80,7 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick, onConnectClick }) => {
/>
<div style={{ display: 'flex', alignItems: 'center' }}>
<MobileOutlined style={{ fontSize: '20px', marginRight: '8px', color: '#1890ff' }} />
<MobileOutlined style={{ fontSize: '20px', marginRight: '8px', color: 'var(--md-primary)' }} />
<span style={{ fontWeight: 'bold', fontSize: '18px' }}>
远程控制
</span>
@@ -106,7 +106,7 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick, onConnectClick }) => {
{getConnectionStatusText()}
</span>
{serverUrl && (
<span style={{ fontSize: '12px', color: '#666' }}>
<span style={{ fontSize: '12px', color: 'var(--md-on-surface-variant)' }}>
({new URL(serverUrl).hostname})
</span>
)}
@@ -129,7 +129,7 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick, onConnectClick }) => {
>
<Avatar
icon={<SettingOutlined />}
style={{ cursor: 'pointer', backgroundColor: '#1890ff' }}
style={{ cursor: 'pointer', backgroundColor: 'var(--md-primary)' }}
/>
</Dropdown>
</Space>

28
src/components/Layout/Sidebar.tsx
View File

@@ -30,11 +30,11 @@ const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
const getDeviceStatusIcon = (status: string) => {
switch (status) {
case 'online':
return <CheckCircleOutlined style={{ color: '#52c41a' }} />
return <CheckCircleOutlined style={{ color: 'var(--md-success)' }} />
case 'busy':
return <ExclamationCircleOutlined style={{ color: '#faad14' }} />
return <ExclamationCircleOutlined style={{ color: 'var(--md-warning)' }} />
default:
return <CloseCircleOutlined style={{ color: '#ff4d4f' }} />
return <CloseCircleOutlined style={{ color: 'var(--md-error)' }} />
}
}
@@ -62,8 +62,8 @@ const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
width={80}
collapsed={true}
style={{
background: '#fff',
borderRight: '1px solid #f0f0f0'
background: 'var(--md-surface-container-lowest)',
borderRight: '1px solid var(--md-outline-variant)'
}}
>
<div style={{ padding: '16px 8px' }}>
@@ -79,8 +79,8 @@ const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
<Sider
width={300}
style={{
background: '#fff',
borderRight: '1px solid #f0f0f0'
background: 'var(--md-surface-container-lowest)',
borderRight: '1px solid var(--md-outline-variant)'
}}
>
<div style={{ padding: '16px' }}>
@@ -116,22 +116,22 @@ const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
style={{
padding: '12px 16px',
cursor: 'pointer',
backgroundColor: selectedDeviceId === device.id ? '#e6f7ff' : 'transparent',
borderLeft: selectedDeviceId === device.id ? '3px solid #1890ff' : '3px solid transparent'
backgroundColor: selectedDeviceId === device.id ? 'var(--md-primary-container)' : 'transparent',
borderLeft: selectedDeviceId === device.id ? '3px solid var(--md-primary)' : '3px solid transparent'
}}
onClick={() => handleDeviceSelect(device.id)}
>
<List.Item.Meta
avatar={
<div style={{ position: 'relative' }}>
<AndroidOutlined style={{ fontSize: '32px', color: '#1890ff' }} />
<AndroidOutlined style={{ fontSize: '32px', color: 'var(--md-secondary)' }} />
<div style={{
position: 'absolute',
bottom: -2,
right: -2,
background: '#fff',
background: 'var(--md-surface-container-lowest)',
borderRadius: '50%',
border: '1px solid #f0f0f0'
border: '1px solid var(--md-outline-variant)'
}}>
{getDeviceStatusIcon(device.status)}
</div>
@@ -140,13 +140,13 @@ const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
title={
<div style={{
fontWeight: selectedDeviceId === device.id ? 'bold' : 'normal',
color: selectedDeviceId === device.id ? '#1890ff' : 'inherit'
color: selectedDeviceId === device.id ? 'var(--md-primary)' : 'inherit'
}}>
{device.name}
</div>
}
description={
<div style={{ fontSize: '12px', color: '#666' }}>
<div style={{ fontSize: '12px', color: 'var(--md-on-surface-variant)' }}>
<div>{device.model}</div>
<div>Android {device.osVersion}</div>
<div>{device.screenWidth}×{device.screenHeight}</div>

48
src/components/RemoteControlApp.tsx
View File

@@ -556,7 +556,7 @@ const RemoteControlApp: React.FC = () => {
content: (
<div>
<p>设备 <strong>{device.name}</strong> 当前处于离线状态。</p>
<div style={{ marginTop: '16px', padding: '12px', background: '#f6f6f6', borderRadius: '6px' }}>
<div style={{ marginTop: '16px', padding: '12px', background: 'var(--md-surface-container-low)', borderRadius: '6px' }}>
<div><strong>设备信息：</strong></div>
<div>• 型号：{device.model}</div>
<div>• 系统：Android {device.osVersion}</div>
@@ -564,7 +564,7 @@ const RemoteControlApp: React.FC = () => {
<div>• 公网IP：{device.publicIP || '未知'}</div>
<div>• 最后在线：{formatLastSeen(device.lastSeen)}</div>
</div>
<div style={{ marginTop: '12px', color: '#666' }}>
<div style={{ marginTop: '12px', color: 'var(--md-on-surface-variant)' }}>
<p><strong>如何重新连接：</strong></p>
<p>1. 确保设备已连接到网络</p>
<p>2. 打开设备上的远程控制APP</p>
@@ -597,11 +597,11 @@ const RemoteControlApp: React.FC = () => {
<div style={{
marginTop: '16px',
padding: '16px',
background: '#fff7e6',
background: 'var(--md-warning-container)',
borderRadius: '8px',
border: '1px solid #ffd591'
border: '1px solid var(--md-outline-variant)'
}}>
<div style={{ marginBottom: 12, fontWeight: 'bold', color: '#d46b08' }}>
<div style={{ marginBottom: 12, fontWeight: 'bold', color: 'var(--md-warning)' }}>
控制者详细信息：
</div>
<div style={{ fontSize: '14px', lineHeight: '1.8' }}>
@@ -616,7 +616,7 @@ const RemoteControlApp: React.FC = () => {
<div style={{
marginTop: 4,
padding: '8px',
background: '#fff',
background: 'var(--md-surface-container-lowest)',
borderRadius: '4px',
fontSize: '12px',
wordBreak: 'break-all'
@@ -987,8 +987,8 @@ const RemoteControlApp: React.FC = () => {
/>
) : (
<div className="device-empty-state">
<MobileOutlined style={{ fontSize: '56px', marginBottom: '16px', color: '#d9d9d9' }} />
<div style={{ fontSize: '16px', marginBottom: '8px', color: '#595959' }}>未找到匹配的设备</div>
<MobileOutlined style={{ fontSize: '56px', marginBottom: '16px', color: 'var(--md-outline-variant)' }} />
<div style={{ fontSize: '16px', marginBottom: '8px', color: 'var(--md-on-surface-variant)' }}>未找到匹配的设备</div>
<div style={{ fontSize: '13px', marginBottom: '20px' }}>
请调整筛选条件，或清除筛选后重试
</div>
@@ -1009,7 +1009,7 @@ const RemoteControlApp: React.FC = () => {
padding: 0,
flex: 1,
overflow: 'auto',
background: '#f0f2f5',
background: 'var(--md-surface)',
display: 'flex',
flexDirection: 'column'
}}>
@@ -1032,15 +1032,15 @@ const RemoteControlApp: React.FC = () => {
<div style={{
padding: '24px',
flex: 1,
background: '#fff',
background: 'var(--md-surface-container-lowest)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
gap: '12px'
}}>
<SettingOutlined style={{ fontSize: '56px', color: '#d9d9d9' }} />
<div style={{ fontSize: '16px', color: '#8c8c8c' }}>设置功能开发中...</div>
<SettingOutlined style={{ fontSize: '56px', color: 'var(--md-outline-variant)' }} />
<div style={{ fontSize: '16px', color: 'var(--md-on-surface-variant)' }}>设置功能开发中...</div>
</div>
)
default:
@@ -1192,7 +1192,7 @@ const RemoteControlApp: React.FC = () => {
</div>
{/* 文本输入 */}
<div className="text-input-bar">
<span style={{ color: '#8c8c8c', fontSize: '12px', whiteSpace: 'nowrap' }}>输入:</span>
<span style={{ color: 'var(--md-on-surface-variant)', fontSize: '12px', whiteSpace: 'nowrap' }}>输入:</span>
<input
type="text"
placeholder={operationEnabled ? "输入文本内容" : "操作已禁用"}
@@ -1225,7 +1225,7 @@ const RemoteControlApp: React.FC = () => {
const current = connectedDevices.find(d => d.id === selectedDeviceForModal.id)
return !current?.screenReader?.enabled ? (
<div className="text-input-bar">
<span style={{ color: '#8c8c8c', fontSize: '12px', whiteSpace: 'nowrap' }}>输入:</span>
<span style={{ color: 'var(--md-on-surface-variant)', fontSize: '12px', whiteSpace: 'nowrap' }}>输入:</span>
<input
type="text"
placeholder={operationEnabled ? "输入文本内容" : "操作已禁用"}
@@ -1350,11 +1350,11 @@ const RemoteControlApp: React.FC = () => {
{
key: 'user-info',
label: (
<div style={{ padding: '8px 0', borderBottom: '1px solid #f0f0f0' }}>
<div style={{ fontWeight: 500, color: '#262626' }}>
<div style={{ padding: '8px 0', borderBottom: '1px solid var(--md-outline-variant)' }}>
<div style={{ fontWeight: 500, color: 'var(--md-on-surface)' }}>
{currentUser?.username || 'Unknown'}
</div>
<div style={{ fontSize: '12px', color: '#8c8c8c' }}>
<div style={{ fontSize: '12px', color: 'var(--md-on-surface-variant)' }}>
管理员
</div>
</div>
@@ -1436,11 +1436,11 @@ const RemoteControlApp: React.FC = () => {
>
<div style={{
padding: '16px',
borderBottom: '1px solid #f0f0f0',
borderBottom: '1px solid var(--md-outline-variant)',
textAlign: 'center'
}}>
{!menuCollapsed && (
<div style={{ color: '#666', fontSize: '14px' }}>
<div style={{ color: 'var(--md-on-surface-variant)', fontSize: '14px' }}>
功能导航
</div>
)}
@@ -1459,7 +1459,7 @@ const RemoteControlApp: React.FC = () => {
</Sider>
{/* 主内容区域 */}
<Layout style={{ background: '#f0f2f5', flex: 1 }}>
<Layout style={{ background: 'var(--md-surface)', flex: 1 }}>
<Content className="app-content">
{renderContent()}
</Content>
@@ -1508,7 +1508,7 @@ const RemoteControlApp: React.FC = () => {
destroyOnHidden
>
{selectedDeviceForModal && (
<div style={{ height: '100%', display: 'flex', flexDirection: 'row', background: '#fff' }}>
<div style={{ height: '100%', display: 'flex', flexDirection: 'row', background: 'var(--md-surface-container-lowest)' }}>
{/* 左侧屏幕区域 */}
<div className="control-screen-area" style={{ width: '55%', maxWidth: '55%' }}>
{/* 工具条 */}
@@ -1572,7 +1572,7 @@ const RemoteControlApp: React.FC = () => {
<ScreenReader deviceId={selectedDeviceForModal.id} maxHeight={undefined} />
</div>
<div className="text-input-bar">
<span style={{ color: '#8c8c8c', fontSize: '12px', whiteSpace: 'nowrap' }}>输入:</span>
<span style={{ color: 'var(--md-on-surface-variant)', fontSize: '12px', whiteSpace: 'nowrap' }}>输入:</span>
<input type="text" placeholder={operationEnabled ? "输入文本内容" : "操作已禁用"} value={textInput}
onChange={(e) => setTextInput(e.target.value)}
onKeyPress={(e) => { if (e.key === 'Enter') handleTextInput() }}
@@ -1595,7 +1595,7 @@ const RemoteControlApp: React.FC = () => {
const current = connectedDevices.find(d => d.id === selectedDeviceForModal.id)
return !current?.screenReader?.enabled ? (
<div className="text-input-bar">
<span style={{ color: '#8c8c8c', fontSize: '12px', whiteSpace: 'nowrap' }}>输入:</span>
<span style={{ color: 'var(--md-on-surface-variant)', fontSize: '12px', whiteSpace: 'nowrap' }}>输入:</span>
<input type="text" placeholder={operationEnabled ? "输入文本内容" : "操作已禁用"} value={textInput}
onChange={(e) => setTextInput(e.target.value)}
onKeyPress={(e) => { if (e.key === 'Enter') handleTextInput() }}
@@ -1665,7 +1665,7 @@ const RemoteControlApp: React.FC = () => {
width={500}
>
<div style={{ padding: '16px 0' }}>
<p style={{ marginBottom: 16, color: '#666' }}>
<p style={{ marginBottom: 16, color: 'var(--md-on-surface-variant)' }}>
此功能将向设备 <strong>{transferringDevice?.name}</strong> 发送修改服务器地址的指令，设备将重新连接到新的服务器。
</p>
<Input

88
src/index.css
View File

@@ -11,55 +11,55 @@ html, body {
}
:root {
/* Primary */
--md-primary: #5b5fc7;
/* Primary - soft pink */
--md-primary: #d4a0a8;
--md-on-primary: #ffffff;
--md-primary-container: #e0e0ff;
--md-on-primary-container: #161a72;
/* Secondary */
--md-secondary: #5c5d72;
--md-primary-container: #fce4ec;
--md-on-primary-container: #5d3a3e;
/* Secondary - sky blue #66ccff */
--md-secondary: #7fb8cc;
--md-on-secondary: #ffffff;
--md-secondary-container: #e1e0f9;
--md-on-secondary-container: #191a2c;
/* Tertiary */
--md-tertiary: #78536b;
--md-secondary-container: #e0f2f8;
--md-on-secondary-container: #2a5a6a;
/* Tertiary - warm beige */
--md-tertiary: #c4b5a5;
--md-on-tertiary: #ffffff;
--md-tertiary-container: #ffd8ee;
--md-on-tertiary-container: #2e1126;
/* Error */
--md-error: #ba1a1a;
--md-tertiary-container: #f0ebe4;
--md-on-tertiary-container: #5a4e42;
/* Error - muted rose */
--md-error: #c06060;
--md-on-error: #ffffff;
--md-error-container: #ffdad6;
--md-on-error-container: #410002;
/* Surface */
--md-surface: #fdfbff;
--md-surface-dim: #dbd9e0;
--md-surface-bright: #fdfbff;
--md-error-container: #fde0e0;
--md-on-error-container: #5c1a1a;
/* Surface - near white */
--md-surface: #fafafa;
--md-surface-dim: #e8e4e6;
--md-surface-bright: #fefefe;
--md-surface-container-lowest: #ffffff;
--md-surface-container-low: #f7f5fc;
--md-surface-container: #f1eff6;
--md-surface-container-high: #ebe9f0;
--md-surface-container-highest: #e5e3ea;
--md-on-surface: #1b1b21;
--md-on-surface-variant: #46464f;
--md-surface-container-low: #f8f6f7;
--md-surface-container: #f3f1f2;
--md-surface-container-high: #edebec;
--md-surface-container-highest: #e7e5e6;
--md-on-surface: #2c2a2b;
--md-on-surface-variant: #6b6568;
/* Outline */
--md-outline: #777680;
--md-outline-variant: #c7c5d0;
--md-outline: #9e9598;
--md-outline-variant: #d6cfd2;
/* Inverse */
--md-inverse-surface: #303036;
--md-inverse-on-surface: #f3f0f7;
--md-inverse-primary: #bec2ff;
--md-inverse-surface: #3a3638;
--md-inverse-on-surface: #f5f0f2;
--md-inverse-primary: #f0c4ca;
/* Shadow */
--md-shadow: rgba(0, 0, 0, 0.08);
--md-shadow-elevated: rgba(0, 0, 0, 0.12);
/* Success */
--md-success: #386a20;
--md-success-container: #b8f397;
--md-on-success-container: #072100;
/* Warning */
--md-warning: #7d5700;
--md-warning-container: #ffdeab;
--md-on-warning-container: #271900;
--md-shadow: rgba(0, 0, 0, 0.06);
--md-shadow-elevated: rgba(0, 0, 0, 0.10);
/* Success - muted sage */
--md-success: #7ba87b;
--md-success-container: #e6f2e6;
--md-on-success-container: #1e3a1e;
/* Warning - muted amber */
--md-warning: #c4a55a;
--md-warning-container: #faf0d6;
--md-on-warning-container: #4a3a10;
/* Shape */
--md-shape-xs: 4px;
--md-shape-sm: 8px;
@@ -68,9 +68,9 @@ html, body {
--md-shape-xl: 28px;
--md-shape-full: 9999px;
/* Elevation */
--md-elevation-1: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.1);
--md-elevation-2: 0 1px 2px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.1);
--md-elevation-3: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.1);
--md-elevation-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
--md-elevation-2: 0 1px 2px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.08);
--md-elevation-3: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08);
font-family: 'Google Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans SC', sans-serif;