feat: 产品页面搭建

Yi.Ai.Vue3/src/api/products/products.ts

@@ -0,0 +1,28 @@
+// 创建产品类型定义
+export interface ProductFeature {
+  icon: string
+  title: string
+  description: string
+}
+
+export interface PricingPlan {
+  name: string
+  price: number
+  period: string
+  features: string[]
+  isPopular?: boolean
+}
+
+export interface Product {
+  id: string
+  name: string
+  title: string
+  description: string
+  highlight: string
+  features: ProductFeature[]
+  pricing: PricingPlan[]
+  faqs: {
+    question: string
+    answer: string
+  }[]
+}

Yi.Ai.Vue3/src/config/index.ts

@@ -12,4 +12,4 @@ export const COLLAPSE_THRESHOLD: number = 600;
 export const SIDE_BAR_WIDTH: number = 280;
 
 // 路由白名单地址[本地存在的路由 staticRouter.ts 中]
-export const ROUTER_WHITE_LIST: string[] = ['/chat', '/chat/not_login', '/403', '/404'];
+export const ROUTER_WHITE_LIST: string[] = ['/chat', '/chat/not_login', '/product', '/403', '/404'];

Yi.Ai.Vue3/src/data/products.ts

@@ -0,0 +1,144 @@
+// 创建产品数据
+import { Product } from '@/api/products/products'
+
+export const products: Product[] = [
+  {
+    id: 'basic',
+    name: '基础版',
+    title: 'AI基础解决方案',
+    description: '适合个人用户和小型团队的入门级AI工具',
+    highlight: '性价比之选',
+    features: [
+      {
+        icon: 'MagicStick',
+        title: '基础模型',
+        description: '使用我们的基础AI模型完成日常任务'
+      },
+      {
+        icon: 'Clock',
+        title: '快速响应',
+        description: '平均响应时间在2秒以内'
+      },
+      {
+        icon: 'Lock',
+        title: '基础安全',
+        description: '标准数据加密和保护措施'
+      }
+    ],
+    pricing: [
+      {
+        name: '月付',
+        price: 99,
+        period: '月',
+        features: ['1000次请求/月', '基础模型访问', '标准支持']
+      },
+      {
+        name: '年付',
+        price: 899,
+        period: '年',
+        features: ['12000次请求/年', '基础模型访问', '标准支持', '节省15%']
+      }
+    ],
+    faqs: [
+      {
+        question: '基础版适合哪些用户？',
+        answer: '适合个人开发者、小型团队或想尝试AI技术的用户。'
+      },
+      {
+        question: '超出请求次数会怎样？',
+        answer: '超出后可以按需购买额外请求包或升级到更高版本。'
+      }
+    ]
+  },
+  {
+    id: 'pro',
+    name: '专业版',
+    title: 'AI专业解决方案',
+    description: '为企业和专业开发者设计的高级AI工具集',
+    highlight: '最受欢迎',
+    features: [
+      {
+        icon: 'Cpu',
+        title: '高级模型',
+        description: '使用我们最先进的AI模型获得更好结果'
+      },
+      {
+        icon: 'DataLine',
+        title: '数据分析',
+        description: '内置数据分析工具和可视化'
+      },
+      {
+        icon: 'User',
+        title: '优先支持',
+        description: '专属客户经理和技术支持'
+      }
+    ],
+    pricing: [
+      {
+        name: '月付',
+        price: 299,
+        period: '月',
+        features: ['5000次请求/月', '高级模型访问', '优先支持', '数据分析工具']
+      },
+      {
+        name: '年付',
+        price: 2599,
+        period: '年',
+        features: ['60000次请求/年', '高级模型访问', '专属客户经理', '节省25%', '数据分析工具'],
+        isPopular: true
+      }
+    ],
+    faqs: [
+      {
+        question: '专业版有什么额外功能？',
+        answer: '包含高级模型访问、数据分析工具和优先支持服务。'
+      },
+      {
+        question: '可以定制请求次数吗？',
+        answer: '可以联系我们定制适合您业务需求的套餐。'
+      }
+    ]
+  },
+  {
+    id: 'enterprise',
+    name: '企业版',
+    title: 'AI企业解决方案',
+    description: '为大型组织设计的全方位AI平台',
+    highlight: '全面定制',
+    features: [
+      {
+        icon: 'Setting',
+        title: '完全定制',
+        description: '根据您的需求定制AI模型和工作流'
+      },
+      {
+        icon: 'OfficeBuilding',
+        title: '专属部署',
+        description: '支持私有化部署和专属云服务'
+      },
+      {
+        icon: 'Service',
+        title: '专属团队',
+        description: '我们的工程师团队为您提供专属支持'
+      }
+    ],
+    pricing: [
+      {
+        name: '定制方案',
+        price: 0,
+        period: '',
+        features: ['无限请求', '完全定制模型', '私有化部署', '专属支持团队', 'SLA保障']
+      }
+    ],
+    faqs: [
+      {
+        question: '企业版如何定价？',
+        answer: '根据您的具体需求定制价格，请联系我们的销售团队获取报价。'
+      },
+      {
+        question: '支持私有化部署吗？',
+        answer: '是的，我们支持完全的私有化部署以满足企业安全需求。'
+      }
+    ]
+  }
+]

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

