技能详情对话框新增文件浏览面板:支持预览、编辑、下载、复制路径

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend-web/src/components/workspace/skills/skill-detail-dialog.tsx

@@ -4,6 +4,7 @@ import {
   CopyIcon,
   EyeIcon,
   FileCode2Icon,
+  FilesIcon,
   FileTextIcon,
   GlobeIcon,
   Loader2,
@@ -25,12 +26,15 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { MarkdownContent } from "@/components/workspace/messages/markdown-content";
+import { SkillFilePreviewDialog } from "@/components/workspace/skills/skill-file-preview-dialog";
+import { SkillFileTree } from "@/components/workspace/skills/skill-file-tree";
 import { getStoredAuth } from "@/core/auth";
 import { useI18n } from "@/core/i18n/hooks";
 import {
   useSetSkillDetail,
   useSkill,
   useSkillContent,
+  useSkillFiles,
 } from "@/core/skills/hooks";
 import type { Skill } from "@/core/skills/type";
 import { reasoningPlugins } from "@/core/streamdown";
@@ -82,10 +86,11 @@ export function SkillDetailDialog({
 
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState("");
-  const [activeTab, setActiveTab] = useState<"detail" | "source" | null>(
-    null,
-  );
+  const [activeTab, setActiveTab] = useState<
+    "detail" | "source" | "files" | null
+  >(null);
   const [showRawSource, setShowRawSource] = useState(false);
+  const [openedFilePath, setOpenedFilePath] = useState<string | null>(null);
 
   const canManage = useMemo(() => canManageSkill(skill), [skill]);
   const {
@@ -94,10 +99,18 @@ export function SkillDetailDialog({
     error: contentError,
   } = useSkillContent(open && canManage ? skillName : null);
 
+  const filesEnabled = open && canManage && activeTab === "files";
+  const {
+    data: filesData,
+    isLoading: isFilesLoading,
+    error: filesError,
+  } = useSkillFiles(filesEnabled ? skillName : null);
+
   useEffect(() => {
     setEditing(false);
     setActiveTab(null);
     setShowRawSource(false);
+    setOpenedFilePath(null);
   }, [open, skillName]);
 
   const skillBody = useMemo(() => {
@@ -130,6 +143,7 @@ export function SkillDetailDialog({
   }
 
   return (
+    <>
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
         className="flex flex-col gap-0 overflow-hidden p-0"
@@ -192,6 +206,12 @@ export function SkillDetailDialog({
                 <FileTextIcon className="mr-1 size-3.5" />
                 {tx.detailSectionTitle}
               </TabsTrigger>
+              {canManage && (
+                <TabsTrigger value="files" className="text-xs">
+                  <FilesIcon className="mr-1 size-3.5" />
+                  {tx.filesSectionTitle}
+                </TabsTrigger>
+              )}
               {canManage && (
                 <TabsTrigger value="source" className="text-xs">
                   <FileCode2Icon className="mr-1 size-3.5" />
@@ -309,6 +329,34 @@ export function SkillDetailDialog({
             )}
           </TabsContent>
 
+          {canManage && (
+            <TabsContent
+              value="files"
+              className="m-0 min-h-0 flex-1 overscroll-contain px-6 py-4 data-[state=inactive]:hidden"
+              style={{ overflowY: "auto" }}
+            >
+              {isFilesLoading ? (
+                <div className="text-muted-foreground flex items-center justify-center gap-2 py-12 text-sm">
+                  <Loader2 className="size-4 animate-spin" />
+                  {t.common.loading}
+                </div>
+              ) : filesError ? (
+                <div className="text-destructive py-6 text-sm">
+                  {filesError instanceof Error
+                    ? filesError.message
+                    : String(filesError)}
+                </div>
+              ) : filesData ? (
+                <SkillFileTree
+                  root={filesData.root}
+                  selectedPath={openedFilePath}
+                  onOpen={(path) => setOpenedFilePath(path)}
+                  emptyText={tx.filesEmpty}
+                />
+              ) : null}
+            </TabsContent>
+          )}
+
           {canManage && (
             <TabsContent
               value="source"
@@ -345,5 +393,15 @@ export function SkillDetailDialog({
         )}
       </DialogContent>
     </Dialog>
+    <SkillFilePreviewDialog
+      skillName={skill?.name ?? null}
+      path={openedFilePath}
+      treeEditable={!!filesData?.editable}
+      open={!!openedFilePath}
+      onOpenChange={(next) => {
+        if (!next) setOpenedFilePath(null);
+      }}
+    />
+    </>
   );
 }