hikvision-web 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/index.html +12 -0
  2. package/package.json +27 -0
  3. package/src/App.css +48 -0
  4. package/src/App.css.new +48 -0
  5. package/src/App.tsx +157 -0
  6. package/src/App.tsx.new +132 -0
  7. package/src/index.css +39 -0
  8. package/src/main.tsx +14 -0
  9. package/src/pages/BindingPage.tsx +351 -0
  10. package/src/pages/CardForm.tsx +173 -0
  11. package/src/pages/CardList.tsx +193 -0
  12. package/src/pages/DashboardPage.tsx +300 -0
  13. package/src/pages/GroupPage.tsx +336 -0
  14. package/src/pages/OrgPage.tsx +198 -0
  15. package/src/pages/OrgTreePage.tsx +203 -0
  16. package/src/pages/PersonDetail.tsx +146 -0
  17. package/src/pages/PersonForm.tsx +199 -0
  18. package/src/pages/PersonList.tsx +174 -0
  19. package/src/pages/PersonTreePage.tsx +563 -0
  20. package/src/pages/SyncPage.tsx +29 -0
  21. package/src/pages/SystemPage.tsx +758 -0
  22. package/src/pages/VehicleForm.tsx +231 -0
  23. package/src/pages/VehicleList.tsx +199 -0
  24. package/src/services/api.ts +128 -0
  25. package/src/store/appStore.ts +159 -0
  26. package/src/utils/constants.ts +105 -0
  27. package/tsconfig.json +21 -0
  28. package/tsconfig.node.json +10 -0
  29. package/vite.config.ts +16 -0
