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>

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;