feat: 添加 CNB Board 组件和相关功能，优化首页展示

src/pages/cnb-board/components/DashCard.tsx

@@ -0,0 +1,116 @@
+import { ExternalLink, LayoutDashboard, ArrowUpRight } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { useNavigate } from '@tanstack/react-router';
+
+interface InfoItem {
+  title: string;
+  value: string;
+  description: string;
+}
+
+interface DashCardProps {
+  isCNB: boolean;
+  liveData: { list?: InfoItem[] } | null;
+}
+
+const DEFAULT_SHOW_COUNT = 12;
+
+function isUrl(value: string): boolean {
+  try {
+    const url = new URL(value);
+    return url.protocol === 'http:' || url.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+
+export function DashCard({ isCNB, liveData }: DashCardProps) {
+  const [expanded, setExpanded] = useState(false);
+  if (!isCNB || !liveData?.list?.length) return null;
+  const data = useMemo(() => {
+    if (!liveData?.list) return { docs: null, list: [] };
+    const docs = liveData.list.find((item) => item.title === 'docs');
+    const list = liveData.list.filter((item) => item.title !== 'docs');
+    return { docs, list }
+  }, [liveData]);
+
+  const showList = expanded ? data.list : data.list.slice(0, DEFAULT_SHOW_COUNT);
+  const hasMore = data.list.length > DEFAULT_SHOW_COUNT;
+
+  return (
+    <div className="mb-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+        {showList.map((item) => (
+          <div
+            key={item.title}
+            className="border rounded-lg p-3 hover:border-primary/50 transition-colors"
+          >
+            <div className="text-xs text-muted-foreground mb-1">{item.title}</div>
+            {item.value ? (
+              isUrl(item.value) ? (
+                <a
+                  href={item.value}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-500 hover:underline text-sm flex items-center gap-1"
+                >
+                  <span className="truncate">{item.value}</span>
+                  <ExternalLink className="h-3 w-3 shrink-0" />
+                </a>
+              ) : (
+                <div className="text-sm truncate" title={item.value}>{item.value}</div>
+              )
+            ) : (
+              <div className="text-muted-foreground text-sm">(空)</div>
+            )}
+            {item.description && (
+              <div className="text-xs text-muted-foreground mt-1 truncate" title={item.description}>
+                {item.description}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+      {hasMore && (
+        <div className="flex justify-center mt-3">
+          <Button variant="ghost" size="sm" onClick={() => setExpanded(!expanded)}>
+            {expanded ? (
+              <>
+                <ChevronUp className="h-4 w-4 mr-1" />
+                收起
+              </>
+            ) : (
+              <>
+                <ChevronDown className="h-4 w-4 mr-1" />
+                更多 ({data.list.length - DEFAULT_SHOW_COUNT})
+              </>
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const DashTitle = () => {
+  const navigate = useNavigate();
+  const toCNBBoard = () => {
+    navigate({ to: '/cnb-board' });
+  }
+  return (
+    <div className="text-lg font-semibold mb-2 flex items-center gap-2">
+      <LayoutDashboard className="h-5 w-5" />
+      CNB Board 实时信息
+      <Button
+        variant="ghost"
+        onClick={toCNBBoard}
+        className="text-muted-foreground hover:text-primary cursor-pointer"
+        title='更多'
+      >
+        <ArrowUpRight className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}

src/pages/cnb-board/page.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, useCallback, useMemo } from 'react';
 import { useCnbBoardStore } from './store';
 import { InfoCard } from './components/InfoCard';
+
 import { Button } from '@/components/ui/button';
 import { RotateCcw } from 'lucide-react';
 import { useLocation } from '@tanstack/react-router';
@@ -8,12 +9,12 @@ import { useLocation } from '@tanstack/react-router';
 type TabValue = 'build' | 'repo' | 'pull' | 'npc' | 'comment' | 'content';
 
 const tabs: { value: TabValue; label: string }[] = [
+  { value: 'content', label: '首要信息' },
   { value: 'build', label: '构建信息' },
   { value: 'repo', label: '仓库信息' },
   { value: 'pull', label: 'PR 信息' },
   { value: 'npc', label: 'NPC 信息' },
   { value: 'comment', label: '评论信息' },
-  { value: 'content', label: 'MD 内容' },
 ];
 
 export const App = () => {
@@ -25,7 +26,7 @@ export const App = () => {
   const urlTab = searchParams.get('tab') as TabValue | null;
 
   const [activeTab, setActiveTab] = useState<TabValue>(
-    urlTab && tabs.some(t => t.value === urlTab) ? urlTab : 'build'
+    urlTab && tabs.some(t => t.value === urlTab) ? urlTab : 'content'
   );
 
   useEffect(() => {
@@ -42,10 +43,10 @@ export const App = () => {
 
   const currentData = activeTab === 'build' ? data['live_build_info']
     : activeTab === 'repo' ? data['live_repo_info']
-    : activeTab === 'pull' ? data['live_pull_info']
+      : activeTab === 'pull' ? data['live_pull_info']
-    : activeTab === 'npc' ? data['live_npc_info']
+        : activeTab === 'npc' ? data['live_npc_info']
-    : activeTab === 'comment' ? data['live_comment_info']
+          : activeTab === 'comment' ? data['live_comment_info']
-    : data.live;
+            : data.live;
 
   return (
     <div className="p-4 max-w-7xl mx-auto">

src/pages/cnb-board/store.ts

@@ -25,12 +25,15 @@ interface CnbBoardData {
 type State = {
   loading: boolean;
   data: CnbBoardData;
-  fetchAllData: () => Promise<void>;
+  fetchAllData: (opts?: { all?: boolean }) => Promise<void>;
   refresh: () => Promise<void>;
+  isCNB: boolean;
+  docs: InfoItem | null;
 };
 
 export const useCnbBoardStore = create<State>((set, get) => ({
   loading: false,
+  isCNB: false,
   data: {
     live: null,
     'live_repo_info': null,
@@ -39,23 +42,29 @@ export const useCnbBoardStore = create<State>((set, get) => ({
     'live_npc_info': null,
     'live_comment_info': null,
   },
-
+  docs: null,
-  fetchAllData: async () => {
+  fetchAllData: async (opts?: { all?: boolean }) => {
+    const all = opts?.all ?? true;
     // 1. 先优先加载 live 数据
     set({ loading: true });
     try {
       const live = await queryApi['cnb_board']['live']({ more: false }) as Result<ApiResponse>;
+      const vscodeWebUrl = live.data?.list?.find?.(item => item.title === 'vscodeWebUrl')?.value || '';
+      const isCNB = !!vscodeWebUrl;
+      const docs = live.data?.list?.find?.(item => item.title === 'docs') || null;
       set({
         loading: false,
+        docs,
         data: {
           ...get().data,
           live: live?.data || null,
         },
+        isCNB,
       });
     } catch {
       set({ loading: false });
     }
-
+    if (!all) return; // 如果只需要加载 live 数据，直接返回
     // 2. 再并行加载其他数据
     try {
       const [liveRepoInfo, liveBuildInfo, livePullInfo, liveNpcInfo, liveCommentInfo] =

src/pages/home/components/IntroModule.tsx

@@ -0,0 +1,13 @@
+export const IntroModule = (props: { open?: boolean, title?: React.ReactNode, children?: React.ReactNode }) => {
+  const { open = false, title, children } = props;
+  if (!open) return null;
+  const isString = typeof title === 'string';
+  return (
+    <div className={`rounded-lg border p-4 mb-4 transition-opacity ${open ? 'opacity-100' : 'opacity-0 pointer-events-none'}`
+    }>
+      {title && isString && <h2 className="text-lg font-bold mb-2">{title}</h2>}
+      {title && !isString && <div className="mb-2">{title}</div>}
+      {children}
+    </div>
+  );
+}

src/pages/home/page.tsx

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { DashCard, DashTitle } from '../cnb-board/components/DashCard';
+import { useCnbBoardStore } from '../cnb-board/store';
+import { useShallow } from 'zustand/shallow';
+import { IntroModule } from './components/IntroModule';
+export const App = () => {
+  const cnbBoard = useCnbBoardStore(useShallow((state) => ({
+    isCNB: state.isCNB,
+    liveData: state.data.live,
+    fetchAllData: state.fetchAllData,
+  })));
+  useEffect(() => {
+    cnbBoard.fetchAllData({ all: false });
+  }, [cnbBoard.fetchAllData]);
+  return (
+    <div className="p-4 max-w-7xl mx-auto h-full overflow-hidden">
+      <h1 className="text-2xl font-bold mb-4">欢迎来到 Kevisual CLI Center</h1>
+      <p className="text-lg text-muted-foreground mb-6">
+        这是一个用于管理云开发, 构建, 工具, 可视化等相关功能的中心化平台。您可以在这里轻松访问和使用各种工具和服务，提升您的开发效率和体验。
+      </p>
+      <div className="h-[calc(100%-6rem)] overflow-auto scrollbar">
+        <IntroModule open={cnbBoard.isCNB} title={<DashTitle />}>
+          <DashCard isCNB={cnbBoard.isCNB} liveData={cnbBoard.liveData} />
+        </IntroModule>
+      </div>
+    </div>
+  )
+}

src/pages/page.tsx

@@ -1,3 +1,3 @@
-import { App } from './cnb-board/page'
+import { App } from './home/page'
 
 export default App;