From 697e946cdfef53d64f35c235ee20cba3213b58cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=9C=AC=E9=87=8C=E7=9A=84=E6=B0=B8?=
 =?UTF-8?q?=E5=B9=B3?= <fsmecx@gmail.com>
Date: Mon, 14 Jul 2025 11:17:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=AC=E6=AC=A1=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=86=85=E5=AE=B9=E5=A6=82=E4=B8=8B=20?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nkebao/src/pages/content/Content.tsx | 268 +++++++++++++--------------
 1 file changed, 128 insertions(+), 140 deletions(-)

diff --git a/nkebao/src/pages/content/Content.tsx b/nkebao/src/pages/content/Content.tsx
index 1c7d6a6b..eef1c55f 100644
--- a/nkebao/src/pages/content/Content.tsx
+++ b/nkebao/src/pages/content/Content.tsx
@@ -9,6 +9,9 @@ import { Badge } from '@/components/ui/badge';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { useToast } from '@/components/ui/toast';
 import { get, del } from '@/api/request';
+import Layout from '@/components/Layout';
+import UnifiedHeader from '@/components/UnifiedHeader';
+import BottomNav from '@/components/BottomNav';
 
 interface ApiResponse<T = any> {
   code: number;
@@ -187,164 +190,149 @@ export default function Content() {
   );
 
   return (
-    <div className="flex-1 bg-gray-50 min-h-screen">
-      <header className="sticky top-0 z-10 bg-white border-b">
-        <div className="flex items-center justify-between p-4">
-          <div className="flex items-center space-x-3">
-            <Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
-              <ChevronLeft className="h-5 w-5" />
-            </Button>
-            <h1 className="text-lg font-medium">内容库</h1>
+    <Layout
+      header={
+      <>
+        <UnifiedHeader title="内容库" showBack />
+       <div className="flex items-center space-x-2 p-4">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+            <Input
+              placeholder="搜索内容库..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+              className="pl-9"
+            />
           </div>
-          <Button onClick={handleCreateNew}>
-            <Plus className="h-4 w-4 mr-2" />
-            新建
+          <Button 
+            variant="outline" 
+            size="icon" 
+            onClick={handleRefresh}
+            disabled={loading}
+          >
+            <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
           </Button>
         </div>
-      </header>
 
-      <div className="p-4 space-y-4">
-        <Card className="p-4">
-          <div className="space-y-4">
-            <div className="flex items-center space-x-2">
-              <div className="relative flex-1">
-                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
-                <Input
-                  placeholder="搜索内容库..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
-                  className="pl-9"
-                />
+       <div className="px-4">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+            <TabsList className="grid w-full grid-cols-3">
+              <TabsTrigger value="all">全部</TabsTrigger>
+              <TabsTrigger value="friends">微信好友</TabsTrigger>
+              <TabsTrigger value="groups">聊天群</TabsTrigger>
+            </TabsList>
+          </Tabs>
+       </div>
+      </>
+    }
+    >
+      <div className="space-y-4 p-4">
+          <div className="space-y-3">
+            {loading ? (
+              <div className="flex justify-center items-center py-12">
+                <RefreshCw className="h-8 w-8 text-blue-500 animate-spin" />
               </div>
-              <Button variant="outline" size="icon" onClick={handleSearch}>
-                <Filter className="h-4 w-4" />
-              </Button>
-              <Button 
-                variant="outline" 
-                size="icon" 
-                onClick={handleRefresh}
-                disabled={loading}
-              >
-                <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
-              </Button>
-            </div>
-
-            <Tabs value={activeTab} onValueChange={setActiveTab}>
-              <TabsList className="grid w-full grid-cols-3">
-                <TabsTrigger value="all">全部</TabsTrigger>
-                <TabsTrigger value="friends">微信好友</TabsTrigger>
-                <TabsTrigger value="groups">聊天群</TabsTrigger>
-              </TabsList>
-            </Tabs>
-
-            <div className="space-y-3">
-              {loading ? (
-                <div className="flex justify-center items-center py-12">
-                  <RefreshCw className="h-8 w-8 text-blue-500 animate-spin" />
+            ) : filteredLibraries.length === 0 ? (
+              <div className="flex justify-center items-center py-12">
+                <div className="text-center">
+                  <p className="text-gray-500 mb-4">暂无数据</p>
+                  <Button onClick={handleCreateNew} size="sm">
+                    <Plus className="h-4 w-4 mr-2" />
+                    新建内容库
+                  </Button>
                 </div>
-              ) : filteredLibraries.length === 0 ? (
-                <div className="flex justify-center items-center py-12">
-                  <div className="text-center">
-                    <p className="text-gray-500 mb-4">暂无数据</p>
-                    <Button onClick={handleCreateNew} size="sm">
-                      <Plus className="h-4 w-4 mr-2" />
-                      新建内容库
-                    </Button>
-                  </div>
-                </div>
-              ) : (
-                filteredLibraries.map((library) => (
-                  <Card key={library.id} className="p-4 hover:bg-gray-50">
-                    <div className="flex items-start justify-between">
-                      <div className="space-y-2">
-                        <div className="flex items-center space-x-2">
-                          <h3 className="font-medium text-base">{library.name}</h3>
-                          <Badge variant={library.isEnabled === 1 ? 'default' : 'secondary'} className="text-xs">
-                            {library.isEnabled === 1 ? '已启用' : '未启用'}
-                          </Badge>
-                        </div>
-                        <div className="text-sm text-gray-500 space-y-1">
-                          <div className="flex items-center space-x-1">
-                            <span>来源：</span>
-                            {library.sourceType === 1 && library.sourceFriends?.length > 0 ? (
+              </div>
+            ) : (
+              filteredLibraries.map((library) => (
+                <Card key={library.id} className="p-4 hover:bg-gray-50">
+                  <div className="flex items-start justify-between">
+                    <div className="space-y-2">
+                      <div className="flex items-center space-x-2">
+                        <h3 className="font-medium text-base">{library.name}</h3>
+                        <Badge variant={library.isEnabled === 1 ? 'default' : 'secondary'} className="text-xs">
+                          {library.isEnabled === 1 ? '已启用' : '未启用'}
+                        </Badge>
+                      </div>
+                      <div className="text-sm text-gray-500 space-y-1">
+                        <div className="flex items-center space-x-1">
+                          <span>来源：</span>
+                          {library.sourceType === 1 && library.sourceFriends?.length > 0 ? (
+                            <div className="flex -space-x-1 overflow-hidden">
+                              {(library.friendsData || []).slice(0, 3).map((friend) => (
+                                <img 
+                                  key={friend.id}
+                                  src={friend.avatar || '/placeholder.svg'} 
+                                  alt={friend.nickname || `好友${friend.id}`}
+                                  className="inline-block h-6 w-6 rounded-full ring-2 ring-white"
+                                />
+                              ))}
+                              {library.sourceFriends.length > 3 && (
+                                <span className="flex items-center justify-center h-6 w-6 rounded-full bg-gray-200 text-xs font-medium text-gray-800">
+                                  +{library.sourceFriends.length - 3}
+                                </span>
+                              )}
+                            </div>
+                          ) : library.sourceType === 2 && library.sourceGroups?.length > 0 ? (
+                            <div className="flex items-center space-x-2">
                               <div className="flex -space-x-1 overflow-hidden">
-                                {(library.friendsData || []).slice(0, 3).map((friend) => (
+                                {(library.groupsData || []).slice(0, 3).map((group) => (
                                   <img 
-                                    key={friend.id}
-                                    src={friend.avatar || '/placeholder.svg'} 
-                                    alt={friend.nickname || `好友${friend.id}`}
+                                    key={group.id}
+                                    src={group.avatar || '/placeholder.svg'} 
+                                    alt={group.name || `群组${group.id}`}
                                     className="inline-block h-6 w-6 rounded-full ring-2 ring-white"
                                   />
                                 ))}
-                                {library.sourceFriends.length > 3 && (
+                                {library.sourceGroups.length > 3 && (
                                   <span className="flex items-center justify-center h-6 w-6 rounded-full bg-gray-200 text-xs font-medium text-gray-800">
-                                    +{library.sourceFriends.length - 3}
+                                    +{library.sourceGroups.length - 3}
                                   </span>
                                 )}
                               </div>
-                            ) : library.sourceType === 2 && library.sourceGroups?.length > 0 ? (
-                              <div className="flex items-center space-x-2">
-                                <div className="flex -space-x-1 overflow-hidden">
-                                  {(library.groupsData || []).slice(0, 3).map((group) => (
-                                    <img 
-                                      key={group.id}
-                                      src={group.avatar || '/placeholder.svg'} 
-                                      alt={group.name || `群组${group.id}`}
-                                      className="inline-block h-6 w-6 rounded-full ring-2 ring-white"
-                                    />
-                                  ))}
-                                  {library.sourceGroups.length > 3 && (
-                                    <span className="flex items-center justify-center h-6 w-6 rounded-full bg-gray-200 text-xs font-medium text-gray-800">
-                                      +{library.sourceGroups.length - 3}
-                                    </span>
-                                  )}
-                                </div>
-                              </div>
-                            ) : (
-                              <div className="w-6 h-6 bg-gray-200 rounded-full"></div>
-                            )}
-                          </div>
-                          <div>创建人：{library.creator}</div>
-                          <div>内容数量：{library.itemCount}</div>
-                          <div>更新时间：{new Date(library.updateTime).toLocaleString('zh-CN', { 
-                            year: 'numeric',
-                            month: '2-digit',
-                            day: '2-digit',
-                            hour: '2-digit',
-                            minute: '2-digit'
-                          })}</div>
+                            </div>
+                          ) : (
+                            <div className="w-6 h-6 bg-gray-200 rounded-full"></div>
+                          )}
                         </div>
+                        <div>创建人：{library.creator}</div>
+                        <div>内容数量：{library.itemCount}</div>
+                        <div>更新时间：{new Date(library.updateTime).toLocaleString('zh-CN', { 
+                          year: 'numeric',
+                          month: '2-digit',
+                          day: '2-digit',
+                          hour: '2-digit',
+                          minute: '2-digit'
+                        })}</div>
                       </div>
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button variant="ghost" size="icon" className="h-8 w-8">
-                            <MoreVertical className="h-4 w-4" />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                          <DropdownMenuItem onClick={() => handleEdit(library.id)}>
-                            <Edit className="h-4 w-4 mr-2" />
-                            编辑
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => handleDelete(library.id)}>
-                            <Trash2 className="h-4 w-4 mr-2" />
-                            删除
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => handleViewMaterials(library.id)}>
-                            <Eye className="h-4 w-4 mr-2" />
-                            查看素材
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
                     </div>
-                  </Card>
-                ))
-              )}
-            </div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon" className="h-8 w-8">
+                          <MoreVertical className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem onClick={() => handleEdit(library.id)}>
+                          <Edit className="h-4 w-4 mr-2" />
+                          编辑
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => handleDelete(library.id)}>
+                          <Trash2 className="h-4 w-4 mr-2" />
+                          删除
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => handleViewMaterials(library.id)}>
+                          <Eye className="h-4 w-4 mr-2" />
+                          查看素材
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </Card>
+              ))
+            )}
           </div>
-        </Card>
-      </div>
-    </div>
+        </div>
+    </Layout>
   );
 } 
\ No newline at end of file