refactor: 调整components目录

- 将components根据作用范围/可复用性进行分类

app/components/shared/SolutionCard.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-card
+    class="solution-card"
+    body-class="card-body"
+    header-class="card-header"
+    @click="handleClick"
+  >
+    <template #header>
+      <!-- Cover Image -->
+      <el-image class="solution-cover" :src="coverUrl" fit="cover" />
+    </template>
+    <!-- Title -->
+    <template #default>
+      <div class="text-center mx-auto text-md">
+        <span class="solution-title">{{ title }}</span>
+      </div>
+      <!-- Summary -->
+      <div class="mx-auto mt-5 text-left text-sm opacity-25">{{ summary }}</div>
+    </template>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    title: string;
+    summary: string;
+    coverUrl: string;
+    documentId?: string;
+  }
+
+  const props = defineProps<Props>();
+  const localePath = useLocalePath();
+
+  const handleClick = () => {
+    const routeParam = props.documentId;
+    if (routeParam) {
+      navigateTo(localePath(`/solutions/${routeParam}`));
+    }
+  };
+</script>
+
+<style scoped>
+  .solution-card {
+    width: 30%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: center;
+  }
+
+  .solution-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  }
+
+  .solution-title {
+    font-weight: 600;
+  }
+
+  :deep(.card-header) {
+    padding: 0;
+    border-bottom: none !important;
+  }
+
+  :deep(.card-body) {
+    margin: 10px auto;
+    padding: 1px auto;
+  }
+
+  .solution-card .el-image {
+    height: 250px;
+  }
+
+  @media (max-width: 1200px) {
+    .solution-card {
+      width: 45%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .solution-card {
+      width: 90%;
+      margin: 10px auto;
+    }
+  }
+</style>