fix: 产品相关页面样式优化

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

@@ -141,6 +141,7 @@ onMounted(() => {
     </div>
 
     <el-table
+
       v-loading="loading"
       :data="filteredData"
       style="width: 100%"
@@ -152,14 +153,15 @@ onMounted(() => {
       <el-table-column
         prop="content"
         label="套餐类型"
-        width="120"
+        width="150"
         sortable="custom"
+        show-overflow-tooltip
       />
       <el-table-column
+        show-overflow-tooltip
         prop="rechargeAmount"
         label="金额(元)"
-        width="120"
-        align="right"
+        width="110"
         sortable="custom"
       >
         <template #default="{ row }">
@@ -169,16 +171,18 @@ onMounted(() => {
       <el-table-column
         prop="creationTime"
         label="充值时间"
-        width="180"
+        width="160"
         sortable="custom"
+        show-overflow-tooltip
       />
       <el-table-column
         prop="expireDateTime"
         label="到期时间"
-        width="180"
+        width="160"
         sortable="custom"
+        show-overflow-tooltip
       />
-      <el-table-column prop="contactInfo" width="100" label="联系方式">
+      <el-table-column show-overflow-tooltip prop="contactInfo" width="100" label="联系方式">
         <template #default="{ row }">
           <el-tooltip v-if="row.contactInfo && row.contactInfo.length > 8" :content="row.contactInfo" placement="top">
             <span class="ellipsis-text">{{ row.contactInfo }}</span>
@@ -186,7 +190,7 @@ onMounted(() => {
           <span v-else>{{ row.contactInfo || '-' }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="remark" label="备注">
+      <el-table-column show-overflow-tooltip prop="remark" label="备注" width="160">
         <template #default="{ row }">
           <el-tooltip v-if="row.remark && row.remark.length > 10" :content="row.remark" placement="top">
             <span class="ellipsis-text">{{ row.remark }}</span>

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

@@ -1,60 +1,29 @@
+<SupportModelList :layout="'grid'" />
+
 <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;
-// }
+interface Props {
+  layout?: 'list' | 'grid'; // 布局方式：list(单列)或grid(网格)
+  columns?: number; // 网格布局时的列数，默认为2
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: 'list',
+  columns: 2,
+});
 
 // 从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);
+
+// 计算网格布局的列数
+const gridTemplateColumns = computed(() => {
+  if (props.layout === 'list')
+    return '1fr';
+  return `repeat(${props.columns}, minmax(300px, 1fr))`;
+});
 </script>
 
 <template>
@@ -62,7 +31,10 @@ console.log('modelList---', modelList);
     <div class="model-header">
       支持的模型
     </div>
-    <div class="model-grid">
+    <div
+      class="model-grid"
+      :style="{ 'grid-template-columns': gridTemplateColumns }"
+    >
       <div v-for="model in modelList" :key="model.id" class="model-card">
         <div class="model-card-header">
           <h3 class="model-name">
@@ -70,7 +42,12 @@ console.log('modelList---', modelList);
           </h3>
           <div class="model-price">
             <template v-if="model.modelPrice === 0">
-              <span class="free-tag">{{ model.modelId === 'DeepSeek-R1-0528' ? '免费' : 'Vip专享' }}</span>
+              <span
+                class="free-tag"
+                :class="model.modelId === 'DeepSeek-R1-0528' ? 'free' : 'vip'"
+              >
+                {{ model.modelId === 'DeepSeek-R1-0528' ? '免费' : 'Vip专享' }}
+              </span>
             </template>
             <template v-else>
               <span class="price">{{ model.modelPrice }}元/次</span>
@@ -97,9 +74,7 @@ console.log('modelList---', modelList);
 
 <style scoped>
 .model-container {
-  //padding: 10px;
-  max-width: 300px;
-  margin: 10px 0 ;
+  margin: 10px 0;
 }
 
 .model-header {
@@ -111,7 +86,6 @@ console.log('modelList---', modelList);
 
 .model-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
   gap: 20px;
 }
 
@@ -148,16 +122,23 @@ console.log('modelList---', modelList);
 .model-price {
   text-align: right;
 }
-
 .free-tag {
-  background: #f0f9eb;
-  color: #67c23a;
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
 }
 
+.free-tag.free {
+  background: #f0f9eb;
+  color: #67c23a;
+}
+
+.free-tag.vip {
+  background: #fff7e6;
+  color: #d48806;
+}
+
 .price {
   display: block;
   font-size: 13px;
@@ -192,7 +173,7 @@ console.log('modelList---', modelList);
 
 @media (max-width: 768px) {
   .model-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr !important;
   }
 
   .model-card {