[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import RequirementsWorkspace from "@/components/requirements-workspace" import KnowledgeHub from "@/components/knowledge-hub" import AIAssistantPanel from "@/components/ai-assistant-panel" import { ThemeProvider } from "@/components/theme-provider" export default function Home() { return (

) } function RequirementsEngineeringSystem() { const [currentRequirement, setCurrentRequirement] = useState("") const [conversation, setConversation] = useState>([]) const [documentContent, setDocumentContent] = useState>([]) const [activeKnowledgeSource, setActiveKnowledgeSource] = useState(null) const [qualityAlerts, setQualityAlerts] = useState< Array<{ id: string; type: string; message: string; relatedReqId: string }> >([]) const handleSendMessage = (message: string) => { // Add user message to conversation const newConversation = [...conversation, { role: "user", content: message }] setConversation(newConversation) // Simulate AI response setTimeout(() => { let aiResponse = "" if (newConversation.length === 1) { aiResponse = "感谢您的初始需求。为了更好地理解会议室预订系统的需求，我需要了解一些细节：\n\n1. 用户需要看到哪些会议室信息（如容量、设备）？\n2. 预订时段是否有特殊规则（如最小/最大时长）？\n3. 是否需要集成日历功能？" // Add initial requirement to document setDocumentContent([ { id: "intro-1", type: "introduction", content: "## 1. 引言\n\n### 1.1 目的\n本文档旨在定义在线会议室预订系统的需求。", }, { id: "fr-1", type: "functional", content: "## 2. 功能需求\n\n### 2.1 会议室预订\nFR1: 系统应允许用户查看可用会议室列表。", }, ]) // Add quality alert setQualityAlerts([ { id: "qa-1", type: "ambiguity", message: "'可用会议室列表'不够明确，需要定义显示哪些信息。", relatedReqId: "fr-1", }, ]) // Highlight knowledge source setActiveKnowledgeSource("company-policy") } else if (newConversation.length === 3) { aiResponse = "非常感谢您提供的信息。根据您的回答，我已经更新了需求文档。我注意到您提到了需要显示会议室的容量和设备信息，这对于用户选择合适的会议室非常重要。\n\n您是否还需要系统支持会议室预订的审批流程？" // Update document content setDocumentContent((prev) => { const updated = [...prev] const frIndex = updated.findIndex((item) => item.id === "fr-1") if (frIndex !== -1) { updated[frIndex] = { ...updated[frIndex], content: "## 2. 功能需求\n\n### 2.1 会议室预订\nFR1: 系统应允许用户查看可用会议室列表，包含会议室名称、容量、可用设备和位置信息。\nFR2: 用户应能按时间段、容量和设备筛选会议室。\nFR3: 系统应支持用户预订会议室，并指定预订时间段（最短30分钟，最长8小时）。", } } return updated }) // Update quality alerts setQualityAlerts([ { id: "qa-2", type: "testability", message: "FR2需要明确筛选条件的组合方式（AND/OR）。", relatedReqId: "fr-1", }, ]) } if (aiResponse) { setConversation((prev) => [...prev, { role: "assistant", content: aiResponse }]) } }, 1000) } const handleDocumentEdit = (id: string, newContent: string) => { setDocumentContent((prev) => prev.map((item) => (item.id === id ? { ...item, content: newContent } : item))) // Simulate quality check on edit if (newContent.includes("快速响应")) { setQualityAlerts((prev) => [ ...prev, { id: `qa-${Date.now()}`, type: "testability", message: "'快速响应'定义不明确，建议量化为具体时间。", relatedReqId: id, }, ]) } } return (

{/* Left Panel: Knowledge Hub */} {/* Center Panel: Main Workspace */} {/* Right Panel: AI Assistant */} { // Scroll to requirement in document document.getElementById(reqId)?.scrollIntoView({ behavior: "smooth" }) }} />

) } [V0_FILE]typescriptreact:file="components/requirements-workspace.tsx" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Send, MessageSquare, FileText } from "lucide-react" import { ScrollArea } from "@/components/ui/scroll-area" import { cn } from "@/lib/utils" interface RequirementsWorkspaceProps { currentRequirement: string setCurrentRequirement: (value: string) => void conversation: Array<{ role: string; content: string }> documentContent: Array<{ id: string; type: string; content: string }> onSendMessage: (message: string) => void onDocumentEdit: (id: string, newContent: string) => void } export default function RequirementsWorkspace({ currentRequirement, setCurrentRequirement, conversation, documentContent, onSendMessage, onDocumentEdit, }: RequirementsWorkspaceProps) { const [activeTab, setActiveTab] = useState("conversation") const [editingId, setEditingId] = useState(null) const [editContent, setEditContent] = useState("") const messagesEndRef = useRef(null) useEffect(() => { if (messagesEndRef.current && activeTab === "conversation") { messagesEndRef.current.scrollIntoView({ behavior: "smooth" }) } }, [conversation, activeTab]) const handleSend = () => { if (currentRequirement.trim()) { onSendMessage(currentRequirement) setCurrentRequirement("") } } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSend() } } const startEditing = (id: string, content: string) => { setEditingId(id) setEditContent(content) } const saveEdit = () => { if (editingId) { onDocumentEdit(editingId, editContent) setEditingId(null) } } return (

{/* Header */}

需求工程工作区

与 AI 助手协作定义和完善您的需求

{/* Initial Intent Input */} {conversation.length === 0 && (

请用一句话描述您的核心需求或意图

setCurrentRequirement(e.target.value)}
              onKeyDown={handleKeyDown}
              className="flex-1 resize-none"
            />
            <Button onClick={handleSend}>
              <Send className="h-4 w-4 mr-2" />
              发送
            </Button>
          </div>
        </div>
      )}

