@hirohsu/user-web-feedback 2.6.0
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/LICENSE +21 -0
- package/README.md +953 -0
- package/dist/cli.cjs +95778 -0
- package/dist/index.cjs +92818 -0
- package/dist/static/app.js +385 -0
- package/dist/static/components/navbar.css +406 -0
- package/dist/static/components/navbar.html +49 -0
- package/dist/static/components/navbar.js +211 -0
- package/dist/static/dashboard.css +495 -0
- package/dist/static/dashboard.html +95 -0
- package/dist/static/dashboard.js +540 -0
- package/dist/static/favicon.svg +27 -0
- package/dist/static/index.html +541 -0
- package/dist/static/logs.html +376 -0
- package/dist/static/logs.js +442 -0
- package/dist/static/mcp-settings.html +797 -0
- package/dist/static/mcp-settings.js +884 -0
- package/dist/static/modules/app-core.js +124 -0
- package/dist/static/modules/conversation-panel.js +247 -0
- package/dist/static/modules/feedback-handler.js +1420 -0
- package/dist/static/modules/image-handler.js +155 -0
- package/dist/static/modules/log-viewer.js +296 -0
- package/dist/static/modules/mcp-manager.js +474 -0
- package/dist/static/modules/prompt-manager.js +364 -0
- package/dist/static/modules/settings-manager.js +299 -0
- package/dist/static/modules/socket-manager.js +170 -0
- package/dist/static/modules/state-manager.js +352 -0
- package/dist/static/modules/timer-controller.js +243 -0
- package/dist/static/modules/ui-helpers.js +246 -0
- package/dist/static/settings.html +355 -0
- package/dist/static/settings.js +425 -0
- package/dist/static/socket.io.min.js +7 -0
- package/dist/static/style.css +2157 -0
- package/dist/static/terminals.html +357 -0
- package/dist/static/terminals.js +321 -0
- package/package.json +91 -0
|
@@ -0,0 +1,355 @@
|
|
|
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
|
+
</select>
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
<div class="form-group">
|
|
194
|
+
<label class="form-label" for="apiKey">API 金鑰</label>
|
|
195
|
+
<div class="masked-input">
|
|
196
|
+
<input type="password" id="apiKey" class="form-input" placeholder="輸入您的 API 金鑰">
|
|
197
|
+
<button type="button" class="toggle-mask-btn" id="toggleApiKey">👁️</button>
|
|
198
|
+
</div>
|
|
199
|
+
<p class="form-help">API 金鑰將被加密儲存</p>
|
|
200
|
+
</div>
|
|
201
|
+
|
|
202
|
+
<div class="form-group">
|
|
203
|
+
<label class="form-label" for="aiModel">模型</label>
|
|
204
|
+
<input type="text" id="aiModel" class="form-input" placeholder="例如: gpt-4-turbo, claude-3-opus">
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
<div class="form-group">
|
|
208
|
+
<label class="form-label" for="systemPrompt">系統提示詞</label>
|
|
209
|
+
<textarea id="systemPrompt" class="form-textarea" placeholder="自定義系統提示詞..."></textarea>
|
|
210
|
+
<p class="form-help">留空將使用預設提示詞</p>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
<div class="form-group">
|
|
214
|
+
<label class="form-label" for="mcpToolsPrompt">MCP 工具提示詞</label>
|
|
215
|
+
<textarea id="mcpToolsPrompt" class="form-textarea" placeholder="設定 MCP 工具的使用說明..."></textarea>
|
|
216
|
+
<p class="form-help">定義 AI 如何使用 MCP 工具。{project_name} 和 {project_path} 會被替換為實際值</p>
|
|
217
|
+
</div>
|
|
218
|
+
|
|
219
|
+
<div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
|
|
220
|
+
<div class="form-group">
|
|
221
|
+
<label class="form-label" for="temperature">Temperature</label>
|
|
222
|
+
<input type="number" id="temperature" class="form-input" min="0" max="2" step="0.1" value="0.7">
|
|
223
|
+
</div>
|
|
224
|
+
<div class="form-group">
|
|
225
|
+
<label class="form-label" for="maxTokens">Max Tokens</label>
|
|
226
|
+
<input type="number" id="maxTokens" class="form-input" min="100" max="4000" step="100" value="1000">
|
|
227
|
+
</div>
|
|
228
|
+
</div>
|
|
229
|
+
|
|
230
|
+
<div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
|
|
231
|
+
<div class="form-group">
|
|
232
|
+
<label class="form-label" for="autoReplyTimerSeconds">自動回覆時間（秒）</label>
|
|
233
|
+
<input type="number" id="autoReplyTimerSeconds" class="form-input" min="30" max="600" step="10" value="300">
|
|
234
|
+
<p class="form-help">30-600 秒，預設 300 秒</p>
|
|
235
|
+
</div>
|
|
236
|
+
<div class="form-group">
|
|
237
|
+
<label class="form-label" for="maxToolRounds">AI 交談次數上限</label>
|
|
238
|
+
<input type="number" id="maxToolRounds" class="form-input" min="1" max="20" step="1" value="5">
|
|
239
|
+
<p class="form-help">1-20 次，預設 5 次</p>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
|
|
243
|
+
<div class="form-group">
|
|
244
|
+
<div class="checkbox-group">
|
|
245
|
+
<input type="checkbox" id="debugMode" />
|
|
246
|
+
<label for="debugMode">🔧 Debug 模式</label>
|
|
247
|
+
</div>
|
|
248
|
+
<p class="form-help">開啟後 Streaming Panel 不會自動關閉</p>
|
|
249
|
+
</div>
|
|
250
|
+
|
|
251
|
+
<div class="form-actions">
|
|
252
|
+
<button id="testAiBtn" class="btn btn-secondary">測試連接</button>
|
|
253
|
+
<button id="saveAiBtn" class="btn btn-primary">儲存 AI 設定</button>
|
|
254
|
+
</div>
|
|
255
|
+
</section>
|
|
256
|
+
|
|
257
|
+
<!-- CLI 模式設定 -->
|
|
258
|
+
<section class="settings-section">
|
|
259
|
+
<h2 class="section-title">
|
|
260
|
+
<span class="icon">💻</span>
|
|
261
|
+
CLI 模式設定
|
|
262
|
+
</h2>
|
|
263
|
+
|
|
264
|
+
<div class="form-group">
|
|
265
|
+
<label class="form-label">AI 回應模式</label>
|
|
266
|
+
<div class="radio-group" style="display: flex; gap: 20px; margin-top: 8px;">
|
|
267
|
+
<label class="radio-label" style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
|
268
|
+
<input type="radio" name="aiMode" value="api" id="aiModeApi" checked>
|
|
269
|
+
<span>🔌 API 模式</span>
|
|
270
|
+
</label>
|
|
271
|
+
<label class="radio-label" style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
|
272
|
+
<input type="radio" name="aiMode" value="cli" id="aiModeCli">
|
|
273
|
+
<span>💻 CLI 模式</span>
|
|
274
|
+
</label>
|
|
275
|
+
</div>
|
|
276
|
+
<p class="form-help">API 模式使用 Google Gemini API，CLI 模式使用本機安裝的 CLI 工具</p>
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
<div class="form-group" id="cliToolGroup" style="display: none;">
|
|
280
|
+
<label class="form-label" for="cliTool">CLI 工具</label>
|
|
281
|
+
<select id="cliTool" class="form-select">
|
|
282
|
+
<option value="gemini">Gemini CLI</option>
|
|
283
|
+
<option value="claude">Claude CLI</option>
|
|
284
|
+
</select>
|
|
285
|
+
<p class="form-help" id="cliToolStatus">正在檢測已安裝的 CLI 工具...</p>
|
|
286
|
+
</div>
|
|
287
|
+
|
|
288
|
+
<div class="form-group" id="cliTimeoutGroup" style="display: none;">
|
|
289
|
+
<label class="form-label" for="cliTimeout">CLI 執行超時（秒）</label>
|
|
290
|
+
<input type="number" id="cliTimeout" class="form-input" min="30" max="600" step="10" value="120">
|
|
291
|
+
<p class="form-help">30-600 秒，預設 120 秒</p>
|
|
292
|
+
</div>
|
|
293
|
+
|
|
294
|
+
<div class="form-group" id="cliFallbackGroup" style="display: none;">
|
|
295
|
+
<div class="checkbox-group">
|
|
296
|
+
<input type="checkbox" id="cliFallbackToApi" checked />
|
|
297
|
+
<label for="cliFallbackToApi">CLI 失敗時自動切換到 API 模式</label>
|
|
298
|
+
</div>
|
|
299
|
+
<p class="form-help">啟用後，當 CLI 執行失敗時會自動使用 API 模式</p>
|
|
300
|
+
</div>
|
|
301
|
+
|
|
302
|
+
<div class="form-actions">
|
|
303
|
+
<button id="detectCliBtn" class="btn btn-secondary">🔍 重新檢測 CLI 工具</button>
|
|
304
|
+
<button id="saveCliBtn" class="btn btn-primary">儲存 CLI 設定</button>
|
|
305
|
+
</div>
|
|
306
|
+
</section>
|
|
307
|
+
|
|
308
|
+
<!-- 用戶偏好 -->
|
|
309
|
+
<section class="settings-section">
|
|
310
|
+
<h2 class="section-title">
|
|
311
|
+
<span class="icon">👤</span>
|
|
312
|
+
用戶偏好
|
|
313
|
+
</h2>
|
|
314
|
+
|
|
315
|
+
<div class="form-group">
|
|
316
|
+
<div class="checkbox-group">
|
|
317
|
+
<input type="checkbox" id="autoSubmitOnTimeout" />
|
|
318
|
+
<label for="autoSubmitOnTimeout">會話超時時自動提交</label>
|
|
319
|
+
</div>
|
|
320
|
+
<p class="form-help">啟用後，當對話逾時時將自動提交空白回應</p>
|
|
321
|
+
</div>
|
|
322
|
+
|
|
323
|
+
<div class="form-group">
|
|
324
|
+
<div class="checkbox-group">
|
|
325
|
+
<input type="checkbox" id="confirmBeforeSubmit" />
|
|
326
|
+
<label for="confirmBeforeSubmit">提交前確認</label>
|
|
327
|
+
</div>
|
|
328
|
+
<p class="form-help">啟用後，提交回應前會顯示確認對話框</p>
|
|
329
|
+
</div>
|
|
330
|
+
|
|
331
|
+
<div class="form-group">
|
|
332
|
+
<label class="form-label" for="defaultLanguage">預設語言</label>
|
|
333
|
+
<select id="defaultLanguage" class="form-select">
|
|
334
|
+
<option value="zh-TW">繁體中文</option>
|
|
335
|
+
<option value="zh-CN">简体中文</option>
|
|
336
|
+
<option value="en">English</option>
|
|
337
|
+
<option value="ja">日本語</option>
|
|
338
|
+
</select>
|
|
339
|
+
</div>
|
|
340
|
+
|
|
341
|
+
<div class="form-actions">
|
|
342
|
+
<button id="savePreferencesBtn" class="btn btn-primary">儲存偏好設定</button>
|
|
343
|
+
</div>
|
|
344
|
+
</section>
|
|
345
|
+
</div>
|
|
346
|
+
|
|
347
|
+
<!-- Toast Container -->
|
|
348
|
+
<div id="toastContainer" class="toast-container"></div>
|
|
349
|
+
|
|
350
|
+
<!-- Scripts -->
|
|
351
|
+
<script src="/components/navbar.js"></script>
|
|
352
|
+
<script src="settings.js"></script>
|
|
353
|
+
</body>
|
|
354
|
+
</html>
|
|
355
|
+
|