add card

web/src/apps/muse/base/index.tsx

@@ -2,22 +2,29 @@ import { useEffect, useState } from "react";
 import { Base } from "./table/index";
 import { markService } from "../modules/mark-service";
 import { SigmaGraph } from "./graph/sigma/index";
+import { DocsComponent } from "./docs";
+import { MarkDetailList } from "./card/MarkDetailList";
+
 const tabs = [
   {
     key: 'table',
     title: '表格'
   },
+  {
+    key: 'card',
+    title: '卡片'
+  },
   {
     key: 'graph',
     title: '关系图'
   },
-  {
-    key: 'world',
-    title: '世界'
-  },
   {
     key: 'docs',
     title: '文档'
+  },
+  {
+    key: 'world',
+    title: '世界'
   }
 ];
 
@@ -41,18 +48,16 @@ export const BaseApp = () => {
             <SigmaGraph dataSource={dataSource} />
           </div>
         );
+      case 'card':
+        return <MarkDetailList data={dataSource} />;
+      case 'docs':
+        return <DocsComponent dataSource={dataSource} />;
       case 'world':
         return (
           <div className="flex items-center justify-center h-96 text-gray-500">
             世界模块暂未实现
           </div>
         );
-      case 'docs':
-        return (
-          <div className="flex items-center justify-center h-96 text-gray-500">
-            文档模块暂未实现
-          </div>
-        );
       default:
         return null;
     }
@@ -67,9 +72,9 @@ export const BaseApp = () => {
             <button
               key={tab.key}
               onClick={() => setActiveTab(tab.key)}
-              className={`py-2 px-1 border-b-2 font-medium text-sm ${activeTab === tab.key
-                ? 'border-blue-500 text-blue-600'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              className={`py-2 px-4 border-b-2 font-medium text-sm transition-all duration-200 ease-in-out transform cursor-pointer ${activeTab === tab.key
+                ? 'border-blue-500 text-blue-600 bg-blue-50'
+                : 'border-transparent text-gray-500'
                 }`}
             >
               {tab.title}
@@ -79,7 +84,7 @@ export const BaseApp = () => {
       </div>
 
       {/* Tab 内容区域 */}
-      <div className="flex-1">
+      <div className="flex-1 h-full">
         {renderContent()}
       </div>
     </div>