diff --git a/app/components/DevelopNews.vue b/app/components/DevelopNews.vue
new file mode 100644
index 0000000..34bb39f
--- /dev/null
+++ b/app/components/DevelopNews.vue
@@ -0,0 +1,177 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { getArticleList, type Article } from '~/config/api'
+
+// 类型定义
+interface NewsCategory {
+  name: string
+  code: string
+  articleList: Article[]
+}
+
+// 响应式数据
+const newsData = ref<NewsCategory[]>([])
+const loading = ref(false)
+const error = ref('')
+
+// 文章类型配置
+const articleTypes = [
+  { name: '解决方案', code: 'solution' },
+  { name: '开发知识', code: 'developKnowledge' },
+  { name: '行业动态', code: 'industryTrend' }
+]
+
+// 格式化时间
+const formatTime = (timeString: string): string => {
+  if (!timeString) return ''
+  const date = new Date(timeString)
+  if (isNaN(date.getTime())) return timeString
+  
+  const Y = date.getFullYear()
+  const M = String(date.getMonth() + 1).padStart(2, '0')
+  const D = String(date.getDate()).padStart(2, '0')
+  const h = String(date.getHours()).padStart(2, '0')
+  const m = String(date.getMinutes()).padStart(2, '0')
+  return `${Y}-${M}-${D} ${h}:${m}`
+}
+
+// 获取文章链接
+const getArticleLink = (articleId: string): string => {
+  return `/article/${articleId}`
+}
+
+// 获取显示的文章列表（每个分类显示前2篇文章）
+const getDisplayArticles = (articles: Article[]): Article[] => {
+  return articles.slice(0, 2)
+}
+
+// 获取新闻数据
+const fetchNewsData = async (): Promise<void> => {
+  loading.value = true
+  error.value = ''
+
+  try {
+    // 并发获取所有类型的文章数据
+    const promises = articleTypes.map(async (type) => {
+      try {
+        const response = await getArticleList({
+          code: type.code,
+          pageNum: 1,
+          pageSize: 10
+        })
+        
+        return {
+          name: type.name,
+          code: type.code,
+          articleList: response.rows || []
+        }
+      } catch (err) {
+        console.error(`获取 ${type.name} 文章失败:`, err)
+        return {
+          name: type.name,
+          code: type.code,
+          articleList: []
+        }
+      }
+    })
+
+    const results = await Promise.all(promises)
+    newsData.value = results
+
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : '获取新闻数据失败'
+    console.error('获取新闻数据时发生错误:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchNewsData()
+})
+</script>
+
+<template>
+  <!--box3 新闻-->
+  <div class="container mx-auto px-4">
+    <!-- 标题区域 -->
+    <div class="text-center py-12">
+      <div
+          class="text-black text-4xl leading-tight mb-10 wow fadeInDown animated"
+          style="visibility: visible; animation-name: fadeInDown;">
+        开发资讯
+      </div>
+      <div class="text-gray-600 text-lg wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
+        NEWS
+      </div>
+      <div class="py-5"/>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="text-center py-12">
+      <div class="text-gray-600 text-lg animate-pulse">正在加载新闻...</div>
+      <div class="py-12"/>
+    </div>
+
+    <!-- 错误状态 -->
+    <div v-else-if="error" class="text-center py-12">
+      <div class="text-red-600 text-lg mb-5">加载失败: {{ error }}</div>
+      <button
+          class="inline-block px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-base font-normal rounded transition-all duration-150 ease-in-out cursor-pointer border border-transparent"
+          @click="fetchNewsData">
+        重新加载
+      </button>
+      <div class="py-12"/>
+    </div>
+
+    <!-- 新闻分类列表 -->
+    <div v-else class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
+      <div
+          v-for="(category, index) in newsData"
+          :key="category.name"
+          :data-wow-delay="`${300 + index * 200}ms`"
+          :style="`visibility: visible; animation-delay: ${300 + index * 200}ms; animation-name: fadeInDown;`"
+          class="wow fadeInDown animated active mb-8 lg:mb-12">
+
+        <!-- 分类标题 -->
+        <div :title="category.name" class="text-xl lg:text-2xl text-blue-600 text-center cursor-pointer mb-5">
+          {{ category.name }}
+        </div>
+        <hr class="border-gray-300 mb-5"/>
+        <div class="py-5"/>
+
+        <!-- 文章列表 -->
+        <template v-if="category.articleList.length > 0">
+          <ul class="list-none p-0 m-0">
+            <li v-for="article in getDisplayArticles(category.articleList)" :key="article.id" class="mb-2.5">
+              <a
+                  :href="getArticleLink(article.id)"
+                  :title="article.title"
+                  class="text-gray-600 text-sm block py-1.5 no-underline hover:underline transition-all"
+                  target="_blank">
+                <div class="flex items-center justify-between gap-3">
+                  <span class="truncate flex-1 pr-2">{{ article.title }}</span>
+                  <span class="text-gray-500 text-xs whitespace-nowrap flex-shrink-0">{{ formatTime(article.createTime) }}</span>
+                </div>
+                <div class="py-5"/>
+              </a>
+            </li>
+          </ul>
+        </template>
+        <div v-else class="text-center text-gray-600 text-sm py-5">
+          暂无文章
+        </div>
+
+
+      </div>
+    </div>
+
+    <!-- 空状态 -->
+    <div v-if="!loading && !error && newsData.length === 0" class="text-center py-12">
+      <div class="text-gray-600 text-lg">暂无新闻数据</div>
+      <div class="py-12"/>
+    </div>
+  </div>
+</template>
+
+
diff --git a/app/config/api.ts b/app/config/api.ts
index 92f2a0a..479fa14 100644
--- a/app/config/api.ts
+++ b/app/config/api.ts
@@ -35,6 +35,43 @@ export interface ApiResponse<T> {
   data: T
 }
 
+/**
+ * 文章数据类型定义
+ */
+export interface Article {
+  id: string
+  title: string
+  brief: string | null
+  content: string | null
+  createTime: string
+  createBy?: string | null
+  updateTime?: string | null
+  updateBy?: string | null
+  remark?: string | null
+  code?: string | null
+  status?: string | null
+  scope?: string | null
+  deleted?: string | null
+  areaPermissions?: string | null
+}
+
+/**
+ * 分页响应数据结构
+ */
+export interface PageResponse<T> {
+  total: number
+  rows: T[]
+}
+
+/**
+ * 获取文章列表的查询参数
+ */
+export interface GetArticleListParams {
+  pageNum?: number
+  pageSize?: number
+  code?: string
+}
+
 /**
  * 获取轮播图列表
  * @returns Promise<BannerItem[]> 返回轮播图数据数组
@@ -72,3 +109,52 @@ export async function getBannerList(): Promise<BannerItem[]> {
   }
 }
 
+/**
+ * 获取文章列表
+ * @param params 查询参数（pageNum, pageSize, code等）
+ * @returns Promise<PageResponse<Article>> 返回分页的文章数据
+ */
+export async function getArticleList(
+  params: GetArticleListParams = {}
+): Promise<PageResponse<Article>> {
+  try {
+    const { pageNum = 1, pageSize = 10, code } = params
+    
+    // 构建查询参数
+    const queryParams: Record<string, string> = {
+      pageNum: pageNum.toString(),
+      pageSize: pageSize.toString(),
+    }
+    
+    if (code) {
+      queryParams.code = code
+    }
+
+    const response = await $fetch<PageResponse<Article>>(
+      `${API_BASE_URL}/app/owArticle/list`,
+      {
+        method: 'GET',
+        params: queryParams,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    )
+
+    // 检查响应数据
+    if (response && Array.isArray(response.rows)) {
+      return {
+        total: response.total || 0,
+        rows: response.rows || [],
+      }
+    }
+
+    console.warn('获取文章列表失败，返回空数据', response)
+    return { total: 0, rows: [] }
+  } catch (error) {
+    console.error('获取文章列表时发生错误:', error)
+    // 发生错误时返回空数据，避免页面崩溃
+    return { total: 0, rows: [] }
+  }
+}
+
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index cce3b6b..e72f587 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -2,6 +2,7 @@
   <div>
     <AppHeader/>
     <slot/>
+    <DevelopNews/>
     <AppFooter/>
     <ContactFloatingButton/>
   </div>