feat(i18n): integrate i18next for internationalization support and add initial translation setup
This commit is contained in:
kever
@@ -1,4 +1,4 @@
|
||||
import React, {useEffect, useMemo, useRef, useState} from 'react';
|
||||
import React, {useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
|
||||
import {createPortal} from 'react-dom';
|
||||
import {
|
||||
Avatar,
|
||||
@@ -395,19 +395,22 @@ export default function OptimizerPage() {
|
||||
boots: 'All',
|
||||
});
|
||||
const [weightValues, setWeightValues] = useState<Record<StatKey, number>>({
|
||||
atk: 50,
|
||||
def: 50,
|
||||
hp: 50,
|
||||
spd: 50,
|
||||
cr: 50,
|
||||
cd: 50,
|
||||
acc: 50,
|
||||
res: 50,
|
||||
atk: 3,
|
||||
def: 3,
|
||||
hp: 3,
|
||||
spd: 3,
|
||||
cr: 3,
|
||||
cd: 3,
|
||||
acc: 3,
|
||||
res: 3,
|
||||
});
|
||||
const [results, setResults] = useState<BuildResult[]>([]);
|
||||
const [selectedResult, setSelectedResult] = useState<BuildResult | null>(null);
|
||||
const [totalCombos, setTotalCombos] = useState(0);
|
||||
const {success, error, info} = useMessage();
|
||||
|
||||
const leftPanelsRef = useRef<HTMLDivElement | null>(null);
|
||||
const [leftPanelsHeight, setLeftPanelsHeight] = useState<number | null>(null);
|
||||
const renderSetBadge = (values: string[]) => (values.length === 0 ? 'All' : '已选');
|
||||
|
||||
const [setPickerOpen, setSetPickerOpen] = useState(false);
|
||||
@@ -445,7 +448,7 @@ export default function OptimizerPage() {
|
||||
return option ? option.label : '套装';
|
||||
};
|
||||
|
||||
const openSetPicker = (target: 'set1' | 'set2' | 'set3', event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
const openSetPicker = (target: 'set1' | 'set2' | 'set3', event: React.MouseEvent<HTMLElement>) => {
|
||||
const modalWidth = 520;
|
||||
const modalHeight = 520;
|
||||
const offset = 0;
|
||||
@@ -480,10 +483,10 @@ export default function OptimizerPage() {
|
||||
|
||||
const openMainPicker = (
|
||||
target: 'necklace' | 'ring' | 'boots',
|
||||
event: React.MouseEvent<HTMLButtonElement>
|
||||
event: React.MouseEvent<HTMLElement>
|
||||
) => {
|
||||
const modalWidth = 300;
|
||||
const modalHeight = 320;
|
||||
const modalHeight = Math.min(520, 88 + getMainStatOptions(target).length * 36);
|
||||
const offset = 0;
|
||||
let left = 0;
|
||||
let top = 0;
|
||||
@@ -523,43 +526,43 @@ export default function OptimizerPage() {
|
||||
const getMainStatOptions = (target: 'necklace' | 'ring' | 'boots'): Array<{label: string; value: MainStatKey | 'All'}> => {
|
||||
if (target === 'necklace') {
|
||||
return [
|
||||
{label: 'All', value: 'All'},
|
||||
{label: '攻击力', value: 'Attack'},
|
||||
{label: '防御力', value: 'Defense'},
|
||||
{label: '生命值', value: 'Health'},
|
||||
{label: '攻击力%', value: 'AttackPercent'},
|
||||
{label: '防御力%', value: 'DefensePercent'},
|
||||
{label: '生命值%', value: 'HealthPercent'},
|
||||
{label: '暴击率', value: 'CriticalHitChancePercent'},
|
||||
{label: '暴击伤害', value: 'CriticalHitDamagePercent'},
|
||||
{label: '\u5168\u90e8', value: 'All'},
|
||||
{label: '\u653b\u51fb\u529b', value: 'Attack'},
|
||||
{label: '\u9632\u5fa1\u529b', value: 'Defense'},
|
||||
{label: '\u751f\u547d\u503c', value: 'Health'},
|
||||
{label: '\u653b\u51fb\u529b%', value: 'AttackPercent'},
|
||||
{label: '\u9632\u5fa1\u529b%', value: 'DefensePercent'},
|
||||
{label: '\u751f\u547d\u503c%', value: 'HealthPercent'},
|
||||
{label: '\u66b4\u51fb\u7387', value: 'CriticalHitChancePercent'},
|
||||
{label: '\u66b4\u51fb\u4f24\u5bb3', value: 'CriticalHitDamagePercent'},
|
||||
];
|
||||
}
|
||||
if (target === 'ring') {
|
||||
return [
|
||||
{label: 'All', value: 'All'},
|
||||
{label: '攻击力', value: 'Attack'},
|
||||
{label: '防御力', value: 'Defense'},
|
||||
{label: '生命值', value: 'Health'},
|
||||
{label: '攻击力%', value: 'AttackPercent'},
|
||||
{label: '防御力%', value: 'DefensePercent'},
|
||||
{label: '生命值%', value: 'HealthPercent'},
|
||||
{label: '命中', value: 'EffectivenessPercent'},
|
||||
{label: '抵抗', value: 'EffectResistancePercent'},
|
||||
{label: '\u5168\u90e8', value: 'All'},
|
||||
{label: '\u653b\u51fb\u529b', value: 'Attack'},
|
||||
{label: '\u9632\u5fa1\u529b', value: 'Defense'},
|
||||
{label: '\u751f\u547d\u503c', value: 'Health'},
|
||||
{label: '\u653b\u51fb\u529b%', value: 'AttackPercent'},
|
||||
{label: '\u9632\u5fa1\u529b%', value: 'DefensePercent'},
|
||||
{label: '\u751f\u547d\u503c%', value: 'HealthPercent'},
|
||||
{label: '\u6548\u679c\u547d\u4e2d', value: 'EffectivenessPercent'},
|
||||
{label: '\u6548\u679c\u6297\u6027', value: 'EffectResistancePercent'},
|
||||
];
|
||||
}
|
||||
return [
|
||||
{label: 'All', value: 'All'},
|
||||
{label: '攻击力', value: 'Attack'},
|
||||
{label: '防御力', value: 'Defense'},
|
||||
{label: '生命值', value: 'Health'},
|
||||
{label: '攻击力%', value: 'AttackPercent'},
|
||||
{label: '防御力%', value: 'DefensePercent'},
|
||||
{label: '生命值%', value: 'HealthPercent'},
|
||||
{label: '速度', value: 'Speed'},
|
||||
{label: '\u5168\u90e8', value: 'All'},
|
||||
{label: '\u653b\u51fb\u529b', value: 'Attack'},
|
||||
{label: '\u9632\u5fa1\u529b', value: 'Defense'},
|
||||
{label: '\u751f\u547d\u503c', value: 'Health'},
|
||||
{label: '\u653b\u51fb\u529b%', value: 'AttackPercent'},
|
||||
{label: '\u9632\u5fa1\u529b%', value: 'DefensePercent'},
|
||||
{label: '\u751f\u547d\u503c%', value: 'HealthPercent'},
|
||||
{label: '\u901f\u5ea6', value: 'Speed'},
|
||||
];
|
||||
};
|
||||
|
||||
const getMainStatLabel = (target: 'necklace' | 'ring' | 'boots', value: MainStatKey | 'All') => {
|
||||
const getMainStatLabel = (target: 'necklace' | 'ring' | 'boots', value: MainStatKey | 'All') => {
|
||||
const option = getMainStatOptions(target).find(item => item.value === value);
|
||||
return option ? option.label : 'All';
|
||||
};
|
||||
@@ -596,6 +599,18 @@ export default function OptimizerPage() {
|
||||
loadLatestData();
|
||||
}, []);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!leftPanelsRef.current) return;
|
||||
const observer = new ResizeObserver(entries => {
|
||||
for (const entry of entries) {
|
||||
const next = Math.round(entry.contentRect.height);
|
||||
setLeftPanelsHeight(next > 0 ? next : null);
|
||||
}
|
||||
});
|
||||
observer.observe(leftPanelsRef.current);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (setPickerOpen) {
|
||||
bodyStyleRef.current = {
|
||||
@@ -615,14 +630,14 @@ export default function OptimizerPage() {
|
||||
setSetFilters(emptySetFilters);
|
||||
setMainStatFilters({necklace: 'All', ring: 'All', boots: 'All'});
|
||||
setWeightValues({
|
||||
atk: 50,
|
||||
def: 50,
|
||||
hp: 50,
|
||||
spd: 50,
|
||||
cr: 50,
|
||||
cd: 50,
|
||||
acc: 50,
|
||||
res: 50,
|
||||
atk: 3,
|
||||
def: 3,
|
||||
hp: 3,
|
||||
spd: 3,
|
||||
cr: 3,
|
||||
cd: 3,
|
||||
acc: 3,
|
||||
res: 3,
|
||||
});
|
||||
setResults([]);
|
||||
setSelectedResult(null);
|
||||
@@ -816,7 +831,7 @@ export default function OptimizerPage() {
|
||||
ref={rightPanelRef}
|
||||
>
|
||||
<div className="optimizer-side-panel">
|
||||
<div className="optimizer-left-panels">
|
||||
<div className="optimizer-left-panels" ref={leftPanelsRef}>
|
||||
<div className="optimizer-set-panel">
|
||||
<div className="optimizer-set-row optimizer-set-row-tight">
|
||||
<span className="optimizer-set-badge">{renderSetBadge(setFilters.set1)}</span>
|
||||
@@ -849,7 +864,6 @@ export default function OptimizerPage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="optimizer-set-panel">
|
||||
<div className="optimizer-panel-header">主能力值</div>
|
||||
<div className="optimizer-set-row">
|
||||
<span className="optimizer-set-badge">项链</span>
|
||||
<Button
|
||||
@@ -879,14 +893,15 @@ export default function OptimizerPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="optimizer-weight-panel">
|
||||
<div className="optimizer-panel-header">能力值权重</div>
|
||||
<div className="optimizer-weight-panel" style={leftPanelsHeight ? {height: leftPanelsHeight} : undefined}>
|
||||
<div className="optimizer-weight-row">
|
||||
<span className="optimizer-weight-icon">攻</span>
|
||||
<span className="optimizer-weight-label">攻击</span>
|
||||
<Slider
|
||||
min={0}
|
||||
max={100}
|
||||
max={5}
|
||||
step={1}
|
||||
dots
|
||||
className="optimizer-weight-slider"
|
||||
value={weightValues.atk}
|
||||
onChange={value => setWeightValues(prev => ({...prev, atk: value as number}))}
|
||||
@@ -897,7 +912,9 @@ export default function OptimizerPage() {
|
||||
<span className="optimizer-weight-label">防御</span>
|
||||
<Slider
|
||||
min={0}
|
||||
max={100}
|
||||
max={5}
|
||||
step={1}
|
||||
dots
|
||||
className="optimizer-weight-slider"
|
||||
value={weightValues.def}
|
||||
onChange={value => setWeightValues(prev => ({...prev, def: value as number}))}
|
||||
@@ -908,7 +925,9 @@ export default function OptimizerPage() {
|
||||
<span className="optimizer-weight-label">生命</span>
|
||||
<Slider
|
||||
min={0}
|
||||
max={100}
|
||||
max={5}
|
||||
step={1}
|
||||
dots
|
||||
className="optimizer-weight-slider"
|
||||
value={weightValues.hp}
|
||||
onChange={value => setWeightValues(prev => ({...prev, hp: value as number}))}
|
||||
@@ -919,7 +938,9 @@ export default function OptimizerPage() {
|
||||
<span className="optimizer-weight-label">速度</span>
|
||||
<Slider
|
||||
min={0}
|
||||
max={100}
|
||||
max={5}
|
||||
step={1}
|
||||
dots
|
||||
className="optimizer-weight-slider"
|
||||
value={weightValues.spd}
|
||||
onChange={value => setWeightValues(prev => ({...prev, spd: value as number}))}
|
||||
@@ -930,7 +951,9 @@ export default function OptimizerPage() {
|
||||
<span className="optimizer-weight-label">暴击</span>
|
||||
<Slider
|
||||
min={0}
|
||||
max={100}
|
||||
max={5}
|
||||
step={1}
|
||||
dots
|
||||
className="optimizer-weight-slider"
|
||||
value={weightValues.cr}
|
||||
onChange={value => setWeightValues(prev => ({...prev, cr: value as number}))}
|
||||
@@ -941,7 +964,9 @@ export default function OptimizerPage() {
|
||||
<span className="optimizer-weight-label">爆伤</span>
|
||||
<Slider
|
||||
min={0}
|
||||
max={100}
|
||||
max={5}
|
||||
step={1}
|
||||
dots
|
||||
className="optimizer-weight-slider"
|
||||
value={weightValues.cd}
|
||||
onChange={value => setWeightValues(prev => ({...prev, cd: value as number}))}
|
||||
@@ -952,7 +977,9 @@ export default function OptimizerPage() {
|
||||
<span className="optimizer-weight-label">命中</span>
|
||||
<Slider
|
||||
min={0}
|
||||
max={100}
|
||||
max={5}
|
||||
step={1}
|
||||
dots
|
||||
className="optimizer-weight-slider"
|
||||
value={weightValues.acc}
|
||||
onChange={value => setWeightValues(prev => ({...prev, acc: value as number}))}
|
||||
@@ -963,7 +990,9 @@ export default function OptimizerPage() {
|
||||
<span className="optimizer-weight-label">抵抗</span>
|
||||
<Slider
|
||||
min={0}
|
||||
max={100}
|
||||
max={5}
|
||||
step={1}
|
||||
dots
|
||||
className="optimizer-weight-slider"
|
||||
value={weightValues.res}
|
||||
onChange={value => setWeightValues(prev => ({...prev, res: value as number}))}
|
||||
|
||||
Reference in New Issue
Block a user