diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index b81887b..f3d4178 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -23,6 +23,7 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElTag: typeof import('element-plus/es')['ElTag']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/frontend/src/api/article.ts b/frontend/src/api/article.ts
new file mode 100644
index 0000000..ef031c9
--- /dev/null
+++ b/frontend/src/api/article.ts
@@ -0,0 +1,13 @@
+//进行接口API的统一管理
+import { request } from "./axios";
+
+export class article {
+  /**
+   * @description 获取article文章详情
+   * @param {string} id - 内容ID
+   * @return {Promise} 返回请求结果
+   */
+  static async getArticleDetail(id: string) {
+    return request("/index/articles/getArticleDetail", { id }, "get");
+  }
+}
diff --git a/frontend/src/api/downloadGames.ts b/frontend/src/api/downloadGames.ts
index c6450fa..4619990 100644
--- a/frontend/src/api/downloadGames.ts
+++ b/frontend/src/api/downloadGames.ts
@@ -28,12 +28,4 @@ export class downloadGames {
     return request("/index/program/getDownloadGamesSimpleLists", { cateid }, "get");
   }
 
-  /**
-   * @description 获取downloadGames文章详情
-   * @param {string} id - 内容ID
-   * @return {Promise} 返回请求结果
-   */
-  static async getDownloadGamesDetail(id: string) {
-    return request("/index/program/getDownloadGamesDetail", { id }, "get");
-  }
 }
\ No newline at end of file
diff --git a/frontend/src/api/downloadPrograms.ts b/frontend/src/api/downloadPrograms.ts
index 91e7f55..9f273cd 100644
--- a/frontend/src/api/downloadPrograms.ts
+++ b/frontend/src/api/downloadPrograms.ts
@@ -36,12 +36,4 @@ export class downloadPrograms {
     );
   }
   
-  /**
-   * @description 获取downloadPrograms文章详情
-   * @param {string} id - 内容ID
-   * @return {Promise} 返回请求结果
-   */
-  static async getDownloadProgramsDetail(id: string) {
-    return request("/index/program/getDownloadProgramsDetail", { id }, "get");
-  }
 }
diff --git a/frontend/src/api/officeResources.ts b/frontend/src/api/officeResources.ts
index cbed7ce..85f57ee 100644
--- a/frontend/src/api/officeResources.ts
+++ b/frontend/src/api/officeResources.ts
@@ -32,12 +32,4 @@ export class officeResources {
     );
   }
 
-  /**
-   * @description 获取officeResources文章详情
-   * @param {string} id - 内容ID
-   * @return {Promise} 返回请求结果
-   */
-  static async getOfficeResourcesDetail(id: string) {
-    return request("/index/program/getOfficeResourcesDetail", { id }, "get");
-  }
 }
diff --git a/frontend/src/api/resource.ts b/frontend/src/api/resource.ts
new file mode 100644
index 0000000..2f368a7
--- /dev/null
+++ b/frontend/src/api/resource.ts
@@ -0,0 +1,13 @@
+//进行接口API的统一管理
+import { request } from "./axios";
+
+export class resource {
+  /**
+   * @description 获取resource文章详情
+   * @param {string} id - 内容ID
+   * @return {Promise} 返回请求结果
+   */
+  static async getResourceDetail(id: string) {
+    return request("/index/resources/getResourceDetail", { id }, "get");
+  }
+}
diff --git a/frontend/src/api/siteInformation.ts b/frontend/src/api/siteInformation.ts
index 140e2da..c36e035 100644
--- a/frontend/src/api/siteInformation.ts
+++ b/frontend/src/api/siteInformation.ts
@@ -18,4 +18,5 @@ export class siteInformation {
   static async getSiteInformationLists(cateid: string) {
     return request("/index/articles/getSiteInformationLists", { cateid }, "get");
   }
+  
 }
\ No newline at end of file
diff --git a/frontend/src/api/technicalArticles.ts b/frontend/src/api/technicalArticles.ts
index ed06283..b3ec160 100644
--- a/frontend/src/api/technicalArticles.ts
+++ b/frontend/src/api/technicalArticles.ts
@@ -22,4 +22,5 @@ export class technicalArticles {
       "get"
     );
   }
