feat: refactor configuration management and enhance log viewer text selection

Licoy · Licoy · commit b08877be95b9 · 2026-02-14T01:31:21.000+08:00
diff --git a/README.md b/README.md
@@ -85,74 +85,22 @@ sed -i "/# fetch-github-hosts begin/Q" /etc/hosts && curl https://hosts.gitcdn.t
 
 > 💡 可配合 crontab 定时任务实现自动更新
 
-## 🏗️ 技术栈
+## 📸 截图
 
-| 组件 | 技术 |
-|------|------|
-| 桌面框架 | [Tauri 2.0](https://v2.tauri.app/) (Rust) |
-| 前端框架 | [Nuxt 3](https://nuxt.com/) + [Vue 3](https://vuejs.org/) |
-| UI 组件 | [Nuxt UI](https://ui.nuxt.com/) |
-| 样式 | [Tailwind CSS 4](https://tailwindcss.com/) |
-| 状态管理 | [Pinia](https://pinia.vuejs.org/) |
-| 国际化 | [@nuxtjs/i18n](https://i18n.nuxtjs.org/) |
-
-## 🛠️ 开发
-
-### 环境要求
-
-- Node.js ≥ 20
-- Rust ≥ 1.70
-- macOS / Windows / Linux
-
-### 本地开发
-
-```bash
-# 安装依赖
-npm install
-
-# 构建前端静态文件
-NUXT_CLI_WRAPPER=false npx nuxt generate
-
-# 启动 Tauri 开发模式
-npx tauri dev
-```
-
-### 构建发布包
+#### 客户端模式
+![client](assets/public/docs/client.png)
 
-```bash
-# 构建前端
-NUXT_CLI_WRAPPER=false npx nuxt generate
+#### 客户端启动
+![client-start](assets/public/docs/client-start.png)
 
-# 构建 Tauri 应用
-npx tauri build
-```
+#### 客户端 Hosts 源选择
+![client-select](assets/public/docs/client-select.png)
 
-## 📁 项目结构
+#### 客户端 Hosts 源自定义
+![client-custom](assets/public/docs/client-custom.png)
 
-```
-fetch-github-hosts/
-├── components/          # Vue 组件
-│   ├── ClientMode.vue   # 客户端模式面板
-│   ├── ServerMode.vue   # 服务端模式面板
-│   ├── AboutPanel.vue   # 关于面板
-│   └── LogViewer.vue    # 日志查看器
-├── composables/         # Vue 组合函数
-│   └── useTauri.ts      # Tauri API 封装
-├── i18n/locales/        # 国际化翻译文件
-├── pages/index.vue      # 主页面
-├── public/              # 静态资源
-├── src-tauri/           # Tauri (Rust) 后端
-│   ├── src/
-│   │   ├── lib.rs       # 入口 + 系统托盘
-│   │   ├── commands.rs  # Tauri 命令
-│   │   ├── services.rs  # 客户端/服务端逻辑
-│   │   ├── dns.rs       # DNS 解析
-│   │   ├── hosts.rs     # Hosts 文件操作
-│   │   ├── config.rs    # 配置读写
-│   │   └── models.rs    # 数据模型
-│   └── icons/           # 应用图标
-└── .github/workflows/   # CI/CD
-```
+#### 服务端模式
+![server](assets/public/docs/server.png)
 
 ## 🌟 Star 趋势
 
diff --git a/README_EN.md b/README_EN.md
@@ -85,74 +85,22 @@ sed -i "/# fetch-github-hosts begin/Q" /etc/hosts && curl https://hosts.gitcdn.t
 
 > 💡 Set up a crontab task for automatic updates
 
-## 🏗️ Tech Stack
+## 📸 Screenshots
 
-| Component | Technology |
-|-----------|-----------|
-| Desktop Framework | [Tauri 2.0](https://v2.tauri.app/) (Rust) |
-| Frontend | [Nuxt 3](https://nuxt.com/) + [Vue 3](https://vuejs.org/) |
-| UI Components | [Nuxt UI](https://ui.nuxt.com/) |
-| Styling | [Tailwind CSS 4](https://tailwindcss.com/) |
-| State Management | [Pinia](https://pinia.vuejs.org/) |
-| i18n | [@nuxtjs/i18n](https://i18n.nuxtjs.org/) |
-
-## 🛠️ Development
-
-### Requirements
-
-- Node.js ≥ 20
-- Rust ≥ 1.70
-- macOS / Windows / Linux
-
-### Local Development
-
-```bash
-# Install dependencies
-npm install
-
-# Build static frontend
-NUXT_CLI_WRAPPER=false npx nuxt generate
-
-# Start Tauri dev mode
-npx tauri dev
-```
-
-### Build for Production
+#### Client Mode
+![client](assets/public/docs/client.png)
 
-```bash
-# Build frontend
-NUXT_CLI_WRAPPER=false npx nuxt generate
+#### Client Started
+![client-start](assets/public/docs/client-start.png)
 
-# Build Tauri app
-npx tauri build
-```
+#### Hosts Source Selection
+![client-select](assets/public/docs/client-select.png)
 
-## 📁 Project Structure
+#### Custom Hosts Source
+![client-custom](assets/public/docs/client-custom.png)
 
-```
-fetch-github-hosts/
-├── components/          # Vue components
-│   ├── ClientMode.vue   # Client mode panel
-│   ├── ServerMode.vue   # Server mode panel
-│   ├── AboutPanel.vue   # About panel
-│   └── LogViewer.vue    # Log viewer
-├── composables/         # Vue composables
-│   └── useTauri.ts      # Tauri API wrappers
-├── i18n/locales/        # i18n translation files
-├── pages/index.vue      # Main page
-├── public/              # Static assets
-├── src-tauri/           # Tauri (Rust) backend
-│   ├── src/
-│   │   ├── lib.rs       # Entry + System tray
-│   │   ├── commands.rs  # Tauri commands
-│   │   ├── services.rs  # Client/Server logic
-│   │   ├── dns.rs       # DNS resolution
-│   │   ├── hosts.rs     # Hosts file operations
-│   │   ├── config.rs    # Config read/write
-│   │   └── models.rs    # Data models
-│   └── icons/           # App icons
-└── .github/workflows/   # CI/CD
-```
+#### Server Mode
+![server](assets/public/docs/server.png)
 
 ## 🌟 Star History
 
diff --git a/README_JA.md b/README_JA.md
@@ -85,74 +85,22 @@ sed -i "/# fetch-github-hosts begin/Q" /etc/hosts && curl https://hosts.gitcdn.t
 
 > 💡 crontab で定期実行すれば自動更新できます
 
-## 🏗️ 技術スタック
+## 📸 スクリーンショット
 
-| コンポーネント | 技術 |
-|-------------|------|
-| デスクトップフレームワーク | [Tauri 2.0](https://v2.tauri.app/) (Rust) |
-| フロントエンド | [Nuxt 3](https://nuxt.com/) + [Vue 3](https://vuejs.org/) |
-| UI コンポーネント | [Nuxt UI](https://ui.nuxt.com/) |
-| スタイリング | [Tailwind CSS 4](https://tailwindcss.com/) |
-| 状態管理 | [Pinia](https://pinia.vuejs.org/) |
-| 国際化 | [@nuxtjs/i18n](https://i18n.nuxtjs.org/) |
-
-## 🛠️ 開発
-
-### 必要環境
-
-- Node.js ≥ 20
-- Rust ≥ 1.70
-- macOS / Windows / Linux
-
-### ローカル開発
-
-```bash
-# 依存関係のインストール
-npm install
-
-# フロントエンドの静的ビルド
-NUXT_CLI_WRAPPER=false npx nuxt generate
-
-# Tauri 開発モードの起動
-npx tauri dev
-```
-
-### プロダクションビルド
+#### クライアントモード
+![client](assets/public/docs/client.png)
 
-```bash
-# フロントエンドのビルド
-NUXT_CLI_WRAPPER=false npx nuxt generate
+#### クライアント起動中
+![client-start](assets/public/docs/client-start.png)
 
-# Tauri アプリのビルド
-npx tauri build
-```
+#### Hosts ソース選択
+![client-select](assets/public/docs/client-select.png)
 
-## 📁 プロジェクト構造
+#### カスタム Hosts ソース
+![client-custom](assets/public/docs/client-custom.png)
 
-```
-fetch-github-hosts/
-├── components/          # Vue コンポーネント
-│   ├── ClientMode.vue   # クライアントモードパネル
-│   ├── ServerMode.vue   # サーバーモードパネル
-│   ├── AboutPanel.vue   # 概要パネル
-│   └── LogViewer.vue    # ログビューア
-├── composables/         # Vue コンポーザブル
-│   └── useTauri.ts      # Tauri API ラッパー
-├── i18n/locales/        # 翻訳ファイル
-├── pages/index.vue      # メインページ
-├── public/              # 静的アセット
-├── src-tauri/           # Tauri (Rust) バックエンド
-│   ├── src/
-│   │   ├── lib.rs       # エントリ + システムトレイ
-│   │   ├── commands.rs  # Tauri コマンド
-│   │   ├── services.rs  # クライアント/サーバーロジック
-│   │   ├── dns.rs       # DNS 解決
-│   │   ├── hosts.rs     # Hosts ファイル操作
-│   │   ├── config.rs    # 設定の読み書き
-│   │   └── models.rs    # データモデル
-│   └── icons/           # アプリアイコン
-└── .github/workflows/   # CI/CD
-```
+#### サーバーモード
+![server](assets/public/docs/server.png)
 
 ## 🌟 スター推移
 
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -95,4 +95,17 @@ body, #__nuxt {
   color: #fff;
 }
 
+/* Disable text selection globally, except log viewer */
+body {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Allow text selection only in log viewer */
+.log-selectable,
+.log-selectable * {
+  -webkit-user-select: text;
+  user-select: text;
+}
+
 
diff --git a/components/ClientMode.vue b/components/ClientMode.vue
@@ -101,6 +101,7 @@
 const { safeInvoke, safeListen } = useTauri()
 const { t } = useI18n()
 const toast = useToast()
+const { config: appConfig, loadConfig, updateClient } = useConfig()
 
 const isRunning = ref(false)
 const logs = ref<string[]>([])
@@ -153,7 +154,7 @@ async function startFetch() {
     await safeInvoke('start_client', { url, interval })
     isRunning.value = true
     addLog(t('client.remoteUrlLog', { url }))
-    await saveConfig()
+    await syncToSharedConfig()
   } catch (e: any) {
     addLog(t('client.fetchFail', { error: e.toString() }))
   }
@@ -196,39 +197,33 @@ async function flushDns() {
 
 function onAutoFetchChange(val: boolean) {
   config.autoFetch = val
-  saveConfig()
+  updateClient({
+    interval: Number(config.interval),
+    method: config.originMethod,
+    select_origin: config.selectOrigin,
+    custom_url: config.customUrl,
+    auto_fetch: config.autoFetch,
+  })
   toast.add({ title: t('client.autoFetchChanged'), color: 'info' })
 }
 
-async function saveConfig() {
-  try {
-    await safeInvoke('save_config', {
-      config: {
-        lang: 'zh-CN',
-        client: {
-          interval: Number(config.interval),
-          method: config.originMethod,
-          select_origin: config.selectOrigin,
-          custom_url: config.customUrl,
-          auto_fetch: config.autoFetch,
-        },
-        server: { interval: 60, port: 9898 },
-      },
-    })
-  } catch (_) { }
+async function syncToSharedConfig() {
+  await updateClient({
+    interval: Number(config.interval),
+    method: config.originMethod,
+    select_origin: config.selectOrigin,
+    custom_url: config.customUrl,
+    auto_fetch: config.autoFetch,
+  })
 }
 
-async function loadConfig() {
-  try {
-    const cfg: any = await safeInvoke('load_config')
-    if (cfg) {
-      config.interval = cfg.client?.interval ?? 60
-      config.originMethod = cfg.client?.method ?? 'official'
-      config.selectOrigin = cfg.client?.select_origin ?? 'FetchGithubHosts'
-      config.customUrl = cfg.client?.custom_url ?? ''
-      config.autoFetch = cfg.client?.auto_fetch ?? false
-    }
-  } catch (_) { }
+function syncFromSharedConfig() {
+  const c = appConfig.value.client
+  config.interval = c.interval ?? 60
+  config.originMethod = c.method ?? 'official'
+  config.selectOrigin = c.select_origin ?? 'FetchGithubHosts'
+  config.customUrl = c.custom_url ?? ''
+  config.autoFetch = c.auto_fetch ?? false
 }
 
 onMounted(async () => {
@@ -237,6 +232,7 @@ onMounted(async () => {
     addLog(event.payload.message)
   })
   await loadConfig()
+  syncFromSharedConfig()
   // Auto fetch on startup if enabled
   if (config.autoFetch) {
     startFetch()
diff --git a/components/LogViewer.vue b/components/LogViewer.vue
@@ -11,7 +11,7 @@
         v-if="logs.length > 0"
       />
     </div>
-    <div ref="logContainer" class="flex-1 overflow-y-auto p-3 font-mono text-xs leading-relaxed">
+    <div ref="logContainer" class="log-selectable flex-1 overflow-y-auto p-3 font-mono text-xs leading-relaxed">
       <div v-if="logs.length === 0" class="opacity-20 text-center py-8">
         {{ $t('log.empty') }}
       </div>
diff --git a/components/ServerMode.vue b/components/ServerMode.vue
diff --git a/composables/useConfig.ts b/composables/useConfig.ts
