From 89aac61880c1bda7da8effd67e3be43bea38d8c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E5=BC=BA?= <357099073@qq.com>
Date: Thu, 25 Dec 2025 11:35:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=8F=9C=E5=8D=95=E5=8D=95?=
 =?UTF-8?q?=E9=A1=B5=E5=88=B6=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.env.development                     | Bin 0 -> 208 bytes
 frontend/.env.production                      | Bin 0 -> 208 bytes
 frontend/frontend/.env.development            |   7 +
 frontend/frontend/frontend/.env.production    |   9 +
 frontend/package.json                         |   4 +-
 frontend/src/api/api.ts                       |   1 -
 frontend/src/api/downloadGames.ts             |  21 +
 frontend/src/api/downloadPrograms.ts          |  21 +
 frontend/src/api/officeResources.ts           |  21 +
 frontend/src/api/siteInformation.ts           |   2 +-
 frontend/src/api/technicalArticles.ts         |  25 ++
 frontend/src/assets/imgs/default.png          | Bin 0 -> 10042 bytes
 frontend/src/views/downloadGames/index.vue    | 415 +++++++++++++++--
 frontend/src/views/downloadPrograms/index.vue | 413 ++++++++++++++++-
 frontend/src/views/officeResources/index.vue  | 413 ++++++++++++++++-
 frontend/src/views/siteInformation/index.vue  |   2 +-
 .../src/views/technicalArticles/index.vue     | 418 +++++++++++++++++-
 17 files changed, 1670 insertions(+), 102 deletions(-)
 create mode 100644 frontend/.env.development
 create mode 100644 frontend/.env.production
 create mode 100644 frontend/frontend/.env.development
 create mode 100644 frontend/frontend/frontend/.env.production
 create mode 100644 frontend/src/api/downloadGames.ts
 create mode 100644 frontend/src/api/downloadPrograms.ts
 create mode 100644 frontend/src/api/officeResources.ts
 create mode 100644 frontend/src/api/technicalArticles.ts
 create mode 100644 frontend/src/assets/imgs/default.png

