refactor: 将解决方案页文章提取为单独的组件

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>