feat: 添加工作区链接功能，更新状态管理以支持获取和显示工作区的秘密链接

src/pages/repos/modules/WorkspaceDetailDialog.tsx

@@ -1,10 +1,15 @@
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider
+} from '@/components/ui/tooltip'
 import { useRepoStore } from '../store'
 import type { WorkspaceOpen } from '../store'
 import {
@@ -19,11 +24,13 @@ import {
   Zap,
   Copy,
   Check,
-  Square
+  Square,
+  Link
 } from 'lucide-react'
-import { useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 import { useShallow } from 'zustand/shallow'
+import clsx from 'clsx'
 
 type LinkItemKey = keyof WorkspaceOpen;
 interface LinkItem {
@@ -35,7 +42,6 @@ interface LinkItem {
 }
 
 const LinkItem = ({ label, icon, url }: { label: string; icon: React.ReactNode; url?: string }) => {
-  const [isHovered, setIsHovered] = useState(false)
   const [isCopied, setIsCopied] = useState(false)
 
   const handleClick = () => {
@@ -43,7 +49,7 @@ const LinkItem = ({ label, icon, url }: { label: string; icon: React.ReactNode;
       copy()
       return;
     }
-    if (url) {
+    if (url && url.startsWith('http')) {
       window.open(url, '_blank')
     }
   }
@@ -57,41 +63,38 @@ const LinkItem = ({ label, icon, url }: { label: string; icon: React.ReactNode;
       toast.error('复制失败')
     }
   }
-  const handleCopy = async (e: React.MouseEvent) => {
-    e.stopPropagation()
-    if (!url) return
-    copy()
-  }
 
   return (
-    <button
-      onClick={handleClick}
-      disabled={!url}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      className="relative flex items-center gap-3 p-3 rounded-lg border border-neutral-200 hover:border-neutral-900 hover:bg-neutral-50 transition-all disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:border-neutral-200 disabled:hover:bg-transparent group"
-    >
-      <div className="w-8 h-8 flex items-center justify-center text-neutral-700">
-        {icon}
-      </div>
-      <span className="text-sm font-medium text-neutral-900 flex-1 text-left truncate">{label}</span>
-      {url && isHovered && (
-        <div
-          onClick={handleCopy}
-          role="button"
-          tabIndex={0}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault()
-              handleCopy(e as any)
-            }
-          }}
-          className="w-6 h-6 flex items-center justify-center text-neutral-500 hover:text-neutral-900 hover:bg-neutral-100 rounded transition-colors cursor-pointer"
-        >
-          {isCopied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
-        </div>
-      )}
-    </button>
+    <TooltipProvider delay={200}>
+      <Tooltip>
+        <TooltipTrigger>
+          <div
+            onClick={handleClick}
+            className="relative flex items-center gap-3 p-3 rounded-lg border border-neutral-200 hover:border-neutral-900 hover:bg-neutral-50 transition-all disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:border-neutral-200 disabled:hover:bg-transparent group"
+          >
+            <div className="w-8 h-8 flex items-center justify-center text-neutral-700">
+              {icon}
+            </div>
+            <span className="text-sm font-medium text-neutral-900 flex-1 text-left truncate">{label}</span>
+            {url && (
+              <div
+                onClick={(e) => {
+                  e.stopPropagation()
+                  copy()
+                }}
+                role="button"
+                className="w-6 h-6 flex items-center justify-center text-neutral-500 hover:text-neutral-900 hover:bg-neutral-100 rounded transition-colors cursor-pointer"
+              >
+                {isCopied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+              </div>
+            )}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{url}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   )
 }
 
@@ -124,6 +127,34 @@ const DevTabContent = ({ linkItems, workspaceLink, stopWorkspace }: {
   )
 }
 
+// Link tab 内容（暂留空）
+const LinkTabContent = () => {
+  const store = useRepoStore(useShallow((state) => ({
+    selectWorkspace: state.selectWorkspace,
+    workspaceSecretLink: state.workspaceSecretLink,
+  })))
+  const links = store.workspaceSecretLink.map(item => ({
+    label: item.title,
+    url: item.value
+  }))
+  if (links.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-8 text-neutral-400">
+        暂无链接, 或工作区未启动
+      </div>
+    )
+  }
+  return (
+    <div className="flex flex-col items-center justify-center py-8 text-neutral-400">
+      <div className="grid grid-cols-1 gap-3 w-full max-w-sm">
+        {links.map(link => (
+          <LinkItem key={link.label} label={link.label} icon={<Link className="w-5 h-5" />} url={link.url} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
 // Work tab 内容（暂留，需要根据 business_id 做事情）
 const WorkTabContent = () => {
   const store = useRepoStore(useShallow((state) => ({
@@ -178,7 +209,7 @@ const WorkTabContent = () => {
 }
 
 export function WorkspaceDetailDialog() {
-  const { showWorkspaceDialog, setShowWorkspaceDialog, workspaceLink, stopWorkspace, workspaceTab, setWorkspaceTab, selectWorkspace } = useRepoStore(useShallow((state) => ({
+  const { showWorkspaceDialog, setShowWorkspaceDialog, workspaceLink, stopWorkspace, workspaceTab, setWorkspaceTab, getWorkspaceSecretLink, selectWorkspace, workspaceSecretLink } = useRepoStore(useShallow((state) => ({
     showWorkspaceDialog: state.showWorkspaceDialog,
     setShowWorkspaceDialog: state.setShowWorkspaceDialog,
     workspaceLink: state.workspaceLink,
@@ -186,6 +217,8 @@ export function WorkspaceDetailDialog() {
     workspaceTab: state.workspaceTab,
     setWorkspaceTab: state.setWorkspaceTab,
     selectWorkspace: state.selectWorkspace,
+    getWorkspaceSecretLink: state.getWorkspaceSecretLink,
+    workspaceSecretLink: state.workspaceSecretLink
   })))
   const linkItems: LinkItem[] = [
     {
@@ -252,6 +285,11 @@ export function WorkspaceDetailDialog() {
       getUrl: (data) => data.codebuddycn
     },
   ].sort((a, b) => (a.order || 0) - (b.order || 0))
+  useEffect(() => {
+    if (selectWorkspace) {
+      getWorkspaceSecretLink(selectWorkspace)
+    }
+  }, [selectWorkspace])
   return (
     <Dialog open={showWorkspaceDialog} onOpenChange={setShowWorkspaceDialog}>
       <DialogContent className="max-w-md! bg-white">
@@ -284,12 +322,29 @@ export function WorkspaceDetailDialog() {
               <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-neutral-900" />
             )}
           </button>
+          <button
+            onClick={() => setWorkspaceTab('link')}
+            className={clsx(`cursor-pointer flex-1 px-4 py-3 text-sm font-medium transition-colors relative ${workspaceTab === 'link'
+              ? 'text-neutral-900'
+              : 'text-neutral-500 hover:text-neutral-700'
+              }`)}
+          >
+            <Link className="w-4 h-4 inline-block mr-1" />
+            Link
+            {workspaceTab === 'link' && (
+              <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-neutral-900" />
+            )}
+          </button>
         </div>
         {/* Tab 内容 */}
         <div className="py-2">
-          {workspaceTab === 'dev' ? (
+          {workspaceTab === 'dev' && (
             <DevTabContent linkItems={linkItems} workspaceLink={workspaceLink} stopWorkspace={stopWorkspace} />
-          ) : (
+          )}
+          {workspaceTab === 'link' && (
+            <LinkTabContent />
+          )}
+          {workspaceTab === 'work' && (
             <WorkTabContent />
           )}
         </div>