forked from yym68686/uni-api-web
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
254 lines (242 loc) · 12.8 KB
/
index.html
File metadata and controls
254 lines (242 loc) · 12.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>uni-api</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600&display=swap">
</head>
<body class="light-mode">
<div class="container">
<!-- 侧边栏 -->
<div id="sidebar" class="sidebar">
<div class="sidebar-header">
<h3>uni-api</h3>
<div class="sidebar-controls">
<!-- 主题切换按钮 -->
<button id="themeToggle" class="theme-toggle" title="切换主题">
<svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</button>
<button id="togglePin" class="pin-button" title="固定侧边栏">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-panel-left size-[16px]">
<rect width="18" height="18" x="3" y="3" rx="2"></rect>
<path d="M9 3v18"></path>
</svg>
</button>
</div>
</div>
<div class="sidebar-content" id="sidebarNav">
<!-- 功能按钮导航 -->
<div class="nav-item" data-page="settings">
<div class="nav-icon">⚙️</div>
<span class="nav-text">提供商管理</span>
</div>
<div class="nav-item" data-page="logs.md">
<div class="nav-icon">📋</div>
<span class="nav-text">日志</span>
</div>
</div>
</div>
<!-- 侧边栏切换按钮 -->
<div id="sidebarToggle" class="sidebar-toggle">
<span>☰</span>
</div>
<!-- 主内容区域 -->
<div id="content" class="content">
<div id="markdown-content" class="markdown-body">
<!-- 提供商配置容器 -->
<div id="api-container" style="display: none;">
<!-- 修改连接设置区域 -->
<div id="connection-settings" class="connection-settings">
<h2>连接设置</h2>
<form id="connection-form">
<div class="form-group">
<label>服务器URL</label>
<input type="text" id="api-url" placeholder="例如：http://localhost:8000"
value="http://localhost:8000" autocomplete="url">
</div>
<div class="form-group">
<label>API Key</label>
<input type="password" id="api-key" placeholder="输入API Key"
autocomplete="current-password">
</div>
<button type="submit" id="connect-button" class="save-config-button">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 3V13" stroke="currentColor" stroke-width="1.5"></path>
<path d="M3 8H13" stroke="currentColor" stroke-width="1.5"></path>
</svg>
连接服务器
</button>
</form>
</div>
<!-- 修改API配置区域，最初隐藏 -->
<div id="api-config-area" style="display: none;">
<h2>提供商配置</h2>
<div id="api-cards-container" class="api-cards-container">
<!-- API卡片将在这里动态添加 -->
</div>
<button id="add-api-button" class="add-api-button">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 3V13" stroke="currentColor" stroke-width="1.5"></path>
<path d="M3 8H13" stroke="currentColor" stroke-width="1.5"></path>
</svg>
添加新提供商
</button>
<button id="save-config-button" class="save-config-button">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M13 8L3 8" stroke="currentColor" stroke-width="1.5"></path>
<path d="M8 3L8 13" stroke="currentColor" stroke-width="1.5"></path>
<circle cx="8" cy="8" r="5" stroke="currentColor" stroke-width="1.5"></circle>
</svg>
保存设置
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 卡片模板 -->
<div class="api-card template" style="display: none;">
<div class="card-content">
<div class="api-form">
<div class="form-group">
<div class="form-group-header">
<label>提供商</label>
<div class="card-actions">
<button class="card-button duplicate-btn">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M13 5H7V11H13V5Z" stroke="currentColor" stroke-width="1.5" />
<path d="M10 3H4V9" stroke="currentColor" stroke-width="1.5" />
</svg>
</button>
<button class="card-button delete-btn">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M3 4H13" stroke="currentColor" stroke-width="1.5" />
<path d="M5 4V12H11V4" stroke="currentColor" stroke-width="1.5" />
</svg>
</button>
</div>
</div>
<input type="text" class="provider-name" placeholder="输入提供商名称">
</div>
<div class="form-group">
<label>API Keys</label>
<div class="api-keys-container">
<!-- API密钥条目将在这里动态添加 -->
</div>
<button type="button" class="add-api-key-btn">添加API密钥</button>
</div>
<div class="form-group">
<label>Base URL</label>
<input type="text" class="base-url" placeholder="输入 Base URL">
</div>
<div class="form-group">
<label>模型</label>
<div class="models-container">
<!-- 模型条目将在这里动态添加 -->
</div>
<button type="button" class="add-model-btn">添加模型</button>
</div>
<div class="advanced-settings">
<div class="advanced-settings-header" tabindex="0">
<span>高级设置</span>
<span class="toggle-icon">▼</span>
</div>
<div class="advanced-settings-content" style="display: none;">
<div class="setting-item">
<label>支持工具</label>
<input type="checkbox" class="tools-checkbox">
</div>
<div class="setting-item">
<label for="note">备注</label>
<textarea class="note" rows="3"></textarea>
</div>
<div class="setting-item">
<label for="preferences">偏好设置</label>
<textarea class="preferences" rows="4"
placeholder='{"proxy": "socks5://...","其他设置": "值"}'></textarea>
<div class="preferences-help">JSON格式，例如: {"proxy": "socks5://..."}</div>
</div>
</div>
</div>
<!-- 添加卡片折叠控制按钮 -->
<div class="card-expand-control">
<button class="expand-card-btn">显示更多</button>
<button class="collapse-card-btn" style="display: none;">折叠</button>
</div>
</div>
</div>
</div>
<!-- 模型条目模板 -->
<div class="model-entry-template" style="display: none;">
<div class="model-entry">
<div class="model-inputs">
<input type="text" class="original-model-name" placeholder="原始模型名称">
<input type="text" class="renamed-model-name" placeholder="别名（可选）">
</div>
<button class="remove-model-btn">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M3 4H13" stroke="currentColor" stroke-width="1.5" />
<path d="M5 4V12H11V4" stroke="currentColor" stroke-width="1.5" />
</svg>
</button>
</div>
</div>
<!-- API密钥条目模板 -->
<div class="api-key-entry-template" style="display: none;">
<div class="api-key-entry">
<div class="api-key-input-wrapper">
<input type="text" class="api-key" value="" placeholder="输入 API Key">
<button class="remove-api-key-btn">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M3 4H13" stroke="currentColor" stroke-width="1.5" />
<path d="M5 4V12H11V4" stroke="currentColor" stroke-width="1.5" />
</svg>
</button>
</div>
</div>
</div>
<!-- 在其他模板后面添加 -->
<div class="button-templates" style="display: none;">
<!-- 保存成功状态的按钮模板 -->
<template id="save-success-template">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M13.5 4.5L6 12L2.5 8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
保存成功
</template>
<!-- 保存按钮默认状态的模板 -->
<template id="save-default-template">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M13 8L3 8" stroke="currentColor" stroke-width="1.5"></path>
<path d="M8 3L8 13" stroke="currentColor" stroke-width="1.5"></path>
<circle cx="8" cy="8" r="5" stroke="currentColor" stroke-width="1.5"></circle>
</svg>
保存设置
</template>
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>