{/* Tabs for Conversation and Document */}
      <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col">
        <TabsList className="mx-4 mt-2 justify-start">
          <TabsTrigger value="conversation" className="flex items-center">
            <MessageSquare className="h-4 w-4 mr-2" />
            对话流
          </TabsTrigger>
          <TabsTrigger value="document" className="flex items-center">
            <FileText className="h-4 w-4 mr-2" />
            需求文档
          </TabsTrigger>
        </TabsList>

{/* Conversation Tab */}
        <TabsContent value="conversation" className="flex-1 flex flex-col p-0 m-0">
          <ScrollArea className="flex-1 p-4">
            {conversation.map((message, index) => (
              <div
                key={index}
                className={cn(
                  "mb-4 max-w-[80%] rounded-lg p-4",
                  message.role === "user" ? "ml-auto bg-blue-100 text-blue-900" : "bg-gray-100 text-gray-800",
                )}
              >
                <div className="whitespace-pre-wrap">{message.content}</div>
              </div>
            ))}
            <div ref={messagesEndRef} />
          </ScrollArea>

{conversation.length > 0 && (
            <div className="p-4 border-t border-gray-200 bg-white">
              <div className="flex gap-2">
                <Textarea
                  placeholder="输入您的回复..."
                  value={currentRequirement}
                  onChange={(e) => setCurrentRequirement(e.target.value)}
                  onKeyDown={handleKeyDown}
                  className="flex-1 resize-none"
                />
                <Button onClick={handleSend}>
                  <Send className="h-4 w-4 mr-2" />
                  发送
                </Button>
              </div>
            </div>
          )}
        </TabsContent>

{/* Document Tab */}
        <TabsContent value="document" className="flex-1 p-0 m-0">
          <ScrollArea className="flex-1 p-4">
            {documentContent.map((section) => (
              <Card key={section.id} id={section.id} className="mb-4">
                <CardContent className="p-4">
                  {editingId === section.id ? (
                    <div className="space-y-2">
                      <Textarea
                        value={editContent}
                        onChange={(e) => setEditContent(e.target.value)}
                        className="min-h-[200px] font-mono text-sm"
                      />
                      <div className="flex justify-end gap-2">
                        <Button variant="outline" onClick={() => setEditingId(null)}>
                          取消
                        </Button>
                        <Button onClick={saveEdit}>保存</Button>
                      </div>
                    </div>
                  ) : (
                    <div className="space-y-2">
                      <div className="prose prose-sm max-w-none">
                        <div dangerouslySetInnerHTML={{ __html: section.content.replace(/\n/g, "<br>") }} />
                      </div>
                      <div className="flex justify-end">
                        <Button variant="ghost" size="sm" onClick={() => startEditing(section.id, section.content)}>
                          编辑
                        </Button>
                      </div>
                    </div>
                  )}
                </CardContent>
              </Card>
            ))}
          </ScrollArea>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/knowledge-hub.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"
import { Upload, FileText, Book, Network, Plus } from "lucide-react"
import { cn } from "@/lib/utils"

interface KnowledgeHubProps {
  activeSource: string | null
  onSourceSelect: (sourceId: string | null) => void
}

