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

2026-02-16 13:44:16 +08:00
parent aeab7f67a8
commit 401f2b8db4
8 changed files with 1484 additions and 194 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,8 +10,10 @@
      "dependencies": {
        "@ant-design/icons": "^5.2.6",
        "antd": "^5.12.8",
+        "i18next": "^23.12.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
+        "react-i18next": "^14.1.3",
        "react-router-dom": "^7.6.3",
        "zustand": "^5.0.6"
      },
@@ -1831,6 +1833,38 @@
        "node": ">=8"
      }
    },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "23.16.8",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.8.tgz",
+      "integrity": "sha512-06r/TitrM88Mg5FdUXAKL96dJMzgqLE5dv3ryBAra4KCwD9mJ4ndOTS95ZuymIGoE+2hzfdaMak2X11/es7ZWg==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
    "node_modules/ignore": {
      "version": "5.3.2",
      "dev": true,
@@ -2830,6 +2864,28 @@
        "react": "^18.3.1"
      }
    },
+    "node_modules/react-i18next": {
+      "version": "14.1.3",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.3.tgz",
+      "integrity": "sha512-wZnpfunU6UIAiJ+bxwOiTmBOAaB14ha97MjOEnLGac2RJ+h/maIYXZuTHlmyqQVX1UVHmU1YDTQ5vxLmwfXTjw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-is": {
      "version": "18.3.1",
      "license": "MIT"
@@ -3243,6 +3299,15 @@
        }
      }
    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "dev": true,
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,8 +12,10 @@
  "dependencies": {
    "@ant-design/icons": "^5.2.6",
    "antd": "^5.12.8",
+    "i18next": "^23.12.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.3",
    "react-router-dom": "^7.6.3",
    "zustand": "^5.0.6"
  },
--- a/frontend/package.json.md5
+++ b/frontend/package.json.md5
@@ -1 +1 @@
-340ef73da49fc2e1f0f32752fcad55cd
+804e76dbe08fe839d4ff8e699a185ad4
--- a/frontend/src/i18n.ts
+++ b/frontend/src/i18n.ts
@@ -0,0 +1,28 @@
+import i18n from 'i18next';
+import {initReactI18next} from 'react-i18next';
+
+const DEFAULT_LANG = 'zh';
+
+i18n.use(initReactI18next).init({
+    lng: DEFAULT_LANG,
+    fallbackLng: DEFAULT_LANG,
+    resources: {
+        [DEFAULT_LANG]: {
+            translation: {},
+        },
+    },
+    interpolation: {
+        escapeValue: false,
+    },
+    react: {
+        useSuspense: false,
+    },
+});
+
+export const applyTranslations = (lang: string, translations: Record<string, string>) => {
+    if (!lang) return;
+    i18n.addResourceBundle(lang, 'translation', translations, true, true);
+    i18n.changeLanguage(lang);
+};
+
+export default i18n;
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -3,9 +3,10 @@ import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import 'antd/dist/reset.css'
 import './index.css'
+import './i18n'

 ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
