658 lines
30 KiB
JavaScript
658 lines
30 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import StatusBar from '../lib/StatusBar';
|
||
import ResultTitleBar from '../lib/ResultTitleBar';
|
||
import TitleBar from '../lib/TitleBar';
|
||
import CopperResultMain from '../lib/CopperResultMain';
|
||
import OLTSResultMain from '../lib/OLTSResultMain';
|
||
import OTDRResultMain from '../lib/OTDRResultMain';
|
||
import Keyboard from '../lib/Keyboard';
|
||
import useDisplayStore from '@/store/displayStore';
|
||
|
||
// 初始化测试结果音效对象
|
||
const testPassSound = typeof Audio !== 'undefined' ? new Audio('/sounds/test_pass.wav') : null;
|
||
const testFailSound = typeof Audio !== 'undefined' ? new Audio('/sounds/test_fail.wav') : null;
|
||
|
||
// 自定义确认弹窗组件
|
||
const ConfirmDialog = ({ message, onConfirm, onCancel }) => (
|
||
<div className="w-[480px] h-[640px] bg-[#002842d4] absolute z-[9999] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||
<div className='pl-10 pt-60'>
|
||
<div className="bg-[#2B3C5B] rounded-lg p-6 w-[400px] min-h-[200px] flex flex-col">
|
||
<h3 className="text-white text-xl font-bold mb-4">提示</h3>
|
||
<div className="flex-1 flex items-center justify-center">
|
||
<div className="text-white text-lg">{message}</div>
|
||
</div>
|
||
<div className="flex justify-center gap-4 mt-4">
|
||
<button
|
||
onClick={onConfirm}
|
||
className="bg-[#354e7a] text-white px-6 py-2 rounded hover:bg-[#1E293B] transition-colors"
|
||
>
|
||
确定
|
||
</button>
|
||
<button
|
||
onClick={onCancel}
|
||
className="bg-[#4a4a4a] text-white px-6 py-2 rounded hover:bg-[#3a3a3a] transition-colors"
|
||
>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
export default function ResultInfo() {
|
||
const [showKeyboard, setShowKeyboard] = useState(true);
|
||
const [cursorPosition, setCursorPosition] = useState(0);
|
||
const [inputValue, setInputValue] = useState('');
|
||
const [inputValue2, setInputValue2] = useState('');
|
||
const [activeInput, setActiveInput] = useState(1); // 1 表示第一个输入框，2 表示第二个输入框
|
||
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
|
||
const [confirmDialogMessage, setConfirmDialogMessage] = useState('');
|
||
const [confirmDialogCallback, setConfirmDialogCallback] = useState(null);
|
||
const { navigation } = useDisplayStore.getState();
|
||
const tempTestResult = navigation.current.params;
|
||
|
||
// 根据测试结果播放音效
|
||
const { hasPlayedSound } = useDisplayStore.getState();
|
||
|
||
useEffect(() => {
|
||
// 只有从测试页面进入nosave视图时才播放声音
|
||
if (navigation.previous.name === 'testing' &&
|
||
tempTestResult &&
|
||
!hasPlayedSound) {
|
||
if (tempTestResult.CopperResultStatus === 'pass'||tempTestResult.CFPResultStatus === 'pass' ||tempTestResult.ofpResultStatus === 'pass') {
|
||
testPassSound?.play().catch(console.error);
|
||
} else {
|
||
testFailSound?.play().catch(console.error);
|
||
}
|
||
useDisplayStore.setState({ hasPlayedSound: true });
|
||
}
|
||
|
||
|
||
}, [navigation, tempTestResult, hasPlayedSound]);
|
||
|
||
// 从URL参数中获取临时测试结果
|
||
const {
|
||
getCurrentProject,
|
||
getCurrentCableId,
|
||
getCurrentCableId2,
|
||
updateCurrentView,
|
||
getCurrentTestConfig,
|
||
navigateTo,
|
||
setToastMessage,
|
||
updateProject
|
||
} = useDisplayStore();
|
||
|
||
const currentProject = getCurrentProject();
|
||
const { view } = useDisplayStore.getState().navigation.current;
|
||
|
||
// 获取当前的线缆ID
|
||
const currentCableId = getCurrentCableId().name || '';
|
||
const currentCableId2 = getCurrentCableId2().name || '';
|
||
// 计算下一个序号的ID
|
||
const getNextId = (currentId) => {
|
||
if (!currentId) return '';
|
||
|
||
// 检查是否以数字结尾
|
||
const numMatch = currentId.match(/^(.*?)(\d+)$/);
|
||
if (numMatch) {
|
||
const [, prefix, num] = numMatch;
|
||
const nextNum = String(Number(num) + 1).padStart(num.length, '0');
|
||
return prefix + nextNum;
|
||
}
|
||
|
||
// 检查是否以字母结尾
|
||
const letterMatch = currentId.match(/^(.*?)([a-zA-Z]+)$/);
|
||
if (letterMatch) {
|
||
const [, prefix, letters] = letterMatch;
|
||
|
||
// 将字母转换为数组以便处理
|
||
const letterArray = letters.split('');
|
||
let carry = true;
|
||
|
||
// 从右向左处理每个字母
|
||
for (let i = letterArray.length - 1; i >= 0 && carry; i--) {
|
||
if (letterArray[i] === 'z') {
|
||
letterArray[i] = 'a';
|
||
carry = true;
|
||
} else if (letterArray[i] === 'Z') {
|
||
letterArray[i] = 'A';
|
||
carry = true;
|
||
} else {
|
||
letterArray[i] = String.fromCharCode(letterArray[i].charCodeAt(0) + 1);
|
||
carry = false;
|
||
}
|
||
}
|
||
|
||
// 如果还有进位，说明需要在前面添加一个字母
|
||
if (carry) {
|
||
if (letters[0] >= 'a' && letters[0] <= 'z') {
|
||
letterArray.unshift('a');
|
||
} else {
|
||
letterArray.unshift('A');
|
||
}
|
||
}
|
||
|
||
return prefix + letterArray.join('');
|
||
}
|
||
|
||
// 如果既不是数字也不是字母结尾，直接返回原值
|
||
return currentId;
|
||
};
|
||
|
||
// 初始化输入值为当前的线缆ID
|
||
useEffect(() => {
|
||
setInputValue(currentCableId);
|
||
setInputValue2(currentCableId2);
|
||
}, [currentCableId, currentCableId2]);
|
||
|
||
// 当第一个输入框值变化时，仅在用户手动输入时自动更新第二个输入框
|
||
useEffect(() => {
|
||
if (tempTestResult?.testconfig?.moduleType === 'cfp' && inputValue && inputValue !== currentCableId) {
|
||
setInputValue2(getNextId(inputValue));
|
||
}
|
||
}, [inputValue, view, currentCableId]);
|
||
|
||
//创建保存结果存储逻辑
|
||
const handleComplete = () => {
|
||
const currentId = inputValue.trim();
|
||
|
||
// 检查是否存在重名的测试结果
|
||
const currentProject = getCurrentProject();
|
||
const existingResults = currentProject?.testResults || [];
|
||
|
||
// 检查两个ID是否重复
|
||
const isDuplicate = existingResults.some(result => result.name === currentId);
|
||
|
||
// 重名替换
|
||
if (isDuplicate) {
|
||
setConfirmDialogMessage('该线缆ID已使用，是否覆盖？');
|
||
setConfirmDialogCallback(() => () => {
|
||
// 更新临时测试结果的名称
|
||
const updatedTestResult = {
|
||
...tempTestResult,
|
||
name: currentId
|
||
};
|
||
|
||
// 更新当前项目的测试结果
|
||
const currentIndex = useDisplayStore.getState().projects.findIndex(p => p === currentProject);
|
||
if (currentIndex !== -1) {
|
||
// 移除旧的测试结果并添加新的
|
||
const newResults = existingResults.filter(result => result.name !== currentId);
|
||
updateProject(currentIndex, {
|
||
testResults: [...newResults, updatedTestResult]
|
||
});
|
||
// 更新navigation.current.params中的测试结果名称
|
||
useDisplayStore.setState({
|
||
navigation: {
|
||
...navigation,
|
||
current: {
|
||
...navigation.current,
|
||
params: updatedTestResult
|
||
}
|
||
}
|
||
});
|
||
}
|
||
updateCurrentView('save');
|
||
setShowConfirmDialog(false);
|
||
});
|
||
setShowConfirmDialog(true);
|
||
return;
|
||
}
|
||
// 更新临时测试结果的名称并保存到项目中
|
||
if (tempTestResult) {
|
||
const updatedTestResult = {
|
||
...tempTestResult,
|
||
name: currentId
|
||
};
|
||
|
||
// 更新当前项目的cableIds.name为下一个ID
|
||
const currentIndex = useDisplayStore.getState().projects.findIndex(p => p === currentProject);
|
||
if (currentIndex !== -1) {
|
||
//更新测试结果
|
||
updateProject(currentIndex, {
|
||
testResults: [...(currentProject.testResults || []), updatedTestResult]
|
||
});
|
||
|
||
// 更新navigation.current.params中的测试结果名称
|
||
const navigation = useDisplayStore.getState().navigation;
|
||
useDisplayStore.setState({
|
||
navigation: {
|
||
...navigation,
|
||
current: {
|
||
...navigation.current,
|
||
params: updatedTestResult
|
||
}
|
||
}
|
||
});
|
||
|
||
// 获取下一个ID
|
||
const nextId = (() => {
|
||
const currentId = inputValue.trim();
|
||
if (!currentId) return currentId;
|
||
|
||
// 获取最后一个字符
|
||
const lastChar = currentId.slice(-1);
|
||
const prefix = currentId.slice(0, -1);
|
||
|
||
// 如果最后一个字符是数字
|
||
if (/\d/.test(lastChar)) {
|
||
const match = currentId.match(/^(.*?)(\d+)$/);
|
||
if (match) {
|
||
const numPrefix = match[1];
|
||
const number = parseInt(match[2]) + 1;
|
||
return `${numPrefix}${number.toString().padStart(match[2].length, '0')}`;
|
||
}
|
||
}
|
||
|
||
// 如果最后一个字符是字母
|
||
if (/[A-Za-z]/.test(lastChar)) {
|
||
const nextChar = String.fromCharCode(lastChar.charCodeAt(0) + 1);
|
||
// 如果超过Z或z，回到A或a
|
||
if ((lastChar === 'Z' && nextChar > 'Z') || (lastChar === 'z' && nextChar > 'z')) {
|
||
const baseChar = lastChar === 'Z' ? 'A' : 'a';
|
||
return `${prefix}${baseChar}`;
|
||
}
|
||
return `${prefix}${nextChar}`;
|
||
}
|
||
|
||
return currentId;
|
||
})();
|
||
|
||
// 获取当前项目的所有cableIds
|
||
const currentCableIds = currentProject?.cableIds || [];
|
||
const selectedId = getCurrentCableId().id;
|
||
|
||
// 只更新选中的ID，保留其他ID不变
|
||
const updatedCableIds = currentCableIds.map(cable =>
|
||
cable.id === selectedId ? { ...cable, name: nextId } : cable
|
||
);
|
||
|
||
// 更新项目
|
||
updateProject(currentIndex, {
|
||
cableIds: updatedCableIds
|
||
});
|
||
}
|
||
updateCurrentView('save');
|
||
}
|
||
}
|
||
const handleComplete2 = () => {
|
||
const currentId = inputValue.trim();
|
||
const currentId2 = inputValue2.trim();
|
||
|
||
// 检查两个ID是否相同
|
||
if (currentId === currentId2) {
|
||
setConfirmDialogMessage('输入输出ID不能相同，请检查');
|
||
setConfirmDialogCallback(() => () => {
|
||
setShowConfirmDialog(false);
|
||
});
|
||
setShowConfirmDialog(true);
|
||
return;
|
||
}
|
||
|
||
// 检查是否存在重名的测试结果
|
||
const currentProject = getCurrentProject();
|
||
const existingResults = currentProject?.testResults || [];
|
||
|
||
// 检查两个ID是否重复
|
||
const isDuplicate1 = existingResults.some(result => result.name === currentId);
|
||
const isDuplicate2 = existingResults.some(result => result.name === currentId2);
|
||
|
||
const currentConfig = getCurrentTestConfig();
|
||
const cableType = currentConfig.params.cableType;
|
||
const isMultiMode = cableType.includes('OM');
|
||
|
||
if (isDuplicate1 || isDuplicate2) {
|
||
const message = [];
|
||
if (isDuplicate1) message.push(`线缆ID ${currentId}`);
|
||
if (isDuplicate2) message.push(`线缆ID ${currentId2}`);
|
||
|
||
setConfirmDialogMessage(`${message.join(' 和 ')}已使用，是否覆盖？`);
|
||
setConfirmDialogCallback(() => () => {
|
||
// 更新临时测试结果的名称
|
||
const updatedTestResult1 = {
|
||
...tempTestResult,
|
||
name: currentId,
|
||
inputname: isMultiMode ? currentId2 : currentId,
|
||
outname: isMultiMode ? currentId : currentId2,
|
||
};
|
||
|
||
const updatedTestResult2 = {
|
||
...tempTestResult,
|
||
name: currentId2,
|
||
inputname: isMultiMode ? currentId2 : currentId,
|
||
outname: isMultiMode ? currentId : currentId2,
|
||
};
|
||
|
||
// 更新当前项目的测试结果
|
||
const currentIndex = useDisplayStore.getState().projects.findIndex(p => p === currentProject);
|
||
if (currentIndex !== -1) {
|
||
// 移除旧的测试结果并添加新的
|
||
const newResults = existingResults.filter(result =>
|
||
result.name !== currentId && result.name !== currentId2
|
||
);
|
||
updateProject(currentIndex, {
|
||
testResults: [...newResults, updatedTestResult1, updatedTestResult2]
|
||
});
|
||
|
||
// 更新navigation.current.params中的测试结果名称
|
||
useDisplayStore.setState({
|
||
navigation: {
|
||
...navigation,
|
||
current: {
|
||
...navigation.current,
|
||
params: updatedTestResult1
|
||
}
|
||
}
|
||
});
|
||
}
|
||
updateCurrentView('save');
|
||
setShowConfirmDialog(false);
|
||
});
|
||
setShowConfirmDialog(true);
|
||
return;
|
||
}
|
||
// 更新临时测试结果的名称并保存到项目中
|
||
if (tempTestResult) {
|
||
|
||
// 创建两个测试结果
|
||
const updatedTestResult1 = {
|
||
...tempTestResult,
|
||
name: currentId,
|
||
inputname: isMultiMode ? currentId2 : currentId,
|
||
outname: isMultiMode ? currentId : currentId2,
|
||
};
|
||
|
||
const updatedTestResult2 = {
|
||
...tempTestResult,
|
||
name: currentId2,
|
||
inputname: isMultiMode ? currentId2 : currentId,
|
||
outname: isMultiMode ? currentId : currentId2,
|
||
};
|
||
|
||
// 更新当前项目的cableIds.name为下一个ID
|
||
const currentIndex = useDisplayStore.getState().projects.findIndex(p => p === currentProject);
|
||
if (currentIndex !== -1) {
|
||
//更新测试结果
|
||
updateProject(currentIndex, {
|
||
testResults: [...(currentProject.testResults || []), updatedTestResult1,updatedTestResult2]
|
||
});
|
||
|
||
// 更新navigation.current.params中的测试结果名称
|
||
const navigation = useDisplayStore.getState().navigation;
|
||
useDisplayStore.setState({
|
||
navigation: {
|
||
...navigation,
|
||
current: {
|
||
...navigation.current,
|
||
params: updatedTestResult1
|
||
}
|
||
}
|
||
});
|
||
|
||
// 获取下一个ID
|
||
const nextId = getNextId(getNextId(inputValue.trim()));
|
||
|
||
// 获取下一个ID2
|
||
const nextId2 = getNextId(getNextId(inputValue2.trim()));
|
||
|
||
// 获取当前项目的所有cableIds
|
||
const currentCableIds = currentProject?.cableIds || [];
|
||
const selectedId = getCurrentCableId().id;
|
||
const selectedId2 = getCurrentCableId2().id;
|
||
|
||
|
||
|
||
// 只更新选中的ID，保留其他ID不变
|
||
const updatedCableIds = currentCableIds.map(cable =>
|
||
cable.id === selectedId ? { ...cable, name: nextId } :
|
||
cable.id === selectedId2 ? { ...cable, name: nextId2 } :
|
||
cable
|
||
);
|
||
|
||
|
||
|
||
// 更新项目，添加两个测试结果
|
||
updateProject(currentIndex, {
|
||
cableIds: updatedCableIds,
|
||
});
|
||
}
|
||
updateCurrentView('save');
|
||
}
|
||
}
|
||
|
||
// 创建测试结果的视图
|
||
const renderContent = () => {
|
||
const renderResultMain = () => {
|
||
const moduleType = tempTestResult?.testconfig?.moduleType;
|
||
switch (moduleType) {
|
||
case '8000':
|
||
return <CopperResultMain testResult={tempTestResult} />;
|
||
case 'cfp':
|
||
return <OLTSResultMain testResult={tempTestResult} />;
|
||
case 'ofp':
|
||
return <OTDRResultMain testResult={tempTestResult} />;
|
||
default:
|
||
return <CopperResultMain testResult={tempTestResult} />;
|
||
}
|
||
};
|
||
|
||
const renderSetName = () => {
|
||
const moduleType = tempTestResult?.testconfig?.moduleType;
|
||
switch (moduleType) {
|
||
case 'cfp':
|
||
return(
|
||
<div className="flex-1 bg-[#303040] p-4 flex flex-col">
|
||
<div className="mb-8">
|
||
<div className="mb-1 text-white text-sm">输出光纤ID1</div>
|
||
<div className="relative cursor-pointer">
|
||
<input
|
||
type="text"
|
||
className="w-full h-[50px] bg-[#ffffe1] rounded-sm px-4 text-black overflow-x-auto whitespace-nowrap"
|
||
value={inputValue}
|
||
placeholder="请输入线缆ID1"
|
||
onChange={(e) => {
|
||
setInputValue(e.target.value);
|
||
setCursorPosition(e.target.selectionStart);
|
||
}}
|
||
onClick={(e) => {
|
||
setActiveInput(1);
|
||
setShowKeyboard(true);
|
||
setCursorPosition(e.target.selectionStart);
|
||
}}
|
||
onFocus={(e) => {
|
||
const cursorPosition = e.target.selectionStart;
|
||
e.target.setSelectionRange(cursorPosition, cursorPosition);
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="mb-1 text-white text-sm">输入光纤ID2</div>
|
||
<div className="relative cursor-pointer">
|
||
<input
|
||
type="text"
|
||
className="w-full h-[50px] bg-[#ffffe1] rounded-sm px-4 text-black overflow-x-auto whitespace-nowrap"
|
||
value={inputValue2}
|
||
placeholder="请输入线缆ID2"
|
||
onChange={(e) => {
|
||
setInputValue2(e.target.value);
|
||
setCursorPosition(e.target.selectionStart);
|
||
}}
|
||
onClick={(e) => {
|
||
setActiveInput(2);
|
||
setShowKeyboard(true);
|
||
setCursorPosition(e.target.selectionStart);
|
||
}}
|
||
onFocus={(e) => {
|
||
const cursorPosition = e.target.selectionStart;
|
||
e.target.setSelectionRange(cursorPosition, cursorPosition);
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
{showKeyboard && (
|
||
<Keyboard
|
||
value={activeInput === 1 ? inputValue : inputValue2}
|
||
cursorPosition={cursorPosition}
|
||
onChange={(newValue, newPosition) => {
|
||
if (activeInput === 1) {
|
||
setInputValue(newValue);
|
||
} else {
|
||
setInputValue2(newValue);
|
||
}
|
||
setCursorPosition(newPosition);
|
||
}}
|
||
onComplete={() => {
|
||
setShowKeyboard(false);
|
||
}}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
default:
|
||
return (
|
||
<div className="flex-1 bg-[#303040] p-4 flex flex-col">
|
||
<div
|
||
className="relative mb-4 cursor-pointer"
|
||
onClick={() => setShowKeyboard(true)}
|
||
>
|
||
<input
|
||
type="text"
|
||
className="w-full h-[50px] bg-[#ffffe1] rounded-sm p-4 text-black"
|
||
value={inputValue}
|
||
placeholder="请输入线缆ID"
|
||
onChange={(e) => {
|
||
setInputValue(e.target.value);
|
||
setCursorPosition(e.target.selectionStart);
|
||
}}
|
||
onClick={(e) => {
|
||
setShowKeyboard(true);
|
||
setCursorPosition(e.target.selectionStart);
|
||
}}
|
||
onFocus={(e) => {
|
||
// 保存光标位置
|
||
const cursorPosition = e.target.selectionStart;
|
||
e.target.setSelectionRange(cursorPosition, cursorPosition);
|
||
}}
|
||
/>
|
||
</div>
|
||
{showKeyboard && (
|
||
<Keyboard
|
||
value={inputValue}
|
||
cursorPosition={cursorPosition}
|
||
onChange={(newValue, newPosition) => {
|
||
setInputValue(newValue);
|
||
setCursorPosition(newPosition);
|
||
}}
|
||
onComplete={() => {
|
||
setShowKeyboard(false);
|
||
}}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
|
||
switch (view) {
|
||
case 'nosave':
|
||
return (
|
||
<div className="w-full h-full flex flex-col overflow-hidden">
|
||
<StatusBar />
|
||
{tempTestResult?.testconfig?.moduleType !== 'cfp' ? (
|
||
<ResultTitleBar title="未保存结果" testResult={tempTestResult} backTo="home" view="main" />
|
||
) : (<ResultTitleBar title=" " testResult={tempTestResult} backTo="home" view="main" />
|
||
)}
|
||
{renderResultMain()}
|
||
<div className="h-[60px] bg-[#303030] flex items-center justify-end px-4">
|
||
<button
|
||
onClick={() => updateCurrentView('setname')}
|
||
className="w-[100px] h-[40px] bg-gradient-to-b from-[#ffd773] to-[#e7aa29] rounded-sm flex items-center justify-center text-black font-bold shadow-lg"
|
||
>
|
||
保存
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
case 'setname':
|
||
return (
|
||
<div className="w-full h-full flex flex-col overflow-hidden">
|
||
<StatusBar />
|
||
|
||
<TitleBar
|
||
title="保存结果"
|
||
backTo={useDisplayStore.getState().navigation.previous?.name || 'home'}
|
||
view={useDisplayStore.getState().navigation.previous?.view || 'main'}
|
||
/>
|
||
|
||
<div className="flex-1 bg-[#303040] p-2 flex flex-col">
|
||
{renderSetName()}
|
||
</div>
|
||
<div className="h-[60px] bg-[#303030] flex items-center justify-end px-4">
|
||
{tempTestResult?.testconfig?.moduleType === "cfp" ? (
|
||
!showKeyboard && (
|
||
<button
|
||
onClick={() => handleComplete2()}
|
||
className="w-[100px] h-[40px] bg-gradient-to-b from-[#ffd773] to-[#e7aa29] rounded-sm flex items-center justify-center text-black font-bold shadow-lg"
|
||
>
|
||
保存
|
||
</button>
|
||
)
|
||
) : (
|
||
!showKeyboard && (<button
|
||
onClick={() => handleComplete()}
|
||
className="w-[100px] h-[40px] bg-gradient-to-b from-[#ffd773] to-[#e7aa29] rounded-sm flex items-center justify-center text-black font-bold shadow-lg"
|
||
>
|
||
保存
|
||
</button>
|
||
)
|
||
)}
|
||
|
||
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
case 'save':
|
||
return (
|
||
<div className="w-full h-full flex flex-col overflow-hidden">
|
||
<StatusBar />
|
||
{tempTestResult?.testconfig?.moduleType !== 'cfp' ? (
|
||
<ResultTitleBar testResult={tempTestResult} backTo="result" view="main" />
|
||
) : (<ResultTitleBar title=" " testResult={tempTestResult} backTo="result" view="main" />
|
||
)}
|
||
{renderResultMain()}
|
||
<div className="h-[60px] bg-[#303030] flex items-center justify-end px-4">
|
||
<button
|
||
onClick={() => {
|
||
navigateTo('home', 'main');
|
||
}}
|
||
className="w-[100px] h-[40px] bg-gradient-to-b from-[#ffd773] to-[#e7aa29] rounded-sm flex items-center justify-center text-black font-bold shadow-lg"
|
||
>
|
||
主页
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
default:
|
||
return null;
|
||
}
|
||
};
|
||
|
||
const content = renderContent();
|
||
return (
|
||
<div className="relative w-full h-full">
|
||
{content}
|
||
{showConfirmDialog && (
|
||
<ConfirmDialog
|
||
message={confirmDialogMessage}
|
||
onConfirm={confirmDialogCallback}
|
||
onCancel={() => setShowConfirmDialog(false)}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
} |