add shadcn ui
This commit is contained in:
parent
1741f4da15
commit
194282e029
@ -1,11 +1,11 @@
|
|||||||
// File: frontend/app/chat/page.tsx (重构布局)
|
// File: frontend/app/chat/page.tsx (更新会话逻辑)
|
||||||
// Description: AI 聊天界面组件，包含左侧助手面板、中间聊天区、右侧会话面板
|
// Description: AI 聊天界面，实现助手关联会话、临时新对话和发送时创建会话
|
||||||
|
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import React, { useState, useRef, useEffect } from 'react';
|
import React, { useState, useRef, useEffect, useCallback } from 'react';
|
||||||
import { SendHorizontal, Loader2, PanelRightOpen, PanelRightClose, UserPlus, Settings2 } from 'lucide-react'; // 添加图标
|
import { SendHorizontal, Loader2, PanelRightOpen, PanelRightClose, UserPlus, Settings2 } from 'lucide-react';
|
||||||
import { sendChatMessage } from '@/lib/api';
|
import { sendChatMessage } from '@/lib/api'; // 假设 sendChatMessage 只需 message
|
||||||
|
|
||||||
// --- 数据接口定义 ---
|
// --- 数据接口定义 ---
|
||||||
interface Message {
|
interface Message {
|
||||||
@ -16,98 +16,188 @@ interface Message {
|
|||||||
}
|
}
|
||||||
|
|
||||||
interface ChatSession {
|
interface ChatSession {
|
||||||
id: string;
|
id: string; // 唯一 ID，例如 'session-uuid-123' 或 'temp-new-chat'
|
||||||
title: string;
|
title: string;
|
||||||
createdAt: Date;
|
createdAt: Date;
|
||||||
|
assistantId: string; // 关联的助手 ID
|
||||||
|
isTemporary?: boolean; // 标记是否为临时会话
|
||||||
}
|
}
|
||||||
|
|
||||||
// 定义助手接口 (示例)
|
|
||||||
interface Assistant {
|
interface Assistant {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
description: string;
|
description: string;
|
||||||
avatar?: string; // 可选头像 URL 或 emoji
|
avatar?: string;
|
||||||
systemPrompt: string; // 核心：系统提示
|
systemPrompt: string;
|
||||||
model: string; // 例如 'gpt-3.5-turbo', 'gemini-pro'
|
model: string;
|
||||||
temperature: number;
|
temperature: number;
|
||||||
// 可以添加 top_p, max_tokens 等其他参数
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// --- Helper Function ---
|
||||||
|
// 查找助手的最新会话 (非临时)
|
||||||
|
const findLastSession = (sessions: ChatSession[], assistantId: string): ChatSession | undefined => {
|
||||||
|
return sessions
|
||||||
|
.filter(s => s.assistantId === assistantId && !s.isTemporary)
|
||||||
|
.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())[0];
|
||||||
|
};
|
||||||
|
|
||||||
export default function ChatPage() {
|
export default function ChatPage() {
|
||||||
// --- State Variables ---
|
// --- State Variables ---
|
||||||
const [inputMessage, setInputMessage] = useState('');
|
const [inputMessage, setInputMessage] = useState('');
|
||||||
const [messages, setMessages] = useState<Message[]>([
|
const [messages, setMessages] = useState<Message[]>([]); // 初始为空，由选中助手/会话决定
|
||||||
{ id: 'init-1', text: '你好！我是默认助手，有什么可以帮你的吗？', sender: 'ai' },
|
|
||||||
]);
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [isSessionPanelOpen, setIsSessionPanelOpen] = useState(true); // 右侧会话面板状态
|
const [isSessionPanelOpen, setIsSessionPanelOpen] = useState(true);
|
||||||
|
|
||||||
// --- Mock Data ---
|
// --- Mock Data & State ---
|
||||||
// 助手列表 Mock 数据
|
|
||||||
const [assistants, setAssistants] = useState<Assistant[]>([
|
const [assistants, setAssistants] = useState<Assistant[]>([
|
||||||
{ id: 'asst-default', name: '默认助手', description: '通用聊天助手', avatar: '🤖', systemPrompt: '你是一个乐于助人的 AI 助手。', model: 'gpt-3.5-turbo', temperature: 0.7 },
|
{ id: 'asst-default', name: '默认助手', description: '通用聊天助手', avatar: '🤖', systemPrompt: '你是一个乐于助人的 AI 助手。', model: 'gpt-3.5-turbo', temperature: 0.7 },
|
||||||
{ id: 'asst-coder', name: '代码助手', description: '帮助编写和解释代码', avatar: '💻', systemPrompt: '你是一个专业的代码助手，精通多种编程语言。请提供清晰、准确的代码示例和解释。', model: 'gpt-4', temperature: 0.5 },
|
{ id: 'asst-coder', name: '代码助手', description: '帮助编写和解释代码', avatar: '💻', systemPrompt: '你是一个专业的代码助手...', model: 'gpt-4', temperature: 0.5 },
|
||||||
{ id: 'asst-writer', name: '写作助手', description: '协助进行创意写作', avatar: '✍️', systemPrompt: '你是一位富有创意的写作伙伴，擅长构思情节、润色文字。', model: 'gemini-pro', temperature: 0.9 },
|
{ id: 'asst-writer', name: '写作助手', description: '协助进行创意写作', avatar: '✍️', systemPrompt: '你是一位富有创意的写作伙伴...', model: 'gemini-pro', temperature: 0.9 },
|
||||||
]);
|
]);
|
||||||
const [currentAssistantId, setCurrentAssistantId] = useState<string>('asst-default'); // 当前选中的助手
|
const [currentAssistantId, setCurrentAssistantId] = useState<string>('asst-default');
|
||||||
|
|
||||||
// 会话列表 Mock 数据
|
// 所有会话存储在一起，通过 assistantId 过滤
|
||||||
const [sessions, setSessions] = useState<ChatSession[]>([
|
const [allSessions, setAllSessions] = useState<ChatSession[]>([
|
||||||
{id: 'session-1', title: '关于 RAG 技术的讨论', createdAt: new Date(Date.now() - 3600000)},
|
{id: 'session-1', title: '默认助手的讨论', createdAt: new Date(Date.now() - 3600000), assistantId: 'asst-default'},
|
||||||
{id: 'session-2', title: 'Python FastAPI 项目构思', createdAt: new Date(Date.now() - 7200000)},
|
{id: 'session-2', title: '代码调试记录', createdAt: new Date(Date.now() - 7200000), assistantId: 'asst-coder'},
|
||||||
{id: 'session-3', title: '如何学习 LangChain', createdAt: new Date()},
|
{id: 'session-3', title: '默认助手的学习 LangChain', createdAt: new Date(), assistantId: 'asst-default'},
|
||||||
]);
|
]);
|
||||||
const [currentSessionId, setCurrentSessionId] = useState<string>('session-3'); // 当前选中的会话
|
// 当前激活的会话 ID，可能是真实 ID 或 'temp-new-chat'
|
||||||
|
const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
|
||||||
|
|
||||||
// --- Refs ---
|
// --- Refs ---
|
||||||
const messagesEndRef = useRef<null | HTMLDivElement>(null);
|
const messagesEndRef = useRef<null | HTMLDivElement>(null);
|
||||||
|
|
||||||
// --- Effects ---
|
// --- Effects ---
|
||||||
|
// 自动滚动
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||||
}, [messages]);
|
}, [messages]);
|
||||||
|
|
||||||
|
// 根据当前助手 ID 过滤出会话列表
|
||||||
|
const currentAssistantSessions = React.useMemo(() => {
|
||||||
|
return allSessions.filter(s => s.assistantId === currentAssistantId);
|
||||||
|
}, [allSessions, currentAssistantId]);
|
||||||
|
|
||||||
|
// 当助手切换时，决定加载哪个会话
|
||||||
|
useEffect(() => {
|
||||||
|
const lastSession = findLastSession(allSessions, currentAssistantId);
|
||||||
|
if (lastSession) {
|
||||||
|
setCurrentSessionId(lastSession.id);
|
||||||
|
// TODO: 在实际应用中，这里需要调用 API 加载 lastSession.id 的历史消息
|
||||||
|
console.log(`加载助手 ${currentAssistantId} 的最后一个会话: ${lastSession.id}`);
|
||||||
|
// 模拟加载消息
|
||||||
|
const selectedAssistant = assistants.find(a => a.id === currentAssistantId);
|
||||||
|
setMessages([
|
||||||
|
{ id: `init-${lastSession.id}-1`, text: `继续与 ${selectedAssistant?.name || '助手'} 的对话: ${lastSession.title}`, sender: 'ai' },
|
||||||
|
// ... 应该加载真实历史消息
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
// 没有历史会话，进入临时新对话状态
|
||||||
|
setCurrentSessionId('temp-new-chat');
|
||||||
|
console.log(`助手 ${currentAssistantId} 没有历史会话，创建临时新对话`);
|
||||||
|
const selectedAssistant = assistants.find(a => a.id === currentAssistantId);
|
||||||
|
setMessages([
|
||||||
|
{ id: `init-temp-${currentAssistantId}`, text: `开始与 ${selectedAssistant?.name || '助手'} 的新对话吧！`, sender: 'ai' },
|
||||||
|
]);
|
||||||
|
// 不将会话添加到 allSessions 列表
|
||||||
|
}
|
||||||
|
}, [currentAssistantId, allSessions, assistants]); // 依赖助手 ID 和所有会话
|
||||||
|
|
||||||
|
|
||||||
// --- Event Handlers ---
|
// --- Event Handlers ---
|
||||||
const handleSendMessage = async (e?: React.FormEvent<HTMLFormElement>) => {
|
const handleSendMessage = async (e?: React.FormEvent<HTMLFormElement>) => {
|
||||||
e?.preventDefault();
|
e?.preventDefault();
|
||||||
const trimmedMessage = inputMessage.trim();
|
const trimmedMessage = inputMessage.trim();
|
||||||
if (!trimmedMessage || isLoading) return;
|
if (!trimmedMessage || isLoading) return;
|
||||||
setError(null);
|
setError(null);
|
||||||
|
setIsLoading(true); // 先设置加载状态
|
||||||
|
|
||||||
const userMessage: Message = {
|
const userMessage: Message = {
|
||||||
id: Date.now().toString(),
|
id: Date.now().toString(),
|
||||||
text: trimmedMessage,
|
text: trimmedMessage,
|
||||||
sender: 'user',
|
sender: 'user',
|
||||||
};
|
};
|
||||||
setMessages((prevMessages) => [...prevMessages, userMessage]);
|
|
||||||
|
let targetSessionId = currentSessionId;
|
||||||
|
let newSessionCreated = false;
|
||||||
|
|
||||||
|
// 检查是否是临时新对话的第一条消息
|
||||||
|
if (currentSessionId === 'temp-new-chat') {
|
||||||
|
console.log("发送临时新对话的第一条消息，准备创建会话...");
|
||||||
|
try {
|
||||||
|
// --- 模拟后端创建会话并生成标题 ---
|
||||||
|
// TODO: 调用后端 API (e.g., POST /api/v1/sessions)
|
||||||
|
// const { newSessionId, newTitle } = await createSessionOnBackend(currentAssistantId, trimmedMessage);
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 500)); // 模拟网络延迟
|
||||||
|
const newSessionId = `session-${Date.now()}`; // 模拟生成的新 ID
|
||||||
|
const newTitle = `关于 "${trimmedMessage.substring(0, 15)}..." 的讨论`; // 模拟 AI 生成的标题
|
||||||
|
// --- 模拟结束 ---
|
||||||
|
|
||||||
|
const newSession: ChatSession = {
|
||||||
|
id: newSessionId,
|
||||||
|
title: newTitle,
|
||||||
|
createdAt: new Date(),
|
||||||
|
assistantId: currentAssistantId,
|
||||||
|
isTemporary: false, // 不再是临时的
|
||||||
|
};
|
||||||
|
|
||||||
|
// 将新创建的会话添加到全局列表，并设为当前会话
|
||||||
|
setAllSessions(prev => [...prev, newSession]);
|
||||||
|
setCurrentSessionId(newSessionId);
|
||||||
|
targetSessionId = newSessionId; // 更新目标会话 ID
|
||||||
|
newSessionCreated = true; // 标记已创建
|
||||||
|
console.log(`新会话创建成功: ID=${newSessionId}, Title=${newTitle}`);
|
||||||
|
|
||||||
|
// 更新消息列表（先添加用户消息）
|
||||||
|
// 注意：因为 setMessages 是异步的，这里先更新，后续 AI 回复再更新
|
||||||
|
setMessages(prev => [...prev, userMessage]);
|
||||||
|
|
||||||
|
|
||||||
|
} catch (creationError: any) {
|
||||||
|
console.error("创建新会话失败:", creationError);
|
||||||
|
setError(`无法创建新会话: ${creationError.message}`);
|
||||||
|
setIsLoading(false);
|
||||||
|
return; // 创建失败则停止后续操作
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 不是新会话，直接将用户消息添加到当前消息列表
|
||||||
|
setMessages(prev => [...prev, userMessage]);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 清空输入框
|
||||||
setInputMessage('');
|
setInputMessage('');
|
||||||
setIsLoading(true);
|
|
||||||
|
|
||||||
|
// 发送消息到后端 (无论是否新创建会话，都需要发送)
|
||||||
try {
|
try {
|
||||||
// TODO: 调用后端时需要传递 currentAssistantId 和 currentSessionId
|
console.log(`发送消息到会话: ${targetSessionId}, 助手: ${currentAssistantId}`);
|
||||||
// const aiReply = await sendChatMessage(trimmedMessage, currentSessionId, currentAssistantId);
|
// TODO: 调用后端 API 时需要传递 targetSessionId 和 currentAssistantId
|
||||||
const aiReply = await sendChatMessage(trimmedMessage); // 暂时保持不变
|
// const aiReply = await sendChatMessage(trimmedMessage, targetSessionId, currentAssistantId);
|
||||||
|
const aiReply = await sendChatMessage(trimmedMessage); // 暂时保持不变
|
||||||
|
|
||||||
const aiMessage: Message = {
|
const aiMessage: Message = {
|
||||||
id: Date.now().toString() + '_ai',
|
id: Date.now().toString() + '_ai',
|
||||||
text: aiReply,
|
text: aiReply,
|
||||||
sender: 'ai',
|
sender: 'ai',
|
||||||
};
|
};
|
||||||
setMessages((prevMessages) => [...prevMessages, aiMessage]);
|
// 使用函数式更新，确保基于最新的消息列表添加回复
|
||||||
} catch (err: any) {
|
setMessages((prevMessages) => [...prevMessages, aiMessage]);
|
||||||
console.error("Failed to send message:", err);
|
|
||||||
const errorMessageText = err.message || 'An unknown error occurred.';
|
} catch (sendError: any) {
|
||||||
setError(errorMessageText);
|
console.error("发送消息失败:", sendError);
|
||||||
const errorMessage: Message = {
|
const errorMessageText = sendError.message || 'An unknown error occurred.';
|
||||||
id: Date.now().toString() + '_err',
|
setError(errorMessageText); // 更新错误状态
|
||||||
text: `错误: ${errorMessageText}`,
|
const errorMessage: Message = {
|
||||||
sender: 'ai',
|
id: Date.now().toString() + '_err',
|
||||||
isError: true,
|
text: `错误: ${errorMessageText}`,
|
||||||
};
|
sender: 'ai',
|
||||||
setMessages((prevMessages) => [...prevMessages, errorMessage]);
|
isError: true,
|
||||||
|
};
|
||||||
|
setMessages((prevMessages) => [...prevMessages, errorMessage]);
|
||||||
} finally {
|
} finally {
|
||||||
setIsLoading(false);
|
setIsLoading(false); // 无论成功失败，结束加载
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -126,17 +216,40 @@ export default function ChatPage() {
|
|||||||
setIsSessionPanelOpen(!isSessionPanelOpen);
|
setIsSessionPanelOpen(!isSessionPanelOpen);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 点击助手列表项的处理函数
|
||||||
const handleSelectAssistant = (assistantId: string) => {
|
const handleSelectAssistant = (assistantId: string) => {
|
||||||
setCurrentAssistantId(assistantId);
|
if (assistantId !== currentAssistantId) {
|
||||||
// TODO: 可能需要清空当前消息或开始新会话
|
setCurrentAssistantId(assistantId);
|
||||||
console.log("Selected assistant:", assistantId);
|
// 后续逻辑由 useEffect 处理
|
||||||
// 可以在这里加载助手的初始消息或更新聊天标题
|
}
|
||||||
const selectedAssistant = assistants.find(a => a.id === assistantId);
|
}
|
||||||
setMessages([
|
|
||||||
{ id: `init-${assistantId}`, text: `你好！我是${selectedAssistant?.name || '助手'}。${selectedAssistant?.description || ''}`, sender: 'ai' },
|
// 点击会话列表项的处理函数
|
||||||
]);
|
const handleSelectSession = (sessionId: string) => {
|
||||||
setCurrentSessionId(`new-${Date.now()}`); // 切换助手时通常开始新会话
|
if (sessionId !== currentSessionId) {
|
||||||
setSessions(prev => [...prev, {id: `new-${Date.now()}`, title: `与 ${selectedAssistant?.name} 的新对话`, createdAt: new Date()}]); // 添加新会话到列表
|
setCurrentSessionId(sessionId);
|
||||||
|
// TODO: 调用 API 加载该会话的历史消息
|
||||||
|
console.log(`切换到会话: ${sessionId}`);
|
||||||
|
// 模拟加载消息
|
||||||
|
const session = allSessions.find(s => s.id === sessionId);
|
||||||
|
const assistant = assistants.find(a => a.id === session?.assistantId);
|
||||||
|
setMessages([
|
||||||
|
{ id: `init-${sessionId}-1`, text: `继续与 ${assistant?.name || '助手'} 的对话: ${session?.title || ''}`, sender: 'ai' },
|
||||||
|
// ... 加载真实历史消息
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击新建话题按钮
|
||||||
|
const handleNewTopic = () => {
|
||||||
|
if (currentSessionId !== 'temp-new-chat') {
|
||||||
|
setCurrentSessionId('temp-new-chat');
|
||||||
|
const selectedAssistant = assistants.find(a => a.id === currentAssistantId);
|
||||||
|
setMessages([
|
||||||
|
{ id: `init-temp-${currentAssistantId}`, text: `开始与 ${selectedAssistant?.name || '助手'} 的新对话吧！`, sender: 'ai' },
|
||||||
|
]);
|
||||||
|
console.log("手动创建临时新对话");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- JSX Rendering ---
|
// --- JSX Rendering ---
|
||||||
@ -263,19 +376,26 @@ export default function ChatPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 右侧会话管理面板 */}
|
{/* 右侧会话管理面板 */}
|
||||||
<aside className={`bg-white dark:bg-gray-800 rounded-lg shadow-md pr-1 flex flex-col transition-all duration-300 ease-in-out ${isSessionPanelOpen ? 'w-64' : 'w-0 p-0 border-0 overflow-hidden opacity-0'}`}> {/* 调整关闭时的样式 */}
|
<aside className={`bg-white dark:bg-gray-800 rounded-lg shadow-md p-2 flex flex-col transition-all duration-300 ease-in-out ${isSessionPanelOpen ? 'w-64' : 'w-0 p-0 border-0 overflow-hidden opacity-0'}`}> {/* 调整关闭时的样式 */}
|
||||||
<h2 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 whitespace-nowrap items-center justify-center">话题列表</h2> {/* 改为话题 */}
|
<h2 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 whitespace-nowrap items-center justify-center">话题列表</h2> {/* 改为话题 */}
|
||||||
<button className="mb-4 w-full px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors text-sm whitespace-nowrap flex items-center justify-center gap-2">
|
<button
|
||||||
|
onClick={handleNewTopic} // 绑定新建话题事件
|
||||||
|
className="mb-4 w-full px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors text-sm whitespace-nowrap flex items-center justify-center gap-2 disabled:opacity-50"
|
||||||
|
disabled={currentSessionId === 'temp-new-chat'} // 如果已经是新话题则禁用
|
||||||
|
>
|
||||||
+ 新建话题
|
+ 新建话题
|
||||||
</button>
|
</button>
|
||||||
<div className="flex-1 overflow-y-auto space-y-4 pr-1">
|
<div className="flex-1 overflow-y-auto space-y-4 pr-1">
|
||||||
{sessions.map(session => (
|
{currentAssistantSessions
|
||||||
|
.filter(s => !s.isTemporary) // 不显示临时的
|
||||||
|
.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime()) // 按时间倒序
|
||||||
|
.map(session => (
|
||||||
<div
|
<div
|
||||||
key={session.id}
|
key={session.id}
|
||||||
onClick={() => setCurrentSessionId(session.id)}
|
onClick={() => handleSelectSession(session.id)} // 点击切换会话
|
||||||
className={`p-2 rounded-lg cursor-pointer text-sm truncate whitespace-nowrap ${
|
className={`p-2 rounded-lg cursor-pointer text-sm truncate whitespace-nowrap ${
|
||||||
currentSessionId === session.id
|
currentSessionId === session.id
|
||||||
? 'bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-400 font-medium'
|
? 'bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-400 font-medium' // 高亮当前会话
|
||||||
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||||
}`}
|
}`}
|
||||||
title={session.title}
|
title={session.title}
|
||||||
@ -283,6 +403,12 @@ export default function ChatPage() {
|
|||||||
{session.title}
|
{session.title}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
{/* 如果当前是临时会话，显示一个占位符 */}
|
||||||
|
{currentSessionId === 'temp-new-chat' && (
|
||||||
|
<div className="p-2 rounded-lg text-sm truncate whitespace-nowrap bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-400 font-medium">
|
||||||
|
新话题...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
|||||||
@ -65,7 +65,7 @@ export default function RootLayout({
|
|||||||
<item.icon className="h-6 w-6 flex-shrink-0 text-gray-600 dark:text-gray-400" />
|
<item.icon className="h-6 w-6 flex-shrink-0 text-gray-600 dark:text-gray-400" />
|
||||||
{/* Tooltip 文字标签 */}
|
{/* Tooltip 文字标签 */}
|
||||||
<span
|
<span
|
||||||
className="absolute left-full top-1/2 -translate-y-1/2 ml-3 px-2 py-1 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 delay-150 whitespace-nowrap pointer-events-none" // 使用 pointer-events-none 避免干扰悬浮
|
className="absolute left-full top-1/2 -translate-y-1/2 ml-3 px-2 py-1 bg-gray-900 dark:bg-gray-700 text-white text-xl rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 delay-150 whitespace-nowrap pointer-events-none" // 使用 pointer-events-none 避免干扰悬浮
|
||||||
>
|
>
|
||||||
{item.name}
|
{item.name}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
21
frontend/components.json
Normal file
21
frontend/components.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": true,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "tailwind.config.ts",
|
||||||
|
"css": "styles/globals.css",
|
||||||
|
"baseColor": "zinc",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide"
|
||||||
|
}
|
||||||
59
frontend/components/ui/button.tsx
Normal file
59
frontend/components/ui/button.tsx
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||||
|
ghost:
|
||||||
|
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||||
|
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||||
|
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||||
|
icon: "size-9",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function Button({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
size,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "button"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="button"
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
135
frontend/components/ui/dialog.tsx
Normal file
135
frontend/components/ui/dialog.tsx
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||||
|
import { XIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Dialog({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||||
|
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||||
|
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||||
|
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogClose({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||||
|
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
data-slot="dialog-overlay"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<DialogPortal data-slot="dialog-portal">
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
data-slot="dialog-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
|
||||||
|
<XIcon />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-header"
|
||||||
|
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-footer"
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
data-slot="dialog-title"
|
||||||
|
className={cn("text-lg leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
data-slot="dialog-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogPortal,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
}
|
||||||
167
frontend/components/ui/form.tsx
Normal file
167
frontend/components/ui/form.tsx
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import {
|
||||||
|
Controller,
|
||||||
|
FormProvider,
|
||||||
|
useFormContext,
|
||||||
|
useFormState,
|
||||||
|
type ControllerProps,
|
||||||
|
type FieldPath,
|
||||||
|
type FieldValues,
|
||||||
|
} from "react-hook-form"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Label } from "@/components/ui/label"
|
||||||
|
|
||||||
|
const Form = FormProvider
|
||||||
|
|
||||||
|
type FormFieldContextValue<
|
||||||
|
TFieldValues extends FieldValues = FieldValues,
|
||||||
|
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||||
|
> = {
|
||||||
|
name: TName
|
||||||
|
}
|
||||||
|
|
||||||
|
const FormFieldContext = React.createContext<FormFieldContextValue>(
|
||||||
|
{} as FormFieldContextValue
|
||||||
|
)
|
||||||
|
|
||||||
|
const FormField = <
|
||||||
|
TFieldValues extends FieldValues = FieldValues,
|
||||||
|
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||||
|
>({
|
||||||
|
...props
|
||||||
|
}: ControllerProps<TFieldValues, TName>) => {
|
||||||
|
return (
|
||||||
|
<FormFieldContext.Provider value={{ name: props.name }}>
|
||||||
|
<Controller {...props} />
|
||||||
|
</FormFieldContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const useFormField = () => {
|
||||||
|
const fieldContext = React.useContext(FormFieldContext)
|
||||||
|
const itemContext = React.useContext(FormItemContext)
|
||||||
|
const { getFieldState } = useFormContext()
|
||||||
|
const formState = useFormState({ name: fieldContext.name })
|
||||||
|
const fieldState = getFieldState(fieldContext.name, formState)
|
||||||
|
|
||||||
|
if (!fieldContext) {
|
||||||
|
throw new Error("useFormField should be used within <FormField>")
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id } = itemContext
|
||||||
|
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
name: fieldContext.name,
|
||||||
|
formItemId: `${id}-form-item`,
|
||||||
|
formDescriptionId: `${id}-form-item-description`,
|
||||||
|
formMessageId: `${id}-form-item-message`,
|
||||||
|
...fieldState,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
type FormItemContextValue = {
|
||||||
|
id: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const FormItemContext = React.createContext<FormItemContextValue>(
|
||||||
|
{} as FormItemContextValue
|
||||||
|
)
|
||||||
|
|
||||||
|
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
const id = React.useId()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormItemContext.Provider value={{ id }}>
|
||||||
|
<div
|
||||||
|
data-slot="form-item"
|
||||||
|
className={cn("grid gap-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</FormItemContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function FormLabel({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||||
|
const { error, formItemId } = useFormField()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Label
|
||||||
|
data-slot="form-label"
|
||||||
|
data-error={!!error}
|
||||||
|
className={cn("data-[error=true]:text-destructive", className)}
|
||||||
|
htmlFor={formItemId}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
|
||||||
|
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Slot
|
||||||
|
data-slot="form-control"
|
||||||
|
id={formItemId}
|
||||||
|
aria-describedby={
|
||||||
|
!error
|
||||||
|
? `${formDescriptionId}`
|
||||||
|
: `${formDescriptionId} ${formMessageId}`
|
||||||
|
}
|
||||||
|
aria-invalid={!!error}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||||
|
const { formDescriptionId } = useFormField()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<p
|
||||||
|
data-slot="form-description"
|
||||||
|
id={formDescriptionId}
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
|
||||||
|
const { error, formMessageId } = useFormField()
|
||||||
|
const body = error ? String(error?.message ?? "") : props.children
|
||||||
|
|
||||||
|
if (!body) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<p
|
||||||
|
data-slot="form-message"
|
||||||
|
id={formMessageId}
|
||||||
|
className={cn("text-destructive text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{body}
|
||||||
|
</p>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
useFormField,
|
||||||
|
Form,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormMessage,
|
||||||
|
FormField,
|
||||||
|
}
|
||||||
21
frontend/components/ui/input.tsx
Normal file
21
frontend/components/ui/input.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
data-slot="input"
|
||||||
|
className={cn(
|
||||||
|
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||||
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Input }
|
||||||
24
frontend/components/ui/label.tsx
Normal file
24
frontend/components/ui/label.tsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Label({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
data-slot="label"
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Label }
|
||||||
185
frontend/components/ui/select.tsx
Normal file
185
frontend/components/ui/select.tsx
Normal file
@ -0,0 +1,185 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||||
|
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Select({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||||
|
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||||
|
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectValue({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||||
|
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectTrigger({
|
||||||
|
className,
|
||||||
|
size = "default",
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||||
|
size?: "sm" | "default"
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Trigger
|
||||||
|
data-slot="select-trigger"
|
||||||
|
data-size={size}
|
||||||
|
className={cn(
|
||||||
|
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SelectPrimitive.Icon asChild>
|
||||||
|
<ChevronDownIcon className="size-4 opacity-50" />
|
||||||
|
</SelectPrimitive.Icon>
|
||||||
|
</SelectPrimitive.Trigger>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
position = "popper",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Portal>
|
||||||
|
<SelectPrimitive.Content
|
||||||
|
data-slot="select-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||||
|
position === "popper" &&
|
||||||
|
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
position={position}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SelectScrollUpButton />
|
||||||
|
<SelectPrimitive.Viewport
|
||||||
|
className={cn(
|
||||||
|
"p-1",
|
||||||
|
position === "popper" &&
|
||||||
|
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</SelectPrimitive.Viewport>
|
||||||
|
<SelectScrollDownButton />
|
||||||
|
</SelectPrimitive.Content>
|
||||||
|
</SelectPrimitive.Portal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectLabel({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Label
|
||||||
|
data-slot="select-label"
|
||||||
|
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Item
|
||||||
|
data-slot="select-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute right-2 flex size-3.5 items-center justify-center">
|
||||||
|
<SelectPrimitive.ItemIndicator>
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||||
|
</SelectPrimitive.Item>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Separator
|
||||||
|
data-slot="select-separator"
|
||||||
|
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectScrollUpButton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.ScrollUpButton
|
||||||
|
data-slot="select-scroll-up-button"
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronUpIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ScrollUpButton>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectScrollDownButton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.ScrollDownButton
|
||||||
|
data-slot="select-scroll-down-button"
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronDownIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ScrollDownButton>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectGroup,
|
||||||
|
SelectItem,
|
||||||
|
SelectLabel,
|
||||||
|
SelectScrollDownButton,
|
||||||
|
SelectScrollUpButton,
|
||||||
|
SelectSeparator,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
}
|
||||||
63
frontend/components/ui/slider.tsx
Normal file
63
frontend/components/ui/slider.tsx
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as SliderPrimitive from "@radix-ui/react-slider"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Slider({
|
||||||
|
className,
|
||||||
|
defaultValue,
|
||||||
|
value,
|
||||||
|
min = 0,
|
||||||
|
max = 100,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
|
||||||
|
const _values = React.useMemo(
|
||||||
|
() =>
|
||||||
|
Array.isArray(value)
|
||||||
|
? value
|
||||||
|
: Array.isArray(defaultValue)
|
||||||
|
? defaultValue
|
||||||
|
: [min, max],
|
||||||
|
[value, defaultValue, min, max]
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SliderPrimitive.Root
|
||||||
|
data-slot="slider"
|
||||||
|
defaultValue={defaultValue}
|
||||||
|
value={value}
|
||||||
|
min={min}
|
||||||
|
max={max}
|
||||||
|
className={cn(
|
||||||
|
"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SliderPrimitive.Track
|
||||||
|
data-slot="slider-track"
|
||||||
|
className={cn(
|
||||||
|
"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<SliderPrimitive.Range
|
||||||
|
data-slot="slider-range"
|
||||||
|
className={cn(
|
||||||
|
"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SliderPrimitive.Track>
|
||||||
|
{Array.from({ length: _values.length }, (_, index) => (
|
||||||
|
<SliderPrimitive.Thumb
|
||||||
|
data-slot="slider-thumb"
|
||||||
|
key={index}
|
||||||
|
className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</SliderPrimitive.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Slider }
|
||||||
25
frontend/components/ui/sonner.tsx
Normal file
25
frontend/components/ui/sonner.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useTheme } from "next-themes"
|
||||||
|
import { Toaster as Sonner, ToasterProps } from "sonner"
|
||||||
|
|
||||||
|
const Toaster = ({ ...props }: ToasterProps) => {
|
||||||
|
const { theme = "system" } = useTheme()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sonner
|
||||||
|
theme={theme as ToasterProps["theme"]}
|
||||||
|
className="toaster group"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--normal-bg": "var(--popover)",
|
||||||
|
"--normal-text": "var(--popover-foreground)",
|
||||||
|
"--normal-border": "var(--border)",
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Toaster }
|
||||||
18
frontend/components/ui/textarea.tsx
Normal file
18
frontend/components/ui/textarea.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||||
|
return (
|
||||||
|
<textarea
|
||||||
|
data-slot="textarea"
|
||||||
|
className={cn(
|
||||||
|
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Textarea }
|
||||||
6
frontend/lib/utils.ts
Normal file
6
frontend/lib/utils.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import { clsx, type ClassValue } from "clsx"
|
||||||
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
@ -9,11 +9,24 @@
|
|||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@hookform/resolvers": "^5.0.1",
|
||||||
|
"@radix-ui/react-dialog": "^1.1.11",
|
||||||
|
"@radix-ui/react-label": "^2.1.4",
|
||||||
|
"@radix-ui/react-select": "^2.2.2",
|
||||||
|
"@radix-ui/react-slider": "^1.3.2",
|
||||||
|
"@radix-ui/react-slot": "^1.2.0",
|
||||||
"axios": "^1.9.0",
|
"axios": "^1.9.0",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
"lucide-react": "^0.503.0",
|
"lucide-react": "^0.503.0",
|
||||||
"next": "15.3.1",
|
"next": "15.3.1",
|
||||||
|
"next-themes": "^0.4.6",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0"
|
"react-dom": "^19.0.0",
|
||||||
|
"react-hook-form": "^7.56.1",
|
||||||
|
"sonner": "^2.0.3",
|
||||||
|
"tailwind-merge": "^3.2.0",
|
||||||
|
"zod": "^3.24.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/eslintrc": "^3",
|
"@eslint/eslintrc": "^3",
|
||||||
@ -26,6 +39,7 @@
|
|||||||
"eslint-config-next": "15.3.1",
|
"eslint-config-next": "15.3.1",
|
||||||
"postcss": "^8.5.3",
|
"postcss": "^8.5.3",
|
||||||
"tailwindcss": "^4",
|
"tailwindcss": "^4",
|
||||||
|
"tw-animate-css": "^1.2.8",
|
||||||
"typescript": "^5"
|
"typescript": "^5"
|
||||||
},
|
},
|
||||||
"packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
|
"packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
|
||||||
|
|||||||
875
frontend/pnpm-lock.yaml
generated
875
frontend/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,220 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
@import "tw-animate-css";
|
||||||
|
|
||||||
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
|
||||||
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
|
|
||||||
|
--color-background: var(--background);
|
||||||
|
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
|
||||||
|
--color-card: var(--card);
|
||||||
|
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
|
||||||
|
--color-border: var(--border);
|
||||||
|
|
||||||
|
--color-input: var(--input);
|
||||||
|
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
|
||||||
|
--color-chart-1: var(--chart-1);
|
||||||
|
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
|
||||||
|
--radius: 0.625rem;
|
||||||
|
|
||||||
|
--background: oklch(1 0 0);
|
||||||
|
|
||||||
|
--foreground: oklch(0.141 0.005 285.823);
|
||||||
|
|
||||||
|
--card: oklch(1 0 0);
|
||||||
|
|
||||||
|
--card-foreground: oklch(0.141 0.005 285.823);
|
||||||
|
|
||||||
|
--popover: oklch(1 0 0);
|
||||||
|
|
||||||
|
--popover-foreground: oklch(0.141 0.005 285.823);
|
||||||
|
|
||||||
|
--primary: oklch(0.21 0.006 285.885);
|
||||||
|
|
||||||
|
--primary-foreground: oklch(0.985 0 0);
|
||||||
|
|
||||||
|
--secondary: oklch(0.967 0.001 286.375);
|
||||||
|
|
||||||
|
--secondary-foreground: oklch(0.21 0.006 285.885);
|
||||||
|
|
||||||
|
--muted: oklch(0.967 0.001 286.375);
|
||||||
|
|
||||||
|
--muted-foreground: oklch(0.552 0.016 285.938);
|
||||||
|
|
||||||
|
--accent: oklch(0.967 0.001 286.375);
|
||||||
|
|
||||||
|
--accent-foreground: oklch(0.21 0.006 285.885);
|
||||||
|
|
||||||
|
--destructive: oklch(0.577 0.245 27.325);
|
||||||
|
|
||||||
|
--border: oklch(0.92 0.004 286.32);
|
||||||
|
|
||||||
|
--input: oklch(0.92 0.004 286.32);
|
||||||
|
|
||||||
|
--ring: oklch(0.705 0.015 286.067);
|
||||||
|
|
||||||
|
--chart-1: oklch(0.646 0.222 41.116);
|
||||||
|
|
||||||
|
--chart-2: oklch(0.6 0.118 184.704);
|
||||||
|
|
||||||
|
--chart-3: oklch(0.398 0.07 227.392);
|
||||||
|
|
||||||
|
--chart-4: oklch(0.828 0.189 84.429);
|
||||||
|
|
||||||
|
--chart-5: oklch(0.769 0.188 70.08);
|
||||||
|
|
||||||
|
--sidebar: oklch(0.985 0 0);
|
||||||
|
|
||||||
|
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
||||||
|
|
||||||
|
--sidebar-primary: oklch(0.21 0.006 285.885);
|
||||||
|
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
|
||||||
|
--sidebar-accent: oklch(0.967 0.001 286.375);
|
||||||
|
|
||||||
|
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||||||
|
|
||||||
|
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||||
|
|
||||||
|
--sidebar-ring: oklch(0.705 0.015 286.067);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
|
||||||
|
--background: oklch(0.141 0.005 285.823);
|
||||||
|
|
||||||
|
--foreground: oklch(0.985 0 0);
|
||||||
|
|
||||||
|
--card: oklch(0.21 0.006 285.885);
|
||||||
|
|
||||||
|
--card-foreground: oklch(0.985 0 0);
|
||||||
|
|
||||||
|
--popover: oklch(0.21 0.006 285.885);
|
||||||
|
|
||||||
|
--popover-foreground: oklch(0.985 0 0);
|
||||||
|
|
||||||
|
--primary: oklch(0.92 0.004 286.32);
|
||||||
|
|
||||||
|
--primary-foreground: oklch(0.21 0.006 285.885);
|
||||||
|
|
||||||
|
--secondary: oklch(0.274 0.006 286.033);
|
||||||
|
|
||||||
|
--secondary-foreground: oklch(0.985 0 0);
|
||||||
|
|
||||||
|
--muted: oklch(0.274 0.006 286.033);
|
||||||
|
|
||||||
|
--muted-foreground: oklch(0.705 0.015 286.067);
|
||||||
|
|
||||||
|
--accent: oklch(0.274 0.006 286.033);
|
||||||
|
|
||||||
|
--accent-foreground: oklch(0.985 0 0);
|
||||||
|
|
||||||
|
--destructive: oklch(0.704 0.191 22.216);
|
||||||
|
|
||||||
|
--border: oklch(1 0 0 / 10%);
|
||||||
|
|
||||||
|
--input: oklch(1 0 0 / 15%);
|
||||||
|
|
||||||
|
--ring: oklch(0.552 0.016 285.938);
|
||||||
|
|
||||||
|
--chart-1: oklch(0.488 0.243 264.376);
|
||||||
|
|
||||||
|
--chart-2: oklch(0.696 0.17 162.48);
|
||||||
|
|
||||||
|
--chart-3: oklch(0.769 0.188 70.08);
|
||||||
|
|
||||||
|
--chart-4: oklch(0.627 0.265 303.9);
|
||||||
|
|
||||||
|
--chart-5: oklch(0.645 0.246 16.439);
|
||||||
|
|
||||||
|
--sidebar: oklch(0.21 0.006 285.885);
|
||||||
|
|
||||||
|
--sidebar-foreground: oklch(0.985 0 0);
|
||||||
|
|
||||||
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||||
|
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
|
||||||
|
--sidebar-accent: oklch(0.274 0.006 286.033);
|
||||||
|
|
||||||
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||||
|
|
||||||
|
--sidebar-border: oklch(1 0 0 / 10%);
|
||||||
|
|
||||||
|
--sidebar-ring: oklch(0.552 0.016 285.938);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user