模型列表进行中

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
+    "@lobehub/icons": "^5.10.0",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "10.6.1",
     "axios": "0.27.2",

src/api/aimodel.js

+// AI 模型相关接口
+import request from '@/utils/request'
+
+// 获取模型列表（含定价，已按当前用户权限计算好价格）
+export function getModelsWithPricing() {
+  return request({
+    url: '/app/ai/models-with-pricing',
+    method: 'get'
+  })
+}

src/api/computingResource.js

@@ -57,6 +57,14 @@ export function createPay(query){
   })
 }
 
+export function modelsWithPricing(query) {
+  return request({
+    url: '/app/ai/models-with-pricing',
+    method: 'get',
+    data: query
+  })
+}
+
 // export async function getOrder(id, sync){
 //   return await request({
 //     url: '/pay/order/get',

src/views/computingResource/resourceList.vue

@@ -284,7 +284,8 @@ import {
   categoryMenuNew,
   createOrderSubmit,
   createOrderSubmitWpgj,
-  createPay
+  createPay,
+  modelsWithPricing
 } from '@/api/computingResource.js'
 import {useRoute, useRouter} from 'vue-router'
 import QRCode from 'qrcode'
@@ -621,6 +622,12 @@ const clearQueryInterval = () => {
 const clearProtocol = () => {
   protocol.value = true
 }
+
+onMounted(() => { 
+  modelsWithPricing().then(res => {
+    console.log('res', res)
+  })
+})
 </script>
 
 <style scoped lang="scss">

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

+<template>
+  <div class="model-card">
+    <!-- 右上角：按量收费 -->
+    <div class="tag-top">按量收费</div>
+
+    <!-- 头部：图标 + 模型名 -->
+    <div class="card-header">
+      <div class="model-icon">
+        <span>{{ iconLetter }}</span>
+      </div>
+      <div class="model-name" :title="model.modelName">{{ model.modelName }}</div>
+    </div>
+
+    <!-- 描述 -->
+    <div class="card-description">
+      {{ model.description || '暂无描述' }}
+    </div>
+
+    <!-- 底部：收费价格 tag + 输入/输出价格 -->
+    <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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  model: {
+    type: Object,
+    required: true
+  }
+})
+
+const iconLetter = computed(() => {
+  const name = props.model?.modelName || 'AI'
+  return name.charAt(0).toUpperCase()
+})
+
+function formatPrice(price) {
+  if (price === null || price === undefined) return '-'
+  const num = Number(price)
+  if (Number.isNaN(num)) return '-'
+  return num.toFixed(4).replace(/\.?0+$/, '')
+}
+</script>
+
+<style scoped lang="scss">
+.model-card {
+  position: relative;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 12px;
+  padding: 20px 24px 16px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  min-height: 180px;
+
+  &:hover {
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
+    transform: translateY(-2px);
+  }
+}
+
+/* 右上角：按量收费 */
+.tag-top {
+  position: absolute;
+  top: 0;
+  right: 24px;
+  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 5px 14px;
+  border-radius: 0 0 6px 6px;
+  line-height: 1.4;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-top: 6px;
+  margin-bottom: 14px;
+}
+
+.model-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #4e6ef2, #6b8aff);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  span {
+    color: #fff;
+    font-size: 20px;
+    font-weight: 600;
+  }
+}
+
+.model-name {
+  flex: 1;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a1a1a;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-description {
+  font-size: 13px;
+  color: #666;
+  line-height: 1.65;
+  margin-bottom: 16px;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  min-height: 60px;
+  word-break: break-word;
+}
+
+.card-footer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.tag-price {
+  background: #f0f5ff;
+  color: #4e6ef2;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 4px 12px;
+  border-radius: 6px;
+  line-height: 1.5;
+}
+
+.price-text {
+  font-size: 13px;
+  color: #666;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  b {
+    color: #ee5a52;
+    font-weight: 600;
+    margin: 0 2px;
+  }
+
+  .divider {
+    color: #ccc;
+    margin: 0 6px;
+  }
+
+  .unit {
+    color: #999;
+    font-size: 12px;
+  }
+}
+</style>