export default function KnowledgeHub({ activeSource, onSourceSelect }: KnowledgeHubProps) {
  const [activeTab, setActiveTab] = useState("explicit")

const explicitKnowledge = [
    {
      id: "company-policy",
      title: "公司会议室管理规范",
      type: "document",
      date: "2023-10-15",
      excerpt: "会议室预订需提前24小时，取消需提前4小时...",
    },
    {
      id: "current-system",
      title: "现有会议室管理后台截图",
      type: "image",
      date: "2023-11-20",
      excerpt: "展示了当前系统的会议室列表和筛选功能",
    },
    {
      id: "ieee-29148",
      title: "IEEE 29148 需求工程标准",
      type: "standard",
      date: "2022-01-10",
      excerpt: "软件需求规格说明书的结构和内容指南",
    },
  ]

const implicitKnowledge = [
    {
      id: "code-insight-1",
      title: "从代码库分析",
      source: "会议室预订API",
      insight: "检测到现有API支持按部门筛选会议室，新系统可能需要保持此功能",
    },
    {
      id: "interview-1",
      title: "专家访谈记录",
      source: "行政部门主管",
      insight: "会议室预订冲突是当前系统的主要问题，新系统应提供更好的冲突检测",
    },
  ]

const glossaryTerms = [
    { term: "会议室", definition: "公司内用于举行会议的专用空间" },
    { term: "预订时段", definition: "用户预留会议室的特定时间段" },
    { term: "冲突检测", definition: "系统检查并防止多个预订在同一时间段占用同一会议室的机制" },
  ]

return (
    <div className="w-80 bg-white border-r border-gray-200 flex flex-col h-full">
      <div className="p-4 border-b border-gray-200">
        <h2 className="text-lg font-semibold text-gray-800">情境与知识中心</h2>
        <p className="text-xs text-gray-500">管理和浏览项目相关知识</p>
      </div>

<ScrollArea className="flex-1">
            <div className="p-2 space-y-2">
              {explicitKnowledge.map((item) => (
                <Card
                  key={item.id}
                  className={cn(
                    "cursor-pointer hover:border-blue-200 transition-colors",
                    activeSource === item.id && "border-blue-500 bg-blue-50",
                  )}
                  onClick={() => onSourceSelect(item.id === activeSource ? null : item.id)}
                >
                  <CardHeader className="p-3 pb-0">
                    <div className="flex justify-between items-start">
                      <CardTitle className="text-sm font-medium flex items-center">
                        {item.type === "document" && <FileText className="h-3 w-3 mr-1 text-blue-600" />}
                        {item.type === "image" && (
                          <img src="/placeholder.svg?height=12&width=12" className="h-3 w-3 mr-1" alt="" />
                        )}
                        {item.type === "standard" && <Book className="h-3 w-3 mr-1 text-purple-600" />}
                        {item.title}
                      </CardTitle>
                      <Badge variant="outline" className="text-[10px] h-4">
                        {item.type}
                      </Badge>
                    </div>
                  </CardHeader>
                  <CardContent className="p-3 pt-2">
                    <p className="text-xs text-gray-600">{item.excerpt}</p>
                    <p className="text-[10px] text-gray-400 mt-1">更新于: {item.date}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </ScrollArea>
        </TabsContent>

<TabsContent value="implicit" className="flex-1 flex flex-col p-0 m-0">
          <ScrollArea className="flex-1">
            <div className="p-2 space-y-2">
              {implicitKnowledge.map((item) => (
                <Card key={item.id} className="cursor-pointer hover:border-blue-200 transition-colors">
                  <CardHeader className="p-3 pb-0">
                    <CardTitle className="text-sm font-medium">{item.title}</CardTitle>
                    <Badge variant="secondary" className="text-[10px] h-4 w-fit">
                      来源: {item.source}
                    </Badge>
                  </CardHeader>
                  <CardContent className="p-3 pt-2">
                    <p className="text-xs text-gray-600">{item.insight}</p>
                    <div className="flex justify-end mt-1 gap-1">
                      <Button variant="ghost" size="sm" className="h-6 text-[10px]">
                        确认
                      </Button>
                      <Button variant="ghost" size="sm" className="h-6 text-[10px]">
                        标记相关
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </ScrollArea>
        </TabsContent>
      </Tabs>

{/* Project Glossary */}
      <div className="border-t border-gray-200 p-3">
        <div className="flex justify-between items-center mb-2">
          <h3 className="text-sm font-medium text-gray-700">项目词汇表</h3>
          <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
            <Plus className="h-3 w-3" />
          </Button>
        </div>
        <ScrollArea className="h-32">
          <div className="space-y-2">
            {glossaryTerms.map((item, index) => (
              <div key={index} className="text-xs">
                <span className="font-medium text-gray-800">{item.term}</span>
                <span className="text-gray-500"> - {item.definition}</span>
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>

{/* Knowledge Graph (Simplified) */}
      <div className="border-t border-gray-200 p-3">
        <div className="flex justify-between items-center">
          <h3 className="text-sm font-medium text-gray-700">知识图谱浏览器</h3>
          <Button variant="outline" size="sm" className="h-6 text-[10px]">
            <Network className="h-3 w-3 mr-1" />
            查看
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ai-assistant-panel.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"
import { AlertTriangle, CheckCircle, HelpCircle, FileDown, FileSearch, Star } from "lucide-react"

interface QualityAlert {
  id: string
  type: string
  message: string
  relatedReqId: string
}

interface AIAssistantPanelProps {
  qualityAlerts: QualityAlert[]
  onAlertClick: (reqId: string) => void
}

export default function AIAssistantPanel({ qualityAlerts, onAlertClick }: AIAssistantPanelProps) {
  const suggestions = [
    {
      id: "sug-1",
      content: "为了确保需求的完整性，您是否考虑过会议室预订冲突的处理方式？",
      confidence: 4,
    },
    {
      id: "sug-2",
      content: "我建议为预订功能添加一项非功能性需求：系统应在用户提交预订后5秒内发送确认通知。",
      confidence: 5,
    },
  ]

return (
    <div className="w-80 bg-white border-l border-gray-200 flex flex-col h-full">
      <div className="p-4 border-b border-gray-200">
        <h2 className="text-lg font-semibold text-gray-800">AI 助手与行动面板</h2>
        <p className="text-xs text-gray-500">AI 提问、建议与质量保证</p>
      </div>

{/* AI Questions & Suggestions */}
      <div className="p-3 border-b border-gray-200">
        <h3 className="text-sm font-medium text-gray-700 mb-2">AI 提问与建议</h3>
        <ScrollArea className="h-48">
          <div className="space-y-2">
            {suggestions.map((suggestion) => (
              <Card key={suggestion.id} className="bg-blue-50 border-blue-200">
                <CardContent className="p-3">
                  <div className="flex items-start gap-2">
                    <HelpCircle className="h-4 w-4 text-blue-600 mt-0.5 flex-shrink-0" />
                    <div className="space-y-2 flex-1">
                      <p className="text-xs text-gray-800">{suggestion.content}</p>
                      <div className="flex items-center justify-between">
                        <div className="flex">
                          {Array.from({ length: 5 }).map((_, i) => (
                            <Star
                              key={i}
                              className={`h-3 w-3 ${
                                i < suggestion.confidence ? "text-yellow-500 fill-yellow-500" : "text-gray-300"
                              }`}
                            />
                          ))}
                        </div>
                        <div className="flex gap-1">
                          <Button variant="ghost" size="sm" className="h-6 text-[10px]">
                            忽略
                          </Button>
                          <Button size="sm" className="h-6 text-[10px]">
                            采纳
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </ScrollArea>
      </div>

{/* Quality Assurance */}
      <div className="p-3 border-b border-gray-200">
        <h3 className="text-sm font-medium text-gray-700 mb-2">实时质量保证</h3>
        <ScrollArea className="h-48">
          <div className="space-y-2">
            {qualityAlerts.map((alert) => (
              <Card
                key={alert.id}
                className="border-amber-200 hover:bg-amber-50 cursor-pointer transition-colors"
                onClick={() => onAlertClick(alert.relatedReqId)}
              >
                <CardContent className="p-3">
                  <div className="flex items-start gap-2">
                    <AlertTriangle className="h-4 w-4 text-amber-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <div className="flex items-center gap-1 mb-1">
                        <Badge
                          variant="outline"
                          className={`text-[10px] h-4 ${
                            alert.type === "ambiguity"
                              ? "border-amber-500 text-amber-700"
                              : alert.type === "testability"
                                ? "border-purple-500 text-purple-700"
                                : "border-red-500 text-red-700"
                          }`}
                        >
                          {alert.type === "ambiguity"
                            ? "模糊性"
                            : alert.type === "testability"
                              ? "可测试性"
                              : alert.type === "inconsistency"
                                ? "不一致性"
                                : "不完整性"}
                        </Badge>
                      </div>
                      <p className="text-xs text-gray-800">{alert.message}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </ScrollArea>
      </div>

{/* Core Operations */}
      <div className="p-3 mt-auto border-t border-gray-200">
        <h3 className="text-sm font-medium text-gray-700 mb-2">核心操作</h3>
        <div className="grid grid-cols-2 gap-2">
          <Button className="w-full text-xs justify-start">
            <FileDown className="h-3 w-3 mr-1" />
            生成需求文档
          </Button>
          <Button variant="outline" className="w-full text-xs justify-start">
            <FileSearch className="h-3 w-3 mr-1" />
            质量分析
          </Button>
          <Button variant="outline" className="w-full text-xs justify-start">
            <CheckCircle className="h-3 w-3 mr-1" />
            请求专家评审
          </Button>
        </div>
      </div>
    </div>
  )
}</article></body></html>