From 9982481c83abd1bc7fda6b770c9c40c6e46b7e28 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Wed, 29 Oct 2025 17:03:28 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=B0=86=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?=E6=96=B9=E6=A1=88=E9=A1=B5=E6=96=87=E7=AB=A0=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E4=B8=BA=E5=8D=95=E7=8B=AC=E7=9A=84=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/solutions/SolutionDetail.vue        | 54 +++++++++++++++++++
 app/pages/solutions/[...slug].vue             | 54 +------------------
 2 files changed, 55 insertions(+), 53 deletions(-)
 create mode 100644 app/components/pages/solutions/SolutionDetail.vue

diff --git a/app/components/pages/solutions/SolutionDetail.vue b/app/components/pages/solutions/SolutionDetail.vue
new file mode 100644
index 0000000..6eaf8dc
--- /dev/null
+++ b/app/components/pages/solutions/SolutionDetail.vue
@@ -0,0 +1,54 @@
+<template>
+  <article class="solution-defail">
+    <header class="solution-header">
+      <h1 class="solution-title">{{ solution.title }}</h1>
+      <dl class="solution-meta">
+        <dt class="visually-hidden">CreatedAt:</dt>
+        <dd class="solution-date">
+          {{ new Date(solution.createAt).toLocaleDateString() }}
+        </dd>
+      </dl>
+      <p class="solution-summary">{{ solution.summary }}</p>
+    </header>
+    <section class="solution-content">
+      <markdown-renderer :content="solution?.content || ''" />
+    </section>
+  </article>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    solution: {
+      type: Object as PropType<SolutionView>,
+      default: null,
+    },
+  });
+</script>
+
+<style scoped>
+  .solution-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+    text-align: center;
+  }
+
+  .solution-meta {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 0.5rem;
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+  }
+
+  .solution-summary {
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+    text-align: center;
+  }
+
+  .solution-content {
+    margin-top: 1rem;
+  }
+</style>
diff --git a/app/pages/solutions/[...slug].vue b/app/pages/solutions/[...slug].vue
index 5c40968..138af1a 100644
--- a/app/pages/solutions/[...slug].vue
+++ b/app/pages/solutions/[...slug].vue
@@ -5,21 +5,7 @@
         <div class="page-header">
           <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
         </div>
-        <div class="page-content">
-          <div class="solution-info">
-            <h1>{{ solution.title }}</h1>
-            <div class="solution-meta">
-              <span class="solution-date">
-                CreatedAt:
-                {{ new Date(solution.createAt).toLocaleDateString() }}
-              </span>
-            </div>
-          </div>
-          <p class="summary">{{ solution.summary }}</p>
-          <div class="solution-content">
-            <markdown-renderer :content="solution.content || ''" />
-          </div>
-        </div>
+        <solution-detail :solution="solution" />
       </div>
       <div v-else class="not-found">
         <not-found-result
@@ -78,44 +64,6 @@
     margin-bottom: 1rem;
   }
 
-  .solution-header {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-  }
-
-  .solution-header el-image {
-    width: 200px;
-    height: 200px;
-    border-radius: 4px;
-  }
-
-  .page-content h1 {
-    font-size: 2rem;
-    font-weight: bold;
-    color: var(--el-color-primary);
-    text-align: center;
-  }
-
-  .solution-meta {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    margin-bottom: 0.5rem;
-    font-size: 0.8rem;
-    color: var(--el-text-color-secondary);
-  }
-
-  .summary {
-    font-size: 0.8rem;
-    color: var(--el-text-color-secondary);
-    text-align: center;
-  }
-
-  .solution-content {
-    margin-top: 1rem;
-  }
-
   .loading {
     display: flex;
     justify-content: center;