feat: add support for custom HTML template in server mode

- Updated Cargo.toml to include `image-png` feature and added `arboard` dependency.
- Enhanced CLI to accept a custom HTML template path for server mode.
- Modified server command to load and use the custom HTML template if provided.
- Added logging functionality for client and server operations with structured log payloads.
- Implemented commands to append, load, and clear logs, as well as to export the default HTML template.
- Created a default server HTML template file for customization.
- Updated services to generate server HTML content based on the custom template or fallback to the default.

Author: Licoy

README.md

@@ -67,6 +67,7 @@
 | `--interval` | `-i` | `60` | 获取 hosts 的间隔时间（分钟） |
 | `--port` | `-p` | `9898` | 服务端模式监听端口 |
 | `--url` | `-u` | `https://hosts.gitcdn.top/hosts.txt` | 客户端模式远程 hosts 获取链接 |
+| `--template` | `-t` | 无（使用内置模板） | 服务端模式自定义 HTML 模板文件路径 |
 | `--lang` | `-l` | 自动检测 | 界面语言（`zh-CN`、`en-US`、`ja-JP`） |
 
 #### 启动客户端
@@ -96,8 +97,13 @@ fetch-github-hosts.exe -m server
 
 # 自定义端口
 ./fetch-github-hosts -m server -p 6666
+
+# 自定义 HTML 模板文件
+./fetch-github-hosts -m server -t /path/to/template.html
 ```
 
+> 💡 自定义模板支持 `{{FGH_VERSION}}`（版本号）和 `{{FGH_UPDATE_TIME}}`（最近更新时间）两个模板变量
+
 > 💡 不指定 `-m` 参数时将启动图形化界面
 
 ### 手动方式

README_EN.md

@@ -67,6 +67,7 @@ Download your platform's binary from [Releases](https://github.com/Licoy/fetch-g
 | `--interval` | `-i` | `60` | Fetch interval in minutes |
 | `--port` | `-p` | `9898` | Server mode listening port |
 | `--url` | `-u` | `https://hosts.gitcdn.top/hosts.txt` | Client mode remote hosts URL |
+| `--template` | `-t` | None (built-in) | Server mode custom HTML template file path |
 | `--lang` | `-l` | Auto-detect | Language (`zh-CN`, `en-US`, `ja-JP`) |
 
 #### Start Client
@@ -96,8 +97,13 @@ fetch-github-hosts.exe -m server
 
 # Custom port
 ./fetch-github-hosts -m server -p 6666
+
+# Custom HTML template
+./fetch-github-hosts -m server -t /path/to/template.html
 ```
 
+> 💡 Custom templates support `{{FGH_VERSION}}` (version) and `{{FGH_UPDATE_TIME}}` (last update time) template variables
+
 > 💡 Omitting the `-m` parameter launches the graphical user interface
 
 ### Manual Method

README_JA.md

@@ -67,6 +67,7 @@
 | `--interval` | `-i` | `60` | hosts 取得間隔（分） |
 | `--port` | `-p` | `9898` | サーバーモードのリスニングポート |
 | `--url` | `-u` | `https://hosts.gitcdn.top/hosts.txt` | クライアントモードのリモート hosts URL |
+| `--template` | `-t` | なし（内蔵テンプレート） | サーバーモードのカスタム HTML テンプレートファイルパス |
 | `--lang` | `-l` | 自動検出 | 言語（`zh-CN`、`en-US`、`ja-JP`） |
 
 #### クライアント起動
@@ -96,8 +97,13 @@ fetch-github-hosts.exe -m server
 
 # カスタムポート
 ./fetch-github-hosts -m server -p 6666