@@ -0,0 +1,432 @@
+<template>
+  <div class="products-page">
+    <!-- Hero Section -->
+    <section class="hero-section">
+      <div class="container">
+        <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-button>
+      </div>
+    </section>
+
+    <!-- Products Comparison -->
+    <section class="comparison-section">
+      <div class="container">
+        <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" />
+            <el-table-column prop="basic" label="基础版" />
+            <el-table-column prop="pro" label="专业版" />
+            <el-table-column prop="enterprise" label="企业版" />
+          </el-table>
+        </div>
+      </div>
+    </section>
+
+    <!-- Products Cards -->
+    <section class="products-section" ref="productsSection">
+      <div class="container">
+        <h2 class="section-title">我们的产品</h2>
+        <div class="products-grid">
+          <el-card
+            v-for="product in products"
+            :key="product.id"
+            class="product-card"
+            :class="{ 'popular-card': hasPopularPlan(product) }"
+            shadow="hover"
+          >
+            <div class="product-header">
+              <div class="product-badge" v-if="hasPopularPlan(product)">
+                最受欢迎
+              </div>
+              <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>
+            </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>
+                <div class="feature-text">
+                  <h4>{{ feature.title }}</h4>
+                  <p>{{ feature.description }}</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="pricing-plans">
+              <div
+                v-for="plan in product.pricing"
+                :key="plan.name"
+                class="pricing-plan"
+                :class="{ 'popular-plan': plan.isPopular }"
+              >
+                <div class="plan-header">
+                  <h4>{{ plan.name }}</h4>
+                  <div class="plan-price" v-if="plan.price > 0">
+                    <span class="price-amount">¥{{ plan.price }}</span>
+                    <span class="price-period">/{{ plan.period }}</span>
+                  </div>
+                  <div class="plan-price" v-else>
+                    <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>
+                    {{ feature }}
+                  </li>
+                </ul>
+                <el-button
+                  type="primary"
+                  class="subscribe-btn"
+                  :class="{ 'popular-btn': plan.isPopular }"
+                  round
+                >
+                  立即订阅
+                </el-button>
+              </div>
+            </div>
+          </el-card>
+        </div>
+      </div>
+    </section>
+
+    <!-- FAQ Section -->
+    <section class="faq-section">
+      <div class="container">
+        <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">
+              <div v-for="(faq, idx) in product.faqs" :key="idx" class="faq-item">
+                <h4>{{ faq.question }}</h4>
+                <p>{{ faq.answer }}</p>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </div>
+    </section>
+  </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;
+  line-height: 1.6;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.section-title {
+  text-align: center;
+  font-size: 2rem;
+  margin-bottom: 2.5rem;
+  color: #2c3e50;
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 80px;
+    height: 4px;
+    background: linear-gradient(90deg, #3f87a6, #ebf8e1);
+    margin: 0.5rem auto 0;
+    border-radius: 2px;
+  }
+}
+
+/* Hero Section */
+.hero-section {
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  padding: 6rem 0;
+  text-align: center;
+  color: #2c3e50;
+
+  .hero-title {
+    font-size: 3rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+  }
+
+  .hero-subtitle {
+    font-size: 1.25rem;
+    max-width: 700px;
+    margin: 0 auto 2rem;
+    color: #5a6a85;
+  }
+}
+
+/* Comparison Section */
+.comparison-section {
+  padding: 4rem 0;
+  background-color: #fff;
+
+  .comparison-table {
+    margin-top: 2rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+}
+
+/* Products Section */
+.products-section {
+  padding: 4rem 0;
+  background-color: #f8fafc;
+
+  .products-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-top: 2rem;
+  }
+
+  .product-card {
+    border-radius: 12px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    border: none;
+
+    &:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    }
+
+    &.popular-card {
+      border-top: 4px solid #3f87a6;
+    }
+  }
+
+  .product-header {
+    padding: 1.5rem 1.5rem 0;
+    text-align: center;
+
+    .product-badge {
+      position: absolute;
+      top: 0;
+      right: 0;
+      background-color: #3f87a6;
+      color: white;
+      padding: 0.25rem 1rem;
+      border-bottom-left-radius: 8px;
+      font-size: 0.75rem;
+      font-weight: bold;
+    }
+
+    .product-name {
+      font-size: 1.5rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+      color: #2c3e50;
+    }
+
+    .product-title {
+      font-size: 1.1rem;
+      color: #3f87a6;
+      margin-bottom: 0.5rem;
+    }
+
+    .product-description {
+      color: #666;
+      margin-bottom: 1rem;
+    }
+  }
+
+  .product-highlight {
+    text-align: center;
+    margin: 1rem 0;
+  }
+
+  .product-features {
+    padding: 0 1.5rem;
+
+    .feature-item {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 1.25rem;
+
+      .feature-icon {
+        font-size: 1.5rem;
+        color: #3f87a6;
+        margin-right: 1rem;
+        flex-shrink: 0;
+      }
+
+      .feature-text {
+        h4 {
+          margin: 0 0 0.25rem;
+          font-size: 1rem;
+          color: #2c3e50;
+        }
+
+        p {
+          margin: 0;
+          color: #666;
+          font-size: 0.9rem;
+        }
+      }
+    }
+  }
+
+  .pricing-plans {
+    margin-top: 2rem;
+    border-top: 1px solid #eee;
+    padding: 1.5rem;
+
+    .pricing-plan {
+      background: #fff;
+      border-radius: 8px;
+      padding: 1.5rem;
+      margin-bottom: 1.5rem;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+      &.popular-plan {
+        border: 2px solid #3f87a6;
+      }
+
+      .plan-header {
+        text-align: center;
+        margin-bottom: 1rem;
+
+        h4 {
+          margin: 0 0 0.5rem;
+          font-size: 1.1rem;
+          color: #2c3e50;
+        }
+
+        .plan-price {
+          .price-amount {
+            font-size: 1.75rem;
+            font-weight: 700;
+            color: #3f87a6;
+          }
+
+          .price-period {
+            font-size: 1rem;
+            color: #666;
+          }
+        }
+      }
+
+      .plan-features {
+        list-style: none;
+        padding: 0;
+        margin: 0 0 1.5rem;
+
+        li {
+          padding: 0.5rem 0;
+          font-size: 0.9rem;
+          color: #555;
+
+          .feature-check {
+            color: #3f87a6;
+            margin-right: 0.5rem;
+          }
+        }
+      }
+
+      .subscribe-btn {
+        width: 100%;
+
+        &.popular-btn {
+          background: linear-gradient(90deg, #3f87a6, #5ab1d8);
+          border: none;
+        }
+      }
+    }
+  }
+}
+
+/* FAQ Section */
+.faq-section {
+  padding: 4rem 0;
+  background-color: #fff;
+
+  .faq-grid {
+    max-width: 800px;
+    margin: 0 auto;
+
+    .faq-item {
+      padding: 1rem 0;
+
+      h4 {
+        margin: 0 0 0.5rem;
+        color: #2c3e50;
+      }
+
+      p {
+        margin: 0;
+        color: #666;
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .hero-section {
+    padding: 4rem 0;
+
+    .hero-title {
+      font-size: 2.2rem;
+    }
+
+    .hero-subtitle {
+      font-size: 1.1rem;
+    }
+  }
+
+  .products-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  .section-title {
+    font-size: 1.75rem;
+  }
+}
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "index"
+}
+</script>
+
+<style scoped>
+
+</style>

Yi.Ai.Vue3/src/routers/index.ts

@@ -49,7 +49,7 @@ router.beforeEach(
     //   // resetRouter();  // 预留
     //   return next();
     // }
-
+    console.log(`to---`,to)
     // 4、判断访问页面是否在路由白名单地址[静态路由]中，如果存在直接放行。
     if (ROUTER_WHITE_LIST.includes(to.path))
       return next();

Yi.Ai.Vue3/src/routers/modules/staticRouter.ts

@@ -1,5 +1,5 @@
-import type { RouteRecordRaw } from 'vue-router';
+import type {RouteRecordRaw} from 'vue-router';
-import { HOME_URL } from '@/config';
+import {HOME_URL} from '@/config';
 
 // LayoutRouter[布局路由]
 export const layoutRouter: RouteRecordRaw[] = [
@@ -31,6 +31,16 @@ export const layoutRouter: RouteRecordRaw[] = [
           isDefaultChat: false,
         },
       },
+      {
+        path: '/products',
+        name: 'products',
+        component: () => import('@/pages/product/index.vue'), path: '/products',
+        meta: {
+          title: '产品页面',
+          keepAlive: true, // 如果需要缓存
+          isDefaultChat: false // 根据实际情况设置
+        }
+      },
     ],
   },
 ];

Yi.Ai.Vue3/types/components.d.ts

@@ -12,6 +12,9 @@ declare module 'vue' {
     DeepThinking: typeof import('./../src/components/DeepThinking/index.vue')['default']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
@@ -22,6 +25,9 @@ declare module 'vue' {
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTag: typeof import('element-plus/es')['ElTag']
     FilesSelect: typeof import('./../src/components/FilesSelect/index.vue')['default']
     IconSelect: typeof import('./../src/components/IconSelect/index.vue')['default']
     LoginDialog: typeof import('./../src/components/LoginDialog/index.vue')['default']