diff --git "a/src/app/community/community-detail/\133communityId\135/page.tsx" "b/src/app/community/community-detail/\133communityId\135/page.tsx"
new file mode 100644
index 0000000..40200f7
--- /dev/null
+++ "b/src/app/community/community-detail/\133communityId\135/page.tsx"
@@ -0,0 +1,289 @@
+'use client';
+
+import React, { useEffect, useState, useRef } from "react";
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { Card } from 'primereact/card';
+import { Image } from 'primereact/image';
+import { Dropdown } from 'primereact/dropdown';
+// 页面跳转
+import { useParams } from 'next/navigation'
+import { useRouter } from 'next/navigation';
+// 分页
+import { Paginator, type PaginatorPageChangeEvent } from 'primereact/paginator';
+// 评分图标
+import { Fire } from '@icon-park/react';
+// 消息提醒
+import { Toast } from 'primereact/toast';
+// 发布帖子
+import { Dialog } from 'primereact/dialog';
+import { FileUpload } from 'primereact/fileupload';
+import { InputTextarea } from 'primereact/inputtextarea';
+// 接口传输
+import axios from 'axios';
+// 防抖函数
+import { debounce } from 'lodash';
+// 样式
+import './resource-community.scss';
+
+// 帖子列表数据
+interface Thread {
+    threadId: number;
+    userId: number;
+    threadPicture: string;
+    title: string;
+    createdAt: string;
+    communityId: string;
+    likes: number;
+}
+interface ThreadList {
+    records: Thread[];
+}
+// 社区信息
+interface CommunityInfo {
+    communityId: string;
+    communityName: string;
+    communityPicture: string;
+    description: string;
+    hot: number;
+    type: string;
+    threadNumber: number;
+}
+
+
+// 社区详情页面
+export default function CommunityDetailPage() {
+    // 获取URL参数，页面跳转
+    const params = useParams<{ communityId: string }>()
+    const communityId = decodeURIComponent(params.communityId); // 防止中文路径乱码
+    const router = useRouter();
+    // 社区数据
+    const [communityInfo, setCommunityInfo] = useState<CommunityInfo | null>(null);
+    // 帖子列表数据
+    const [threads, setThreads] = useState<Thread[]>([]);
+    const [totalThreads, setTotalThreads] = useState<number>(0);
+    // 搜索框
+    const [searchValue, setSearchValue] = useState("");
+    const debouncedSearch = useRef(
+        debounce((value: string) => {
+            setSearchValue(value);
+        }, 600)
+    ).current;
+    // 消息提醒
+    const toast = useRef<Toast>(null);
+    // 筛选器选项数据
+    const [selectedOption, setSelectedOption] = useState({ name: '热度最高' });
+    const options = [
+        { name: '来自好友' },
+        { name: '热度最高' }
+    ];
+    // 分页
+    const [first, setFirst] = useState(0);
+    const [rows, setRows] = useState(6);
+    const onPageChange = (event: PaginatorPageChangeEvent) => {
+        setFirst(event.first);
+        setRows(event.rows);
+    };
+    // 获取社区信息
+    useEffect(() => {
+        const fetchThreadInfo = async () => {
+            try {
+                const { data } = await axios.get(`http://127.0.0.1:4523/m1/6387307-6083949-default/community/info?communityId=${communityId}`);
+                setCommunityInfo(data);
+                setTotalThreads(data.threadNumber);
+            } catch (err) {
+                console.error(err);
+                toast.current?.show({ severity: 'error', summary: 'error', detail: '获取社区信息失败' });
+            }
+        };
+        fetchThreadInfo();
+    }, [communityId]);
+
+    // 获取帖子列表
+    useEffect(() => {
+        fetchThreads();
+    }, [communityId, first, rows, selectedOption, searchValue]);
+
+    const fetchThreads = async () => {
+        try {
+            const page = first / rows + 1;
+            console.log("当前页" + page + "size" + rows + "搜索内容" + searchValue);
+            const option = selectedOption.name // 添加排序参数
+            const response = await axios.get<ThreadList>(
+                `http://127.0.0.1:4523/m1/6387307-6083949-default/community/threads`, {
+                params: { communityId, page, rows, option, searchValue }
+            }
+            );
+            console.log('获取帖子列表:', response.data.records);
+            setThreads(response.data.records);
+        } catch (err) {
+            console.error('获取帖子失败', err);
+            toast.current?.show({ severity: 'error', summary: 'error', detail: '获取帖子失败' });
+        }
+    };
+
+    // 发布帖子弹窗
+    const [visible, setVisible] = useState(false);
+    const [formData, setFormData] = useState({
+        title: '',
+        content: '',
+        threadPicture: ''
+    });
+    // 图片上传消息通知
+    const onUpload = () => {
+        toast.current?.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded' });
+    };
+
+    // 发帖接口
+    const handleSubmit = async () => {
+        try {
+            const currentDate = new Date().toISOString();
+            const postData = {
+                userId: 22301145, // 记得用户登录状态获取
+                threadPicture: formData.threadPicture,
+                title: formData.title,
+                content: formData.content,
+                createdAt: currentDate,
+                communityId: communityId // 从URL参数获取的社区ID
+            };
+            // 发送POST请求
+            const response = await axios.post('http://127.0.0.1:4523/m1/6387307-6083949-default/thread', postData);
+
+            if (response.status === 200) {
+                toast.current?.show({ severity: 'success', summary: 'Success', detail: '帖子发布成功' });
+                // 发帖成功
+                setVisible(false);
+                // 重置表单
+                setFormData({
+                    title: '',
+                    content: '',
+                    threadPicture: ''
+                });
+                // 可以刷新帖子列表
+                fetchThreads();
+            }
+        } catch (error) {
+            console.error('发帖失败:', error);
+            toast.current?.show({ severity: 'error', summary: 'error', detail: '帖子发布失败' });
+        }
+    };
+    return (
+        <div className="resource-community">
+            <Toast ref={toast}></Toast>
+            {/* 社区标题和介绍 */}
+            <div className="community-header">
+                <div className="title-section">
+                    <h1>{communityInfo?.communityName}</h1>
+                    <p className="subtitle">{communityInfo?.description}</p>
+                    <div className="community-states">
+                        <div className="state-item">
+                            <Fire theme="outline" size="16" fill="#FF8D1A" />
+                            <span>热度: {communityInfo?.hot}</span>
+                        </div>
+                        <div className="state-item">
+                            <i className="pi pi-book" />
+                            <span>帖子数: {totalThreads}</span>
+                        </div>
+                    </div>
+                </div>
+                <div className="input">
+                    <Button label="返回列表" link onClick={() => router.push(`/community/resource-community-list/${communityInfo?.type}`)} />
+                    <div className="action-section">
+                        <div className="communities-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>
+                        <Dropdown
+                            value={selectedOption}
+                            onChange={(e) => setSelectedOption(e.value)}
+                            options={options}
+                            optionLabel="name"
+                            className="select-dropdown"
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {/* 帖子列表 */}
+            <div className="thread-list">
+                <div className="resource-grid">
+                    {threads.map((thread) => (
+                        <Card key={thread.threadId} className="resource-card" onClick={() => router.push(`/community/thread-detail/${thread.threadId}`)}>
+                            <Image
+                                src={process.env.NEXT_PUBLIC_NGINX_URL + thread.threadPicture}
+                                alt={thread.title}
+                                width="368"
+                                height="200"
+                            />
+                            <div className="card-content">
+                                <h3>{thread.title}</h3>
+                                <div className="view-count">
+                                    <i className="pi pi-face-smile" />
+                                    <span>{thread.likes}</span>
+                                </div>
+                            </div>
+                        </Card>
+                    ))}
+                </div>
+                {totalThreads > 6 && (<Paginator className="Paginator" first={first} rows={rows} totalRecords={totalThreads} rowsPerPageOptions={[6, 12]} onPageChange={onPageChange} />)}
+            </div>
+
+            {/* 添加按钮 */}
+            <Button className="add-resource-button" icon="pi pi-plus" rounded aria-label="add-thread" onClick={() => setVisible(true)} />
+
+            {/* 发布帖子弹窗 */}
+            <Dialog
+                header="发布新帖子"
+                visible={visible}
+                onHide={() => setVisible(false)}
+                className="publish-dialog"
+                modal
+                footer={
+                    <div className="dialog-footer">
+                        <Button label="发布" icon="pi pi-check" onClick={handleSubmit} autoFocus />
+                        <Button label="取消" icon="pi pi-times" onClick={() => setVisible(false)} className="p-button-text" />
+                    </div>
+                }
+            >
+                <div className="publish-form">
+                    <div className="form-field">
+                        <label htmlFor="title">标题</label>
+                        <InputText
+                            id="title"
+                            value={formData.title}
+                            onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
+                            placeholder="请输入帖子标题"
+                            className="w-full"
+                        />
+                    </div>
+
+                    <div className="form-field">
+                        <label htmlFor="content">内容</label>
+                        <InputTextarea
+                            id="content"
+                            value={formData.content}
+                            onChange={(e) => setFormData(prev => ({ ...prev, content: e.target.value }))}
+                            rows={5}
+                            placeholder="请输入帖子内容"
+                            className="w-full"
+                        />
+                    </div>
+
+                    <div className="form-field">
+                        <label>封面图片</label>
+                        <FileUpload
+                            mode="basic"
+                            name="thread-image"
+                            url="/file" // 与后端交互的URL
+                            accept="image/*"
+                            maxFileSize={10000000000}
+                            chooseLabel="选择图片"
+                            className="w-full"
+                            onUpload={onUpload}
+                        />
+                    </div>
+                </div>
+            </Dialog>
+        </div>
+    );
+}
\ No newline at end of file
diff --git "a/src/app/community/community-detail/\133communityId\135/resource-community.scss" "b/src/app/community/community-detail/\133communityId\135/resource-community.scss"
new file mode 100644
index 0000000..a40ebaa
--- /dev/null
+++ "b/src/app/community/community-detail/\133communityId\135/resource-community.scss"
@@ -0,0 +1,243 @@
+@import '../../../globals.scss';
+
+.resource-community {
+  padding: 2rem;
+  position: relative;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+
+  .community-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+
+    .title-section {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      align-items: flex-start;
+
+      h1 {
+        font-size: 3rem;
+        margin: 0;
+        margin-top: 32px;
+      }
+
+      .subtitle {
+        margin: 0;
+        color: #718096;
+        font-size: 1rem;
+      }
+
+      .stars {
+        font-size: 1.2rem;
+      }
+
+      .community-states {
+        display: flex;
+        gap: 2rem;
+        align-items: center;
+
+        .state-item {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          color: #666;
+
+          span {
+            font-size: 0.9rem;
+          }
+        }
+      }
+    }
+
+    .input {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      align-items: flex-end;
+
+      .p-button {
+        width: 100px;
+
+        padding: 0;
+        margin-top: 10px;
+      }
+    }
+    .p-dropdown-item p-focus{
+      background-color: rgba(182, 238, 235, 0.4) !important;
+    }
+    .p-dropdown-item p-highlight p-focus {
+      background-color: rgba(182, 238, 235, 0.4) !important;
+    }
+    .action-section {
+      display: flex;
+      align-items: center;
+
+      .communities-searchBar {
+        max-width: 100%;
+        position: relative;
+
+        .pi-search {
+          position: absolute;
+          left: 1rem;
+          top: 50%;
+          transform: translateY(-50%);
+          z-index: 1;
+        }
+
+        .search-helper {
+          width: 100%;
+          height: 3rem;
+          padding-left: 2.5rem;
+          border-radius: 10px 0px 0px 10px;
+          font-size: 1.1rem;
+          border: 1px solid #ddd;
+        }
+      }
+
+      .select-dropdown {
+        width: 100px;
+        height: 48px;
+        border-radius: 0px 10px 10px 0px;
+
+        .p-dropdown-items {
+          max-height: 20px;
+        }
+      }
+    }
+  }
+
+  .thread-list {
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+
+    .resource-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 1rem;
+
+      .resource-card {
+        transition: transform 0.2s ease;
+        cursor: pointer;
+        box-shadow: none !important;
+
+        .p-image {
+          img {
+            border-radius: 0.5rem 0.5rem 0 0;
+            object-fit: cover;
+          }
+        }
+
+        .p-card-body {
+          padding: 0;
+        }
+
+        .p-card-content {
+          padding: 0;
+        }
+
+        &:hover {
+          transform: translateY(-4px);
+        }
+
+        .card-content {
+          display: flex;
+          flex-direction: column;
+          position: relative;
+          margin-left: 16px;
+          margin-right: 16px;
+          margin-bottom: 16px;
+
+          h3 {
+            margin: 1rem 0;
+            font-size: 1rem;
+            line-height: 1.5;
+            color: #2d3748;
+          }
+
+          .view-count {
+            position: absolute;
+            bottom: 0rem;
+            right: 0rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: #718096;
+            font-size: 0.9rem;
+          }
+        }
+      }
+    }
+  }
+
+  .add-resource-button {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    width: 56px;
+    height: 56px;
+
+    .pi-plus {
+      font-size: 1.5rem;
+    }
+  }
+}
+
+// ========== 弹窗发布样式 ==========
+
+.publish-dialog {
+  width: 600px !important;
+  max-width: 90vw;
+
+  .p-dialog-header {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: $heading-color;
+    padding-bottom: 0.5rem;
+  }
+
+  .p-dialog-content {
+    padding-top: 0;
+    padding-bottom: 0;
+
+    .publish-form {
+      display: flex;
+      flex-direction: column;
+      gap: 1.5rem;
+      margin-top: 1rem;
+
+      .form-field {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+
+        label {
+          font-weight: 600;
+          color: $heading-color;
+        }
+
+        input,
+        textarea {
+          padding: 0.75rem 1rem;
+          border-radius: 8px;
+          font-size: 1rem;
+          color: #2d3748;
+        }
+
+
+        .p-fileupload {
+          .p-button {
+            width: 100%;
+            justify-content: center;
+            border: none;
+            margin-bottom: 1rem;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file