模型列表

src/layout/user-layout.vue

@@ -24,6 +24,7 @@
                     :index="'/computingResource/resourceList?type='+item.id">
                   {{ item.name }}
                 </el-menu-item>
+                <el-menu-item :index="'/computingResource/resourceList?type='+999">AI token</el-menu-item>
               </el-sub-menu>
 
               <el-menu-item index="/industryApplications/index">解决方案</el-menu-item>

src/views/computingResource/resourceList.vue

@@ -151,6 +151,12 @@
           </div>
 
         </el-tab-pane>
+
+        <el-tab-pane label="AI token" :name="999">
+          <div class="model-list">
+            <model-card v-for="m in models" :key="m.modelName" :model="m" />
+          </div>
+        </el-tab-pane>
       </el-tabs>
     </div>
 
@@ -293,6 +299,7 @@ import request from '@/utils/request'
 import {PayOrderStatusEnum} from "@/utils/constants.js";
 import PDFObject from 'pdfobject';
 import axios from "axios";
+import ModelCard from '@/views/console/components/model-card.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -377,6 +384,9 @@ function tabChange() {
 }
 
 function getList() {
+  if(tabActive.value === 999) {
+    return
+  }
   getRListByCategory({categoryId: tabActive.value, pageNo: pageNo.value, pageSize: pageSize.value}).then(res => {
     total.value = res.data.total
     tableData.value = res.data.list
@@ -623,10 +633,16 @@ const clearProtocol = () => {
   protocol.value = true
 }
 
-onMounted(() => { 
+const models = ref([])
+function getModelList() {
   modelsWithPricing().then(res => {
     console.log('res', res)
+    models.value = res.data || []
   })
+}
+
+onMounted(() => { 
+  getModelList()
 })
 </script>
 
@@ -929,4 +945,10 @@ onMounted(() => {
   //overflow: hidden;
   overflow-y: auto;
 }
+
+.model-list { 
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+  gap: 16px; 
+}
 </style>

src/views/console/components/model-card.vue

@@ -20,10 +20,11 @@
     <div class="card-footer">
       <div class="tag-price">收费价格</div>
       <div class="price-text">
-        <span>输入 <b>¥{{ formatPrice(model.inputPrice) }}</b></span>
-        <span class="divider">/</span>
-        <span>输出 <b>¥{{ formatPrice(model.outputPrice) }}</b></span>
-        <span class="unit"> / 1k tokens</span>
+        <span>输入:<b>¥{{ formatPrice(model.inputPrice) }}</b></span>
+        <span class="unit"> / 1M tokens</span>
+        <span class="divider"></span>
+        <span>输出:<b>¥{{ formatPrice(model.outputPrice) }}</b></span>
+        <span class="unit"> / 1M tokens</span>
       </div>
     </div>
   </div>
@@ -73,13 +74,13 @@ function formatPrice(price) {
 .tag-top {
   position: absolute;
   top: 0;
-  right: 24px;
+  right: 0px;
   background: linear-gradient(135deg, #ff6b6b, #ee5a52);
   color: #fff;
   font-size: 12px;
   font-weight: 500;
   padding: 5px 14px;
-  border-radius: 0 0 6px 6px;
+  border-radius: 0 6px 0px 6px;
   line-height: 1.4;
 }
 
@@ -153,9 +154,15 @@ function formatPrice(price) {
   font-size: 13px;
   color: #666;
   display: flex;
+  height: 26px;
   align-items: center;
-  flex-wrap: wrap;
-
+  // flex-wrap: wrap;
+  & span {
+    display: block;
+    height: 26px;
+    display: flex;
+    align-items: center;
+  }
   b {
     color: #ee5a52;
     font-weight: 600;
@@ -163,8 +170,7 @@ function formatPrice(price) {
   }
 
   .divider {
-    color: #ccc;
-    margin: 0 6px;
+    margin: 0 8px;
   }
 
   .unit {