+
 }
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index cf238a9..6548475 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -33,9 +33,14 @@ const router = createRouter({
       component: () => import("@/views/downloadPrograms/index.vue"),
     },
     {
-      path: "/downloadPrograms/:id",
-      name: "downloadProgramsDetail",
-      component: () => import("@/views/downloadPrograms/detail.vue"),
+      path: "/article",
+      name: "articleDetail",
+      component: () => import("@/views/components/detail_article.vue"),
+    },
+    {
+      path: "/resource",
+      name: "resourceDetail",
+      component: () => import("@/views/components/detail_resource.vue"),
     },
     {
       path: "/downloadGames",
diff --git a/frontend/src/views/components/detail_article.vue b/frontend/src/views/components/detail_article.vue
new file mode 100644
index 0000000..849bb3b
--- /dev/null
+++ b/frontend/src/views/components/detail_article.vue
@@ -0,0 +1,353 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import Header from "@/views/components/header.vue";
+import Footer from "@/views/components/footer.vue";
+import { siteInformation } from "@/api/siteInformation";
+import { technicalArticles } from "@/api/technicalArticles";
+
+const route = useRoute();
+const router = useRouter();
+const articleId = ref(route.query.id as string);
+const article = ref<any>(null);
+const loading = ref(true);
+
+// 获取图片地址
+const getImageUrl = (imagePath: string) => {
+  if (!imagePath) return "/src/assets/imgs/default.png";
+  return import.meta.env.VITE_API_DOMAIN + imagePath;
+};
+
+// 格式化日期
+const formatDate = (timestamp: string | number) => {
+  if (!timestamp) return "";
+  const numTimestamp = typeof timestamp === 'string' ? parseInt(timestamp) : timestamp;
+  const date = new Date(numTimestamp < 1e10 ? numTimestamp * 1000 : numTimestamp);
+  return date.toLocaleDateString("zh-CN", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  });
+};
+
+// 获取文章详情
+const fetchArticleDetail = async () => {
+  if (!articleId.value) {
+    ElMessage.error("文章ID不存在");
+    router.push("/");
+    return;
+  }
+
+  loading.value = true;
+  try {
+    // 根据来源页面调用不同的API
+    const source = route.query.source as string;
+    let response: any;
+
+    if (source === 'siteInformation') {
+      response = await siteInformation.getSiteInformationDetail(articleId.value);
+    } else if (source === 'technicalArticles') {
+      response = await technicalArticles.getTechnicalArticlesDetail(articleId.value);
+    } else {
+      // 默认尝试两个API
+      try {
+        response = await siteInformation.getSiteInformationDetail(articleId.value);
+      } catch {
+        response = await technicalArticles.getTechnicalArticlesDetail(articleId.value);
+      }
+    }
+
+    if (response.data?.data) {
+      article.value = response.data.data;
+    } else {
+      ElMessage.warning(response.data?.msg || "获取文章详情失败");
+      router.push("/");
+    }
+  } catch (error) {
+    ElMessage.error("获取文章详情失败，请稍后重试");
+    console.error("获取文章详情失败:", error);
+    router.push("/");
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchArticleDetail();
+});
+</script>
+
+<template>
+    <Header />
+    <div class="article-detail">
+        <div class="container">
+            <!-- 面包屑导航 -->
+            <div class="breadcrumb-wrapper" v-if="article">
+                <el-breadcrumb separator="/">
+                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+                    <el-breadcrumb-item :to="{ path: '/siteInformation' }">站点资讯</el-breadcrumb-item>
+                    <el-breadcrumb-item>详情</el-breadcrumb-item>
+                </el-breadcrumb>
+            </div>
+
+            <!-- 加载状态 -->
+            <div v-if="loading" class="loading">
+                <el-icon class="is-loading">
+                    <Loading />
+                </el-icon>
+                <span>加载中...</span>
+            </div>
+
+            <!-- 文章不存在 -->
+            <div v-else-if="!article" class="error">
+                <el-empty description="文章不存在或已删除"></el-empty>
+            </div>
+
+            <!-- 文章内容 -->
+            <div v-else class="article-content">
+                <!-- 文章标题 -->
+                <div class="article-header">
+                    <h1 class="article-title">{{ article.title }}</h1>
+                    <div class="article-meta">
+                        <span class="article-date">
+                            <i class="fas fa-calendar"></i>
+                            {{ formatDate(article.publishdate || article.created_at) }}
+                        </span>
+                        <span class="article-views" v-if="article.view">
+                            <i class="fas fa-eye"></i>
+                            {{ article.view }} 阅读
+                        </span>
+                        <span class="article-likes" v-if="article.likes">
+                            <i class="fas fa-heart"></i>
+                            {{ article.likes }} 点赞
+                        </span>
+                    </div>
+                </div>
+
+                <!-- 文章图片 -->
+                <div class="article-image" v-if="article.image">
+                    <img :src="getImageUrl(article.image)" :alt="article.title" />
+                </div>
+
+                <!-- 文章正文 -->
+                <div class="article-body">
+                    <div
+                        class="article-text"
+                        v-html="article.content"
+                    ></div>
+                </div>
+
+                <!-- 文章标签 -->
+                <div class="article-tags" v-if="article.tags && article.tags.length">
+                    <span class="tag-label">标签：</span>
+                    <el-tag
+                        v-for="tag in article.tags"
+                        :key="tag"
+                        size="small"
+                        class="article-tag"
+                    >
+                        {{ tag }}
+                    </el-tag>
+                </div>
+            </div>
+        </div>
+    </div>
+    <Footer />
+</template>
+
+<style lang="less" scoped>
+.article-detail {
+    padding-top: 100px;
+    min-height: 100vh;
+    background: #f9fafc;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.breadcrumb-wrapper {
+    margin-bottom: 30px;
+
+    :deep(.el-breadcrumb__inner) {
+        color: #fff !important;
+        font-weight: bolder !important;
+    }
+
+    a {
+        color: #666;
+        text-decoration: none;
+
+        &:hover {
+            color: #007bff;
+        }
+    }
+}
+
+.loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 50px 0;
+    color: #666;
+
+    .el-icon {
+        font-size: 24px;
+        margin-bottom: 10px;
+    }
+}
+
+.error {
+    padding: 50px 0;
+}
+
+.article-content {
+    background: white;
+    border-radius: 8px;
+    padding: 40px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.article-header {
+    border-bottom: 1px solid #eee;
+    padding-bottom: 20px;
+    margin-bottom: 30px;
+}
+
+.article-title {
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #333;
+    line-height: 1.3;
+    margin: 0 0 20px 0;
+}
+
+.article-meta {
+    display: flex;
+    gap: 20px;
+    color: #666;
+    font-size: 14px;
+
+    span {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+
+        i {
+            font-size: 16px;
+        }
+    }
+}
+
+.article-image {
+    margin-bottom: 30px;
+    text-align: center;
+
+    img {
+        max-width: 100%;
+        height: auto;
+        border-radius: 8px;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    }
+}
+
+.article-body {
+    color: #333;
+    line-height: 1.8;
+    font-size: 16px;
+}
+
+.article-text {
+    :deep(p) {
+        margin-bottom: 16px;
+        line-height: 1.8;
+    }
+
+    :deep(img) {
+        max-width: 100%;
+        height: auto;
+        border-radius: 4px;
+        margin: 16px 0;
+    }
+
+    :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
+        color: #333;
+        margin: 24px 0 16px 0;
+        font-weight: 600;
+    }
+
+    :deep(ul), :deep(ol) {
+        padding-left: 24px;
+        margin-bottom: 16px;
+    }
+
+    :deep(code) {
+        background: #f6f8fa;
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        font-size: 14px;
+    }
+
+    :deep(pre) {
+        background: #f6f8fa;
+        padding: 16px;
+        border-radius: 6px;
+        overflow-x: auto;
+        margin: 16px 0;
+
+        code {
+            background: none;
+            padding: 0;
+        }
+    }
+
+    :deep(blockquote) {
+        border-left: 4px solid #ddd;
+        padding-left: 16px;
+        margin: 16px 0;
+        color: #666;
+        font-style: italic;
+    }
+}
+
+.article-tags {
+    margin-top: 40px;
+    padding-top: 20px;
+    border-top: 1px solid #eee;
+
+    .tag-label {
+        color: #666;
+        font-size: 14px;
+        margin-right: 10px;
+    }
+
+    .article-tag {
+        margin-right: 8px;
+        margin-bottom: 8px;
+    }
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 0 15px;
+    }
+
+    .article-content {
+        padding: 20px;
+    }
+
+    .article-title {
+        font-size: 2rem;
+    }
+
+    .article-meta {
+        flex-direction: column;
+        gap: 8px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/components/detail_resource.vue b/frontend/src/views/components/detail_resource.vue
new file mode 100644
index 0000000..f739d8f
--- /dev/null
+++ b/frontend/src/views/components/detail_resource.vue
@@ -0,0 +1,420 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import Header from "@/views/components/header.vue";
+import Footer from "@/views/components/footer.vue";
+import { resource as resourceApi } from "@/api/resource";
+
+const route = useRoute();
+const resourceId = ref(route.query.id as string);
+const resourceData = ref<any>(null);
+const loading = ref(true);
+const showImageModal = ref(false);
+const modalImageSrc = ref('');
+const imageScale = ref(1);
+const imageRotation = ref(0);
+
+// 从路由参数获取页面信息
+const pageInfo = computed(() => ({
+  path: (route.query.path as string) || '',
+  name: (route.query.category as string) || ''
+}));
+
+// 获取图片地址
+const getImageUrl = (imagePath: string) => {
+  if (!imagePath) return "/src/assets/imgs/default.png";
+  return import.meta.env.VITE_API_DOMAIN + imagePath;
+};
+
+// 下载文件
+const downloadFile = (downloadPath: string, type: string) => {
+  if (!downloadPath) return ElMessage.warning(`${type}下载链接不存在`);
+
+  const fullUrl = type === '本地' ? import.meta.env.VITE_API_DOMAIN + downloadPath : downloadPath;
+
+  try {
+    const link = document.createElement('a');
+    link.href = fullUrl;
+    link.target = '_blank';
+    link.download = '';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    ElMessage.success(`${type}下载链接已打开`);
+  } catch (error) {
+    ElMessage.error(`${type}下载失败，请稍后重试`);
+    console.error(`${type}下载失败:`, error);
+  }
+};
+
+// 复制分享码到剪贴板
+const copyShareCode = async () => {
+  const code = resourceData.value?.code;
+  if (!code) return ElMessage.warning("分享码不存在");
+
+  try {
+    await navigator.clipboard.writeText(code);
+    ElMessage.success("分享码已复制到剪贴板");
+  } catch {
+    // 兼容性处理
+    const textArea = document.createElement("textarea");
+    textArea.value = code;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textArea);
+    ElMessage.success("分享码已复制到剪贴板");
+  }
+};
+
+// 图片模态框操作
+const openImageModal = (imageSrc: string) => {
+  modalImageSrc.value = imageSrc;
+  showImageModal.value = true;
+};
+
+const closeImageModal = () => {
+  showImageModal.value = false;
+  resetImageState();
+};
+
+const resetImageState = () => {
+  modalImageSrc.value = '';
+  imageScale.value = 1;
+  imageRotation.value = 0;
+};
+
+const handleWheel = (event: WheelEvent) => {
+  event.preventDefault();
+  imageScale.value = Math.max(0.1, Math.min(3, imageScale.value + (event.deltaY > 0 ? -0.1 : 0.1)));
+};
+
+const rotateImage = () => {
+  imageRotation.value = (imageRotation.value + 90) % 360;
+};
+
+// 格式化日期
+const formatDate = (dateTime: string | number) => {
+  if (!dateTime) return "";
+  if (typeof dateTime === "string") {
+    // 如果包含空格，取日期部分
+    return dateTime.split(' ')[0];
+  }
+  // 如果是数字，当作时间戳处理
+  const date = new Date(dateTime < 1e10 ? dateTime * 1000 : dateTime);
+  return date.toLocaleDateString("zh-CN");
+};
+
+// 获取资源详情
+const fetchResourceDetail = async () => {
+  if (!resourceId.value) return;
+
+  loading.value = true;
+  try {
+    // 由于所有资源都来自downloadGames页面，统一使用downloadGames API
+    const response = await resourceApi.getResourceDetail(resourceId.value);
+
+    if (response.data?.data) {
+      resourceData.value = response.data.data;
+    } else {
+      ElMessage.warning(response.data?.msg || "获取资源详情失败");
+    }
+  } catch (error) {
+    ElMessage.error("获取资源详情失败，请稍后重试");
+    console.error("获取资源详情失败:", error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchResourceDetail();
+});
+
+
+</script>
+
+<template>
+  <Header />
+  <div class="main-container">
+    <div class="container">
+      <div class="content" v-if="resourceData">
+        <div class="top-content">
+          <div class="top-content-main">
+            <div class="top-content-main-title">{{ resourceData.title }}</div>
+            <div class="location">
+              <el-breadcrumb separator="/">
+                <el-breadcrumb-item :to="{ path: '/' }"
+                  >首页</el-breadcrumb-item
+                >
+                <el-breadcrumb-item :to="{ path: pageInfo.path }"
+                  >{{ pageInfo.name }}</el-breadcrumb-item
+                >
+                <el-breadcrumb-item>详情</el-breadcrumb-item>
+              </el-breadcrumb>
+            </div>
+          </div>
+        </div>
+        <div class="main-content">
+          <div class="info-card">
+            <div class="card-content">
+              <div class="card-content-left">
+                <img
+                  class="img-cover"
+                  :src="getImageUrl(resourceData.icon)"
+                  :alt="resourceData.title"
+                  @click="openImageModal(getImageUrl(resourceData.icon))"
+                  style="cursor: pointer;"
+                />
+              </div>
+              <div class="card-content-right">
+                <div class="top-btns">
+                  <button class="btn btn-primary" id="collectBtn"><i class="fa-solid fa-heart"></i> 收藏</button>
+                  <button class="btn btn-primary" id="reportBtn" style="margin-left: 20px"><i class="fa-solid fa-flag"></i> 举报</button>
+                </div>
+                <div class="resource-info">
+                  <div class="title">
+                    {{
+                      resourceData.price == 0 || !resourceData.price
+                        ? "Free"
+                        : "¥" + resourceData.price
+                    }}
+                  </div>
+                  <div class="infos">
+                    <div class="infos-item">
+                      <div class="label">更新时间：</div>
+                      <div class="value">{{ formatDate(resourceData.update_time || resourceData.create_time) }}</div>
+                    </div>
+
+                    <div class="infos-item">
+                      <div class="label">所属分类：</div>
+                      <div class="value">{{ resourceData.cate }}</div>
+                    </div>
+
+                    <div class="infos-item">
+                      <div class="label">程序编号：</div>
+                      <div class="value">{{ resourceData.number }}</div>
+                    </div>
+
+                    <div class="infos-item">
+                      <div class="label">查看次数：</div>
+                      <div class="value">{{ resourceData.views }}</div>
+                    </div>
+                    <div class="infos-item">
+                      <div class="label">下载次数：</div>
+                      <div class="value">{{ resourceData.downloads }}</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="bottom-btns">
+                  <button v-if="resourceData.url" id="netdiskBtn" class="btn btn-primary" @click="downloadFile(resourceData.url, '网盘')">
+                    <i class="fa-solid fa-download"></i> 网盘下载
+                  </button>
+                  <button v-if="resourceData.fileurl" id="localBtn" class="btn btn-primary" @click="downloadFile(resourceData.fileurl, '本地')">
+                    <i class="fa-solid fa-download"></i> 本地下载
+                  </button>
+                  <button v-if="resourceData.code" id="codeBtn" class="codebtn" @click="copyShareCode">
+                    <i class="fa-solid fa-download"></i> 分享码：{{resourceData.code}}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="resource-detail" v-if="resourceData">
+            <div class="resource-detail-title">详情介绍</div>
+            <el-divider />
+            <div class="resource-content" v-html="resourceData.content"></div>
+          </div>
+
+          <div class="loading" v-else-if="loading">
+            <el-empty description="正在加载文章详情..."></el-empty>
+          </div>
+
+          <div class="error" v-else>
+            <el-empty description="文章不存在或已删除"></el-empty>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 图片放大模态框 -->
+  <div v-if="showImageModal" class="image-modal" @click="closeImageModal">
+    <div class="modal-content" @click.stop>
+      <!-- 控制按钮 -->
+      <div class="image-controls">
+        <button class="control-btn" @click="resetImageState" title="重置"><i class="fas fa-expand"></i></button>
+        <button class="control-btn" @click="rotateImage" title="旋转"><i class="fas fa-redo"></i></button>
+        <button class="control-btn" @click="imageScale = Math.max(0.1, imageScale - 0.2)" title="缩小"><i class="fas fa-search-minus"></i></button>
+        <span class="scale-display">{{ Math.round(imageScale * 100) }}%</span>
+        <button class="control-btn" @click="imageScale = Math.min(3, imageScale + 0.2)" title="放大"><i class="fas fa-search-plus"></i></button>
+        <button class="close-btn" @click="closeImageModal" title="关闭"><i class="fas fa-times"></i></button>
+      </div>
+      <img
+        :src="modalImageSrc"
+        :alt="resourceData?.title"
+        class="modal-image"
+        :style="{
+          transform: `scale(${imageScale}) rotate(${imageRotation}deg)`,
+          maxWidth: '1200px',
+          maxHeight: '800px'
+        }"
+        @wheel="handleWheel"
+      />
+    </div>
+  </div>
+
+  <Footer />
+</template>
+
+<style lang="less" scoped>
+.main-container {
+  padding-top: 100px; min-height: 100vh; background: #f9fafc;
+
+  .container {
+    width: 100%; margin: 0;
+
+    .content {
+      .top-content {
+        width: 100%; height: 400px; background-color: #0081ff; position: relative;
+
+        .top-content-main {
+          max-width: 1200px; margin: 0 auto; padding-top: 50px;
+          display: flex; justify-content: space-between; position: absolute; top: 0;
+          left: 50%; transform: translateX(-50%); width: 100%; z-index: 1;
+
+          .top-content-main-title { font-size: 30px; font-weight: 700; max-width: 1000px; color: #fff; }
+          .location { color: #fff; display: flex; align-items: center; }
+        }
+      }
+
+      .main-content {
+        .info-card {
+          max-width: 1400px; margin: 0 auto; position: relative; background-color: #fff;
+          border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); top: -150px;
+
+          .card-content {
+            display: flex; align-items: center; justify-content: space-between;
+
+            .card-content-left {
+              padding: 20px;
+              .img-cover { border-radius: 8px; overflow: hidden; width: 450px; height: auto; background: cover; }
+            }
+
+            .card-content-right {
+              padding: 20px; display: flex; flex-direction: column; gap: 30px;
+
+              .top-btns { display: flex; justify-content: flex-end; }
+
+              .resource-info {
+                display: flex; flex-direction: column;
+
+                .title {
+                  font-size: 35px; font-weight: 700; color: #42d697; margin-bottom: 15px;
+                }
+
+                .infos {
+                  display: flex;
+
+                  .infos-item {
+                    margin-right: 60px; color: #7d879c; display: flex; flex-direction: column;
+
+                    .label { margin-bottom: 10px; }
+
+                    .value {
+                      border: 1px #0d6efd dashed; padding: 3px 6px; font-size: 13px;
+                      background-color: #0081ff12; border-radius: 5px;
+                    }
+                  }
+                }
+              }
+
+              .bottom-btns {
+                display: flex; align-items: center;
+
+                .codebtn {
+                  color: #0d6efd; margin-left: 20px; padding: 6px 20px; border-radius: 8px;
+                  border: 1px solid #0d6efd; cursor: pointer; transition: all 0.3s ease;
+                  background-color: #fff;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.resource-detail {
+  position: relative; top: -120px; max-width: 1400px; margin: 0 auto;
+  background: white; border-radius: 8px; padding: 30px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+
+  .resource-detail-title { font-size: 2rem; font-weight: bold; color: #333; margin-bottom: 20px; }
+
+  .resource-content {
+    line-height: 1.8; color: #333; font-size: 16px;
+    img { width: 100% !important; }
+  }
+}
+
+.loading,
+.error {
+  margin-top: 50px;
+}
+
+:deep(.el-breadcrumb__inner) {
+  color: #fff !important;
+  font-weight: bolder !important;
+
+  a,
+  &.is-link {
+    color: #fff !important;
+  }
+}
+
+:deep(.el-breadcrumb__separator) {
+  color: #fff !important;
+}
+
+// 图片放大模态框样式
+.image-modal {
+  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+  background: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;
+  z-index: 9999; cursor: pointer;
+
+  .modal-content {
+    position: relative; cursor: default; display: flex; flex-direction: column; align-items: center;
+
+    .image-controls {
+      display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
+      background: rgba(255, 255, 255, 0.1); padding: 10px 20px; border-radius: 25px;
+      backdrop-filter: blur(10px); position: fixed; z-index: 9999; top: 90%;
+
+      .control-btn, .close-btn {
+        background: rgba(255, 255, 255, 0.2); border: none; color: white;
+        width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
+        display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;
+
+        &:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.1); }
+        i { font-size: 16px; }
+      }
+
+      .close-btn { margin-left: 10px; }
+
+      .scale-display {
+        color: white; font-size: 14px; font-weight: bold; min-width: 50px; text-align: center;
+      }
+    }
+
+    .modal-image {
+      max-width: 1200px; max-height: 800px; object-fit: contain; border-radius: 8px;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease;
+      cursor: grab; &:active { cursor: grabbing; }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/downloadGames/index.vue b/frontend/src/views/downloadGames/index.vue
index d388b5c..9dd3618 100644
--- a/frontend/src/views/downloadGames/index.vue
+++ b/frontend/src/views/downloadGames/index.vue
@@ -3,9 +3,9 @@
   <div class="resources-page">
     <div class="container">
       <div class="top-content">
-        <h1 class="page-title">办公资源</h1>
+        <h1 class="page-title">游戏资源</h1>
         <div class="content flex flex-column align-items-center">
-          <p>发现优质程序与工具</p>
+          <p>发现优质游戏资源</p>
         </div>
       </div>
       <div class="main-content">
@@ -40,7 +40,7 @@
               </div>
               <div class="card-header">
                 <router-link
-                  :to="`/resource/${resource.id}`"
+                  :to="`/resource?id=${resource.id}&path=/downloadGames&category=${encodeURIComponent(currentCategoryName)}`"
                   class="resource-title-link"
                 >
                   <h3 class="resource-title">{{ resource.title }}</h3>
@@ -97,6 +97,12 @@ const currentPage = ref(1); // 当前页码
 const pageSize = ref(10); // 每页条数
 const total = ref(0); // 总条数
 
+// 当前选中分类的名称
+const currentCategoryName = computed(() => {
+  const category = categories.value.find(cat => cat.id === selectedCategory.value);
+  return category?.name || '';
+});
+
 // 获取图片地址
 const getImageUrl = (imagePath: string) => {
   if (!imagePath) return "/src/assets/imgs/default.png";
diff --git a/frontend/src/views/downloadPrograms/detail.vue b/frontend/src/views/downloadPrograms/detail.vue
deleted file mode 100644
index cabc16b..0000000
--- a/frontend/src/views/downloadPrograms/detail.vue
+++ /dev/null
@@ -1,428 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useRoute } from "vue-router";
-import { ElMessage } from "element-plus";
-import Header from "@/views/components/header.vue";
-import Footer from "@/views/components/footer.vue";
-import { downloadPrograms } from "@/api/downloadPrograms";
-
-const route = useRoute();
-const resourceId = ref(route.query.id as string);
-const resource = ref<any>(null);
-const loading = ref(true);
-
-// 获取图片地址
-const getImageUrl = (imagePath: string) => {
-  if (!imagePath) return "/src/assets/imgs/default.png";
-  return import.meta.env.VITE_API_DOMAIN + imagePath;
-};
-
-// 下载文件
-const downloadFile = (downloadPath: string, type: string) => {
-  if (!downloadPath) {
-    ElMessage.warning(`${type}下载链接不存在`);
-    return;
-  }
-
-  let fullUrl = downloadPath;
-
-  // 根据下载类型处理URL
-  if (type === '本地') {
-    fullUrl = import.meta.env.VITE_API_DOMAIN + downloadPath;
-  }
-
-  try {
-    // 创建一个隐藏的a标签来触发下载
-    const link = document.createElement('a');
-    link.href = fullUrl;
-    link.target = '_blank';
-    link.download = ''; // 让浏览器决定文件名
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-
-    ElMessage.success(`${type}下载链接已打开`);
-  } catch (error) {
-    ElMessage.error(`${type}下载失败，请稍后重试`);
-    console.error(`${type}下载失败:`, error);
-  }
-};
-
-// 复制分享码到剪贴板
-const copyShareCode = async () => {
-  if (!resource.value?.code) {
-    ElMessage.warning("分享码不存在");
-    return;
-  }
-
-  try {
-    await navigator.clipboard.writeText(resource.value.code);
-    ElMessage.success("分享码已复制到剪贴板");
-  } catch (error) {
-    // 兼容性处理，如果clipboard API不可用
-    const textArea = document.createElement("textarea");
-    textArea.value = resource.value.code;
-    document.body.appendChild(textArea);
-    textArea.select();
-    document.execCommand('copy');
-    document.body.removeChild(textArea);
-    ElMessage.success("分享码已复制到剪贴板");
-  }
-};
-
-onMounted(async () => {
-  if (resourceId.value) {
-    loading.value = true;
-    try {
-      const response: any = await downloadPrograms.getDownloadProgramsDetail(
-        resourceId.value
-      );
-      if (response.data?.data) {
-        resource.value = response.data.data;
-      } else {
-        ElMessage.warning(response.data?.msg || "获取文章详情失败");
-      }
-    } catch (error) {
-      ElMessage.error("获取文章详情失败，请稍后重试");
-      console.error("获取文章详情失败:", error);
-    } finally {
-      loading.value = false;
-    }
-  }
-});
-</script>
-
-<template>
-  <Header />
-  <div class="main-container">
-    <div class="container">
-      <div class="content" v-if="resource">
-        <div class="top-content">
-          <div class="top-content-main">
-            <div class="top-content-main-title">{{ resource.title }}</div>
-            <div class="location">
-              <el-breadcrumb separator="/">
-                <el-breadcrumb-item :to="{ path: '/' }"
-                  >首页</el-breadcrumb-item
-                >
-                <el-breadcrumb-item :to="{ path: '/downloadPrograms' }"
-                  >程序下载</el-breadcrumb-item
-                >
-                <el-breadcrumb-item>详情</el-breadcrumb-item>
-              </el-breadcrumb>
-            </div>
-          </div>
-        </div>
-        <div class="main-content">
-          <div class="info-card">
-            <div class="card-content">
-              <div class="card-content-left">
-                <img
-                  class="img-cover"
-                  :src="getImageUrl(resource.icon)"
-                  :alt="resource.title"
-                />
-              </div>
-              <div class="card-content-right">
-                <div class="top-btns">
-                  <button
-                    class="btn btn-primary"
-                    id="collectBtn"
-                  >
-                    <i class="fa-solid fa-heart"></i>
-                    收藏
-                  </button>
-                  <button
-                    class="btn btn-primary"
-                    id="reportBtn"
-                    style="margin-left: 20px"
-                  >
-                    <i class="fa-solid fa-flag"></i>
-                    举报
-                  </button>
-                </div>
-                <div class="resource-info">
-                  <div class="title">
-                    {{
-                      resource.price == 0 || !resource.price
-                        ? "Free"
-                        : "¥" + resource.price
-                    }}
-                  </div>
-                  <div class="infos">
-                    <div class="infos-item">
-                      <div class="label">更新时间：</div>
-                      <div class="value">{{ resource.update_time }}</div>
-                    </div>
-
-                    <div class="infos-item">
-                      <div class="label">所属分类：</div>
-                      <div class="value">{{ resource.cate }}</div>
-                    </div>
-
-                    <div class="infos-item">
-                      <div class="label">程序编号：</div>
-                      <div class="value">{{ resource.number }}</div>
-                    </div>
-
-                    <div class="infos-item">
-                      <div class="label">查看次数：</div>
-                      <div class="value">{{ resource.views }}</div>
-                    </div>
-                    <div class="infos-item">
-                      <div class="label">下载次数：</div>
-                      <div class="value">{{ resource.downloads }}</div>
-                    </div>
-                  </div>
-                </div>
-                <div class="bottom-btns">
-                  <!-- 网盘下载按钮 -->
-                  <button
-                    v-if="resource.url"
-                    id="netdiskBtn"
-                    class="btn btn-primary"
-                    @click="downloadFile(resource.url, '网盘')"
-                  >
-                    <i class="fa-solid fa-download"></i>
-                    网盘下载
-                  </button>
-
-                  <!-- 本地下载按钮 -->
-                  <button
-                    v-if="resource.fileurl"
-                    id="localBtn"
-                    class="btn btn-primary"
-                    @click="downloadFile(resource.fileurl, '本地')"
-                  >
-                    <i class="fa-solid fa-download"></i>
-                    本地下载
-                  </button>
-
-                  <!-- 分享码按钮 -->
-                  <button
-                    v-if="resource.code"
-                    id="codeBtn"
-                    class="codebtn"
-                    @click="copyShareCode"
-                  >
-                    <i class="fa-solid fa-download"></i>
-                    分享码：{{resource.code}}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="resource-detail" v-if="resource">
-            <div class="resource-content" v-html="resource.content"></div>
-          </div>
-
-          <div class="loading" v-else-if="loading">
-            <el-empty description="正在加载文章详情..."></el-empty>
-          </div>
-
-          <div class="error" v-else>
-            <el-empty description="文章不存在或已删除"></el-empty>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <Footer />
-</template>
-
-<style lang="less" scoped>
-.main-container {
-  padding-top: 100px;
-  min-height: 100vh;
-  background: #f9fafc;
-
-  .container {
-    width: 100%;
-    margin: 0;
-
-    .content {
-      .top-content {
-        width: 100%;
-        height: 400px;
-        background-color: #0081ff;
-        position: relative;
-
-        .top-content-main {
-          max-width: 1200px;
-          margin: 0 auto;
-          padding-top: 50px;
-          display: flex;
-          justify-content: space-between;
-          position: absolute;
-          top: 0;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 100%;
-          z-index: 1;
-
-          .top-content-main-title {
-            font-size: 30px;
-            font-weight: 700;
-            max-width: 1000px;
-            color: #fff;
-          }
-
-          .location {
-            color: #fff;
-            display: flex;
-            align-items: center;
-          }
-        }
-      }
-
-      .main-content {
-        .info-card {
-          max-width: 1200px;
-          /* height: 300px; */
-          margin: 0px auto;
-          position: relative;
-          background-color: #fff;
-          border-radius: 8px;
-          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-          top: -150px;
-
-          .card-content {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-
-            .card-content-left {
-              padding: 20px;
-
-              .img-cover {
-                border-radius: 8px;
-                overflow: hidden;
-                width: 450px;
-                height: auto;
-                background: cover;
-              }
-            }
-
-            .card-content-right {
-              padding: 20px;
-              display: flex;
-              flex-direction: column;
-              gap: 30px;
-
-              .top-btns {
-                display: flex;
-                justify-content: flex-end;
-              }
-              .resource-info {
-                display: flex;
-                flex-direction: column;
-
-                .title {
-                  font-size: 35px;
-                  font-weight: 700;
-                  color: #42d697;
-                  margin-bottom: 15px;
-                }
-                .infos {
-                  display: flex;
-
-                  .infos-item {
-                    margin-right: 60px;
-                    color: #7d879c;
-                    display: flex;
-                    flex-direction: column;
-
-                    .label {
-                      margin-bottom: 10px;
-                    }
-                    .value {
-                      border: 1px #0d6efd dashed;
-                      padding: 3px 6px;
-                      font-size: 13px;
-                      background-color: #0081ff12;
-                      border-radius: 5px;
-                    }
-                  }
-                }
-              }
-              .bottom-btns {
-                display: flex;
-                align-items: center;
-
-                .codebtn {
-                  color: #0d6efd;
-                  margin-left: 20px;
-                  padding: 6px 20px;
-                  border-radius: 8px;
-                  border: 1px solid #0d6efd;
-                  cursor: pointer;
-                  transition: all 0.3s ease;
-                  background-color: #fff;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.resource-detail {
-  position: relative;
-  top: -120px;
-  max-width: 1200px;
-  margin: 0 auto;
-  background: white;
-  border-radius: 8px;
-  padding: 30px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-
-  .resource-title {
-    font-size: 28px;
-    font-weight: bold;
-    color: #333;
-    margin-bottom: 20px;
-  }
-
-  .resource-meta {
-    display: flex;
-    gap: 20px;
-    margin-bottom: 30px;
-    color: #666;
-    font-size: 14px;
-
-    span {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-    }
-  }
-
-  .resource-content {
-    line-height: 1.8;
-    color: #333;
-    font-size: 16px;
-  }
-}
-
-.loading,
-.error {
-  margin-top: 50px;
-}
-
-:deep(.el-breadcrumb__inner) {
-  color: #fff !important;
-  font-weight: bolder !important;
-
-  a,
-  &.is-link {
-    color: #fff !important;
-  }
-}
-
-:deep(.el-breadcrumb__separator) {
-  color: #fff !important;
-}
-</style>
diff --git a/frontend/src/views/downloadPrograms/index.vue b/frontend/src/views/downloadPrograms/index.vue
index ddeacbe..1ac689c 100644
--- a/frontend/src/views/downloadPrograms/index.vue
+++ b/frontend/src/views/downloadPrograms/index.vue
@@ -3,9 +3,9 @@
   <div class="resources-page">
     <div class="container">
       <div class="top-content">
-        <h1 class="page-title">办公资源</h1>
+        <h1 class="page-title">程序资源</h1>
         <div class="content flex flex-column align-items-center">
-          <p>发现优质程序与工具</p>
+          <p>发现优质程序资源</p>
         </div>
       </div>
       <div class="main-content">
@@ -40,7 +40,7 @@
               </div>
               <div class="card-header">
                 <router-link
-                  :to="`/downloadPrograms/detail?id=${resource.id}`"
+                  :to="`/resource?id=${resource.id}&path=/downloadPrograms&category=${encodeURIComponent(currentCategoryName)}`"
                   class="resource-title-link"
                 >
                   <h3 class="resource-title">{{ resource.title }}</h3>
@@ -82,7 +82,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted,computed } from "vue";
 import { ElMessage } from "element-plus";
 import Header from "@/views/components/header.vue";
 import Footer from "@/views/components/footer.vue";
@@ -97,6 +97,12 @@ const currentPage = ref(1); // 当前页码
 const pageSize = ref(10); // 每页条数
 const total = ref(0); // 总条数
 
+// 当前选中分类的名称
+const currentCategoryName = computed(() => {
+  const category = categories.value.find(cat => cat.id === selectedCategory.value);
+  return category?.name || '';
+});
+
 // 获取图片地址
 const getImageUrl = (imagePath: string) => {
   if (!imagePath) return "/src/assets/imgs/default.png";
diff --git a/frontend/src/views/officeResources/index.vue b/frontend/src/views/officeResources/index.vue
index d351455..d6afd21 100644
--- a/frontend/src/views/officeResources/index.vue
+++ b/frontend/src/views/officeResources/index.vue
@@ -40,7 +40,7 @@
               </div>
               <div class="card-header">
                 <router-link
-                  :to="`/resource/${resource.id}`"
+                  :to="`/resource?id=${resource.id}&path=/officeResources&category=${encodeURIComponent(currentCategoryName)}`"
                   class="resource-title-link"
                 >
                   <h3 class="resource-title">{{ resource.title }}</h3>
@@ -97,6 +97,12 @@ const currentPage = ref(1); // 当前页码
 const pageSize = ref(10); // 每页条数
 const total = ref(0); // 总条数
 
+// 当前选中分类的名称
+const currentCategoryName = computed(() => {
+  const category = categories.value.find(cat => cat.id === selectedCategory.value);
+  return category?.name || '';
+});
+
 // 获取图片地址
 const getImageUrl = (imagePath: string) => {
   if (!imagePath) return "/src/assets/imgs/default.png";
diff --git a/frontend/src/views/siteInformation/index.vue b/frontend/src/views/siteInformation/index.vue
index 7bff5db..e6a4ca7 100644
--- a/frontend/src/views/siteInformation/index.vue
+++ b/frontend/src/views/siteInformation/index.vue
@@ -39,7 +39,7 @@
               <img :src="getImageUrl(article.image)" :alt="article.title">
             </div>
               <div class="card-header">
-                <router-link :to="`/article/${article.id}`" class="article-title-link">
+                <router-link :to="`/article?id=${article.id}&source=siteInformation`" class="article-title-link">
                   <h3 class="article-title">{{ article.title }}</h3>
                 </router-link>
                 <div class="article-meta">
diff --git a/frontend/src/views/technicalArticles/index.vue b/frontend/src/views/technicalArticles/index.vue
index 63acdb1..ed78a28 100644
--- a/frontend/src/views/technicalArticles/index.vue
+++ b/frontend/src/views/technicalArticles/index.vue
@@ -40,7 +40,7 @@
               </div>
               <div class="card-header">
                 <router-link
-                  :to="`/article/${article.id}`"
+                  :to="`/article?id=${article.id}&source=technicalArticles`"
                   class="article-title-link"
                 >
                   <h3 class="article-title">{{ article.title }}</h3>