feat(ui): 新增设置相关 UI 组件
- FontSizePicker: 字体大小选择器，支持实时预览 - ModelCardSelector: 模型卡片选择组件（Haiku/Sonnet/Opus） - UserMenu: 用户菜单弹出组件，支持主题切换和设置导航
This commit is contained in:
gaoziman
parent
2de8cd64e3
commit
29b2d99a82
138
src/components/ui/FontSizePicker.tsx
Normal file
138
src/components/ui/FontSizePicker.tsx
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Minus, Plus } from 'lucide-react';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
interface FontSizePickerProps {
|
||||||
|
value: number;
|
||||||
|
onChange: (size: number) => void;
|
||||||
|
min?: number;
|
||||||
|
max?: number;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FontSizePicker({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
min = 12,
|
||||||
|
max = 20,
|
||||||
|
disabled = false,
|
||||||
|
}: FontSizePickerProps) {
|
||||||
|
const [previewVisible, setPreviewVisible] = useState(false);
|
||||||
|
const [localValue, setLocalValue] = useState(value);
|
||||||
|
|
||||||
|
// 同步外部值
|
||||||
|
useEffect(() => {
|
||||||
|
setLocalValue(value);
|
||||||
|
}, [value]);
|
||||||
|
|
||||||
|
// 实时预览 - 修改 CSS 变量
|
||||||
|
useEffect(() => {
|
||||||
|
document.documentElement.style.setProperty('--font-size-base', `${localValue}px`);
|
||||||
|
}, [localValue]);
|
||||||
|
|
||||||
|
const handleDecrease = () => {
|
||||||
|
if (localValue > min && !disabled) {
|
||||||
|
const newValue = localValue - 1;
|
||||||
|
setLocalValue(newValue);
|
||||||
|
onChange(newValue);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleIncrease = () => {
|
||||||
|
if (localValue < max && !disabled) {
|
||||||
|
const newValue = localValue + 1;
|
||||||
|
setLocalValue(newValue);
|
||||||
|
onChange(newValue);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const togglePreview = () => {
|
||||||
|
setPreviewVisible(!previewVisible);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
{/* 减号按钮 */}
|
||||||
|
<button
|
||||||
|
onClick={handleDecrease}
|
||||||
|
disabled={disabled || localValue <= min}
|
||||||
|
className={cn(
|
||||||
|
'w-12 h-12 flex items-center justify-center',
|
||||||
|
'rounded-md border-2 border-[var(--color-border)]',
|
||||||
|
'bg-[var(--color-bg-primary)]',
|
||||||
|
'text-[var(--color-text-secondary)]',
|
||||||
|
'hover:border-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]',
|
||||||
|
'transition-all duration-200',
|
||||||
|
'focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2',
|
||||||
|
(disabled || localValue <= min) && 'opacity-50 cursor-not-allowed'
|
||||||
|
)}
|
||||||
|
aria-label="减小字体"
|
||||||
|
>
|
||||||
|
<Minus size={20} strokeWidth={2.5} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* 数字显示 */}
|
||||||
|
<div className="flex flex-col items-center min-w-[60px]">
|
||||||
|
<span className="text-3xl font-semibold text-[var(--color-text-primary)]">
|
||||||
|
{localValue}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-[var(--color-text-tertiary)]">px</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 加号按钮 */}
|
||||||
|
<button
|
||||||
|
onClick={handleIncrease}
|
||||||
|
disabled={disabled || localValue >= max}
|
||||||
|
className={cn(
|
||||||
|
'w-12 h-12 flex items-center justify-center',
|
||||||
|
'rounded-md border-2 border-[var(--color-border)]',
|
||||||
|
'bg-[var(--color-bg-primary)]',
|
||||||
|
'text-[var(--color-text-secondary)]',
|
||||||
|
'hover:border-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]',
|
||||||
|
'transition-all duration-200',
|
||||||
|
'focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2',
|
||||||
|
(disabled || localValue >= max) && 'opacity-50 cursor-not-allowed'
|
||||||
|
)}
|
||||||
|
aria-label="增大字体"
|
||||||
|
>
|
||||||
|
<Plus size={20} strokeWidth={2.5} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Preview 按钮 */}
|
||||||
|
<button
|
||||||
|
onClick={togglePreview}
|
||||||
|
className={cn(
|
||||||
|
'px-4 h-12 rounded-md',
|
||||||
|
'bg-[var(--color-bg-tertiary)]',
|
||||||
|
'text-sm font-medium text-[var(--color-text-secondary)]',
|
||||||
|
'hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-primary)]',
|
||||||
|
'transition-all duration-200',
|
||||||
|
'focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2',
|
||||||
|
previewVisible && 'bg-[var(--color-primary-light)] text-[var(--color-primary)]'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Preview
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 预览区域 */}
|
||||||
|
{previewVisible && (
|
||||||
|
<div
|
||||||
|
className="p-4 rounded-lg bg-[var(--color-bg-tertiary)] border border-[var(--color-border-light)] animate-fade-in"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="text-[var(--color-text-primary)] leading-relaxed"
|
||||||
|
style={{ fontSize: `${localValue}px` }}
|
||||||
|
>
|
||||||
|
这是一段预览文字，用于展示当前字体大小的效果。
|
||||||
|
<br />
|
||||||
|
The quick brown fox jumps over the lazy dog.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
108
src/components/ui/ModelCardSelector.tsx
Normal file
108
src/components/ui/ModelCardSelector.tsx
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
// 模型卡片配置
|
||||||
|
const MODEL_CARDS = [
|
||||||
|
{
|
||||||
|
id: 'haiku',
|
||||||
|
name: 'Haiku',
|
||||||
|
description: 'Fast & efficient',
|
||||||
|
modelIdPattern: 'haiku',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'sonnet',
|
||||||
|
name: 'Sonnet',
|
||||||
|
description: 'Balanced',
|
||||||
|
modelIdPattern: 'sonnet',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'opus',
|
||||||
|
name: 'Opus',
|
||||||
|
description: 'Most capable',
|
||||||
|
modelIdPattern: 'opus',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
interface ModelCardSelectorProps {
|
||||||
|
value: string;
|
||||||
|
onChange: (modelId: string) => void;
|
||||||
|
disabled?: boolean;
|
||||||
|
models?: { modelId: string; displayName: string }[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ModelCardSelector({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
disabled = false,
|
||||||
|
models = [],
|
||||||
|
}: ModelCardSelectorProps) {
|
||||||
|
// 根据当前选中的模型ID判断选中的卡片
|
||||||
|
const getSelectedCard = (modelId: string): string => {
|
||||||
|
const lowerModelId = modelId.toLowerCase();
|
||||||
|
if (lowerModelId.includes('haiku')) return 'haiku';
|
||||||
|
if (lowerModelId.includes('opus')) return 'opus';
|
||||||
|
return 'sonnet'; // 默认 sonnet
|
||||||
|
};
|
||||||
|
|
||||||
|
// 根据卡片类型找到对应的实际模型ID
|
||||||
|
const findModelIdByCard = (cardId: string): string => {
|
||||||
|
const model = models.find((m) =>
|
||||||
|
m.modelId.toLowerCase().includes(cardId)
|
||||||
|
);
|
||||||
|
return model?.modelId || value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectedCard = getSelectedCard(value);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex gap-3">
|
||||||
|
{MODEL_CARDS.map((card) => {
|
||||||
|
const isSelected = selectedCard === card.id;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={card.id}
|
||||||
|
onClick={() => {
|
||||||
|
if (!disabled) {
|
||||||
|
const newModelId = findModelIdByCard(card.id);
|
||||||
|
onChange(newModelId);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={disabled}
|
||||||
|
className={cn(
|
||||||
|
'flex flex-col items-center justify-center',
|
||||||
|
'w-[120px] h-[72px] rounded-md',
|
||||||
|
'border-2 transition-all duration-200',
|
||||||
|
'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--color-primary)]',
|
||||||
|
isSelected
|
||||||
|
? 'bg-[var(--color-primary-light)] border-[var(--color-primary)]'
|
||||||
|
: 'bg-[var(--color-bg-tertiary)] border-transparent hover:border-[var(--color-border)]',
|
||||||
|
disabled && 'opacity-50 cursor-not-allowed'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
'text-sm font-semibold',
|
||||||
|
isSelected
|
||||||
|
? 'text-[var(--color-primary)]'
|
||||||
|
: 'text-[var(--color-text-primary)]'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{card.name}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
'text-xs mt-1',
|
||||||
|
isSelected
|
||||||
|
? 'text-[var(--color-primary)]'
|
||||||
|
: 'text-[var(--color-text-tertiary)]'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{card.description}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
183
src/components/ui/UserMenu.tsx
Normal file
183
src/components/ui/UserMenu.tsx
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useRef, useEffect } from 'react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { Moon, Sun, Settings, LogOut, ChevronUp, ChevronDown } from 'lucide-react';
|
||||||
|
import { Avatar } from '@/components/ui/Avatar';
|
||||||
|
import { useSettings } from '@/hooks/useSettings';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import type { User } from '@/types';
|
||||||
|
|
||||||
|
interface UserMenuProps {
|
||||||
|
user: User;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function UserMenu({ user }: UserMenuProps) {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const menuRef = useRef<HTMLDivElement>(null);
|
||||||
|
const router = useRouter();
|
||||||
|
const { settings, updateSettings } = useSettings();
|
||||||
|
|
||||||
|
// 点击外部关闭菜单
|
||||||
|
useEffect(() => {
|
||||||
|
function handleClickOutside(event: MouseEvent) {
|
||||||
|
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
|
||||||
|
setIsOpen(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isOpen) {
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
};
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
// ESC 键关闭菜单
|
||||||
|
useEffect(() => {
|
||||||
|
function handleEscKey(event: KeyboardEvent) {
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
setIsOpen(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isOpen) {
|
||||||
|
document.addEventListener('keydown', handleEscKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('keydown', handleEscKey);
|
||||||
|
};
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
// 切换主题
|
||||||
|
const handleToggleTheme = async () => {
|
||||||
|
const newTheme = settings.theme === 'dark' ? 'light' : 'dark';
|
||||||
|
try {
|
||||||
|
await updateSettings({ theme: newTheme });
|
||||||
|
// 可选：更新 document 的 class 来应用主题
|
||||||
|
document.documentElement.setAttribute('data-theme', newTheme);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to update theme:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 进入设置页面
|
||||||
|
const handleGoToSettings = () => {
|
||||||
|
setIsOpen(false);
|
||||||
|
router.push('/settings');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 登出
|
||||||
|
const handleLogout = () => {
|
||||||
|
setIsOpen(false);
|
||||||
|
// TODO: 实现实际的登出逻辑
|
||||||
|
// 暂时跳转到首页
|
||||||
|
console.log('Logging out...');
|
||||||
|
router.push('/');
|
||||||
|
};
|
||||||
|
|
||||||
|
const isDarkMode = settings.theme === 'dark';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={menuRef} className="relative">
|
||||||
|
{/* 触发器 - 用户信息区域 */}
|
||||||
|
<button
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-3 w-full p-2 rounded-lg cursor-pointer transition-colors',
|
||||||
|
'hover:bg-[var(--color-bg-hover)]',
|
||||||
|
isOpen && 'bg-[var(--color-bg-hover)]'
|
||||||
|
)}
|
||||||
|
aria-expanded={isOpen}
|
||||||
|
aria-haspopup="true"
|
||||||
|
>
|
||||||
|
<Avatar name={user.name} size="md" />
|
||||||
|
<div className="flex-1 min-w-0 text-left">
|
||||||
|
<div className="text-sm text-[var(--color-text-primary)] truncate">
|
||||||
|
{user.email}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-[var(--color-text-tertiary)] capitalize">
|
||||||
|
{user.plan} plan
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{isOpen ? (
|
||||||
|
<ChevronUp size={16} className="text-[var(--color-text-tertiary)] flex-shrink-0" />
|
||||||
|
) : (
|
||||||
|
<ChevronDown size={16} className="text-[var(--color-text-tertiary)] flex-shrink-0" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* 弹出菜单 - 向上弹出 */}
|
||||||
|
{isOpen && (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'absolute bottom-full left-0 right-0 mb-2',
|
||||||
|
'bg-[var(--color-bg-primary)] rounded-xl',
|
||||||
|
'border border-[var(--color-border-light)]',
|
||||||
|
'shadow-[var(--shadow-dropdown)]',
|
||||||
|
'overflow-hidden',
|
||||||
|
'animate-pop-up',
|
||||||
|
'z-50'
|
||||||
|
)}
|
||||||
|
role="menu"
|
||||||
|
aria-orientation="vertical"
|
||||||
|
>
|
||||||
|
{/* 菜单项 */}
|
||||||
|
<div className="py-1">
|
||||||
|
{/* Dark mode 切换 */}
|
||||||
|
<button
|
||||||
|
onClick={handleToggleTheme}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-3 w-full px-4 py-3',
|
||||||
|
'text-sm text-[var(--color-text-primary)]',
|
||||||
|
'hover:bg-[var(--color-bg-hover)] transition-colors'
|
||||||
|
)}
|
||||||
|
role="menuitem"
|
||||||
|
>
|
||||||
|
{isDarkMode ? (
|
||||||
|
<Sun size={18} className="text-[var(--color-text-secondary)]" />
|
||||||
|
) : (
|
||||||
|
<Moon size={18} className="text-[var(--color-text-secondary)]" />
|
||||||
|
)}
|
||||||
|
<span>{isDarkMode ? 'Light mode' : 'Dark mode'}</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Settings */}
|
||||||
|
<button
|
||||||
|
onClick={handleGoToSettings}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-3 w-full px-4 py-3',
|
||||||
|
'text-sm text-[var(--color-text-primary)]',
|
||||||
|
'hover:bg-[var(--color-bg-hover)] transition-colors'
|
||||||
|
)}
|
||||||
|
role="menuitem"
|
||||||
|
>
|
||||||
|
<Settings size={18} className="text-[var(--color-text-secondary)]" />
|
||||||
|
<span>Settings</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* 分隔线 */}
|
||||||
|
<div className="my-1 border-t border-[var(--color-border-light)]" />
|
||||||
|
|
||||||
|
{/* Log out */}
|
||||||
|
<button
|
||||||
|
onClick={handleLogout}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-3 w-full px-4 py-3',
|
||||||
|
'text-sm text-red-500',
|
||||||
|
'hover:bg-red-50 transition-colors'
|
||||||
|
)}
|
||||||
|
role="menuitem"
|
||||||
|
>
|
||||||
|
<LogOut size={18} />
|
||||||
|
<span>Log out</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user