Skip to content

Commit 25d803b

Browse files
c1921c1921
committed
新增：在路由中添加颜色系统测试页面
1 parent 58d4c16 commit 25d803b

File tree

2 files changed

+333
-0
lines changed

2 files changed

+333
-0
lines changed

‎frontend/src/pages/ColorDemo.vue‎

Lines changed: 324 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,324 @@
1+
<!--用于测试颜色的页面
2+
http://localhost:5173/colors
3+
-->
4+
<template>
5+
<button class="btn btn-soft">Default</button>
6+
<button class="btn btn-soft btn-primary">Primary</button>
7+
<button class="btn btn-soft btn-secondary">Secondary</button>
8+
<button class="btn btn-soft btn-accent">Accent</button>
9+
<button class="btn btn-soft btn-info">Info</button>
10+
<button class="btn btn-soft btn-success">Success</button>
11+
<button class="btn btn-soft btn-warning">Warning</button>
12+
<button class="btn btn-soft btn-error">Error</button>
13+
<div class="container mx-auto p-4 pb-20">
14+
<div class="card bg-base-100 shadow-xl">
15+
<div class="card-body">
16+
<h1 class="text-3xl font-bold text-base-content mb-6">FlyonUI 颜色系统示例</h1>
17+
<p class="text-base-content mb-8">本页面展示了 FlyonUI 中所有可用的颜色选项及其用途。颜色会根据当前的主题（亮色/暗色）自动适应。</p>
18+
19+
<!-- 主要颜色部分 -->
20+
<h2 class="text-2xl font-semibold text-base-content mb-4">主要颜色</h2>
21+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-10">
22+
<!-- Primary 色 -->
23+
<div class="card bg-primary shadow-md">
24+
<div class="card-body">
25+
<h3 class="card-title text-primary-content">Primary</h3>
26+
<p class="text-primary-content opacity-80">用于表示品牌或核心操作的主要颜色</p>
27+
<div class="mt-4">
28+
<span class="badge bg-primary-content text-primary mr-2">Primary Content</span>
29+
<button class="btn btn-sm btn-primary-content text-primary">按钮</button>
30+
</div>
31+
</div>
32+
</div>
33+
34+
<!-- Secondary 色 -->
35+
<div class="card bg-secondary shadow-md">
36+
<div class="card-body">
37+
<h3 class="card-title text-secondary-content">Secondary</h3>
38+
<p class="text-secondary-content opacity-80">补充主色的辅助颜色，用于支持主色</p>
39+
<div class="mt-4">
40+
<span class="badge bg-secondary-content text-secondary mr-2">Secondary Content</span>
41+
<button class="btn btn-sm btn-secondary-content text-secondary">按钮</button>
42+
</div>
43+
</div>
44+
</div>
45+
46+
<!-- Accent 色 -->
47+
<div class="card bg-accent shadow-md">
48+
<div class="card-body">
49+
<h3 class="card-title text-accent-content">Accent</h3>
50+
<p class="text-accent-content opacity-80">用于强调和突出关键UI元素的颜色</p>
51+
<div class="mt-4">
52+
<span class="badge bg-accent-content text-accent mr-2">Accent Content</span>
53+
<button class="btn btn-sm btn-accent-content text-accent">按钮</button>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
59+
<!-- 基础颜色部分 -->
60+
<h2 class="text-2xl font-semibold text-base-content mb-4">基础颜色</h2>
61+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
62+
<!-- Base 100 -->
63+
<div class="card bg-base-100 border border-base-300 shadow-sm">
64+
<div class="card-body">
65+
<h3 class="card-title text-base-content">Base 100</h3>
66+
<p class="text-base-content opacity-80">最浅的表面颜色，适用于一般背景和页面内容</p>
67+
<div class="w-full h-8 bg-base-content mt-4 rounded-md flex items-center justify-center">
68+
<span class="text-base-100">Base Content</span>
69+
</div>
70+
</div>
71+
</div>
72+
73+
<!-- Base 200 -->
74+
<div class="card bg-base-200 shadow-sm">
75+
<div class="card-body">
76+
<h3 class="card-title text-base-content">Base 200</h3>
77+
<p class="text-base-content opacity-80">稍深的底色，用于区分不同区域和元素</p>
78+
<div class="mt-4">
79+
<span class="badge bg-base-content text-base-200">Base Content</span>
80+
</div>
81+
</div>
82+
</div>
83+
84+
<!-- Base 300 -->
85+
<div class="card bg-base-300 shadow-sm">
86+
<div class="card-body">
87+
<h3 class="card-title text-base-content">Base 300</h3>
88+
<p class="text-base-content opacity-80">用于更深的元素或阴影效果，创造层次感</p>
89+
<div class="mt-4">
90+
<div class="w-full h-8 bg-base-content rounded-md flex items-center justify-center">
91+
<span class="text-base-300">Base Content</span>
92+
</div>
93+
</div>
94+
</div>
95+
</div>
96+
</div>
97+
98+
<!-- 中性颜色 -->
99+
<h2 class="text-2xl font-semibold text-base-content mb-4">中性颜色</h2>
100+
<div class="card bg-neutral shadow-md mb-10">
101+
<div class="card-body">
102+
<h3 class="card-title text-neutral-content">Neutral</h3>
103+
<p class="text-neutral-content opacity-80">中性背景色，用于不太突出的元素或表面</p>
104+
<div class="mt-4">
105+
<span class="badge bg-neutral-content text-neutral mr-2">Neutral Content</span>
106+
<button class="btn btn-sm btn-neutral-content text-neutral">按钮</button>
107+
</div>
108+
</div>
109+
</div>
110+
111+
<!-- 状态颜色部分 -->
112+
<h2 class="text-2xl font-semibold text-base-content mb-4">状态颜色</h2>
113+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
114+
<!-- Info 色 -->
115+
<div class="card bg-info shadow-md">
116+
<div class="card-body">
117+
<h3 class="card-title text-info-content">Info</h3>
118+
<p class="text-info-content opacity-80">用于信息性消息或UI中的有用提示</p>
119+
<div class="alert bg-info text-info-content mt-4 flex items-center">
120+
<span class="icon-[tabler--info-circle] size-5"></span>
121+
<span>这是一条信息提示</span>
122+
</div>
123+
<div class="mt-2">
124+
<span class="badge bg-info-content text-info mr-2">Info Content</span>
125+
</div>
126+
</div>
127+
</div>
128+
129+
<!-- Success 色 -->
130+
<div class="card bg-success shadow-md">
131+
<div class="card-body">
132+
<h3 class="card-title text-success-content">Success</h3>
133+
<p class="text-success-content opacity-80">表示成功或积极状态，常用于成功消息</p>
134+
<div class="alert bg-success text-success-content mt-4 flex items-center">
135+
<span class="icon-[tabler--circle-check] size-5"></span>
136+
<span>操作已成功完成</span>
137+
</div>
138+
<div class="mt-2">
139+
<span class="badge bg-success-content text-success mr-2">Success Content</span>
140+
</div>
141+
</div>
142+
</div>
143+
144+
<!-- Warning 色 -->
145+
<div class="card bg-warning shadow-md">
146+
<div class="card-body">
147+
<h3 class="card-title text-warning-content">Warning</h3>
148+
<p class="text-warning-content opacity-80">用于提醒用户注意潜在问题或警告</p>
149+
<div class="alert bg-warning text-warning-content mt-4 flex items-center">
150+
<span class="icon-[tabler--alert-triangle] size-5"></span>
151+
<span>请注意此警告信息</span>
152+
</div>
153+
<div class="mt-2">
154+
<span class="badge bg-warning-content text-warning mr-2">Warning Content</span>
155+
</div>
156+
</div>
157+
</div>
158+
159+
<!-- Error 色 -->
160+
<div class="card bg-error shadow-md">
161+
<div class="card-body">
162+
<h3 class="card-title text-error-content">Error</h3>
163+
<p class="text-error-content opacity-80">表示错误或危险消息，通常用于警报或破坏性操作</p>
164+
<div class="alert bg-error text-error-content mt-4 flex items-center">
165+
<span class="icon-[tabler--alert-circle] size-5"></span>
166+
<span>发生错误，请重试</span>
167+
</div>
168+
<div class="mt-2">
169+
<span class="badge bg-error-content text-error mr-2">Error Content</span>
170+
</div>
171+
</div>
172+
</div>
173+
</div>
174+
175+
<!-- 颜色应用示例 -->
176+
<h2 class="text-2xl font-semibold text-base-content mb-4">颜色应用示例</h2>
177+
<div class="card bg-base-100 border border-base-300 shadow-xl mb-10">
178+
<div class="card-body">
179+
<h3 class="card-title mb-4">表单元素</h3>
180+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
181+
<div class="form-control">
182+
<label class="label">
183+
<span class="label-text">输入框示例</span>
184+
</label>
185+
<input type="text" placeholder="Primary 输入框" class="input input-bordered input-primary" />
186+
<input type="text" placeholder="Secondary 输入框" class="input input-bordered input-secondary mt-2" />
187+
<input type="text" placeholder="Accent 输入框" class="input input-bordered input-accent mt-2" />
188+
</div>
189+
190+
<div class="form-control">
191+
<label class="label">
192+
<span class="label-text">复选框和单选框</span>
193+
</label>
194+
<div class="flex flex-wrap gap-4">
195+
<label class="flex items-center gap-2">
196+
<input type="checkbox" class="checkbox checkbox-primary" />
197+
<span>Primary</span>
198+
</label>
199+
<label class="flex items-center gap-2">
200+
<input type="checkbox" class="checkbox checkbox-secondary" />
201+
<span>Secondary</span>
202+
</label>
203+
<label class="flex items-center gap-2">
204+
<input type="checkbox" class="checkbox checkbox-accent" />
205+
<span>Accent</span>
206+
</label>
207+
</div>
208+
209+
<div class="flex flex-wrap gap-4 mt-4">
210+
<label class="flex items-center gap-2">
211+
<input type="radio" name="color-radio" class="radio radio-primary" />
212+
<span>Primary</span>
213+
</label>
214+
<label class="flex items-center gap-2">
215+
<input type="radio" name="color-radio" class="radio radio-secondary" />
216+
<span>Secondary</span>
217+
</label>
218+
<label class="flex items-center gap-2">
219+
<input type="radio" name="color-radio" class="radio radio-accent" />
220+
<span>Accent</span>
221+
</label>
222+
</div>
223+
</div>
224+
</div>
225+
226+
<div class="divider"></div>
227+
228+
<h3 class="card-title mb-4">按钮示例</h3>
229+
<div class="flex flex-wrap gap-2">
230+
<button class="btn btn-primary">Primary</button>
231+
<button class="btn btn-secondary">Secondary</button>
232+
<button class="btn btn-accent">Accent</button>
233+
<button class="btn btn-info">Info</button>
234+
<button class="btn btn-success">Success</button>
235+
<button class="btn btn-warning">Warning</button>
236+
<button class="btn btn-error">Error</button>
237+
<button class="btn btn-neutral">Neutral</button>
238+
</div>
239+
240+
<div class="mt-4 flex flex-wrap gap-2">
241+
<button class="btn btn-outline btn-primary">Primary</button>
242+
<button class="btn btn-outline btn-secondary">Secondary</button>
243+
<button class="btn btn-outline btn-accent">Accent</button>
244+
<button class="btn btn-outline btn-info">Info</button>
245+
<button class="btn btn-outline btn-success">Success</button>
246+
<button class="btn btn-outline btn-warning">Warning</button>
247+
<button class="btn btn-outline btn-error">Error</button>
248+
</div>
249+
250+
<div class="divider"></div>
251+
252+
<h3 class="card-title mb-4">徽章示例</h3>
253+
<div class="flex flex-wrap gap-2">
254+
<span class="badge badge-primary">Primary</span>
255+
<span class="badge badge-secondary">Secondary</span>
256+
<span class="badge badge-accent">Accent</span>
257+
<span class="badge badge-info">Info</span>
258+
<span class="badge badge-success">Success</span>
259+
<span class="badge badge-warning">Warning</span>
260+
<span class="badge badge-error">Error</span>
261+
<span class="badge badge-neutral">Neutral</span>
262+
</div>
263+
264+
<div class="divider"></div>
265+
266+
<h3 class="card-title mb-4">文本颜色示例</h3>
267+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
268+
<div>
269+
<p class="text-primary">这是 Primary 文本颜色</p>
270+
<p class="text-secondary">这是 Secondary 文本颜色</p>
271+
<p class="text-accent">这是 Accent 文本颜色</p>
272+
<p class="text-neutral">这是 Neutral 文本颜色</p>
273+
</div>
274+
<div>
275+
<p class="text-info">这是 Info 文本颜色</p>
276+
<p class="text-success">这是 Success 文本颜色</p>
277+
<p class="text-warning">这是 Warning 文本颜色</p>
278+
<p class="text-error">这是 Error 文本颜色</p>
279+
</div>
280+
</div>
281+
</div>
282+
</div>
283+
284+
<!-- 主题切换部分 -->
285+
<div class="card bg-base-200 shadow-md">
286+
<div class="card-body">
287+
<h3 class="card-title">主题切换</h3>
288+
<p class="mb-4">尝试切换主题，查看颜色如何自动适应</p>
289+
<div class="flex items-center gap-2">
290+
<button class="btn" data-theme="light" @click="setTheme('light')">Light Theme</button>
291+
<button class="btn" data-theme="dark" @click="setTheme('dark')">Dark Theme</button>
292+
<button class="btn" @click="setSystemTheme()">跟随系统</button>
293+
</div>
294+
</div>
295+
</div>
296+
</div>
297+
</div>
298+
</div>
299+
</template>
300+
301+
<script setup>
302+
import { onMounted } from 'vue';
303+
304+
// 设置主题
305+
const setTheme = (theme) => {
306+
document.documentElement.setAttribute('data-theme', theme);
307+
localStorage.setItem('theme', theme);
308+
};
309+
310+
// 跟随系统主题
311+
const setSystemTheme = () => {
312+
localStorage.removeItem('theme');
313+
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
314+
document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
315+
};
316+
317+
onMounted(() => {
318+
// 从 localStorage 加载主题设置
319+
const savedTheme = localStorage.getItem('theme');
320+
if (savedTheme) {
321+
document.documentElement.setAttribute('data-theme', savedTheme);
322+
}
323+
});
324+
</script>

‎frontend/src/router/index.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { createRouter, createWebHistory } from 'vue-router'
22
import ModelManager from '../pages/ModelManager.vue'
33
import PromptManager from '../pages/PromptManager.vue'
4+
import ColorDemo from '../pages/ColorDemo.vue'
45

56
// 定义路由配置
67
const routes = [
@@ -23,6 +24,14 @@ const routes = [
2324
meta: {
2425
title: '提示词管理'
2526
}
27+
},
28+
{
29+
path: '/colors',
30+
name: 'ColorDemo',
31+
component: ColorDemo,
32+
meta: {
33+
title: 'FlyonUI 颜色系统示例'
34+
}
2635
}
2736
]
2837

0 commit comments

Comments
 (0)