work-agent 0.1.0

package/app/h5/mobile-profile-page.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { User, Settings, BookOpen, Clock, LogOut, ChevronRight, Bot, Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface UserInfo {
+  userId: string;
+  name?: string;
+  email?: string;
+}
+
+export default function MobileProfilePage() {
+  const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
+  const [stats, setStats] = useState({ ticketsCount: 0, sessionsCount: 0, skillsCount: 0 });
+
+  useEffect(() => {
+    const uid = localStorage.getItem('userId');
+    if (uid) {
+      setUserInfo({ userId: uid });
+      
+      async function loadStats() {
+        try {
+          const [ticketsRes, skillsRes] = await Promise.all([
+            fetch(`/api/tickets?limit=1`),
+            fetch(`/api/user/skills?userId=${uid}`),
+          ]);
+          const ticketsData = await ticketsRes.json();
+          const skillsData = await skillsRes.json();
+          
+          setStats({
+            ticketsCount: ticketsData.total || 0,
+            sessionsCount: 0,
+            skillsCount: (skillsData.skills || []).length,
+          });
+        } catch (error) {
+          console.error('Failed to load stats:', error);
+        }
+      }
+      loadStats();
+    }
+  }, []);
+
+  const handleLogout = () => {
+    localStorage.removeItem('userId');
+    localStorage.removeItem('assistant-session-id');
+    window.location.href = '/login';
+  };
+
+  if (!userInfo) {
+    return (
+      <div className="flex-1 flex items-center justify-center p-4">
+        <div className="text-center">
+          <p className="text-muted-foreground mb-4">请先登录</p>
+          <Button onClick={() => window.location.href = '/login'}>去登录</Button>
+        </div>
+      </div>
+    );
+  }
+
+  const menuItems = [
+    { icon: Bot, label: '我的技能', href: '/my/skills', badge: stats.skillsCount },
+    { icon: BookOpen, label: '知识库', href: '/my/knowledge', badge: null },
+    { icon: Clock, label: '定时任务', href: '/my/scheduled-tasks', badge: null },
+    { icon: Settings, label: '设置', href: '/my', badge: null },
+  ];
+
+  return (
+    <div className="flex-1 overflow-y-auto p-4">
+      {/* 用户信息卡片 */}
+      <div className="bg-card border rounded-xl p-4 mb-4">
+        <div className="flex items-center gap-3">
+          <div className="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center">
+            <User className="h-8 w-8 text-primary" />
+          </div>
+          <div>
+            <p className="font-medium">用户</p>
+            <p className="text-xs text-muted-foreground truncate max-w-[200px]">{userInfo.userId}</p>
+          </div>
+        </div>
+        
+        {/* 统计信息 */}
+        <div className="grid grid-cols-3 gap-2 mt-4 pt-4 border-t">
+          <div className="text-center">
+            <p className="text-xl font-semibold">{stats.ticketsCount}</p>
+            <p className="text-xs text-muted-foreground">工单</p>
+          </div>
+          <div className="text-center">
+            <p className="text-xl font-semibold">{stats.sessionsCount}</p>
+            <p className="text-xs text-muted-foreground">会话</p>
+          </div>
+          <div className="text-center">
+            <p className="text-xl font-semibold">{stats.skillsCount}</p>
+            <p className="text-xs text-muted-foreground">技能</p>
+          </div>
+        </div>
+      </div>
+
+      {/* 菜单列表 */}
+      <div className="space-y-1">
+        {menuItems.map((item) => (
+          <button
+            key={item.label}
+            onClick={() => {
+              window.location.href = item.href + '?desktop=true';
+            }}
+            className="w-full flex items-center justify-between p-3 bg-card border rounded-lg hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-3">
+              <item.icon className="h-5 w-5 text-muted-foreground" />
+              <span>{item.label}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              {item.badge !== null && item.badge > 0 && (
+                <span className="bg-primary/10 text-primary text-xs px-2 py-0.5 rounded-full">
+                  {item.badge}
+                </span>
+              )}
+              <ChevronRight className="h-4 w-4 text-muted-foreground" />
+            </div>
+          </button>
+        ))}
+      </div>
+
+      {/* 桌面版入口 */}
+      <div className="mt-4 pt-4 border-t">
+        <button
+          onClick={() => {
+            window.location.href = '/?desktop=true';
+          }}
+          className="w-full flex items-center justify-center gap-2 p-3 bg-muted/50 rounded-lg hover:bg-muted"
+        >
+          <ChevronRight className="h-4 w-4 rotate-180" />
+          <span className="text-sm">切换到桌面版</span>
+        </button>
+      </div>
+
+      {/* 退出登录 */}
+      <div className="mt-4">
+        <Button variant="outline" className="w-full text-red-600 border-red-200 hover:bg-red-50" onClick={handleLogout}>
+          <LogOut className="h-4 w-4 mr-2" />
+          退出登录
+        </Button>
+      </div>
+    </div>
+  );
+}

package/app/h5/mobile-tickets-page.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { ClipboardList } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+
+interface Ticket {
+  id: string;
+  title: string;
+  type: string;
+  status: string;
+  riskLevel: string;
+  createdAt: string;
+}
+
+export default function MobileTicketsPage() {
+  const [tickets, setTickets] = useState<Ticket[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const response = await fetch('/api/tickets?limit=50');
+        if (!response.ok) throw new Error('Failed to load');
+        const data = await response.json();
+        setTickets(Array.isArray(data.tickets) ? data.tickets.slice(0, 50) : []);
+      } catch (error) {
+        console.error('Failed to load tickets:', error);
+        setTickets([]);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+
+  const getStatusBadge = (status: string) => {
+    const config: Record<string, { label: string; className: string }> = {
+      draft: { label: '草稿', className: 'bg-gray-100 text-gray-800' },
+      pending: { label: '待审核', className: 'bg-yellow-100 text-yellow-800' },
+      approved: { label: '已批准', className: 'bg-green-100 text-green-800' },
+      rejected: { label: '已拒绝', className: 'bg-red-100 text-red-800' },
+      executing: { label: '执行中', className: 'bg-blue-100 text-blue-800' },
+      completed: { label: '已完成', className: 'bg-green-100 text-green-800' },
+      failed: { label: '失败', className: 'bg-red-100 text-red-800' },
+    };
+    const { label, className } = config[status] || config.draft;
+    return <span className={`px-2 py-0.5 rounded-full text-xs ${className}`}>{label}</span>;
+  };
+
+  const getRiskBadge = (risk: string) => {
+    const config: Record<string, { label: string; className: string }> = {
+      low: { label: '低', className: 'bg-green-100 text-green-800' },
+      medium: { label: '中', className: 'bg-yellow-100 text-yellow-800' },
+      high: { label: '高', className: 'bg-orange-100 text-orange-800' },
+      critical: { label: '极高', className: 'bg-red-100 text-red-800' },
+    };
+    const { label, className } = config[risk] || config.medium;
+    return <span className={`px-1.5 py-0.5 rounded text-xs ${className}`}>{label}</span>;
+  };
+
+  if (loading) {
+    return <div className="flex-1 flex items-center justify-center">加载中...</div>;
+  }
+
+  if (selectedTicket) {
+    return (
+      <div className="flex-1 overflow-y-auto p-4">
+        <div className="flex items-center gap-2 mb-4">
+          <Button variant="ghost" size="sm" onClick={() => setSelectedTicket(null)} className="-ml-2">
+            ← 返回
+          </Button>
+        </div>
+        <h3 className="font-semibold text-lg mb-3">{selectedTicket.title}</h3>
+        <div className="space-y-3">
+          <div className="flex items-center gap-2">
+            {getStatusBadge(selectedTicket.status)}
+            {getRiskBadge(selectedTicket.riskLevel)}
+          </div>
+          <div className="text-sm text-muted-foreground">
+            类型: {selectedTicket.type === 'bash-execute' ? '命令执行' : 'Skill 脚本'}
+          </div>
+          <div className="text-xs text-muted-foreground">
+            创建时间: {new Date(selectedTicket.createdAt).toLocaleString('zh-CN')}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto p-3">
+      {tickets.length === 0 ? (
+        <div className="text-center text-muted-foreground py-8">暂无工单</div>
+      ) : (
+        <div className="space-y-2">
+          {tickets.map((ticket) => (
+            <div
+              key={ticket.id}
+              onClick={() => setSelectedTicket(ticket)}
+              className="p-3 bg-muted/30 hover:bg-muted rounded-lg cursor-pointer"
+            >
+              <div className="flex items-start justify-between mb-1">
+                <span className="font-medium text-sm flex-1">{ticket.title}</span>
+                {getStatusBadge(ticket.status)}
+              </div>
+              <div className="text-xs text-muted-foreground flex items-center gap-2">
+                <span>{ticket.type === 'bash-execute' ? '命令' : 'Skill'}</span>
+                {getRiskBadge(ticket.riskLevel)}
+                <span>·</span>
+                <span>{new Date(ticket.createdAt).toLocaleDateString('zh-CN')}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/app/h5/page.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { useState } from 'react';
+import { MobileLayout } from '@/components/mobile-layout';
+import MobileChatPage from './mobile-chat-page';
+import MobileTicketsPage from './mobile-tickets-page';
+import MobileApprovalsPage from './mobile-approvals-page';
+import MobileProfilePage from './mobile-profile-page';
+
+type Tab = 'chat' | 'tickets' | 'approvals' | 'profile';
+
+export default function MobilePage() {
+  const [activeTab, setActiveTab] = useState<Tab>('chat');
+
+  return (
+    <MobileLayout activeTab={activeTab} onTabChange={setActiveTab}>
+      {activeTab === 'chat' && <MobileChatPage />}
+      {activeTab === 'tickets' && <MobileTicketsPage />}
+      {activeTab === 'approvals' && <MobileApprovalsPage />}
+      {activeTab === 'profile' && <MobileProfilePage />}
+    </MobileLayout>
+  );
+}

package/app/h5/ticket-action-buttons.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { ClipboardList } from 'lucide-react';
+
+export function TicketActionButtons({
+  ticketId,
+  ticketStatus,
+  onAction,
+  onViewDetails,
+  loadingTicket,
+}: {
+  ticketId: string;
+  ticketStatus: string;
+  onAction: (ticketId: string, action: 'approve' | 'reject' | 'execute') => void;
+  onViewDetails: () => void;
+  loadingTicket: boolean;
+}) {
+  const [currentStatus, setCurrentStatus] = useState(ticketStatus);
+  const [isOperating, setIsOperating] = useState(false);
+
+  useEffect(() => {
+    async function fetchStatus() {
+      try {
+        const response = await fetch(`/api/tickets/${ticketId}`);
+        if (response.ok) {
+          const data = await response.json();
+          setCurrentStatus(data.ticket?.status || ticketStatus);
+        }
+      } catch (e) {}
+    }
+    fetchStatus();
+  }, [ticketId, ticketStatus]);
+
+  const handleAction = async (action: 'approve' | 'reject' | 'execute') => {
+    setIsOperating(true);
+    if (action === 'approve') setCurrentStatus('approved');
+    else if (action === 'reject') setCurrentStatus('rejected');
+    else if (action === 'execute') setCurrentStatus('executing');
+    try {
+      await onAction(ticketId, action);
+    } finally {
+      setIsOperating(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      <Button variant="ghost" size="sm" onClick={onViewDetails} disabled={loadingTicket} className="h-6 px-2 text-xs">
+        <ClipboardList className="h-3 w-3 mr-1" />
+        详情
+      </Button>
+      {currentStatus === 'pending' && (
+        <>
+          <Button variant="default" size="sm" onClick={() => handleAction('approve')} disabled={isOperating} className="h-6 px-2 text-xs bg-green-600 hover:bg-green-700">
+            批准
+          </Button>
+          <Button variant="destructive" size="sm" onClick={() => handleAction('reject')} disabled={isOperating} className="h-6 px-2 text-xs">
+            拒绝
+          </Button>
+        </>
+      )}
+      {currentStatus === 'approved' && (
+        <Button variant="default" size="sm" onClick={() => handleAction('execute')} disabled={isOperating} className="h-6 px-2 text-xs bg-blue-600 hover:bg-blue-700">
+          执行
+        </Button>
+      )}
+      {currentStatus === 'executing' && (
+        <span className="text-xs text-blue-600 flex items-center gap-1 px-2">
+          <span className="w-1.5 h-1.5 rounded-full bg-blue-600 animate-pulse"></span>
+          执行中...
+        </span>
+      )}
+      {currentStatus === 'completed' && <span className="text-xs text-green-600 px-2">已完成</span>}
+      {currentStatus === 'rejected' && <span className="text-xs text-red-600 px-2">已拒绝</span>}
+      {currentStatus === 'failed' && <span className="text-xs text-red-600 px-2">失败</span>}
+    </div>
+  );
+}

package/app/layout.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from 'next';
+import './globals.css';
+import 'streamdown/styles.css';
+import { ClientLayout } from '@/components/client-layout';
+
+export const metadata: Metadata = {
+	title: '智能工作助手',
+	description: '通用智能助手系统，支持命令执行、工单审批、定时任务等功能',
+	icons: {
+		icon: '/icon.svg',
+	},
+};
+
+export default function RootLayout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	return (
+		<html lang="zh-CN">
+			<body>
+				<ClientLayout>{children}</ClientLayout>
+			</body>
+		</html>
+	);
+}