feat: 增加支付宝在线支付、套餐订购弹窗、会员权益、支持模型展示等

Yi.Ai.Vue3/src/components/userPersonalCenter/components/SupportModelList.vue

@@ -0,0 +1,202 @@
+<script lang="ts" setup>
+import { useModelStore } from '@/stores/modules/model';
+
+// interface Model {
+//   id: string;
+//   category: string;
+//   modelId: string;
+//   modelName: string;
+//   modelDescribe: string;
+//   modelPrice: number;
+//   modelType: string;
+//   modelShow: string;
+//   systemPrompt: string | null;
+//   apiHost: string | null;
+//   apiKey: string | null;
+//   remark: string;
+// }
+
+// 从store获取模型列表
+/*
+const modelList = ref<Model[]>([
+  {
+    id: '077be103-1456-a4bb-409c-3a15f04e1ad9',
+    category: 'chat',
+    modelId: 'DeepSeek-R1-0528',
+    modelName: 'DeepSeek-R1',
+    modelDescribe: '国产开源，深度思索模式，不过幻读问题比较大，同时具备思考响应链，在开源模型中永远的神!',
+    modelPrice: 0,
+    modelType: '1',
+    modelShow: '0',
+    systemPrompt: null,
+    apiHost: null,
+    apiKey: null,
+    remark: '国产开源，深度思索模式，不过幻读问题比较大，同时具备思考响应链，在开源模型中永远的神!',
+  },
+  {
+    id: '077be103-1456-a4bb-409c-3a15f04e1ab7',
+    category: 'chat',
+    modelId: 'DeepSeek-V3-0324',
+    modelName: 'DeepSeek-V3',
+    modelDescribe: '国产开源，简单聊天模式，对于中文文章语义体验较好，但响应速度一般',
+    modelPrice: 0,
+    modelType: '1',
+    modelShow: '0',
+    systemPrompt: null,
+    apiHost: null,
+    apiKey: null,
+    remark: '国产开源，简单聊天模式，对于中文文章语义体验较好，但响应速度一般',
+  },
+]);
+*/
+
+// 实际使用时，您可以从store中获取模型列表
+// import { useModelStore } from '@/stores/model';
+const modelStore = useModelStore();
+const modelList = computed(() => modelStore.modelList);
+console.log('modelList---', modelList);
+</script>
+
+<template>
+  <div class="model-container">
+    <div class="model-header">
+      支持的模型
+    </div>
+    <div class="model-grid">
+      <div v-for="model in modelList" :key="model.id" class="model-card">
+        <div class="model-card-header">
+          <h3 class="model-name">
+            {{ model.modelName }}
+          </h3>
+          <div class="model-price">
+            <template v-if="model.modelPrice === 0">
+              <span class="free-tag">{{ model.modelId === 'DeepSeek-R1-0528' ? '免费' : 'Vip专享' }}</span>
+            </template>
+            <template v-else>
+              <span class="price">{{ model.modelPrice }}元/次</span>
+              <span class="per-token">{{ model.modelPrice * 100 }}元/百万Token</span>
+            </template>
+          </div>
+        </div>
+        <div class="model-description">
+          {{ model.modelDescribe }}
+        </div>
+        <div class="model-footer">
+          <span class="model-id">{{ model.modelId }}</span>
+          <!--          <el-tag v-if="model.category === 'chat'" size="small" type="success"> -->
+          <!--            对话 -->
+          <!--          </el-tag> -->
+          <!--          <el-tag v-else size="small" type="info"> -->
+          <!--            其他 -->
+          <!--          </el-tag> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.model-container {
+  //padding: 10px;
+  max-width: 300px;
+  margin: 10px 0 ;
+}
+
+.model-header {
+  font-size: 14px;
+  margin-bottom: 24px;
+  color: #333;
+  font-weight: 600;
+}
+
+.model-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 20px;
+}
+
+.model-card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  padding: 10px;
+  transition: all 0.3s ease;
+  border: 1px solid #ebeef5;
+}
+
+.model-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.1);
+}
+
+.model-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.model-name {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0;
+  color: #333;
+}
+
+.model-price {
+  text-align: right;
+}
+
+.free-tag {
+  background: #f0f9eb;
+  color: #67c23a;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.price {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: #f56c6c;
+}
+
+.per-token {
+  font-size: 12px;
+  color: #909399;
+}
+
+.model-description {
+  color: #606266;
+  line-height: 1.6;
+  margin-bottom: 16px;
+  min-height: 60px;
+}
+
+.model-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 12px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.model-id {
+  font-size: 12px;
+  color: #909399;
+}
+
+@media (max-width: 768px) {
+  .model-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .model-card {
+    padding: 16px;
+  }
+}
+</style>