+
+ );
+};
+
+export default ProgressBar;
\ No newline at end of file
diff --git a/pc-fe/src/pages/configSteps/components/networkConfig/index.less b/pc-fe/src/pages/configSteps/components/networkConfig/index.less
index 33891d0..0f5dff7 100644
--- a/pc-fe/src/pages/configSteps/components/networkConfig/index.less
+++ b/pc-fe/src/pages/configSteps/components/networkConfig/index.less
@@ -1,178 +1,202 @@
+// src/pages/configSteps/components/networkConfig/index.less
.network-config {
- width: 100%;
- height: 100%;
display: flex;
flex-direction: column;
+ height: 100%;
+ box-sizing: border-box;
- .tab-container {
- height: 70px;
- flex-shrink: 0;
- background: linear-gradient(180deg, rgba(229, 229, 229, 0.05) 0%, rgba(229, 229, 229, 0.05) 100%);
+ .tab-content-container-wrapper {
display: flex;
- justify-content: center;
- align-items: center;
-
- .tab-item {
- font-family: PingFang SC;
- font-weight: 400;
- font-style: Heavy;
- top: -5px;
- font-size: 20px;
- line-height: 30px;
- letter-spacing: 0%;
- padding: 0 30px;
- cursor: pointer;
- position: relative;
- color: rgba(229, 229, 229, 0.5);
-
- &.active {
- color: rgba(229, 229, 229, 1);
- }
-
- .indicator {
- position: absolute;
- bottom: -15px;
- left: 50%;
- transform: translateX(-50%);
- width: 8px;
- height: 8px;
- background: rgba(229, 229, 229, 1);
- border-radius: 50%;
- }
- }
- }
-
- .content-container {
+ flex-direction: column;
flex: 1;
+ box-sizing: border-box;
+ // background: rgba(255, 255, 255, 1);
+ border-radius: 20px;
overflow: hidden;
- }
-
- .dhcp-content {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 100%;
-
- h2 {
- font-family: PingFang SC;
- font-weight: 400;
- font-style: Heavy;
- font-size: 24px;
- color: rgba(229, 229, 229, 1);
- margin-bottom: 20px;
- }
-
- p {
- font-family: PingFang SC;
- font-size: 18px;
- color: rgba(229, 229, 229, 0.8);
- }
- }
-
- .static-ip-container {
- display: flex;
- flex-direction: column;
- height: 100%;
-
- .form-container {
- width: 500px;
- margin: 0 auto;
- flex: 1;
- overflow-y: auto;
- padding: 20px 0px;
- padding-right: 60px;
-
- // 滚动条样式
- &::-webkit-scrollbar {
- width: 10px;
- }
-
- &::-webkit-scrollbar-track {
- background: rgba(255, 255, 255, 0.05);
- border-radius: 28px;
- margin: 10px 0;
- }
-
- &::-webkit-scrollbar-thumb {
- background: rgba(255, 255, 255, 0.1);
- border-radius: 28px;
- min-height: 30px;
- }
-
- // 表单项样式
- .ant-form-item {
- margin-bottom: 24px;
- }
-
- .ant-form-item-label {
- padding: 0 0 12px 0;
- }
-
- .label {
- font-family: PingFang SC;
- font-weight: 400;
- font-style: Heavy;
- font-size: 18px;
- line-height: 32px;
- letter-spacing: 0%;
- color: rgba(229, 229, 229, 1);
- margin-bottom: 12px;
- }
-
- .input-field {
+ z-index: 1;
+ position: relative;
+
+ .tab-container {
+ display: flex;
+ z-index: 2; // 提高tab容器的层级
+ position: relative;
+ flex-shrink: 0;
+ .special-tab-bg-con{
+ position: absolute;
width: 100%;
- height: 56px;
- background: rgba(255, 255, 255, 0.1);
- border-radius: 28px;
- border: none;
- padding: 0 24px;
- box-sizing: border-box;
- font-family: PingFang SC;
- font-weight: 400;
- font-style: Heavy;
- font-size: 18px;
- line-height: 32px;
- letter-spacing: 0%;
- color: rgba(229, 229, 229, 1);
-
- &::placeholder {
- color: rgba(229, 229, 229, 0.5);
+ height: 100%;
+ z-index: 0;
+ .tab-bg{
+ height: 50%;
+ width: 100%;
}
-
- &:focus {
- outline: none;
- background: rgba(255, 255, 255, 0.15);
+ .tab-grey-bg{
+ background: rgba(231, 235, 242, 1);
+ }
+ .tab-white-bg{
+ background: rgba(255, 255, 255, 1);
+ top: 50%;
}
}
- // 覆盖 Ant Design 的默认样式
- .ant-input {
- background: rgba(255, 255, 255, 0.1);
- border-radius: 28px;
- border: none;
- padding: 0 24px;
- box-sizing: border-box;
+ .tab-item {
+ height: 80px;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.3s ease;
font-family: PingFang SC;
font-weight: 400;
font-style: Heavy;
- font-size: 18px;
- line-height: 32px;
+ font-size: 20px;
+ line-height: 30px;
letter-spacing: 0%;
- color: rgba(229, 229, 229, 1);
- height: 56px;
+ padding: 0 40px;
+ z-index: 1;
- &::placeholder {
- color: rgba(229, 229, 229, 0.5);
+ &.dhcp-tab {
+ // 默认状态 - 左上角和左下角圆角
+ border-top-left-radius: 20px;
+ border-bottom-left-radius: 20px;
+
+ &.active {
+ background: rgba(255, 255, 255, 1);
+ color: rgba(51, 51, 51, 1);
+ height: 80px;
+ // 激活状态 - 左上角和右上角圆角
+ border-radius: 20px 20px 0 0;
+ margin-bottom: -20px;
+ position: relative;
+ z-index: 3;
+ // 移除底部圆角
+ border-bottom-left-radius: 0;
+ }
+
+ &:not(.active) {
+ background: rgba(231, 235, 242, 1);
+ color: rgba(153, 153, 153, 1);
+ // 未激活状态 - 左下角和右下角圆角
+ border-radius: 0 0 20px 0;
+ // 确保顶部没有圆角
+ border-top-left-radius: 0;
+ }
}
- &:focus {
- outline: none;
- background: rgba(255, 255, 255, 0.15);
- box-shadow: none;
+ &.static-tab {
+ // 默认状态 - 右上角和右下角圆角
+ border-top-right-radius: 20px;
+ border-bottom-right-radius: 20px;
+
+ &.active {
+ background: rgba(255, 255, 255, 1);
+ color: rgba(51, 51, 51, 1);
+ height: 80px;
+ // 激活状态 - 左上角和右上角圆角
+ border-radius: 20px 20px 0 0;
+ margin-bottom: -20px;
+ position: relative;
+ z-index: 3;
+ // 移除底部圆角
+ border-bottom-right-radius: 0;
+ }
+
+ &:not(.active) {
+ background: rgba(231, 235, 242, 1);
+ color: rgba(153, 153, 153, 1);
+ // 未激活状态 - 左下角和右下角圆角
+ border-radius: 0 0 0 20px;
+ // 确保顶部没有圆角
+ border-top-right-radius: 0;
+ }
}
}
}
+ .content-container {
+ flex: 1;
+ padding: 40px 0;
+ box-sizing: border-box;
+ overflow-y: hidden;
+ min-height: 0;
+ display: flex;
+ background: rgba(255, 255, 255, 1);
+ justify-content: center;
+ z-index: 1;
+
+ .dhcp-content,
+ .static-ip-container {
+ height: 100%;
+ overflow-y: auto;
+ padding-right: 60px;
+ width: 568px;
+
+ &::-webkit-scrollbar {
+ width: 8px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: rgba(245, 245, 245, 1);
+ border-radius: 4px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: rgba(224, 229, 236, 1);
+ border-radius: 4px;
+ }
+ }
+
+ .dhcp-content {
+ h2 {
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-style: Heavy;
+ font-size: 18px;
+ line-height: 32px;
+ margin-bottom: 10px;
+ }
+
+ p {
+ color: #666;
+ }
+ }
+
+ .static-ip-container {
+ .form-container {
+ width: 500px;
+ margin: 0 auto;
+
+ .label {
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-style: Heavy;
+ font-size: 18px;
+ line-height: 32px;
+ letter-spacing: 0%;
+ color: rgba(102, 102, 102, 1);
+ }
+
+ .input-field {
+ background: rgba(245, 245, 245, 1);
+ height: 56px;
+ border-radius: 28px;
+ padding-left: 20px;
+ border: none;
+
+ &::placeholder {
+ color: rgba(187, 187, 187, 1);
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-style: Heavy;
+ font-size: 18px;
+ leading-trim: NONE;
+ line-height: 32px;
+ letter-spacing: 0%;
+ }
+ }
+ }
+ }
+ }
}
}
\ No newline at end of file
diff --git a/pc-fe/src/pages/configSteps/components/networkConfig/index.tsx b/pc-fe/src/pages/configSteps/components/networkConfig/index.tsx
index 1626580..9448696 100644
--- a/pc-fe/src/pages/configSteps/components/networkConfig/index.tsx
+++ b/pc-fe/src/pages/configSteps/components/networkConfig/index.tsx
@@ -3,8 +3,9 @@ import styles from './index.less';
import cs from 'classnames';
import { Form, Input, message } from 'antd';
import ButtonCom from '../../../components/ButtonCom';
+import { useConfigStep } from '@/contexts/ConfigStepContext';
-const staticIpFormFields: CONFIG_STEPS.StaticFormFieldConfig[] = [
+const staticIpFormFields: CONFIG_STEPS.FormFieldConfig[] = [
{
name: "ipv4",
label: "IPv4",
@@ -44,6 +45,30 @@ const staticIpFormFields: CONFIG_STEPS.StaticFormFieldConfig[] = [
}
]
},
+ {
+ name: "ipv6",
+ label: "IPv6地址",
+ type: "input",
+ placeholder: "请输入",
+ rules: [
+ {
+ pattern: /^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$|^([0-9a-fA-F]{1,4}:)*::([0-9a-fA-F]{1,4}:)*[0-9a-fA-F]{1,4}$|^::$/,
+ message: '请输入正确的IPv6地址格式'
+ }
+ ]
+ },
+ {
+ name: "ipv6PrefixLength",
+ label: "IPv6前缀长度",
+ type: "input",
+ placeholder: "请输入前缀长度，默认64",
+ rules: [
+ {
+ pattern: /^(?:[0-9]|[1-9][0-9]|1[0-1][0-9]|12[0-8])$/,
+ message: '请输入0-128之间的数字，默认为64'
+ }
+ ]
+ },
{
name: "ipv6Gateway",
label: "IPv6网关",
@@ -86,6 +111,30 @@ const staticIpFormFields: CONFIG_STEPS.StaticFormFieldConfig[] = [
const NetworkConfig: React.FC = () => {
const [activeTab, setActiveTab] = useState<'dhcp' | 'static'>('dhcp');
const [form] = Form.useForm();
+ const { goToNextTab } = useConfigStep();
+
+ const validateIPv6Config = (values: any) => {
+ // 如果提供了IPv6网关但没有IPv6地址，给出提示
+ if (values.ipv6Gateway && !values.ipv6) {
+ message.warning('提供了IPv6网关但未提供IPv6地址，IPv6配置可能不完整');
+ }
+
+ // 如果提供了IPv6地址但没有前缀长度，使用默认值
+ if (values.ipv6 && !values.ipv6PrefixLength) {
+ message.info('未提供IPv6前缀长度，将使用默认值64');
+ }
+
+ // 验证前缀长度范围
+ if (values.ipv6PrefixLength) {
+ const prefixLength = parseInt(values.ipv6PrefixLength, 10);
+ if (prefixLength < 0 || prefixLength > 128) {
+ message.error('IPv6前缀长度必须在0-128之间');
+ return false;
+ }
+ }
+
+ return true;
+ };
const handleSubmit = async () => {
if (activeTab === 'dhcp') {
@@ -95,6 +144,9 @@ const NetworkConfig: React.FC = () => {
console.log('网络配置返回信息成功:', res);
if(res.success){
message.success('网络配置成功');
+ setTimeout(() => {
+ goToNextTab();
+ }, 300);
}else{
message.error(res.message || '网络配置失败');
}
@@ -106,10 +158,26 @@ const NetworkConfig: React.FC = () => {
try {
const values = await form.validateFields();
console.log('表单提交数据:', values);
+
+ // 验证IPv6配置
+ if (!validateIPv6Config(values)) {
+ return;
+ }
+
+ // 处理IPv6前缀长度默认值
+ if (values.ipv6 && !values.ipv6PrefixLength) {
+ values.ipv6PrefixLength = 64; // 默认前缀长度
+ } else if (values.ipv6PrefixLength) {
+ values.ipv6PrefixLength = parseInt(values.ipv6PrefixLength, 10);
+ }
+
const res = await window.electronAPI.invoke('apply-wired-config',{ method: 'static', ...values });
console.log('网络配置返回信息成功:', res);
if(res.success){
message.success('网络配置成功');
+ setTimeout(() => {
+ goToNextTab();
+ }, 300);
}else{
message.error(res.message || '网络配置失败');
}
@@ -154,26 +222,35 @@ const NetworkConfig: React.FC = () => {
return (
+
+
+
+
+ {clampedPercent}%
+ {text}
+
-
-
setActiveTab('dhcp')}
- >
- DHCP
- {activeTab === 'dhcp' && }
+
+ );
+
+ const handleSubmit= async () => {
+ const values = await form.validateFields();
+ console.log('表单提交数据:', values);
+ const { serverIp } = values;
+ const result = await window.electronAPI.invoke('connect-server', { serverIp });
+ console.log('连接结果:', result);
+ if (result.success) {
+ // 连接成功，保存服务器IP到本地存储
+ localStorage.setItem('connected-server-ip', serverIp);
+ console.log('Connected server IP saved to localStorage:', serverIp);
+ // TODO:跳转到版本更新
+ // setActiveTab("watchManagement")
+ setActiveTab("terminalGetImage")
+ // await ipcRenderer.invoke('show-login-window');
+ } else {
+ message.error(result.message || '连接服务器失败');
+ }
+ }
+
+ return (
+
+
);
diff --git a/pc-fe/src/pages/configSteps/components/serverConfig/index.less b/pc-fe/src/pages/configSteps/components/serverConfig/index.less
new file mode 100644
index 0000000..18cabd1
--- /dev/null
+++ b/pc-fe/src/pages/configSteps/components/serverConfig/index.less
@@ -0,0 +1,54 @@
+// src/pages/configSteps/components/networkConfig/index.less
+.server-config {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ box-sizing: border-box;
+
+ .content-container {
+ flex: 1;
+ padding: 40px 0;
+ box-sizing: border-box;
+ overflow-y: hidden;
+ min-height: 0;
+ display: flex;
+ background: rgba(255, 255, 255, 1);
+ justify-content: center;
+ z-index: 1;
+ .server-container {
+ .form-container {
+ width: 500px;
+ margin: 0 auto;
+
+ .label {
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-style: Heavy;
+ font-size: 18px;
+ line-height: 32px;
+ letter-spacing: 0%;
+ color: rgba(102, 102, 102, 1);
+ }
+
+ .input-field {
+ background: rgba(245, 245, 245, 1);
+ height: 56px;
+ border-radius: 28px;
+ padding-left: 20px;
+ border: none;
+
+ &::placeholder {
+ color: rgba(187, 187, 187, 1);
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-style: Heavy;
+ font-size: 18px;
+ leading-trim: NONE;
+ line-height: 32px;
+ letter-spacing: 0%;
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/pc-fe/src/pages/configSteps/components/serverConfig/index.tsx b/pc-fe/src/pages/configSteps/components/serverConfig/index.tsx
new file mode 100644
index 0000000..1d8c132
--- /dev/null
+++ b/pc-fe/src/pages/configSteps/components/serverConfig/index.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import ButtonCom from '../../../components/ButtonCom';
+import { useConfigStep } from '@/contexts/ConfigStepContext';
+import styles from './index.less';
+import { Form, Input, message } from 'antd';
+
+
+const serverIpFormFields: CONFIG_STEPS.FormFieldConfig[] = [
+ {
+ name: "serverIp",
+ label: "服务器IP地址",
+ type: "input",
+ placeholder: "请输入",
+ rules: [
+ { required: true, message: '请输入服务器IP地址' },
+ {
+ pattern: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
+ message: '请输入正确的服务器IP地址格式'
+ }
+ ]
+ }
+];
+
+const Index = () => {
+ const [form] = Form.useForm();
+ const { goToNextTab,setActiveTab } = useConfigStep();
+
+ const ServerComponent = () => (
+
+
-
+
+
+
+ setActiveTab('dhcp')}
+ >
+ DHCP
+
+ setActiveTab('static')}
+ >
+ 静态IP
+
setActiveTab('static')}
- >
- 静态IP
- {activeTab === 'static' && }
+
+
-
+ {activeTab === 'dhcp' ?
- {activeTab === 'dhcp' ?
+
}
+ rules={field.rules}
+ >
+
+
+ ))}
+
+
+
+
+ );
+}
+
+export default Index;
diff --git a/pc-fe/src/pages/configSteps/components/terminalGetImage/index.less b/pc-fe/src/pages/configSteps/components/terminalGetImage/index.less
index e69de29..f5d4080 100644
--- a/pc-fe/src/pages/configSteps/components/terminalGetImage/index.less
+++ b/pc-fe/src/pages/configSteps/components/terminalGetImage/index.less
@@ -0,0 +1,115 @@
+// src/pages/configSteps/components/networkConfig/index.less
+.terminal-config {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ box-sizing: border-box;
+
+ .image-loading-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex: 1;
+ width: 100%;
+ background: white;
+ border-radius: 20px;
+
+ .loading-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .spinner {
+ width: 141px;
+ height: 140px;
+ position: relative;
+ // 动画1：旋转
+ &.rotating {
+ animation: rotate 1.5s linear infinite;
+ }
+
+ .spinner-item {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ background: rgba(171, 184, 204, 1);
+ border-radius: 50%;
+ transform-origin: 0 0;
+ }
+ }
+
+ @keyframes rotate {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ }
+
+ .loading-text {
+ font-family: "Microsoft YaHei UI";
+ font-weight: 700;
+ font-size: 34px;
+ line-height: 200%;
+ text-align: center;
+ color: rgba(51, 51, 51, 1);
+ margin-top: 70px;
+ }
+
+ .loading-subtext {
+ font-family: "PingFang SC";
+ font-weight: 500;
+ font-size: 22px;
+ line-height: 100%;
+ letter-spacing: -1.17px;
+ color: rgba(153, 153, 153, 1);
+ margin-top: 30px;
+ }
+ }
+ }
+
+ .success-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ flex: 1;
+ background: white;
+
+ .success-box {
+ width: 381px;
+ height: 260px;
+ border: 1px solid #ccc;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 100px;
+ }
+
+ .ready-icon {
+ display: flex;
+ align-items: center;
+ margin-top: 50px;
+ gap: 9px;
+ .ready-text {
+ font-family: "Microsoft YaHei UI";
+ font-weight: 700;
+ font-size: 34px;
+ line-height: 200%;
+ text-align: center;
+ color: rgba(51, 51, 51, 1);
+ }
+ }
+
+ .ready-subtext {
+ font-family: "PingFang SC";
+ font-weight: 500;
+ font-size: 22px;
+ line-height: 100%;
+ letter-spacing: -1.17px;
+ color: rgba(153, 153, 153, 1);
+ margin-top: 30px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/pc-fe/src/pages/configSteps/components/terminalGetImage/index.tsx b/pc-fe/src/pages/configSteps/components/terminalGetImage/index.tsx
index 0cd9718..67a2380 100644
--- a/pc-fe/src/pages/configSteps/components/terminalGetImage/index.tsx
+++ b/pc-fe/src/pages/configSteps/components/terminalGetImage/index.tsx
@@ -1,9 +1,89 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import ButtonCom from '../../../components/ButtonCom';
+import { useConfigStep } from '@/contexts/ConfigStepContext';
+import styles from './index.less';
+import { message } from 'antd';
+import { history } from 'umi';
+import TrueIcon from '@assets/true.png'
+
const Index = () => {
+ const { goToNextTab,setActiveTab } = useConfigStep();
+ const [imageStatus, setImageStatus] = useState<'loading' | 'success' | 'error'>('loading');
+
+ // 模拟获取镜像数据的API调用
+ useEffect(() => {
+ const fetchImageData = async () => {
+ try {
+ // 模拟API请求
+ await new Promise(resolve => setTimeout(resolve, 3000));
+ // 模拟随机成功或失败
+ const isSuccess = Math.random() > 0.3;
+ setImageStatus(isSuccess ? 'success' : 'loading');
+
+ // 如果失败，继续轮询检查状态
+ if (!isSuccess) {
+ const checkStatus = async () => {
+ // 模拟WebSocket或轮询检查
+ await new Promise(resolve => setTimeout(resolve, 5000));
+ setImageStatus('success'); // 模拟收到通知
+ };
+ checkStatus();
+ }
+ } catch (error) {
+ message.error('获取镜像数据失败');
+ }
+ };
+
+ fetchImageData();
+ }, []);
+
+ const ImageLoadingComponent = () => (
+
+
+
+
+
+ );
+
+ const SuccessComponent = () => (
+
+
+
+ {[...Array(8)].map((_, index) => (
+
+ ))}
+
+ 正在获取镜像数据
+ 请耐心等待...
+
+
+ );
+
+ const handleSubmit = () => {
+ history.push('/login');
+ }
+
return (
-
+ {/* 这里可以显示实际的镜像信息 */}
+
+ 镜像信息展示区域
+
+ 
+
+ 客户端及镜像已就绪
+ 点击确认并立即使用吧～
+
- 终端获取镜像信息
+
+ {imageStatus === 'loading' &&
);
}
diff --git a/pc-fe/src/pages/configSteps/components/watchManagement/index.less b/pc-fe/src/pages/configSteps/components/watchManagement/index.less
index e69de29..9aff3f8 100644
--- a/pc-fe/src/pages/configSteps/components/watchManagement/index.less
+++ b/pc-fe/src/pages/configSteps/components/watchManagement/index.less
@@ -0,0 +1,122 @@
+// src/pages/configSteps/components/watchManagement/index.less
+.container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ .content {
+ flex: 1;
+ width: 80%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ .buttonWrapper {
+ align-self: center;
+ }
+
+ .latestContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 40px 0;
+
+ .iconText {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 28px;
+ background: #FFFFFF1A;
+ backdrop-filter: blur(100px);
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-style: Heavy;
+ font-size: 22px;
+ line-height: 32px;
+ letter-spacing: 0%;
+ padding: 20px 40px;
+ margin-bottom: 30px;
+
+ .icon {
+ margin-right: 10px;
+ font-size: 24px;
+ font-weight: bold;
+ }
+ }
+
+ .description {
+ font-family: PingFang SC;
+ font-weight: 500;
+ font-style: Medium;
+ font-size: 22px;
+ line-height: 100%;
+ letter-spacing: -1.17px;
+ vertical-align: middle;
+ color: #BBBBBB;
+ text-align: center;
+ }
+ }
+
+ .outdatedContainer {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 40px 0;
+
+ .warningBox {
+ width: 200px;
+ height: 56px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 28px;
+ background: #FFFFFF1A;
+ backdrop-filter: blur(100px);
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-style: Heavy;
+ font-size: 22px;
+ line-height: 32px;
+ letter-spacing: 0%;
+ padding: 20px 20px;
+ margin-bottom: 8px;
+ color: #E5E5E5;
+
+ .icon {
+ margin-right: 10px;
+ }
+ }
+
+ .title {
+ font-family: Microsoft YaHei UI;
+ font-weight: 700;
+ font-style: Bold;
+ font-size: 40px;
+ line-height: 200%;
+ letter-spacing: 0%;
+ text-align: center;
+ color: #fff;
+ margin: 20px 0;
+ }
+
+ .description {
+ font-family: PingFang SC;
+ font-weight: 500;
+ font-style: Medium;
+ font-size: 22px;
+ line-height: 100%;
+ letter-spacing: -1.17px;
+ vertical-align: middle;
+ color: #BBBBBB;
+ text-align: center;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/pc-fe/src/pages/configSteps/components/watchManagement/index.tsx b/pc-fe/src/pages/configSteps/components/watchManagement/index.tsx
index f38f4ce..78c486a 100644
--- a/pc-fe/src/pages/configSteps/components/watchManagement/index.tsx
+++ b/pc-fe/src/pages/configSteps/components/watchManagement/index.tsx
@@ -1,11 +1,261 @@
-import React from 'react';
+// src/pages/configSteps/components/watchManagement/index.tsx
+import React, { useState, useEffect } from 'react';
+import styles from './index.less';
+import ProgressBar from '@/pages/components/ProgressBar';
+import ButtonCom from '@/pages/components/ButtonCom';
+import { useConfigStep } from '@/contexts/ConfigStepContext';
+import WaringIcon from '@/assets/waringIcon.png';
+import { message } from 'antd';
+
+const WatchManagement: React.FC = () => {
+ const { goToNextTab } = useConfigStep();
+ // 添加 'downloaded' 状态
+ const [status, setStatus] = useState<'checking' | 'latest' | 'outdated' | 'updating' | 'downloaded' | 'updated'>('checking');
+ const [progress, setProgress] = useState(0);
+ const [countdown, setCountdown] = useState(6);
+
+ // 模拟当前版本
+ const currentVersion:string = '1.0.0';
+ // 模拟最新版本
+ const latestVersion:string = '1.2.0';
+ // 模拟更新URL（实际应该从后端获取）
+ const updateUrl = 'http://localhost:3000/updates/linux';
+
+ useEffect(() => {
+ // 模拟检测版本
+ // const timer = setTimeout(() => {
+ // if (currentVersion === latestVersion) {
+ // setStatus('latest');
+ // } else {
+ // setStatus('outdated');
+ // }
+ // }, 2000);
+
+ // return () => clearTimeout(timer);
+ }, []);
+
+ // 监听更新进度和下载完成事件
+ useEffect(() => {
+ const handleUpdateProgress = (event: any, progressData: any) => {
+ console.log('收到更新进度:', progressData);
+ if (status === 'updating') {
+ setProgress(progressData.percent);
+ }
+ };
+
+ const handleUpdateDownloaded = (event: any, info: any) => {
+ console.log('更新已下载完成:', info);
+ setStatus('downloaded');
+ setProgress(100);
+ };
+
+ const handleUpdateError = (event: any, error: any) => {
+ console.error('更新出错:', error);
+ message.error('更新出错，请稍后重试');
+ setStatus('outdated'); // 出错时回到初始状态
+ };
+
+ const handleUpdateNotAvailable = (event:any, info:any) => {
+ // 显示提示信息给用户
+ console.log(info.message || '没有可安装的更新');
+ message.info('没有可安装的更新');
+ setStatus('latest');
+ }
+
+ // 监听更新进度事件
+ if (window.electronAPI) {
+ window.electronAPI.on('update-progress', handleUpdateProgress);
+ window.electronAPI.on('update-downloaded', handleUpdateDownloaded);
+ window.electronAPI.on('update-not-available', handleUpdateNotAvailable);
+ window.electronAPI.on('update-install-error', handleUpdateError);
+ }
+
+ // 清理监听器
+ return () => {
+ if (window.electronAPI) {
+ window.electronAPI.off('update-progress', handleUpdateProgress);
+ window.electronAPI.off('update-downloaded', handleUpdateDownloaded);
+ window.electronAPI.off('update-not-available', handleUpdateNotAvailable);
+ window.electronAPI.off('update-install-error', handleUpdateError);
+ }
+ };
+ }, [status]);
+
+ // useEffect(() => {
+ // let timer: NodeJS.Timeout;
+ // if (status === 'updated') {
+ // // 倒计时6秒后自动重启
+ // timer = setInterval(() => {
+ // setCountdown(prev => {
+ // if (prev <= 1) {
+ // clearInterval(timer);
+ // handleRestart();
+ // return 0;
+ // }
+ // return prev - 1;
+ // });
+ // }, 1000);
+ // }
+
+ // return () => {
+ // if (timer) clearInterval(timer);
+ // };
+ // }, [status]);
+
+ const handleCancel = () => {
+ console.log('取消操作');
+ };
+
+ const handleConfirmUpdate = () => {
+ // 确认更新客户端
+ setStatus('updating');
+ startUpdateProcess(updateUrl);
+ };
+
+ const handleGetImage = () => {
+ goToNextTab();
+ };
+
+ const handleRestart = () => {
+ // 安装更新并重启客户端
+ if (window.electronAPI) {
+ window.electronAPI.send('install-update-and-restart');
+ }
+ };
+
+ const startUpdateProcess = (url: string) => {
+ // 调用electron API下载并安装更新
+ if (window.electronAPI) {
+ window.electronAPI.downloadAndUpdate(url)
+ .then((result:any) => {
+ console.log('更新完成:', result);
+ if (result.success) {
+ // 不再直接设置为 updated，等待 update-downloaded 事件
+ // setStatus('updated');
+ // setProgress(100);
+ }
+ })
+ .catch((error: any) => {
+ console.error('更新失败:', error);
+ setStatus('outdated'); // 回到初始状态
+ });
+ }
+ };
+
+ const renderContent = () => {
+ switch (status) {
+ case 'checking':
+ return (
+
+
+ );
+
+ case 'latest':
+ return (
+
+
+
+
+ );
+
+ case 'outdated':
+ return (
+
+
+
+ ✓
+ 已是最新版本
+
+ 当前客户端版本与管理平台版本一致
+
+
+
+
+ );
+
+ case 'updating':
+ return (
+
+
+
+ 
+ 客户端更新
+
+ 当前客户端版本过低，需要升级同步
+客户端版本需与管理平台版本一致
+
+
+
+
+ );
+
+ case 'downloaded':
+ return (
+
+
+
+
+ );
+
+ case 'updated':
+ return (
+
+
+
+
+ );
+
+ default:
+ return null;
+ }
+ };
-const Index = () => {
return (
-
+
+
- 侦测管理平台
+ ("networkConfig");
+const tabs = [
+ { key: "networkConfig", label: '平台网络配置', component:
+ {renderContent()}
);
-}
+};
-export default Index;
+export default WatchManagement;
\ No newline at end of file
diff --git a/pc-fe/src/pages/configSteps/index.less b/pc-fe/src/pages/configSteps/index.less
index b6df9d7..4c5e904 100644
--- a/pc-fe/src/pages/configSteps/index.less
+++ b/pc-fe/src/pages/configSteps/index.less
@@ -1,70 +1,97 @@
+// src/pages/configSteps/index.less
.config-step-container {
- width: 100%;
- height: 100%;
- padding-top: 24px;
display: flex;
flex-direction: column;
+ height: 100%;
+ align-items: center;
- .tabs-container {
+ .steps-container {
display: flex;
- width: 100%;
- height: 60px;
- flex-shrink: 0;
- // background: rgba(229, 229, 229, 0.2);
+ align-items: center;
+ justify-content: center;
+ height: 48px;
+ margin-top: 80px;
+ margin-bottom: 60px;
- .tab-item {
- flex: 1;
+ .step-item {
display: flex;
- flex-direction: column;
align-items: center;
- justify-content: center;
cursor: pointer;
- position: relative;
- .tab-label {
+ .step-number {
+ width: 48px;
+ height: 48px;
+ border-radius: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-style: Heavy;
+ font-size: 26px;
+ line-height: 36px;
+ letter-spacing: 0%;
+ }
+
+ .step-number-active {
+ background: rgba(1, 90, 255, 1);
+ color: rgba(255, 255, 255, 1);
+ }
+
+ .step-number-inactive {
+ background: rgba(171, 184, 204, 1);
+ color: rgba(255, 255, 255, 1);
+ }
+
+ .step-label {
+ margin-left: 10px;
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-style: Heavy;
font-size: 22px;
- color: rgba(255, 255, 255, 0.6); // 未激活tab文字透明
- transition: color 0.3s ease;
+ line-height: 32px;
+ letter-spacing: 0%;
}
- .tab-indicator {
- position: absolute;
- bottom: 0;
- width: 100%;
- height: 4px;
- background: rgba(229, 229, 229, 0.2);
- transition: background-color 0.3s ease;
+ .step-label-active {
+ color: rgba(1, 90, 255, 1);
}
- &.active {
- .tab-label {
- color: white; // 激活tab文字为白色
- }
-
- .tab-indicator {
- background: white; // 激活tab指示器为白色
- }
+ .step-label-inactive {
+ color: rgba(139, 153, 173, 1);
}
}
+
+ .step-divider {
+ margin: 0 20px;
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-style: Heavy;
+ font-size: 22px;
+ line-height: 32px;
+ letter-spacing: 0%;
+ }
+
+ .step-divider-active {
+ color: rgba(1, 90, 255, 1);
+ }
+
+ .step-divider-inactive {
+ color: rgba(139, 153, 173, 1);
+ }
}
.tab-content-container {
flex: 1;
- overflow: hidden;
- background: rgba(255, 255, 255, 0.1);
-
+ overflow: auto;
+ width: 1400px;
+
.tab-content {
height: 100%;
- max-height: 100%;
- background: rgba(255, 255, 255, 0.1);
- border-radius: 4px;
- padding: 20px;
- box-sizing: border-box;
}
}
-
- .emptyBox{
- height: 60px;
+
+ .emptyBox {
flex-shrink: 0;
}
}
\ No newline at end of file
diff --git a/pc-fe/src/pages/configSteps/index.tsx b/pc-fe/src/pages/configSteps/index.tsx
index 7f2e697..d400d9a 100644
--- a/pc-fe/src/pages/configSteps/index.tsx
+++ b/pc-fe/src/pages/configSteps/index.tsx
@@ -1,45 +1,94 @@
// src/pages/configSteps/index.tsx
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useLocation } from 'umi';
import styles from './index.less';
import cs from 'classnames';
import NetworkConfig from './components/networkConfig';
+import ServerConfig from './components/serverConfig';
import WatchManagement from './components/watchManagement';
import TerminalGetImage from './components/terminalGetImage';
+import { ConfigStepProvider, useConfigStep } from '@/contexts/ConfigStepContext';
-const Index: React.FC = () => {
- const [activeTab, setActiveTab] = useState
-
+
+ );
+};
+
export default Index;
\ No newline at end of file
diff --git a/pc-fe/src/pages/welcome/index.less b/pc-fe/src/pages/welcome/index.less
index 4dc5d7b..be1e141 100644
--- a/pc-fe/src/pages/welcome/index.less
+++ b/pc-fe/src/pages/welcome/index.less
@@ -8,73 +8,58 @@
.showTextCon{
display: flex;
flex-direction: column;
- justify-self: center;
+ // justify-self: center;
align-items: center;
- .name{
- height: 80px;
- margin-bottom: 20px;
- font-size: 36px;
- color: #e5e5e5;
+ height: 155px;
+ justify-content: space-between;
+ .imgIcon{
display: flex;
+ flex-direction: column;
.welcomeIcon{
- height: 66px;
- width: 70px;
- margin-right: 20px;
+ height: 90px;
+ width: 350px;
}
- .textCon{
- height: 120px;
+ }
+ .loadingCon{
+ width: 96px;
+ height: 12px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: rgba(1, 90, 255, 0.2);
display: flex;
- flex-direction: column;
justify-content: space-between;
- .text{
- display: flex;
- flex-direction: column;
- .nameText{
- font-size: 28px;
- }
+ animation: loading 1.5s infinite ease-in-out;
+ }
+
+ .dot:nth-child(1) {
+ animation-delay: -0.32s;
+ }
+
+ .dot:nth-child(2) {
+ animation-delay: -0.16s;
+ }
+
+ @keyframes loading {
+ 0%, 100% {
+ background: rgba(1, 90, 255, 0.2);
+ // transform: scale(0.6);
}
- .loadingCon{
- width: 96px;
- height: 12px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- .dot {
- width: 10px;
- height: 10px;
- border-radius: 50%;
- background-color: rgba(255, 255, 255, 0.3);
- display: flex;
- justify-content: space-between;
- animation: loading 1.5s infinite ease-in-out;
- }
-
- .dot:nth-child(1) {
- animation-delay: -0.32s;
- }
-
- .dot:nth-child(2) {
- animation-delay: -0.16s;
- }
-
- @keyframes loading {
- 0%, 100% {
- background-color: rgba(255, 255, 255, 0.3);
- transform: scale(0.6);
- }
- 25% {
- background-color: rgba(255, 255, 255, 0.6);
- transform: scale(0.8);
- }
- 50% {
- background-color: rgba(255, 255, 255, 1);
- transform: scale(1);
- }
- 75% {
- background-color: rgba(255, 255, 255, 0.6);
- transform: scale(0.8);
- }
- }
+ 25% {
+ background: rgba(1, 90, 255, 0.5);
+ // transform: scale(0.8);
+ }
+ 50% {
+ background: rgba(1, 90, 255, 1);
+ // transform: scale(1);
+ }
+ 75% {
+ background: rgba(1, 90, 255, 0.5);
+ // transform: scale(0.8);
}
}
}
diff --git a/pc-fe/src/pages/welcome/index.tsx b/pc-fe/src/pages/welcome/index.tsx
index 998967a..eb09fb0 100644
--- a/pc-fe/src/pages/welcome/index.tsx
+++ b/pc-fe/src/pages/welcome/index.tsx
@@ -1,26 +1,19 @@
import React from 'react';
import styles from './index.less';
-import WelcomeIcon from '../../assets/welcome-icon.jpg'
+import WelcomeIcon from '../../assets/welcome-icon.png'
const Welcome = () => {
return (
- {tabs.map((tab) => (
-
);
};
+const Index: React.FC = () => {
+ return (
+ setActiveTab(tab.key)}
- >
- {tab.label}
-
-
+
+ {contextTabs.map((tab, index) => (
+
+
))}
setActiveTab(tab.key)}
+ >
+
+ {index < contextTabs.length - 1 && (
+ activeTabIndex
+ })}>
+ {index + 1}
+
+ activeTabIndex
+ })}>
+ {tab.label}
+
+ = activeTabIndex
+ })}>
+ >
+
+ )}
+
- {activeTabItem?.component ||
未找到对应内容
}
+
+ {activeTabItem?.component ||
未找到对应内容
}
+
-
);
diff --git a/pc-fe/src/types/configSteps.d.ts b/pc-fe/src/types/configSteps.d.ts
index f702bbf..d60bda8 100644
--- a/pc-fe/src/types/configSteps.d.ts
+++ b/pc-fe/src/types/configSteps.d.ts
@@ -1,5 +1,6 @@
declare namespace CONFIG_STEPS {
- interface StaticFormFieldConfig {
+ // 平台网络配置>静态IP字段
+ interface FormFieldConfig {
name: string;
label: string;
type: 'input' | 'select'; // 可扩展更多类型
@@ -8,4 +9,10 @@ declare namespace CONFIG_STEPS {
options?: { label: string; value: string }[]; // select 专用
required?: boolean;
}
+ interface UpdateProgress {
+ percent: number;
+ transferred: number;
+ total: number;
+ bytesPerSecond: number;
+ }
}
+
-
-
+
-
- 紫光汇智
- UNISSENSE
-
-
-
-
-
-
-
+
+
+
+