模型服务商页面

src/router/index.ts

@@ -78,7 +78,14 @@ export const constantRoutes: RouteRecordRaw[] = [
         component: () => import('@/views/market/index.vue'),
         name:'Market',
         meta: {title: '市场模型', icon: 'dashboard', affix: true}
+      },
+      {
+        path: '/modleServiceProvide',
+        component: () => import('@/views/modleServiceProvide/index.vue'),
+        name:'Market',
+        meta: {title: '模型服务商管理', icon: 'dashboard', affix: true}
       }
+
     ]
   },
   {

src/views/modleServiceProvide/index.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="wrapper">
+    <el-row>
+      <h3>模型服务商管理</h3>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="4" style="margin-left: 20px">
+        <el-form-item label="服务商名称">
+            <el-input v-model="input" style="width: 240px" placeholder="请输入服务商名称" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="5">
+        <el-form-item label="服务商编码">
+            <el-input v-model="input" style="width: 240px" placeholder="请输入服务商编码" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="4">
+        <el-form-item label="服务商种类">
+          <el-select v-model="modelType" placeholder="全部">
+            <el-option
+              v-for="item in modelTypeOption"
+              :value="item"
+              :label="item"
+              :key="item"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="4">
+        <el-form-item label="状态">
+          <el-select v-model="modelState" placeholder="全部">
+            <el-option
+              v-for="item in modelStateOption"
+              :label="item"
+              :value="item"
+              :key="item"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="1" :offset="4" style="padding-left: 30px">
+        <el-button type="primary">搜索</el-button>
+      </el-col>
+      <el-col :span="1" style="padding-left: 30px">
+        <el-button>重置</el-button>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="2">
+        <el-button type="primary">
+          +新增服务商
+        </el-button>
+      </el-col>
+        <el-col :span="1.5">
+            <el-button><el-icon><Upload /></el-icon>批量导入</el-button>
+        </el-col>
+      <el-col :span="1">
+        <el-button><el-icon><Download /></el-icon>导出</el-button>
+      </el-col>
+
+    </el-row>
+    <!--<div class="content">-->
+    <!--  -->
+    <!--</div>-->
+    <div class="table">
+
+        <el-table :data="models" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" />
+            <el-table-column label="Logo">
+                <template #default="slot">
+                    <el-avatar :src="slot.row.logo" size="small" v-if="slot.row.logo" />
+                    <span v-else>无</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="服务商编码" prop="providerCode" width="120" />
+            <el-table-column label="服务商名称" prop="providerName" width="120" />
+            <el-table-column label="模型种类" prop="modelType" width="420" />
+            <el-table-column label="官方认证" width="120">
+                <template #default="slot">
+                    <el-icon size="15" color="#45D1A6" name="success" v-if="slot.row.officialCertified">
+                        <component is="Check" />
+                    </el-icon>
+                    <el-icon size="15" color="#FF4C4E" name="danger" v-else>
+                        <component is="Close" />
+                    </el-icon>
+                </template>
+            </el-table-column>
+            <el-table-column label="API接入" width="120">
+                <template #default="slot">
+                    <el-icon size="15" color="#45D1A6" v-if="slot.row.apiAccess">
+                        <component is="Check" />
+                    </el-icon>
+                    <el-icon size="15" color="#FF4C4E" name="danger" v-else>
+                        <component is="Close" />
+                    </el-icon>
+                </template>
+            </el-table-column>
+            <el-table-column label="状态" width="120">
+                <template #default="slot">
+                    <el-tag
+                            :type="
+              slot.row.status === 'active'
+                ? 'success'
+                : slot.row.status === 'configuring'
+                ? 'primary'
+                : 'warning'
+            "
+                    >
+                        {{
+                        slot.row.status === 'active'
+                          ? '启用'
+                          : slot.row.status === 'configuring'
+                            ? '配置中'
+                            : '待配置'
+                        }}
+                    </el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column label="创建时间" prop="createTime" width="240" />
+            <el-table-column label="操作" width="240">
+              <template #default="slot">
+                <!-- 查看 -->
+                <el-icon size="15" color="#15A9FF" style="margin-right: 10px;"><View /></el-icon>
+
+                <!-- 编辑 -->
+                <el-icon size="15" color="#15A9FF" style="margin-right: 10px;"><Edit /></el-icon>
+
+                <!-- 启用/禁用图标 -->
+                <el-icon size="15" style="margin-right: 10px;" :color="slot.row.status === 'active' ? '#13ce66' : '#ff4949'">
+                  <SwitchButton />
+                </el-icon>
+
+                <!-- 列表 -->
+                <el-icon size="15" color="#15A9FF" style="margin-right: 10px;"><More /></el-icon>
+
+
+              </template>
+            </el-table-column>
+
+        </el-table>
+      <div class="batch-actions">
+        <span>已选择 {{ selectedIds.length }} 项</span>
+        <el-button type="primary" size="small" :disabled="selected.length === 0" @click="batchEnable">批量启用</el-button>
+        <el-button type="danger" size="small" :disabled="selected.length === 0" @click="batchDisable">批量禁用</el-button>
+        <el-button type="warning" size="small" :disabled="selected.length === 0" @click="batchDelete">批量删除</el-button>
+      </div>
+
+      <!-- 右下角的分页 -->
+      <div class="pagination">
+        <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="total"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            @current-change="handlePageChange"
+        />
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import {Download, More} from "@element-plus/icons-vue";
+import { ref } from 'vue'
+import { View, Edit, List, Check, Close } from '@element-plus/icons-vue'
+const serviceOption = ref(["OpenAI"])
+const modelNameOption = ref(["服务商1","服务商2"])
+const modelTypeOption = ref(["类型1","类型2"])
+const modelStateOption = ref(["全部","开启","关闭"])
+// const models = ref([])
+const total = ref(50) // 总条目数
+const currentPage = ref(1) // 当前页码
+const pageSize = ref(10) // 每页显示条目个数
+const selected = ref<number[]>([]) // 存储选中的行ID
+const modelName = ref(null)
+const modelType = ref(null)
+const service = ref(null)
+const modelState = ref(null)
+// 定义表格数据的类型
+interface ProviderModel {
+  id: number
+  logo?: string
+  providerCode: string
+  providerName: string
+  modelType: string
+  officialCertified: boolean
+  apiAccess: boolean
+  status: 'active' | 'configuring' | 'pending' // 状态枚举
+  createTime: string
+}
+
+// 表格数据
+const models = ref<ProviderModel[]>([
+  {
+    id: 1,
+    logo: 'https://via.placeholder.com/40',
+    providerCode: 'PROV001',
+    providerName: '阿里云',
+    modelType: '大语言模型',
+    officialCertified: true,
+    apiAccess: true,
+    status: 'active',
+    createTime: '2025-01-01 10:30',
+  },
+  {
+    id: 2,
+    logo: 'https://via.placeholder.com/40',
+    providerCode: 'PROV002',
+    providerName: '腾讯云',
+    modelType: '图像识别',
+    officialCertified: false,
+    apiAccess: true,
+    status: 'configuring',
+    createTime: '2025-02-15 10:30',
+  },
+  {
+    id: 3,
+    logo: 'https://via.placeholder.com/40',
+    providerCode: 'PROV003',
+    providerName: '百度云',
+    modelType: '语音识别',
+    officialCertified: false,
+    apiAccess: false,
+    status: 'pending',
+    createTime: '2025-03-10 10:30',
+  },
+])
+// 批量启用
+const batchEnable = () => {
+  // 实现批量启用逻辑
+}
+
+// 批量禁用
+const batchDisable = () => {
+  // 实现批量禁用逻辑
+}
+
+// 批量删除
+const batchDelete = () => {
+  // 实现批量删除逻辑
+}
+
+// 分页处理
+const handlePageChange = (newPage: number) => {
+  currentPage.value = newPage
+  // 根据新页面加载数据
+}
+
+const selectedIds = ref<number[]>([])
+
+const handleSelectionChange = (selection: ProviderModel[]) => {
+  selectedIds.value = selection.map(item => item.id)
+}
+</script>
+
+<style scoped lang="scss">
+.wrapper{
+  margin:10px auto;
+  width:90%;
+}
+.model-msg{
+  span{
+    color:#666666;
+  }
+}
+.section-type{
+  span{
+    padding-left: 5px;
+  }
+}
+.batch-actions {
+  padding: 10px;
+  border-top: 1px solid #EBEEF5;
+  display: flex;
+  align-items: center;
+  span {
+    margin-right: 10px;
+  }
+}
+.pagination {
+  position:absolute;
+  right: 0;
+  padding: 10px;
+  border-top: 1px solid #EBEEF5;
+}
+.msg-space{
+  margin-top:5px;
+}
+.content{
+  padding-left: 10px;
+}
+.table{
+  margin-top: 10px;
+}
+
+</style>