kever/wails-epic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n): integrate i18next for internationalization support and add initial translation setup

Browse Source
This commit is contained in:
kever
2026-02-16 14:28:15 +08:00
parent 401f2b8db4
commit 7f4255eb69
2 changed files with 103 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
frontend/src/pages/OptimizerPage.tsx
View File

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

20
frontend/src/pages/optimizer.css
View File

@@ -66,6 +66,7 @@
color: #c9d7f7; color: #c9d7f7;
text-align: left; text-align: left;
padding: 0 4px; padding: 0 4px;
font-size: 16px;
} }
.optimizer-set-button:disabled { .optimizer-set-button:disabled {
@@ -111,23 +112,23 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 6px; gap: 6px;
padding: 10px 12px 12px 12px; padding: 10px 12px 12px 12px;
max-height: 320px; max-height: none;
overflow: hidden; overflow: visible;
} }
.optimizer-main-modal-list .optimizer-set-modal-item { .optimizer-main-modal-list .optimizer-set-modal-item {
padding: 6px 8px; padding: 6px 8px;
gap: 6px; gap: 6px;
font-size: 12px; font-size: 16px;
} }
.optimizer-main-modal-list .optimizer-set-modal-label { .optimizer-main-modal-list .optimizer-set-modal-label {
font-size: 14px; font-size: 16px;
white-space: nowrap; white-space: nowrap;
} }
.optimizer-main-modal-list .optimizer-set-modal-icon { .optimizer-main-modal-list .optimizer-set-modal-icon {
font-size: 12px; font-size: 16px;
} }
.optimizer-set-modal-item { .optimizer-set-modal-item {
@@ -141,6 +142,11 @@
padding: 8px 10px; padding: 8px 10px;
color: #c9d7f7; color: #c9d7f7;
text-align: left; text-align: left;
font-size: 16px;
}
.optimizer-set-modal-label {
font-size: 16px;
} }
.optimizer-set-modal-item:hover { .optimizer-set-modal-item:hover {
@@ -230,6 +236,10 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
margin-bottom: 6px; margin-bottom: 6px;
background: rgba(6, 10, 20, 0.55);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 6px;
} }
.optimizer-weight-row:last-child { .optimizer-weight-row:last-child {