feat(ui): enhance UI with animations, dark mode support and and improved components
- Add framer-motion page transitions and AnimatePresence support - Add dark mode support across all components - Create reusable UI components (Button, Badge, Card, EmptyState, Input, Toast, Skeleton) - Add CSS custom properties for consistent theming - Add animation variants and utility functions - Improve ChatArea, Sidebar, TriggersPanel with animations Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
iven
@@ -22,9 +22,13 @@
|
||||
"dependencies": {
|
||||
"@tauri-apps/api": "^2",
|
||||
"@tauri-apps/plugin-opener": "^2",
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^12.36.0",
|
||||
"lucide-react": "^0.577.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"smol-toml": "^1.6.0",
|
||||
"tailwind-merge": "^3.5.0",
|
||||
"tweetnacl": "^1.0.3",
|
||||
"zustand": "^5.0.11"
|
||||
},
|
||||
|
||||
69
desktop/pnpm-lock.yaml
generated
69
desktop/pnpm-lock.yaml
generated
@@ -14,6 +14,12 @@ importers:
|
||||
'@tauri-apps/plugin-opener':
|
||||
specifier: ^2
|
||||
version: 2.5.3
|
||||
clsx:
|
||||
specifier: ^2.1.1
|
||||
version: 2.1.1
|
||||
framer-motion:
|
||||
specifier: ^12.36.0
|
||||
version: 12.36.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
|
||||
lucide-react:
|
||||
specifier: ^0.577.0
|
||||
version: 0.577.0(react@19.2.4)
|
||||
@@ -23,6 +29,12 @@ importers:
|
||||
react-dom:
|
||||
specifier: ^19.1.0
|
||||
version: 19.2.4(react@19.2.4)
|
||||
smol-toml:
|
||||
specifier: ^1.6.0
|
||||
version: 1.6.0
|
||||
tailwind-merge:
|
||||
specifier: ^3.5.0
|
||||
version: 3.5.0
|
||||
tweetnacl:
|
||||
specifier: ^1.0.3
|
||||
version: 1.0.3
|
||||
@@ -684,6 +696,10 @@ packages:
|
||||
caniuse-lite@1.0.30001777:
|
||||
resolution: {integrity: sha512-tmN+fJxroPndC74efCdp12j+0rk0RHwV5Jwa1zWaFVyw2ZxAuPeG8ZgWC3Wz7uSjT3qMRQ5XHZ4COgQmsCMJAQ==}
|
||||
|
||||
clsx@2.1.1:
|
||||
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
convert-source-map@2.0.0:
|
||||
resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
|
||||
|
||||
@@ -731,6 +747,20 @@ packages:
|
||||
fraction.js@5.3.4:
|
||||
resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
|
||||
|
||||
framer-motion@12.36.0:
|
||||
resolution: {integrity: sha512-4PqYHAT7gev0ke0wos+PyrcFxI0HScjm3asgU8nSYa8YzJFuwgIvdj3/s3ZaxLq0bUSboIn19A2WS/MHwLCvfw==}
|
||||
peerDependencies:
|
||||
'@emotion/is-prop-valid': '*'
|
||||
react: ^18.0.0 || ^19.0.0
|
||||
react-dom: ^18.0.0 || ^19.0.0
|
||||
peerDependenciesMeta:
|
||||
'@emotion/is-prop-valid':
|
||||
optional: true
|
||||
react:
|
||||
optional: true
|
||||
react-dom:
|
||||
optional: true
|
||||
|
||||
fsevents@2.3.3:
|
||||
resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
|
||||
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
||||
@@ -845,6 +875,12 @@ packages:
|
||||
magic-string@0.30.21:
|
||||
resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
|
||||
|
||||
motion-dom@12.36.0:
|
||||
resolution: {integrity: sha512-Ep1pq8P88rGJ75om8lTCA13zqd7ywPGwCqwuWwin6BKc0hMLkVfcS6qKlRqEo2+t0DwoUcgGJfXwaiFn4AOcQA==}
|
||||
|
||||
motion-utils@12.36.0:
|
||||
resolution: {integrity: sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==}
|
||||
|
||||
ms@2.1.3:
|
||||
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
|
||||
|
||||
@@ -895,10 +931,17 @@ packages:
|
||||
resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
|
||||
hasBin: true
|
||||
|
||||
smol-toml@1.6.0:
|
||||
resolution: {integrity: sha512-4zemZi0HvTnYwLfrpk/CF9LOd9Lt87kAt50GnqhMpyF9U3poDAP2+iukq2bZsO/ufegbYehBkqINbsWxj4l4cw==}
|
||||
engines: {node: '>= 18'}
|
||||
|
||||
source-map-js@1.2.1:
|
||||
resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
tailwind-merge@3.5.0:
|
||||
resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
|
||||
|
||||
tailwindcss@4.2.1:
|
||||
resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==}
|
||||
|
||||
@@ -910,6 +953,9 @@ packages:
|
||||
resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
|
||||
engines: {node: '>=12.0.0'}
|
||||
|
||||
tslib@2.8.1:
|
||||
resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
|
||||
|
||||
tweetnacl@1.0.3:
|
||||
resolution: {integrity: sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==}
|
||||
|
||||
@@ -1458,6 +1504,8 @@ snapshots:
|
||||
|
||||
caniuse-lite@1.0.30001777: {}
|
||||
|
||||
clsx@2.1.1: {}
|
||||
|
||||
convert-source-map@2.0.0: {}
|
||||
|
||||
csstype@3.2.3: {}
|
||||
@@ -1512,6 +1560,15 @@ snapshots:
|
||||
|
||||
fraction.js@5.3.4: {}
|
||||
|
||||
framer-motion@12.36.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
|
||||
dependencies:
|
||||
motion-dom: 12.36.0
|
||||
motion-utils: 12.36.0
|
||||
tslib: 2.8.1
|
||||
optionalDependencies:
|
||||
react: 19.2.4
|
||||
react-dom: 19.2.4(react@19.2.4)
|
||||
|
||||
fsevents@2.3.3:
|
||||
optional: true
|
||||
|
||||
@@ -1588,6 +1645,12 @@ snapshots:
|
||||
dependencies:
|
||||
'@jridgewell/sourcemap-codec': 1.5.5
|
||||
|
||||
motion-dom@12.36.0:
|
||||
dependencies:
|
||||
motion-utils: 12.36.0
|
||||
|
||||
motion-utils@12.36.0: {}
|
||||
|
||||
ms@2.1.3: {}
|
||||
|
||||
nanoid@3.3.11: {}
|
||||
@@ -1650,8 +1713,12 @@ snapshots:
|
||||
|
||||
semver@6.3.1: {}
|
||||
|
||||
smol-toml@1.6.0: {}
|
||||
|
||||
source-map-js@1.2.1: {}
|
||||
|
||||
tailwind-merge@3.5.0: {}
|
||||
|
||||
tailwindcss@4.2.1: {}
|
||||
|
||||
tapable@2.3.0: {}
|
||||
@@ -1661,6 +1728,8 @@ snapshots:
|
||||
fdir: 6.5.0(picomatch@4.0.3)
|
||||
picomatch: 4.0.3
|
||||
|
||||
tslib@2.8.1: {}
|
||||
|
||||
tweetnacl@1.0.3: {}
|
||||
|
||||
typescript@5.8.3: {}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import './index.css';
|
||||
import { Sidebar, MainViewType } from './components/Sidebar';
|
||||
import { ChatArea } from './components/ChatArea';
|
||||
@@ -10,6 +11,9 @@ import { TeamCollaborationView } from './components/TeamCollaborationView';
|
||||
import { useGatewayStore } from './store/gatewayStore';
|
||||
import { useTeamStore } from './store/teamStore';
|
||||
import { getStoredGatewayToken } from './lib/gateway-client';
|
||||
import { pageVariants, defaultTransition, fadeInVariants } from './lib/animations';
|
||||
import { Bot, Users } from 'lucide-react';
|
||||
import { EmptyState } from './components/ui';
|
||||
|
||||
type View = 'main' | 'settings';
|
||||
|
||||
@@ -66,48 +70,51 @@ function App() {
|
||||
/>
|
||||
|
||||
{/* 中间区域 */}
|
||||
<main className="flex-1 flex flex-col bg-white relative overflow-hidden">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.main
|
||||
key={mainContentView}
|
||||
variants={pageVariants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
transition={defaultTransition}
|
||||
className="flex-1 flex flex-col bg-white relative overflow-hidden"
|
||||
>
|
||||
{mainContentView === 'hands' && selectedHandId ? (
|
||||
<HandTaskPanel
|
||||
handId={selectedHandId}
|
||||
onBack={() => setSelectedHandId(undefined)}
|
||||
/>
|
||||
) : mainContentView === 'hands' ? (
|
||||
<div className="flex-1 flex items-center justify-center p-6">
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-4xl">🤖</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-700 mb-2">选择一个 Hand</h3>
|
||||
<p className="text-sm text-gray-400 max-w-sm">
|
||||
从左侧列表中选择一个自主能力包，查看其任务清单和执行结果。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<EmptyState
|
||||
icon={<Bot className="w-8 h-8" />}
|
||||
title="Select a Hand"
|
||||
description="Choose an autonomous capability package from the list on the left to view its task list and execution results."
|
||||
/>
|
||||
) : mainContentView === 'workflow' ? (
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<motion.div
|
||||
variants={fadeInVariants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
className="flex-1 overflow-y-auto"
|
||||
>
|
||||
<SchedulerPanel />
|
||||
</div>
|
||||
</motion.div>
|
||||
) : mainContentView === 'team' ? (
|
||||
activeTeam ? (
|
||||
<TeamCollaborationView teamId={activeTeam.id} />
|
||||
) : (
|
||||
<div className="flex-1 flex items-center justify-center p-6">
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-4xl">👥</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-700 mb-2">选择或创建团队</h3>
|
||||
<p className="text-sm text-gray-400 max-w-sm">
|
||||
从左侧列表选择一个团队，或点击 + 创建新的多 Agent 协作团队。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<EmptyState
|
||||
icon={<Users className="w-8 h-8" />}
|
||||
title="Select or Create a Team"
|
||||
description="Choose a team from the list on the left, or click + to create a new multi-Agent collaboration team."
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<ChatArea />
|
||||
)}
|
||||
</main>
|
||||
</motion.main>
|
||||
</AnimatePresence>
|
||||
|
||||
{/* 右侧边栏 */}
|
||||
<RightPanel />
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useChatStore, Message } from '../store/chatStore';
|
||||
import { useGatewayStore } from '../store/gatewayStore';
|
||||
import { Paperclip, ChevronDown, Terminal, SquarePen, ArrowUp } from 'lucide-react';
|
||||
import { Paperclip, ChevronDown, Terminal, SquarePen, ArrowUp, MessageSquare } from 'lucide-react';
|
||||
import { Button, EmptyState } from './ui';
|
||||
import { listItemVariants, defaultTransition, fadeInVariants } from '../lib/animations';
|
||||
|
||||
const MODELS = ['glm-5', 'qwen3.5-plus', 'kimi-k2.5', 'minimax-m2.5'];
|
||||
|
||||
@@ -58,56 +61,84 @@ export function ChatArea() {
|
||||
return (
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="h-14 border-b border-gray-100 flex items-center justify-between px-6 flex-shrink-0 bg-white">
|
||||
<div className="h-14 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between px-6 flex-shrink-0 bg-white dark:bg-gray-900">
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="font-semibold text-gray-900">{currentAgent?.name || 'ZCLAW'}</h2>
|
||||
<h2 className="font-semibold text-gray-900 dark:text-gray-100">{currentAgent?.name || 'ZCLAW'}</h2>
|
||||
{isStreaming ? (
|
||||
<span className="text-xs text-gray-400 flex items-center gap-1">
|
||||
<span className="w-1.5 h-1.5 bg-gray-400 rounded-full thinking-dot"></span>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
|
||||
<span className="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-400 rounded-full thinking-dot"></span>
|
||||
正在输入中
|
||||
</span>
|
||||
) : (
|
||||
<span className={`text-xs flex items-center gap-1 ${connected ? 'text-green-500' : 'text-gray-400'}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${connected ? 'bg-green-400' : 'bg-gray-300'}`}></span>
|
||||
<span className={`text-xs flex items-center gap-1 ${connected ? 'text-green-500' : 'text-gray-500 dark:text-gray-400'}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${connected ? 'bg-green-400' : 'bg-gray-300 dark:bg-gray-600'}`}></span>
|
||||
{connected ? 'Gateway 已连接' : 'Gateway 未连接'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{messages.length > 0 && (
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={newConversation}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-500 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
|
||||
title="新对话"
|
||||
aria-label="开始新对话"
|
||||
className="flex items-center gap-1.5 text-gray-500 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 hover:bg-orange-50 dark:hover:bg-orange-900/20"
|
||||
>
|
||||
<SquarePen className="w-3.5 h-3.5" />
|
||||
新对话
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
<div ref={scrollRef} className="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6">
|
||||
<div ref={scrollRef} className="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6 bg-white dark:bg-gray-900">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{messages.length === 0 && (
|
||||
<div className="text-center text-gray-400 py-20">
|
||||
<p className="text-lg mb-2">欢迎使用 ZCLAW 🦞</p>
|
||||
<p className="text-sm">{connected ? '发送消息开始对话' : '请先在设置中连接 Gateway'}</p>
|
||||
</div>
|
||||
<motion.div
|
||||
key="empty-state"
|
||||
variants={fadeInVariants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
>
|
||||
<EmptyState
|
||||
icon={<MessageSquare className="w-8 h-8" />}
|
||||
title="欢迎使用 ZCLAW"
|
||||
description={connected ? '发送消息开始对话' : '请先在设置中连接 Gateway'}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{messages.map((message) => (
|
||||
<MessageBubble key={message.id} message={message} />
|
||||
<motion.div
|
||||
key={message.id}
|
||||
variants={listItemVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
layout
|
||||
transition={defaultTransition}
|
||||
>
|
||||
<MessageBubble message={message} />
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Input */}
|
||||
<div className="border-t border-gray-100 p-4 bg-white">
|
||||
<div className="border-t border-gray-100 dark:border-gray-800 p-4 bg-white dark:bg-gray-900">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="relative flex items-end gap-2 bg-gray-50 rounded-2xl border border-gray-200 p-2 focus-within:border-orange-300 focus-within:ring-2 focus-within:ring-orange-100 transition-all">
|
||||
<button className="p-2 text-gray-400 hover:text-gray-600 rounded-lg">
|
||||
<div className="relative flex items-end gap-2 bg-gray-50 dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-2 focus-within:border-orange-300 dark:focus-within:border-orange-600 focus-within:ring-2 focus-within:ring-orange-100 dark:focus-within:ring-orange-900/30 transition-all">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="p-2 text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
aria-label="添加附件"
|
||||
>
|
||||
<Paperclip className="w-5 h-5" />
|
||||
</button>
|
||||
</Button>
|
||||
<div className="flex-1 py-1">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
@@ -123,41 +154,48 @@ export function ChatArea() {
|
||||
}
|
||||
disabled={isStreaming || !connected}
|
||||
rows={1}
|
||||
className="w-full bg-transparent border-none focus:outline-none text-gray-700 placeholder-gray-400 disabled:opacity-50 resize-none leading-relaxed mt-1"
|
||||
className="w-full bg-transparent border-none focus:outline-none text-gray-700 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 disabled:opacity-50 resize-none leading-relaxed mt-1"
|
||||
style={{ minHeight: '24px', maxHeight: '160px' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 pr-2 pb-1 relative">
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowModelPicker(!showModelPicker)}
|
||||
className="flex items-center gap-1 px-2 py-1 text-xs text-gray-500 hover:bg-gray-200 rounded-md transition-colors"
|
||||
className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
|
||||
aria-label="选择模型"
|
||||
aria-expanded={showModelPicker}
|
||||
>
|
||||
<span>{currentModel}</span>
|
||||
<ChevronDown className="w-3 h-3" />
|
||||
</button>
|
||||
</Button>
|
||||
{showModelPicker && (
|
||||
<div className="absolute bottom-full right-8 mb-2 bg-white border border-gray-200 rounded-lg shadow-lg py-1 min-w-[160px] z-10">
|
||||
<div className="absolute bottom-full right-8 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg py-1 min-w-[160px] z-10">
|
||||
{MODELS.map((model) => (
|
||||
<button
|
||||
key={model}
|
||||
onClick={() => { setCurrentModel(model); setShowModelPicker(false); }}
|
||||
className={`w-full text-left px-3 py-2 text-xs hover:bg-gray-50 ${model === currentModel ? 'text-orange-600 font-medium' : 'text-gray-700'}`}
|
||||
className={`w-full text-left px-3 py-2 text-xs hover:bg-gray-50 dark:hover:bg-gray-700 ${model === currentModel ? 'text-orange-600 dark:text-orange-400 font-medium' : 'text-gray-700 dark:text-gray-300'}`}
|
||||
>
|
||||
{model}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={handleSend}
|
||||
disabled={isStreaming || !input.trim() || !connected}
|
||||
className="w-8 h-8 bg-gray-900 text-white rounded-full flex items-center justify-center hover:bg-gray-800 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
className="w-8 h-8 rounded-full p-0 flex items-center justify-center"
|
||||
aria-label="发送消息"
|
||||
>
|
||||
<ArrowUp className="w-4 h-4" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center mt-2 text-xs text-gray-400">
|
||||
<div className="text-center mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
Agent 在本地运行，内容由 AI 生成
|
||||
</div>
|
||||
</div>
|
||||
@@ -229,7 +267,7 @@ function renderInline(text: string): React.ReactNode[] {
|
||||
} else if (match[5]) {
|
||||
// `code`
|
||||
parts.push(
|
||||
<code key={parts.length} className="bg-gray-100 text-orange-700 px-1 py-0.5 rounded text-[0.85em] font-mono">
|
||||
<code key={parts.length} className="bg-gray-100 dark:bg-gray-700 text-orange-700 dark:text-orange-400 px-1 py-0.5 rounded text-[0.85em] font-mono">
|
||||
{match[6]}
|
||||
</code>
|
||||
);
|
||||
@@ -237,7 +275,7 @@ function renderInline(text: string): React.ReactNode[] {
|
||||
// [text](url)
|
||||
parts.push(
|
||||
<a key={parts.length} href={match[9]} target="_blank" rel="noopener noreferrer"
|
||||
className="text-orange-600 underline hover:text-orange-700">{match[8]}</a>
|
||||
className="text-orange-600 dark:text-orange-400 underline hover:text-orange-700 dark:hover:text-orange-300">{match[8]}</a>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -254,16 +292,16 @@ function renderInline(text: string): React.ReactNode[] {
|
||||
function MessageBubble({ message }: { message: Message }) {
|
||||
if (message.role === 'tool') {
|
||||
return (
|
||||
<div className="ml-12 bg-gray-50 border border-gray-200 rounded-lg p-3 text-xs font-mono">
|
||||
<div className="flex items-center gap-2 text-gray-500 mb-1">
|
||||
<div className="ml-12 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-3 text-xs font-mono">
|
||||
<div className="flex items-center gap-2 text-gray-500 dark:text-gray-400 mb-1">
|
||||
<Terminal className="w-3.5 h-3.5" />
|
||||
<span className="font-semibold">{message.toolName || 'tool'}</span>
|
||||
</div>
|
||||
{message.toolInput && (
|
||||
<pre className="text-gray-600 bg-white rounded p-2 mb-1 overflow-x-auto">{message.toolInput}</pre>
|
||||
<pre className="text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-900 rounded p-2 mb-1 overflow-x-auto">{message.toolInput}</pre>
|
||||
)}
|
||||
{message.content && (
|
||||
<pre className="text-green-700 bg-white rounded p-2 overflow-x-auto">{message.content}</pre>
|
||||
<pre className="text-green-700 dark:text-green-400 bg-white dark:bg-gray-900 rounded p-2 overflow-x-auto">{message.content}</pre>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@@ -274,13 +312,13 @@ function MessageBubble({ message }: { message: Message }) {
|
||||
return (
|
||||
<div className={`flex gap-4 ${isUser ? 'justify-end' : ''}`}>
|
||||
<div
|
||||
className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${isUser ? 'bg-gray-200 text-gray-600 order-last' : 'agent-avatar text-white'}`}
|
||||
className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${isUser ? 'bg-gray-200 dark:bg-gray-600 text-gray-600 dark:text-gray-200 order-last' : 'agent-avatar text-white'}`}
|
||||
>
|
||||
{isUser ? '用' : '🦞'}
|
||||
{isUser ? '用' : 'Z'}
|
||||
</div>
|
||||
<div className={isUser ? 'max-w-2xl' : 'flex-1 max-w-3xl'}>
|
||||
<div className={`p-4 shadow-sm ${isUser ? 'chat-bubble-user shadow-md' : 'chat-bubble-assistant'}`}>
|
||||
<div className={`leading-relaxed whitespace-pre-wrap ${isUser ? 'text-white' : 'text-gray-700'}`}>
|
||||
<div className={`leading-relaxed whitespace-pre-wrap ${isUser ? 'text-white' : 'text-gray-700 dark:text-gray-200'}`}>
|
||||
{message.content
|
||||
? (isUser ? message.content : renderMarkdown(message.content))
|
||||
: (message.streaming ? '' : '...')}
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
import { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Settings, Users, Bot, GitBranch, MessageSquare } from 'lucide-react';
|
||||
import { CloneManager } from './CloneManager';
|
||||
import { HandList } from './HandList';
|
||||
import { TaskList } from './TaskList';
|
||||
import { TeamList } from './TeamList';
|
||||
import { useGatewayStore } from '../store/gatewayStore';
|
||||
import { Button } from './ui';
|
||||
import { containerVariants, defaultTransition } from '../lib/animations';
|
||||
|
||||
export type MainViewType = 'chat' | 'hands' | 'workflow' | 'team';
|
||||
|
||||
@@ -55,11 +58,14 @@ export function Sidebar({
|
||||
return (
|
||||
<aside className="w-64 bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 flex flex-col flex-shrink-0">
|
||||
{/* 顶部标签 - 使用图标 */}
|
||||
<div className="flex border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
|
||||
<div className="flex border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" role="tablist">
|
||||
{TABS.map(({ key, label, icon: Icon }) => (
|
||||
<button
|
||||
key={key}
|
||||
title={label}
|
||||
aria-label={label}
|
||||
aria-selected={activeTab === key}
|
||||
role="tab"
|
||||
className={`flex-1 py-2.5 px-2 text-xs font-medium transition-colors flex flex-col items-center gap-0.5 ${
|
||||
activeTab === key
|
||||
? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
@@ -75,6 +81,16 @@ export function Sidebar({
|
||||
|
||||
{/* Tab content */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
transition={defaultTransition}
|
||||
className="h-full"
|
||||
>
|
||||
{activeTab === 'clones' && <CloneManager />}
|
||||
{activeTab === 'hands' && (
|
||||
<HandList
|
||||
@@ -89,18 +105,26 @@ export function Sidebar({
|
||||
onSelectTeam={onSelectTeam}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* 底部用户 */}
|
||||
<div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
|
||||
{userName?.charAt(0) || '用'}
|
||||
</div>
|
||||
<span className="font-medium text-gray-700 dark:text-gray-300">{userName}</span>
|
||||
<button className="ml-auto text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" onClick={onOpenSettings}>
|
||||
<span className="font-medium text-gray-700 dark:text-gray-300 truncate">{userName}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="ml-auto p-1.5"
|
||||
onClick={onOpenSettings}
|
||||
aria-label="打开设置"
|
||||
>
|
||||
<Settings className="w-4 h-4" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -15,8 +15,6 @@ import {
|
||||
Globe,
|
||||
Bell,
|
||||
MessageSquare,
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
|
||||
|
||||
32
desktop/src/components/ui/Badge.tsx
Normal file
32
desktop/src/components/ui/Badge.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { cn } from '../../lib/utils';
|
||||
|
||||
type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
|
||||
|
||||
interface BadgeProps {
|
||||
children: React.ReactNode;
|
||||
variant?: BadgeVariant;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const variantStyles: Record<BadgeVariant, string> = {
|
||||
default: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
|
||||
primary: 'bg-primary-light text-primary',
|
||||
success: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
|
||||
warning: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
|
||||
error: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
|
||||
info: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
|
||||
};
|
||||
|
||||
export function Badge({ children, variant = 'default', className }: BadgeProps) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium',
|
||||
variantStyles[variant],
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
54
desktop/src/components/ui/Button.tsx
Normal file
54
desktop/src/components/ui/Button.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import { forwardRef } from 'react';
|
||||
import { motion, HTMLMotionProps } from 'framer-motion';
|
||||
import { cn } from '../../lib/utils';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
|
||||
export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
|
||||
export type ButtonSize = 'sm' | 'md' | 'lg';
|
||||
|
||||
export interface ButtonProps extends Omit<HTMLMotionProps<'button'>, 'children'> {
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
loading?: boolean;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const variantStyles: Record<ButtonVariant, string> = {
|
||||
primary: 'bg-primary text-white hover:bg-primary-hover',
|
||||
secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600',
|
||||
ghost: 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700',
|
||||
danger: 'bg-red-500 text-white hover:bg-red-600',
|
||||
outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800',
|
||||
};
|
||||
|
||||
const sizeStyles: Record<ButtonSize, string> = {
|
||||
sm: 'px-3 py-1.5 text-xs rounded-md',
|
||||
md: 'px-4 py-2 text-sm rounded-lg',
|
||||
lg: 'px-6 py-3 text-base rounded-lg',
|
||||
};
|
||||
|
||||
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant = 'primary', size = 'md', loading, disabled, children, ...props }, ref) => {
|
||||
return (
|
||||
<motion.button
|
||||
ref={ref}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center font-medium transition-colors duration-fast',
|
||||
'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
variantStyles[variant],
|
||||
sizeStyles[size],
|
||||
className
|
||||
)}
|
||||
disabled={disabled || loading}
|
||||
{...props}
|
||||
>
|
||||
{loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||
{children}
|
||||
</motion.button>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Button.displayName = 'Button';
|
||||
64
desktop/src/components/ui/Card.tsx
Normal file
64
desktop/src/components/ui/Card.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import { motion, HTMLMotionProps } from 'framer-motion';
|
||||
import { cn } from '../../lib/utils';
|
||||
import { cardHover } from '../../lib/animations';
|
||||
|
||||
interface CardProps extends Omit<HTMLMotionProps<'div'>, 'children'> {
|
||||
children: React.ReactNode;
|
||||
hoverable?: boolean;
|
||||
}
|
||||
|
||||
export function Card({ children, className, hoverable = false, ...props }: CardProps) {
|
||||
return (
|
||||
<motion.div
|
||||
className={cn(
|
||||
'rounded-xl border border-gray-200 bg-white p-4 shadow-sm',
|
||||
'dark:border-gray-700 dark:bg-gray-800',
|
||||
hoverable && 'cursor-pointer transition-shadow duration-200',
|
||||
className
|
||||
)}
|
||||
{...(hoverable && { whileHover: cardHover })}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
interface CardHeaderProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function CardHeader({ children, className }: CardHeaderProps) {
|
||||
return (
|
||||
<div className={cn('mb-3', className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface CardTitleProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function CardTitle({ children, className }: CardTitleProps) {
|
||||
return (
|
||||
<h3 className={cn('text-sm font-semibold text-gray-900 dark:text-gray-100', className)}>
|
||||
{children}
|
||||
</h3>
|
||||
);
|
||||
}
|
||||
|
||||
interface CardContentProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function CardContent({ children, className }: CardContentProps) {
|
||||
return (
|
||||
<div className={cn('text-sm text-gray-600 dark:text-gray-300', className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
28
desktop/src/components/ui/EmptyState.tsx
Normal file
28
desktop/src/components/ui/EmptyState.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import { cn } from '../../lib/utils';
|
||||
|
||||
interface EmptyStateProps {
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
action?: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
|
||||
return (
|
||||
<div className={cn('flex-1 flex items-center justify-center p-6', className)}>
|
||||
<div className="text-center max-w-sm">
|
||||
<div className="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4 text-gray-400">
|
||||
{icon}
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-gray-700 dark:text-gray-300 mb-2">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
||||
{description}
|
||||
</p>
|
||||
{action}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
45
desktop/src/components/ui/Input.tsx
Normal file
45
desktop/src/components/ui/Input.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { forwardRef, InputHTMLAttributes } from 'react';
|
||||
import { cn } from '../../lib/utils';
|
||||
|
||||
export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||
label?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
({ className, label, error, id, ...props }, ref) => {
|
||||
const inputId = id || label?.toLowerCase().replace(/\s+/g, '-');
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{label && (
|
||||
<label
|
||||
htmlFor={inputId}
|
||||
className="block text-xs text-gray-500 dark:text-gray-400 mb-1"
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<input
|
||||
ref={ref}
|
||||
id={inputId}
|
||||
className={cn(
|
||||
'w-full text-sm border border-gray-200 rounded-lg px-3 py-2',
|
||||
'bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100',
|
||||
'placeholder:text-gray-400 dark:placeholder:text-gray-500',
|
||||
'focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent',
|
||||
'transition-colors duration-fast',
|
||||
error && 'border-red-500 focus:ring-red-500',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
{error && (
|
||||
<p className="mt-1 text-xs text-red-500">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Input.displayName = 'Input';
|
||||
42
desktop/src/components/ui/Skeleton.tsx
Normal file
42
desktop/src/components/ui/Skeleton.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { cn } from '../../lib/utils';
|
||||
|
||||
interface SkeletonProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Skeleton({ className }: SkeletonProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'animate-pulse bg-gray-200 dark:bg-gray-700 rounded',
|
||||
className
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardSkeleton() {
|
||||
return (
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
|
||||
<Skeleton className="h-4 w-24 mb-3" />
|
||||
<Skeleton className="h-3 w-full mb-2" />
|
||||
<Skeleton className="h-3 w-3/4" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ListSkeleton({ count = 3 }: { count?: number }) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{Array.from({ length: count }).map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3 p-2">
|
||||
<Skeleton className="w-8 h-8 rounded-full" />
|
||||
<div className="flex-1">
|
||||
<Skeleton className="h-3 w-24 mb-1" />
|
||||
<Skeleton className="h-2 w-32" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
89
desktop/src/components/ui/Toast.tsx
Normal file
89
desktop/src/components/ui/Toast.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import { useState, useCallback, createContext, useContext } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
|
||||
import { cn } from '../../lib/utils';
|
||||
|
||||
type ToastType = 'success' | 'error' | 'info' | 'warning';
|
||||
|
||||
interface Toast {
|
||||
id: string;
|
||||
message: string;
|
||||
type: ToastType;
|
||||
}
|
||||
|
||||
interface ToastContextType {
|
||||
toast: (message: string, type?: ToastType) => void;
|
||||
}
|
||||
|
||||
const ToastContext = createContext<ToastContextType | null>(null);
|
||||
|
||||
export function useToast() {
|
||||
const context = useContext(ToastContext);
|
||||
if (!context) {
|
||||
throw new Error('useToast must be used within a ToastProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
const iconMap: Record<ToastType, React.ReactNode> = {
|
||||
success: <CheckCircle className="w-5 h-5 text-green-500" />,
|
||||
error: <AlertCircle className="w-5 h-5 text-red-500" />,
|
||||
info: <Info className="w-5 h-5 text-blue-500" />,
|
||||
warning: <AlertTriangle className="w-5 h-5 text-yellow-500" />,
|
||||
};
|
||||
|
||||
const styleMap: Record<ToastType, string> = {
|
||||
success: 'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800',
|
||||
error: 'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800',
|
||||
info: 'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800',
|
||||
warning: 'bg-yellow-50 border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-800',
|
||||
};
|
||||
|
||||
export function ToastProvider({ children }: { children: React.ReactNode }) {
|
||||
const [toasts, setToasts] = useState<Toast[]>([]);
|
||||
|
||||
const toast = useCallback((message: string, type: ToastType = 'info') => {
|
||||
const id = Date.now().toString();
|
||||
setToasts((prev) => [...prev, { id, message, type }]);
|
||||
setTimeout(() => {
|
||||
setToasts((prev) => prev.filter((t) => t.id !== id));
|
||||
}, 3000);
|
||||
}, []);
|
||||
|
||||
const removeToast = useCallback((id: string) => {
|
||||
setToasts((prev) => prev.filter((t) => t.id !== id));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ToastContext.Provider value={{ toast }}>
|
||||
{children}
|
||||
<div className="fixed bottom-4 right-4 z-50 space-y-2">
|
||||
<AnimatePresence>
|
||||
{toasts.map((t) => (
|
||||
<motion.div
|
||||
key={t.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className={cn(
|
||||
'flex items-center gap-3 px-4 py-3 rounded-lg border shadow-lg',
|
||||
'bg-white dark:bg-gray-800',
|
||||
styleMap[t.type]
|
||||
)}
|
||||
>
|
||||
{iconMap[t.type]}
|
||||
<span className="text-sm text-gray-700 dark:text-gray-200">{t.message}</span>
|
||||
<button
|
||||
onClick={() => removeToast(t.id)}
|
||||
className="ml-2 text-gray-400 hover:text-gray-600"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</ToastContext.Provider>
|
||||
);
|
||||
}
|
||||
15
desktop/src/components/ui/index.ts
Normal file
15
desktop/src/components/ui/index.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
export { Button } from './Button';
|
||||
export type { ButtonProps } from './Button';
|
||||
|
||||
export { Card, CardHeader, CardTitle, CardContent } from './Card';
|
||||
|
||||
export { Input } from './Input';
|
||||
export type { InputProps } from './Input';
|
||||
|
||||
export { Badge } from './Badge';
|
||||
|
||||
export { Skeleton, CardSkeleton, ListSkeleton } from './Skeleton';
|
||||
|
||||
export { EmptyState } from './EmptyState';
|
||||
|
||||
export { ToastProvider, useToast } from './Toast';
|
||||
@@ -1,4 +1,64 @@
|
||||
@import "tailwindcss";
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
/* Brand Colors */
|
||||
--color-primary: #f97316;
|
||||
--color-primary-hover: #ea580c;
|
||||
--color-primary-light: #fff7ed;
|
||||
|
||||
/* Semantic Colors */
|
||||
--color-success: #22c55e;
|
||||
--color-warning: #eab308;
|
||||
--color-error: #ef4444;
|
||||
--color-info: #3b82f6;
|
||||
|
||||
/* Neutral Colors */
|
||||
--color-bg: #ffffff;
|
||||
--color-bg-secondary: #f9fafb;
|
||||
--color-border: #e5e7eb;
|
||||
--color-text: #111827;
|
||||
--color-text-secondary: #6b7280;
|
||||
--color-text-muted: #9ca3af;
|
||||
|
||||
/* Spacing Scale */
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-md: 16px;
|
||||
--space-lg: 24px;
|
||||
--space-xl: 32px;
|
||||
|
||||
/* Border Radius */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-normal: 200ms ease;
|
||||
--transition-slow: 300ms ease;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-bg: #0f172a;
|
||||
--color-bg-secondary: #1e293b;
|
||||
--color-border: #334155;
|
||||
--color-text: #f1f5f9;
|
||||
--color-text-secondary: #94a3b8;
|
||||
--color-text-muted: #64748b;
|
||||
}
|
||||
|
||||
/* Focus states for accessibility */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
|
||||
62
desktop/src/lib/animations.ts
Normal file
62
desktop/src/lib/animations.ts
Normal file
@@ -0,0 +1,62 @@
|
||||
import { Variants, Transition } from 'framer-motion';
|
||||
|
||||
// Page transition animations
|
||||
export const pageVariants: Variants = {
|
||||
initial: { opacity: 0, y: 10 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
exit: { opacity: 0, y: -10 },
|
||||
};
|
||||
|
||||
// List item stagger animations
|
||||
export const listItemVariants: Variants = {
|
||||
hidden: { opacity: 0, x: -10 },
|
||||
visible: { opacity: 1, x: 0 },
|
||||
};
|
||||
|
||||
// Container stagger animations
|
||||
export const containerVariants: Variants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.05,
|
||||
},
|
||||
},
|
||||
exit: {
|
||||
opacity: 0,
|
||||
transition: {
|
||||
duration: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Fade in animations
|
||||
export const fadeInVariants: Variants = {
|
||||
initial: { opacity: 0 },
|
||||
animate: { opacity: 1 },
|
||||
exit: { opacity: 0 },
|
||||
};
|
||||
|
||||
// Button tap animation
|
||||
export const buttonTap = { scale: 0.98 };
|
||||
|
||||
// Card hover animation
|
||||
export const cardHover = { y: -2, boxShadow: '0 10px 25px -5px rgb(0 0 0 / 0.1)' };
|
||||
|
||||
// Default transition config
|
||||
export const defaultTransition: Transition = {
|
||||
duration: 0.2,
|
||||
ease: [0.4, 0, 0.2, 1],
|
||||
};
|
||||
|
||||
// Fast transition
|
||||
export const fastTransition: Transition = {
|
||||
duration: 0.15,
|
||||
ease: [0.4, 0, 0.2, 1],
|
||||
};
|
||||
|
||||
// Slow transition
|
||||
export const slowTransition: Transition = {
|
||||
duration: 0.3,
|
||||
ease: [0.4, 0, 0.2, 1],
|
||||
};
|
||||
6
desktop/src/lib/utils.ts
Normal file
6
desktop/src/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));
|
||||
}
|
||||
@@ -1,11 +1,38 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
DEFAULT: 'var(--color-primary)',
|
||||
hover: 'var(--color-primary-hover)',
|
||||
light: 'var(--color-primary-light)',
|
||||
},
|
||||
success: 'var(--color-success)',
|
||||
warning: 'var(--color-warning)',
|
||||
error: 'var(--color-error)',
|
||||
info: 'var(--color-info)',
|
||||
},
|
||||
boxShadow: {
|
||||
'card': 'var(--shadow-md)',
|
||||
'hover': 'var(--shadow-lg)',
|
||||
},
|
||||
transitionDuration: {
|
||||
'fast': '150ms',
|
||||
'normal': '200ms',
|
||||
},
|
||||
borderRadius: {
|
||||
'sm': 'var(--radius-sm)',
|
||||
'md': 'var(--radius-md)',
|
||||
'lg': 'var(--radius-lg)',
|
||||
'xl': 'var(--radius-xl)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user