diff --git a/frontend/.env.development b/frontend/.env.development
new file mode 100644
index 0000000000000000000000000000000000000000..24172383d388fbd3b0c1aa2603d9ed9852da712f
GIT binary patch
literal 208
zcmYk0K?=f93`F1hZ@hxy0qjx=1r>{QVJoPuyN^_%NUO!F7w{~uJ(TxQ=L@0?ArmHf
z<n`>*=9WL^UN*=KDG>`oEJJ4UmN5xaO%X8x1t+P-rze#h$XTlwa*Yz7KHf(LgJZ`^
xHf*^!*Ok$fi0JsCd@7>LE-J^WspR(Je6QW^h$Ry`yO#a`@0SGHKXTTk;SD{mB!>V1

literal 0
HcmV?d00001

diff --git a/frontend/.env.production b/frontend/.env.production
new file mode 100644
index 0000000000000000000000000000000000000000..9206ce0d7e58f87e3601ad57834ad8227583b809
GIT binary patch
literal 208
zcmYk0!4APt6hzPZZTteU$6C?^(MT6s30k`ssR|<6XuDwRTdaMQ|G>PJW;QeT-kCe!
zPnR~&^t~J;qr?ysu)@bOW+85w5;2zw2=O>j2?ZrX`odQHNRJye7w%+SrBZPtxa^Re
xo#wCdu`yDS5?#J89xJhs!(G&JRm#d6UUxZR&5X{eWt;8(8;`wOoYg4P#~+mZB{Bd2

literal 0
HcmV?d00001

diff --git a/frontend/frontend/.env.development b/frontend/frontend/.env.development
new file mode 100644
index 0000000..ccfa5cc
--- /dev/null
+++ b/frontend/frontend/.env.development
@@ -0,0 +1,7 @@
+# 寮€鍙戠幆澧冮厤缃?# API 鍩虹鍦板潃
+VITE_API_DOMAIN=http://localhost:8000
+
+# 寮€鍙戠幆澧冩爣璇?NODE_ENV=development
+
+# 璋冭瘯妯″紡
+VITE_DEBUG=true
diff --git a/frontend/frontend/frontend/.env.production b/frontend/frontend/frontend/.env.production
new file mode 100644
index 0000000..8d32a9e
--- /dev/null
+++ b/frontend/frontend/frontend/.env.production
@@ -0,0 +1,9 @@
+# 鐢熶骇鐜閰嶇疆
+# API 鍩虹鍦板潃
+VITE_API_DOMAIN=https://api.yourdomain.com
+
+# 鐢熶骇鐜鏍囪瘑
+NODE_ENV=production
+
+# 璋冭瘯妯″紡
+VITE_DEBUG=false
diff --git a/frontend/package.json b/frontend/package.json
index ab8c90d..2025b0c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,8 +4,8 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc -b && vite build",
+    "dev": "vite --mode development",
+    "build": "vite build --mode production",
     "preview": "vite preview"
   },
   "dependencies": {
diff --git a/frontend/src/api/api.ts b/frontend/src/api/api.ts
index d8a09f9..a5beb66 100644
--- a/frontend/src/api/api.ts
+++ b/frontend/src/api/api.ts
@@ -1,5 +1,4 @@
 //进行接口API的统一管理
-import { request } from "./axios";
 
 export class UserService {
 
diff --git a/frontend/src/api/downloadGames.ts b/frontend/src/api/downloadGames.ts
new file mode 100644
index 0000000..70ff86f
--- /dev/null
+++ b/frontend/src/api/downloadGames.ts
@@ -0,0 +1,21 @@
+//进行接口API的统一管理
+import { request } from "./axios";
+
+export class downloadGames {
+  /**
+   * @description 获取downloadGames分类
+   * @return {Promise} 返回请求结果
+   */
+  static async getDownloadGamesCategory() {
+    return request("/index/program/getDownloadGamesCategory", "get");
+  }
+
+  /**
+   * @description 获取downloadGames文章列表
+   * @param {string} cateid - 分类ID
+   * @return {Promise} 返回请求结果
+   */
+  static async getDownloadGamesLists(cateid: string) {
+    return request("/index/program/getDownloadGamesLists", { cateid }, "get");
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/api/downloadPrograms.ts b/frontend/src/api/downloadPrograms.ts
new file mode 100644
index 0000000..4861b31
--- /dev/null
+++ b/frontend/src/api/downloadPrograms.ts
@@ -0,0 +1,21 @@
+//进行接口API的统一管理
+import { request } from "./axios";
+
+export class downloadPrograms {
+  /**
+   * @description 获取downloadPrograms分类
+   * @return {Promise} 返回请求结果
+   */
+  static async getDownloadProgramsCategory() {
+    return request("/index/program/getDownloadProgramsCategory", "get");
+  }
+
+  /**
+   * @description 获取downloadPrograms文章列表
+   * @param {string} cateid - 分类ID
+   * @return {Promise} 返回请求结果
+   */
+  static async getDownloadProgramsLists(cateid: string) {
+    return request("/index/program/getDownloadProgramsLists", { cateid }, "get");
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/api/officeResources.ts b/frontend/src/api/officeResources.ts
new file mode 100644
index 0000000..9a68cd6
--- /dev/null
+++ b/frontend/src/api/officeResources.ts
@@ -0,0 +1,21 @@
+//进行接口API的统一管理
+import { request } from "./axios";
+
+export class officeResources {
+  /**
+   * @description 获取officeResources分类
+   * @return {Promise} 返回请求结果
+   */
+  static async getOfficeResourcesCategory() {
+    return request("/index/program/getOfficeResourcesCategory", "get");
+  }
+
+  /**
+   * @description 获取officeResources文章列表
+   * @param {string} cateid - 分类ID
+   * @return {Promise} 返回请求结果
+   */
+  static async getOfficeResourcesLists(cateid: string) {
+    return request("/index/program/getOfficeResourcesLists", { cateid }, "get");
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/api/siteInformation.ts b/frontend/src/api/siteInformation.ts
index a74a3d7..140e2da 100644
--- a/frontend/src/api/siteInformation.ts
+++ b/frontend/src/api/siteInformation.ts
@@ -18,4 +18,4 @@ 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
new file mode 100644
index 0000000..ed06283
--- /dev/null
+++ b/frontend/src/api/technicalArticles.ts
@@ -0,0 +1,25 @@
+//进行接口API的统一管理
+import { request } from "./axios";
+
+export class technicalArticles {
+  /**
+   * @description 获取technicalArticles分类
+   * @return {Promise} 返回请求结果
+   */
+  static async getTechnicalArticlesCategory() {
+    return request("/index/articles/getTechnicalArticlesCategory", "get");
+  }
+
+  /**
+   * @description 获取technicalArticles文章列表
+   * @param {string} cateid - 分类ID
+   * @return {Promise} 返回请求结果
+   */
+  static async getTechnicalArticlesLists(cateid: string) {
+    return request(
+      "/index/articles/getTechnicalArticlesLists",
+      { cateid },
+      "get"
+    );
+  }
+}
diff --git a/frontend/src/assets/imgs/default.png b/frontend/src/assets/imgs/default.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4e4af02c6a2f4e0a9277b5e4aa06672530c3b21
GIT binary patch
literal 10042
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

literal 0
HcmV?d00001

diff --git a/frontend/src/views/downloadGames/index.vue b/frontend/src/views/downloadGames/index.vue
index d0cc976..5da2ffb 100644
--- a/frontend/src/views/downloadGames/index.vue
+++ b/frontend/src/views/downloadGames/index.vue
@@ -1,11 +1,80 @@
 <template>
   <Header />
-  <div class="download-games-page">
+  <div class="resources-page">
     <div class="container">
-      <h1 class="page-title">游戏下载</h1>
-      <div class="content">
-        <p>这里是游戏下载页面内容。</p>
-        <p>您可以在这里提供各种游戏的下载链接和介绍。</p>
+      <div class="top-content">
+        <h1 class="page-title">办公资源</h1>
+        <div class="content flex flex-column align-items-center">
+          <p>发现优质程序与工具</p>
+        </div>
+      </div>
+      <div class="main-content">
+        <!-- 左侧分类导航 -->
+        <div class="left-menu">
+          <div class="menu-title">分类导航</div>
+          <ul class="category-list">
+            <li
+              v-for="category in categories"
+              :key="category.id"
+              class="category-item"
+              :class="{ active: selectedCategory === category.id }"
+              @click="selectCategory(category.id)"
+            >
+              {{ category.name }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- 右侧内容区域 -->
+        <div class="contents">
+          <div v-if="loading" class="loading">加载中...</div>
+          <div v-else-if="resources.length === 0" class="no-data">暂无内容</div>
+          <div v-else class="resources-grid">
+            <div
+              v-for="resource in resources"
+              :key="resource.id"
+              class="resource-card"
+            >
+              <div class="resource-image">
+                <img :src="getImageUrl(resource.icon)" :alt="resource.title" />
+              </div>
+              <div class="card-header">
+                <router-link
+                  :to="`/resource/${resource.id}`"
+                  class="resource-title-link"
+                >
+                  <h3 class="resource-title">{{ resource.title }}</h3>
+                </router-link>
+                <div class="resource-meta">
+                  <span class="resource-view">
+                    <i class="fa-solid fa-eye"></i>
+                    {{ resource.view || 0 }}
+                  </span>
+                  <span class="resource-likes">
+                    <i class="fas fa-download"></i>
+                    {{ resource.likes || 0 }}
+                  </span>
+                  <span class="resource-date">{{
+                    formatDate(resource.create_time)
+                  }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 分页组件 -->
+          <div v-if="total > 0" class="pagination-wrapper">
+            <el-pagination
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              :page-sizes="[10, 20, 50]"
+              :total="total"
+              layout="total, sizes, prev, pager, next, jumper"
+              @size-change="handlePageSizeChange"
+              @current-change="handlePageChange"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -13,26 +82,137 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { ElMessage } from "element-plus";
+import Header from "@/views/components/header.vue";
 import Footer from "@/views/components/footer.vue";
-import Header from "../components/header.vue";
+import { downloadGames } from "@/api/downloadGames";
+
+// 响应式数据
+const categories = ref<any[]>([]); // 分类列表
+const resources = ref<any[]>([]); // 文章列表
+const selectedCategory = ref<string>(""); // 选中的分类
+const loading = ref(false); // 加载状态
+const currentPage = ref(1); // 当前页码
+const pageSize = ref(10); // 每页条数
+const total = ref(0); // 总条数
+
+// 获取图片地址
+const getImageUrl = (imagePath: string) => {
+  if (!imagePath) return "/src/assets/imgs/default.png";
+  return import.meta.env.VITE_API_DOMAIN + imagePath;
+};
+
+// 获取分类列表
+const fetchCategories = async () => {
+  try {
+    const response: any = await downloadGames.getDownloadGamesCategory();
+
+    if (
+      response.data &&
+      response.data.data &&
+      Array.isArray(response.data.data)
+    ) {
+      categories.value = response.data.data;
+      // 默认选择第一个分类
+      if (categories.value.length > 0) {
+        selectedCategory.value = categories.value[0].id;
+        fetchResources();
+      }
+    } else {
+      categories.value = [];
+      ElMessage.warning(response.data?.msg || response.msg || "获取分类失败");
+    }
+  } catch (error) {
+    console.error("获取分类失败:", error);
+    categories.value = [];
+    ElMessage.warning("获取分类失败");
+  }
+};
+
+// 获取文章列表
+const fetchResources = async (_page: number = currentPage.value) => {
+  loading.value = true;
+  try {
+    const response: any = await downloadGames.getDownloadGamesLists(
+      selectedCategory.value
+    );
+
+    const data = response.data?.data;
+    if (data?.resources && Array.isArray(data.resources)) {
+      resources.value = data.resources;
+      total.value = data.total || 0;
+      currentPage.value = data.page || 1;
+      pageSize.value = data.limit || 10;
+    } else {
+      resources.value = [];
+      total.value = 0;
+      ElMessage.warning(response.data?.msg || "获取文章失败");
+    }
+  } catch (error) {
+    console.error("获取文章失败:", error);
+    resources.value = [];
+    total.value = 0;
+    ElMessage.warning("获取文章失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 选择分类
+const selectCategory = (categoryId: string) => {
+  selectedCategory.value = categoryId;
+  currentPage.value = 1; // 切换分类时重置到第一页
+  fetchResources(1);
+};
+
+// 分页处理
+const handlePageChange = (page: number) => {
+  currentPage.value = page;
+  fetchResources(page);
+};
+
+// 每页条数变化
+const handlePageSizeChange = (size: number) => {
+  pageSize.value = size;
+  currentPage.value = 1; // 重置到第一页
+  fetchResources(1);
+};
+
+// 格式化日期
+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");
+};
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchCategories();
+});
 </script>
 
 <style scoped lang="less">
-.download-games-page {
-  padding: 120px 20px 40px; // 顶部padding考虑固定header高度
+.resources-page {
+  padding-top: 100px;
   min-height: 100vh;
-  background: #f5f5f5;
+  background: #f9fafc;
 
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    padding: 40px;
+  .top-content {
+    background: linear-gradient(135deg, #1e9fff 0%, #0d8aff 100%);
+    padding: 80px 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--white);
 
     .page-title {
-      color: #333;
       font-size: 28px;
       font-weight: 600;
       margin-bottom: 20px;
@@ -40,7 +220,6 @@ import Header from "../components/header.vue";
     }
 
     .content {
-      color: #666;
       line-height: 1.6;
 
       p {
@@ -48,17 +227,203 @@ import Header from "../components/header.vue";
       }
     }
   }
-}
 
-@media (max-width: 768px) {
-  .download-games-page {
-    padding: 100px 15px 20px;
+  .main-content {
+    width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    gap: 30px;
+    padding: 40px 0;
+    align-items: flex-start;
 
-    .container {
+    .left-menu {
+      background-color: var(--white);
       padding: 20px;
+      border-radius: 8px;
+      width: 250px;
+      flex-shrink: 0;
+      align-self: flex-start;
 
-      .page-title {
-        font-size: 24px;
+      .menu-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 20px;
+        padding-bottom: 10px;
+        border-bottom: 2px solid #1e9fff;
+      }
+
+      .category-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        .category-item {
+          padding: 12px 16px;
+          margin-bottom: 8px;
+          cursor: pointer;
+          border-radius: 6px;
+          transition: all 0.3s ease;
+          border-left: 3px solid transparent;
+
+          &:hover {
+            background: #f0f8ff;
+            border-left-color: #1e9fff;
+          }
+
+          &.active {
+            background: #e6f7ff;
+            border-left-color: #1e9fff;
+            color: #1e9fff;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+
+    .contents {
+      background-color: var(--white);
+      // min-height: 400px;
+      border-radius: 8px;
+      padding: 20px;
+      flex: 1;
+
+      .pagination-wrapper {
+        margin-top: 30px;
+        display: flex;
+        justify-content: center;
+        padding: 20px 0;
+        border-top: 1px solid #e8e8e8;
+
+        .el-pagination {
+          --el-pagination-font-size: 14px;
+          --el-pagination-button-width: 40px;
+          --el-pagination-button-height: 40px;
+        }
+      }
+
+      .loading,
+      .no-data {
+        text-align: center;
+        padding: 60px 20px;
+        color: #666;
+        font-size: 16px;
+      }
+
+      .resources-grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 20px;
+
+        .resource-card {
+          // min-width: 250px;
+          background: white;
+          border-radius: 8px;
+          overflow: hidden;
+          box-shadow: 0 3px 15px rgba(0, 0, 0, 0.03);
+          transition: all 0.3s ease;
+          display: flex;
+          flex-direction: column;
+
+          &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+          }
+
+          .resource-image {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 140px;
+            overflow: hidden;
+
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+              display: block;
+            }
+          }
+
+          .card-header {
+            padding: 16px 16px 12px;
+
+            .resource-title-link {
+              text-decoration: none;
+              display: block;
+
+              &:hover .resource-title {
+                color: #007bff;
+              }
+            }
+
+            .resource-title {
+              font-size: 14px;
+              font-weight: 600;
+              height: 40px;
+              color: #333;
+              margin: 0 0 8px 0;
+              line-height: 1.4;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              word-break: break-word;
+              transition: color 0.3s ease;
+              cursor: pointer;
+            }
+
+            .resource-meta {
+              display: flex;
+              justify-content: space-between;
+              font-size: 12px;
+              color: #999;
+
+              .resource-view,
+              .resource-likes,
+              .resource-date {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+              }
+            }
+          }
+
+          .card-body {
+            padding: 0 16px;
+
+            .resource-summary {
+              font-size: 12px;
+              color: #666;
+              line-height: 1.5;
+              display: -webkit-box;
+              -webkit-line-clamp: 3;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              margin: 0;
+            }
+          }
+
+          .card-footer {
+            padding: 12px 16px 16px;
+            text-align: right;
+
+            .read-more {
+              color: #1e9fff;
+              text-decoration: none;
+              font-size: 12px;
+              font-weight: 500;
+              transition: color 0.3s ease;
+
+              &:hover {
+                color: #0d8aff;
+                text-decoration: underline;
+              }
+            }
+          }
+        }
       }
     }
   }
diff --git a/frontend/src/views/downloadPrograms/index.vue b/frontend/src/views/downloadPrograms/index.vue
index aa81692..5487cbf 100644
--- a/frontend/src/views/downloadPrograms/index.vue
+++ b/frontend/src/views/downloadPrograms/index.vue
@@ -1,11 +1,80 @@
 <template>
   <Header />
-  <div class="download-programs-page">
+  <div class="resources-page">
     <div class="container">
-      <h1 class="page-title">程序下载</h1>
-      <div class="content">
-        <p>这里是程序下载页面内容。</p>
-        <p>您可以在这里提供各种软件程序的下载链接和介绍。</p>
+      <div class="top-content">
+        <h1 class="page-title">办公资源</h1>
+        <div class="content flex flex-column align-items-center">
+          <p>发现优质程序与工具</p>
+        </div>
+      </div>
+      <div class="main-content">
+        <!-- 左侧分类导航 -->
+        <div class="left-menu">
+          <div class="menu-title">分类导航</div>
+          <ul class="category-list">
+            <li
+              v-for="category in categories"
+              :key="category.id"
+              class="category-item"
+              :class="{ active: selectedCategory === category.id }"
+              @click="selectCategory(category.id)"
+            >
+              {{ category.name }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- 右侧内容区域 -->
+        <div class="contents">
+          <div v-if="loading" class="loading">加载中...</div>
+          <div v-else-if="resources.length === 0" class="no-data">暂无内容</div>
+          <div v-else class="resources-grid">
+            <div
+              v-for="resource in resources"
+              :key="resource.id"
+              class="resource-card"
+            >
+              <div class="resource-image">
+                <img :src="getImageUrl(resource.icon)" :alt="resource.title" />
+              </div>
+              <div class="card-header">
+                <router-link
+                  :to="`/resource/${resource.id}`"
+                  class="resource-title-link"
+                >
+                  <h3 class="resource-title">{{ resource.title }}</h3>
+                </router-link>
+                <div class="resource-meta">
+                  <span class="resource-view">
+                    <i class="fa-solid fa-eye"></i>
+                    {{ resource.view || 0 }}
+                  </span>
+                  <span class="resource-likes">
+                    <i class="fas fa-download"></i>
+                    {{ resource.likes || 0 }}
+                  </span>
+                  <span class="resource-date">{{
+                    formatDate(resource.create_time)
+                  }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 分页组件 -->
+          <div v-if="total > 0" class="pagination-wrapper">
+            <el-pagination
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              :page-sizes="[10, 20, 50]"
+              :total="total"
+              layout="total, sizes, prev, pager, next, jumper"
+              @size-change="handlePageSizeChange"
+              @current-change="handlePageChange"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -13,26 +82,137 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
+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 categories = ref<any[]>([]); // 分类列表
+const resources = ref<any[]>([]); // 文章列表
+const selectedCategory = ref<string>(""); // 选中的分类
+const loading = ref(false); // 加载状态
+const currentPage = ref(1); // 当前页码
+const pageSize = ref(10); // 每页条数
+const total = ref(0); // 总条数
+
+// 获取图片地址
+const getImageUrl = (imagePath: string) => {
+  if (!imagePath) return "/src/assets/imgs/default.png";
+  return import.meta.env.VITE_API_DOMAIN + imagePath;
+};
+
+// 获取分类列表
+const fetchCategories = async () => {
+  try {
+    const response: any = await downloadPrograms.getDownloadProgramsCategory();
+
+    if (
+      response.data &&
+      response.data.data &&
+      Array.isArray(response.data.data)
+    ) {
+      categories.value = response.data.data;
+      // 默认选择第一个分类
+      if (categories.value.length > 0) {
+        selectedCategory.value = categories.value[0].id;
+        fetchResources();
+      }
+    } else {
+      categories.value = [];
+      ElMessage.warning(response.data?.msg || response.msg || "获取分类失败");
+    }
+  } catch (error) {
+    console.error("获取分类失败:", error);
+    categories.value = [];
+    ElMessage.warning("获取分类失败");
+  }
+};
+
+// 获取文章列表
+const fetchResources = async (_page: number = currentPage.value) => {
+  loading.value = true;
+  try {
+    const response: any = await downloadPrograms.getDownloadProgramsLists(
+      selectedCategory.value
+    );
+
+    const data = response.data?.data;
+    if (data?.resources && Array.isArray(data.resources)) {
+      resources.value = data.resources;
+      total.value = data.total || 0;
+      currentPage.value = data.page || 1;
+      pageSize.value = data.limit || 10;
+    } else {
+      resources.value = [];
+      total.value = 0;
+      ElMessage.warning(response.data?.msg || "获取文章失败");
+    }
+  } catch (error) {
+    console.error("获取文章失败:", error);
+    resources.value = [];
+    total.value = 0;
+    ElMessage.warning("获取文章失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 选择分类
+const selectCategory = (categoryId: string) => {
+  selectedCategory.value = categoryId;
+  currentPage.value = 1; // 切换分类时重置到第一页
+  fetchResources(1);
+};
+
+// 分页处理
+const handlePageChange = (page: number) => {
+  currentPage.value = page;
+  fetchResources(page);
+};
+
+// 每页条数变化
+const handlePageSizeChange = (size: number) => {
+  pageSize.value = size;
+  currentPage.value = 1; // 重置到第一页
+  fetchResources(1);
+};
+
+// 格式化日期
+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");
+};
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchCategories();
+});
 </script>
 
 <style scoped lang="less">
-.download-programs-page {
-  padding: 120px 20px 40px; // 顶部padding考虑固定header高度
+.resources-page {
+  padding-top: 100px;
   min-height: 100vh;
-  background: #f5f5f5;
+  background: #f9fafc;
 
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    padding: 40px;
+  .top-content {
+    background: linear-gradient(135deg, #1e9fff 0%, #0d8aff 100%);
+    padding: 80px 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--white);
 
     .page-title {
-      color: #333;
       font-size: 28px;
       font-weight: 600;
       margin-bottom: 20px;
@@ -40,7 +220,6 @@ import Footer from "@/views/components/footer.vue";
     }
 
     .content {
-      color: #666;
       line-height: 1.6;
 
       p {
@@ -48,17 +227,203 @@ import Footer from "@/views/components/footer.vue";
       }
     }
   }
-}
 
-@media (max-width: 768px) {
-  .download-programs-page {
-    padding: 100px 15px 20px;
+  .main-content {
+    width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    gap: 30px;
+    padding: 40px 0;
+    align-items: flex-start;
 
-    .container {
+    .left-menu {
+      background-color: var(--white);
       padding: 20px;
+      border-radius: 8px;
+      width: 250px;
+      flex-shrink: 0;
+      align-self: flex-start;
 
-      .page-title {
-        font-size: 24px;
+      .menu-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 20px;
+        padding-bottom: 10px;
+        border-bottom: 2px solid #1e9fff;
+      }
+
+      .category-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        .category-item {
+          padding: 12px 16px;
+          margin-bottom: 8px;
+          cursor: pointer;
+          border-radius: 6px;
+          transition: all 0.3s ease;
+          border-left: 3px solid transparent;
+
+          &:hover {
+            background: #f0f8ff;
+            border-left-color: #1e9fff;
+          }
+
+          &.active {
+            background: #e6f7ff;
+            border-left-color: #1e9fff;
+            color: #1e9fff;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+
+    .contents {
+      background-color: var(--white);
+      // min-height: 400px;
+      border-radius: 8px;
+      padding: 20px;
+      flex: 1;
+
+      .pagination-wrapper {
+        margin-top: 30px;
+        display: flex;
+        justify-content: center;
+        padding: 20px 0;
+        border-top: 1px solid #e8e8e8;
+
+        .el-pagination {
+          --el-pagination-font-size: 14px;
+          --el-pagination-button-width: 40px;
+          --el-pagination-button-height: 40px;
+        }
+      }
+
+      .loading,
+      .no-data {
+        text-align: center;
+        padding: 60px 20px;
+        color: #666;
+        font-size: 16px;
+      }
+
+      .resources-grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 20px;
+
+        .resource-card {
+          // min-width: 250px;
+          background: white;
+          border-radius: 8px;
+          overflow: hidden;
+          box-shadow: 0 3px 15px rgba(0, 0, 0, 0.03);
+          transition: all 0.3s ease;
+          display: flex;
+          flex-direction: column;
+
+          &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+          }
+
+          .resource-image {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 140px;
+            overflow: hidden;
+
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+              display: block;
+            }
+          }
+
+          .card-header {
+            padding: 16px 16px 12px;
+
+            .resource-title-link {
+              text-decoration: none;
+              display: block;
+
+              &:hover .resource-title {
+                color: #007bff;
+              }
+            }
+
+            .resource-title {
+              font-size: 14px;
+              font-weight: 600;
+              height: 40px;
+              color: #333;
+              margin: 0 0 8px 0;
+              line-height: 1.4;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              word-break: break-word;
+              transition: color 0.3s ease;
+              cursor: pointer;
+            }
+
+            .resource-meta {
+              display: flex;
+              justify-content: space-between;
+              font-size: 12px;
+              color: #999;
+
+              .resource-view,
+              .resource-likes,
+              .resource-date {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+              }
+            }
+          }
+
+          .card-body {
+            padding: 0 16px;
+
+            .resource-summary {
+              font-size: 12px;
+              color: #666;
+              line-height: 1.5;
+              display: -webkit-box;
+              -webkit-line-clamp: 3;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              margin: 0;
+            }
+          }
+
+          .card-footer {
+            padding: 12px 16px 16px;
+            text-align: right;
+
+            .read-more {
+              color: #1e9fff;
+              text-decoration: none;
+              font-size: 12px;
+              font-weight: 500;
+              transition: color 0.3s ease;
+
+              &:hover {
+                color: #0d8aff;
+                text-decoration: underline;
+              }
+            }
+          }
+        }
       }
     }
   }
diff --git a/frontend/src/views/officeResources/index.vue b/frontend/src/views/officeResources/index.vue
index 00f8608..a67e6f1 100644
--- a/frontend/src/views/officeResources/index.vue
+++ b/frontend/src/views/officeResources/index.vue
@@ -1,11 +1,80 @@
 <template>
   <Header />
-  <div class="office-resources-page">
+  <div class="resources-page">
     <div class="container">
-      <h1 class="page-title">办公资源</h1>
-      <div class="content">
-        <p>这里是办公资源页面内容。</p>
-        <p>您可以在这里分享办公模板、工具、资源等内容。</p>
+      <div class="top-content">
+        <h1 class="page-title">办公资源</h1>
+        <div class="content flex flex-column align-items-center">
+          <p>发现优质程序与工具</p>
+        </div>
+      </div>
+      <div class="main-content">
+        <!-- 左侧分类导航 -->
+        <div class="left-menu">
+          <div class="menu-title">分类导航</div>
+          <ul class="category-list">
+            <li
+              v-for="category in categories"
+              :key="category.id"
+              class="category-item"
+              :class="{ active: selectedCategory === category.id }"
+              @click="selectCategory(category.id)"
+            >
+              {{ category.name }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- 右侧内容区域 -->
+        <div class="contents">
+          <div v-if="loading" class="loading">加载中...</div>
+          <div v-else-if="resources.length === 0" class="no-data">暂无内容</div>
+          <div v-else class="resources-grid">
+            <div
+              v-for="resource in resources"
+              :key="resource.id"
+              class="resource-card"
+            >
+              <div class="resource-image">
+                <img :src="getImageUrl(resource.icon)" :alt="resource.title" />
+              </div>
+              <div class="card-header">
+                <router-link
+                  :to="`/resource/${resource.id}`"
+                  class="resource-title-link"
+                >
+                  <h3 class="resource-title">{{ resource.title }}</h3>
+                </router-link>
+                <div class="resource-meta">
+                  <span class="resource-view">
+                    <i class="fa-solid fa-eye"></i>
+                    {{ resource.view || 0 }}
+                  </span>
+                  <span class="resource-likes">
+                    <i class="fas fa-download"></i>
+                    {{ resource.likes || 0 }}
+                  </span>
+                  <span class="resource-date">{{
+                    formatDate(resource.create_time)
+                  }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 分页组件 -->
+          <div v-if="total > 0" class="pagination-wrapper">
+            <el-pagination
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              :page-sizes="[10, 20, 50]"
+              :total="total"
+              layout="total, sizes, prev, pager, next, jumper"
+              @size-change="handlePageSizeChange"
+              @current-change="handlePageChange"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -13,26 +82,137 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { ElMessage } from "element-plus";
 import Header from "@/views/components/header.vue";
 import Footer from "@/views/components/footer.vue";
+import { officeResources } from "@/api/officeResources";
+
+// 响应式数据
+const categories = ref<any[]>([]); // 分类列表
+const resources = ref<any[]>([]); // 文章列表
+const selectedCategory = ref<string>(""); // 选中的分类
+const loading = ref(false); // 加载状态
+const currentPage = ref(1); // 当前页码
+const pageSize = ref(10); // 每页条数
+const total = ref(0); // 总条数
+
+// 获取图片地址
+const getImageUrl = (imagePath: string) => {
+  if (!imagePath) return "/src/assets/imgs/default.png";
+  return import.meta.env.VITE_API_DOMAIN + imagePath;
+};
+
+// 获取分类列表
+const fetchCategories = async () => {
+  try {
+    const response: any = await officeResources.getOfficeResourcesCategory();
+
+    if (
+      response.data &&
+      response.data.data &&
+      Array.isArray(response.data.data)
+    ) {
+      categories.value = response.data.data;
+      // 默认选择第一个分类
+      if (categories.value.length > 0) {
+        selectedCategory.value = categories.value[0].id;
+        fetchResources();
+      }
+    } else {
+      categories.value = [];
+      ElMessage.warning(response.data?.msg || response.msg || "获取分类失败");
+    }
+  } catch (error) {
+    console.error("获取分类失败:", error);
+    categories.value = [];
+    ElMessage.warning("获取分类失败");
+  }
+};
+
+// 获取文章列表
+const fetchResources = async (_page: number = currentPage.value) => {
+  loading.value = true;
+  try {
+    const response: any = await officeResources.getOfficeResourcesLists(
+      selectedCategory.value
+    );
+
+    const data = response.data?.data;
+    if (data?.resources && Array.isArray(data.resources)) {
+      resources.value = data.resources;
+      total.value = data.total || 0;
+      currentPage.value = data.page || 1;
+      pageSize.value = data.limit || 10;
+    } else {
+      resources.value = [];
+      total.value = 0;
+      ElMessage.warning(response.data?.msg || "获取文章失败");
+    }
+  } catch (error) {
+    console.error("获取文章失败:", error);
+    resources.value = [];
+    total.value = 0;
+    ElMessage.warning("获取文章失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 选择分类
+const selectCategory = (categoryId: string) => {
+  selectedCategory.value = categoryId;
+  currentPage.value = 1; // 切换分类时重置到第一页
+  fetchResources(1);
+};
+
+// 分页处理
+const handlePageChange = (page: number) => {
+  currentPage.value = page;
+  fetchResources(page);
+};
+
+// 每页条数变化
+const handlePageSizeChange = (size: number) => {
+  pageSize.value = size;
+  currentPage.value = 1; // 重置到第一页
+  fetchResources(1);
+};
+
+// 格式化日期
+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");
+};
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchCategories();
+});
 </script>
 
 <style scoped lang="less">
-.office-resources-page {
-  padding: 120px 20px 40px; // 顶部padding考虑固定header高度
+.resources-page {
+  padding-top: 100px;
   min-height: 100vh;
-  background: #f5f5f5;
+  background: #f9fafc;
 
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    padding: 40px;
+  .top-content {
+    background: linear-gradient(135deg, #1e9fff 0%, #0d8aff 100%);
+    padding: 80px 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--white);
 
     .page-title {
-      color: #333;
       font-size: 28px;
       font-weight: 600;
       margin-bottom: 20px;
@@ -40,7 +220,6 @@ import Footer from "@/views/components/footer.vue";
     }
 
     .content {
-      color: #666;
       line-height: 1.6;
 
       p {
@@ -48,17 +227,203 @@ import Footer from "@/views/components/footer.vue";
       }
     }
   }
-}
 
-@media (max-width: 768px) {
-  .office-resources-page {
-    padding: 100px 15px 20px;
+  .main-content {
+    width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    gap: 30px;
+    padding: 40px 0;
+    align-items: flex-start;
 
-    .container {
+    .left-menu {
+      background-color: var(--white);
       padding: 20px;
+      border-radius: 8px;
+      width: 250px;
+      flex-shrink: 0;
+      align-self: flex-start;
 
-      .page-title {
-        font-size: 24px;
+      .menu-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 20px;
+        padding-bottom: 10px;
+        border-bottom: 2px solid #1e9fff;
+      }
+
+      .category-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        .category-item {
+          padding: 12px 16px;
+          margin-bottom: 8px;
+          cursor: pointer;
+          border-radius: 6px;
+          transition: all 0.3s ease;
+          border-left: 3px solid transparent;
+
+          &:hover {
+            background: #f0f8ff;
+            border-left-color: #1e9fff;
+          }
+
+          &.active {
+            background: #e6f7ff;
+            border-left-color: #1e9fff;
+            color: #1e9fff;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+
+    .contents {
+      background-color: var(--white);
+      // min-height: 400px;
+      border-radius: 8px;
+      padding: 20px;
+      flex: 1;
+
+      .pagination-wrapper {
+        margin-top: 30px;
+        display: flex;
+        justify-content: center;
+        padding: 20px 0;
+        border-top: 1px solid #e8e8e8;
+
+        .el-pagination {
+          --el-pagination-font-size: 14px;
+          --el-pagination-button-width: 40px;
+          --el-pagination-button-height: 40px;
+        }
+      }
+
+      .loading,
+      .no-data {
+        text-align: center;
+        padding: 60px 20px;
+        color: #666;
+        font-size: 16px;
+      }
+
+      .resources-grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 20px;
+
+        .resource-card {
+          // min-width: 250px;
+          background: white;
+          border-radius: 8px;
+          overflow: hidden;
+          box-shadow: 0 3px 15px rgba(0, 0, 0, 0.03);
+          transition: all 0.3s ease;
+          display: flex;
+          flex-direction: column;
+
+          &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+          }
+
+          .resource-image {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 140px;
+            overflow: hidden;
+
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+              display: block;
+            }
+          }
+
+          .card-header {
+            padding: 16px 16px 12px;
+
+            .resource-title-link {
+              text-decoration: none;
+              display: block;
+
+              &:hover .resource-title {
+                color: #007bff;
+              }
+            }
+
+            .resource-title {
+              font-size: 14px;
+              font-weight: 600;
+              height: 40px;
+              color: #333;
+              margin: 0 0 8px 0;
+              line-height: 1.4;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              word-break: break-word;
+              transition: color 0.3s ease;
+              cursor: pointer;
+            }
+
+            .resource-meta {
+              display: flex;
+              justify-content: space-between;
+              font-size: 12px;
+              color: #999;
+
+              .resource-view,
+              .resource-likes,
+              .resource-date {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+              }
+            }
+          }
+
+          .card-body {
+            padding: 0 16px;
+
+            .resource-summary {
+              font-size: 12px;
+              color: #666;
+              line-height: 1.5;
+              display: -webkit-box;
+              -webkit-line-clamp: 3;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              margin: 0;
+            }
+          }
+
+          .card-footer {
+            padding: 12px 16px 16px;
+            text-align: right;
+
+            .read-more {
+              color: #1e9fff;
+              text-decoration: none;
+              font-size: 12px;
+              font-weight: 500;
+              transition: color 0.3s ease;
+
+              &:hover {
+                color: #0d8aff;
+                text-decoration: underline;
+              }
+            }
+          }
+        }
       }
     }
   }
diff --git a/frontend/src/views/siteInformation/index.vue b/frontend/src/views/siteInformation/index.vue
index 482f17c..7bff5db 100644
--- a/frontend/src/views/siteInformation/index.vue
+++ b/frontend/src/views/siteInformation/index.vue
@@ -130,7 +130,7 @@ const fetchCategories = async () => {
 };
 
 // 获取文章列表
-const fetchArticles = async (page: number = currentPage.value) => {
+const fetchArticles = async (_page: number = currentPage.value) => {
   loading.value = true;
   try {
     const response: any = await siteInformation.getSiteInformationLists(
diff --git a/frontend/src/views/technicalArticles/index.vue b/frontend/src/views/technicalArticles/index.vue
index acc3431..63acdb1 100644
--- a/frontend/src/views/technicalArticles/index.vue
+++ b/frontend/src/views/technicalArticles/index.vue
@@ -1,11 +1,80 @@
 <template>
   <Header />
-  <div class="technical-articles-page">
+  <div class="articles-page">
     <div class="container">
-      <h1 class="page-title">技术文章</h1>
-      <div class="content">
-        <p>这里是技术文章页面内容。</p>
-        <p>您可以在这里展示技术博客、教程、开发经验等内容。</p>
+      <div class="top-content">
+        <h1 class="page-title">技术文章</h1>
+        <div class="content flex flex-column align-items-center">
+          <p>探索知识与洞见</p>
+        </div>
+      </div>
+      <div class="main-content">
+        <!-- 左侧分类导航 -->
+        <div class="left-menu">
+          <div class="menu-title">分类导航</div>
+          <ul class="category-list">
+            <li
+              v-for="category in categories"
+              :key="category.id"
+              class="category-item"
+              :class="{ active: selectedCategory === category.id }"
+              @click="selectCategory(category.id)"
+            >
+              {{ category.name }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- 右侧内容区域 -->
+        <div class="contents">
+          <div v-if="loading" class="loading">加载中...</div>
+          <div v-else-if="articles.length === 0" class="no-data">暂无内容</div>
+          <div v-else class="articles-grid">
+            <div
+              v-for="article in articles"
+              :key="article.id"
+              class="article-card"
+            >
+              <div class="article-image">
+                <img :src="getImageUrl(article.image)" :alt="article.title" />
+              </div>
+              <div class="card-header">
+                <router-link
+                  :to="`/article/${article.id}`"
+                  class="article-title-link"
+                >
+                  <h3 class="article-title">{{ article.title }}</h3>
+                </router-link>
+                <div class="article-meta">
+                  <span class="article-view">
+                    <i class="fa-solid fa-eye"></i>
+                    {{ article.view || 0 }}
+                  </span>
+                  <span class="article-likes">
+                    <i class="fa-solid fa-heart"></i>
+                    {{ article.likes || 0 }}
+                  </span>
+                  <span class="article-date">{{
+                    formatDate(article.publishdate)
+                  }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 分页组件 -->
+          <div v-if="total > 0" class="pagination-wrapper">
+            <el-pagination
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              :page-sizes="[10, 20, 50]"
+              :total="total"
+              layout="total, sizes, prev, pager, next, jumper"
+              @size-change="handlePageSizeChange"
+              @current-change="handlePageChange"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -13,26 +82,142 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { ElMessage } from "element-plus";
 import Header from "@/views/components/header.vue";
 import Footer from "@/views/components/footer.vue";
+import { technicalArticles } from "@/api/technicalArticles";
+
+// 响应式数据
+const categories = ref<any[]>([]); // 分类列表
+const articles = ref<any[]>([]); // 文章列表
+const selectedCategory = ref<string>(""); // 选中的分类
+const loading = ref(false); // 加载状态
+const currentPage = ref(1); // 当前页码
+const pageSize = ref(10); // 每页条数
+const total = ref(0); // 总条数
+
+// 获取图片地址
+const getImageUrl = (imagePath: string) => {
+  if (!imagePath) return "/src/assets/imgs/default.png";
+  return import.meta.env.VITE_API_DOMAIN + imagePath;
+};
+
+// 获取分类列表
+const fetchCategories = async () => {
+  try {
+    const response: any = await technicalArticles.getTechnicalArticlesCategory();
+
+    if (
+      response.data &&
+      response.data.data &&
+      Array.isArray(response.data.data)
+    ) {
+      categories.value = response.data.data;
+      // 默认选择第一个分类
+      if (categories.value.length > 0) {
+        selectedCategory.value = categories.value[0].id;
+        fetchArticles();
+      }
+    } else {
+      categories.value = [];
+      ElMessage.warning(response.data?.msg || response.msg || "获取分类失败");
+    }
+  } catch (error) {
+    console.error("获取分类失败:", error);
+    categories.value = [];
+    ElMessage.warning("获取分类失败");
+  }
+};
+
+// 获取文章列表
+const fetchArticles = async (_page: number = currentPage.value) => {
+  loading.value = true;
+  try {
+    const response: any = await technicalArticles.getTechnicalArticlesLists(
+      selectedCategory.value
+    );
+
+    const data = response.data?.data;
+    if (data?.articles && Array.isArray(data.articles)) {
+      articles.value = data.articles;
+      total.value = data.total || 0;
+      currentPage.value = data.page || 1;
+      pageSize.value = data.limit || 10;
+    } else {
+      articles.value = [];
+      total.value = 0;
+      ElMessage.warning(response.data?.msg || "获取文章失败");
+    }
+  } catch (error) {
+    console.error("获取文章失败:", error);
+    articles.value = [];
+    total.value = 0;
+    ElMessage.warning("获取文章失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 选择分类
+const selectCategory = (categoryId: string) => {
+  selectedCategory.value = categoryId;
+  currentPage.value = 1; // 切换分类时重置到第一页
+  fetchArticles(1);
+};
+
+// 分页处理
+const handlePageChange = (page: number) => {
+  currentPage.value = page;
+  fetchArticles(page);
+};
+
+// 每页条数变化
+const handlePageSizeChange = (size: number) => {
+  pageSize.value = size;
+  currentPage.value = 1; // 重置到第一页
+  fetchArticles(1);
+};
+
+// 格式化日期
+const formatDate = (timestamp: string | number) => {
+  if (!timestamp) return "";
+  // 如果是字符串数字，转换为数字
+  const numTimestamp =
+    typeof timestamp === "string" ? parseInt(timestamp) : timestamp;
+  // 如果时间戳是秒格式（10位），转换为毫秒
+  const date = new Date(
+    numTimestamp < 1e10 ? numTimestamp * 1000 : numTimestamp
+  );
+  return date.toLocaleDateString("zh-CN", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  });
+};
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchCategories();
+});
 </script>
 
 <style scoped lang="less">
-.technical-articles-page {
-  padding: 120px 20px 40px; // 顶部padding考虑固定header高度
+.articles-page {
+  padding-top: 100px;
   min-height: 100vh;
-  background: #f5f5f5;
+  background: #f9fafc;
 
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    padding: 40px;
+  .top-content {
+    background: linear-gradient(135deg, #1e9fff 0%, #0d8aff 100%);
+    padding: 80px 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--white);
 
     .page-title {
-      color: #333;
       font-size: 28px;
       font-weight: 600;
       margin-bottom: 20px;
@@ -40,7 +225,6 @@ import Footer from "@/views/components/footer.vue";
     }
 
     .content {
-      color: #666;
       line-height: 1.6;
 
       p {
@@ -48,17 +232,203 @@ import Footer from "@/views/components/footer.vue";
       }
     }
   }
-}
 
-@media (max-width: 768px) {
-  .technical-articles-page {
-    padding: 100px 15px 20px;
+  .main-content {
+    width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    gap: 30px;
+    padding: 40px 0;
+    align-items: flex-start;
 
-    .container {
+    .left-menu {
+      background-color: var(--white);
       padding: 20px;
+      border-radius: 8px;
+      width: 250px;
+      flex-shrink: 0;
+      align-self: flex-start;
 
-      .page-title {
-        font-size: 24px;
+      .menu-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 20px;
+        padding-bottom: 10px;
+        border-bottom: 2px solid #1e9fff;
+      }
+
+      .category-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        .category-item {
+          padding: 12px 16px;
+          margin-bottom: 8px;
+          cursor: pointer;
+          border-radius: 6px;
+          transition: all 0.3s ease;
+          border-left: 3px solid transparent;
+
+          &:hover {
+            background: #f0f8ff;
+            border-left-color: #1e9fff;
+          }
+
+          &.active {
+            background: #e6f7ff;
+            border-left-color: #1e9fff;
+            color: #1e9fff;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+
+    .contents {
+      background-color: var(--white);
+      // min-height: 400px;
+      border-radius: 8px;
+      padding: 20px;
+      flex: 1;
+
+      .pagination-wrapper {
+        margin-top: 30px;
+        display: flex;
+        justify-content: center;
+        padding: 20px 0;
+        border-top: 1px solid #e8e8e8;
+
+        .el-pagination {
+          --el-pagination-font-size: 14px;
+          --el-pagination-button-width: 40px;
+          --el-pagination-button-height: 40px;
+        }
+      }
+
+      .loading,
+      .no-data {
+        text-align: center;
+        padding: 60px 20px;
+        color: #666;
+        font-size: 16px;
+      }
+
+      .articles-grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 20px;
+
+        .article-card {
+          // min-width: 250px;
+          background: white;
+          border-radius: 8px;
+          overflow: hidden;
+          box-shadow: 0 3px 15px rgba(0, 0, 0, 0.03);
+          transition: all 0.3s ease;
+          display: flex;
+          flex-direction: column;
+
+          &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+          }
+
+          .article-image {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 140px;
+            overflow: hidden;
+
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+              display: block;
+            }
+          }
+
+          .card-header {
+            padding: 16px 16px 12px;
+
+            .article-title-link {
+              text-decoration: none;
+              display: block;
+
+              &:hover .article-title {
+                color: #007bff;
+              }
+            }
+
+            .article-title {
+              font-size: 14px;
+              font-weight: 600;
+              height: 40px;
+              color: #333;
+              margin: 0 0 8px 0;
+              line-height: 1.4;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              word-break: break-word;
+              transition: color 0.3s ease;
+              cursor: pointer;
+            }
+
+            .article-meta {
+              display: flex;
+              justify-content: space-between;
+              font-size: 12px;
+              color: #999;
+
+              .article-view,
+              .article-likes,
+              .article-date {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+              }
+            }
+          }
+
+          .card-body {
+            padding: 0 16px;
+
+            .article-summary {
+              font-size: 12px;
+              color: #666;
+              line-height: 1.5;
+              display: -webkit-box;
+              -webkit-line-clamp: 3;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              margin: 0;
+            }
+          }
+
+          .card-footer {
+            padding: 12px 16px 16px;
+            text-align: right;
+
+            .read-more {
+              color: #1e9fff;
+              text-decoration: none;
+              font-size: 12px;
+              font-weight: 500;
+              transition: color 0.3s ease;
+
+              &:hover {
+                color: #0d8aff;
+                text-decoration: underline;
+              }
+            }
+          }
+        }
       }
     }
   }