refactor: 解决方案页的API重构

app/pages/solutions/[slug].vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="page-container">
+    <div v-if="!pending">
+      <div v-if="solution">
+        <div class="page-header">
+          <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
+        </div>
+        <solution-detail :solution="solution" />
+      </div>
+      <div v-else class="not-found">
+        <not-found-result
+          :title="$t('solution-not-found')"
+          :sub-title="$t('solution-not-found-desc')"
+          :back-text="$t('back-to-solutions')"
+          :on-back="() => $router.push($localePath('/solutions'))"
+        />
+      </div>
+    </div>
+    <div v-else class="loading">
+      <el-skeleton :rows="5" animated />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const route = useRoute();
+  const localePath = useLocalePath();
+
+  // 获取路由参数
+  const id = route.params.slug as string;
+
+  const { data, pending, error } = await useSolution(id);
+
+  const solution = computed(() => {
+    if (!data.value) {
+      return null;
+    }
+    return toSolutionView(data.value.solutions_by_id);
+  });
+
+  const breadcrumbItems = computed(() => [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.solutions'), to: localePath('/solutions') },
+    { label: solution.value ? solution.value.title : '' },
+  ]);
+
+  watch(error, (value) => {
+    if (value) {
+      logger.error('数据获取失败: ', value);
+    }
+  });
+
+  usePageSeo({
+    title: solution.value.title || $t('page-title.solutions'),
+    description: solution.value.summary || '',
+  });
+</script>
+
+<style scoped>
+  .page-container {
+    padding: 1rem;
+    min-height: 80vh;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .breadcrumb {
+    padding: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+  }
+
+  .not-found {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+  }
+</style>