feat(ui): 集成命令管理面板到 web 和 desktop

- 新增 CommandPanel 组件用于命令列表/搜索/CRUD
- 新增 CommandEditor 组件用于命令编辑/创建
- web/desktop 工具栏添加 Terminal 图标按钮
- 点击按钮打开命令管理面板
This commit is contained in:
2025-12-12 20:15:24 +08:00
parent 2973369778
commit 5a482f78ff
7 changed files with 847 additions and 4 deletions
+6
View File
@@ -9,6 +9,7 @@ import {
Sidebar,
FileBrowser,
ConfigPanel,
CommandPanel,
Toaster,
listSessions,
createSession,
@@ -21,6 +22,7 @@ export function App() {
const [isInitializing, setIsInitializing] = useState(true);
const [showFileBrowser, setShowFileBrowser] = useState(false);
const [showConfig, setShowConfig] = useState(false);
const [showCommands, setShowCommands] = useState(false);
const [sessionTitleUpdate, setSessionTitleUpdate] = useState<{ sessionId: string; name: string } | null>(null);
// 初始化:加载或创建会话
@@ -105,6 +107,7 @@ export function App() {
showFileBrowser={showFileBrowser}
onToggleFileBrowser={() => setShowFileBrowser(!showFileBrowser)}
onOpenConfig={() => setShowConfig(true)}
onOpenCommands={() => setShowCommands(true)}
/>
) : (
<div className="flex-1 flex items-center justify-center h-full">
@@ -153,6 +156,9 @@ export function App() {
{/* 配置面板 */}
{showConfig && <ConfigPanel onClose={() => setShowConfig(false)} responsive />}
{/* 命令面板 */}
{showCommands && <CommandPanel onClose={() => setShowCommands(false)} responsive />}
{/* 移动端底部文件按钮 */}
<button
onClick={() => setShowFileBrowser(true)}
+17 -2
View File
@@ -3,7 +3,7 @@
*/
import { useEffect, useRef } from 'react';
import { WifiOff, MessageSquare, Settings, FolderOpen } from 'lucide-react';
import { WifiOff, MessageSquare, Settings, FolderOpen, Terminal } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import {
useChat,
@@ -22,6 +22,7 @@ interface ChatPageProps {
showFileBrowser?: boolean;
onToggleFileBrowser?: () => void;
onOpenConfig?: () => void;
onOpenCommands?: () => void;
}
export function ChatPage({
@@ -32,6 +33,7 @@ export function ChatPage({
showFileBrowser,
onToggleFileBrowser,
onOpenConfig,
onOpenCommands,
}: ChatPageProps) {
const {
messages,
@@ -126,8 +128,21 @@ export function ChatPage({
<ConnectionStatus />
{/* 工具栏按钮 */}
{(onOpenConfig || onToggleFileBrowser) && (
{(onOpenConfig || onToggleFileBrowser || onOpenCommands) && (
<div className="flex items-center gap-1.5 border-l border-gray-600 pl-3">
{/* 命令按钮 */}
{onOpenCommands && (
<motion.button
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
onClick={onOpenCommands}
className="p-1.5 rounded-lg text-gray-400 hover:text-gray-200 hover:bg-gray-700 transition-colors"
title="Commands"
>
<Terminal size={20} />
</motion.button>
)}
{/* 配置按钮 */}
{onOpenConfig && (
<motion.button