From fe130e097152655e2e8f08e226550231980662fb Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Tue, 7 Oct 2025 17:24:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E7=AB=A0=E5=B8=83=E5=B1=80=EF=BC=8C?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0=E9=A1=B5=E9=9D=A2=E9=87=87=E7=94=A8=E6=96=87?=
 =?UTF-8?q?=E7=AB=A0=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/news/new.vue | 81 +++++++++++++++++++------------------
 app/layouts/article.vue     | 13 ++++++
 app/pages/new.vue           |  8 +++-
 3 files changed, 60 insertions(+), 42 deletions(-)
 create mode 100644 app/layouts/article.vue

diff --git a/app/components/news/new.vue b/app/components/news/new.vue
index fb43567..3b6c8ea 100644
--- a/app/components/news/new.vue
+++ b/app/components/news/new.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+
 // 文章头部信息
 const articleHeader = {
   title: '共享烘干机APP方案开发与制作',
@@ -248,7 +249,7 @@ const pagination = {
     <!-- 页面布局 -->
     <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
-        
+
         <!-- 主内容区域 -->
         <div class="lg:col-span-3">
           <!-- 文章头部 -->
@@ -277,10 +278,10 @@ const pagination = {
             <!-- 主图展示 -->
             <div class="relative mb-8">
               <div class="relative overflow-hidden rounded-xl">
-                <img 
-                  :src="articleContent.heroImage.src" 
-                  :alt="articleContent.heroImage.alt"
-                  class="w-full h-64 md:h-80 object-cover"
+                <img
+                    :alt="articleContent.heroImage.alt"
+                    :src="articleContent.heroImage.src"
+                    class="w-full h-64 md:h-80 object-cover"
                 >
                 <!-- 红色覆盖按钮 -->
                 <div class="absolute bottom-4 right-4">
@@ -293,10 +294,10 @@ const pagination = {
 
             <!-- 文章段落 -->
             <div class="space-y-6 mb-8">
-              <p 
-                v-for="(paragraph, index) in articleContent.paragraphs" 
-                :key="index"
-                class="text-gray-700 dark:text-gray-300 leading-relaxed"
+              <p
+                  v-for="(paragraph, index) in articleContent.paragraphs"
+                  :key="index"
+                  class="text-gray-700 dark:text-gray-300 leading-relaxed"
               >
                 {{ paragraph }}
               </p>
@@ -306,10 +307,10 @@ const pagination = {
             <div class="mb-8">
               <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">标签:</h3>
               <div class="flex flex-wrap gap-2">
-                <span 
-                  v-for="tag in articleContent.tags" 
-                  :key="tag"
-                  class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm font-medium hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors duration-200"
+                <span
+                    v-for="tag in articleContent.tags"
+                    :key="tag"
+                    class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm font-medium hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors duration-200"
                 >
                   {{ tag }}
                 </span>
@@ -320,18 +321,18 @@ const pagination = {
             <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
               <div class="flex flex-col sm:flex-row sm:justify-between gap-4">
                 <div v-if="pagination.previous" class="flex-1">
-                  <NuxtLink 
-                    :to="pagination.previous.link"
-                    class="block p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200"
+                  <NuxtLink
+                      :to="pagination.previous.link"
+                      class="block p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200"
                   >
                     <div class="text-sm text-gray-500 dark:text-gray-400 mb-1">上一篇:</div>
                     <div class="text-gray-900 dark:text-white font-medium">{{ pagination.previous.title }}</div>
                   </NuxtLink>
                 </div>
                 <div v-if="pagination.next" class="flex-1">
-                  <NuxtLink 
-                    :to="pagination.next.link"
-                    class="block p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 text-right"
+                  <NuxtLink
+                      :to="pagination.next.link"
+                      class="block p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 text-right"
                   >
                     <div class="text-sm text-gray-500 dark:text-gray-400 mb-1">下一篇:</div>
                     <div class="text-gray-900 dark:text-white font-medium">{{ pagination.next.title }}</div>
@@ -345,18 +346,18 @@ const pagination = {
         <!-- 侧边栏 -->
         <div class="lg:col-span-1">
           <div class="space-y-8">
-            
+
             <!-- 热门标签 -->
             <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
               <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                 热门标签
               </h3>
               <div class="flex flex-wrap gap-2">
-                <NuxtLink 
-                  v-for="tag in popularTags" 
-                  :key="tag"
-                  to="/tags"
-                  class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200"
+                <NuxtLink
+                    v-for="tag in popularTags"
+                    :key="tag"
+                    class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200"
+                    to="/tags"
                 >
                   {{ tag }}
                 </NuxtLink>
@@ -369,11 +370,11 @@ const pagination = {
                 解决方案
               </h3>
               <div class="space-y-3">
-                <NuxtLink 
-                  v-for="article in solutionsArticles" 
-                  :key="article.id"
-                  :to="article.link"
-                  class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
+                <NuxtLink
+                    v-for="article in solutionsArticles"
+                    :key="article.id"
+                    :to="article.link"
+                    class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
                 >
                   <div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
                     {{ article.title }}
@@ -391,11 +392,11 @@ const pagination = {
                 开发知识
               </h3>
               <div class="space-y-3">
-                <NuxtLink 
-                  v-for="article in devKnowledgeArticles" 
-                  :key="article.id"
-                  :to="article.link"
-                  class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
+                <NuxtLink
+                    v-for="article in devKnowledgeArticles"
+                    :key="article.id"
+                    :to="article.link"
+                    class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
                 >
                   <div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
                     {{ article.title }}
@@ -413,11 +414,11 @@ const pagination = {
                 行业动态
               </h3>
               <div class="space-y-3">
-                <NuxtLink 
-                  v-for="article in industryTrendsArticles" 
-                  :key="article.id"
-                  :to="article.link"
-                  class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
+                <NuxtLink
+                    v-for="article in industryTrendsArticles"
+                    :key="article.id"
+                    :to="article.link"
+                    class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
                 >
                   <div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
                     {{ article.title }}
diff --git a/app/layouts/article.vue b/app/layouts/article.vue
new file mode 100644
index 0000000..08539b6
--- /dev/null
+++ b/app/layouts/article.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div>
+    <UContainer>
+      <AppHeader/>
+      <slot/>
+      <BottomNavigation/>
+      <AppFooter/>
+    </UContainer>
+  </div>
+</template>
diff --git a/app/pages/new.vue b/app/pages/new.vue
index f6690fc..ff7daee 100644
--- a/app/pages/new.vue
+++ b/app/pages/new.vue
@@ -1,5 +1,8 @@
 <script lang="ts" setup>
-
+// 设置页面布局
+definePageMeta({
+  layout: 'article'
+})
 </script>
 
 <template>
@@ -10,4 +13,5 @@
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
+