refactor: Web 服务器设置移动到单独小节和设置小调整

[litwak913]

顺便调整了其他样式

Sourcery 摘要

将 Web Server 配置移至独立的设置部分，并让调试设置专注于诊断信息。

新功能：

• 添加专用的 Web Server 设置部分，用于启用服务器、配置其端口、允许 LAN 访问、查看其地址以及从外部打开它。

增强功能：

• 将 Web Server 控件移出调试设置，并将其作为独立的设置导航项公开。
• 为快捷键设置使用键盘专用图标。
• 在支持的语言环境中，将 Web Server 翻译键整理到专用命名空间下。

Original summary in English

Sourcery 总结

将 Web Server 配置与诊断设置分离，并优化相关设置的呈现方式和本地化。

新功能：

• 新增专用的 Web Server 设置部分，用于启用服务器、配置端口、允许 LAN 访问、查看其地址以及从外部打开服务器。

改进：

• 将 Web Server 控件从调试设置中移出，并将其作为单独的设置导航项显示。
• 为快捷键设置使用专用的键盘图标。
• 在支持的各个区域设置中，将 Web Server 翻译归入专用命名空间。

Original summary in English

Summary by Sourcery

Separate Web Server configuration from diagnostic settings and refine the related settings presentation and localization.

New Features:

• Add a dedicated Web Server settings section for enabling the server, configuring its port, allowing LAN access, viewing its address, and opening it externally.

Enhancements:

• Move Web Server controls out of Debug settings and expose them as a separate settings navigation item.
• Use a keyboard-specific icon for hotkey settings.
• Organize Web Server translations under a dedicated namespace across supported locales.

[sourcery-ai]

嘿——我发现了 2 个问题

AI 代理提示词

请处理此代码审查中的评论：

## 各条评论

### 评论 1
<location path="src/components/WebServerSection.tsx" line_range="28-31" />
<code_context>
+    const loadWebServerInfo = async () => {
+      if (isTauri()) {
+        try {
+          const { invoke } = await import('@tauri-apps/api/core');
+          const [port, localIp] = await Promise.all([
+            invoke<number>('get_web_server_port'),
+            invoke<string | null>('get_local_lan_ip'),
+          ]);
+          setWebServerPort(port);
+          setLanIp(localIp);
+        } catch {}
+      } else {
+        // 浏览器环境：从当前 URL 推导端口
</code_context>
<issue_to_address>
**问题 (bug_risk)：** 当 `get_local_lan_ip` 失败时，`Promise.all` 会整体拒绝，因此成功获取的 Web 服务器端口结果也会被丢弃，`webServerPort` 保持为 0；随后该部分会隐藏服务器地址，尽管仍然可以通过 localhost 访问。

**触发条件：** Tauri 后端无法确定 LAN IP 时，例如机器没有活动的网络接口。

**建议修复：** 独立加载端口，并将失败的 LAN IP 查询视为 `null`，这样现有的 `lanIp || 'localhost'` 回退逻辑就能生成本地地址。

```suggestion
          const port = await invoke<number>('get_web_server_port');
          const localIp = await invoke<string | null>('get_local_lan_ip').catch(() => null);
```
</issue_to_address>

### 评论 2
<location path="src/components/WebServerSection.tsx" line_range="23-43" />
<code_context>
+  const [webServerPort, setWebServerPort] = useState<number>(0);
+  const [lanIp, setLanIp] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadWebServerInfo = async () => {
+      if (isTauri()) {
+        try {
+          const { invoke } = await import('@tauri-apps/api/core');
+          const [port, localIp] = await Promise.all([
+            invoke<number>('get_web_server_port'),
+            invoke<string | null>('get_local_lan_ip'),
+          ]);
+          setWebServerPort(port);
+          setLanIp(localIp);
+        } catch {}
+      } else {
+        // 浏览器环境：从当前 URL 推导端口
+        const port = parseInt(window.location.port, 10);
+        if (port) setWebServerPort(port);
+      }
+      setPortInput(String(configuredPort));
+    }
+    loadWebServerInfo();
+  }, [configuredPort]);
+
+  const webServerAddress = (() => {
</code_context>
<issue_to_address>
**问题 (bug_risk)：** 异步加载会在 Tauri 调用完成后重置 `portInput`，因此延迟的请求可能会覆盖用户在端口字段中输入的文本，并导致后续失焦操作保存一个与用户意图不同的值。

**触发条件：** 用户在异步 Tauri Web 服务器查询完成之前编辑端口时。

**建议修复：** 避免从过时的 effect 重置输入，或者取消/为异步请求添加版本控制，仅在当前配置值仍未发生变化时同步 `portInput`。
</issue_to_address>

---

Sourcery 对开源项目免费——如果您喜欢我们的审查结果，请考虑分享它们 ✨

• X
• Mastodon
• LinkedIn
• Facebook

Original comment in English

Hey - I've found 2 issues

Prompt for AI Agents

Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="src/components/WebServerSection.tsx" line_range="28-31" />
<code_context>
+    const loadWebServerInfo = async () => {
+      if (isTauri()) {
+        try {
+          const { invoke } = await import('@tauri-apps/api/core');
+          const [port, localIp] = await Promise.all([
+            invoke<number>('get_web_server_port'),
+            invoke<string | null>('get_local_lan_ip'),
+          ]);
+          setWebServerPort(port);
+          setLanIp(localIp);
+        } catch {}
+      } else {
+        // 浏览器环境：从当前 URL 推导端口
</code_context>
<issue_to_address>
**issue (bug_risk):** The `Promise.all` rejects as a whole when `get_local_lan_ip` fails, so the successful web-server port result is discarded and `webServerPort` remains 0; the section then hides the server address even though localhost access is still available.

**Triggers:** When the Tauri backend cannot determine a LAN IP, such as on a machine without an active network interface.

**Suggested fix:** Load the port independently and treat a failed LAN-IP lookup as `null`, allowing the existing `lanIp || 'localhost'` fallback to produce the local address.

```suggestion
          const port = await invoke<number>('get_web_server_port');
          const localIp = await invoke<string | null>('get_local_lan_ip').catch(() => null);
```
</issue_to_address>

### Comment 2
<location path="src/components/WebServerSection.tsx" line_range="23-43" />
<code_context>
+  const [webServerPort, setWebServerPort] = useState<number>(0);
+  const [lanIp, setLanIp] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadWebServerInfo = async () => {
+      if (isTauri()) {
+        try {
+          const { invoke } = await import('@tauri-apps/api/core');
+          const [port, localIp] = await Promise.all([
+            invoke<number>('get_web_server_port'),
+            invoke<string | null>('get_local_lan_ip'),
+          ]);
+          setWebServerPort(port);
+          setLanIp(localIp);
+        } catch {}
+      } else {
+        // 浏览器环境：从当前 URL 推导端口
+        const port = parseInt(window.location.port, 10);
+        if (port) setWebServerPort(port);
+      }
+      setPortInput(String(configuredPort));
+    }
+    loadWebServerInfo();
+  }, [configuredPort]);
+
+  const webServerAddress = (() => {
</code_context>
<issue_to_address>
**issue (bug_risk):** The asynchronous load resets `portInput` after the Tauri invocations complete, so a delayed request overwrites text the user has entered in the port field and can cause the subsequent blur to save a different value than the user intended.

**Triggers:** When the user edits the port before the asynchronous Tauri web-server lookups finish.

**Suggested fix:** Avoid resetting the input from an outdated effect, or cancel/version the async request and only synchronize `portInput` when the current configured value is still unchanged.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook