diff --git "a/src/app/resource/classification/\133resourceId\135/page.tsx" "b/src/app/resource/classification/\133resourceId\135/page.tsx"
deleted file mode 100644
index c48b626..0000000
--- "a/src/app/resource/classification/\133resourceId\135/page.tsx"
+++ /dev/null
@@ -1,12 +0,0 @@
-'use client';
-import React from 'react';
-
-const EmptyPage: React.FC = () => {
-  return (
-    <div className="p-d-flex p-jc-center p-ai-center" style={{ height: '100vh' }}>
-      {"一个空页面"}
-    </div>
-  );
-};
-
-export default EmptyPage;
diff --git a/src/app/resource/classification/classification.scss b/src/app/resource/classification/classification.scss
new file mode 100644
index 0000000..f1cc964
--- /dev/null
+++ b/src/app/resource/classification/classification.scss
@@ -0,0 +1,59 @@
+.HotResource {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+}
+
+.searchBar {
+    max-width: 1000px;
+    padding: 0;
+    width: 85%;
+    height: 50px;
+
+    .search-helper {
+        height: 50px;
+        padding-left: 2.5rem;
+        border-radius: 10px 0px 0px 10px;
+        font-size: 1.1rem;
+        border: 1px solid #ddd;
+    }
+}
+
+.classificationButton {
+    height: 50px;
+    width: 15%;
+    border-radius: 0 10px 10px 0;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+
+    flex-direction: row;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+.sidebar {
+    width: 400px;
+}
+
+.sidebar-content {
+    width: 100%;
+}
+
+.filter-section {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.filter-confirm {
+    margin-top: 10rem;
+    text-align: center;
+}
+
+.Paginator{
+    margin-bottom: 1rem;
+}
\ No newline at end of file
diff --git a/src/app/resource/classification/page.tsx b/src/app/resource/classification/page.tsx
new file mode 100644
index 0000000..88d6629
--- /dev/null
+++ b/src/app/resource/classification/page.tsx
@@ -0,0 +1,187 @@
+'use client';
+
+import React, { useEffect, useState, useRef } from "react";
+import { Card } from 'primereact/card';
+import { Image } from 'primereact/image';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+// 页面跳转
+import { useRouter } from 'next/navigation';
+// 消息提醒
+import { Toast } from 'primereact/toast';
+// 分页
+import { Paginator, type PaginatorPageChangeEvent } from 'primereact/paginator';
+// 评分图标
+import { Fire } from '@icon-park/react';
+// 接口传输
+import axios from 'axios';
+// 标签
+import { Tag } from 'primereact/tag';
+import { Sidebar } from 'primereact/sidebar';
+// 防抖函数
+import { debounce } from 'lodash';
+// 样式
+import './classification.scss';
+
+// 热门资源数据
+
+interface HotResource {
+  resourceId: number;
+  resourceName: string;
+  resourcePicture: string;
+  resourceSummary: string;
+  lastUpdateTime: string;
+  hot: number;
+  gamePlayList: { gameplayName: string }[];
+}
+
+interface HotResourceList {
+  total: number;
+  records: HotResource[];
+}
+// 主页
+export default function ClassificationResource() {
+  // 热门资源列表
+  const [hotResources, setHotResources] = useState<HotResource[]>([]);
+  const [totalHotResource, setTotalHotResource] = useState(0);
+  const [visibleRight, setVisibleRight] = useState<boolean>(false);
+
+  // 消息提醒
+  const toast = useRef<Toast>(null);
+  const router = useRouter();
+
+  // 当前选中的 classify
+  const [selectedClassify, setSelectedClassify] = useState<string>('模组');
+  const [selectedGameplay, setSelectedGameplay] = useState<string[]>([]);
+  const [selectedVersions, setSelectedVersions] = useState<string[]>([]);
+  const [searchValue, setSearchValue] = useState<string>('');
+  const debouncedSearch = useRef(
+    debounce((value: string) => {
+      setSearchValue(value);
+    }, 600)
+  ).current;
+  // 分页
+  const [first, setFirst] = useState(0);
+  const [rows, setRows] = useState(5);
+  const onPageChange = (event: PaginatorPageChangeEvent) => {
+    setFirst(event.first);
+    setRows(event.rows);
+  };
+  // 获取帖子列表
+  useEffect(() => {
+    handleSearch();
+  }, [first, rows,searchValue]);
+
+  const handleSearch = async () => {
+    try {
+      const pageNumber = first / rows + 1;
+      console.log(searchValue + " 当前页: " + pageNumber + "rows: " + rows + "selectedClassify: " + selectedClassify + "selectedGameplay: " + selectedGameplay + "selectedVersions: " + selectedVersions);
+      const response = await axios.get<HotResourceList>(process.env.PUBLIC_URL + `/resource/search`, {
+        params: {
+          userId: 22301145,
+          pageNumber,
+          rows,
+          classify: selectedClassify,
+          gameplayList: selectedGameplay.join(','),
+          versionList: selectedVersions.join(','),
+          searchValue
+        }
+      });
+      setHotResources(response.data.records);
+      setTotalHotResource(response.data.total);
+      setVisibleRight(false);
+    } catch (err) {
+      console.error('搜索资源失败', err);
+      toast.current?.show({ severity: 'error', summary: 'error', detail: '搜索资源失败' });
+    }
+  };
+
+  return (
+    <div className="HotResource">
+      <div className="header">
+        <div className="searchBar">
+          <i className="pi pi-search" />
+          <InputText type="search" className="search-helper" placeholder="搜索你感兴趣的帖子" onChange={(e) => { const target = e.target as HTMLInputElement; debouncedSearch(target.value); }} />
+        </div>
+        <Button label="查看分类" className="classificationButton" onClick={() => setVisibleRight(true)} />
+      </div>
+      {/* 全部社区 */}
+      <div className="all-resources-list">
+        {hotResources.map((hotResource) => (
+          <Card key={hotResource.resourceId} className="all-resources-card" onClick={() => router.push(`/resource/resource-detail/${hotResource.resourceId}`)}>
+            <Image alt="avatar" src={process.env.NEXT_PUBLIC_NGINX_URL + "hotResource/" + hotResource.resourcePicture} className="resource-avatar" width="250" height="140" />
+            <div className="resource-header">
+              <div className="resource-content">
+                <h3>{hotResource.resourceName}</h3>
+                <div className="tags">
+                  {hotResource.gamePlayList.map((tag, index) => (
+                    <Tag key={index} value={tag.gameplayName} />
+                  ))}
+                </div>
+              </div>
+              <div className="resources-states">
+                <div className="state-item">
+                  <Fire theme="outline" size="16" fill="#FF8D1A" />
+                  <span>热度: {hotResource.hot}</span>
+                </div>
+                <div className="state-item">
+                  <span>最新更新时间: {hotResource.lastUpdateTime}</span>
+                </div>
+              </div>
+            </div>
+          </Card>
+        ))}
+      </div>
+      {totalHotResource > 5 && (<Paginator className="Paginator" first={first} rows={rows} totalRecords={totalHotResource} rowsPerPageOptions={[5, 10]} onPageChange={onPageChange} />)}
+      <Sidebar className="sidebar" visible={visibleRight} position="right" onHide={() => setVisibleRight(false)}>
+        <div className="sidebar-content">
+          <h3>分类</h3>
+          <div className="filter-section">
+            {['模组', '地图', '整合包', '材质包'].map((item) => (
+              <Button key={item} label={item} className={selectedClassify === item ? 'p-button-primary' : 'p-button-text'} onClick={() => setSelectedClassify(item)} />
+            ))}
+          </div>
+
+          <h3>主要玩法</h3>
+          <div className="filter-section">
+            {['不限', '科技', '魔法', '建筑', '风景', '竞技', '生存', '冒险', '跑酷', '艺术', '剧情', '社交', '策略', '极限'].map((gameplay) => (
+              <Button
+                key={gameplay}
+                label={gameplay}
+                className={selectedGameplay.includes(gameplay) ? 'p-button-primary' : 'p-button-text'}
+                onClick={() => {
+                  if (selectedGameplay.includes(gameplay)) {
+                    setSelectedGameplay(selectedGameplay.filter((g) => g !== gameplay));
+                  } else {
+                    setSelectedGameplay([...selectedGameplay, gameplay]);
+                  }
+                }}
+              />
+            ))}
+          </div>
+
+          <h3>游戏版本</h3>
+          <div className="filter-section">
+            {['不限', '1.20.1', '1.20.4', '1.7.3', '1.12.1', '1.19.2', '1.18.3', '1.20.3', '1.19.1', '1.18.6'].map((ver) => (
+              <Button
+                key={ver}
+                label={ver}
+                className={selectedVersions.includes(ver) ? 'p-button-primary' : 'p-button-text'}
+                onClick={() => {
+                  if (selectedVersions.includes(ver)) {
+                    setSelectedVersions(selectedVersions.filter((v) => v !== ver));
+                  } else {
+                    setSelectedVersions([...selectedVersions, ver]);
+                  }
+                }}
+              />
+            ))}
+          </div>
+          <div className="filter-confirm">
+            <Button label="确定" icon="pi pi-check" onClick={handleSearch} />
+          </div>
+        </div>
+      </Sidebar>
+    </div>
+  );
+}