-)
+)
--- a/frontend/src/pages/OptimizerPage.tsx
+++ b/frontend/src/pages/OptimizerPage.tsx
--- a/frontend/src/pages/optimizer.css
+++ b/frontend/src/pages/optimizer.css
@@ -0,0 +1,294 @@
+.optimizer-set-panel {
+    background: linear-gradient(180deg, #1f2c49 0%, #1a233b 100%);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 10px;
+    padding: 6px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.optimizer-panel-header {
+    background: linear-gradient(90deg, rgba(120, 160, 220, 0.25), rgba(120, 160, 220, 0));
+    color: #c9d7f7;
+    font-weight: 600;
+    font-size: 12px;
+    padding: 4px 6px;
+    border-radius: 6px;
+    letter-spacing: 0.5px;
+}
+
+.optimizer-set-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(6, 10, 20, 0.55);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 8px;
+    padding: 6px;
+}
+
+.optimizer-set-row-tight {
+    padding: 6px 8px;
+}
+
+.optimizer-set-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 34px;
+    height: 26px;
+    border-radius: 6px;
+    background: #ffffff;
+    color: #1b2744;
+    font-weight: 600;
+    font-size: 11px;
+}
+
+.optimizer-set-select {
+    flex: 1;
+}
+
+.optimizer-set-select-tight .ant-select-selector {
+    padding-left: 6px !important;
+}
+
+.optimizer-set-select-tight .ant-select-selection-placeholder {
+    color: #c9d7f7 !important;
+    opacity: 0.9;
+}
+
+.optimizer-set-button {
+    flex: 1;
+    height: 28px;
+    background: transparent;
+    border: none;
+    color: #c9d7f7;
+    text-align: left;
+    padding: 0 4px;
+}
+
+.optimizer-set-button:disabled {
+    color: rgba(201, 215, 247, 0.4);
+}
+
+.optimizer-set-popover-overlay {
+    position: fixed;
+    inset: 0;
+    background: transparent;
+    z-index: 1000;
+}
+
+.optimizer-set-popover {
+    position: fixed;
+    width: 520px;
+    background: #0b0f16;
+    border-radius: 12px;
+    padding: 0;
+    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
+}
+
+.optimizer-main-popover {
+    position: fixed;
+    width: 300px;
+    background: #0b0f16;
+    border-radius: 12px;
+    padding: 0;
+    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
+}
+
+.optimizer-set-modal-list {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px 12px;
+    padding: 12px 16px 16px 16px;
+    max-height: 520px;
+    overflow: hidden;
+}
+
+.optimizer-main-modal-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 6px;
+    padding: 10px 12px 12px 12px;
+    max-height: 320px;
+    overflow: hidden;
+}
+
+.optimizer-main-modal-list .optimizer-set-modal-item {
+    padding: 6px 8px;
+    gap: 6px;
+    font-size: 12px;
+}
+
+.optimizer-main-modal-list .optimizer-set-modal-label {
+    font-size: 14px;
+    white-space: nowrap;
+}
+
+.optimizer-main-modal-list .optimizer-set-modal-icon {
+    font-size: 12px;
+}
+
+.optimizer-set-modal-item {
+    display: grid;
+    grid-template-columns: 20px 1fr auto;
+    align-items: center;
+    gap: 8px;
+    background: #0f131b;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 8px;
+    padding: 8px 10px;
+    color: #c9d7f7;
+    text-align: left;
+}
+
+.optimizer-set-modal-item:hover {
+    border-color: rgba(123, 180, 255, 0.6);
+}
+
+.optimizer-set-modal-icon {
+    color: #7bb4ff;
+}
+
+.optimizer-set-modal-count {
+    color: #7ad15f;
+    font-weight: 600;
+}
+.optimizer-set-select .ant-select-selector {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    min-height: 26px !important;
+}
+
+.optimizer-set-select .ant-select-selection-item,
+.optimizer-set-select .ant-select-selection-placeholder {
+    color: #c9d7f7 !important;
+}
+
+.optimizer-set-select .ant-select-selection-overflow {
+    gap: 6px;
+}
+
+.optimizer-set-select .ant-select-selection-item-content {
+    color: #c9d7f7;
+}
+
+.optimizer-set-select .ant-select-selection-item-remove {
+    color: #9fb3e5;
+}
+
+.optimizer-weight-row {
+    display: grid;
+    grid-template-columns: 38px 1fr;
+    align-items: center;
+    gap: 10px;
+}
+
+.optimizer-weight-label {
+    color: #c9d7f7;
+    font-size: 11px;
+    text-align: right;
+}
+
+.optimizer-left-panels {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.optimizer-side-panel {
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+}
+
+.optimizer-left-panels {
+    flex: 1;
+    min-width: 0;
+}
+
+.optimizer-weight-panel {
+    flex: 1;
+    min-width: 0;
+}
+
+.optimizer-weight-panel {
+    background: linear-gradient(180deg, #1f2c49 0%, #1a233b 100%);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 10px;
+    padding: 6px;
+    align-self: flex-start;
+    height: fit-content;
+}
+
+.optimizer-weight-row {
+    display: grid;
+    grid-template-columns: 20px 34px 1fr;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 6px;
+}
+
+.optimizer-weight-row:last-child {
+    margin-bottom: 0;
+}
+
+.optimizer-weight-row .ant-slider {
+    margin: 0;
+}
+
+.optimizer-weight-icon {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.12);
+    color: #c9d7f7;
+    font-size: 11px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.optimizer-weight-label {
+    color: #c9d7f7;
+    font-size: 12px;
+    text-align: left;
+}
+
+.optimizer-weight-slider .ant-slider-rail {
+    background: repeating-linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0.25),
+        rgba(255, 255, 255, 0.25) 2px,
+        rgba(255, 255, 255, 0) 14px,
+        rgba(255, 255, 255, 0) 18px
+    );
+    height: 4px;
+}
+
+.optimizer-weight-slider .ant-slider-track {
+    background-color: #7bb4ff;
+    height: 4px;
+}
+
+.optimizer-weight-slider .ant-slider-handle {
+    width: 12px;
+    height: 12px;
+    margin-top: -4px;
+    border-color: #7bb4ff;
+}
+.optimizer-weight-row .ant-slider-rail {
+    background-color: rgba(255, 255, 255, 0.15);
+}
+
+.optimizer-weight-row .ant-slider-track {
+    background-color: #6aa9ff;
+}
+
+.optimizer-weight-row .ant-slider-handle {
+    border-color: #6aa9ff;
+    background-color: #ffffff;
+}
--- a/internal/service/parser_service.go
+++ b/internal/service/parser_service.go
@@ -9,7 +9,9 @@ import (
 	"equipment-analyzer/internal/utils"
 	"fmt"
 	"io/ioutil"
+	"math"
 	"net/http"
+	"strings"
 	"time"
 )

