burncloud_client_models/models.rs
1use dioxus::prelude::*;
2
3#[component]
4pub fn ModelManagement() -> Element {
5 let mut search_term = use_signal(|| String::new());
6
7 rsx! {
8 div { class: "page-header",
9 div { class: "flex justify-between items-center",
10 div {
11 h1 { class: "text-large-title font-bold text-primary m-0",
12 "模型管理"
13 }
14 p { class: "text-secondary m-0 mt-sm",
15 "管理和部署大语言模型"
16 }
17 }
18 div { class: "flex gap-md",
19 button { class: "btn btn-secondary",
20 span { "🔄" }
21 "刷新"
22 }
23 button { class: "btn btn-secondary",
24 span { "📁" }
25 "浏览本地"
26 }
27 button { class: "btn btn-primary",
28 span { "+" }
29 "添加模型"
30 }
31 }
32 }
33 div { class: "mt-lg",
34 input {
35 class: "input",
36 style: "max-width: 400px;",
37 placeholder: "搜索模型...",
38 value: "{search_term}",
39 oninput: move |evt| search_term.set(evt.value())
40 }
41 }
42 }
43
44 div { class: "page-content",
45 // 已安装模型
46 div { class: "mb-xxxl",
47 h2 { class: "text-title font-semibold mb-lg",
48 "已安装模型 (2)"
49 }
50 div { class: "grid gap-lg",
51 style: "grid-template-columns: 1fr;",
52 // Qwen2.5-7B 模型卡片
53 div { class: "card model-card",
54 div { class: "model-header",
55 div { class: "model-title",
56 span { style: "font-size: 20px;", "🧠" }
57 div {
58 div { class: "text-subtitle font-semibold", "Qwen2.5-7B-Chat" }
59 div { class: "text-caption text-secondary", "阿里巴巴通义千问 7B 对话模型" }
60 }
61 }
62 div { class: "flex items-center gap-md",
63 span { class: "status-indicator status-running",
64 span { class: "status-dot" }
65 "运行中"
66 }
67 div { class: "model-actions",
68 button { class: "btn btn-secondary", "停止" }
69 button { class: "btn btn-subtle", "配置" }
70 button { class: "btn btn-subtle", "删除" }
71 }
72 }
73 }
74 div { class: "model-details",
75 div {
76 div { class: "metric-label", "版本" }
77 div { class: "font-medium", "v1.2" }
78 }
79 div {
80 div { class: "metric-label", "大小" }
81 div { class: "font-medium", "4.1GB" }
82 }
83 div {
84 div { class: "metric-label", "端口" }
85 div { class: "font-medium", "8001" }
86 }
87 div {
88 div { class: "metric-label", "内存使用" }
89 div { class: "font-medium", "1.2GB" }
90 }
91 div {
92 div { class: "metric-label", "评分" }
93 div { class: "font-medium", "⭐4.8" }
94 }
95 div {
96 div { class: "metric-label", "类型" }
97 div { class: "font-medium", "💬对话专用" }
98 }
99 }
100 }
101
102 // DeepSeek-V2 模型卡片
103 div { class: "card model-card",
104 div { class: "model-header",
105 div { class: "model-title",
106 span { style: "font-size: 20px;", "🤖" }
107 div {
108 div { class: "text-subtitle font-semibold", "DeepSeek-V2-Chat" }
109 div { class: "text-caption text-secondary", "DeepSeek 深度求索第二代对话模型" }
110 }
111 }
112 div { class: "flex items-center gap-md",
113 span { class: "status-indicator status-stopped",
114 span { class: "status-dot" }
115 "已停止"
116 }
117 div { class: "model-actions",
118 button { class: "btn btn-primary", "启动" }
119 button { class: "btn btn-subtle", "配置" }
120 button { class: "btn btn-subtle", "删除" }
121 }
122 }
123 }
124 div { class: "model-details",
125 div {
126 div { class: "metric-label", "版本" }
127 div { class: "font-medium", "v2.0" }
128 }
129 div {
130 div { class: "metric-label", "大小" }
131 div { class: "font-medium", "6.8GB" }
132 }
133 div {
134 div { class: "metric-label", "端口" }
135 div { class: "font-medium", "8002" }
136 }
137 div {
138 div { class: "metric-label", "内存使用" }
139 div { class: "font-medium", "--" }
140 }
141 div {
142 div { class: "metric-label", "评分" }
143 div { class: "font-medium", "⭐4.9" }
144 }
145 div {
146 div { class: "metric-label", "类型" }
147 div { class: "font-medium", "💻代码生成" }
148 }
149 }
150 }
151 }
152 }
153
154 // 可安装模型
155 div {
156 h2 { class: "text-title font-semibold mb-lg",
157 "可安装模型 (官方仓库)"
158 }
159 div { class: "grid gap-lg",
160 style: "grid-template-columns: 1fr;",
161 // Qwen2.5-14B 模型卡片
162 div { class: "card model-card",
163 div { class: "model-header",
164 div { class: "model-title",
165 span { style: "font-size: 20px;", "🧠" }
166 div {
167 div { class: "text-subtitle font-semibold", "Qwen2.5-14B-Chat" }
168 div { class: "text-caption text-secondary", "阿里巴巴通义千问 14B 对话模型" }
169 }
170 }
171 div { class: "model-actions",
172 button { class: "btn btn-primary", "下载" }
173 button { class: "btn btn-subtle", "详情" }
174 }
175 }
176 div { class: "model-details",
177 div {
178 div { class: "metric-label", "大小" }
179 div { class: "font-medium", "📊7.2GB" }
180 }
181 div {
182 div { class: "metric-label", "评分" }
183 div { class: "font-medium", "⭐4.8" }
184 }
185 div {
186 div { class: "metric-label", "类型" }
187 div { class: "font-medium", "💬对话专用" }
188 }
189 div {
190 div { class: "metric-label", "更新时间" }
191 div { class: "font-medium", "2024-12-01" }
192 }
193 }
194 }
195
196 // DeepSeek-Coder-V2 模型卡片
197 div { class: "card model-card",
198 div { class: "model-header",
199 div { class: "model-title",
200 span { style: "font-size: 20px;", "💻" }
201 div {
202 div { class: "text-subtitle font-semibold", "DeepSeek-Coder-V2" }
203 div { class: "text-caption text-secondary", "DeepSeek 专业代码生成模型" }
204 }
205 }
206 div { class: "model-actions",
207 button { class: "btn btn-primary", "下载" }
208 button { class: "btn btn-subtle", "详情" }
209 }
210 }
211 div { class: "model-details",
212 div {
213 div { class: "metric-label", "大小" }
214 div { class: "font-medium", "📊5.1GB" }
215 }
216 div {
217 div { class: "metric-label", "评分" }
218 div { class: "font-medium", "⭐4.9" }
219 }
220 div {
221 div { class: "metric-label", "类型" }
222 div { class: "font-medium", "💻代码生成" }
223 }
224 div {
225 div { class: "metric-label", "更新时间" }
226 div { class: "font-medium", "2024-11-28" }
227 }
228 }
229 }
230
231 // Qwen2.5-32B 模型卡片
232 div { class: "card model-card",
233 div { class: "model-header",
234 div { class: "model-title",
235 span { style: "font-size: 20px;", "🧠" }
236 div {
237 div { class: "text-subtitle font-semibold", "Qwen2.5-32B-Chat" }
238 div { class: "text-caption text-secondary", "阿里巴巴通义千问 32B 大型对话模型" }
239 }
240 span { class: "text-caption",
241 style: "background: linear-gradient(45deg, #ff6b6b, #feca57); color: white; padding: 2px 6px; border-radius: 4px; margin-left: 8px;",
242 "🔥最新版本"
243 }
244 }
245 div { class: "model-actions",
246 button { class: "btn btn-primary", "下载" }
247 button { class: "btn btn-subtle", "详情" }
248 }
249 }
250 div { class: "model-details",
251 div {
252 div { class: "metric-label", "大小" }
253 div { class: "font-medium", "📊18.5GB" }
254 }
255 div {
256 div { class: "metric-label", "评分" }
257 div { class: "font-medium", "⭐4.9" }
258 }
259 div {
260 div { class: "metric-label", "类型" }
261 div { class: "font-medium", "💬高级对话" }
262 }
263 div {
264 div { class: "metric-label", "更新时间" }
265 div { class: "font-medium", "2024-12-05" }
266 }
267 }
268 }
269 }
270 }
271 }
272 }
273}