package/index.html ADDED
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>海康威视平台管理</title>
7
+ </head>
8
+ <body>
9
+ <div id="root"></div>
10
+ <script type="module" src="/src/main.tsx"></script>
11
+ </body>
12
+ </html>
package/package.json ADDED
@@ -0,0 +1,27 @@
1
+ {
2
+ "name": "hikvision-web",
3
+ "version": "1.0.0",
4
+ "description": "Hikvision Manager Web Management Interface",
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite --host 0.0.0.0 --port ${WEB_PORT:-3030}",
8
+ "build": "tsc && vite build",
9
+ "preview": "vite preview"
10
+ },
11
+ "dependencies": {
12
+ "@ant-design/icons": "^6.2.3",
13
+ "antd": "^6.4.3",
14
+ "axios": "^1.16.1",
15
+ "react": "^18.2.0",
16
+ "react-dom": "^18.2.0",
17
+ "react-router-dom": "^7.15.1",
18
+ "zustand": "^5.0.13"
19
+ },
20
+ "devDependencies": {
21
+ "@types/react": "^18.2.43",
22
+ "@types/react-dom": "^18.2.17",
23
+ "@vitejs/plugin-react": "^4.2.1",
24
+ "typescript": "^5.3.3",
25
+ "vite": "^5.0.8"
26
+ }
27
+ }
package/src/App.css ADDED
@@ -0,0 +1,48 @@
1
+ .logo {
2
+ height: 64px;
3
+ display: flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ background: rgba(255, 255, 255, 0.1);
7
+ }
8
+
9
+ .logo h2 {
10
+ color: #fff;
11
+ margin: 0;
12
+ font-size: 16px;
13
+ }
14
+
15
+ .header-content {
16
+ height: 100%;
17
+ display: flex;
18
+ align-items: center;
19
+ padding: 0 24px;
20
+ }
21
+
22
+ .header-content h3 {
23
+ margin: 0;
24
+ font-size: 18px;
25
+ color: #333;
26
+ }
27
+
28
+ .page-title {
29
+ margin-bottom: 16px;
30
+ }
31
+
32
+ .page-title h2 {
33
+ margin: 0;
34
+ color: #333;
35
+ }
36
+
37
+ .ant-table-wrapper .ant-table {
38
+ background: #fff;
39
+ border-radius: 8px;
40
+ }
41
+
42
+ .ant-card {
43
+ border-radius: 8px;
44
+ }
45
+
46
+ .ant-form-item-label > label {
47
+ font-weight: 500;
48
+ }
package/src/App.css.new ADDED
@@ -0,0 +1,48 @@
1
+ .logo {
2
+ height: 64px;
3
+ display: flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ background: rgba(255, 255, 255, 0.1);
7
+ }
8
+
9
+ .logo h2 {
10
+ color: #fff;
11
+ margin: 0;
12
+ font-size: 16px;
13
+ }
14
+
15
+ .header-content {
16
+ height: 100%;
17
+ display: flex;
18
+ align-items: center;
19
+ padding: 0 24px;
20
+ }
21
+
22
+ .header-content h3 {
23
+ margin: 0;
24
+ font-size: 18px;
25
+ color: #333;
26
+ }
27
+
28
+ .page-title {
29
+ margin-bottom: 16px;
30
+ }
31
+
32
+ .page-title h2 {
33
+ margin: 0;
34
+ color: #333;
35
+ }
36
+
37
+ .ant-table-wrapper .ant-table {
38
+ background: #fff;
39
+ border-radius: 8px;
40
+ }
41
+
42
+ .ant-card {
43
+ border-radius: 8px;
44
+ }
45
+
46
+ .ant-form-item-label > label {
47
+ font-weight: 500;
48
+ }
package/src/App.tsx ADDED
@@ -0,0 +1,157 @@
1
+ import { BrowserRouter, Routes, Route, Navigate, useNavigate } from 'react-router-dom';
2
+ import { Layout, Menu } from 'antd';
3
+ import {
4
+ DashboardOutlined,
5
+ TeamOutlined,
6
+ CarOutlined,
7
+ IdcardOutlined,
8
+ FolderOutlined,
9
+ LinkOutlined,
10
+ SyncOutlined,
11
+ SettingOutlined,
12
+ ApartmentOutlined,
13
+ } from '@ant-design/icons';
14
+ import PersonList from './pages/PersonList';
15
+ import PersonTreePage from './pages/PersonTreePage';
16
+ import PersonDetail from './pages/PersonDetail';
17
+ import PersonForm from './pages/PersonForm';
18
+ import VehicleList from './pages/VehicleList';
19
+ import VehicleForm from './pages/VehicleForm';
20
+ import CardList from './pages/CardList';
21
+ import CardForm from './pages/CardForm';
22
+ import GroupPage from './pages/GroupPage';
23
+ import BindingPage from './pages/BindingPage';
24
+ import SyncPage from './pages/SyncPage';
25
+ import SystemPage from './pages/SystemPage';
26
+ import DashboardPage from './pages/DashboardPage';
27
+ import OrgPage from './pages/OrgPage';
28
+ import OrgTreePage from './pages/OrgTreePage';
29
+ import './App.css';
30
+
31
+ const { Header, Sider, Content } = Layout;
32
+
33
+ const menuItems = [
34
+ {
35
+ key: '/dashboard',
36
+ icon: <DashboardOutlined />,
37
+ label: '系统概览',
38
+ },
39
+ {
40
+ key: '/org',
41
+ icon: <ApartmentOutlined />,
42
+ label: '组织架构',
43
+ children: [
44
+ { key: '/org', label: '列表视图' },
45
+ { key: '/org-tree', label: '树形视图' },
46
+ ],
47
+ },
48
+ {
49
+ key: '/person',
50
+ icon: <TeamOutlined />,
51
+ label: '人员管理',
52
+ children: [
53
+ { key: '/person', label: '列表视图' },
54
+ { key: '/person-tree', label: '树状视图' },
55
+ { key: '/person/add', label: '添加人员' },
56
+ ],
57
+ },
58
+ {
59
+ key: '/vehicle',
60
+ icon: <CarOutlined />,
61
+ label: '车辆管理',
62
+ children: [
63
+ { key: '/vehicle', label: '车辆列表' },
64
+ { key: '/vehicle/add', label: '添加车辆' },
65
+ ],
66
+ },
67
+ {
68
+ key: '/card',
69
+ icon: <IdcardOutlined />,
70
+ label: '卡片管理',
71
+ children: [
72
+ { key: '/card', label: '卡片列表' },
73
+ { key: '/card/add', label: '添加卡片' },
74
+ ],
75
+ },
76
+ {
77
+ key: '/group',
78
+ icon: <FolderOutlined />,
79
+ label: '车辆群组',
80
+ children: [{ key: '/group', label: '分组列表' }],
81
+ },
82
+ {
83
+ key: '/binding',
84
+ icon: <LinkOutlined />,
85
+ label: '绑定关系',
86
+ children: [{ key: '/binding', label: '绑定管理' }],
87
+ },
88
+ {
89
+ key: '/sync',
90
+ icon: <SyncOutlined />,
91
+ label: '数据同步',
92
+ children: [{ key: '/sync', label: '同步管理' }],
93
+ },
94
+ {
95
+ key: '/system',
96
+ icon: <SettingOutlined />,
97
+ label: '系统设置',
98
+ children: [{ key: '/system', label: '系统配置' }],
99
+ },
100
+ ];
101
+
102
+ function MenuWithNavigate() {
103
+ const navigate = useNavigate();
104
+ return (
105
+ <Menu
106
+ theme="dark"
107
+ mode="inline"
108
+ items={menuItems}
109
+ defaultSelectedKeys={['/person']}
110
+ onClick={({ key }) => navigate(key)}
111
+ />
112
+ );
113
+ }
114
+
115
+ export default function App() {
116
+ return (
117
+ <BrowserRouter>
118
+ <Layout style={{ minHeight: '100vh' }}>
119
+ <Sider width={220}>
120
+ <div className="logo">
121
+ <h2>海康平台管理</h2>
122
+ </div>
123
+ <MenuWithNavigate />
124
+ </Sider>
125
+ <Layout>
126
+ <Header style={{ background: '#fff', padding: 0 }}>
127
+ <div className="header-content">
128
+ <h3>海康威视 Artemis 平台管理系统</h3>
129
+ </div>
130
+ </Header>
131
+ <Content style={{ padding: '24px', background: '#f0f2f5' }}>
132
+ <Routes>
133
+ <Route path="/" element={<Navigate to="/person" replace />} />
134
+ <Route path="/dashboard" element={<DashboardPage />} />
135
+ <Route path="/org" element={<OrgPage />} />
136
+ <Route path="/org-tree" element={<OrgTreePage />} />
137
+ <Route path="/person" element={<PersonList />} />
138
+ <Route path="/person-tree" element={<PersonTreePage />} />
139
+ <Route path="/person/detail/:personId" element={<PersonDetail />} />
140
+ <Route path="/person/add" element={<PersonForm />} />
141
+ <Route path="/person/edit/:personId" element={<PersonForm />} />
142
+ <Route path="/vehicle" element={<VehicleList />} />
143
+ <Route path="/vehicle/add" element={<VehicleForm />} />
144
+ <Route path="/vehicle/edit/:vehicleId" element={<VehicleForm />} />
145
+ <Route path="/card" element={<CardList />} />
146
+ <Route path="/card/add" element={<CardForm />} />
147
+ <Route path="/group" element={<GroupPage />} />
148
+ <Route path="/binding" element={<BindingPage />} />
149
+ <Route path="/sync" element={<SyncPage />} />
150
+ <Route path="/system" element={<SystemPage />} />
151
+ </Routes>
152
+ </Content>
153
+ </Layout>
154
+ </Layout>
155
+ </BrowserRouter>
156
+ );
157
+ }
package/src/App.tsx.new ADDED
@@ -0,0 +1,132 @@
1
+ import { BrowserRouter, Routes, Route, Navigate, useNavigate } from 'react-router-dom';
2
+ import { Layout, Menu } from 'antd';
3
+ import {
4
+ TeamOutlined,
5
+ CarOutlined,
6
+ IdcardOutlined,
7
+ FolderOutlined,
8
+ LinkOutlined,
9
+ SyncOutlined,
10
+ SettingOutlined,
11
+ } from '@ant-design/icons';
12
+ import PersonList from './pages/PersonList';
13
+ import PersonDetail from './pages/PersonDetail';
14
+ import PersonForm from './pages/PersonForm';
15
+ import VehicleList from './pages/VehicleList';
16
+ import VehicleForm from './pages/VehicleForm';
17
+ import CardList from './pages/CardList';
18
+ import CardForm from './pages/CardForm';
19
+ import GroupPage from './pages/GroupPage';
20
+ import BindingPage from './pages/BindingPage';
21
+ import SyncPage from './pages/SyncPage';
22
+ import SystemPage from './pages/SystemPage';
23
+ import './App.css';
24
+
25
+ const { Header, Sider, Content } = Layout;
26
+
27
+ const menuItems = [
28
+ {
29
+ key: '/person',
30
+ icon: <TeamOutlined />,
31
+ label: '人员管理',
32
+ children: [
33
+ { key: '/person', label: '人员列表' },
34
+ { key: '/person/add', label: '添加人员' },
35
+ ],
36
+ },
37
+ {
38
+ key: '/vehicle',
39
+ icon: <CarOutlined />,
40
+ label: '车辆管理',
41
+ children: [
42
+ { key: '/vehicle', label: '车辆列表' },
43
+ { key: '/vehicle/add', label: '添加车辆' },
44
+ ],
45
+ },
46
+ {
47
+ key: '/card',
48
+ icon: <IdcardOutlined />,
49
+ label: '卡片管理',
50
+ children: [
51
+ { key: '/card', label: '卡片列表' },
52
+ { key: '/card/add', label: '添加卡片' },
53
+ ],
54
+ },
55
+ {
56
+ key: '/group',
57
+ icon: <FolderOutlined />,
58
+ label: '分组管理',
59
+ children: [{ key: '/group', label: '分组列表' }],
60
+ },
61
+ {
62
+ key: '/binding',
63
+ icon: <LinkOutlined />,
64
+ label: '绑定关系',
65
+ children: [{ key: '/binding', label: '绑定管理' }],
66
+ },
67
+ {
68
+ key: '/sync',
69
+ icon: <SyncOutlined />,
70
+ label: '数据同步',
71
+ children: [{ key: '/sync', label: '同步管理' }],
72
+ },
73
+ {
74
+ key: '/system',
75
+ icon: <SettingOutlined />,
76
+ label: '系统设置',
77
+ children: [{ key: '/system', label: '系统配置' }],
78
+ },
79
+ ];
80
+
81
+ function MenuWithNavigate() {
82
+ const navigate = useNavigate();
83
+ return (
84
+ <Menu
85
+ theme="dark"
86
+ mode="inline"
87
+ items={menuItems}
88
+ defaultSelectedKeys={['/person']}
89
+ onClick={({ key }) => navigate(key)}
90
+ />
91
+ );
92
+ }
93
+
94
+ export default function App() {
95
+ return (
96
+ <BrowserRouter>
97
+ <Layout style={{ minHeight: '100vh' }}>
98
+ <Sider width={220}>
99
+ <div className="logo">
100
+ <h2>海康平台管理</h2>
101
+ </div>
102
+ <MenuWithNavigate />
103
+ </Sider>
104
+ <Layout>
105
+ <Header style={{ background: '#fff', padding: 0 }}>
106
+ <div className="header-content">
107
+ <h3>海康威视 Artemis 平台管理系统</h3>
108
+ </div>
109
+ </Header>
110
+ <Content style={{ padding: '24px', background: '#f0f2f5' }}>
111
+ <Routes>
112
+ <Route path="/" element={<Navigate to="/person" replace />} />
113
+ <Route path="/person" element={<PersonList />} />
114
+ <Route path="/person/detail/:personId" element={<PersonDetail />} />
115
+ <Route path="/person/add" element={<PersonForm />} />
116
+ <Route path="/person/edit/:personId" element={<PersonForm />} />
117
+ <Route path="/vehicle" element={<VehicleList />} />
118
+ <Route path="/vehicle/add" element={<VehicleForm />} />
119
+ <Route path="/vehicle/edit/:vehicleId" element={<VehicleForm />} />
120
+ <Route path="/card" element={<CardList />} />
121
+ <Route path="/card/add" element={<CardForm />} />
122
+ <Route path="/group" element={<GroupPage />} />
123
+ <Route path="/binding" element={<BindingPage />} />
124
+ <Route path="/sync" element={<SyncPage />} />
125
+ <Route path="/system" element={<SystemPage />} />
126
+ </Routes>
127
+ </Content>
128
+ </Layout>
129
+ </Layout>
130
+ </BrowserRouter>
131
+ );
132
+ }
package/src/index.css ADDED
@@ -0,0 +1,39 @@
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
9
+ -webkit-font-smoothing: antialiased;
10
+ -moz-osx-font-smoothing: grayscale;
11
+ }
12
+
13
+ #root {
14
+ min-height: 100vh;
15
+ }
16
+
17
+ /* 表格样式优化 */
18
+ .ant-table-thead > tr > th {
19
+ background: #fafafa;
20
+ font-weight: 600;
21
+ }
22
+
23
+ .ant-table-tbody > tr:hover > td {
24
+ background: #f5f5f5;
25
+ }
26
+
27
+ /* 表单样式优化 */
28
+ .ant-form-item {
29
+ margin-bottom: 24px;
30
+ }
31
+
32
+ /* 按钮样式优化 */
33
+ .ant-btn-primary {
34
+ background: #1677ff;
35
+ }
36
+
37
+ .ant-btn-primary:hover {
38
+ background: #4096ff;
39
+ }
package/src/main.tsx ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom/client';
3
+ import { ConfigProvider } from 'antd';
4
+ import zhCN from 'antd/locale/zh_CN';
5
+ import App from './App';
6
+ import './index.css';
7
+
8
+ ReactDOM.createRoot(document.getElementById('root')!).render(
9
+ <React.StrictMode>
10
+ <ConfigProvider locale={zhCN}>
11
+ <App />
12
+ </ConfigProvider>
13
+ </React.StrictMode>
14
+ );