@@ -237,6 +239,9 @@ func (ps *ParserService) convertGear(item map[string]interface{}) {
 	if _, exists := item["type"]; !exists {
 		if code, exists := item["code"].(string); exists {
 			baseCode := code
+			if parts := strings.Split(code, "_"); len(parts) > 0 {
+				baseCode = parts[0]
+			}
 			if idx := len(baseCode) - 1; idx >= 0 {
 				gearLetter := string(baseCode[idx])
 				item["gear"] = gearByGearLetter[gearLetter]
@@ -324,7 +329,7 @@ func (ps *ParserService) convertMainStat(item map[string]interface{}) {
 				if ps.isFlat(mainOpType) {
 					mainValue = mainStatValue
 				} else {
-					mainValue = mainStatValue * 100
+					mainValue = ps.round10ths(mainStatValue * 100)
 				}

 				if mainValue == 0 || mainValue != mainValue { // NaN check
@@ -367,7 +372,7 @@ func (ps *ParserService) convertSubStats(item map[string]interface{}) {
 			if ps.isFlat(opType) {
 				value = opValue
 			} else {
-				value = opValue * 100
+				value = ps.round10ths(opValue * 100)
 			}

 			if existingStat, exists := statAcc[statType]; exists {
@@ -428,6 +433,10 @@ func (ps *ParserService) isFlat(text string) bool {
 	return text == "max_hp" || text == "speed" || text == "att" || text == "def"
 }

+func (ps *ParserService) round10ths(value float64) float64 {
+	return math.Round(value*10) / 10
+}
+
 // 映射常量
 var (
 	rankByIngameGrade = []string{
@@ -476,6 +485,10 @@ var (
 		"set_vampire":   "LifestealSet",
 		"set_shield":    "ProtectionSet",
 		"set_torrent":   "TorrentSet",
+		"set_revenant":  "ReversalSet",
+		"set_riposte":   "RiposteSet",
+		"set_chase":     "PursuitSet",
+		"set_opener":    "WarfareSet",
 	}

 	statByIngameStat = map[string]string{