优化展示信息

src/components/SortableStationItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -9,6 +9,8 @@ import {
   Trash2,
   Globe,
   GripVertical,
+  ChevronDown,
+  ChevronRight,
 } from 'lucide-react';
 import {
   RelayStation,
@@ -50,12 +52,26 @@ export const SortableStationItem: React.FC<SortableStationItemProps> = ({
     isDragging,
   } = useSortable({ id: station.id });
 
+  // 展开/收起状态，从 localStorage 读取
+  const [isExpanded, setIsExpanded] = useState(() => {
+    const saved = localStorage.getItem(`relay-station-expanded-${station.id}`);
+    return saved !== null ? JSON.parse(saved) : true; // 默认展开
+  });
+
+  // 保存展开状态到 localStorage
+  useEffect(() => {
+    localStorage.setItem(`relay-station-expanded-${station.id}`, JSON.stringify(isExpanded));
+  }, [isExpanded, station.id]);
+
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
     opacity: isDragging ? 0.5 : 1,
   };
 
+  // 是否有详情内容需要显示
+  const hasDetails = station.description || station.adapter === 'packycode';
+
   return (
     <Card ref={setNodeRef} style={style} className="relative">
       <CardHeader className="pb-2 pt-3 px-3">
@@ -105,11 +121,29 @@ export const SortableStationItem: React.FC<SortableStationItemProps> = ({
       </CardHeader>
       <CardContent className="pt-1 pb-3 px-3">
         <div className="space-y-2">
-          <div className="flex items-center text-xs text-muted-foreground">
+          <div className="flex items-center justify-between text-xs text-muted-foreground">
-            <Globe className="mr-1.5 h-3 w-3" />
+            <div className="flex items-center flex-1 min-w-0">
+              <Globe className="mr-1.5 h-3 w-3 flex-shrink-0" />
               <span className="truncate">{station.api_url}</span>
             </div>
+            {hasDetails && (
+              <button
+                onClick={() => setIsExpanded(!isExpanded)}
+                className="ml-2 p-0.5 hover:bg-accent rounded transition-colors flex-shrink-0"
+                aria-label={isExpanded ? "收起详情" : "展开详情"}
+              >
+                {isExpanded ? (
+                  <ChevronDown className="h-3.5 w-3.5" />
+                ) : (
+                  <ChevronRight className="h-3.5 w-3.5" />
+                )}
+              </button>
+            )}
+          </div>
 
+          {/* 详情内容（可折叠） */}
+          {isExpanded && hasDetails && (
+            <>
               {station.description && (
                 <p className="text-xs text-muted-foreground line-clamp-2">
                   {station.description}
@@ -241,6 +275,8 @@ export const SortableStationItem: React.FC<SortableStationItemProps> = ({
                   )}
                 </div>
               )}
+            </>
+          )}
         </div>
       </CardContent>
     </Card>