feat: 完成cicd流水线

Yi.Ai.Vue3/src/pages/product/index.vue

@@ -1,15 +1,48 @@
+<script setup lang="ts">
+import type { Product } from '@/api/products/products';
+import { ArrowDown, CircleCheck } from '@element-plus/icons-vue';
+import { computed, ref } from 'vue';
+import { products } from '@/data/products';
+
+const productsSection = ref<HTMLElement | null>(null);
+
+function scrollToProducts() {
+  productsSection.value?.scrollIntoView({ behavior: 'smooth' });
+}
+
+function hasPopularPlan(product: Product) {
+  return product.pricing.some(plan => plan.isPopular);
+}
+
+const comparisonData = computed(() => {
+  return [
+    { feature: '基础模型访问', basic: '✓', pro: '✓', enterprise: '✓' },
+    { feature: '高级模型访问', basic: '✗', pro: '✓', enterprise: '✓' },
+    { feature: '请求次数', basic: '有限', pro: '较多', enterprise: '无限' },
+    { feature: '支持响应', basic: '标准', pro: '优先', enterprise: '专属' },
+    { feature: '数据分析工具', basic: '✗', pro: '✓', enterprise: '✓' },
+    { feature: '定制模型', basic: '✗', pro: '有限', enterprise: '完全' },
+    { feature: '部署方式', basic: '公有云', pro: '公有云', enterprise: '私有/公有' },
+  ];
+});
+</script>
+
 <template>
   <div class="products-page">
     <!-- Hero Section -->
     <section class="hero-section">
       <div class="container">
-        <h1 class="hero-title">AI 订阅服务</h1>
+        <h1 class="hero-title">
+          AI 订阅服务
+        </h1>
         <p class="hero-subtitle">
           选择适合您需求的AI解决方案，释放人工智能的全部潜力
         </p>
         <el-button type="primary" size="large" round @click="scrollToProducts">
           查看产品
-          <el-icon class="ml-2"><ArrowDown /></el-icon>
+          <el-icon class="ml-2">
+            <ArrowDown />
+          </el-icon>
         </el-button>
       </div>
     </section>
@@ -17,7 +50,9 @@
     <!-- Products Comparison -->
     <section class="comparison-section">
       <div class="container">
-        <h2 class="section-title">产品对比</h2>
+        <h2 class="section-title">
+          产品对比
+        </h2>
         <div class="comparison-table">
           <el-table :data="comparisonData" style="width: 100%" border>
             <el-table-column prop="feature" label="功能" width="180" />
@@ -30,9 +65,11 @@
     </section>
 
     <!-- Products Cards -->
-    <section class="products-section" ref="productsSection">
+    <section ref="productsSection" class="products-section">
       <div class="container">
-        <h2 class="section-title">我们的产品</h2>
+        <h2 class="section-title">
+          我们的产品
+        </h2>
         <div class="products-grid">
           <el-card
             v-for="product in products"
@@ -42,21 +79,31 @@
             shadow="hover"
           >
             <div class="product-header">
-              <div class="product-badge" v-if="hasPopularPlan(product)">
+              <div v-if="hasPopularPlan(product)" class="product-badge">
                 最受欢迎
               </div>
-              <h3 class="product-name">{{ product.name }}</h3>
-              <p class="product-title">{{ product.title }}</p>
-              <p class="product-description">{{ product.description }}</p>
+              <h3 class="product-name">
+                {{ product.name }}
+              </h3>
+              <p class="product-title">
+                {{ product.title }}
+              </p>
+              <p class="product-description">
+                {{ product.description }}
+              </p>
             </div>
 
             <div class="product-highlight">
-              <el-tag type="info" effect="dark" round>{{ product.highlight }}</el-tag>
+              <el-tag type="info" effect="dark" round>
+                {{ product.highlight }}
+              </el-tag>
             </div>
 
             <div class="product-features">
               <div v-for="feature in product.features" :key="feature.title" class="feature-item">
-                <el-icon class="feature-icon"><component :is="feature.icon" /></el-icon>
+                <el-icon class="feature-icon">
+                  <component :is="feature.icon" />
+                </el-icon>
                 <div class="feature-text">
                   <h4>{{ feature.title }}</h4>
                   <p>{{ feature.description }}</p>
@@ -73,17 +120,19 @@
               >
                 <div class="plan-header">
                   <h4>{{ plan.name }}</h4>
-                  <div class="plan-price" v-if="plan.price > 0">
+                  <div v-if="plan.price > 0" class="plan-price">
                     <span class="price-amount">¥{{ plan.price }}</span>
                     <span class="price-period">/{{ plan.period }}</span>
                   </div>
-                  <div class="plan-price" v-else>
+                  <div v-else class="plan-price">
                     <span class="price-amount">定制价格</span>
                   </div>
                 </div>
                 <ul class="plan-features">
                   <li v-for="(feature, idx) in plan.features" :key="idx">
-                    <el-icon class="feature-check"><CircleCheck /></el-icon>
+                    <el-icon class="feature-check">
+                      <CircleCheck />
+                    </el-icon>
                     {{ feature }}
                   </li>
                 </ul>
@@ -105,10 +154,12 @@
     <!-- FAQ Section -->
     <section class="faq-section">
       <div class="container">
-        <h2 class="section-title">常见问题</h2>
+        <h2 class="section-title">
+          常见问题
+        </h2>
         <div class="faq-grid">
-          <el-collapse v-for="product in products" :key="product.id + '-faq'" accordion>
-            <el-collapse-item :title="product.name + '常见问题'" :name="product.id">
+          <el-collapse v-for="product in products" :key="`${product.id}-faq`" accordion>
+            <el-collapse-item :title="`${product.name}常见问题`" :name="product.id">
               <div v-for="(faq, idx) in product.faqs" :key="idx" class="faq-item">
                 <h4>{{ faq.question }}</h4>
                 <p>{{ faq.answer }}</p>
@@ -121,35 +172,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { ArrowDown, CircleCheck, MagicStick, Clock, Lock, Cpu, DataLine, User, Setting, OfficeBuilding, Service } from '@element-plus/icons-vue'
-import { products } from '@/data/products'
-import { Product } from '@/api/products/products'
-
-const productsSection = ref<HTMLElement | null>(null)
-
-const scrollToProducts = () => {
-  productsSection.value?.scrollIntoView({ behavior: 'smooth' })
-}
-
-const hasPopularPlan = (product: Product) => {
-  return product.pricing.some(plan => plan.isPopular)
-}
-
-const comparisonData = computed(() => {
-  return [
-    { feature: '基础模型访问', basic: '✓', pro: '✓', enterprise: '✓' },
-    { feature: '高级模型访问', basic: '✗', pro: '✓', enterprise: '✓' },
-    { feature: '请求次数', basic: '有限', pro: '较多', enterprise: '无限' },
-    { feature: '支持响应', basic: '标准', pro: '优先', enterprise: '专属' },
-    { feature: '数据分析工具', basic: '✗', pro: '✓', enterprise: '✓' },
-    { feature: '定制模型', basic: '✗', pro: '有限', enterprise: '完全' },
-    { feature: '部署方式', basic: '公有云', pro: '公有云', enterprise: '私有/公有' }
-  ]
-})
-</script>
-
 <style scoped lang="scss">
 .products-page {
   color: #333;