+
+# カスタム HTML テンプレート
+./fetch-github-hosts -m server -t /path/to/template.html
 ```
 
+> 💡 カスタムテンプレートは `{{FGH_VERSION}}`（バージョン）と `{{FGH_UPDATE_TIME}}`（最終更新日時）のテンプレート変数をサポートしています
+
 > 💡 `-m` パラメータを省略するとグラフィカルインターフェースが起動します
 
 ### 手動設定

components/ClientMode.vue

@@ -67,13 +67,17 @@
         :label="$t('common.start')"
         icon="i-heroicons-play"
         color="primary"
+        :loading="isLoading"
+        :disabled="isLoading"
         @click="startFetch"
       />
       <UButton
         v-else
         :label="$t('common.stop')"
         icon="i-heroicons-stop"
         color="error"
+        :loading="isLoading"
+        :disabled="isLoading"
         @click="stopFetch"
       />
       <UButton
@@ -93,18 +97,21 @@
     </div>
 
     <!-- Log Viewer -->
-    <LogViewer :logs="logs" class="flex-1 min-h-0" />
+    <LogViewer :logs="logs" class="flex-1 min-h-0" @clear="clearLogs" />
   </div>
 </template>
 
 <script setup lang="ts">
+import type { LogEntry } from './LogViewer.vue'
+
 const { safeInvoke, safeListen } = useTauri()
 const { t } = useI18n()
 const toast = useToast()
 const { config: appConfig, loadConfig, updateClient } = useConfig()
 
 const isRunning = ref(false)
-const logs = ref<string[]>([])
+const isLoading = ref(false)
+const logs = ref<LogEntry[]>([])
 
 const hostsOrigins: Record<string, string> = {
   FetchGithubHosts: 'https://hosts.gitcdn.top/hosts.txt',
@@ -129,9 +136,21 @@ const hostsOriginOptions = Object.keys(hostsOrigins).map(k => ({
   value: k,
 }))
 
-function addLog(msg: string) {
+function addLog(message: string, level: 'info' | 'success' | 'error' = 'info') {
   const now = new Date().toLocaleString()
-  logs.value.unshift(`[${now}] ${msg}`)
+  const entry: LogEntry = { time: now, message, level }
+  logs.value.unshift(entry)
+  // Persist log
+  safeInvoke('append_log', {
+    source: 'client',
+    entry: JSON.stringify(entry),
+  })
+}
+
+/** Translate backend i18n log payload and add to logs */
+function addBackendLog(key: string, params: Record<string, any> | null, level: string) {
+  const message = t(key, params || {})
+  addLog(message, (level as 'info' | 'success' | 'error') || 'info')
 }
 
 async function startFetch() {
@@ -150,23 +169,37 @@ async function startFetch() {
     return
   }
 
+  isLoading.value = true
   try {
     await safeInvoke('start_client', { url, interval })
     isRunning.value = true
-    addLog(t('client.remoteUrlLog', { url }))
+    isLoading.value = false
+    addLog(t('client.remoteUrlLog', { url }), 'info')
     await syncToSharedConfig()
   } catch (e: any) {
-    addLog(t('client.fetchFail', { error: e.toString() }))
+    // Privilege escalation failed or other error: keep isRunning = false (Task 7)
+    isRunning.value = false
+    isLoading.value = false
+    const msg = e?.toString() || ''
+    if (msg.includes('USER_CANCELLED')) {
+      toast.add({ title: t('common.cancelled'), color: 'warning' })
+      addLog(t('common.cancelled'), 'error')
+    } else {
+      addLog(t('client.fetchFail', { error: msg }), 'error')
+    }
   }
 }
 
 async function stopFetch() {
+  isLoading.value = true
   try {
     await safeInvoke('stop_client')
     isRunning.value = false
-    addLog(t('client.fetchStop'))
+    isLoading.value = false
+    addLog(t('client.fetchStop'), 'info')
   } catch (e: any) {
-    addLog(e.toString())
+    isLoading.value = false
+    addLog(e.toString(), 'error')
   }
 }
 
@@ -183,18 +216,23 @@ async function flushDns() {
   try {
     const result = await safeInvoke<string>('flush_dns')
     toast.add({ title: t('client.flushDnsSuccess'), color: 'success' })
-    addLog(result || t('client.flushDnsSuccess'))
+    addLog(result || t('client.flushDnsSuccess'), 'success')
   } catch (e: any) {
     const msg = e?.toString() || ''
     if (msg.includes('USER_CANCELLED')) {
       toast.add({ title: t('common.cancelled'), color: 'warning' })
     } else {
       toast.add({ title: t('client.flushDnsFail') + ': ' + msg, color: 'error' })
-      addLog(t('client.flushDnsFail') + ': ' + msg)
+      addLog(t('client.flushDnsFail') + ': ' + msg, 'error')
     }
   }
 }
 
+async function clearLogs() {
+  logs.value = []
+  await safeInvoke('clear_logs', { source: 'client' })
+}
+
 function onAutoFetchChange(val: boolean) {
   config.autoFetch = val
   updateClient({
@@ -227,12 +265,32 @@ function syncFromSharedConfig() {
 }
 
 onMounted(async () => {
-  // Listen for log events from backend
-  await safeListen<{ message: string }>('client-log', (event) => {
-    addLog(event.payload.message)
+  // Listen for log events from backend (now with i18n key + params + level)
+  await safeListen<{ key: string; params?: Record<string, any>; level: string }>('client-log', (event) => {
+    addBackendLog(event.payload.key, event.payload.params || null, event.payload.level)
   })
   await loadConfig()
   syncFromSharedConfig()
+
+  // Load persisted logs
+  try {
+    const persisted = await safeInvoke<string[]>('load_logs', { source: 'client' })
+    if (persisted && persisted.length > 0) {
+      // Load in reverse order (newest first, matching display order)
+      for (const line of [...persisted].reverse()) {
+        try {
+          const entry = JSON.parse(line)
+          if (entry.time && entry.message) {
+            logs.value.push(entry)
+          }
+        } catch {
+          // Legacy plain text log line — display as info
+          logs.value.push({ time: '', message: line, level: 'info' })
+        }
+      }
+    }
+  } catch {}
+
   // Auto fetch on startup if enabled
   if (config.autoFetch) {
     startFetch()

components/LogViewer.vue

@@ -18,18 +18,39 @@
       <div
         v-for="(log, idx) in logs"
         :key="idx"
-        class="opacity-70 py-0.5 border-b border-[var(--fgh-border)]/50 last:border-0"
+        class="py-0.5 border-b border-[var(--fgh-border)]/50 last:border-0"
+        :class="getLogClass(log)"
       >
-        {{ log }}
+        {{ getLogText(log) }}
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+export interface LogEntry {
+  time: string
+  message: string
+  level: 'info' | 'success' | 'error'
+}
+
 defineProps<{
-  logs: string[]
+  logs: (string | LogEntry)[]
 }>()
 
 defineEmits(['clear'])
+
+function getLogClass(log: string | LogEntry): string {
+  if (typeof log === 'string') return 'opacity-70'
+  switch (log.level) {
+    case 'error': return 'text-red-500'
+    case 'success': return 'text-green-500'
+    default: return 'opacity-70'
+  }
+}
+
+function getLogText(log: string | LogEntry): string {
+  if (typeof log === 'string') return log
+  return `[${log.time}] ${log.message}`
+}
 </script>