feat(ai-analysis): 添加详情页智能分析入口

apps/web/app/products/[id]/page.tsx

@@ -10,6 +10,10 @@ import { useOvertimeStore } from '@/stores/useOvertimeStore';
 import { RequirementTable } from '@/components/product/RequirementTable';
 import { RequirementForm } from '@/components/product/RequirementForm';
 import { ProductForm } from '@/components/product/ProductForm';
+import { AnalysisContextDrawer } from '@/components/analysis/AnalysisContextDrawer';
+import { AnalysisEntryButton } from '@/components/analysis/AnalysisEntryButton';
+import { useAuthStore } from '@/stores/useAuthStore';
+import { useMemberStore } from '@/stores/useMemberStore';
 
 const TABS = [
   { key: 'requirements' as const, label: '需求池' },
@@ -29,10 +33,13 @@ export default function ProductDetailPage() {
     deleteRequirement,
   } = useRequirementStore();
   const { records, fetchRecords } = useOvertimeStore();
+  const user = useAuthStore((state) => state.user);
+  const roles = useMemberStore((state) => state.roles);
 
   const [showReqForm, setShowReqForm] = useState(false);
   const [editingReq, setEditingReq] = useState<any>(null);
   const [editingProduct, setEditingProduct] = useState(false);
+  const [showAnalysisDrawer, setShowAnalysisDrawer] = useState(false);
   const [activeTab, setActiveTab] = useState<'requirements' | 'projects' | 'versions'>('requirements');
   const [reqStatusFilter, setReqStatusFilter] = useState<RequirementStatus | null>(null);
 
@@ -47,6 +54,10 @@ export default function ProductDetailPage() {
     if (reqStatusFilter) list = list.filter((r) => r.status === reqStatusFilter);
     return list;
   }, [requirements, productId, reqStatusFilter]);
+  const currentPermissions = useMemo(
+    () => roles.find((role) => role.id === user?.roleId)?.permissions ?? [],
+    [roles, user?.roleId],
+  );
 
   const handleFilterChange = (status: RequirementStatus | null) => {
     setReqStatusFilter(status);
@@ -93,7 +104,8 @@ export default function ProductDetailPage() {
             {currentProduct.name}
           </h1>
         </div>
-        <div className="flex gap-1.5">
+        <div className="flex items-center gap-1.5">
+          <AnalysisEntryButton onClick={() => setShowAnalysisDrawer(true)} />
           <button
             onClick={() => setEditingProduct(true)}
             className="flex h-8 items-center gap-1 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-2.5 text-[12px] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]"
@@ -215,6 +227,14 @@ export default function ProductDetailPage() {
           )}
         </div>
       </div>
+
+      <AnalysisContextDrawer
+        open={showAnalysisDrawer}
+        title={`产品智能分析 · ${currentProduct.name}`}
+        context={{ surface: 'product_detail', productId: currentProduct.id }}
+        permissions={currentPermissions}
+        onClose={() => setShowAnalysisDrawer(false)}
+      />
     </div>
   );
 }