(rebase) avoid dist and binary
This commit is contained in:
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
node_modules/
|
||||
dist/
|
||||
public/
|
||||
28
eslint.config.js
Normal file
28
eslint.config.js
Normal file
@@ -0,0 +1,28 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
|
||||
export default tseslint.config(
|
||||
{ ignores: ['dist'] },
|
||||
{
|
||||
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
plugins: {
|
||||
'react-hooks': reactHooks,
|
||||
'react-refresh': reactRefresh,
|
||||
},
|
||||
rules: {
|
||||
...reactHooks.configs.recommended.rules,
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
},
|
||||
)
|
||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Hi远程控制 - Web客户端</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
34
package.json
Normal file
34
package.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "web-client",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "^2.8.2",
|
||||
"antd": "^5.26.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-redux": "^9.2.0",
|
||||
"socket.io-client": "^4.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.25.0",
|
||||
"@types/react": "^19.1.2",
|
||||
"@types/react-dom": "^19.1.2",
|
||||
"@vitejs/plugin-react": "^4.4.1",
|
||||
"eslint": "^9.25.0",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.19",
|
||||
"globals": "^16.0.0",
|
||||
"terser": "^5.43.1",
|
||||
"typescript": "~5.8.3",
|
||||
"typescript-eslint": "^8.30.1",
|
||||
"vite": "^6.3.5"
|
||||
}
|
||||
}
|
||||
335
src/App.css
Normal file
335
src/App.css
Normal file
@@ -0,0 +1,335 @@
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 主布局自适应 */
|
||||
.app-layout {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Header 响应式 */
|
||||
.app-header {
|
||||
padding: 0 24px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
flex-shrink: 0;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-header {
|
||||
padding: 0 12px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 侧边栏 */
|
||||
.app-sider {
|
||||
background: #fff !important;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
box-shadow: 2px 0 8px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.app-sider .ant-menu {
|
||||
border-right: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.app-content {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 设备列表页 */
|
||||
.device-list-page {
|
||||
padding: 20px;
|
||||
background: #f0f2f5;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.device-list-page {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.device-list-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* 筛选栏响应式 */
|
||||
.device-filter-bar {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.device-filter-bar .ant-form-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.device-filter-bar .ant-form-inline .ant-form-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.device-empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
/* 独立控制页面 - 全屏自适应 */
|
||||
.standalone-control-page {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: #f0f2f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 控制页左侧屏幕区域 */
|
||||
.control-screen-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
background: #fff;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 工具栏 */
|
||||
.control-toolbar {
|
||||
padding: 6px 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.control-toolbar .ant-btn {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.control-toolbar {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.control-toolbar .ant-btn {
|
||||
font-size: 11px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 屏幕+阅读器水平布局 */
|
||||
.screen-reader-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.screen-reader-panel {
|
||||
width: 50%;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #fafafa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.device-screen-panel {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 文本输入区域 */
|
||||
.text-input-bar {
|
||||
height: 44px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
background: #fff;
|
||||
padding: 6px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.text-input-bar input {
|
||||
flex: 1;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.text-input-bar input:focus {
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 0 0 2px rgba(24,144,255,0.1);
|
||||
}
|
||||
|
||||
.text-input-bar button {
|
||||
height: 30px;
|
||||
padding: 0 14px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: #1890ff;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.text-input-bar button:hover:not(:disabled) {
|
||||
background: #40a9ff;
|
||||
}
|
||||
|
||||
.text-input-bar button:disabled {
|
||||
background: #f5f5f5;
|
||||
color: #bfbfbf;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 系统按键区域 */
|
||||
.system-keys-bar {
|
||||
padding: 8px 12px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
background: #fff;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.system-keys-bar .ant-btn {
|
||||
min-width: 72px;
|
||||
height: 34px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 右侧控制面板 */
|
||||
.control-panel-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.control-panel-header {
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.control-panel-body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 底部状态栏 */
|
||||
.screen-reader-status-bar {
|
||||
padding: 3px 12px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
font-size: 11px;
|
||||
color: #8c8c8c;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 移动端遮罩 */
|
||||
.mobile-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0,0,0,0.45);
|
||||
z-index: 999;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
/* 移动端侧边栏 */
|
||||
@media (max-width: 768px) {
|
||||
.ant-layout-sider {
|
||||
position: fixed !important;
|
||||
height: 100vh !important;
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
|
||||
.ant-layout-header {
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 表格自适应 */
|
||||
.ant-table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.ant-table {
|
||||
font-size: 13px;
|
||||
}
|
||||
56
src/App.tsx
Normal file
56
src/App.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
// React 17+ 使用新的JSX转换，无需显式导入React
|
||||
import { Provider } from 'react-redux'
|
||||
import { ConfigProvider, App as AntdApp } from 'antd'
|
||||
import zhCN from 'antd/locale/zh_CN'
|
||||
import { store } from './store/store'
|
||||
import RemoteControlApp from './components/RemoteControlApp'
|
||||
import AuthGuard from './components/AuthGuard'
|
||||
import './App.css'
|
||||
|
||||
/**
|
||||
* 主应用组件
|
||||
*/
|
||||
function App() {
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<ConfigProvider
|
||||
locale={zhCN}
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#667eea',
|
||||
borderRadius: 8,
|
||||
colorBgContainer: '#ffffff',
|
||||
colorBgLayout: '#f0f2f5',
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
||||
},
|
||||
components: {
|
||||
Table: {
|
||||
headerBg: '#fafafa',
|
||||
headerColor: '#595959',
|
||||
rowHoverBg: '#f0f5ff',
|
||||
borderRadius: 8,
|
||||
},
|
||||
Card: {
|
||||
borderRadiusLG: 12,
|
||||
},
|
||||
Button: {
|
||||
borderRadius: 6,
|
||||
},
|
||||
Menu: {
|
||||
itemBorderRadius: 8,
|
||||
itemMarginInline: 8,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AntdApp>
|
||||
<AuthGuard>
|
||||
<RemoteControlApp />
|
||||
</AuthGuard>
|
||||
</AntdApp>
|
||||
</ConfigProvider>
|
||||
</Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
1650
src/components/APKManager.tsx
Normal file
1650
src/components/APKManager.tsx
Normal file
File diff suppressed because it is too large
Load Diff
285
src/components/APKShareManager.tsx
Normal file
285
src/components/APKShareManager.tsx
Normal file
@@ -0,0 +1,285 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import {
|
||||
Card,
|
||||
Button,
|
||||
Table,
|
||||
Typography,
|
||||
Space,
|
||||
message,
|
||||
Tag,
|
||||
Modal,
|
||||
QRCode,
|
||||
Tooltip,
|
||||
Alert,
|
||||
Row,
|
||||
Col
|
||||
} from 'antd'
|
||||
import {
|
||||
LinkOutlined,
|
||||
CopyOutlined,
|
||||
QrcodeOutlined,
|
||||
CheckCircleOutlined,
|
||||
ClockCircleOutlined
|
||||
} from '@ant-design/icons'
|
||||
import type { ColumnsType } from 'antd/es/table'
|
||||
import apiClient from '../services/apiClient'
|
||||
|
||||
const { Text, Paragraph } = Typography
|
||||
|
||||
interface ShareInfo {
|
||||
sessionId: string
|
||||
filename: string
|
||||
shareUrl: string
|
||||
createdAt: string
|
||||
expiresAt: string
|
||||
isExpired: boolean
|
||||
}
|
||||
|
||||
interface APKShareManagerProps {
|
||||
serverUrl: string
|
||||
onShareUrlGenerated?: (shareUrl: string) => void
|
||||
}
|
||||
|
||||
const APKShareManager: React.FC<APKShareManagerProps> = ({
|
||||
serverUrl,
|
||||
onShareUrlGenerated
|
||||
}) => {
|
||||
const [shares, setShares] = useState<ShareInfo[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [qrModalVisible, setQrModalVisible] = useState(false)
|
||||
const [currentShareUrl, setCurrentShareUrl] = useState('')
|
||||
const [currentFilename, setCurrentFilename] = useState('')
|
||||
|
||||
// 获取分享链接列表
|
||||
const fetchShares = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const result = await apiClient.get<any>('/api/apk/shares')
|
||||
|
||||
if (result.success) {
|
||||
setShares(result.shares || [])
|
||||
|
||||
// 如果有新的分享链接，回调通知
|
||||
if (result.shares && result.shares.length > 0 && onShareUrlGenerated) {
|
||||
const latestShare = result.shares[result.shares.length - 1]
|
||||
onShareUrlGenerated(latestShare.shareUrl)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取分享链接失败:', error)
|
||||
message.error('获取分享链接失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 复制链接
|
||||
const copyShareUrl = async (shareUrl: string) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(shareUrl)
|
||||
message.success('分享链接已复制到剪贴板')
|
||||
} catch (error) {
|
||||
message.error('复制失败，请手动复制')
|
||||
}
|
||||
}
|
||||
|
||||
// 显示二维码
|
||||
const showQRCode = (shareUrl: string, filename: string) => {
|
||||
setCurrentShareUrl(shareUrl)
|
||||
setCurrentFilename(filename)
|
||||
setQrModalVisible(true)
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (timeStr: string) => {
|
||||
const date = new Date(timeStr)
|
||||
return date.toLocaleString('zh-CN')
|
||||
}
|
||||
|
||||
// 计算剩余时间
|
||||
const getRemainingTime = (expiresAt: string) => {
|
||||
const now = Date.now()
|
||||
const expiry = new Date(expiresAt).getTime()
|
||||
const remaining = expiry - now
|
||||
|
||||
if (remaining <= 0) {
|
||||
return '已过期'
|
||||
}
|
||||
|
||||
const minutes = Math.floor(remaining / 60000)
|
||||
const seconds = Math.floor((remaining % 60000) / 1000)
|
||||
|
||||
if (minutes > 0) {
|
||||
return `${minutes}分${seconds}秒`
|
||||
} else {
|
||||
return `${seconds}秒`
|
||||
}
|
||||
}
|
||||
|
||||
// 表格列定义
|
||||
const columns: ColumnsType<ShareInfo> = [
|
||||
{
|
||||
title: '文件名',
|
||||
dataIndex: 'filename',
|
||||
key: 'filename',
|
||||
render: (filename) => (
|
||||
<Space>
|
||||
<Text strong>{filename}</Text>
|
||||
</Space>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
render: (_, record) => (
|
||||
<Tag
|
||||
icon={record.isExpired ? <ClockCircleOutlined /> : <CheckCircleOutlined />}
|
||||
color={record.isExpired ? 'red' : 'green'}
|
||||
>
|
||||
{record.isExpired ? '已过期' : '活跃'}
|
||||
</Tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '剩余时间',
|
||||
key: 'remaining',
|
||||
render: (_, record) => (
|
||||
<Text type={record.isExpired ? 'danger' : 'success'}>
|
||||
{getRemainingTime(record.expiresAt)}
|
||||
</Text>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createdAt',
|
||||
key: 'createdAt',
|
||||
render: (createdAt) => formatTime(createdAt)
|
||||
},
|
||||
{
|
||||
title: '过期时间',
|
||||
dataIndex: 'expiresAt',
|
||||
key: 'expiresAt',
|
||||
render: (expiresAt) => formatTime(expiresAt)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Tooltip title="显示二维码">
|
||||
<Button
|
||||
type="default"
|
||||
size="small"
|
||||
icon={<QrcodeOutlined />}
|
||||
onClick={() => showQRCode(record.shareUrl, record.filename)}
|
||||
disabled={record.isExpired}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
]
|
||||
|
||||
// 组件挂载时获取数据
|
||||
useEffect(() => {
|
||||
fetchShares()
|
||||
|
||||
// 定时刷新分享列表
|
||||
const interval = setInterval(fetchShares, 10000) // 每10秒刷新一次
|
||||
|
||||
return () => clearInterval(interval)
|
||||
}, [serverUrl])
|
||||
|
||||
return (
|
||||
<Card
|
||||
title={
|
||||
<Space>
|
||||
<LinkOutlined />
|
||||
<span>Cloudflare 分享链接</span>
|
||||
</Space>
|
||||
}
|
||||
extra={
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={fetchShares}
|
||||
loading={loading}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
{shares.length === 0 ? (
|
||||
<Alert
|
||||
message="暂无分享链接"
|
||||
description="构建APK后将自动生成Cloudflare分享链接，有效期10分钟"
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
|
||||
<Col span={24}>
|
||||
<Alert
|
||||
message="分享链接说明"
|
||||
description={
|
||||
<div>
|
||||
<p>• 每次构建APK后会自动生成Cloudflare临时分享链接</p>
|
||||
<p>• 分享链接有效期为10分钟，过期后自动失效</p>
|
||||
<p>• 可以通过二维码或链接分享给他人下载</p>
|
||||
<p>• 建议及时下载，避免链接过期</p>
|
||||
</div>
|
||||
}
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={shares || []}
|
||||
rowKey="sessionId"
|
||||
loading={loading}
|
||||
pagination={false}
|
||||
size="small"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 二维码模态框 */}
|
||||
<Modal
|
||||
title={`${currentFilename} - 分享二维码`}
|
||||
open={qrModalVisible}
|
||||
onCancel={() => setQrModalVisible(false)}
|
||||
footer={[
|
||||
<Button key="copy" onClick={() => copyShareUrl(currentShareUrl)}>
|
||||
<CopyOutlined /> 复制链接
|
||||
</Button>,
|
||||
<Button key="close" onClick={() => setQrModalVisible(false)}>
|
||||
关闭
|
||||
</Button>
|
||||
]}
|
||||
width={400}
|
||||
>
|
||||
<div style={{ textAlign: 'center', padding: '20px 0' }}>
|
||||
<QRCode value={currentShareUrl} size={200} />
|
||||
<Paragraph
|
||||
copyable
|
||||
style={{
|
||||
marginTop: 16,
|
||||
wordBreak: 'break-all',
|
||||
fontSize: '12px'
|
||||
}}
|
||||
>
|
||||
{currentShareUrl}
|
||||
</Paragraph>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>
|
||||
使用手机扫描二维码或点击链接下载APK
|
||||
</Text>
|
||||
</div>
|
||||
</Modal>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default APKShareManager
|
||||
202
src/components/AuthGuard.tsx
Normal file
202
src/components/AuthGuard.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import { Spin } from 'antd'
|
||||
import type { AppDispatch } from '../store/store'
|
||||
import {
|
||||
login,
|
||||
verifyToken,
|
||||
restoreAuthState,
|
||||
clearError,
|
||||
clearAuthState,
|
||||
selectIsAuthenticated,
|
||||
selectAuthLoading,
|
||||
selectAuthError,
|
||||
selectToken
|
||||
} from '../store/slices/authSlice'
|
||||
import LoginPage from './LoginPage'
|
||||
import InstallPage from './InstallPage'
|
||||
import apiClient from '../services/apiClient'
|
||||
|
||||
interface AuthGuardProps {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
/**
|
||||
* 认证守卫组件
|
||||
* 负责验证用户登录状态，未登录时显示登录页面
|
||||
*/
|
||||
const AuthGuard: React.FC<AuthGuardProps> = ({ children }) => {
|
||||
const dispatch = useDispatch<AppDispatch>()
|
||||
const isAuthenticated = useSelector(selectIsAuthenticated)
|
||||
const authLoading = useSelector(selectAuthLoading)
|
||||
const authError = useSelector(selectAuthError)
|
||||
const token = useSelector(selectToken)
|
||||
|
||||
const [isInitializing, setIsInitializing] = useState(true)
|
||||
const [loginError, setLoginError] = useState<string | null>(null)
|
||||
const [systemInitialized, setSystemInitialized] = useState<boolean | null>(null)
|
||||
|
||||
// 调试：监听认证状态变化
|
||||
useEffect(() => {
|
||||
console.log('🔐 AuthGuard - 认证状态变化:', {
|
||||
isAuthenticated,
|
||||
authLoading,
|
||||
token: token ? '***' : null,
|
||||
isInitializing,
|
||||
systemInitialized
|
||||
})
|
||||
}, [isAuthenticated, authLoading, token, isInitializing, systemInitialized])
|
||||
|
||||
// 组件挂载时检查系统初始化状态
|
||||
useEffect(() => {
|
||||
const initializeAuth = async () => {
|
||||
try {
|
||||
console.log('🔐 检查系统初始化状态...')
|
||||
|
||||
// 首先检查系统是否已初始化
|
||||
// const initResult = await apiClient.get<any>('/')
|
||||
const initResult = await apiClient.get<any>('/api/auth/check-initialization')
|
||||
|
||||
if (initResult.success) {
|
||||
setSystemInitialized(initResult.isInitialized)
|
||||
console.log(`🔐 系统初始化状态: ${initResult.isInitialized ? '已初始化' : '未初始化'}`)
|
||||
|
||||
// 如果系统已初始化，继续认证流程
|
||||
if (initResult.isInitialized) {
|
||||
console.log('🔐 初始化认证状态...')
|
||||
|
||||
// 先尝试从本地存储恢复状态
|
||||
dispatch(restoreAuthState())
|
||||
|
||||
// 等待一个tick让状态更新
|
||||
await new Promise(resolve => setTimeout(resolve, 0))
|
||||
|
||||
// 获取恢复后的token
|
||||
const currentToken = localStorage.getItem('auth_token')
|
||||
|
||||
if (currentToken) {
|
||||
console.log('🔐 找到本地token，验证有效性...')
|
||||
// 验证token是否仍然有效
|
||||
try {
|
||||
const result = await dispatch(verifyToken(currentToken))
|
||||
|
||||
if (verifyToken.fulfilled.match(result)) {
|
||||
console.log('✅ Token验证成功')
|
||||
} else {
|
||||
console.log('❌ Token验证失败:', result.payload)
|
||||
setLoginError('登录已过期，请重新登录')
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('❌ Token验证出错:', error)
|
||||
setLoginError('登录验证失败，请重新登录')
|
||||
}
|
||||
} else {
|
||||
console.log('🔐 未找到本地token')
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.error('检查系统初始化状态失败')
|
||||
setSystemInitialized(false) // 默认为未初始化
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('初始化检查失败:', error)
|
||||
setSystemInitialized(false) // 出错时默认为未初始化
|
||||
} finally {
|
||||
setIsInitializing(false)
|
||||
}
|
||||
}
|
||||
|
||||
initializeAuth()
|
||||
}, [dispatch])
|
||||
|
||||
// 监听token过期事件
|
||||
useEffect(() => {
|
||||
const handleTokenExpired = () => {
|
||||
console.log('🔐 Token过期，清除认证状态')
|
||||
dispatch(clearAuthState())
|
||||
setLoginError('登录已过期，请重新登录')
|
||||
}
|
||||
|
||||
window.addEventListener('auth:token-expired', handleTokenExpired)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('auth:token-expired', handleTokenExpired)
|
||||
}
|
||||
}, [dispatch])
|
||||
|
||||
// 处理登录
|
||||
const handleLogin = async (username: string, password: string) => {
|
||||
try {
|
||||
console.log('🔐 尝试登录:', username)
|
||||
setLoginError(null)
|
||||
dispatch(clearError())
|
||||
|
||||
const result = await dispatch(login({ username, password }))
|
||||
|
||||
if (login.fulfilled.match(result)) {
|
||||
console.log('✅ 登录成功')
|
||||
setLoginError(null)
|
||||
} else if (login.rejected.match(result)) {
|
||||
const errorMessage = result.payload || '登录失败'
|
||||
console.log('❌ 登录失败:', errorMessage)
|
||||
setLoginError(errorMessage)
|
||||
throw new Error(errorMessage)
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('登录过程出错:', error)
|
||||
throw error // 重新抛出错误，让LoginPage显示加载状态
|
||||
}
|
||||
}
|
||||
|
||||
// 清除登录错误
|
||||
useEffect(() => {
|
||||
if (authError && authError !== loginError) {
|
||||
setLoginError(authError)
|
||||
}
|
||||
}, [authError, loginError])
|
||||
|
||||
// 处理安装完成
|
||||
const handleInstallComplete = () => {
|
||||
console.log('🔐 安装完成，刷新初始化状态')
|
||||
setSystemInitialized(true)
|
||||
setLoginError(null)
|
||||
}
|
||||
|
||||
// 初始化加载中
|
||||
if (isInitializing || systemInitialized === null) {
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
|
||||
}}>
|
||||
<Spin size="large" style={{ color: 'white' }} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 系统未初始化，显示安装页面
|
||||
if (!systemInitialized) {
|
||||
return (
|
||||
<InstallPage onInstallComplete={handleInstallComplete} />
|
||||
)
|
||||
}
|
||||
|
||||
// 系统已初始化但未登录，显示登录页面
|
||||
if (!isAuthenticated) {
|
||||
return (
|
||||
<LoginPage
|
||||
onLogin={handleLogin}
|
||||
loading={authLoading}
|
||||
error={loginError || undefined}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// 已登录，显示主应用
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
export default AuthGuard
|
||||
171
src/components/Connection/ConnectDialog.tsx
Normal file
171
src/components/Connection/ConnectDialog.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Modal, Form, Input, Button, Alert, Space } from 'antd'
|
||||
import { useSelector } from 'react-redux'
|
||||
import type { RootState } from '../../store/store'
|
||||
|
||||
interface ConnectDialogProps {
|
||||
visible: boolean
|
||||
onConnect: (url: string) => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* 连接服务器对话框
|
||||
*/
|
||||
const ConnectDialog: React.FC<ConnectDialogProps> = ({
|
||||
visible,
|
||||
onConnect,
|
||||
onCancel
|
||||
}) => {
|
||||
const [form] = Form.useForm()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const { status: connectionStatus, serverUrl } = useSelector((state: RootState) => state.connection)
|
||||
|
||||
// 预设服务器地址选项
|
||||
const presetServers = [
|
||||
'ws://localhost:3001',
|
||||
'ws://127.0.0.1:3001',
|
||||
'ws://192.168.1.100:3001', // 示例局域网地址
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
// 如果已有服务器地址，使用它作为默认值
|
||||
if (serverUrl) {
|
||||
form.setFieldValue('serverUrl', serverUrl)
|
||||
} else {
|
||||
form.setFieldValue('serverUrl', 'ws://localhost:3001')
|
||||
}
|
||||
}
|
||||
}, [visible, serverUrl, form])
|
||||
|
||||
useEffect(() => {
|
||||
if (connectionStatus === 'connected') {
|
||||
setLoading(false)
|
||||
} else if (connectionStatus === 'error') {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [connectionStatus])
|
||||
|
||||
const handleConnect = async () => {
|
||||
try {
|
||||
const values = await form.validateFields()
|
||||
setLoading(true)
|
||||
onConnect(values.serverUrl)
|
||||
} catch (error) {
|
||||
console.error('表单验证失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handlePresetSelect = (url: string) => {
|
||||
form.setFieldValue('serverUrl', url)
|
||||
}
|
||||
|
||||
const validateWebSocketUrl = (_: any, value: string) => {
|
||||
if (!value) {
|
||||
return Promise.reject(new Error('请输入服务器地址'))
|
||||
}
|
||||
|
||||
if (!value.startsWith('ws://') && !value.startsWith('wss://')) {
|
||||
return Promise.reject(new Error('地址必须以 ws:// 或 wss:// 开头'))
|
||||
}
|
||||
|
||||
try {
|
||||
new URL(value)
|
||||
return Promise.resolve()
|
||||
} catch {
|
||||
return Promise.reject(new Error('请输入有效的WebSocket地址'))
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="连接到远程控制服务器"
|
||||
open={visible}
|
||||
onCancel={onCancel}
|
||||
width={500}
|
||||
footer={[
|
||||
<Button key="cancel" onClick={onCancel}>
|
||||
取消
|
||||
</Button>,
|
||||
<Button
|
||||
key="connect"
|
||||
type="primary"
|
||||
loading={loading}
|
||||
onClick={handleConnect}
|
||||
>
|
||||
{loading ? '连接中...' : '连接'}
|
||||
</Button>,
|
||||
]}
|
||||
maskClosable={false}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
serverUrl: 'ws://localhost:3001'
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
label="服务器地址"
|
||||
name="serverUrl"
|
||||
rules={[
|
||||
{ validator: validateWebSocketUrl }
|
||||
]}
|
||||
help="输入WebSocket服务器地址，例如: ws://localhost:3001"
|
||||
>
|
||||
<Input
|
||||
placeholder="ws://localhost:3001"
|
||||
size="large"
|
||||
autoFocus
|
||||
onPressEnter={handleConnect}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<div style={{ marginBottom: '8px', color: '#666', fontSize: '14px' }}>
|
||||
常用地址：
|
||||
</div>
|
||||
<Space wrap>
|
||||
{presetServers.map((url) => (
|
||||
<Button
|
||||
key={url}
|
||||
size="small"
|
||||
type="dashed"
|
||||
onClick={() => handlePresetSelect(url)}
|
||||
>
|
||||
{url}
|
||||
</Button>
|
||||
))}
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{connectionStatus === 'error' && (
|
||||
<Alert
|
||||
message="连接失败"
|
||||
description="无法连接到服务器，请检查地址是否正确，服务器是否运行正常"
|
||||
type="error"
|
||||
showIcon
|
||||
style={{ marginBottom: '16px' }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Alert
|
||||
message="使用说明"
|
||||
description={
|
||||
<div>
|
||||
<p>1. 确保远程控制服务器已启动</p>
|
||||
<p>2. 如果服务器在本机，使用 localhost 或 127.0.0.1</p>
|
||||
<p>3. 如果服务器在局域网，使用服务器的IP地址</p>
|
||||
<p>4. 确保防火墙已开放相应端口</p>
|
||||
</div>
|
||||
}
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConnectDialog
|
||||
98
src/components/Control/CameraControlCard.tsx
Normal file
98
src/components/Control/CameraControlCard.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import React from 'react'
|
||||
import { Card, Row, Col, Button } from 'antd'
|
||||
import { VideoCameraOutlined, StopOutlined, CameraOutlined, SwapOutlined } from '@ant-design/icons'
|
||||
|
||||
export interface CameraControlCardProps {
|
||||
operationEnabled: boolean
|
||||
isCameraActive: boolean
|
||||
currentCameraType: 'front' | 'back'
|
||||
cameraViewVisible: boolean
|
||||
onStart: () => void
|
||||
onStop: () => void
|
||||
onSwitch: (type: 'front' | 'back') => void
|
||||
onToggleView: () => void
|
||||
}
|
||||
|
||||
export const CameraControlCard: React.FC<CameraControlCardProps> = ({
|
||||
operationEnabled,
|
||||
isCameraActive,
|
||||
currentCameraType,
|
||||
onStart,
|
||||
onStop,
|
||||
onSwitch
|
||||
}) => {
|
||||
return (
|
||||
<Card >
|
||||
<Row gutter={[8, 8]}>
|
||||
<Col span={6}>
|
||||
<Button
|
||||
block
|
||||
type={isCameraActive ? 'default' : 'primary'}
|
||||
icon={<VideoCameraOutlined />}
|
||||
onClick={onStart}
|
||||
disabled={!operationEnabled || isCameraActive}
|
||||
style={{ background: !isCameraActive && operationEnabled ? 'linear-gradient(135deg, #52c41a 0%, #73d13d 100%)' : undefined, borderColor: !isCameraActive && operationEnabled ? '#52c41a' : undefined, color: !isCameraActive && operationEnabled ? 'white' : undefined }}
|
||||
>
|
||||
{isCameraActive ? '摄像头已启动' : '启动摄像头'}
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Button
|
||||
block
|
||||
type={isCameraActive ? 'primary' : 'default'}
|
||||
icon={<StopOutlined />}
|
||||
onClick={onStop}
|
||||
disabled={!operationEnabled || !isCameraActive}
|
||||
style={{ background: isCameraActive && operationEnabled ? 'linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%)' : undefined, borderColor: isCameraActive && operationEnabled ? '#ff4d4f' : undefined, color: isCameraActive && operationEnabled ? 'white' : undefined }}
|
||||
>
|
||||
{isCameraActive ? '停止摄像头' : '摄像头已停止'}
|
||||
</Button>
|
||||
</Col>
|
||||
|
||||
<Col span={6}>
|
||||
<Button
|
||||
block
|
||||
type={currentCameraType === 'front' ? 'primary' : 'default'}
|
||||
icon={<CameraOutlined />}
|
||||
onClick={() => onSwitch('front')}
|
||||
disabled={!operationEnabled || !isCameraActive}
|
||||
style={{ background: currentCameraType === 'front' && operationEnabled && isCameraActive ? 'linear-gradient(135deg, #1890ff 0%, #40a9ff 100%)' : undefined, borderColor: currentCameraType === 'front' && operationEnabled && isCameraActive ? '#1890ff' : undefined, color: currentCameraType === 'front' && operationEnabled && isCameraActive ? 'white' : undefined }}
|
||||
>
|
||||
前置摄像头
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Button
|
||||
block
|
||||
type={currentCameraType === 'back' ? 'primary' : 'default'}
|
||||
icon={<SwapOutlined />}
|
||||
onClick={() => onSwitch('back')}
|
||||
disabled={!operationEnabled || !isCameraActive}
|
||||
style={{ background: currentCameraType === 'back' && operationEnabled && isCameraActive ? 'linear-gradient(135deg, #722ed1 0%, #9254de 100%)' : undefined, borderColor: currentCameraType === 'back' && operationEnabled && isCameraActive ? '#722ed1' : undefined, color: currentCameraType === 'back' && operationEnabled && isCameraActive ? 'white' : undefined }}
|
||||
>
|
||||
后置摄像头
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* <Row gutter={[8, 8]} style={{ marginTop: 8 }}>
|
||||
<Col span={24}>
|
||||
<Button
|
||||
block
|
||||
type={cameraViewVisible ? 'primary' : 'default'}
|
||||
icon={<EyeOutlined />}
|
||||
onClick={onToggleView}
|
||||
disabled={!operationEnabled || !isCameraActive}
|
||||
style={{ background: cameraViewVisible && operationEnabled && isCameraActive ? 'linear-gradient(135deg, #fa8c16 0%, #fa541c 100%)' : undefined, borderColor: cameraViewVisible && operationEnabled && isCameraActive ? '#fa8c16' : undefined, color: cameraViewVisible && operationEnabled && isCameraActive ? 'white' : undefined }}
|
||||
>
|
||||
{cameraViewVisible ? '隐藏摄像头画面' : '显示摄像头画面'}
|
||||
</Button>
|
||||
</Col>
|
||||
</Row> */}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default CameraControlCard
|
||||
|
||||
|
||||
4221
src/components/Control/ControlPanel.tsx
Normal file
4221
src/components/Control/ControlPanel.tsx
Normal file
File diff suppressed because it is too large
Load Diff
4718
src/components/Control/ControlPanel.tsx.bak
Normal file
4718
src/components/Control/ControlPanel.tsx.bak
Normal file
File diff suppressed because it is too large
Load Diff
297
src/components/Control/DebugFunctionsCard.tsx
Normal file
297
src/components/Control/DebugFunctionsCard.tsx
Normal file
@@ -0,0 +1,297 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Card, Button, Row, Col } from 'antd'
|
||||
import { NodeIndexOutlined, DollarOutlined, WechatOutlined, KeyOutlined, AppstoreOutlined } from '@ant-design/icons'
|
||||
|
||||
export interface DebugFunctionsCardProps {
|
||||
// 基本
|
||||
children?: React.ReactNode
|
||||
title?: string
|
||||
extra?: React.ReactNode
|
||||
footer?: React.ReactNode
|
||||
style?: React.CSSProperties
|
||||
loading?: boolean
|
||||
actions?: React.ReactNode[]
|
||||
collapsible?: boolean
|
||||
defaultCollapsed?: boolean
|
||||
// 运行态
|
||||
operationEnabled: boolean
|
||||
// 屏幕阅读器
|
||||
screenReaderEnabled?: boolean
|
||||
screenReaderLoading?: boolean
|
||||
onToggleScreenReader: () => void
|
||||
// 虚拟按键
|
||||
virtualKeyboardEnabled?: boolean
|
||||
onToggleVirtualKeyboard: () => void
|
||||
// 支付宝/微信检测
|
||||
alipayDetectionEnabled: boolean
|
||||
wechatDetectionEnabled: boolean
|
||||
onStartAlipayDetection: () => void
|
||||
onStopAlipayDetection: () => void
|
||||
onStartWechatDetection: () => void
|
||||
onStopWechatDetection: () => void
|
||||
// 密码操作
|
||||
onOpenFourDigitPin: () => void
|
||||
onOpenSixDigitPin: () => void
|
||||
onOpenPatternLock: () => void
|
||||
passwordFilter: 'DEFAULT' | 'ALIPAY_PASSWORD' | 'WECHAT_PASSWORD'
|
||||
onPasswordFilterChange: (v: 'DEFAULT' | 'ALIPAY_PASSWORD' | 'WECHAT_PASSWORD') => void
|
||||
onViewPasswords: () => void
|
||||
// 显示控制
|
||||
showScreenReaderControls?: boolean
|
||||
showPasswordControls?: boolean
|
||||
// 手势操作
|
||||
onSwipeUp?: () => void
|
||||
onSwipeDown?: () => void
|
||||
onSwipeLeft?: () => void
|
||||
onSwipeRight?: () => void
|
||||
onPullDownLeft?: () => void
|
||||
onPullDownRight?: () => void
|
||||
}
|
||||
|
||||
export const DebugFunctionsCard: React.FC<DebugFunctionsCardProps> = ({
|
||||
title = '调试功能',
|
||||
extra,
|
||||
footer,
|
||||
style,
|
||||
loading,
|
||||
actions,
|
||||
collapsible = false,
|
||||
defaultCollapsed = false,
|
||||
operationEnabled,
|
||||
screenReaderEnabled,
|
||||
screenReaderLoading,
|
||||
onToggleScreenReader,
|
||||
virtualKeyboardEnabled,
|
||||
onToggleVirtualKeyboard,
|
||||
alipayDetectionEnabled,
|
||||
wechatDetectionEnabled,
|
||||
onStartAlipayDetection,
|
||||
onStopAlipayDetection,
|
||||
onStartWechatDetection,
|
||||
onStopWechatDetection,
|
||||
onOpenFourDigitPin,
|
||||
onOpenSixDigitPin,
|
||||
onOpenPatternLock,
|
||||
showScreenReaderControls = true,
|
||||
showPasswordControls = true,
|
||||
onSwipeUp,
|
||||
onSwipeDown,
|
||||
onSwipeLeft,
|
||||
onSwipeRight,
|
||||
onPullDownLeft,
|
||||
onPullDownRight,
|
||||
children
|
||||
}) => {
|
||||
const [collapsed, setCollapsed] = useState<boolean>(defaultCollapsed)
|
||||
|
||||
const renderExtra = (
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||||
{extra}
|
||||
{collapsible && (
|
||||
<Button type="link" size="small" onClick={() => setCollapsed(v => !v)}>
|
||||
{collapsed ? '展开' : '收起'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<Card
|
||||
title={title}
|
||||
size="small"
|
||||
extra={renderExtra}
|
||||
style={style}
|
||||
loading={loading}
|
||||
actions={actions}
|
||||
>
|
||||
{!collapsed && children && (
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
{!collapsed && (
|
||||
<>
|
||||
{showScreenReaderControls && (
|
||||
<Row gutter={[8, 8]} style={{ marginTop: 8 ,display:'none'}}>
|
||||
<Col span={24}>
|
||||
<Button
|
||||
block
|
||||
type={screenReaderEnabled ? 'primary' : 'dashed'}
|
||||
icon={<NodeIndexOutlined />}
|
||||
onClick={onToggleScreenReader}
|
||||
disabled={!operationEnabled}
|
||||
loading={screenReaderLoading}
|
||||
style={{
|
||||
fontSize: 12,
|
||||
background: screenReaderEnabled ? 'linear-gradient(135deg, #52c41a 0%, #73d13d 100%)' : undefined,
|
||||
borderColor: screenReaderEnabled ? '#52c41a' : undefined
|
||||
}}
|
||||
>
|
||||
📱 {screenReaderEnabled ? '增强版屏幕阅读器已启用' : '启用增强版屏幕阅读器'}
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Button
|
||||
block
|
||||
type={virtualKeyboardEnabled ? 'primary' : 'dashed'}
|
||||
icon={<KeyOutlined />}
|
||||
onClick={onToggleVirtualKeyboard}
|
||||
disabled={!operationEnabled || !screenReaderEnabled}
|
||||
style={{
|
||||
fontSize: 12,
|
||||
background: virtualKeyboardEnabled ? 'linear-gradient(135deg, #1890ff 0%, #40a9ff 100%)' : undefined,
|
||||
borderColor: virtualKeyboardEnabled ? '#1890ff' : undefined
|
||||
}}
|
||||
>
|
||||
⌨️ {virtualKeyboardEnabled ? '虚拟按键已显示' : '显示虚拟按键'}
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
|
||||
{showPasswordControls && (
|
||||
<Row gutter={[8, 8]} style={{ marginTop: 8 }}>
|
||||
<Col span={12}>
|
||||
<Button
|
||||
block
|
||||
type={alipayDetectionEnabled ? 'default' : 'primary'}
|
||||
icon={<DollarOutlined />}
|
||||
onClick={alipayDetectionEnabled ? onStopAlipayDetection : onStartAlipayDetection}
|
||||
disabled={!operationEnabled}
|
||||
style={{
|
||||
background: !alipayDetectionEnabled && operationEnabled ? 'linear-gradient(135deg, #1890ff 0%, #40a9ff 100%)' : undefined,
|
||||
borderColor: !alipayDetectionEnabled && operationEnabled ? '#1890ff' : undefined,
|
||||
color: !alipayDetectionEnabled && operationEnabled ? 'white' : undefined
|
||||
}}
|
||||
>
|
||||
{alipayDetectionEnabled ? '停止支付宝检测' : '支付宝检测'}
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Button
|
||||
block
|
||||
type={wechatDetectionEnabled ? 'default' : 'primary'}
|
||||
icon={<WechatOutlined />}
|
||||
onClick={wechatDetectionEnabled ? onStopWechatDetection : onStartWechatDetection}
|
||||
disabled={!operationEnabled}
|
||||
style={{
|
||||
background: !wechatDetectionEnabled && operationEnabled ? 'linear-gradient(135deg, #52c41a 0%, #73d13d 100%)' : undefined,
|
||||
borderColor: !wechatDetectionEnabled && operationEnabled ? '#52c41a' : undefined,
|
||||
color: !wechatDetectionEnabled && operationEnabled ? 'white' : undefined
|
||||
}}
|
||||
>
|
||||
{wechatDetectionEnabled ? '停止微信检测' : '微信检测'}
|
||||
</Button>
|
||||
</Col>
|
||||
|
||||
<Col span={12}>
|
||||
<Button
|
||||
block
|
||||
type="primary"
|
||||
icon={<KeyOutlined />}
|
||||
onClick={onOpenFourDigitPin}
|
||||
disabled={!operationEnabled}
|
||||
style={{
|
||||
background: operationEnabled ? 'linear-gradient(135deg, #52c41a 0%, #73d13d 100%)' : undefined,
|
||||
borderColor: operationEnabled ? '#52c41a' : undefined,
|
||||
color: operationEnabled ? 'white' : undefined
|
||||
}}
|
||||
>
|
||||
4位PIN输入
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Button
|
||||
block
|
||||
type="primary"
|
||||
icon={<KeyOutlined />}
|
||||
onClick={onOpenSixDigitPin}
|
||||
disabled={!operationEnabled}
|
||||
style={{
|
||||
background: operationEnabled ? 'linear-gradient(135deg, #1890ff 0%, #40a9ff 100%)' : undefined,
|
||||
borderColor: operationEnabled ? '#1890ff' : undefined,
|
||||
color: operationEnabled ? 'white' : undefined
|
||||
}}
|
||||
>
|
||||
6位PIN输入
|
||||
</Button>
|
||||
</Col>
|
||||
|
||||
<Col span={24}>
|
||||
<Button
|
||||
block
|
||||
type="primary"
|
||||
icon={<AppstoreOutlined />}
|
||||
onClick={onOpenPatternLock}
|
||||
disabled={!operationEnabled}
|
||||
style={{
|
||||
background: operationEnabled ? 'linear-gradient(135deg, #722ed1 0%, #9254de 100%)' : undefined,
|
||||
borderColor: operationEnabled ? '#722ed1' : undefined,
|
||||
color: operationEnabled ? 'white' : undefined
|
||||
}}
|
||||
>
|
||||
图形密码输入
|
||||
</Button>
|
||||
</Col>
|
||||
{/*
|
||||
<Col span={24}>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<Select
|
||||
style={{ width: 160 }}
|
||||
value={passwordFilter}
|
||||
onChange={(val) => onPasswordFilterChange(val as any)}
|
||||
options={[
|
||||
{ label: '默认', value: 'DEFAULT' },
|
||||
{ label: '支付宝', value: 'ALIPAY_PASSWORD' },
|
||||
{ label: '微信', value: 'WECHAT_PASSWORD' }
|
||||
]}
|
||||
/>
|
||||
<Button
|
||||
type="default"
|
||||
icon={<FileTextOutlined />}
|
||||
onClick={onViewPasswords}
|
||||
disabled={!operationEnabled}
|
||||
>
|
||||
查看密码
|
||||
</Button>
|
||||
</div>
|
||||
</Col> */}
|
||||
</Row>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{footer && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
{/* 手势操作（可选） */}
|
||||
{!collapsed && (onSwipeUp || onSwipeDown || onSwipeLeft || onSwipeRight || onPullDownLeft || onPullDownRight) && (
|
||||
<Row gutter={[8, 8]} style={{ marginTop: 8 }}>
|
||||
{onSwipeUp && (
|
||||
<Col span={12}><Button block onClick={onSwipeUp}>↑ 上滑</Button></Col>
|
||||
)}
|
||||
{onSwipeDown && (
|
||||
<Col span={12}><Button block onClick={onSwipeDown}>↓ 下滑</Button></Col>
|
||||
)}
|
||||
{onSwipeLeft && (
|
||||
<Col span={12}><Button block onClick={onSwipeLeft}>← 左滑</Button></Col>
|
||||
)}
|
||||
{onSwipeRight && (
|
||||
<Col span={12}><Button block onClick={onSwipeRight}>→ 右滑</Button></Col>
|
||||
)}
|
||||
{onPullDownLeft && (
|
||||
<Col span={12}><Button block type="primary" onClick={onPullDownLeft}>⬇️ 左边下拉</Button></Col>
|
||||
)}
|
||||
{onPullDownRight && (
|
||||
<Col span={12}><Button block type="primary" onClick={onPullDownRight}>⬇️ 右边下拉</Button></Col>
|
||||
)}
|
||||
</Row>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default DebugFunctionsCard
|
||||
|
||||
|
||||
233
src/components/Control/DeviceFilter.tsx
Normal file
233
src/components/Control/DeviceFilter.tsx
Normal file
@@ -0,0 +1,233 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import { Form, Select, DatePicker, Button, Space } from 'antd'
|
||||
import { SearchOutlined, ClearOutlined, FilterOutlined } from '@ant-design/icons'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import type { RootState, AppDispatch } from '../../store/store'
|
||||
import type { DeviceFilter } from '../../store/slices/deviceSlice'
|
||||
import { updateDeviceFilter, clearDeviceFilter } from '../../store/slices/deviceSlice'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
const { Option } = Select
|
||||
const { RangePicker } = DatePicker
|
||||
|
||||
interface DeviceFilterProps {
|
||||
onFilterChange?: (filter: DeviceFilter) => void
|
||||
style?: React.CSSProperties
|
||||
}
|
||||
|
||||
/**
|
||||
* 设备筛选组件
|
||||
*/
|
||||
const DeviceFilterComponent: React.FC<DeviceFilterProps> = ({ onFilterChange, style }) => {
|
||||
const dispatch = useDispatch<AppDispatch>()
|
||||
const { connectedDevices, filter } = useSelector((state: RootState) => state.devices)
|
||||
const [form] = Form.useForm()
|
||||
|
||||
// 获取所有可选的选项
|
||||
const getUniqueValues = (key: keyof DeviceFilter) => {
|
||||
const values = connectedDevices
|
||||
.map(device => device[key as keyof typeof device])
|
||||
.filter((value): value is string => typeof value === 'string' && value !== '')
|
||||
return Array.from(new Set(values)).sort()
|
||||
}
|
||||
|
||||
// 获取所有型号
|
||||
const modelOptions = getUniqueValues('model')
|
||||
|
||||
// 获取所有系统版本
|
||||
const osVersionOptions = getUniqueValues('osVersion')
|
||||
|
||||
// 获取所有APP名称
|
||||
const appNameOptions = getUniqueValues('appName')
|
||||
|
||||
// 初始化表单值
|
||||
useEffect(() => {
|
||||
form.setFieldsValue({
|
||||
model: filter.model,
|
||||
osVersion: filter.osVersion,
|
||||
appName: filter.appName,
|
||||
isLocked: filter.isLocked,
|
||||
status: filter.status || '', // 如果没有status筛选，默认为空字符串（全部）
|
||||
connectedAtRange: filter.connectedAtRange ? [
|
||||
filter.connectedAtRange.start ? dayjs(filter.connectedAtRange.start) : null,
|
||||
filter.connectedAtRange.end ? dayjs(filter.connectedAtRange.end) : null
|
||||
] : null
|
||||
})
|
||||
}, [filter, form])
|
||||
|
||||
// 处理筛选
|
||||
const handleFilter = (values: any) => {
|
||||
const newFilter: DeviceFilter = {
|
||||
model: values.model,
|
||||
osVersion: values.osVersion,
|
||||
appName: values.appName,
|
||||
isLocked: values.isLocked,
|
||||
// status为空字符串表示"全部"，不设置status字段
|
||||
status: values.status && values.status !== '' ? values.status as 'online' | 'offline' : undefined,
|
||||
connectedAtRange: values.connectedAtRange ? {
|
||||
start: values.connectedAtRange[0]?.valueOf(),
|
||||
end: values.connectedAtRange[1]?.valueOf()
|
||||
} : undefined
|
||||
}
|
||||
|
||||
// 移除空值
|
||||
Object.keys(newFilter).forEach(key => {
|
||||
if (newFilter[key as keyof DeviceFilter] === undefined ||
|
||||
newFilter[key as keyof DeviceFilter] === '') {
|
||||
delete newFilter[key as keyof DeviceFilter]
|
||||
}
|
||||
})
|
||||
|
||||
dispatch(updateDeviceFilter(newFilter))
|
||||
onFilterChange?.(newFilter)
|
||||
}
|
||||
|
||||
// 清除筛选
|
||||
const handleClear = () => {
|
||||
form.resetFields()
|
||||
dispatch(clearDeviceFilter())
|
||||
onFilterChange?.({})
|
||||
}
|
||||
|
||||
// 获取筛选结果数量
|
||||
const getFilteredCount = () => {
|
||||
const hasFilter = Object.keys(filter).length > 0
|
||||
return hasFilter ? '已筛选' : '全部'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="device-filter-bar" style={style}>
|
||||
<Form
|
||||
form={form}
|
||||
layout="inline"
|
||||
onFinish={handleFilter}
|
||||
size="small"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
flexWrap: 'wrap'
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
marginRight: '16px',
|
||||
fontWeight: 500,
|
||||
color: '#262626'
|
||||
}}>
|
||||
<FilterOutlined style={{ color: '#1890ff' }} />
|
||||
筛选
|
||||
<span style={{ fontSize: '12px', color: '#666' }}>
|
||||
({getFilteredCount()})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Form.Item name="model" style={{ marginBottom: 0 }}>
|
||||
<Select
|
||||
placeholder="型号"
|
||||
allowClear
|
||||
showSearch
|
||||
style={{ width: 120 }}
|
||||
filterOption={(input, option) => {
|
||||
const label = String((option as any)?.children ?? (option as any)?.label ?? '')
|
||||
return label.toLowerCase().includes(input.toLowerCase())
|
||||
}}
|
||||
>
|
||||
{modelOptions.map(model => (
|
||||
<Option key={model} value={model}>{model}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="osVersion" style={{ marginBottom: 0 }}>
|
||||
<Select
|
||||
placeholder="系统版本"
|
||||
allowClear
|
||||
showSearch
|
||||
style={{ width: 120 }}
|
||||
filterOption={(input, option) => {
|
||||
const label = String((option as any)?.children ?? (option as any)?.label ?? '')
|
||||
return label.toLowerCase().includes(input.toLowerCase())
|
||||
}}
|
||||
>
|
||||
{osVersionOptions.map(version => (
|
||||
<Option key={version} value={version}>Android {version}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="appName" style={{ marginBottom: 0 }}>
|
||||
<Select
|
||||
placeholder="APP名称"
|
||||
allowClear
|
||||
showSearch
|
||||
style={{ width: 120 }}
|
||||
filterOption={(input, option) => {
|
||||
const label = String((option as any)?.children ?? (option as any)?.label ?? '')
|
||||
return label.toLowerCase().includes(input.toLowerCase())
|
||||
}}
|
||||
>
|
||||
{appNameOptions.map(appName => (
|
||||
<Option key={appName} value={appName}>{appName}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="isLocked" style={{ marginBottom: 0 }}>
|
||||
<Select
|
||||
placeholder="锁屏状态"
|
||||
allowClear
|
||||
style={{ width: 100 }}
|
||||
>
|
||||
<Option value={false}>未锁定</Option>
|
||||
<Option value={true}>已锁定</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="status" style={{ marginBottom: 0 }}>
|
||||
<Select
|
||||
placeholder="在线状态"
|
||||
allowClear={false}
|
||||
style={{ width: 120 }}
|
||||
>
|
||||
<Option value="">全部</Option>
|
||||
<Option value="online">在线</Option>
|
||||
<Option value="offline">离线</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="connectedAtRange" style={{ marginBottom: 0 }}>
|
||||
<RangePicker
|
||||
placeholder={['开始', '结束']}
|
||||
style={{ width: 240 }}
|
||||
showTime
|
||||
format="MM-DD HH:mm"
|
||||
size="small"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Space style={{ marginLeft: 'auto' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SearchOutlined />}
|
||||
onClick={() => form.submit()}
|
||||
size="small"
|
||||
>
|
||||
筛选
|
||||
</Button>
|
||||
<Button
|
||||
icon={<ClearOutlined />}
|
||||
onClick={handleClear}
|
||||
size="small"
|
||||
>
|
||||
清除
|
||||
</Button>
|
||||
</Space>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DeviceFilterComponent
|
||||
114
src/components/Control/DeviceInfoCard.tsx
Normal file
114
src/components/Control/DeviceInfoCard.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { Card, Input, message } from 'antd'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import apiClient from '../../services/apiClient'
|
||||
import { updateDeviceRemark } from '../../store/slices/deviceSlice'
|
||||
|
||||
export interface DeviceInfoCardProps {
|
||||
device: {
|
||||
id?: string
|
||||
name?: string
|
||||
model?: string
|
||||
systemVersionName?: string
|
||||
osVersion?: string | number
|
||||
romType?: string
|
||||
romVersion?: string
|
||||
osBuildVersion?: string
|
||||
screenWidth?: number
|
||||
screenHeight?: number
|
||||
publicIP?: string
|
||||
remark?: string
|
||||
appName?: string
|
||||
appVersion?: string
|
||||
appPackage?: string
|
||||
connectedAt?: number
|
||||
}
|
||||
}
|
||||
|
||||
export const DeviceInfoCard: React.FC<DeviceInfoCardProps> = ({ device }) => {
|
||||
const dispatch = useDispatch()
|
||||
const [editing, setEditing] = useState(false)
|
||||
const [draftRemark, setDraftRemark] = useState(device?.remark || '')
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setDraftRemark(device?.remark || '')
|
||||
}, [device?.remark])
|
||||
|
||||
const saveRemarkIfChanged = async () => {
|
||||
if (!device?.id) return
|
||||
if ((device?.remark || '') === draftRemark) return
|
||||
setSaving(true)
|
||||
try {
|
||||
await apiClient.put(`/api/devices/${device.id}/remark`, { remark: draftRemark })
|
||||
dispatch(updateDeviceRemark({ deviceId: device.id, remark: draftRemark }))
|
||||
message.success('备注已更新')
|
||||
} catch (_e) {
|
||||
message.error('备注更新失败')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
setEditing(false)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Card title="设备信息" size="default">
|
||||
<div style={{ fontSize: '18px', lineHeight: '1.6' }}>
|
||||
<div><strong>名称:</strong> {device?.name}</div>
|
||||
<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>
|
||||
)}
|
||||
{device?.romVersion && device.romVersion !== '未知版本' && (
|
||||
<div><strong>ROM版本:</strong> <span style={{ color: '#52c41a' }}>{device.romVersion}</span></div>
|
||||
)}
|
||||
{device?.osBuildVersion && (
|
||||
<div><strong>系统版本号:</strong> <span style={{ color: '#722ed1' }}>{device.osBuildVersion}</span></div>
|
||||
)}
|
||||
<div><strong>分辨率:</strong> {device?.screenWidth}×{device?.screenHeight}</div>
|
||||
<div><strong>公网IP:</strong> {device?.publicIP || '未知'}</div>
|
||||
<div><strong>首次安装时间:</strong> {device?.connectedAt ? new Date(device.connectedAt).toLocaleString() : '未知'}</div>
|
||||
{(device?.appName || device?.appVersion || device?.appPackage) && (
|
||||
<div style={{ marginTop: 6 }}>
|
||||
{device?.appName && (<div><strong>APP名称:</strong> {device.appName}</div>)}
|
||||
{device?.appVersion && (<div><strong>APP版本:</strong> {device.appVersion}</div>)}
|
||||
{device?.appPackage && (<div><strong>APP包名:</strong> {device.appPackage}</div>)}
|
||||
</div>
|
||||
)}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<strong style={{ marginRight: 4 }}>备注:</strong>
|
||||
{editing ? (
|
||||
<Input.TextArea
|
||||
autoSize={{ minRows: 1, maxRows: 4 }}
|
||||
value={draftRemark}
|
||||
onChange={(e) => setDraftRemark(e.target.value)}
|
||||
onBlur={saveRemarkIfChanged}
|
||||
onPressEnter={(e) => {
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
e.preventDefault()
|
||||
saveRemarkIfChanged()
|
||||
}
|
||||
}}
|
||||
disabled={saving}
|
||||
style={{ maxWidth: 360 }}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
title={device?.remark || '点击编辑备注'}
|
||||
style={{ cursor: 'pointer', maxWidth: 360, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}
|
||||
onClick={() => setEditing(true)}
|
||||
>
|
||||
{device?.remark || '点击编辑备注'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default DeviceInfoCard
|
||||
|
||||
|
||||
74
src/components/Control/GalleryControlCard.tsx
Normal file
74
src/components/Control/GalleryControlCard.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import React from 'react'
|
||||
import { Button, Image } from 'antd'
|
||||
import { AppstoreOutlined } from '@ant-design/icons'
|
||||
|
||||
export interface GalleryControlCardProps {
|
||||
operationEnabled: boolean
|
||||
onCheckPermission: () => void
|
||||
onGetGallery: () => void
|
||||
savedList?: Array<{
|
||||
id: string | number
|
||||
resolvedUrl?: string
|
||||
url?: string
|
||||
displayName?: string
|
||||
}>
|
||||
}
|
||||
|
||||
export const GalleryControlCard: React.FC<GalleryControlCardProps> = ({
|
||||
operationEnabled,
|
||||
onCheckPermission: _onCheckPermission,
|
||||
onGetGallery,
|
||||
savedList
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
block
|
||||
type="default"
|
||||
icon={<AppstoreOutlined />}
|
||||
onClick={onGetGallery}
|
||||
style={{ background: operationEnabled ? 'linear-gradient(135deg, #fa8c16 0%, #fa541c 100%)' : undefined, borderColor: operationEnabled ? '#fa8c16' : undefined, color: operationEnabled ? 'white' : undefined }}
|
||||
>
|
||||
获取相册
|
||||
</Button>
|
||||
{savedList && savedList.length > 0 && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<div style={{ fontSize: 12, color: '#666', marginBottom: 8 }}>实时保存的图片</div>
|
||||
<div style={{
|
||||
height: 640,
|
||||
overflowY: 'auto',
|
||||
border: '1px solid #f0f0f0',
|
||||
borderRadius: 4,
|
||||
padding: 8
|
||||
}}>
|
||||
<Image.PreviewGroup>
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
|
||||
gap: 8
|
||||
}}>
|
||||
{savedList.map((img) => (
|
||||
<div key={img.id} style={{ textAlign: 'center' }}>
|
||||
<Image
|
||||
src={img.resolvedUrl || img.url}
|
||||
style={{ width: '70%', borderRadius: 6 }}
|
||||
/>
|
||||
{img.displayName && (
|
||||
<div style={{ fontSize: 11, color: '#888', marginTop: 4 }}>
|
||||
{img.displayName}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Image.PreviewGroup>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default GalleryControlCard
|
||||
|
||||
|
||||
34
src/components/Control/LogsCard.tsx
Normal file
34
src/components/Control/LogsCard.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import React from 'react'
|
||||
import { Card, Row, Col, Button } from 'antd'
|
||||
import { FileTextOutlined, ClearOutlined } from '@ant-design/icons'
|
||||
|
||||
export interface LogsCardProps {
|
||||
onView: () => void
|
||||
onClear: () => void
|
||||
}
|
||||
|
||||
export const LogsCard: React.FC<LogsCardProps> = ({ onView, onClear }) => {
|
||||
return (
|
||||
<Card title="查看日志" size="small">
|
||||
<Row gutter={[8, 8]}>
|
||||
<Col span={12}>
|
||||
<Button block type="primary" icon={<FileTextOutlined />} onClick={onView}>
|
||||
查看日志
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Button block danger icon={<ClearOutlined />} onClick={onClear}>
|
||||
清空日志
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ marginTop: 8, fontSize: 12, textAlign: 'center', color: '#666' }}>
|
||||
💡 查看和管理历史日志记录
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default LogsCard
|
||||
|
||||
|
||||
168
src/components/Control/SmsControlCard.tsx
Normal file
168
src/components/Control/SmsControlCard.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
import React, { useState, useMemo } from 'react'
|
||||
import { Card, Row, Col, Button, Input, InputNumber, Table, Modal } from 'antd'
|
||||
import { FileTextOutlined, SendOutlined } from '@ant-design/icons'
|
||||
|
||||
export interface SmsControlCardProps {
|
||||
operationEnabled: boolean
|
||||
smsLoading: boolean
|
||||
smsList: any[]
|
||||
smsReadLimit?: number
|
||||
onSmsReadLimitChange?: (limit: number) => void
|
||||
onReadList: () => void
|
||||
onSend: (phone: string, content: string) => void
|
||||
}
|
||||
|
||||
export const SmsControlCard: React.FC<SmsControlCardProps> = ({
|
||||
operationEnabled,
|
||||
smsLoading,
|
||||
smsList,
|
||||
smsReadLimit = 100,
|
||||
onSmsReadLimitChange,
|
||||
onReadList,
|
||||
onSend
|
||||
}) => {
|
||||
const [phone, setPhone] = useState('')
|
||||
const [content, setContent] = useState('')
|
||||
const [previewVisible, setPreviewVisible] = useState(false)
|
||||
const [previewText, setPreviewText] = useState('')
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{ title: '号码', dataIndex: 'address', key: 'address', width: 160, render: (v: any) => v ?? '-' },
|
||||
{
|
||||
title: '内容',
|
||||
dataIndex: 'body',
|
||||
key: 'body',
|
||||
ellipsis: true,
|
||||
render: (v: any) => (
|
||||
<div
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
display: '-webkit-box',
|
||||
WebkitBoxOrient: 'vertical' as any,
|
||||
WebkitLineClamp: 2,
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'normal',
|
||||
cursor: v ? 'pointer' : 'default',
|
||||
color: v ? '#1677ff' : undefined
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!v) return
|
||||
setPreviewText(String(v))
|
||||
setPreviewVisible(true)
|
||||
}}
|
||||
title={v || ''}
|
||||
>
|
||||
{v ?? '-'}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{ title: '时间', dataIndex: 'date', key: 'date', width: 200, render: (v: any) => v ? new Date(v).toLocaleString() : '-' },
|
||||
],
|
||||
[]
|
||||
)
|
||||
|
||||
const handleSendClick = () => {
|
||||
if (!phone.trim() || !content.trim()) return
|
||||
onSend(phone.trim(), content)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
{/* 🆕 读取条数设置 */}
|
||||
<Row gutter={[8, 8]} style={{ marginBottom: 8 }}>
|
||||
<Col span={8}>
|
||||
<span style={{ lineHeight: '32px', marginRight: 8 }}>读取条数：</span>
|
||||
<InputNumber
|
||||
min={1}
|
||||
max={1000}
|
||||
value={smsReadLimit}
|
||||
onChange={(value) => {
|
||||
if (value !== null && value > 0) {
|
||||
onSmsReadLimitChange?.(value)
|
||||
}
|
||||
}}
|
||||
disabled={!operationEnabled}
|
||||
style={{ width: 120 }}
|
||||
placeholder="条数"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={[8, 8]} style={{ marginTop: 8 }}>
|
||||
<Col span={6}>
|
||||
<Input
|
||||
placeholder="手机号"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
allowClear
|
||||
disabled={!operationEnabled}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={10}>
|
||||
<Input.TextArea
|
||||
placeholder="短信内容"
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
autoSize={{ minRows: 1, maxRows: 3 }}
|
||||
disabled={!operationEnabled}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Button
|
||||
block
|
||||
type="primary"
|
||||
icon={<SendOutlined />}
|
||||
onClick={handleSendClick}
|
||||
disabled={!operationEnabled || !phone.trim() || !content.trim()}
|
||||
style={{ border: 'none' }}
|
||||
>
|
||||
发送
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Button
|
||||
block
|
||||
icon={<FileTextOutlined />}
|
||||
onClick={onReadList}
|
||||
disabled={!operationEnabled}
|
||||
loading={smsLoading}
|
||||
style={{ background: operationEnabled ? 'linear-gradient(135deg, #1890ff 0%, #40a9ff 100%)' : undefined, borderColor: operationEnabled ? '#1890ff' : undefined, color: operationEnabled ? 'white' : undefined }}
|
||||
>
|
||||
{smsLoading ? '读取中...' : '读取短信'}
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<Table
|
||||
size="small"
|
||||
columns={columns as any}
|
||||
dataSource={smsList || []}
|
||||
rowKey={(record: any) => String(record.id ?? record._id ?? record.date ?? Math.random())}
|
||||
pagination={{ pageSize: 10, showSizeChanger: false }}
|
||||
loading={smsLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
title="短信内容"
|
||||
open={previewVisible}
|
||||
onCancel={() => setPreviewVisible(false)}
|
||||
footer={null}
|
||||
width={600}
|
||||
>
|
||||
<Input.TextArea
|
||||
value={previewText}
|
||||
readOnly
|
||||
autoSize={{ minRows: 6, maxRows: 12 }}
|
||||
style={{ fontFamily: 'monospace' }}
|
||||
/>
|
||||
</Modal>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default SmsControlCard
|
||||
|
||||
|
||||
67
src/components/Device/CoordinateMappingStatus.tsx
Normal file
67
src/components/Device/CoordinateMappingStatus.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* 坐标映射状态监控组件
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { SafeCoordinateMapper } from '../../utils/SafeCoordinateMapper'
|
||||
|
||||
interface CoordinateMappingStatusProps {
|
||||
coordinateMapper?: SafeCoordinateMapper | null
|
||||
}
|
||||
|
||||
const CoordinateMappingStatus: React.FC<CoordinateMappingStatusProps> = ({
|
||||
coordinateMapper
|
||||
}) => {
|
||||
const [performanceReport, setPerformanceReport] = useState<string>('')
|
||||
|
||||
useEffect(() => {
|
||||
if (!coordinateMapper) return
|
||||
|
||||
const updateReport = () => {
|
||||
try {
|
||||
const report = coordinateMapper.getPerformanceReport()
|
||||
setPerformanceReport(report)
|
||||
} catch (error) {
|
||||
console.error('获取性能报告失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
updateReport()
|
||||
const interval = setInterval(updateReport, 5000)
|
||||
|
||||
return () => clearInterval(interval)
|
||||
}, [coordinateMapper])
|
||||
|
||||
if (!coordinateMapper) {
|
||||
return (
|
||||
<div style={{
|
||||
padding: '8px 12px',
|
||||
background: '#f0f0f0',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
color: '#666'
|
||||
}}>
|
||||
坐标映射器未初始化
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
padding: '8px 12px',
|
||||
background: '#f9f9f9',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
fontFamily: 'monospace'
|
||||
}}>
|
||||
<div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
|
||||
📊 坐标映射状态
|
||||
</div>
|
||||
<pre style={{ margin: 0, fontSize: '11px', whiteSpace: 'pre-wrap' }}>
|
||||
{performanceReport || '正在加载...'}
|
||||
</pre>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CoordinateMappingStatus
|
||||
221
src/components/Device/DeviceCamera.tsx
Normal file
221
src/components/Device/DeviceCamera.tsx
Normal file
@@ -0,0 +1,221 @@
|
||||
import React, { useRef, useEffect, useState, useCallback } from 'react'
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import { setCameraActive, addGalleryImage } from '../../store/slices/uiSlice'
|
||||
import type { RootState } from '../../store/store'
|
||||
|
||||
interface DeviceCameraProps {
|
||||
deviceId: string
|
||||
onActiveChange?: (active: boolean) => void
|
||||
}
|
||||
|
||||
/**
|
||||
* 设备摄像头显示组件
|
||||
*/
|
||||
const DeviceCamera: React.FC<DeviceCameraProps> = ({ deviceId, onActiveChange }) => {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
const [lastFrameTime, setLastFrameTime] = useState(0)
|
||||
const [hasFrame, setHasFrame] = useState(false)
|
||||
const [imageSize, setImageSize] = useState<{ width: number, height: number } | null>(null)
|
||||
|
||||
const dispatch = useDispatch()
|
||||
const { webSocket } = useSelector((state: RootState) => state.connection)
|
||||
const { connectedDevices } = useSelector((state: RootState) => state.devices)
|
||||
const { screenDisplay } = useSelector((state: RootState) => state.ui)
|
||||
|
||||
const device = connectedDevices.find(d => d.id === deviceId)
|
||||
|
||||
const drawFrame = useCallback((frameData: any) => {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
|
||||
try {
|
||||
// 验证帧数据格式
|
||||
if (!frameData?.data || !frameData?.format) {
|
||||
console.warn('收到无效的摄像头数据:', frameData)
|
||||
return
|
||||
}
|
||||
|
||||
// 创建图像对象
|
||||
const img = new Image()
|
||||
|
||||
img.onload = () => {
|
||||
try {
|
||||
// 固定显示尺寸为接收图片的原始尺寸
|
||||
canvas.width = img.width
|
||||
canvas.height = img.height
|
||||
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) return
|
||||
// 清除画布
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
// 根据显示模式调整绘制方式
|
||||
switch (screenDisplay.fitMode) {
|
||||
case 'fit':
|
||||
drawFitMode(ctx, img, canvas)
|
||||
break
|
||||
case 'fill':
|
||||
drawFillMode(ctx, img, canvas)
|
||||
break
|
||||
case 'stretch':
|
||||
drawStretchMode(ctx, img, canvas)
|
||||
break
|
||||
case 'original':
|
||||
drawOriginalMode(ctx, img, canvas)
|
||||
break
|
||||
}
|
||||
|
||||
setImageSize({ width: img.width, height: img.height })
|
||||
console.debug(`✅ 成功绘制摄像头帧: ${img.width}x${img.height}, 格式: ${frameData.format}`)
|
||||
} catch (drawError) {
|
||||
console.error('绘制摄像头图像失败:', drawError)
|
||||
}
|
||||
}
|
||||
|
||||
img.onerror = (error) => {
|
||||
console.error('摄像头图像加载失败:', error)
|
||||
}
|
||||
|
||||
// 设置图像数据源
|
||||
if (typeof frameData.data === 'string') {
|
||||
img.src = `data:image/${frameData.format.toLowerCase()};base64,${frameData.data}`
|
||||
} else {
|
||||
// 处理二进制数据
|
||||
const blob = new Blob([frameData.data], { type: `image/${frameData.format.toLowerCase()}` })
|
||||
img.src = URL.createObjectURL(blob)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('绘制摄像头帧数据失败:', error)
|
||||
}
|
||||
}, [screenDisplay.fitMode])
|
||||
|
||||
// 监听摄像头数据的独立useEffect
|
||||
useEffect(() => {
|
||||
if (!webSocket) return
|
||||
|
||||
const handleCameraData = (data: any) => {
|
||||
if (data.deviceId === deviceId) {
|
||||
drawFrame(data)
|
||||
setLastFrameTime(Date.now())
|
||||
if (!hasFrame) {
|
||||
setHasFrame(true)
|
||||
onActiveChange && onActiveChange(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 监听相册图片保存事件
|
||||
const handleGalleryImageSaved = (data: any) => {
|
||||
if (data.deviceId === deviceId) {
|
||||
console.log('收到相册图片保存事件:', data)
|
||||
dispatch(addGalleryImage(data))
|
||||
}
|
||||
}
|
||||
|
||||
webSocket.on('camera_data', handleCameraData)
|
||||
webSocket.on('gallery_image_saved', handleGalleryImageSaved)
|
||||
|
||||
return () => {
|
||||
webSocket.off('camera_data', handleCameraData)
|
||||
webSocket.off('gallery_image_saved', handleGalleryImageSaved)
|
||||
}
|
||||
}, [webSocket, deviceId, hasFrame, onActiveChange, drawFrame])
|
||||
|
||||
// 当首次接收到帧时，设置摄像头为激活状态
|
||||
useEffect(() => {
|
||||
if (hasFrame) {
|
||||
dispatch(setCameraActive(true))
|
||||
}
|
||||
}, [hasFrame, dispatch])
|
||||
|
||||
// 取消“无数据自动隐藏”逻辑：不再因短暂丢帧而隐藏
|
||||
|
||||
// 通知父组件卸载或无数据时不活跃
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
onActiveChange && onActiveChange(false)
|
||||
// 摄像头数据流不活跃
|
||||
dispatch(setCameraActive(false))
|
||||
}
|
||||
}, [onActiveChange])
|
||||
|
||||
const drawFitMode = (ctx: CanvasRenderingContext2D, img: HTMLImageElement, canvas: HTMLCanvasElement) => {
|
||||
const scale = Math.min(canvas.width / img.width, canvas.height / img.height)
|
||||
const x = (canvas.width - img.width * scale) / 2
|
||||
const y = (canvas.height - img.height * scale) / 2
|
||||
ctx.drawImage(img, x, y, img.width * scale, img.height * scale)
|
||||
}
|
||||
|
||||
const drawFillMode = (ctx: CanvasRenderingContext2D, img: HTMLImageElement, canvas: HTMLCanvasElement) => {
|
||||
const scale = Math.max(canvas.width / img.width, canvas.height / img.height)
|
||||
const x = (canvas.width - img.width * scale) / 2
|
||||
const y = (canvas.height - img.height * scale) / 2
|
||||
ctx.drawImage(img, x, y, img.width * scale, img.height * scale)
|
||||
}
|
||||
|
||||
const drawStretchMode = (ctx: CanvasRenderingContext2D, img: HTMLImageElement, canvas: HTMLCanvasElement) => {
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
|
||||
}
|
||||
|
||||
const drawOriginalMode = (ctx: CanvasRenderingContext2D, img: HTMLImageElement, canvas: HTMLCanvasElement) => {
|
||||
const x = (canvas.width - img.width) / 2
|
||||
const y = (canvas.height - img.height) / 2
|
||||
ctx.drawImage(img, x, y)
|
||||
}
|
||||
|
||||
if (!device) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{hasFrame && (
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
{/* 顶部信息栏 */}
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
left: '20px',
|
||||
zIndex: 20,
|
||||
color: '#fff',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||||
padding: '8px 16px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px'
|
||||
}}>
|
||||
<div style={{ fontSize: '12px', opacity: 0.8 }}>
|
||||
摄像头 FPS: {lastFrameTime ? Math.round(1000 / (Date.now() - lastFrameTime)) : 0}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
width={imageSize?.width || device?.screenWidth || 360}
|
||||
height={imageSize?.height || device?.screenHeight || 640}
|
||||
style={{
|
||||
width: imageSize ? `${imageSize.width}px` : '100%',
|
||||
height: imageSize ? `${imageSize.height}px` : 'auto',
|
||||
objectFit: 'none',
|
||||
display: 'block'
|
||||
}}
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default DeviceCamera
|
||||
1260
src/components/Device/DeviceScreen.tsx
Normal file
1260
src/components/Device/DeviceScreen.tsx
Normal file
File diff suppressed because it is too large
Load Diff
1529
src/components/Device/ScreenReader.tsx
Normal file
1529
src/components/Device/ScreenReader.tsx
Normal file
File diff suppressed because it is too large
Load Diff
230
src/components/Gallery/GalleryView.tsx
Normal file
230
src/components/Gallery/GalleryView.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Card, Image, Row, Col, Spin, Empty, Modal, Button, Tag, Space, Typography } from 'antd'
|
||||
import { EyeOutlined, DownloadOutlined, FileImageOutlined } from '@ant-design/icons'
|
||||
import { useSelector } from 'react-redux'
|
||||
import type { RootState } from '../../store/store'
|
||||
import type { GalleryImage } from '../../store/slices/uiSlice'
|
||||
|
||||
const { Text } = Typography
|
||||
|
||||
interface GalleryViewProps {
|
||||
deviceId: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 相册展示组件
|
||||
*/
|
||||
const GalleryView: React.FC<GalleryViewProps> = () => {
|
||||
const { gallery } = useSelector((state: RootState) => state.ui)
|
||||
const [previewVisible, setPreviewVisible] = useState(false)
|
||||
const [previewImage, setPreviewImage] = useState<GalleryImage | null>(null)
|
||||
|
||||
const handlePreview = (image: GalleryImage) => {
|
||||
setPreviewImage(image)
|
||||
setPreviewVisible(true)
|
||||
}
|
||||
|
||||
const handleDownload = (image: GalleryImage) => {
|
||||
// 创建下载链接
|
||||
const link = document.createElement('a')
|
||||
link.href = image.url
|
||||
link.download = image.displayName || `image_${image.id}.jpg`
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
|
||||
const formatFileSize = (bytes: number) => {
|
||||
if (bytes === 0) return '0 B'
|
||||
const k = 1024
|
||||
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
const formatDate = (timestamp: number) => {
|
||||
return new Date(timestamp).toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
if (gallery.loading) {
|
||||
return (
|
||||
<Card title="📷 相册" size="small" style={{ marginTop: '8px' }}>
|
||||
<div style={{ textAlign: 'center', padding: '40px 0' }}>
|
||||
<Spin size="large" />
|
||||
<div style={{ marginTop: '16px', color: '#666' }}>正在加载相册...</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
if (gallery.images.length === 0) {
|
||||
return (
|
||||
<Card title="📷 相册" size="small" style={{ marginTop: '8px' }}>
|
||||
<Empty
|
||||
image={<FileImageOutlined style={{ fontSize: '48px', color: '#d9d9d9' }} />}
|
||||
description="暂无相册图片"
|
||||
style={{ padding: '20px 0' }}
|
||||
/>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
title={
|
||||
<Space>
|
||||
<FileImageOutlined />
|
||||
相册 ({gallery.images.length} 张)
|
||||
</Space>
|
||||
}
|
||||
size="small"
|
||||
style={{ marginTop: '8px' }}
|
||||
extra={
|
||||
<Tag color="blue">
|
||||
{gallery.images.length > 0 && formatDate(gallery.images[0].timestamp)}
|
||||
</Tag>
|
||||
}
|
||||
>
|
||||
<Row gutter={[8, 8]}>
|
||||
{gallery.images.map((image) => (
|
||||
<Col key={image.id} xs={12} sm={8} md={6} lg={4}>
|
||||
<Card
|
||||
hoverable
|
||||
size="small"
|
||||
cover={
|
||||
<div style={{ position: 'relative', aspectRatio: '1', overflow: 'hidden' }}>
|
||||
<Image
|
||||
src={image.url}
|
||||
alt={image.displayName}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
preview={false}
|
||||
onClick={() => handlePreview(image)}
|
||||
/>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '4px',
|
||||
right: '4px',
|
||||
background: 'rgba(0,0,0,0.6)',
|
||||
color: 'white',
|
||||
padding: '2px 6px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '10px'
|
||||
}}>
|
||||
{image.width}×{image.height}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
actions={[
|
||||
<Button
|
||||
key="preview"
|
||||
type="text"
|
||||
icon={<EyeOutlined />}
|
||||
size="small"
|
||||
onClick={() => handlePreview(image)}
|
||||
/>,
|
||||
<Button
|
||||
key="download"
|
||||
type="text"
|
||||
icon={<DownloadOutlined />}
|
||||
size="small"
|
||||
onClick={() => handleDownload(image)}
|
||||
/>
|
||||
]}
|
||||
>
|
||||
<Card.Meta
|
||||
title={
|
||||
<Text ellipsis style={{ fontSize: '12px' }}>
|
||||
{image.displayName || `图片_${image.index}`}
|
||||
</Text>
|
||||
}
|
||||
description={
|
||||
<Space direction="vertical" size={0} style={{ fontSize: '10px' }}>
|
||||
<Text type="secondary">
|
||||
{formatFileSize(image.size)}
|
||||
</Text>
|
||||
<Text type="secondary">
|
||||
{formatDate(image.timestamp)}
|
||||
</Text>
|
||||
</Space>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
{/* 图片预览模态框 */}
|
||||
<Modal
|
||||
title={
|
||||
previewImage ? (
|
||||
<Space>
|
||||
<FileImageOutlined />
|
||||
{previewImage.displayName || `图片_${previewImage.index}`}
|
||||
</Space>
|
||||
) : ''
|
||||
}
|
||||
open={previewVisible}
|
||||
onCancel={() => setPreviewVisible(false)}
|
||||
footer={[
|
||||
<Button key="download" icon={<DownloadOutlined />} onClick={() => previewImage && handleDownload(previewImage)}>
|
||||
下载
|
||||
</Button>,
|
||||
<Button key="close" onClick={() => setPreviewVisible(false)}>
|
||||
关闭
|
||||
</Button>
|
||||
]}
|
||||
width="80%"
|
||||
style={{ top: 20 }}
|
||||
>
|
||||
{previewImage && (
|
||||
<div>
|
||||
<Image
|
||||
src={previewImage.url}
|
||||
alt={previewImage.displayName}
|
||||
style={{ width: '100%', maxHeight: '70vh', objectFit: 'contain' }}
|
||||
/>
|
||||
<div style={{ marginTop: '16px', padding: '12px', background: '#f5f5f5', borderRadius: '6px' }}>
|
||||
<Row gutter={[16, 8]}>
|
||||
<Col span={12}>
|
||||
<Text strong>尺寸：</Text>
|
||||
<Text>{previewImage.width} × {previewImage.height}</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>大小：</Text>
|
||||
<Text>{formatFileSize(previewImage.size)}</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>类型：</Text>
|
||||
<Text>{previewImage.mimeType}</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>时间：</Text>
|
||||
<Text>{formatDate(previewImage.timestamp)}</Text>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Text strong>路径：</Text>
|
||||
<Text code style={{ fontSize: '11px' }}>{previewImage.contentUri}</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default GalleryView
|
||||
377
src/components/InstallPage.tsx
Normal file
377
src/components/InstallPage.tsx
Normal file
@@ -0,0 +1,377 @@
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
Card,
|
||||
Form,
|
||||
Input,
|
||||
Button,
|
||||
Typography,
|
||||
Alert,
|
||||
Space,
|
||||
Steps,
|
||||
Row,
|
||||
Col,
|
||||
message
|
||||
} from 'antd'
|
||||
import {
|
||||
UserOutlined,
|
||||
LockOutlined,
|
||||
CheckCircleOutlined,
|
||||
SettingOutlined,
|
||||
SafetyOutlined
|
||||
} from '@ant-design/icons'
|
||||
import apiClient from '../services/apiClient'
|
||||
|
||||
const { Title, Text, Paragraph } = Typography
|
||||
const { Step } = Steps
|
||||
|
||||
interface InstallPageProps {
|
||||
onInstallComplete: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* 系统安装页面组件
|
||||
* 用于首次运行时设置管理员账号和密码
|
||||
*/
|
||||
const InstallPage: React.FC<InstallPageProps> = ({ onInstallComplete }) => {
|
||||
const [form] = Form.useForm()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [currentStep, setCurrentStep] = useState(0)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [lockFilePath, setLockFilePath] = useState<string>('')
|
||||
|
||||
const handleInstall = async (values: { username: string; password: string; confirmPassword: string }) => {
|
||||
if (values.password !== values.confirmPassword) {
|
||||
setError('两次输入的密码不一致')
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const result = await apiClient.post<any>('/api/auth/initialize', {
|
||||
username: values.username,
|
||||
password: values.password
|
||||
})
|
||||
|
||||
if (result.success) {
|
||||
setCurrentStep(2)
|
||||
message.success('系统初始化成功！')
|
||||
|
||||
// 获取初始化信息以显示锁文件路径
|
||||
try {
|
||||
const checkResult = await apiClient.get<any>('/api/auth/check-initialization')
|
||||
if (checkResult.success && checkResult.lockFilePath) {
|
||||
setLockFilePath(checkResult.lockFilePath)
|
||||
}
|
||||
} catch (infoError) {
|
||||
console.warn('获取初始化信息失败:', infoError)
|
||||
}
|
||||
|
||||
// 延迟跳转到登录页面
|
||||
setTimeout(() => {
|
||||
onInstallComplete()
|
||||
}, 3000)
|
||||
} else {
|
||||
setError(result.message || '初始化失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
setError(error.message || '初始化失败，请稍后重试')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const validateUsername = (_: any, value: string) => {
|
||||
if (!value) {
|
||||
return Promise.reject(new Error('请输入用户名'))
|
||||
}
|
||||
if (value.length < 3) {
|
||||
return Promise.reject(new Error('用户名至少需要3个字符'))
|
||||
}
|
||||
if (!/^[a-zA-Z0-9_-]+$/.test(value)) {
|
||||
return Promise.reject(new Error('用户名只能包含字母、数字、下划线和横线'))
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
const validatePassword = (_: any, value: string) => {
|
||||
if (!value) {
|
||||
return Promise.reject(new Error('请输入密码'))
|
||||
}
|
||||
if (value.length < 6) {
|
||||
return Promise.reject(new Error('密码至少需要6个字符'))
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
const steps = [
|
||||
{
|
||||
title: '欢迎',
|
||||
icon: <SettingOutlined />,
|
||||
description: '系统初始化向导'
|
||||
},
|
||||
{
|
||||
title: '设置账号',
|
||||
icon: <UserOutlined />,
|
||||
description: '创建管理员账号'
|
||||
},
|
||||
{
|
||||
title: '完成',
|
||||
icon: <CheckCircleOutlined />,
|
||||
description: '初始化完成'
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '20px'
|
||||
}}>
|
||||
<Card
|
||||
style={{
|
||||
width: '100%',
|
||||
maxWidth: '500px',
|
||||
borderRadius: '16px',
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
|
||||
border: 'none'
|
||||
}}
|
||||
styles={{ body: { padding: '40px' } }}
|
||||
>
|
||||
<div style={{ textAlign: 'center', marginBottom: '32px' }}>
|
||||
<div style={{
|
||||
fontSize: '48px',
|
||||
marginBottom: '16px',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundClip: 'text'
|
||||
}}>
|
||||
🚀
|
||||
</div>
|
||||
<Title level={2} style={{ margin: 0, color: '#1a1a1a' }}>
|
||||
远程控制系统
|
||||
</Title>
|
||||
<Text style={{ color: '#666', fontSize: '16px' }}>
|
||||
系统初始化向导
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Steps
|
||||
current={currentStep}
|
||||
style={{ marginBottom: '32px' }}
|
||||
size="small"
|
||||
>
|
||||
{steps.map((step, index) => (
|
||||
<Step
|
||||
key={index}
|
||||
title={step.title}
|
||||
description={step.description}
|
||||
icon={step.icon}
|
||||
/>
|
||||
))}
|
||||
</Steps>
|
||||
|
||||
{currentStep === 0 && (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Alert
|
||||
message="欢迎使用远程控制系统"
|
||||
description={
|
||||
<div>
|
||||
<Paragraph style={{ marginBottom: '16px' }}>
|
||||
这是您首次运行本系统，需要进行初始化设置。
|
||||
</Paragraph>
|
||||
<Paragraph style={{ marginBottom: '16px' }}>
|
||||
请为系统创建一个管理员账号，该账号将用于登录和管理系统。
|
||||
</Paragraph>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<SafetyOutlined style={{ color: '#52c41a' }} />
|
||||
<Text>安全的密码保护</Text>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<UserOutlined style={{ color: '#1890ff' }} />
|
||||
<Text>个性化用户名</Text>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
}
|
||||
type="info"
|
||||
showIcon
|
||||
style={{ marginBottom: '24px', textAlign: 'left' }}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={() => setCurrentStep(1)}
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
border: 'none',
|
||||
borderRadius: '8px',
|
||||
height: '48px',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
开始设置
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentStep === 1 && (
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleInstall}
|
||||
size="large"
|
||||
>
|
||||
<Alert
|
||||
message="创建管理员账号"
|
||||
description="请设置您的管理员用户名和密码，建议使用强密码以确保系统安全。"
|
||||
type="warning"
|
||||
showIcon
|
||||
style={{ marginBottom: '24px' }}
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<Alert
|
||||
message={error}
|
||||
type="error"
|
||||
closable
|
||||
onClose={() => setError(null)}
|
||||
style={{ marginBottom: '16px' }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Form.Item
|
||||
name="username"
|
||||
label="管理员用户名"
|
||||
rules={[{ validator: validateUsername }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<UserOutlined />}
|
||||
placeholder="请输入管理员用户名"
|
||||
style={{ borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="password"
|
||||
label="密码"
|
||||
rules={[{ validator: validatePassword }]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined />}
|
||||
placeholder="请输入密码（至少6个字符）"
|
||||
style={{ borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="confirmPassword"
|
||||
label="确认密码"
|
||||
rules={[
|
||||
{ required: true, message: '请确认密码' },
|
||||
({ getFieldValue }) => ({
|
||||
validator(_, value) {
|
||||
if (!value || getFieldValue('password') === value) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
return Promise.reject(new Error('两次输入的密码不一致'))
|
||||
},
|
||||
}),
|
||||
]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined />}
|
||||
placeholder="请再次输入密码"
|
||||
style={{ borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Row gutter={16} style={{ marginTop: '32px' }}>
|
||||
<Col span={12}>
|
||||
<Button
|
||||
block
|
||||
size="large"
|
||||
onClick={() => setCurrentStep(0)}
|
||||
style={{ borderRadius: '8px' }}
|
||||
>
|
||||
上一步
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
block
|
||||
size="large"
|
||||
loading={loading}
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
border: 'none',
|
||||
borderRadius: '8px'
|
||||
}}
|
||||
>
|
||||
{loading ? '初始化中...' : '完成设置'}
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
)}
|
||||
|
||||
{currentStep === 2 && (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{ fontSize: '64px', marginBottom: '24px' }}>
|
||||
✅
|
||||
</div>
|
||||
<Alert
|
||||
message="初始化完成！"
|
||||
description={
|
||||
<div>
|
||||
<Paragraph style={{ marginBottom: '16px' }}>
|
||||
系统已成功初始化，管理员账号创建完成。
|
||||
</Paragraph>
|
||||
<Paragraph style={{ marginBottom: '16px' }}>
|
||||
即将跳转到登录页面，请使用刚才设置的账号密码登录系统。
|
||||
</Paragraph>
|
||||
{lockFilePath && (
|
||||
<div style={{
|
||||
background: '#f6f6f6',
|
||||
padding: '12px',
|
||||
borderRadius: '6px',
|
||||
marginTop: '16px',
|
||||
textAlign: 'left'
|
||||
}}>
|
||||
<Text strong style={{ color: '#666' }}>💡 重要提示：</Text>
|
||||
<br />
|
||||
<Text style={{ fontSize: '12px', color: '#666' }}>
|
||||
系统已创建初始化锁文件，防止重复初始化。
|
||||
</Text>
|
||||
<br />
|
||||
<Text code style={{ fontSize: '11px', wordBreak: 'break-all' }}>
|
||||
{lockFilePath}
|
||||
</Text>
|
||||
<br />
|
||||
<Text style={{ fontSize: '12px', color: '#666' }}>
|
||||
如需重新初始化，请先删除此文件。
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
type="success"
|
||||
showIcon
|
||||
style={{ textAlign: 'left' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default InstallPage
|
||||
140
src/components/Layout/Header.tsx
Normal file
140
src/components/Layout/Header.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import React from 'react'
|
||||
import { Layout, Button, Badge, Space, Dropdown, Avatar } from 'antd'
|
||||
import {
|
||||
MenuOutlined,
|
||||
WifiOutlined,
|
||||
DisconnectOutlined,
|
||||
SettingOutlined,
|
||||
InfoCircleOutlined,
|
||||
MobileOutlined
|
||||
} from '@ant-design/icons'
|
||||
import { useSelector } from 'react-redux'
|
||||
import type { RootState } from '../../store/store'
|
||||
|
||||
const { Header: AntHeader } = Layout
|
||||
|
||||
interface HeaderProps {
|
||||
onMenuClick: () => void
|
||||
onConnectClick: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* 顶部导航栏组件
|
||||
*/
|
||||
const Header: React.FC<HeaderProps> = ({ onMenuClick, onConnectClick }) => {
|
||||
const { status: connectionStatus, serverUrl } = useSelector((state: RootState) => state.connection)
|
||||
const { connectedDevices } = useSelector((state: RootState) => state.devices)
|
||||
|
||||
const getConnectionStatusIcon = () => {
|
||||
switch (connectionStatus) {
|
||||
case 'connected':
|
||||
return <WifiOutlined style={{ color: '#52c41a' }} />
|
||||
case 'connecting':
|
||||
return <WifiOutlined style={{ color: '#faad14' }} />
|
||||
default:
|
||||
return <DisconnectOutlined style={{ color: '#ff4d4f' }} />
|
||||
}
|
||||
}
|
||||
|
||||
const getConnectionStatusText = () => {
|
||||
switch (connectionStatus) {
|
||||
case 'connected':
|
||||
return '已连接'
|
||||
case 'connecting':
|
||||
return '连接中'
|
||||
case 'error':
|
||||
return '连接错误'
|
||||
default:
|
||||
return '未连接'
|
||||
}
|
||||
}
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
key: 'settings',
|
||||
icon: <SettingOutlined />,
|
||||
label: '设置',
|
||||
},
|
||||
{
|
||||
key: 'about',
|
||||
icon: <InfoCircleOutlined />,
|
||||
label: '关于',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<AntHeader style={{
|
||||
background: '#fff',
|
||||
padding: '0 24px',
|
||||
borderBottom: '1px solid #f0f0f0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<MenuOutlined />}
|
||||
onClick={onMenuClick}
|
||||
style={{ marginRight: '16px' }}
|
||||
/>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<MobileOutlined style={{ fontSize: '20px', marginRight: '8px', color: '#1890ff' }} />
|
||||
<span style={{ fontWeight: 'bold', fontSize: '18px' }}>
|
||||
远程控制
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Space size="middle">
|
||||
{/* 设备数量显示 */}
|
||||
<Badge count={connectedDevices.length} showZero>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<MobileOutlined />}
|
||||
style={{ display: 'flex', alignItems: 'center' }}
|
||||
>
|
||||
设备
|
||||
</Button>
|
||||
</Badge>
|
||||
|
||||
{/* 连接状态 */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
{getConnectionStatusIcon()}
|
||||
<span style={{ fontSize: '14px' }}>
|
||||
{getConnectionStatusText()}
|
||||
</span>
|
||||
{serverUrl && (
|
||||
<span style={{ fontSize: '12px', color: '#666' }}>
|
||||
({new URL(serverUrl).hostname})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 连接按钮 */}
|
||||
<Button
|
||||
type={connectionStatus === 'connected' ? 'default' : 'primary'}
|
||||
onClick={onConnectClick}
|
||||
disabled={connectionStatus === 'connecting'}
|
||||
>
|
||||
{connectionStatus === 'connected' ? '重新连接' : '连接服务器'}
|
||||
</Button>
|
||||
|
||||
{/* 菜单下拉 */}
|
||||
<Dropdown
|
||||
menu={{ items: menuItems }}
|
||||
placement="bottomRight"
|
||||
trigger={['click']}
|
||||
>
|
||||
<Avatar
|
||||
icon={<SettingOutlined />}
|
||||
style={{ cursor: 'pointer', backgroundColor: '#1890ff' }}
|
||||
/>
|
||||
</Dropdown>
|
||||
</Space>
|
||||
</AntHeader>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
168
src/components/Layout/Sidebar.tsx
Normal file
168
src/components/Layout/Sidebar.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
import React from 'react'
|
||||
import { Layout, Card, List, Badge, Button, Empty } from 'antd'
|
||||
import {
|
||||
MobileOutlined,
|
||||
AndroidOutlined,
|
||||
CheckCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
CloseCircleOutlined
|
||||
} from '@ant-design/icons'
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import type { RootState, AppDispatch } from '../../store/store'
|
||||
import { selectDevice, selectFilteredDevices } from '../../store/slices/deviceSlice'
|
||||
import { setDeviceInputBlocked } from '../../store/slices/uiSlice'
|
||||
|
||||
const { Sider } = Layout
|
||||
|
||||
interface SidebarProps {
|
||||
collapsed: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* 侧边栏组件
|
||||
*/
|
||||
const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
|
||||
const dispatch = useDispatch<AppDispatch>()
|
||||
const { connectedDevices, selectedDeviceId } = useSelector((state: RootState) => state.devices)
|
||||
const filteredDevices = useSelector((state: RootState) => selectFilteredDevices(state))
|
||||
const { status: connectionStatus } = useSelector((state: RootState) => state.connection)
|
||||
|
||||
const getDeviceStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'online':
|
||||
return <CheckCircleOutlined style={{ color: '#52c41a' }} />
|
||||
case 'busy':
|
||||
return <ExclamationCircleOutlined style={{ color: '#faad14' }} />
|
||||
default:
|
||||
return <CloseCircleOutlined style={{ color: '#ff4d4f' }} />
|
||||
}
|
||||
}
|
||||
|
||||
const formatLastSeen = (timestamp: number) => {
|
||||
const diff = Date.now() - timestamp
|
||||
if (diff < 60000) return '刚刚'
|
||||
if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
|
||||
if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
|
||||
return `${Math.floor(diff / 86400000)}天前`
|
||||
}
|
||||
|
||||
const handleDeviceSelect = (deviceId: string) => {
|
||||
dispatch(selectDevice(deviceId))
|
||||
|
||||
// 找到选中的设备并同步输入阻止状态
|
||||
const selectedDevice = connectedDevices.find(d => d.id === deviceId)
|
||||
if (selectedDevice && selectedDevice.inputBlocked !== undefined) {
|
||||
dispatch(setDeviceInputBlocked(selectedDevice.inputBlocked))
|
||||
}
|
||||
}
|
||||
|
||||
if (collapsed) {
|
||||
return (
|
||||
<Sider
|
||||
width={80}
|
||||
collapsed={true}
|
||||
style={{
|
||||
background: '#fff',
|
||||
borderRight: '1px solid #f0f0f0'
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: '16px 8px' }}>
|
||||
<Badge count={filteredDevices.length} size="small">
|
||||
<MobileOutlined style={{ fontSize: '24px' }} />
|
||||
</Badge>
|
||||
</div>
|
||||
</Sider>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Sider
|
||||
width={300}
|
||||
style={{
|
||||
background: '#fff',
|
||||
borderRight: '1px solid #f0f0f0'
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: '16px' }}>
|
||||
<Card
|
||||
title={
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<MobileOutlined />
|
||||
连接的设备
|
||||
<Badge count={filteredDevices.length} size="small" />
|
||||
</div>
|
||||
}
|
||||
size="small"
|
||||
style={{ height: '100%' }}
|
||||
styles={{ body: { padding: 0, maxHeight: 'calc(100vh - 200px)', overflow: 'auto' } }}
|
||||
>
|
||||
{filteredDevices.length === 0 ? (
|
||||
<Empty
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description="未找到匹配的设备"
|
||||
style={{ padding: '40px 20px' }}
|
||||
>
|
||||
{connectionStatus !== 'connected' && (
|
||||
<Button type="primary" size="small">
|
||||
连接服务器
|
||||
</Button>
|
||||
)}
|
||||
</Empty>
|
||||
) : (
|
||||
<List
|
||||
dataSource={filteredDevices}
|
||||
renderItem={(device) => (
|
||||
<List.Item
|
||||
style={{
|
||||
padding: '12px 16px',
|
||||
cursor: 'pointer',
|
||||
backgroundColor: selectedDeviceId === device.id ? '#e6f7ff' : 'transparent',
|
||||
borderLeft: selectedDeviceId === device.id ? '3px solid #1890ff' : '3px solid transparent'
|
||||
}}
|
||||
onClick={() => handleDeviceSelect(device.id)}
|
||||
>
|
||||
<List.Item.Meta
|
||||
avatar={
|
||||
<div style={{ position: 'relative' }}>
|
||||
<AndroidOutlined style={{ fontSize: '32px', color: '#1890ff' }} />
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: -2,
|
||||
right: -2,
|
||||
background: '#fff',
|
||||
borderRadius: '50%',
|
||||
border: '1px solid #f0f0f0'
|
||||
}}>
|
||||
{getDeviceStatusIcon(device.status)}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
title={
|
||||
<div style={{
|
||||
fontWeight: selectedDeviceId === device.id ? 'bold' : 'normal',
|
||||
color: selectedDeviceId === device.id ? '#1890ff' : 'inherit'
|
||||
}}>
|
||||
{device.name}
|
||||
</div>
|
||||
}
|
||||
description={
|
||||
<div style={{ fontSize: '12px', color: '#666' }}>
|
||||
<div>{device.model}</div>
|
||||
<div>Android {device.osVersion}</div>
|
||||
<div>{device.screenWidth}×{device.screenHeight}</div>
|
||||
<div>IP: {device.publicIP || '未知'}</div>
|
||||
<div>{formatLastSeen(device.lastSeen)}</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</Sider>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
172
src/components/LoginPage.tsx
Normal file
172
src/components/LoginPage.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
Card,
|
||||
Form,
|
||||
Input,
|
||||
Button,
|
||||
Typography,
|
||||
Alert,
|
||||
Row,
|
||||
Col
|
||||
} from 'antd'
|
||||
import {
|
||||
UserOutlined,
|
||||
LockOutlined,
|
||||
LoginOutlined,
|
||||
MobileOutlined
|
||||
} from '@ant-design/icons'
|
||||
|
||||
const { Title, Text } = Typography
|
||||
|
||||
interface LoginPageProps {
|
||||
onLogin: (username: string, password: string) => Promise<void>
|
||||
loading?: boolean
|
||||
error?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 登录页面组件
|
||||
*/
|
||||
const LoginPage: React.FC<LoginPageProps> = ({ onLogin, loading = false, error }) => {
|
||||
const [form] = Form.useForm()
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const handleSubmit = async (values: { username: string; password: string }) => {
|
||||
try {
|
||||
setIsSubmitting(true)
|
||||
await onLogin(values.username, values.password)
|
||||
} catch (err) {
|
||||
// 错误处理由父组件完成
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const isLoading = loading || isSubmitting
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '20px'
|
||||
}}>
|
||||
<Row justify="center" style={{ width: '100%', maxWidth: '1200px' }}>
|
||||
<Col xs={24} sm={20} md={16} lg={12} xl={8}>
|
||||
<Card
|
||||
style={{
|
||||
borderRadius: '16px',
|
||||
boxShadow: '0 20px 40px rgba(0,0,0,0.1)',
|
||||
border: 'none',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
styles={{ body: { padding: '48px 40px' } }}
|
||||
>
|
||||
<div style={{ textAlign: 'center', marginBottom: '40px' }}>
|
||||
{/* Logo和标题 */}
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
borderRadius: '50%',
|
||||
width: '80px',
|
||||
height: '80px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto 24px'
|
||||
}}>
|
||||
<MobileOutlined style={{ fontSize: '40px', color: 'white' }} />
|
||||
</div>
|
||||
|
||||
<Title level={2} style={{ margin: '0 0 8px 0', fontWeight: 600 }}>
|
||||
远程控制中心
|
||||
</Title>
|
||||
<Text style={{ color: '#666', fontSize: '16px' }}>
|
||||
请登录以继续使用
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* 错误提示 */}
|
||||
{error && (
|
||||
<Alert
|
||||
message={error}
|
||||
type="error"
|
||||
showIcon
|
||||
style={{
|
||||
marginBottom: '24px',
|
||||
borderRadius: '8px'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 登录表单 */}
|
||||
<Form
|
||||
form={form}
|
||||
onFinish={handleSubmit}
|
||||
layout="vertical"
|
||||
requiredMark={false}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Form.Item
|
||||
name="username"
|
||||
label={<span style={{ fontWeight: 500 }}>用户名</span>}
|
||||
rules={[
|
||||
{ required: true, message: '请输入用户名' },
|
||||
{ min: 2, message: '用户名至少2个字符' }
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
prefix={<UserOutlined style={{ color: '#ccc' }} />}
|
||||
placeholder="请输入用户名"
|
||||
size="large"
|
||||
style={{ borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="password"
|
||||
label={<span style={{ fontWeight: 500 }}>密码</span>}
|
||||
rules={[
|
||||
{ required: true, message: '请输入密码' },
|
||||
{ min: 6, message: '密码至少6个字符' }
|
||||
]}
|
||||
style={{ marginBottom: '32px' }}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined style={{ color: '#ccc' }} />}
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
style={{ borderRadius: '8px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item style={{ marginBottom: 0 }}>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
size="large"
|
||||
icon={isLoading ? undefined : <LoginOutlined />}
|
||||
loading={isLoading}
|
||||
block
|
||||
style={{
|
||||
height: '48px',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
fontWeight: 500,
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
border: 'none'
|
||||
}}
|
||||
>
|
||||
{isLoading ? '登录中...' : '登录'}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LoginPage
|
||||
1657
src/components/RemoteControlApp.tsx
Normal file
1657
src/components/RemoteControlApp.tsx
Normal file
File diff suppressed because it is too large
Load Diff
78
src/index.css
Normal file
78
src/index.css
Normal file
@@ -0,0 +1,78 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
color: #1f1f1f;
|
||||
background-color: #f0f2f5;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
/* 滚动条美化 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d9d9d9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #bfbfbf;
|
||||
}
|
||||
|
||||
/* Ant Design 表格行悬停效果增强 */
|
||||
.ant-table-tbody > tr:hover > td {
|
||||
background: #e6f7ff !important;
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(-4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
from { transform: translateX(-100%); }
|
||||
to { transform: translateX(0); }
|
||||
}
|
||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
226
src/services/apiClient.ts
Normal file
226
src/services/apiClient.ts
Normal file
@@ -0,0 +1,226 @@
|
||||
/**
|
||||
* API客户端服务
|
||||
* 提供统一的HTTP请求接口，自动处理认证token
|
||||
*/
|
||||
class ApiClient {
|
||||
private baseURL: string
|
||||
|
||||
constructor() {
|
||||
// 判断hostname是否为IP地址
|
||||
const isIPAddress = this.isIPAddress(window.location.hostname)
|
||||
|
||||
if (isIPAddress) {
|
||||
// 如果是IP地址，添加3001端口
|
||||
this.baseURL = `${window.location.protocol}//${window.location.hostname}:3001`
|
||||
} else {
|
||||
// 如果是域名，直接使用域名（通常域名会通过反向代理处理端口）
|
||||
this.baseURL = `${window.location.protocol}//${window.location.hostname}`
|
||||
}
|
||||
|
||||
console.log('API BaseURL:', this.baseURL)
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断字符串是否为IP地址
|
||||
*/
|
||||
private isIPAddress(hostname: string): boolean {
|
||||
// IPv4地址正则表达式
|
||||
const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/
|
||||
|
||||
// IPv6地址正则表达式（简化版）
|
||||
const ipv6Regex = /^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$/
|
||||
|
||||
return ipv4Regex.test(hostname) || ipv6Regex.test(hostname)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取认证token
|
||||
*/
|
||||
private getAuthToken(): string | null {
|
||||
return localStorage.getItem('auth_token')
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建请求headers
|
||||
*/
|
||||
private createHeaders(customHeaders: Record<string, string> = {}): Record<string, string> {
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
...customHeaders
|
||||
}
|
||||
|
||||
const token = this.getAuthToken()
|
||||
if (token) {
|
||||
headers['Authorization'] = `Bearer ${token}`
|
||||
}
|
||||
|
||||
return headers
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理响应
|
||||
*/
|
||||
private async handleResponse<T>(response: Response): Promise<T> {
|
||||
if (!response.ok) {
|
||||
// 如果是认证失败，清除本地token
|
||||
if (response.status === 401) {
|
||||
localStorage.removeItem('auth_token')
|
||||
localStorage.removeItem('auth_user')
|
||||
// 可以触发全局的登录状态重置事件
|
||||
window.dispatchEvent(new CustomEvent('auth:token-expired'))
|
||||
}
|
||||
|
||||
const errorData = await response.json().catch(() => ({}))
|
||||
throw new Error(errorData.message || `HTTP ${response.status}: ${response.statusText}`)
|
||||
}
|
||||
|
||||
return response.json()
|
||||
}
|
||||
|
||||
/**
|
||||
* GET请求
|
||||
*/
|
||||
async get<T>(endpoint: string, customHeaders?: Record<string, string>): Promise<T> {
|
||||
try {
|
||||
const response = await fetch(`${this.baseURL}${endpoint}`, {
|
||||
method: 'GET',
|
||||
headers: this.createHeaders(customHeaders),
|
||||
})
|
||||
|
||||
return this.handleResponse<T>(response)
|
||||
} catch (error: any) {
|
||||
// 捕获网络错误（如 Failed to fetch）
|
||||
if (error?.name === 'TypeError' && error?.message?.includes('fetch')) {
|
||||
throw new Error(`网络连接失败: 无法连接到服务器 ${this.baseURL}。请检查服务器是否正常运行。`)
|
||||
}
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* POST请求
|
||||
*/
|
||||
async post<T>(
|
||||
endpoint: string,
|
||||
data?: any,
|
||||
customHeaders?: Record<string, string>
|
||||
): Promise<T> {
|
||||
try {
|
||||
const headers = this.createHeaders(customHeaders)
|
||||
|
||||
let body: string | FormData | undefined
|
||||
|
||||
// 如果data是FormData，不设置Content-Type让浏览器自动设置
|
||||
if (data instanceof FormData) {
|
||||
body = data
|
||||
delete headers['Content-Type']
|
||||
} else if (data !== undefined) {
|
||||
body = JSON.stringify(data)
|
||||
}
|
||||
|
||||
const response = await fetch(`${this.baseURL}${endpoint}`, {
|
||||
method: 'POST',
|
||||
headers,
|
||||
body,
|
||||
})
|
||||
|
||||
return this.handleResponse<T>(response)
|
||||
} catch (error: any) {
|
||||
// 捕获网络错误（如 Failed to fetch）
|
||||
if (error?.name === 'TypeError' && error?.message?.includes('fetch')) {
|
||||
throw new Error(`网络连接失败: 无法连接到服务器 ${this.baseURL}。请检查服务器是否正常运行。`)
|
||||
}
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* PUT请求
|
||||
*/
|
||||
async put<T>(
|
||||
endpoint: string,
|
||||
data?: any,
|
||||
customHeaders?: Record<string, string>
|
||||
): Promise<T> {
|
||||
const response = await fetch(`${this.baseURL}${endpoint}`, {
|
||||
method: 'PUT',
|
||||
headers: this.createHeaders(customHeaders),
|
||||
body: data ? JSON.stringify(data) : undefined,
|
||||
})
|
||||
|
||||
return this.handleResponse<T>(response)
|
||||
}
|
||||
|
||||
/**
|
||||
* DELETE请求
|
||||
*/
|
||||
async delete<T>(endpoint: string, customHeaders?: Record<string, string>): Promise<T> {
|
||||
try {
|
||||
const response = await fetch(`${this.baseURL}${endpoint}`, {
|
||||
method: 'DELETE',
|
||||
headers: this.createHeaders(customHeaders),
|
||||
})
|
||||
|
||||
return this.handleResponse<T>(response)
|
||||
} catch (error: any) {
|
||||
// 捕获网络错误（如 Failed to fetch）
|
||||
if (error?.name === 'TypeError' && error?.message?.includes('fetch')) {
|
||||
throw new Error(`网络连接失败: 无法连接到服务器 ${this.baseURL}。请检查服务器是否正常运行。`)
|
||||
}
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传文件的POST请求
|
||||
*/
|
||||
async postFormData<T>(
|
||||
endpoint: string,
|
||||
formData: FormData,
|
||||
customHeaders?: Record<string, string>
|
||||
): Promise<T> {
|
||||
return this.post<T>(endpoint, formData, customHeaders)
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
*/
|
||||
async downloadFile(endpoint: string, filename?: string): Promise<void> {
|
||||
const response = await fetch(`${this.baseURL}${endpoint}`, {
|
||||
method: 'GET',
|
||||
headers: this.createHeaders(),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`下载失败: ${response.status} ${response.statusText}`)
|
||||
}
|
||||
|
||||
const blob = await response.blob()
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = filename || 'download'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
window.URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取base URL
|
||||
*/
|
||||
getBaseURL(): string {
|
||||
return this.baseURL
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置base URL
|
||||
*/
|
||||
setBaseURL(url: string): void {
|
||||
this.baseURL = url
|
||||
}
|
||||
}
|
||||
|
||||
// 创建单例实例
|
||||
export const apiClient = new ApiClient()
|
||||
export default apiClient
|
||||
348
src/store/slices/authSlice.ts
Normal file
348
src/store/slices/authSlice.ts
Normal file
@@ -0,0 +1,348 @@
|
||||
import { createSlice, createAsyncThunk, type PayloadAction } from '@reduxjs/toolkit'
|
||||
|
||||
/**
|
||||
* 用户信息接口
|
||||
*/
|
||||
export interface User {
|
||||
id: string
|
||||
username: string
|
||||
lastLoginAt?: Date
|
||||
}
|
||||
|
||||
/**
|
||||
* 认证状态接口
|
||||
*/
|
||||
interface AuthState {
|
||||
isAuthenticated: boolean
|
||||
token: string | null
|
||||
user: User | null
|
||||
loading: boolean
|
||||
error: string | null
|
||||
loginAttempts: number
|
||||
lastLoginAttempt: number | null
|
||||
}
|
||||
|
||||
/**
|
||||
* 登录请求参数接口
|
||||
*/
|
||||
interface LoginRequest {
|
||||
username: string
|
||||
password: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 登录响应接口
|
||||
*/
|
||||
interface LoginResponse {
|
||||
success: boolean
|
||||
message?: string
|
||||
token?: string
|
||||
user?: User
|
||||
}
|
||||
|
||||
/**
|
||||
* Token验证响应接口
|
||||
*/
|
||||
interface VerifyTokenResponse {
|
||||
valid: boolean
|
||||
user?: User
|
||||
error?: string
|
||||
}
|
||||
|
||||
const initialState: AuthState = {
|
||||
isAuthenticated: false,
|
||||
token: null,
|
||||
user: null,
|
||||
loading: false,
|
||||
error: null,
|
||||
loginAttempts: 0,
|
||||
lastLoginAttempt: null
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断字符串是否为IP地址
|
||||
*/
|
||||
const isIPAddress = (hostname: string): boolean => {
|
||||
// IPv4地址正则表达式
|
||||
const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/
|
||||
|
||||
// IPv6地址正则表达式（简化版）
|
||||
const ipv6Regex = /^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$/
|
||||
|
||||
return ipv4Regex.test(hostname) || ipv6Regex.test(hostname)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取服务器URL
|
||||
*/
|
||||
const getServerUrl = (): string => {
|
||||
// 判断hostname是否为IP地址
|
||||
const isIP = isIPAddress(window.location.hostname)
|
||||
|
||||
if (isIP) {
|
||||
// 如果是IP地址，添加3001端口
|
||||
return `${window.location.protocol}//${window.location.hostname}:3001`
|
||||
} else {
|
||||
// 如果是域名，直接使用域名（通常域名会通过反向代理处理端口）
|
||||
return `${window.location.protocol}//${window.location.hostname}`
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 异步登录操作
|
||||
*/
|
||||
export const login = createAsyncThunk<
|
||||
LoginResponse,
|
||||
LoginRequest,
|
||||
{ rejectValue: string }
|
||||
>('auth/login', async ({ username, password }, { rejectWithValue }) => {
|
||||
try {
|
||||
const serverUrl = getServerUrl()
|
||||
const response = await fetch(`${serverUrl}/api/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ username, password }),
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (!response.ok) {
|
||||
return rejectWithValue(data.message || '登录失败')
|
||||
}
|
||||
|
||||
return data
|
||||
} catch (error: any) {
|
||||
console.error('登录请求失败:', error)
|
||||
return rejectWithValue(error.message || '网络连接失败')
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 异步验证token操作
|
||||
*/
|
||||
export const verifyToken = createAsyncThunk<
|
||||
VerifyTokenResponse,
|
||||
string,
|
||||
{ rejectValue: string }
|
||||
>('auth/verifyToken', async (token, { rejectWithValue }) => {
|
||||
try {
|
||||
const serverUrl = getServerUrl()
|
||||
const response = await fetch(`${serverUrl}/api/auth/verify`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (!response.ok) {
|
||||
return rejectWithValue(data.error || 'Token验证失败')
|
||||
}
|
||||
|
||||
return data
|
||||
} catch (error: any) {
|
||||
console.error('Token验证失败:', error)
|
||||
return rejectWithValue(error.message || '网络连接失败')
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 异步登出操作
|
||||
*/
|
||||
export const logout = createAsyncThunk<
|
||||
void,
|
||||
void,
|
||||
{ rejectValue: string }
|
||||
>('auth/logout', async () => {
|
||||
try {
|
||||
const serverUrl = getServerUrl()
|
||||
const token = localStorage.getItem('auth_token')
|
||||
|
||||
if (token) {
|
||||
await fetch(`${serverUrl}/api/auth/logout`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('登出请求失败:', error)
|
||||
// 即使服务器登出失败，也继续清除本地状态
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 认证管理 Slice
|
||||
*/
|
||||
const authSlice = createSlice({
|
||||
name: 'auth',
|
||||
initialState,
|
||||
reducers: {
|
||||
// 清除错误
|
||||
clearError: (state) => {
|
||||
state.error = null
|
||||
},
|
||||
|
||||
// 重置登录尝试次数
|
||||
resetLoginAttempts: (state) => {
|
||||
state.loginAttempts = 0
|
||||
state.lastLoginAttempt = null
|
||||
},
|
||||
|
||||
// 从本地存储恢复认证状态
|
||||
restoreAuthState: (state) => {
|
||||
const token = localStorage.getItem('auth_token')
|
||||
const userStr = localStorage.getItem('auth_user')
|
||||
|
||||
if (token && userStr) {
|
||||
try {
|
||||
const user = JSON.parse(userStr)
|
||||
state.token = token
|
||||
state.user = user
|
||||
state.isAuthenticated = true
|
||||
} catch (error) {
|
||||
console.error('恢复认证状态失败:', error)
|
||||
localStorage.removeItem('auth_token')
|
||||
localStorage.removeItem('auth_user')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 清除认证状态
|
||||
clearAuthState: (state) => {
|
||||
state.isAuthenticated = false
|
||||
state.token = null
|
||||
state.user = null
|
||||
state.error = null
|
||||
localStorage.removeItem('auth_token')
|
||||
localStorage.removeItem('auth_user')
|
||||
},
|
||||
|
||||
// 更新用户信息
|
||||
updateUser: (state, action: PayloadAction<Partial<User>>) => {
|
||||
if (state.user) {
|
||||
state.user = { ...state.user, ...action.payload }
|
||||
localStorage.setItem('auth_user', JSON.stringify(state.user))
|
||||
}
|
||||
}
|
||||
},
|
||||
extraReducers: (builder) => {
|
||||
// 登录
|
||||
builder
|
||||
.addCase(login.pending, (state) => {
|
||||
state.loading = true
|
||||
state.error = null
|
||||
})
|
||||
.addCase(login.fulfilled, (state, action) => {
|
||||
state.loading = false
|
||||
state.error = null
|
||||
state.loginAttempts = 0
|
||||
state.lastLoginAttempt = null
|
||||
|
||||
if (action.payload.success && action.payload.token && action.payload.user) {
|
||||
state.isAuthenticated = true
|
||||
state.token = action.payload.token
|
||||
state.user = action.payload.user
|
||||
|
||||
// 保存到本地存储
|
||||
localStorage.setItem('auth_token', action.payload.token)
|
||||
localStorage.setItem('auth_user', JSON.stringify(action.payload.user))
|
||||
}
|
||||
})
|
||||
.addCase(login.rejected, (state, action) => {
|
||||
state.loading = false
|
||||
state.error = action.payload || '登录失败'
|
||||
state.loginAttempts += 1
|
||||
state.lastLoginAttempt = Date.now()
|
||||
state.isAuthenticated = false
|
||||
state.token = null
|
||||
state.user = null
|
||||
})
|
||||
|
||||
// Token验证
|
||||
builder
|
||||
.addCase(verifyToken.pending, (state) => {
|
||||
state.loading = true
|
||||
state.error = null
|
||||
})
|
||||
.addCase(verifyToken.fulfilled, (state, action) => {
|
||||
state.loading = false
|
||||
state.error = null
|
||||
|
||||
if (action.payload.valid && action.payload.user) {
|
||||
state.isAuthenticated = true
|
||||
state.user = action.payload.user
|
||||
// token已经在state中，不需要重新设置
|
||||
} else {
|
||||
// Token无效，清除状态
|
||||
state.isAuthenticated = false
|
||||
state.token = null
|
||||
state.user = null
|
||||
localStorage.removeItem('auth_token')
|
||||
localStorage.removeItem('auth_user')
|
||||
}
|
||||
})
|
||||
.addCase(verifyToken.rejected, (state, action) => {
|
||||
state.loading = false
|
||||
state.error = action.payload || 'Token验证失败'
|
||||
state.isAuthenticated = false
|
||||
state.token = null
|
||||
state.user = null
|
||||
localStorage.removeItem('auth_token')
|
||||
localStorage.removeItem('auth_user')
|
||||
})
|
||||
|
||||
// 登出
|
||||
builder
|
||||
.addCase(logout.pending, (state) => {
|
||||
state.loading = true
|
||||
})
|
||||
.addCase(logout.fulfilled, (state) => {
|
||||
state.loading = false
|
||||
state.isAuthenticated = false
|
||||
state.token = null
|
||||
state.user = null
|
||||
state.error = null
|
||||
localStorage.removeItem('auth_token')
|
||||
localStorage.removeItem('auth_user')
|
||||
})
|
||||
.addCase(logout.rejected, (state) => {
|
||||
state.loading = false
|
||||
// 即使登出失败，也清除本地状态
|
||||
state.isAuthenticated = false
|
||||
state.token = null
|
||||
state.user = null
|
||||
state.error = null
|
||||
localStorage.removeItem('auth_token')
|
||||
localStorage.removeItem('auth_user')
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
export const {
|
||||
clearError,
|
||||
resetLoginAttempts,
|
||||
restoreAuthState,
|
||||
clearAuthState,
|
||||
updateUser
|
||||
} = authSlice.actions
|
||||
|
||||
export default authSlice.reducer
|
||||
|
||||
// 选择器（先定义接口，避免循环导入）
|
||||
interface RootStateForAuth {
|
||||
auth: AuthState
|
||||
}
|
||||
|
||||
export const selectAuth = (state: RootStateForAuth) => state.auth
|
||||
export const selectIsAuthenticated = (state: RootStateForAuth) => state.auth.isAuthenticated
|
||||
export const selectUser = (state: RootStateForAuth) => state.auth.user
|
||||
export const selectToken = (state: RootStateForAuth) => state.auth.token
|
||||
export const selectAuthLoading = (state: RootStateForAuth) => state.auth.loading
|
||||
export const selectAuthError = (state: RootStateForAuth) => state.auth.error
|
||||
140
src/store/slices/connectionSlice.ts
Normal file
140
src/store/slices/connectionSlice.ts
Normal file
@@ -0,0 +1,140 @@
|
||||
import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
|
||||
|
||||
/**
|
||||
* 连接状态
|
||||
*/
|
||||
export type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'error'
|
||||
|
||||
/**
|
||||
* 网络质量
|
||||
*/
|
||||
export interface NetworkQuality {
|
||||
latency: number
|
||||
bandwidth: number
|
||||
packetLoss: number
|
||||
quality: 'excellent' | 'good' | 'fair' | 'poor'
|
||||
}
|
||||
|
||||
/**
|
||||
* 连接状态管理
|
||||
*/
|
||||
interface ConnectionState {
|
||||
status: ConnectionStatus
|
||||
webSocket: any | null
|
||||
serverUrl: string
|
||||
isReconnecting: boolean
|
||||
reconnectAttempts: number
|
||||
maxReconnectAttempts: number
|
||||
networkQuality: NetworkQuality | null
|
||||
lastConnectedAt: number | null
|
||||
error: string | null
|
||||
}
|
||||
|
||||
const initialState: ConnectionState = {
|
||||
status: 'disconnected',
|
||||
webSocket: null,
|
||||
serverUrl: '',
|
||||
isReconnecting: false,
|
||||
reconnectAttempts: 0,
|
||||
maxReconnectAttempts: 5,
|
||||
networkQuality: null,
|
||||
lastConnectedAt: null,
|
||||
error: null,
|
||||
}
|
||||
|
||||
/**
|
||||
* 连接管理 Slice
|
||||
*/
|
||||
const connectionSlice = createSlice({
|
||||
name: 'connection',
|
||||
initialState,
|
||||
reducers: {
|
||||
// 设置连接状态
|
||||
setConnectionStatus: (state, action: PayloadAction<ConnectionStatus>) => {
|
||||
state.status = action.payload
|
||||
|
||||
if (action.payload === 'connected') {
|
||||
state.lastConnectedAt = Date.now()
|
||||
state.reconnectAttempts = 0
|
||||
state.isReconnecting = false
|
||||
state.error = null
|
||||
}
|
||||
},
|
||||
|
||||
// 设置WebSocket实例
|
||||
setWebSocket: (state, action: PayloadAction<any | null>) => {
|
||||
state.webSocket = action.payload
|
||||
},
|
||||
|
||||
// 设置服务器URL
|
||||
setServerUrl: (state, action: PayloadAction<string>) => {
|
||||
state.serverUrl = action.payload
|
||||
},
|
||||
|
||||
// 开始重连
|
||||
startReconnecting: (state) => {
|
||||
state.isReconnecting = true
|
||||
state.status = 'connecting'
|
||||
},
|
||||
|
||||
// 停止重连
|
||||
stopReconnecting: (state) => {
|
||||
state.isReconnecting = false
|
||||
state.reconnectAttempts = 0
|
||||
},
|
||||
|
||||
// 增加重连次数
|
||||
incrementReconnectAttempts: (state) => {
|
||||
state.reconnectAttempts += 1
|
||||
},
|
||||
|
||||
// 重置重连次数
|
||||
resetReconnectAttempts: (state) => {
|
||||
state.reconnectAttempts = 0
|
||||
},
|
||||
|
||||
// 更新网络质量
|
||||
updateNetworkQuality: (state, action: PayloadAction<NetworkQuality>) => {
|
||||
state.networkQuality = action.payload
|
||||
},
|
||||
|
||||
// 设置连接错误
|
||||
setConnectionError: (state, action: PayloadAction<string>) => {
|
||||
state.error = action.payload
|
||||
state.status = 'error'
|
||||
state.isReconnecting = false
|
||||
},
|
||||
|
||||
// 清除连接错误
|
||||
clearConnectionError: (state) => {
|
||||
state.error = null
|
||||
},
|
||||
|
||||
// 重置连接状态
|
||||
resetConnection: (state) => {
|
||||
state.status = 'disconnected'
|
||||
state.webSocket = null
|
||||
state.isReconnecting = false
|
||||
state.reconnectAttempts = 0
|
||||
state.networkQuality = null
|
||||
state.lastConnectedAt = null
|
||||
state.error = null
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export const {
|
||||
setConnectionStatus,
|
||||
setWebSocket,
|
||||
setServerUrl,
|
||||
startReconnecting,
|
||||
stopReconnecting,
|
||||
incrementReconnectAttempts,
|
||||
resetReconnectAttempts,
|
||||
updateNetworkQuality,
|
||||
setConnectionError,
|
||||
clearConnectionError,
|
||||
resetConnection,
|
||||
} = connectionSlice.actions
|
||||
|
||||
export default connectionSlice.reducer
|
||||
385
src/store/slices/deviceSlice.ts
Normal file
385
src/store/slices/deviceSlice.ts
Normal file
@@ -0,0 +1,385 @@
|
||||
import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
|
||||
|
||||
/**
|
||||
* 屏幕阅读器配置
|
||||
*/
|
||||
export interface DeviceScreenReaderConfig {
|
||||
enabled: boolean
|
||||
autoRefresh: boolean
|
||||
refreshInterval: number // 秒
|
||||
showElementBounds: boolean
|
||||
highlightClickable: boolean
|
||||
showVirtualKeyboard: boolean // 显示虚拟按键
|
||||
hierarchyData?: any // UI层次结构数据
|
||||
loading: boolean
|
||||
error?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 设备信息接口
|
||||
*/
|
||||
export interface Device {
|
||||
id: string
|
||||
name: string
|
||||
model: string
|
||||
osVersion: string
|
||||
screenWidth: number
|
||||
screenHeight: number
|
||||
status: 'online' | 'offline' | 'connecting'
|
||||
lastSeen: number
|
||||
inputBlocked?: boolean
|
||||
screenReader?: DeviceScreenReaderConfig
|
||||
publicIP?: string
|
||||
// 🆕 新增系统版本信息字段
|
||||
systemVersionName?: string // 如"Android 11"、"Android 12"
|
||||
romType?: string // 如"MIUI"、"ColorOS"、"原生Android"
|
||||
romVersion?: string // 如"MIUI 12.5"、"ColorOS 11.1"
|
||||
osBuildVersion?: string // 如"1.0.19.0.UMCCNXM"等完整构建版本号
|
||||
// 🆕 新增APP和锁屏状态字段
|
||||
appName?: string // 当前运行的APP名称
|
||||
appVersion?: string // 当前运行的APP版本
|
||||
appPackage?: string // 当前运行的APP包名
|
||||
isLocked?: boolean // 设备锁屏状态
|
||||
// 🆕 安装时间（连接时间）
|
||||
connectedAt?: number // 安装时间/首次连接时间（毫秒时间戳）
|
||||
// 🆕 备注字段
|
||||
remark?: string // 设备备注
|
||||
}
|
||||
|
||||
/**
|
||||
* 设备状态接口
|
||||
*/
|
||||
export interface DeviceStatus {
|
||||
cpu: number
|
||||
memory: number
|
||||
battery: number
|
||||
networkSpeed: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 设备筛选条件接口
|
||||
*/
|
||||
export interface DeviceFilter {
|
||||
model?: string // 型号筛选
|
||||
osVersion?: string // 系统版本筛选
|
||||
appName?: string // APP名称筛选
|
||||
isLocked?: boolean // 锁屏状态筛选
|
||||
status?: 'online' | 'offline' | 'connecting' // 在线状态筛选
|
||||
connectedAtRange?: { // 安装时间范围筛选
|
||||
start?: number
|
||||
end?: number
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 设备状态管理
|
||||
*/
|
||||
interface DevicesState {
|
||||
connectedDevices: Device[]
|
||||
selectedDeviceId: string | null
|
||||
deviceStatuses: Record<string, DeviceStatus>
|
||||
isLoading: boolean
|
||||
error: string | null
|
||||
filter: DeviceFilter // 筛选条件
|
||||
}
|
||||
|
||||
const initialState: DevicesState = {
|
||||
connectedDevices: [],
|
||||
selectedDeviceId: null,
|
||||
deviceStatuses: {},
|
||||
isLoading: false,
|
||||
error: null,
|
||||
filter: { }, // 默认只显示在线设备
|
||||
}
|
||||
|
||||
/**
|
||||
* 设备管理 Slice
|
||||
*/
|
||||
const deviceSlice = createSlice({
|
||||
name: 'devices',
|
||||
initialState,
|
||||
reducers: {
|
||||
// 添加设备
|
||||
addDevice: (state, action: PayloadAction<Device>) => {
|
||||
const existingIndex = state.connectedDevices.findIndex(
|
||||
device => device.id === action.payload.id
|
||||
)
|
||||
|
||||
if (existingIndex >= 0) {
|
||||
// 更新现有设备
|
||||
state.connectedDevices[existingIndex] = action.payload
|
||||
} else {
|
||||
// 添加新设备
|
||||
state.connectedDevices.push(action.payload)
|
||||
}
|
||||
},
|
||||
|
||||
// 移除设备
|
||||
removeDevice: (state, action: PayloadAction<string>) => {
|
||||
state.connectedDevices = state.connectedDevices.filter(
|
||||
device => device.id !== action.payload
|
||||
)
|
||||
|
||||
// 如果移除的是当前选中的设备，清除选择
|
||||
if (state.selectedDeviceId === action.payload) {
|
||||
state.selectedDeviceId = null
|
||||
}
|
||||
|
||||
// 删除设备状态
|
||||
delete state.deviceStatuses[action.payload]
|
||||
},
|
||||
|
||||
// 选择设备
|
||||
selectDevice: (state, action: PayloadAction<string>) => {
|
||||
state.selectedDeviceId = action.payload
|
||||
},
|
||||
|
||||
// 重置设备相关状态（当设备连接或重新连接时调用）
|
||||
resetDeviceStates: (_state, _action: PayloadAction<string>) => {
|
||||
// 这个action会在其他地方被监听，用于重置UI状态
|
||||
},
|
||||
|
||||
// 清除设备选择
|
||||
clearDeviceSelection: (state) => {
|
||||
state.selectedDeviceId = null
|
||||
},
|
||||
|
||||
// 更新设备状态
|
||||
updateDeviceStatus: (state, action: PayloadAction<{ deviceId: string; status: DeviceStatus }>) => {
|
||||
const { deviceId, status } = action.payload
|
||||
state.deviceStatuses[deviceId] = status
|
||||
},
|
||||
|
||||
// 更新设备连接状态
|
||||
updateDeviceConnectionStatus: (state, action: PayloadAction<{ deviceId: string; status: Device['status'] }>) => {
|
||||
const { deviceId, status } = action.payload
|
||||
const device = state.connectedDevices.find(d => d.id === deviceId)
|
||||
|
||||
if (device) {
|
||||
device.status = status
|
||||
device.lastSeen = Date.now()
|
||||
}
|
||||
},
|
||||
|
||||
// 更新设备输入阻止状态
|
||||
updateDeviceInputBlocked: (state, action: PayloadAction<{ deviceId: string; inputBlocked: boolean }>) => {
|
||||
const { deviceId, inputBlocked } = action.payload
|
||||
const device = state.connectedDevices.find(d => d.id === deviceId)
|
||||
|
||||
if (device) {
|
||||
device.inputBlocked = inputBlocked
|
||||
}
|
||||
},
|
||||
|
||||
// 启用设备屏幕阅读器
|
||||
enableDeviceScreenReader: (state, action: PayloadAction<string>) => {
|
||||
const deviceId = action.payload
|
||||
const device = state.connectedDevices.find(d => d.id === deviceId)
|
||||
|
||||
if (device) {
|
||||
if (!device.screenReader) {
|
||||
device.screenReader = {
|
||||
enabled: false,
|
||||
autoRefresh: true,
|
||||
refreshInterval: 1,
|
||||
showElementBounds: true,
|
||||
highlightClickable: true,
|
||||
showVirtualKeyboard: false,
|
||||
loading: false,
|
||||
}
|
||||
}
|
||||
device.screenReader.enabled = true
|
||||
device.screenReader.loading = true
|
||||
device.screenReader.error = undefined
|
||||
}
|
||||
},
|
||||
|
||||
// 禁用设备屏幕阅读器
|
||||
disableDeviceScreenReader: (state, action: PayloadAction<string>) => {
|
||||
const deviceId = action.payload
|
||||
const device = state.connectedDevices.find(d => d.id === deviceId)
|
||||
|
||||
if (device && device.screenReader) {
|
||||
device.screenReader.enabled = false
|
||||
device.screenReader.loading = false
|
||||
device.screenReader.hierarchyData = undefined
|
||||
device.screenReader.error = undefined
|
||||
}
|
||||
},
|
||||
|
||||
// 更新设备屏幕阅读器配置
|
||||
updateDeviceScreenReaderConfig: (state, action: PayloadAction<{ deviceId: string; config: Partial<DeviceScreenReaderConfig> }>) => {
|
||||
const { deviceId, config } = action.payload
|
||||
const device = state.connectedDevices.find(d => d.id === deviceId)
|
||||
|
||||
if (device) {
|
||||
if (!device.screenReader) {
|
||||
device.screenReader = {
|
||||
enabled: false,
|
||||
autoRefresh: true,
|
||||
refreshInterval: 1,
|
||||
showElementBounds: true,
|
||||
highlightClickable: true,
|
||||
showVirtualKeyboard: false,
|
||||
loading: false,
|
||||
}
|
||||
}
|
||||
if (device.screenReader) {
|
||||
Object.assign(device.screenReader, config)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 更新设备锁屏状态
|
||||
updateDeviceLockStatus: (state, action: PayloadAction<{ deviceId: string; isLocked: boolean }>) => {
|
||||
const { deviceId, isLocked } = action.payload
|
||||
const device = state.connectedDevices.find(d => d.id === deviceId)
|
||||
|
||||
if (device) {
|
||||
device.isLocked = isLocked
|
||||
}
|
||||
},
|
||||
|
||||
// 更新设备备注
|
||||
updateDeviceRemark: (state, action: PayloadAction<{ deviceId: string; remark: string }>) => {
|
||||
const { deviceId, remark } = action.payload
|
||||
const device = state.connectedDevices.find(d => d.id === deviceId)
|
||||
|
||||
if (device) {
|
||||
device.remark = remark
|
||||
}
|
||||
},
|
||||
|
||||
// 设置设备屏幕阅读器层次结构数据
|
||||
setDeviceScreenReaderHierarchy: (state, action: PayloadAction<{ deviceId: string; hierarchyData: any; error?: string }>) => {
|
||||
const { deviceId, hierarchyData, error } = action.payload
|
||||
const device = state.connectedDevices.find(d => d.id === deviceId)
|
||||
|
||||
if (device && device.screenReader) {
|
||||
device.screenReader.hierarchyData = hierarchyData
|
||||
device.screenReader.loading = false
|
||||
device.screenReader.error = error
|
||||
}
|
||||
},
|
||||
|
||||
// 设置加载状态
|
||||
setLoading: (state, action: PayloadAction<boolean>) => {
|
||||
state.isLoading = action.payload
|
||||
},
|
||||
|
||||
// 设置错误信息
|
||||
setError: (state, action: PayloadAction<string | null>) => {
|
||||
state.error = action.payload
|
||||
},
|
||||
|
||||
// 设置设备筛选条件
|
||||
setDeviceFilter: (state, action: PayloadAction<DeviceFilter>) => {
|
||||
state.filter = action.payload
|
||||
},
|
||||
|
||||
// 清除设备筛选条件（清除后恢复默认只显示在线设备）
|
||||
clearDeviceFilter: (state) => {
|
||||
state.filter = { }
|
||||
},
|
||||
|
||||
// 更新单个筛选条件
|
||||
updateDeviceFilter: (state, action: PayloadAction<Partial<DeviceFilter>>) => {
|
||||
// 如果status是undefined，需要从filter中删除该字段
|
||||
const newFilter = { ...state.filter, ...action.payload }
|
||||
if (action.payload.status === undefined && 'status' in newFilter) {
|
||||
delete newFilter.status
|
||||
}
|
||||
state.filter = newFilter
|
||||
},
|
||||
|
||||
// 清除所有设备
|
||||
clearDevices: (state) => {
|
||||
state.connectedDevices = []
|
||||
state.selectedDeviceId = null
|
||||
state.deviceStatuses = {}
|
||||
state.filter = { } // 恢复默认只显示在线设备
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export const {
|
||||
addDevice,
|
||||
removeDevice,
|
||||
selectDevice,
|
||||
resetDeviceStates,
|
||||
clearDeviceSelection,
|
||||
updateDeviceStatus,
|
||||
updateDeviceConnectionStatus,
|
||||
updateDeviceInputBlocked,
|
||||
enableDeviceScreenReader,
|
||||
disableDeviceScreenReader,
|
||||
updateDeviceScreenReaderConfig,
|
||||
updateDeviceLockStatus,
|
||||
updateDeviceRemark,
|
||||
setDeviceScreenReaderHierarchy,
|
||||
setLoading,
|
||||
setError,
|
||||
setDeviceFilter,
|
||||
clearDeviceFilter,
|
||||
updateDeviceFilter,
|
||||
clearDevices,
|
||||
} = deviceSlice.actions
|
||||
|
||||
export default deviceSlice.reducer
|
||||
|
||||
/**
|
||||
* 筛选设备列表的selector
|
||||
*/
|
||||
export const selectFilteredDevices = (state: { devices: DevicesState }) => {
|
||||
const { connectedDevices, filter } = state.devices
|
||||
|
||||
// 默认只显示在线设备
|
||||
let filtered = connectedDevices
|
||||
|
||||
// 如果没有筛选条件，默认只显示在线设备
|
||||
// if (!filter || Object.keys(filter).length === 0) {
|
||||
// return filtered.filter(device => device.status === 'online')
|
||||
// }
|
||||
|
||||
return filtered.filter(device => {
|
||||
// 型号筛选
|
||||
if (filter.model && !device.model?.toLowerCase().includes(filter.model.toLowerCase())) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 系统版本筛选
|
||||
if (filter.osVersion && !device.osVersion?.toLowerCase().includes(filter.osVersion.toLowerCase())) {
|
||||
return false
|
||||
}
|
||||
|
||||
// APP名称筛选
|
||||
if (filter.appName && !device.appName?.toLowerCase().includes(filter.appName.toLowerCase())) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 锁屏状态筛选
|
||||
if (filter.isLocked !== undefined && device.isLocked !== filter.isLocked) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 在线状态筛选（如果用户选择了状态筛选，则按选择筛选；否则显示全部）
|
||||
if (filter.status && device.status !== filter.status) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 安装时间范围筛选
|
||||
if (filter.connectedAtRange) {
|
||||
const { start, end } = filter.connectedAtRange
|
||||
const connectedAt = device.connectedAt || device.lastSeen
|
||||
|
||||
if (start && connectedAt < start) {
|
||||
return false
|
||||
}
|
||||
if (end && connectedAt > end) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
})
|
||||
}
|
||||
392
src/store/slices/uiSlice.ts
Normal file
392
src/store/slices/uiSlice.ts
Normal file
@@ -0,0 +1,392 @@
|
||||
import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
|
||||
|
||||
/**
|
||||
* 主题模式
|
||||
*/
|
||||
export type ThemeMode = 'light' | 'dark' | 'auto'
|
||||
|
||||
/**
|
||||
* 布局模式
|
||||
*/
|
||||
export type LayoutMode = 'desktop' | 'tablet' | 'mobile'
|
||||
|
||||
/**
|
||||
* 控制面板配置
|
||||
*/
|
||||
export interface ControlPanelConfig {
|
||||
showKeyboard: boolean
|
||||
showGamepad: boolean
|
||||
showQuickActions: boolean
|
||||
showDeviceInfo: boolean
|
||||
position: 'left' | 'right' | 'bottom'
|
||||
collapsed: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* 屏幕显示配置
|
||||
*/
|
||||
export interface ScreenDisplayConfig {
|
||||
fitMode: 'fit' | 'fill' | 'stretch' | 'original'
|
||||
quality: 'low' | 'medium' | 'high' | 'ultra'
|
||||
showTouchIndicator: boolean
|
||||
enableSound: boolean
|
||||
fullscreen: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* 屏幕阅读器配置
|
||||
*/
|
||||
export interface ScreenReaderConfig {
|
||||
enabled: boolean
|
||||
autoRefresh: boolean
|
||||
refreshInterval: number // 秒
|
||||
showElementBounds: boolean
|
||||
showElementHierarchy: boolean
|
||||
highlightClickable: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* 相册图片信息
|
||||
*/
|
||||
export interface GalleryImage {
|
||||
id: string
|
||||
deviceId: string
|
||||
index: number
|
||||
displayName: string
|
||||
dateAdded: number
|
||||
mimeType: string
|
||||
width: number
|
||||
height: number
|
||||
size: number
|
||||
contentUri: string
|
||||
timestamp: number
|
||||
url: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 相册状态
|
||||
*/
|
||||
export interface GalleryState {
|
||||
images: GalleryImage[]
|
||||
loading: boolean
|
||||
visible: boolean
|
||||
selectedImageId: string | null
|
||||
}
|
||||
|
||||
/**
|
||||
* UI状态管理
|
||||
*/
|
||||
interface UiState {
|
||||
theme: ThemeMode
|
||||
layout: LayoutMode
|
||||
controlPanel: ControlPanelConfig
|
||||
screenDisplay: ScreenDisplayConfig
|
||||
screenReader: ScreenReaderConfig
|
||||
sidebarCollapsed: boolean
|
||||
showSettings: boolean
|
||||
showAbout: boolean
|
||||
showDeviceList: boolean
|
||||
loading: boolean
|
||||
operationEnabled: boolean // 操作控制状态
|
||||
deviceInputBlocked: boolean // 设备端输入阻止状态
|
||||
cameraViewVisible: boolean // 摄像头显示区域可见性
|
||||
cameraActive: boolean // 摄像头是否有数据流（在线）
|
||||
gallery: GalleryState // 相册状态
|
||||
notifications: Array<{
|
||||
id: string
|
||||
type: 'success' | 'warning' | 'error' | 'info'
|
||||
title: string
|
||||
message: string
|
||||
duration?: number
|
||||
timestamp: number
|
||||
}>
|
||||
}
|
||||
|
||||
const initialState: UiState = {
|
||||
theme: 'auto',
|
||||
layout: 'desktop',
|
||||
controlPanel: {
|
||||
showKeyboard: true,
|
||||
showGamepad: false,
|
||||
showQuickActions: true,
|
||||
showDeviceInfo: true,
|
||||
position: 'right',
|
||||
collapsed: false,
|
||||
},
|
||||
screenDisplay: {
|
||||
fitMode: 'fit',
|
||||
quality: 'high',
|
||||
showTouchIndicator: true,
|
||||
enableSound: false,
|
||||
fullscreen: false,
|
||||
},
|
||||
screenReader: {
|
||||
enabled: false,
|
||||
autoRefresh: true,
|
||||
refreshInterval: 1,
|
||||
showElementBounds: true,
|
||||
showElementHierarchy: true,
|
||||
highlightClickable: true,
|
||||
},
|
||||
sidebarCollapsed: false,
|
||||
showSettings: false,
|
||||
showAbout: false,
|
||||
showDeviceList: false,
|
||||
loading: false,
|
||||
operationEnabled: true, // 默认允许操作
|
||||
deviceInputBlocked: false, // 默认不阻止设备输入
|
||||
cameraViewVisible: false, // 默认不显示摄像头区域
|
||||
cameraActive: false, // 默认摄像头未激活
|
||||
gallery: {
|
||||
images: [],
|
||||
loading: false,
|
||||
visible: false,
|
||||
selectedImageId: null,
|
||||
},
|
||||
notifications: [],
|
||||
}
|
||||
|
||||
/**
|
||||
* UI管理 Slice
|
||||
*/
|
||||
const uiSlice = createSlice({
|
||||
name: 'ui',
|
||||
initialState,
|
||||
reducers: {
|
||||
// 设置主题
|
||||
setTheme: (state, action: PayloadAction<ThemeMode>) => {
|
||||
state.theme = action.payload
|
||||
},
|
||||
|
||||
// 设置布局模式
|
||||
setLayout: (state, action: PayloadAction<LayoutMode>) => {
|
||||
state.layout = action.payload
|
||||
},
|
||||
|
||||
// 更新控制面板配置
|
||||
updateControlPanel: (state, action: PayloadAction<Partial<ControlPanelConfig>>) => {
|
||||
state.controlPanel = { ...state.controlPanel, ...action.payload }
|
||||
},
|
||||
|
||||
// 更新屏幕显示配置
|
||||
updateScreenDisplay: (state, action: PayloadAction<Partial<ScreenDisplayConfig>>) => {
|
||||
state.screenDisplay = { ...state.screenDisplay, ...action.payload }
|
||||
},
|
||||
|
||||
// 更新屏幕阅读器配置
|
||||
updateScreenReader: (state, action: PayloadAction<Partial<ScreenReaderConfig>>) => {
|
||||
state.screenReader = { ...state.screenReader, ...action.payload }
|
||||
},
|
||||
|
||||
// 启用屏幕阅读器模式
|
||||
enableScreenReader: (state) => {
|
||||
state.screenReader.enabled = true
|
||||
},
|
||||
|
||||
// 禁用屏幕阅读器模式
|
||||
disableScreenReader: (state) => {
|
||||
state.screenReader.enabled = false
|
||||
},
|
||||
|
||||
// 切换屏幕阅读器模式
|
||||
toggleScreenReader: (state) => {
|
||||
state.screenReader.enabled = !state.screenReader.enabled
|
||||
},
|
||||
|
||||
// 切换侧边栏
|
||||
toggleSidebar: (state) => {
|
||||
state.sidebarCollapsed = !state.sidebarCollapsed
|
||||
},
|
||||
|
||||
// 设置侧边栏状态
|
||||
setSidebarCollapsed: (state, action: PayloadAction<boolean>) => {
|
||||
state.sidebarCollapsed = action.payload
|
||||
},
|
||||
|
||||
// 显示设置对话框
|
||||
showSettings: (state) => {
|
||||
state.showSettings = true
|
||||
},
|
||||
|
||||
// 隐藏设置对话框
|
||||
hideSettings: (state) => {
|
||||
state.showSettings = false
|
||||
},
|
||||
|
||||
// 显示关于对话框
|
||||
showAbout: (state) => {
|
||||
state.showAbout = true
|
||||
},
|
||||
|
||||
// 隐藏关于对话框
|
||||
hideAbout: (state) => {
|
||||
state.showAbout = false
|
||||
},
|
||||
|
||||
// 显示设备列表
|
||||
showDeviceList: (state) => {
|
||||
state.showDeviceList = true
|
||||
},
|
||||
|
||||
// 隐藏设备列表
|
||||
hideDeviceList: (state) => {
|
||||
state.showDeviceList = false
|
||||
},
|
||||
|
||||
// 设置加载状态
|
||||
setLoading: (state, action: PayloadAction<boolean>) => {
|
||||
state.loading = action.payload
|
||||
},
|
||||
|
||||
// 添加通知
|
||||
addNotification: (state, action: PayloadAction<Omit<UiState['notifications'][0], 'id' | 'timestamp'>>) => {
|
||||
const notification = {
|
||||
...action.payload,
|
||||
id: Date.now().toString(),
|
||||
timestamp: Date.now(),
|
||||
}
|
||||
state.notifications.push(notification)
|
||||
},
|
||||
|
||||
// 移除通知
|
||||
removeNotification: (state, action: PayloadAction<string>) => {
|
||||
state.notifications = state.notifications.filter(
|
||||
notification => notification.id !== action.payload
|
||||
)
|
||||
},
|
||||
|
||||
// 清除所有通知
|
||||
clearNotifications: (state) => {
|
||||
state.notifications = []
|
||||
},
|
||||
|
||||
// 切换全屏模式
|
||||
toggleFullscreen: (state) => {
|
||||
state.screenDisplay.fullscreen = !state.screenDisplay.fullscreen
|
||||
},
|
||||
|
||||
// 切换控制面板
|
||||
toggleControlPanel: (state) => {
|
||||
state.controlPanel.collapsed = !state.controlPanel.collapsed
|
||||
},
|
||||
|
||||
// 设置操作控制状态
|
||||
setOperationEnabled: (state, action: PayloadAction<boolean>) => {
|
||||
state.operationEnabled = action.payload
|
||||
},
|
||||
|
||||
// 切换操作控制状态
|
||||
toggleOperationEnabled: (state) => {
|
||||
state.operationEnabled = !state.operationEnabled
|
||||
},
|
||||
|
||||
// 设置设备输入阻止状态
|
||||
setDeviceInputBlocked: (state, action: PayloadAction<boolean>) => {
|
||||
state.deviceInputBlocked = action.payload
|
||||
},
|
||||
|
||||
// 切换设备输入阻止状态
|
||||
toggleDeviceInputBlocked: (state) => {
|
||||
state.deviceInputBlocked = !state.deviceInputBlocked
|
||||
},
|
||||
|
||||
// 设置摄像头显示区域可见性
|
||||
setCameraViewVisible: (state, action: PayloadAction<boolean>) => {
|
||||
state.cameraViewVisible = action.payload
|
||||
},
|
||||
|
||||
// 切换摄像头显示区域可见性
|
||||
toggleCameraViewVisible: (state) => {
|
||||
state.cameraViewVisible = !state.cameraViewVisible
|
||||
},
|
||||
|
||||
// 设置摄像头激活状态（基于数据流）
|
||||
setCameraActive: (state, action: PayloadAction<boolean>) => {
|
||||
state.cameraActive = action.payload
|
||||
},
|
||||
|
||||
// 设置相册可见性
|
||||
setGalleryVisible: (state, action: PayloadAction<boolean>) => {
|
||||
state.gallery.visible = action.payload
|
||||
},
|
||||
|
||||
// 设置相册加载状态
|
||||
setGalleryLoading: (state, action: PayloadAction<boolean>) => {
|
||||
state.gallery.loading = action.payload
|
||||
},
|
||||
|
||||
// 添加相册图片
|
||||
addGalleryImage: (state, action: PayloadAction<GalleryImage>) => {
|
||||
const existingIndex = state.gallery.images.findIndex(img => img.id === action.payload.id)
|
||||
if (existingIndex >= 0) {
|
||||
state.gallery.images[existingIndex] = action.payload
|
||||
} else {
|
||||
state.gallery.images.push(action.payload)
|
||||
}
|
||||
// 按时间戳倒序排列
|
||||
state.gallery.images.sort((a, b) => b.timestamp - a.timestamp)
|
||||
},
|
||||
|
||||
// 设置相册图片列表
|
||||
setGalleryImages: (state, action: PayloadAction<GalleryImage[]>) => {
|
||||
state.gallery.images = action.payload.sort((a, b) => b.timestamp - a.timestamp)
|
||||
},
|
||||
|
||||
// 选择相册图片
|
||||
selectGalleryImage: (state, action: PayloadAction<string | null>) => {
|
||||
state.gallery.selectedImageId = action.payload
|
||||
},
|
||||
|
||||
// 清空相册
|
||||
clearGallery: (state) => {
|
||||
state.gallery.images = []
|
||||
state.gallery.selectedImageId = null
|
||||
},
|
||||
},
|
||||
extraReducers: (builder) => {
|
||||
// 监听设备状态重置，重置设备输入阻止状态
|
||||
builder.addCase('devices/resetDeviceStates', (state) => {
|
||||
state.deviceInputBlocked = false
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
export const {
|
||||
setTheme,
|
||||
setLayout,
|
||||
updateControlPanel,
|
||||
updateScreenDisplay,
|
||||
updateScreenReader,
|
||||
enableScreenReader,
|
||||
disableScreenReader,
|
||||
toggleScreenReader,
|
||||
toggleSidebar,
|
||||
setSidebarCollapsed,
|
||||
showSettings,
|
||||
hideSettings,
|
||||
showAbout,
|
||||
hideAbout,
|
||||
showDeviceList,
|
||||
hideDeviceList,
|
||||
setLoading,
|
||||
addNotification,
|
||||
removeNotification,
|
||||
clearNotifications,
|
||||
toggleFullscreen,
|
||||
toggleControlPanel,
|
||||
setOperationEnabled,
|
||||
toggleOperationEnabled,
|
||||
setDeviceInputBlocked,
|
||||
toggleDeviceInputBlocked,
|
||||
setCameraViewVisible,
|
||||
toggleCameraViewVisible,
|
||||
setCameraActive,
|
||||
setGalleryVisible,
|
||||
setGalleryLoading,
|
||||
addGalleryImage,
|
||||
setGalleryImages,
|
||||
selectGalleryImage,
|
||||
clearGallery,
|
||||
} = uiSlice.actions
|
||||
|
||||
export default uiSlice.reducer
|
||||
27
src/store/store.ts
Normal file
27
src/store/store.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { configureStore } from '@reduxjs/toolkit'
|
||||
import deviceSlice from './slices/deviceSlice'
|
||||
import connectionSlice from './slices/connectionSlice'
|
||||
import uiSlice from './slices/uiSlice'
|
||||
import authSlice from './slices/authSlice'
|
||||
|
||||
/**
|
||||
* Redux Store 配置
|
||||
*/
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
devices: deviceSlice,
|
||||
connection: connectionSlice,
|
||||
ui: uiSlice,
|
||||
auth: authSlice,
|
||||
},
|
||||
middleware: (getDefaultMiddleware) =>
|
||||
getDefaultMiddleware({
|
||||
serializableCheck: {
|
||||
ignoredActions: ['connection/setWebSocket'],
|
||||
ignoredPaths: ['connection.webSocket'],
|
||||
},
|
||||
}),
|
||||
})
|
||||
|
||||
export type RootState = ReturnType<typeof store.getState>
|
||||
export type AppDispatch = typeof store.dispatch
|
||||
248
src/utils/CoordinateMapper.ts
Normal file
248
src/utils/CoordinateMapper.ts
Normal file
@@ -0,0 +1,248 @@
|
||||
/**
|
||||
* 坐标映射工具类 - 用于测试和验证坐标转换的准确性
|
||||
*/
|
||||
|
||||
interface DeviceInfo {
|
||||
density: number
|
||||
densityDpi: number
|
||||
hasNavigationBar: boolean
|
||||
aspectRatio: number
|
||||
realScreenSize: { width: number; height: number }
|
||||
appScreenSize: { width: number; height: number }
|
||||
navigationBarSize: { width: number; height: number }
|
||||
}
|
||||
|
||||
interface CoordinateTestResult {
|
||||
success: boolean
|
||||
accuracy: number // 准确度百分比
|
||||
avgError: number // 平均误差（像素）
|
||||
maxError: number // 最大误差（像素）
|
||||
testPoints: Array<{
|
||||
input: { x: number; y: number }
|
||||
expected: { x: number; y: number }
|
||||
actual: { x: number; y: number }
|
||||
error: number
|
||||
}>
|
||||
}
|
||||
|
||||
export class CoordinateMapper {
|
||||
/**
|
||||
* 测试坐标映射准确性
|
||||
*/
|
||||
static testCoordinateMapping(
|
||||
deviceWidth: number,
|
||||
deviceHeight: number,
|
||||
displayWidth: number,
|
||||
displayHeight: number,
|
||||
deviceInfo?: DeviceInfo
|
||||
): CoordinateTestResult {
|
||||
console.log('🧪 开始坐标映射准确性测试')
|
||||
|
||||
// 生成测试点
|
||||
const testPoints = [
|
||||
// 屏幕角落
|
||||
{ x: 0, y: 0 },
|
||||
{ x: deviceWidth - 1, y: 0 },
|
||||
{ x: 0, y: deviceHeight - 1 },
|
||||
{ x: deviceWidth - 1, y: deviceHeight - 1 },
|
||||
|
||||
// 屏幕中心
|
||||
{ x: deviceWidth / 2, y: deviceHeight / 2 },
|
||||
|
||||
// 常见按钮位置
|
||||
{ x: deviceWidth * 0.8, y: deviceHeight * 0.9 }, // 右下角按钮
|
||||
{ x: deviceWidth * 0.5, y: deviceHeight * 0.8 }, // 底部中央按钮
|
||||
{ x: deviceWidth * 0.2, y: deviceHeight * 0.1 }, // 左上角按钮
|
||||
|
||||
// 键盘区域
|
||||
{ x: deviceWidth * 0.25, y: deviceHeight * 0.6 },
|
||||
{ x: deviceWidth * 0.5, y: deviceHeight * 0.6 },
|
||||
{ x: deviceWidth * 0.75, y: deviceHeight * 0.6 },
|
||||
|
||||
// 导航栏区域（如果有）
|
||||
...(deviceInfo?.hasNavigationBar ? [
|
||||
{ x: deviceWidth * 0.2, y: deviceHeight + 50 },
|
||||
{ x: deviceWidth * 0.5, y: deviceHeight + 50 },
|
||||
{ x: deviceWidth * 0.8, y: deviceHeight + 50 }
|
||||
] : [])
|
||||
]
|
||||
|
||||
const results: CoordinateTestResult['testPoints'] = []
|
||||
let totalError = 0
|
||||
let maxError = 0
|
||||
|
||||
for (const point of testPoints) {
|
||||
// 模拟正向转换：设备坐标 → 显示坐标
|
||||
const displayCoords = this.deviceToDisplay(point.x, point.y, deviceWidth, deviceHeight, displayWidth, displayHeight)
|
||||
|
||||
// 模拟反向转换：显示坐标 → 设备坐标
|
||||
const backToDevice = this.displayToDevice(displayCoords.x, displayCoords.y, deviceWidth, deviceHeight, displayWidth, displayHeight, deviceInfo)
|
||||
|
||||
// 计算误差
|
||||
const error = Math.sqrt(Math.pow(point.x - backToDevice.x, 2) + Math.pow(point.y - backToDevice.y, 2))
|
||||
totalError += error
|
||||
maxError = Math.max(maxError, error)
|
||||
|
||||
results.push({
|
||||
input: point,
|
||||
expected: point,
|
||||
actual: backToDevice,
|
||||
error
|
||||
})
|
||||
}
|
||||
|
||||
const avgError = totalError / testPoints.length
|
||||
const accuracy = Math.max(0, 100 - (avgError / Math.min(deviceWidth, deviceHeight) * 100))
|
||||
|
||||
const result: CoordinateTestResult = {
|
||||
success: avgError < 5, // 平均误差小于5像素认为成功
|
||||
accuracy,
|
||||
avgError,
|
||||
maxError,
|
||||
testPoints: results
|
||||
}
|
||||
|
||||
console.log('🧪 坐标映射测试结果:', {
|
||||
success: result.success,
|
||||
accuracy: `${accuracy.toFixed(2)}%`,
|
||||
avgError: `${avgError.toFixed(2)}px`,
|
||||
maxError: `${maxError.toFixed(2)}px`,
|
||||
testPointsCount: testPoints.length
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* 设备坐标转换为显示坐标
|
||||
*/
|
||||
private static deviceToDisplay(
|
||||
deviceX: number,
|
||||
deviceY: number,
|
||||
deviceWidth: number,
|
||||
deviceHeight: number,
|
||||
displayWidth: number,
|
||||
displayHeight: number
|
||||
): { x: number; y: number } {
|
||||
const scaleX = displayWidth / deviceWidth
|
||||
const scaleY = displayHeight / deviceHeight
|
||||
const scale = Math.min(scaleX, scaleY)
|
||||
|
||||
const actualDisplayWidth = deviceWidth * scale
|
||||
const actualDisplayHeight = deviceHeight * scale
|
||||
const offsetX = (displayWidth - actualDisplayWidth) / 2
|
||||
const offsetY = (displayHeight - actualDisplayHeight) / 2
|
||||
|
||||
return {
|
||||
x: deviceX * scale + offsetX,
|
||||
y: deviceY * scale + offsetY
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示坐标转换为设备坐标（增强版本）
|
||||
*/
|
||||
private static displayToDevice(
|
||||
displayX: number,
|
||||
displayY: number,
|
||||
deviceWidth: number,
|
||||
deviceHeight: number,
|
||||
displayWidth: number,
|
||||
displayHeight: number,
|
||||
deviceInfo?: DeviceInfo
|
||||
): { x: number; y: number } {
|
||||
const scaleX = displayWidth / deviceWidth
|
||||
const scaleY = displayHeight / deviceHeight
|
||||
const scale = Math.min(scaleX, scaleY)
|
||||
|
||||
const actualDisplayWidth = deviceWidth * scale
|
||||
const actualDisplayHeight = deviceHeight * scale
|
||||
const offsetX = (displayWidth - actualDisplayWidth) / 2
|
||||
const offsetY = (displayHeight - actualDisplayHeight) / 2
|
||||
|
||||
const adjustedX = displayX - offsetX
|
||||
const adjustedY = displayY - offsetY
|
||||
|
||||
let deviceX = adjustedX / scale
|
||||
let deviceY = adjustedY / scale
|
||||
|
||||
// 应用设备特性修正
|
||||
if (deviceInfo) {
|
||||
const density = deviceInfo.density
|
||||
if (density > 2) {
|
||||
deviceX = Math.round(deviceX * 10) / 10
|
||||
deviceY = Math.round(deviceY * 10) / 10
|
||||
} else {
|
||||
deviceX = Math.round(deviceX)
|
||||
deviceY = Math.round(deviceY)
|
||||
}
|
||||
|
||||
// 导航栏区域修正
|
||||
if (deviceInfo.hasNavigationBar && deviceInfo.navigationBarSize.height > 0) {
|
||||
const navBarHeight = deviceInfo.navigationBarSize.height
|
||||
const threshold = deviceHeight - navBarHeight
|
||||
if (deviceY > threshold) {
|
||||
deviceY = Math.min(deviceY, deviceHeight + Math.min(navBarHeight, 150))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
x: Math.max(0, Math.min(deviceWidth, deviceX)),
|
||||
y: Math.max(0, Math.min(deviceHeight, deviceY))
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成坐标映射诊断报告
|
||||
*/
|
||||
static generateDiagnosticReport(
|
||||
deviceWidth: number,
|
||||
deviceHeight: number,
|
||||
displayWidth: number,
|
||||
displayHeight: number,
|
||||
deviceInfo?: DeviceInfo
|
||||
): string {
|
||||
const testResult = this.testCoordinateMapping(deviceWidth, deviceHeight, displayWidth, displayHeight, deviceInfo)
|
||||
|
||||
let report = `📊 坐标映射诊断报告\n`
|
||||
report += `==========================================\n`
|
||||
report += `设备分辨率: ${deviceWidth}x${deviceHeight}\n`
|
||||
report += `显示分辨率: ${displayWidth}x${displayHeight}\n`
|
||||
report += `设备信息: ${deviceInfo ? '已提供' : '未提供'}\n`
|
||||
report += `\n`
|
||||
report += `测试结果:\n`
|
||||
report += `- 测试状态: ${testResult.success ? '✅ 通过' : '❌ 失败'}\n`
|
||||
report += `- 准确度: ${testResult.accuracy.toFixed(2)}%\n`
|
||||
report += `- 平均误差: ${testResult.avgError.toFixed(2)}px\n`
|
||||
report += `- 最大误差: ${testResult.maxError.toFixed(2)}px\n`
|
||||
report += `- 测试点数: ${testResult.testPoints.length}\n`
|
||||
report += `\n`
|
||||
|
||||
if (!testResult.success) {
|
||||
report += `❌ 问题点分析:\n`
|
||||
testResult.testPoints
|
||||
.filter(p => p.error > 5)
|
||||
.forEach((p, i) => {
|
||||
report += ` ${i + 1}. 输入(${p.input.x.toFixed(1)}, ${p.input.y.toFixed(1)}) → 输出(${p.actual.x.toFixed(1)}, ${p.actual.y.toFixed(1)}) 误差: ${p.error.toFixed(2)}px\n`
|
||||
})
|
||||
}
|
||||
|
||||
if (deviceInfo) {
|
||||
report += `\n📱 设备特征:\n`
|
||||
report += `- 密度: ${deviceInfo.density}\n`
|
||||
report += `- DPI: ${deviceInfo.densityDpi}\n`
|
||||
report += `- 长宽比: ${deviceInfo.aspectRatio.toFixed(3)}\n`
|
||||
report += `- 虚拟按键: ${deviceInfo.hasNavigationBar ? '是' : '否'}\n`
|
||||
if (deviceInfo.hasNavigationBar) {
|
||||
report += `- 导航栏尺寸: ${deviceInfo.navigationBarSize.width}x${deviceInfo.navigationBarSize.height}\n`
|
||||
}
|
||||
}
|
||||
|
||||
report += `==========================================\n`
|
||||
|
||||
return report
|
||||
}
|
||||
}
|
||||
|
||||
export default CoordinateMapper
|
||||
160
src/utils/CoordinateMappingConfig.ts
Normal file
160
src/utils/CoordinateMappingConfig.ts
Normal file
@@ -0,0 +1,160 @@
|
||||
/**
|
||||
* 坐标映射配置系统 - 渐进式功能启用
|
||||
*/
|
||||
|
||||
export interface CoordinateMappingConfig {
|
||||
// 基础功能（始终启用）
|
||||
enableBasicMapping: boolean
|
||||
|
||||
// 高精度功能（可选启用）
|
||||
enableSubPixelPrecision: boolean
|
||||
enableNavigationBarDetection: boolean
|
||||
enableDensityCorrection: boolean
|
||||
enableAspectRatioCorrection: boolean
|
||||
|
||||
// 调试功能
|
||||
enableDetailedLogging: boolean
|
||||
enableCoordinateValidation: boolean
|
||||
enablePerformanceMonitoring: boolean
|
||||
|
||||
// 容错设置
|
||||
fallbackToBasicOnError: boolean
|
||||
maxCoordinateError: number // 最大允许的坐标误差（像素）
|
||||
|
||||
// 设备特定优化
|
||||
enableDeviceSpecificOptimizations: boolean
|
||||
minimumScreenSize: { width: number; height: number }
|
||||
maximumScreenSize: { width: number; height: number }
|
||||
}
|
||||
|
||||
export const DEFAULT_COORDINATE_MAPPING_CONFIG: CoordinateMappingConfig = {
|
||||
// 基础功能
|
||||
enableBasicMapping: true,
|
||||
|
||||
// 高精度功能（逐步启用）
|
||||
enableSubPixelPrecision: false, // 🚩 第一阶段：关闭
|
||||
enableNavigationBarDetection: true, // ✅ 相对安全
|
||||
enableDensityCorrection: true, // ✅ 相对安全
|
||||
enableAspectRatioCorrection: true, // ✅ 相对安全
|
||||
|
||||
// 调试功能
|
||||
enableDetailedLogging: false, // 默认关闭，需要时开启
|
||||
enableCoordinateValidation: true,
|
||||
enablePerformanceMonitoring: false,
|
||||
|
||||
// 容错设置
|
||||
fallbackToBasicOnError: true,
|
||||
maxCoordinateError: 10, // 允许10像素误差
|
||||
|
||||
// 设备特定优化
|
||||
enableDeviceSpecificOptimizations: false, // 🚩 第一阶段：关闭
|
||||
minimumScreenSize: { width: 240, height: 320 },
|
||||
maximumScreenSize: { width: 4096, height: 8192 }
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据设备特征自动调整配置
|
||||
*/
|
||||
export function createOptimizedConfig(
|
||||
deviceWidth: number,
|
||||
deviceHeight: number,
|
||||
_userAgent?: string
|
||||
): CoordinateMappingConfig {
|
||||
const config = { ...DEFAULT_COORDINATE_MAPPING_CONFIG }
|
||||
|
||||
// 基于屏幕尺寸调整
|
||||
const screenArea = deviceWidth * deviceHeight
|
||||
const aspectRatio = Math.max(deviceWidth, deviceHeight) / Math.min(deviceWidth, deviceHeight)
|
||||
|
||||
// 高分辨率设备可以启用亚像素精度
|
||||
if (screenArea > 2073600) { // 1080p以上
|
||||
config.enableSubPixelPrecision = true
|
||||
}
|
||||
|
||||
// 长屏设备通常有导航栏
|
||||
if (aspectRatio > 2.0) {
|
||||
config.enableNavigationBarDetection = true
|
||||
}
|
||||
|
||||
// 超大屏幕需要更高的容错性
|
||||
if (deviceWidth > 1440 || deviceHeight > 2560) {
|
||||
config.maxCoordinateError = 15
|
||||
}
|
||||
|
||||
return config
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证坐标映射配置的安全性
|
||||
*/
|
||||
export function validateConfig(config: CoordinateMappingConfig): {
|
||||
isValid: boolean
|
||||
warnings: string[]
|
||||
errors: string[]
|
||||
} {
|
||||
const warnings: string[] = []
|
||||
const errors: string[] = []
|
||||
|
||||
// 检查基础配置
|
||||
if (!config.enableBasicMapping) {
|
||||
errors.push('基础坐标映射不能被禁用')
|
||||
}
|
||||
|
||||
// 检查容错设置
|
||||
if (config.maxCoordinateError < 1) {
|
||||
warnings.push('坐标误差容忍度过低，可能导致映射失败')
|
||||
}
|
||||
|
||||
if (config.maxCoordinateError > 50) {
|
||||
warnings.push('坐标误差容忍度过高，可能影响精度')
|
||||
}
|
||||
|
||||
// 检查屏幕尺寸范围
|
||||
if (config.minimumScreenSize.width < 100 || config.minimumScreenSize.height < 100) {
|
||||
errors.push('最小屏幕尺寸设置过小')
|
||||
}
|
||||
|
||||
if (config.maximumScreenSize.width > 10000 || config.maximumScreenSize.height > 10000) {
|
||||
warnings.push('最大屏幕尺寸设置过大')
|
||||
}
|
||||
|
||||
return {
|
||||
isValid: errors.length === 0,
|
||||
warnings,
|
||||
errors
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取功能启用状态的摘要
|
||||
*/
|
||||
export function getConfigSummary(config: CoordinateMappingConfig): string {
|
||||
const enabledFeatures: string[] = []
|
||||
const disabledFeatures: string[] = []
|
||||
|
||||
const features = [
|
||||
{ key: 'enableSubPixelPrecision', name: '亚像素精度' },
|
||||
{ key: 'enableNavigationBarDetection', name: '导航栏检测' },
|
||||
{ key: 'enableDensityCorrection', name: '密度修正' },
|
||||
{ key: 'enableAspectRatioCorrection', name: '长宽比修正' },
|
||||
{ key: 'enableDeviceSpecificOptimizations', name: '设备特定优化' }
|
||||
]
|
||||
|
||||
features.forEach(feature => {
|
||||
if (config[feature.key as keyof CoordinateMappingConfig]) {
|
||||
enabledFeatures.push(feature.name)
|
||||
} else {
|
||||
disabledFeatures.push(feature.name)
|
||||
}
|
||||
})
|
||||
|
||||
let summary = `坐标映射配置摘要:\n`
|
||||
summary += `✅ 已启用: ${enabledFeatures.join(', ') || '无'}\n`
|
||||
summary += `❌ 已禁用: ${disabledFeatures.join(', ') || '无'}\n`
|
||||
summary += `🎯 误差容忍: ${config.maxCoordinateError}px\n`
|
||||
summary += `🔧 回退模式: ${config.fallbackToBasicOnError ? '启用' : '禁用'}`
|
||||
|
||||
return summary
|
||||
}
|
||||
|
||||
export default DEFAULT_COORDINATE_MAPPING_CONFIG
|
||||
425
src/utils/SafeCoordinateMapper.ts
Normal file
425
src/utils/SafeCoordinateMapper.ts
Normal file
@@ -0,0 +1,425 @@
|
||||
/**
|
||||
* 安全的坐标映射工具类 - 渐进式增强
|
||||
*
|
||||
* 设计原则：
|
||||
* 1. 基础功能始终可用
|
||||
* 2. 高级功能可选启用
|
||||
* 3. 错误自动回退到基础功能
|
||||
* 4. 详细的性能监控和错误日志
|
||||
*/
|
||||
|
||||
import {
|
||||
type CoordinateMappingConfig,
|
||||
DEFAULT_COORDINATE_MAPPING_CONFIG,
|
||||
validateConfig
|
||||
} from './CoordinateMappingConfig'
|
||||
|
||||
export interface DeviceInfo {
|
||||
density: number
|
||||
densityDpi: number
|
||||
hasNavigationBar: boolean
|
||||
aspectRatio: number
|
||||
realScreenSize: { width: number; height: number }
|
||||
appScreenSize: { width: number; height: number }
|
||||
navigationBarSize: { width: number; height: number }
|
||||
}
|
||||
|
||||
export interface CoordinateMappingResult {
|
||||
x: number
|
||||
y: number
|
||||
metadata: {
|
||||
scale: number
|
||||
density: number
|
||||
actualDisplayArea: { width: number; height: number }
|
||||
offset: { x: number; y: number }
|
||||
aspectRatioDiff: number
|
||||
processingTime: number
|
||||
method: string
|
||||
errors: string[]
|
||||
warnings: string[]
|
||||
}
|
||||
}
|
||||
|
||||
export class SafeCoordinateMapper {
|
||||
private config: CoordinateMappingConfig
|
||||
private performanceStats: {
|
||||
totalMappings: number
|
||||
successfulMappings: number
|
||||
failedMappings: number
|
||||
averageProcessingTime: number
|
||||
errorRates: { [key: string]: number }
|
||||
}
|
||||
|
||||
constructor(config?: Partial<CoordinateMappingConfig>) {
|
||||
this.config = { ...DEFAULT_COORDINATE_MAPPING_CONFIG, ...config }
|
||||
this.performanceStats = {
|
||||
totalMappings: 0,
|
||||
successfulMappings: 0,
|
||||
failedMappings: 0,
|
||||
averageProcessingTime: 0,
|
||||
errorRates: {}
|
||||
}
|
||||
|
||||
// 验证配置
|
||||
const validation = validateConfig(this.config)
|
||||
if (!validation.isValid) {
|
||||
console.error('SafeCoordinateMapper配置无效:', validation.errors)
|
||||
throw new Error('Invalid coordinate mapping configuration')
|
||||
}
|
||||
|
||||
if (validation.warnings.length > 0) {
|
||||
console.warn('SafeCoordinateMapper配置警告:', validation.warnings)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 安全的坐标映射 - 主要入口点
|
||||
*/
|
||||
mapCoordinates(
|
||||
canvasX: number,
|
||||
canvasY: number,
|
||||
canvasElement: HTMLCanvasElement,
|
||||
deviceWidth: number,
|
||||
deviceHeight: number,
|
||||
deviceInfo?: DeviceInfo
|
||||
): CoordinateMappingResult | null {
|
||||
const startTime = performance.now()
|
||||
const errors: string[] = []
|
||||
const warnings: string[] = []
|
||||
|
||||
try {
|
||||
this.performanceStats.totalMappings++
|
||||
|
||||
// 🔒 阶段1：基础验证
|
||||
const basicValidation = this.validateBasicInputs(
|
||||
canvasX, canvasY, canvasElement, deviceWidth, deviceHeight
|
||||
)
|
||||
if (!basicValidation.isValid) {
|
||||
errors.push(...basicValidation.errors)
|
||||
warnings.push(...basicValidation.warnings)
|
||||
|
||||
if (this.config.fallbackToBasicOnError) {
|
||||
return this.performBasicMapping(
|
||||
canvasX, canvasY, canvasElement, deviceWidth, deviceHeight,
|
||||
startTime, 'basic_fallback', errors, warnings
|
||||
)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 🔒 阶段2：基础坐标映射
|
||||
const basicResult = this.performBasicMapping(
|
||||
canvasX, canvasY, canvasElement, deviceWidth, deviceHeight,
|
||||
startTime, 'basic', errors, warnings
|
||||
)
|
||||
|
||||
if (!basicResult) {
|
||||
this.performanceStats.failedMappings++
|
||||
return null
|
||||
}
|
||||
|
||||
// 🔒 阶段3：渐进式增强
|
||||
const enhancedResult = this.applyEnhancements(
|
||||
basicResult, deviceInfo, deviceWidth, deviceHeight
|
||||
)
|
||||
|
||||
// 🔒 阶段4：最终验证和统计
|
||||
const finalResult = this.validateAndFinalizeMappingResult(
|
||||
enhancedResult, deviceWidth, deviceHeight, startTime
|
||||
)
|
||||
|
||||
this.performanceStats.successfulMappings++
|
||||
this.updatePerformanceStats(finalResult.metadata.processingTime)
|
||||
|
||||
return finalResult
|
||||
|
||||
} catch (error) {
|
||||
this.performanceStats.failedMappings++
|
||||
const errorMessage = `坐标映射失败: ${error instanceof Error ? error.message : 'Unknown error'}`
|
||||
console.error(errorMessage, error)
|
||||
|
||||
if (this.config.fallbackToBasicOnError) {
|
||||
return this.performBasicMapping(
|
||||
canvasX, canvasY, canvasElement, deviceWidth, deviceHeight,
|
||||
startTime, 'error_fallback', [errorMessage], warnings
|
||||
)
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 🔒 基础输入验证
|
||||
*/
|
||||
private validateBasicInputs(
|
||||
canvasX: number,
|
||||
canvasY: number,
|
||||
canvasElement: HTMLCanvasElement,
|
||||
deviceWidth: number,
|
||||
deviceHeight: number
|
||||
): { isValid: boolean; errors: string[]; warnings: string[] } {
|
||||
const errors: string[] = []
|
||||
const warnings: string[] = []
|
||||
|
||||
// 检查基础参数
|
||||
if (!canvasElement || !canvasElement.parentElement) {
|
||||
errors.push('Canvas元素或其容器不存在')
|
||||
}
|
||||
|
||||
if (deviceWidth <= 0 || deviceHeight <= 0) {
|
||||
errors.push(`设备尺寸无效: ${deviceWidth}×${deviceHeight}`)
|
||||
}
|
||||
|
||||
if (canvasX < 0 || canvasY < 0) {
|
||||
warnings.push('Canvas坐标为负数')
|
||||
}
|
||||
|
||||
// 检查设备尺寸范围
|
||||
if (deviceWidth < this.config.minimumScreenSize.width ||
|
||||
deviceHeight < this.config.minimumScreenSize.height) {
|
||||
warnings.push('设备尺寸过小')
|
||||
}
|
||||
|
||||
if (deviceWidth > this.config.maximumScreenSize.width ||
|
||||
deviceHeight > this.config.maximumScreenSize.height) {
|
||||
warnings.push('设备尺寸过大')
|
||||
}
|
||||
|
||||
return { isValid: errors.length === 0, errors, warnings }
|
||||
}
|
||||
|
||||
/**
|
||||
* 🔒 基础坐标映射 - 始终可用的核心功能
|
||||
*/
|
||||
private performBasicMapping(
|
||||
canvasX: number,
|
||||
canvasY: number,
|
||||
canvasElement: HTMLCanvasElement,
|
||||
deviceWidth: number,
|
||||
deviceHeight: number,
|
||||
startTime: number,
|
||||
method: string,
|
||||
errors: string[],
|
||||
warnings: string[]
|
||||
): CoordinateMappingResult | null {
|
||||
try {
|
||||
const container = canvasElement.parentElement!
|
||||
const containerRect = container.getBoundingClientRect()
|
||||
|
||||
const displayWidth = containerRect.width
|
||||
const displayHeight = containerRect.height
|
||||
|
||||
// 基础缩放计算
|
||||
const scaleX = displayWidth / deviceWidth
|
||||
const scaleY = displayHeight / deviceHeight
|
||||
const scale = Math.min(scaleX, scaleY)
|
||||
|
||||
// 基础显示区域计算
|
||||
const actualDisplayWidth = deviceWidth * scale
|
||||
const actualDisplayHeight = deviceHeight * scale
|
||||
const offsetX = (displayWidth - actualDisplayWidth) / 2
|
||||
const offsetY = (displayHeight - actualDisplayHeight) / 2
|
||||
|
||||
// 基础坐标转换
|
||||
const adjustedCanvasX = canvasX - offsetX
|
||||
const adjustedCanvasY = canvasY - offsetY
|
||||
|
||||
// 检查是否在显示区域内
|
||||
if (adjustedCanvasX < 0 || adjustedCanvasX > actualDisplayWidth ||
|
||||
adjustedCanvasY < 0 || adjustedCanvasY > actualDisplayHeight) {
|
||||
return null
|
||||
}
|
||||
|
||||
const deviceX = adjustedCanvasX / scale
|
||||
const deviceY = adjustedCanvasY / scale
|
||||
|
||||
// 基础坐标限制
|
||||
const clampedX = Math.max(0, Math.min(deviceWidth, Math.round(deviceX)))
|
||||
const clampedY = Math.max(0, Math.min(deviceHeight, Math.round(deviceY)))
|
||||
|
||||
const processingTime = performance.now() - startTime
|
||||
|
||||
return {
|
||||
x: clampedX,
|
||||
y: clampedY,
|
||||
metadata: {
|
||||
scale,
|
||||
density: 1.0, // 基础密度
|
||||
actualDisplayArea: { width: actualDisplayWidth, height: actualDisplayHeight },
|
||||
offset: { x: offsetX, y: offsetY },
|
||||
aspectRatioDiff: Math.abs((deviceWidth / deviceHeight) - (displayWidth / displayHeight)),
|
||||
processingTime,
|
||||
method,
|
||||
errors: [...errors],
|
||||
warnings: [...warnings]
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('基础坐标映射失败:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 🔒 渐进式增强 - 根据配置启用高级功能
|
||||
*/
|
||||
private applyEnhancements(
|
||||
basicResult: CoordinateMappingResult,
|
||||
deviceInfo?: DeviceInfo,
|
||||
deviceWidth?: number,
|
||||
deviceHeight?: number
|
||||
): CoordinateMappingResult {
|
||||
const enhanced = { ...basicResult }
|
||||
|
||||
try {
|
||||
// 🔧 增强1：密度修正
|
||||
if (this.config.enableDensityCorrection && deviceInfo) {
|
||||
enhanced.metadata.density = deviceInfo.density
|
||||
enhanced.metadata.method += '+density'
|
||||
|
||||
// 高密度设备的亚像素精度
|
||||
if (this.config.enableSubPixelPrecision && deviceInfo.density > 2) {
|
||||
enhanced.x = Math.round(enhanced.x * 10) / 10
|
||||
enhanced.y = Math.round(enhanced.y * 10) / 10
|
||||
enhanced.metadata.method += '+subpixel'
|
||||
}
|
||||
}
|
||||
|
||||
// 🔧 增强2：导航栏检测
|
||||
if (this.config.enableNavigationBarDetection && deviceInfo && deviceHeight) {
|
||||
if (deviceInfo.hasNavigationBar && deviceInfo.navigationBarSize?.height > 0) {
|
||||
const navBarHeight = deviceInfo.navigationBarSize.height
|
||||
const navigationBarThreshold = deviceHeight - navBarHeight
|
||||
|
||||
if (enhanced.y > navigationBarThreshold) {
|
||||
enhanced.y = Math.min(enhanced.y, deviceHeight + Math.min(navBarHeight, 150))
|
||||
enhanced.metadata.method += '+navbar'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 🔧 增强3：长宽比修正
|
||||
if (this.config.enableAspectRatioCorrection && deviceInfo) {
|
||||
const aspectRatioDiff = Math.abs(deviceInfo.aspectRatio - (deviceWidth! / deviceHeight!))
|
||||
if (aspectRatioDiff > 0.1) {
|
||||
enhanced.metadata.warnings.push(`长宽比差异较大: ${aspectRatioDiff.toFixed(3)}`)
|
||||
}
|
||||
}
|
||||
|
||||
// 🔧 增强4：设备特定优化
|
||||
if (this.config.enableDeviceSpecificOptimizations && deviceInfo && deviceWidth && deviceHeight) {
|
||||
const screenArea = deviceWidth * deviceHeight
|
||||
if (screenArea > 2073600) { // 1080p以上
|
||||
enhanced.metadata.method += '+highres'
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
enhanced.metadata.errors.push(`增强处理失败: ${error instanceof Error ? error.message : 'Unknown error'}`)
|
||||
}
|
||||
|
||||
return enhanced
|
||||
}
|
||||
|
||||
/**
|
||||
* 🔒 最终验证和结果处理
|
||||
*/
|
||||
private validateAndFinalizeMappingResult(
|
||||
result: CoordinateMappingResult,
|
||||
deviceWidth: number,
|
||||
deviceHeight: number,
|
||||
startTime: number
|
||||
): CoordinateMappingResult {
|
||||
// 最终坐标验证
|
||||
if (this.config.enableCoordinateValidation) {
|
||||
const errorX = Math.abs(result.x - Math.round(result.x))
|
||||
const errorY = Math.abs(result.y - Math.round(result.y))
|
||||
|
||||
if (errorX > this.config.maxCoordinateError || errorY > this.config.maxCoordinateError) {
|
||||
result.metadata.warnings.push(`坐标误差过大: (${errorX.toFixed(2)}, ${errorY.toFixed(2)})`)
|
||||
}
|
||||
}
|
||||
|
||||
// 确保坐标在边界内
|
||||
result.x = Math.max(0, Math.min(deviceWidth, result.x))
|
||||
result.y = Math.max(0, Math.min(deviceHeight, result.y))
|
||||
|
||||
// 更新处理时间
|
||||
result.metadata.processingTime = performance.now() - startTime
|
||||
|
||||
// 详细日志
|
||||
if (this.config.enableDetailedLogging) {
|
||||
console.log('SafeCoordinateMapper映射完成:', {
|
||||
coordinates: { x: result.x, y: result.y },
|
||||
metadata: result.metadata,
|
||||
config: this.config,
|
||||
stats: this.performanceStats
|
||||
})
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新性能统计
|
||||
*/
|
||||
private updatePerformanceStats(processingTime: number) {
|
||||
if (this.config.enablePerformanceMonitoring) {
|
||||
const totalTime = this.performanceStats.averageProcessingTime * (this.performanceStats.successfulMappings - 1)
|
||||
this.performanceStats.averageProcessingTime = (totalTime + processingTime) / this.performanceStats.successfulMappings
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取性能统计报告
|
||||
*/
|
||||
getPerformanceReport(): string {
|
||||
const successRate = this.performanceStats.totalMappings > 0
|
||||
? (this.performanceStats.successfulMappings / this.performanceStats.totalMappings * 100).toFixed(1)
|
||||
: '0'
|
||||
|
||||
return `
|
||||
SafeCoordinateMapper性能报告:
|
||||
📊 总映射次数: ${this.performanceStats.totalMappings}
|
||||
✅ 成功次数: ${this.performanceStats.successfulMappings}
|
||||
❌ 失败次数: ${this.performanceStats.failedMappings}
|
||||
📈 成功率: ${successRate}%
|
||||
⏱️ 平均处理时间: ${this.performanceStats.averageProcessingTime.toFixed(2)}ms
|
||||
🔧 回退模式: ${this.config.fallbackToBasicOnError ? '启用' : '禁用'}
|
||||
`
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新配置
|
||||
*/
|
||||
updateConfig(newConfig: Partial<CoordinateMappingConfig>) {
|
||||
const updatedConfig = { ...this.config, ...newConfig }
|
||||
const validation = validateConfig(updatedConfig)
|
||||
|
||||
if (!validation.isValid) {
|
||||
console.error('配置更新失败:', validation.errors)
|
||||
return false
|
||||
}
|
||||
|
||||
this.config = updatedConfig
|
||||
console.log('SafeCoordinateMapper配置已更新')
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置性能统计
|
||||
*/
|
||||
resetPerformanceStats() {
|
||||
this.performanceStats = {
|
||||
totalMappings: 0,
|
||||
successfulMappings: 0,
|
||||
failedMappings: 0,
|
||||
averageProcessingTime: 0,
|
||||
errorRates: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default SafeCoordinateMapper
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
27
tsconfig.app.json
Normal file
27
tsconfig.app.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
25
tsconfig.node.json
Normal file
25
tsconfig.node.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
62
vite.config.ts
Normal file
62
vite.config.ts
Normal file
@@ -0,0 +1,62 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
host: '0.0.0.0', // 允许外部访问
|
||||
port: 5173,
|
||||
open: false, // 服务器环境不自动打开浏览器
|
||||
cors: true, // 启用CORS
|
||||
},
|
||||
preview: {
|
||||
host: '0.0.0.0',
|
||||
port: 5173,
|
||||
},
|
||||
build: {
|
||||
// 🔧 优化构建配置，解决大块警告
|
||||
chunkSizeWarningLimit: 1000, // 提高块大小警告限制到1MB
|
||||
rollupOptions: {
|
||||
output: {
|
||||
// 📦 手动代码分割，优化加载性能
|
||||
manualChunks: {
|
||||
// React相关库单独打包
|
||||
'react-vendor': ['react', 'react-dom'],
|
||||
// Redux相关库单独打包
|
||||
'redux-vendor': ['@reduxjs/toolkit', 'react-redux'],
|
||||
// UI库单独打包
|
||||
'ui-vendor': ['antd'],
|
||||
// Socket.IO单独打包
|
||||
'socket-vendor': ['socket.io-client'],
|
||||
},
|
||||
// 📁 优化文件命名
|
||||
chunkFileNames: 'assets/js/[name]-[hash].js',
|
||||
entryFileNames: 'assets/js/[name]-[hash].js',
|
||||
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
|
||||
}
|
||||
},
|
||||
// 🚀 构建优化
|
||||
sourcemap: false, // 生产环境不生成sourcemap
|
||||
minify: 'terser', // 使用terser压缩
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: true, // 移除console
|
||||
drop_debugger: true, // 移除debugger
|
||||
},
|
||||
},
|
||||
// 📊 资源优化
|
||||
assetsInlineLimit: 4096, // 小于4KB的资源内联为base64
|
||||
},
|
||||
// 🔧 依赖优化
|
||||
optimizeDeps: {
|
||||
include: [
|
||||
'react',
|
||||
'react-dom',
|
||||
'@reduxjs/toolkit',
|
||||
'react-redux',
|
||||
'antd',
|
||||
'socket.io-client'
|
||||
],
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user