@hirohsu/user-web-feedback 2.8.12 → 2.8.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +953 -953
- package/dist/cli.cjs +33267 -46031
- package/dist/index.cjs +35731 -48497
- package/dist/static/app.js +385 -385
- package/dist/static/components/navbar.css +406 -406
- package/dist/static/components/navbar.html +49 -49
- package/dist/static/components/navbar.js +211 -211
- package/dist/static/dashboard.css +495 -495
- package/dist/static/dashboard.html +95 -95
- package/dist/static/dashboard.js +540 -540
- package/dist/static/favicon.svg +27 -27
- package/dist/static/index.html +541 -541
- package/dist/static/logs.html +376 -376
- package/dist/static/logs.js +442 -442
- package/dist/static/mcp-settings.html +797 -797
- package/dist/static/mcp-settings.js +884 -884
- package/dist/static/modules/app-core.js +124 -124
- package/dist/static/modules/conversation-panel.js +247 -247
- package/dist/static/modules/feedback-handler.js +1420 -1420
- package/dist/static/modules/image-handler.js +155 -155
- package/dist/static/modules/log-viewer.js +296 -296
- package/dist/static/modules/mcp-manager.js +474 -474
- package/dist/static/modules/prompt-manager.js +364 -364
- package/dist/static/modules/settings-manager.js +299 -299
- package/dist/static/modules/socket-manager.js +170 -170
- package/dist/static/modules/state-manager.js +352 -352
- package/dist/static/modules/timer-controller.js +243 -243
- package/dist/static/modules/ui-helpers.js +246 -246
- package/dist/static/settings.html +426 -426
- package/dist/static/settings.js +767 -767
- package/dist/static/style.css +2156 -2156
- package/dist/static/terminals.html +357 -357
- package/dist/static/terminals.js +321 -321
- package/package.json +95 -95
|
@@ -1,426 +1,426 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="zh-TW">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>⚙️ 系統設定 - User Feedback</title>
|
|
7
|
-
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
|
8
|
-
<script src="/socket.io.min.js"></script>
|
|
9
|
-
<!-- Navbar Component -->
|
|
10
|
-
<link rel="stylesheet" href="/components/navbar.css">
|
|
11
|
-
<link rel="stylesheet" href="style.css">
|
|
12
|
-
<link rel="stylesheet" href="dashboard.css">
|
|
13
|
-
<style>
|
|
14
|
-
.settings-container {
|
|
15
|
-
max-width: 900px;
|
|
16
|
-
margin: 20px auto;
|
|
17
|
-
padding: 0 20px 40px 20px;
|
|
18
|
-
height: calc(100vh - 60px);
|
|
19
|
-
overflow-y: auto;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.page-header {
|
|
23
|
-
margin-bottom: 24px;
|
|
24
|
-
padding-bottom: 16px;
|
|
25
|
-
border-bottom: 1px solid var(--border-color);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.page-title {
|
|
29
|
-
display: flex;
|
|
30
|
-
align-items: center;
|
|
31
|
-
gap: 12px;
|
|
32
|
-
font-size: 1.75rem;
|
|
33
|
-
font-weight: 600;
|
|
34
|
-
color: var(--text-primary);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.settings-section {
|
|
38
|
-
background: var(--bg-primary);
|
|
39
|
-
border: 1px solid var(--border-color);
|
|
40
|
-
border-radius: var(--radius-md);
|
|
41
|
-
padding: 24px;
|
|
42
|
-
margin-bottom: 20px;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.section-title {
|
|
46
|
-
font-size: 1.25rem;
|
|
47
|
-
font-weight: 600;
|
|
48
|
-
color: var(--text-primary);
|
|
49
|
-
margin-bottom: 16px;
|
|
50
|
-
display: flex;
|
|
51
|
-
align-items: center;
|
|
52
|
-
gap: 8px;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.form-group {
|
|
56
|
-
margin-bottom: 20px;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.form-label {
|
|
60
|
-
display: block;
|
|
61
|
-
font-size: 14px;
|
|
62
|
-
font-weight: 500;
|
|
63
|
-
color: var(--text-primary);
|
|
64
|
-
margin-bottom: 8px;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.form-input,
|
|
68
|
-
.form-select,
|
|
69
|
-
.form-textarea {
|
|
70
|
-
width: 100%;
|
|
71
|
-
padding: 10px 12px;
|
|
72
|
-
border: 1px solid var(--border-color);
|
|
73
|
-
border-radius: var(--radius-sm);
|
|
74
|
-
font-size: 14px;
|
|
75
|
-
background: var(--bg-primary);
|
|
76
|
-
color: var(--text-primary);
|
|
77
|
-
transition: border-color 0.2s ease;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.form-input:focus,
|
|
81
|
-
.form-select:focus,
|
|
82
|
-
.form-textarea:focus {
|
|
83
|
-
outline: none;
|
|
84
|
-
border-color: var(--accent-blue);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.form-textarea {
|
|
88
|
-
min-height: 120px;
|
|
89
|
-
resize: vertical;
|
|
90
|
-
font-family: 'Courier New', monospace;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.form-help {
|
|
94
|
-
font-size: 12px;
|
|
95
|
-
color: var(--text-muted);
|
|
96
|
-
margin-top: 4px;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.form-actions {
|
|
100
|
-
display: flex;
|
|
101
|
-
gap: 12px;
|
|
102
|
-
justify-content: flex-end;
|
|
103
|
-
margin-top: 24px;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.checkbox-group {
|
|
107
|
-
display: flex;
|
|
108
|
-
align-items: center;
|
|
109
|
-
gap: 8px;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.checkbox-group input[type="checkbox"] {
|
|
113
|
-
width: 18px;
|
|
114
|
-
height: 18px;
|
|
115
|
-
cursor: pointer;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.checkbox-group label {
|
|
119
|
-
font-size: 14px;
|
|
120
|
-
color: var(--text-primary);
|
|
121
|
-
cursor: pointer;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.masked-input {
|
|
125
|
-
position: relative;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.masked-input input {
|
|
129
|
-
padding-right: 40px;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.toggle-mask-btn {
|
|
133
|
-
position: absolute;
|
|
134
|
-
right: 8px;
|
|
135
|
-
top: 50%;
|
|
136
|
-
transform: translateY(-50%);
|
|
137
|
-
background: none;
|
|
138
|
-
border: none;
|
|
139
|
-
cursor: pointer;
|
|
140
|
-
font-size: 18px;
|
|
141
|
-
padding: 4px;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.save-indicator {
|
|
145
|
-
display: inline-flex;
|
|
146
|
-
align-items: center;
|
|
147
|
-
gap: 6px;
|
|
148
|
-
padding: 6px 12px;
|
|
149
|
-
border-radius: 4px;
|
|
150
|
-
font-size: 13px;
|
|
151
|
-
font-weight: 500;
|
|
152
|
-
margin-left: auto;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.save-indicator.success {
|
|
156
|
-
background: rgba(34, 197, 94, 0.1);
|
|
157
|
-
color: #22c55e;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.save-indicator.error {
|
|
161
|
-
background: rgba(239, 68, 68, 0.1);
|
|
162
|
-
color: #ef4444;
|
|
163
|
-
}
|
|
164
|
-
</style>
|
|
165
|
-
</head>
|
|
166
|
-
<body>
|
|
167
|
-
<!-- Unified Navigation Bar (injected by navbar.js) -->
|
|
168
|
-
|
|
169
|
-
<div class="settings-container">
|
|
170
|
-
<header class="page-header">
|
|
171
|
-
<h1 class="page-title">
|
|
172
|
-
<span class="icon">⚙️</span>
|
|
173
|
-
系統設定
|
|
174
|
-
</h1>
|
|
175
|
-
</header>
|
|
176
|
-
|
|
177
|
-
<!-- AI 設定 -->
|
|
178
|
-
<section class="settings-section">
|
|
179
|
-
<h2 class="section-title">
|
|
180
|
-
<span class="icon">🤖</span>
|
|
181
|
-
AI 設定
|
|
182
|
-
</h2>
|
|
183
|
-
|
|
184
|
-
<div class="form-group">
|
|
185
|
-
<label class="form-label" for="aiProvider">AI 提供商</label>
|
|
186
|
-
<select id="aiProvider" class="form-select">
|
|
187
|
-
<option value="openai">OpenAI</option>
|
|
188
|
-
<option value="anthropic">Anthropic (Claude)</option>
|
|
189
|
-
<option value="google">Google (Gemini)</option>
|
|
190
|
-
<option value="nvidia">NVIDIA</option>
|
|
191
|
-
<option value="zai">Z.AI (Zhipu AI)</option>
|
|
192
|
-
</select>
|
|
193
|
-
</div>
|
|
194
|
-
|
|
195
|
-
<div class="form-group">
|
|
196
|
-
<label class="form-label" for="apiUrl">API Endpoint</label>
|
|
197
|
-
<input type="url" id="apiUrl" class="form-input" placeholder="API 端點 URL">
|
|
198
|
-
<p class="form-help">可自定義 API 端點，留空使用預設值</p>
|
|
199
|
-
</div>
|
|
200
|
-
|
|
201
|
-
<div class="form-group">
|
|
202
|
-
<div class="checkbox-group">
|
|
203
|
-
<input type="checkbox" id="openaiCompatible" />
|
|
204
|
-
<label for="openaiCompatible">OpenAI 相容模式</label>
|
|
205
|
-
</div>
|
|
206
|
-
<p class="form-help">啟用後使用 OpenAI API 格式（適用於自建或第三方相容服務）</p>
|
|
207
|
-
</div>
|
|
208
|
-
|
|
209
|
-
<!-- Z.AI 專用設定 -->
|
|
210
|
-
<div id="zaiExtSettings" class="form-group" style="display: none;">
|
|
211
|
-
<label class="form-label" for="zaiRegion">地區</label>
|
|
212
|
-
<select id="zaiRegion" class="form-select">
|
|
213
|
-
<option value="international">國際版 (api.z.ai)</option>
|
|
214
|
-
<option value="china">中國版 (bigmodel.cn)</option>
|
|
215
|
-
</select>
|
|
216
|
-
</div>
|
|
217
|
-
|
|
218
|
-
<div class="form-group">
|
|
219
|
-
<label class="form-label" for="apiKey">API 金鑰</label>
|
|
220
|
-
<div class="masked-input">
|
|
221
|
-
<input type="password" id="apiKey" class="form-input" placeholder="輸入您的 API 金鑰">
|
|
222
|
-
<button type="button" class="toggle-mask-btn" id="toggleApiKey">👁️</button>
|
|
223
|
-
</div>
|
|
224
|
-
<p class="form-help">API 金鑰將被加密儲存</p>
|
|
225
|
-
</div>
|
|
226
|
-
|
|
227
|
-
<div class="form-group">
|
|
228
|
-
<label class="form-label" for="aiModel">模型</label>
|
|
229
|
-
<input type="text" id="aiModel" class="form-input" placeholder="例如: gpt-4-turbo, claude-3-opus">
|
|
230
|
-
</div>
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
<div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
|
|
234
|
-
<div class="form-group">
|
|
235
|
-
<label class="form-label" for="temperature">Temperature</label>
|
|
236
|
-
<input type="number" id="temperature" class="form-input" min="0" max="2" step="0.1" value="0.7">
|
|
237
|
-
</div>
|
|
238
|
-
<div class="form-group">
|
|
239
|
-
<label class="form-label" for="maxTokens">Max Tokens</label>
|
|
240
|
-
<input type="number" id="maxTokens" class="form-input" min="100" max="4000" step="100" value="1000">
|
|
241
|
-
</div>
|
|
242
|
-
</div>
|
|
243
|
-
|
|
244
|
-
<div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
|
|
245
|
-
<div class="form-group">
|
|
246
|
-
<label class="form-label" for="autoReplyTimerSeconds">自動回覆時間（秒）</label>
|
|
247
|
-
<input type="number" id="autoReplyTimerSeconds" class="form-input" min="30" max="600" step="10" value="300">
|
|
248
|
-
<p class="form-help">30-600 秒，預設 300 秒</p>
|
|
249
|
-
</div>
|
|
250
|
-
<div class="form-group">
|
|
251
|
-
<label class="form-label" for="maxToolRounds">AI 交談次數上限</label>
|
|
252
|
-
<input type="number" id="maxToolRounds" class="form-input" min="1" max="20" step="1" value="5">
|
|
253
|
-
<p class="form-help">1-20 次，預設 5 次</p>
|
|
254
|
-
</div>
|
|
255
|
-
</div>
|
|
256
|
-
|
|
257
|
-
<div class="form-group">
|
|
258
|
-
<div class="checkbox-group">
|
|
259
|
-
<input type="checkbox" id="debugMode" />
|
|
260
|
-
<label for="debugMode">🔧 Debug 模式</label>
|
|
261
|
-
</div>
|
|
262
|
-
<p class="form-help">開啟後 Streaming Panel 不會自動關閉</p>
|
|
263
|
-
</div>
|
|
264
|
-
|
|
265
|
-
<div class="form-actions">
|
|
266
|
-
<button id="testAiBtn" class="btn btn-secondary">測試連接</button>
|
|
267
|
-
<button id="saveAiBtn" class="btn btn-primary">儲存 AI 設定</button>
|
|
268
|
-
</div>
|
|
269
|
-
</section>
|
|
270
|
-
|
|
271
|
-
<!-- CLI 模式設定 -->
|
|
272
|
-
<section class="settings-section">
|
|
273
|
-
<h2 class="section-title">
|
|
274
|
-
<span class="icon">💻</span>
|
|
275
|
-
CLI 模式設定
|
|
276
|
-
</h2>
|
|
277
|
-
|
|
278
|
-
<div class="form-group">
|
|
279
|
-
<label class="form-label">AI 回應模式</label>
|
|
280
|
-
<div class="radio-group" style="display: flex; gap: 20px; margin-top: 8px;">
|
|
281
|
-
<label class="radio-label" style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
|
282
|
-
<input type="radio" name="aiMode" value="api" id="aiModeApi" checked>
|
|
283
|
-
<span>🔌 API 模式</span>
|
|
284
|
-
</label>
|
|
285
|
-
<label class="radio-label" style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
|
286
|
-
<input type="radio" name="aiMode" value="cli" id="aiModeCli">
|
|
287
|
-
<span>💻 CLI 模式</span>
|
|
288
|
-
</label>
|
|
289
|
-
</div>
|
|
290
|
-
<p class="form-help">API 模式使用 Google Gemini API，CLI 模式使用本機安裝的 CLI 工具</p>
|
|
291
|
-
</div>
|
|
292
|
-
|
|
293
|
-
<div class="form-group" id="cliToolGroup" style="display: none;">
|
|
294
|
-
<label class="form-label" for="cliTool">CLI 工具</label>
|
|
295
|
-
<select id="cliTool" class="form-select">
|
|
296
|
-
<option value="gemini">Gemini CLI</option>
|
|
297
|
-
<option value="claude">Claude CLI</option>
|
|
298
|
-
</select>
|
|
299
|
-
<p class="form-help" id="cliToolStatus">正在檢測已安裝的 CLI 工具...</p>
|
|
300
|
-
</div>
|
|
301
|
-
|
|
302
|
-
<div class="form-group" id="cliTimeoutGroup" style="display: none;">
|
|
303
|
-
<label class="form-label" for="cliTimeout">CLI 執行超時（秒）</label>
|
|
304
|
-
<input type="number" id="cliTimeout" class="form-input" min="30" max="600" step="10" value="120">
|
|
305
|
-
<p class="form-help">30-600 秒，預設 120 秒</p>
|
|
306
|
-
</div>
|
|
307
|
-
|
|
308
|
-
<div class="form-group" id="cliFallbackGroup" style="display: none;">
|
|
309
|
-
<div class="checkbox-group">
|
|
310
|
-
<input type="checkbox" id="cliFallbackToApi" checked />
|
|
311
|
-
<label for="cliFallbackToApi">CLI 失敗時自動切換到 API 模式</label>
|
|
312
|
-
</div>
|
|
313
|
-
<p class="form-help">啟用後，當 CLI 執行失敗時會自動使用 API 模式</p>
|
|
314
|
-
</div>
|
|
315
|
-
|
|
316
|
-
<div class="form-actions">
|
|
317
|
-
<button id="detectCliBtn" class="btn btn-secondary">🔍 重新檢測 CLI 工具</button>
|
|
318
|
-
<button id="saveCliBtn" class="btn btn-primary">儲存 CLI 設定</button>
|
|
319
|
-
</div>
|
|
320
|
-
</section>
|
|
321
|
-
|
|
322
|
-
<!-- 用戶偏好 -->
|
|
323
|
-
<section class="settings-section">
|
|
324
|
-
<h2 class="section-title">
|
|
325
|
-
<span class="icon">👤</span>
|
|
326
|
-
用戶偏好
|
|
327
|
-
</h2>
|
|
328
|
-
|
|
329
|
-
<div class="form-group">
|
|
330
|
-
<div class="checkbox-group">
|
|
331
|
-
<input type="checkbox" id="autoSubmitOnTimeout" />
|
|
332
|
-
<label for="autoSubmitOnTimeout">會話超時時自動提交</label>
|
|
333
|
-
</div>
|
|
334
|
-
<p class="form-help">啟用後，當對話逾時時將自動提交空白回應</p>
|
|
335
|
-
</div>
|
|
336
|
-
|
|
337
|
-
<div class="form-group">
|
|
338
|
-
<div class="checkbox-group">
|
|
339
|
-
<input type="checkbox" id="confirmBeforeSubmit" />
|
|
340
|
-
<label for="confirmBeforeSubmit">提交前確認</label>
|
|
341
|
-
</div>
|
|
342
|
-
<p class="form-help">啟用後，提交回應前會顯示確認對話框</p>
|
|
343
|
-
</div>
|
|
344
|
-
|
|
345
|
-
<div class="form-group">
|
|
346
|
-
<label class="form-label" for="defaultLanguage">預設語言</label>
|
|
347
|
-
<select id="defaultLanguage" class="form-select">
|
|
348
|
-
<option value="zh-TW">繁體中文</option>
|
|
349
|
-
<option value="zh-CN">简体中文</option>
|
|
350
|
-
<option value="en">English</option>
|
|
351
|
-
<option value="ja">日本語</option>
|
|
352
|
-
</select>
|
|
353
|
-
</div>
|
|
354
|
-
|
|
355
|
-
<div class="form-actions">
|
|
356
|
-
<button id="savePreferencesBtn" class="btn btn-primary">儲存偏好設定</button>
|
|
357
|
-
</div>
|
|
358
|
-
</section>
|
|
359
|
-
|
|
360
|
-
<!-- Self-Probe 設定 -->
|
|
361
|
-
<section class="settings-section">
|
|
362
|
-
<h2 class="section-title">
|
|
363
|
-
<span class="icon">💓</span>
|
|
364
|
-
自我探查 (Keep-Alive)
|
|
365
|
-
</h2>
|
|
366
|
-
|
|
367
|
-
<div class="form-group">
|
|
368
|
-
<div class="checkbox-group">
|
|
369
|
-
<input type="checkbox" id="enableSelfProbe" />
|
|
370
|
-
<label for="enableSelfProbe">啟用自我探查</label>
|
|
371
|
-
</div>
|
|
372
|
-
<p class="form-help">定期檢查服務狀態，防止因閒置被系統回收</p>
|
|
373
|
-
</div>
|
|
374
|
-
|
|
375
|
-
<div class="form-group" id="selfProbeIntervalGroup">
|
|
376
|
-
<label class="form-label" for="selfProbeInterval">探查間隔（秒）</label>
|
|
377
|
-
<input type="number" id="selfProbeInterval" class="form-input"
|
|
378
|
-
min="60" max="600" step="30" value="300">
|
|
379
|
-
<p class="form-help">60-600 秒，預設 300 秒（5 分鐘）</p>
|
|
380
|
-
</div>
|
|
381
|
-
|
|
382
|
-
<div class="form-group" id="selfProbeStatus" style="display: none;">
|
|
383
|
-
<label class="form-label">狀態資訊</label>
|
|
384
|
-
<div class="status-info" style="font-size: 13px; color: var(--text-muted); padding: 8px; background: var(--bg-secondary); border-radius: var(--radius-sm);">
|
|
385
|
-
<div id="selfProbeRunning">執行狀態: --</div>
|
|
386
|
-
<div id="selfProbeCount">探查次數: --</div>
|
|
387
|
-
<div id="selfProbeLastTime">上次探查: --</div>
|
|
388
|
-
</div>
|
|
389
|
-
</div>
|
|
390
|
-
|
|
391
|
-
<div class="form-actions">
|
|
392
|
-
<button id="saveSelfProbeBtn" class="btn btn-primary">儲存設定</button>
|
|
393
|
-
</div>
|
|
394
|
-
</section>
|
|
395
|
-
|
|
396
|
-
<!-- AI 提示詞設定 -->
|
|
397
|
-
<section class="settings-section">
|
|
398
|
-
<h2 class="section-title">
|
|
399
|
-
<span class="icon">📝</span>
|
|
400
|
-
AI 提示詞設定
|
|
401
|
-
</h2>
|
|
402
|
-
<p class="form-help" style="margin-bottom: 16px;">
|
|
403
|
-
自定義 AI 回覆時使用的提示詞順序。第一次順序用於首次呼叫，第二次順序用於後續呼叫。順序為 0 表示不使用該組件。
|
|
404
|
-
</p>
|
|
405
|
-
|
|
406
|
-
<div id="promptConfigList" style="display: flex; flex-direction: column; gap: 16px;">
|
|
407
|
-
<div style="text-align: center; padding: 20px; color: var(--text-muted);">正在載入...</div>
|
|
408
|
-
</div>
|
|
409
|
-
|
|
410
|
-
<div class="form-actions" style="margin-top: 16px;">
|
|
411
|
-
<button id="resetPromptsBtn" class="btn btn-secondary">恢復預設</button>
|
|
412
|
-
<button id="savePromptsBtn" class="btn btn-primary">儲存提示詞設定</button>
|
|
413
|
-
</div>
|
|
414
|
-
</section>
|
|
415
|
-
|
|
416
|
-
</div>
|
|
417
|
-
|
|
418
|
-
<!-- Toast Container -->
|
|
419
|
-
<div id="toastContainer" class="toast-container"></div>
|
|
420
|
-
|
|
421
|
-
<!-- Scripts -->
|
|
422
|
-
<script src="/components/navbar.js"></script>
|
|
423
|
-
<script src="settings.js"></script>
|
|
424
|
-
</body>
|
|
425
|
-
</html>
|
|
426
|
-
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-TW">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>⚙️ 系統設定 - User Feedback</title>
|
|
7
|
+
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
|
8
|
+
<script src="/socket.io.min.js"></script>
|
|
9
|
+
<!-- Navbar Component -->
|
|
10
|
+
<link rel="stylesheet" href="/components/navbar.css">
|
|
11
|
+
<link rel="stylesheet" href="style.css">
|
|
12
|
+
<link rel="stylesheet" href="dashboard.css">
|
|
13
|
+
<style>
|
|
14
|
+
.settings-container {
|
|
15
|
+
max-width: 900px;
|
|
16
|
+
margin: 20px auto;
|
|
17
|
+
padding: 0 20px 40px 20px;
|
|
18
|
+
height: calc(100vh - 60px);
|
|
19
|
+
overflow-y: auto;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.page-header {
|
|
23
|
+
margin-bottom: 24px;
|
|
24
|
+
padding-bottom: 16px;
|
|
25
|
+
border-bottom: 1px solid var(--border-color);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.page-title {
|
|
29
|
+
display: flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
gap: 12px;
|
|
32
|
+
font-size: 1.75rem;
|
|
33
|
+
font-weight: 600;
|
|
34
|
+
color: var(--text-primary);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.settings-section {
|
|
38
|
+
background: var(--bg-primary);
|
|
39
|
+
border: 1px solid var(--border-color);
|
|
40
|
+
border-radius: var(--radius-md);
|
|
41
|
+
padding: 24px;
|
|
42
|
+
margin-bottom: 20px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.section-title {
|
|
46
|
+
font-size: 1.25rem;
|
|
47
|
+
font-weight: 600;
|
|
48
|
+
color: var(--text-primary);
|
|
49
|
+
margin-bottom: 16px;
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
gap: 8px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.form-group {
|
|
56
|
+
margin-bottom: 20px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.form-label {
|
|
60
|
+
display: block;
|
|
61
|
+
font-size: 14px;
|
|
62
|
+
font-weight: 500;
|
|
63
|
+
color: var(--text-primary);
|
|
64
|
+
margin-bottom: 8px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.form-input,
|
|
68
|
+
.form-select,
|
|
69
|
+
.form-textarea {
|
|
70
|
+
width: 100%;
|
|
71
|
+
padding: 10px 12px;
|
|
72
|
+
border: 1px solid var(--border-color);
|
|
73
|
+
border-radius: var(--radius-sm);
|
|
74
|
+
font-size: 14px;
|
|
75
|
+
background: var(--bg-primary);
|
|
76
|
+
color: var(--text-primary);
|
|
77
|
+
transition: border-color 0.2s ease;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.form-input:focus,
|
|
81
|
+
.form-select:focus,
|
|
82
|
+
.form-textarea:focus {
|
|
83
|
+
outline: none;
|
|
84
|
+
border-color: var(--accent-blue);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.form-textarea {
|
|
88
|
+
min-height: 120px;
|
|
89
|
+
resize: vertical;
|
|
90
|
+
font-family: 'Courier New', monospace;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.form-help {
|
|
94
|
+
font-size: 12px;
|
|
95
|
+
color: var(--text-muted);
|
|
96
|
+
margin-top: 4px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.form-actions {
|
|
100
|
+
display: flex;
|
|
101
|
+
gap: 12px;
|
|
102
|
+
justify-content: flex-end;
|
|
103
|
+
margin-top: 24px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.checkbox-group {
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
gap: 8px;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.checkbox-group input[type="checkbox"] {
|
|
113
|
+
width: 18px;
|
|
114
|
+
height: 18px;
|
|
115
|
+
cursor: pointer;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.checkbox-group label {
|
|
119
|
+
font-size: 14px;
|
|
120
|
+
color: var(--text-primary);
|
|
121
|
+
cursor: pointer;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.masked-input {
|
|
125
|
+
position: relative;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.masked-input input {
|
|
129
|
+
padding-right: 40px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.toggle-mask-btn {
|
|
133
|
+
position: absolute;
|
|
134
|
+
right: 8px;
|
|
135
|
+
top: 50%;
|
|
136
|
+
transform: translateY(-50%);
|
|
137
|
+
background: none;
|
|
138
|
+
border: none;
|
|
139
|
+
cursor: pointer;
|
|
140
|
+
font-size: 18px;
|
|
141
|
+
padding: 4px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.save-indicator {
|
|
145
|
+
display: inline-flex;
|
|
146
|
+
align-items: center;
|
|
147
|
+
gap: 6px;
|
|
148
|
+
padding: 6px 12px;
|
|
149
|
+
border-radius: 4px;
|
|
150
|
+
font-size: 13px;
|
|
151
|
+
font-weight: 500;
|
|
152
|
+
margin-left: auto;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.save-indicator.success {
|
|
156
|
+
background: rgba(34, 197, 94, 0.1);
|
|
157
|
+
color: #22c55e;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.save-indicator.error {
|
|
161
|
+
background: rgba(239, 68, 68, 0.1);
|
|
162
|
+
color: #ef4444;
|
|
163
|
+
}
|
|
164
|
+
</style>
|
|
165
|
+
</head>
|
|
166
|
+
<body>
|
|
167
|
+
<!-- Unified Navigation Bar (injected by navbar.js) -->
|
|
168
|
+
|
|
169
|
+
<div class="settings-container">
|
|
170
|
+
<header class="page-header">
|
|
171
|
+
<h1 class="page-title">
|
|
172
|
+
<span class="icon">⚙️</span>
|
|
173
|
+
系統設定
|
|
174
|
+
</h1>
|
|
175
|
+
</header>
|
|
176
|
+
|
|
177
|
+
<!-- AI 設定 -->
|
|
178
|
+
<section class="settings-section">
|
|
179
|
+
<h2 class="section-title">
|
|
180
|
+
<span class="icon">🤖</span>
|
|
181
|
+
AI 設定
|
|
182
|
+
</h2>
|
|
183
|
+
|
|
184
|
+
<div class="form-group">
|
|
185
|
+
<label class="form-label" for="aiProvider">AI 提供商</label>
|
|
186
|
+
<select id="aiProvider" class="form-select">
|
|
187
|
+
<option value="openai">OpenAI</option>
|
|
188
|
+
<option value="anthropic">Anthropic (Claude)</option>
|
|
189
|
+
<option value="google">Google (Gemini)</option>
|
|
190
|
+
<option value="nvidia">NVIDIA</option>
|
|
191
|
+
<option value="zai">Z.AI (Zhipu AI)</option>
|
|
192
|
+
</select>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<div class="form-group">
|
|
196
|
+
<label class="form-label" for="apiUrl">API Endpoint</label>
|
|
197
|
+
<input type="url" id="apiUrl" class="form-input" placeholder="API 端點 URL">
|
|
198
|
+
<p class="form-help">可自定義 API 端點，留空使用預設值</p>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
201
|
+
<div class="form-group">
|
|
202
|
+
<div class="checkbox-group">
|
|
203
|
+
<input type="checkbox" id="openaiCompatible" />
|
|
204
|
+
<label for="openaiCompatible">OpenAI 相容模式</label>
|
|
205
|
+
</div>
|
|
206
|
+
<p class="form-help">啟用後使用 OpenAI API 格式（適用於自建或第三方相容服務）</p>
|
|
207
|
+
</div>
|
|
208
|
+
|
|
209
|
+
<!-- Z.AI 專用設定 -->
|
|
210
|
+
<div id="zaiExtSettings" class="form-group" style="display: none;">
|
|
211
|
+
<label class="form-label" for="zaiRegion">地區</label>
|
|
212
|
+
<select id="zaiRegion" class="form-select">
|
|
213
|
+
<option value="international">國際版 (api.z.ai)</option>
|
|
214
|
+
<option value="china">中國版 (bigmodel.cn)</option>
|
|
215
|
+
</select>
|
|
216
|
+
</div>
|
|
217
|
+
|
|
218
|
+
<div class="form-group">
|
|
219
|
+
<label class="form-label" for="apiKey">API 金鑰</label>
|
|
220
|
+
<div class="masked-input">
|
|
221
|
+
<input type="password" id="apiKey" class="form-input" placeholder="輸入您的 API 金鑰">
|
|
222
|
+
<button type="button" class="toggle-mask-btn" id="toggleApiKey">👁️</button>
|
|
223
|
+
</div>
|
|
224
|
+
<p class="form-help">API 金鑰將被加密儲存</p>
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
<div class="form-group">
|
|
228
|
+
<label class="form-label" for="aiModel">模型</label>
|
|
229
|
+
<input type="text" id="aiModel" class="form-input" placeholder="例如: gpt-4-turbo, claude-3-opus">
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
<div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
|
|
234
|
+
<div class="form-group">
|
|
235
|
+
<label class="form-label" for="temperature">Temperature</label>
|
|
236
|
+
<input type="number" id="temperature" class="form-input" min="0" max="2" step="0.1" value="0.7">
|
|
237
|
+
</div>
|
|
238
|
+
<div class="form-group">
|
|
239
|
+
<label class="form-label" for="maxTokens">Max Tokens</label>
|
|
240
|
+
<input type="number" id="maxTokens" class="form-input" min="100" max="4000" step="100" value="1000">
|
|
241
|
+
</div>
|
|
242
|
+
</div>
|
|
243
|
+
|
|
244
|
+
<div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
|
|
245
|
+
<div class="form-group">
|
|
246
|
+
<label class="form-label" for="autoReplyTimerSeconds">自動回覆時間（秒）</label>
|
|
247
|
+
<input type="number" id="autoReplyTimerSeconds" class="form-input" min="30" max="600" step="10" value="300">
|
|
248
|
+
<p class="form-help">30-600 秒，預設 300 秒</p>
|
|
249
|
+
</div>
|
|
250
|
+
<div class="form-group">
|
|
251
|
+
<label class="form-label" for="maxToolRounds">AI 交談次數上限</label>
|
|
252
|
+
<input type="number" id="maxToolRounds" class="form-input" min="1" max="20" step="1" value="5">
|
|
253
|
+
<p class="form-help">1-20 次，預設 5 次</p>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
|
|
257
|
+
<div class="form-group">
|
|
258
|
+
<div class="checkbox-group">
|
|
259
|
+
<input type="checkbox" id="debugMode" />
|
|
260
|
+
<label for="debugMode">🔧 Debug 模式</label>
|
|
261
|
+
</div>
|
|
262
|
+
<p class="form-help">開啟後 Streaming Panel 不會自動關閉</p>
|
|
263
|
+
</div>
|
|
264
|
+
|
|
265
|
+
<div class="form-actions">
|
|
266
|
+
<button id="testAiBtn" class="btn btn-secondary">測試連接</button>
|
|
267
|
+
<button id="saveAiBtn" class="btn btn-primary">儲存 AI 設定</button>
|
|
268
|
+
</div>
|
|
269
|
+
</section>
|
|
270
|
+
|
|
271
|
+
<!-- CLI 模式設定 -->
|
|
272
|
+
<section class="settings-section">
|
|
273
|
+
<h2 class="section-title">
|
|
274
|
+
<span class="icon">💻</span>
|
|
275
|
+
CLI 模式設定
|
|
276
|
+
</h2>
|
|
277
|
+
|
|
278
|
+
<div class="form-group">
|
|
279
|
+
<label class="form-label">AI 回應模式</label>
|
|
280
|
+
<div class="radio-group" style="display: flex; gap: 20px; margin-top: 8px;">
|
|
281
|
+
<label class="radio-label" style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
|
282
|
+
<input type="radio" name="aiMode" value="api" id="aiModeApi" checked>
|
|
283
|
+
<span>🔌 API 模式</span>
|
|
284
|
+
</label>
|
|
285
|
+
<label class="radio-label" style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
|
286
|
+
<input type="radio" name="aiMode" value="cli" id="aiModeCli">
|
|
287
|
+
<span>💻 CLI 模式</span>
|
|
288
|
+
</label>
|
|
289
|
+
</div>
|
|
290
|
+
<p class="form-help">API 模式使用 Google Gemini API，CLI 模式使用本機安裝的 CLI 工具</p>
|
|
291
|
+
</div>
|
|
292
|
+
|
|
293
|
+
<div class="form-group" id="cliToolGroup" style="display: none;">
|
|
294
|
+
<label class="form-label" for="cliTool">CLI 工具</label>
|
|
295
|
+
<select id="cliTool" class="form-select">
|
|
296
|
+
<option value="gemini">Gemini CLI</option>
|
|
297
|
+
<option value="claude">Claude CLI</option>
|
|
298
|
+
</select>
|
|
299
|
+
<p class="form-help" id="cliToolStatus">正在檢測已安裝的 CLI 工具...</p>
|
|
300
|
+
</div>
|
|
301
|
+
|
|
302
|
+
<div class="form-group" id="cliTimeoutGroup" style="display: none;">
|
|
303
|
+
<label class="form-label" for="cliTimeout">CLI 執行超時（秒）</label>
|
|
304
|
+
<input type="number" id="cliTimeout" class="form-input" min="30" max="600" step="10" value="120">
|
|
305
|
+
<p class="form-help">30-600 秒，預設 120 秒</p>
|
|
306
|
+
</div>
|
|
307
|
+
|
|
308
|
+
<div class="form-group" id="cliFallbackGroup" style="display: none;">
|
|
309
|
+
<div class="checkbox-group">
|
|
310
|
+
<input type="checkbox" id="cliFallbackToApi" checked />
|
|
311
|
+
<label for="cliFallbackToApi">CLI 失敗時自動切換到 API 模式</label>
|
|
312
|
+
</div>
|
|
313
|
+
<p class="form-help">啟用後，當 CLI 執行失敗時會自動使用 API 模式</p>
|
|
314
|
+
</div>
|
|
315
|
+
|
|
316
|
+
<div class="form-actions">
|
|
317
|
+
<button id="detectCliBtn" class="btn btn-secondary">🔍 重新檢測 CLI 工具</button>
|
|
318
|
+
<button id="saveCliBtn" class="btn btn-primary">儲存 CLI 設定</button>
|
|
319
|
+
</div>
|
|
320
|
+
</section>
|
|
321
|
+
|
|
322
|
+
<!-- 用戶偏好 -->
|
|
323
|
+
<section class="settings-section">
|
|
324
|
+
<h2 class="section-title">
|
|
325
|
+
<span class="icon">👤</span>
|
|
326
|
+
用戶偏好
|
|
327
|
+
</h2>
|
|
328
|
+
|
|
329
|
+
<div class="form-group">
|
|
330
|
+
<div class="checkbox-group">
|
|
331
|
+
<input type="checkbox" id="autoSubmitOnTimeout" />
|
|
332
|
+
<label for="autoSubmitOnTimeout">會話超時時自動提交</label>
|
|
333
|
+
</div>
|
|
334
|
+
<p class="form-help">啟用後，當對話逾時時將自動提交空白回應</p>
|
|
335
|
+
</div>
|
|
336
|
+
|
|
337
|
+
<div class="form-group">
|
|
338
|
+
<div class="checkbox-group">
|
|
339
|
+
<input type="checkbox" id="confirmBeforeSubmit" />
|
|
340
|
+
<label for="confirmBeforeSubmit">提交前確認</label>
|
|
341
|
+
</div>
|
|
342
|
+
<p class="form-help">啟用後，提交回應前會顯示確認對話框</p>
|
|
343
|
+
</div>
|
|
344
|
+
|
|
345
|
+
<div class="form-group">
|
|
346
|
+
<label class="form-label" for="defaultLanguage">預設語言</label>
|
|
347
|
+
<select id="defaultLanguage" class="form-select">
|
|
348
|
+
<option value="zh-TW">繁體中文</option>
|
|
349
|
+
<option value="zh-CN">简体中文</option>
|
|
350
|
+
<option value="en">English</option>
|
|
351
|
+
<option value="ja">日本語</option>
|
|
352
|
+
</select>
|
|
353
|
+
</div>
|
|
354
|
+
|
|
355
|
+
<div class="form-actions">
|
|
356
|
+
<button id="savePreferencesBtn" class="btn btn-primary">儲存偏好設定</button>
|
|
357
|
+
</div>
|
|
358
|
+
</section>
|
|
359
|
+
|
|
360
|
+
<!-- Self-Probe 設定 -->
|
|
361
|
+
<section class="settings-section">
|
|
362
|
+
<h2 class="section-title">
|
|
363
|
+
<span class="icon">💓</span>
|
|
364
|
+
自我探查 (Keep-Alive)
|
|
365
|
+
</h2>
|
|
366
|
+
|
|
367
|
+
<div class="form-group">
|
|
368
|
+
<div class="checkbox-group">
|
|
369
|
+
<input type="checkbox" id="enableSelfProbe" />
|
|
370
|
+
<label for="enableSelfProbe">啟用自我探查</label>
|
|
371
|
+
</div>
|
|
372
|
+
<p class="form-help">定期檢查服務狀態，防止因閒置被系統回收</p>
|
|
373
|
+
</div>
|
|
374
|
+
|
|
375
|
+
<div class="form-group" id="selfProbeIntervalGroup">
|
|
376
|
+
<label class="form-label" for="selfProbeInterval">探查間隔（秒）</label>
|
|
377
|
+
<input type="number" id="selfProbeInterval" class="form-input"
|
|
378
|
+
min="60" max="600" step="30" value="300">
|
|
379
|
+
<p class="form-help">60-600 秒，預設 300 秒（5 分鐘）</p>
|
|
380
|
+
</div>
|
|
381
|
+
|
|
382
|
+
<div class="form-group" id="selfProbeStatus" style="display: none;">
|
|
383
|
+
<label class="form-label">狀態資訊</label>
|
|
384
|
+
<div class="status-info" style="font-size: 13px; color: var(--text-muted); padding: 8px; background: var(--bg-secondary); border-radius: var(--radius-sm);">
|
|
385
|
+
<div id="selfProbeRunning">執行狀態: --</div>
|
|
386
|
+
<div id="selfProbeCount">探查次數: --</div>
|
|
387
|
+
<div id="selfProbeLastTime">上次探查: --</div>
|
|
388
|
+
</div>
|
|
389
|
+
</div>
|
|
390
|
+
|
|
391
|
+
<div class="form-actions">
|
|
392
|
+
<button id="saveSelfProbeBtn" class="btn btn-primary">儲存設定</button>
|
|
393
|
+
</div>
|
|
394
|
+
</section>
|
|
395
|
+
|
|
396
|
+
<!-- AI 提示詞設定 -->
|
|
397
|
+
<section class="settings-section">
|
|
398
|
+
<h2 class="section-title">
|
|
399
|
+
<span class="icon">📝</span>
|
|
400
|
+
AI 提示詞設定
|
|
401
|
+
</h2>
|
|
402
|
+
<p class="form-help" style="margin-bottom: 16px;">
|
|
403
|
+
自定義 AI 回覆時使用的提示詞順序。第一次順序用於首次呼叫，第二次順序用於後續呼叫。順序為 0 表示不使用該組件。
|
|
404
|
+
</p>
|
|
405
|
+
|
|
406
|
+
<div id="promptConfigList" style="display: flex; flex-direction: column; gap: 16px;">
|
|
407
|
+
<div style="text-align: center; padding: 20px; color: var(--text-muted);">正在載入...</div>
|
|
408
|
+
</div>
|
|
409
|
+
|
|
410
|
+
<div class="form-actions" style="margin-top: 16px;">
|
|
411
|
+
<button id="resetPromptsBtn" class="btn btn-secondary">恢復預設</button>
|
|
412
|
+
<button id="savePromptsBtn" class="btn btn-primary">儲存提示詞設定</button>
|
|
413
|
+
</div>
|
|
414
|
+
</section>
|
|
415
|
+
|
|
416
|
+
</div>
|
|
417
|
+
|
|
418
|
+
<!-- Toast Container -->
|
|
419
|
+
<div id="toastContainer" class="toast-container"></div>
|
|
420
|
+
|
|
421
|
+
<!-- Scripts -->
|
|
422
|
+
<script src="/components/navbar.js"></script>
|
|
423
|
+
<script src="settings.js"></script>
|
|
424
|
+
</body>
|
|
425
|
+
</html>
|
|
426
|
+
|