Merge remote-tracking branch 'origin/master'

src/views/market/addModel.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+const activeName = ref("基本信息")
+</script>
+
+<template>
+  <el-tabs v-model="activeName">
+    <el-tab-pane label="基本信息" name="基本信息">
+      <el-form class="form-label">
+        <el-form-item label="服务商">
+          <el-select>
+            <el-option/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="模型名称">
+          <el-select placeholder="请输入模型名称,如：GPT-4">
+            <el-option/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="模型类型">
+          <el-select >
+            <el-option/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="模型版本">
+          <el-select placeholder="请输入模型版本，如：gpt-4-1106-preview">
+            <el-option/>
+          </el-select>
+          <span>官方API调用时使用的模型标识符</span>
+        </el-form-item>
+        <el-form-item label="优先级">
+          <el-select placeholder="请输入模型版本，如：gpt-4-1106-preview">
+            <el-option/>
+          </el-select>
+          <span>数值越大优先级越高</span>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-switch active-text="启用" size="large" />
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input type="textarea" placeholder="请输入描述状态"></el-input>
+        </el-form-item>
+        <div class="form-btn">
+          <el-form-item>
+            <el-button>取消</el-button>
+            <el-button type="primary">确定</el-button>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-tab-pane>
+    <el-tab-pane label="API配置" name="API配置">
+      <el-form class="form-label">
+        <el-form-item label="API基础地址">
+          <el-input/>
+          <span>默认继承服务配置，可单独设置</span>
+        </el-form-item>
+        <el-form-item label="API密钥">
+          <el-input type="password"/>
+          <span>默认继承服务商配置，可单独设置</span>
+        </el-form-item>
+        <el-form-item label="请求超过时间（秒）">
+          <el-input/>
+        </el-form-item>
+        <el-form-item label="重试次数">
+          <el-input/>
+        </el-form-item>
+        <el-form-item label="请求方法">
+          <el-select>
+            <el-option/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="请求头">
+          <el-input type="textarea"/>
+          <span>JSON格式,支持变量替换</span>
+        </el-form-item>
+        <div class="form-btn">
+          <el-form-item>
+            <el-button>取消</el-button>
+            <el-button type="primary">确定</el-button>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-tab-pane>
+    <el-tab-pane label="高级配置" name="高级配置">
+      <el-form class="form-label">
+        <el-form-item label="请求模板">
+          <el-input type="textarea"/>
+          <span>JSON格式，支持参数替换</span>
+        </el-form-item>
+        <el-form-item label="响应解析器">
+          <el-select>
+            <el-option/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="自定义解析器代码">
+          <el-input type="textarea"/>
+          <span>选择自定义解析器时可编辑</span>
+        </el-form-item>
+        <el-form-item label="Token计算器">
+          <el-select>
+            <el-option/>
+          </el-select>
+        </el-form-item>
+        <div class="form-btn">
+          <el-form-item>
+            <el-button>取消</el-button>
+            <el-button type="primary">确定</el-button>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<style scoped lang="scss">
+.form-label{
+  :deep(.el-form-item){
+    display: block;
+  }
+  // 注释
+  span{
+    color: #abadb4;
+    font-size: 12px;
+  }
+}
+.form-btn{
+  display: flex;
+  justify-content: flex-end;
+}
+
+</style>

src/views/market/index.vue

@@ -111,12 +111,19 @@
           <el-row>
             <span>状态</span>
           </el-row>
+          <el-row>
+            <div :class="['status', statusClass]">
+              启用
+            </div>
+          </el-row>
         </el-col>
       </el-row>
     </div>
     <div class="table">
       <el-table
         :data="models"
+        style="width: 100%"
+        min-height="40vh"
       >
         <el-table-column type="selection"/>
         <el-table-column label="模型名称"></el-table-column>
@@ -128,33 +135,77 @@
         <el-table-column label="创建时间"></el-table-column>
         <el-table-column label="操作">
           <template #default="slot">
-            <el-icon color="#1890ff"><View /></el-icon>
-            <el-icon color="#1890ff"><Edit /></el-icon>
-            <el-icon color="#1890ff"><List /></el-icon>
+            <el-icon color="#1890ff" size="25px" class="icon-gap"><View /></el-icon>
+            <el-icon color="#1890ff" size="25px" class="icon-gap" @click="edit(slot.$index,slot.row)"><Edit /></el-icon>
+            <el-icon color="#1890ff" size="25px" class="icon-gap"><List /></el-icon>
+            <el-icon color="#ffa8e3" size="25px" class="icon-gap"><SwitchButton /></el-icon>
           </template>
         </el-table-column>
       </el-table>
     </div>
-
+    <el-row>
+      <el-col :span="2">
+        <span>已选择0项</span>
+      </el-col>
+      <el-col :span="2">
+        <el-button>批量启用</el-button>
+      </el-col>
+      <el-col :span="2">
+        <el-button>批量禁用</el-button>
+      </el-col>
+      <el-col :span="2">
+        <el-button type="danger">批量删除</el-button>
+      </el-col>
+    </el-row>
+    <el-dialog v-model="dialogVisable">
+      <add-model></add-model>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
+import addModel from './addModel.vue'
+
 
 const serviceOption = ref(["OpenAI"])
 const modelNameOption = ref(["模型1","模型2"])
 const modelTypeOption = ref(["类型1","类型2"])
 const modelStateOption = ref(["全部","开启","关闭"])
-const models = ref([])
+const models = ref([{}])
 
 const modelName = ref(null)
 const modelType = ref(null)
 const service = ref(null)
 const modelState = ref(null)
+const dialogVisable = ref(false)
+//test enabled
+const statusClass = ref('enabled')
 
+const edit = ((index,row)=>{
+  dialogVisable.value=true
+})
 </script>
 
 <style scoped lang="scss">
+.status {
+  border-radius: 4px;
+  font-size: 13px;
+  margin-top: 3px;
+  padding: 2px;
+}
+
+.status.enabled {
+  border:1px solid #52c41a;
+  color: #b7eb8f;
+}
+
+
+.status.testing {
+  border:1px solid #ffe58f; /* 黄色 */
+  color: #fab487;
+}
+
+
 .wrapper{
   margin:10px auto;
   width:90%;
@@ -177,5 +228,9 @@ const modelState = ref(null)
 }
 .table{
   margin-top: 10px;
+  width:100%;
+}
+.icon-gap{
+  padding-left: 5px;
 }
 </style>