good version for 算法注册

frontend/src/views/AlgorithmsView.vue

@@ -1,23 +1,34 @@
 <template>
   <div class="algorithms-container">
     <!-- 页面标题 -->
-    <h1>算法列表</h1>
+    <h1>算法能力展示</h1>
+    <p class="subtitle">探索我们强大的AI算法能力，支持多种应用场景</p>
     
     <!-- 筛选和搜索 -->
     <div class="filter-section">
       <el-form :inline="true" class="filter-form">
-        <el-form-item label="算法类型">
-          <el-select v-model="selectedType" placeholder="选择算法类型" @change="handleTypeChange">
+        <el-form-item label="技术分类">
+          <el-select v-model="selectedTechCategory" placeholder="选择技术分类" @change="handleTypeChange">
             <el-option label="全部" value="" />
-            <el-option label="边缘计算" value="edge_computing" />
-            <el-option label="医疗算法" value="medical" />
             <el-option label="计算机视觉" value="computer_vision" />
+            <el-option label="视频处理" value="video_processing" />
             <el-option label="自然语言处理" value="nlp" />
             <el-option label="机器学习" value="ml" />
-            <el-option label="强化学习" value="reinforcement_learning" />
+            <el-option label="边缘计算" value="edge_computing" />
+            <el-option label="医疗算法" value="medical" />
             <el-option label="自动驾驶算法" value="autonomous_driving" />
           </el-select>
         </el-form-item>
+        <el-form-item label="输出类型">
+          <el-select v-model="selectedOutputType" placeholder="选择输出类型" @change="handleTypeChange">
+            <el-option label="全部" value="" />
+            <el-option label="图片" value="image" />
+            <el-option label="视频" value="video" />
+            <el-option label="文本" value="text" />
+            <el-option label="JSON" value="json" />
+            <el-option label="音频" value="audio" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="搜索">
           <el-input
             v-model="searchKeyword"
@@ -46,7 +57,10 @@
         <template #header>
           <div class="card-header">
             <h2>{{ algorithm.name }}</h2>
-            <span class="algorithm-type">{{ getAlgorithmTypeName(algorithm.type) }}</span>
+            <div class="tags">
+              <el-tag type="primary" size="small">{{ getTechCategoryName(algorithm.tech_category) }}</el-tag>
+              <el-tag type="success" size="small">{{ getOutputTypeName(algorithm.output_type) }}</el-tag>
+            </div>
           </div>
         </template>
         
@@ -69,8 +83,9 @@
               <el-button type="primary" size="small">查看详情</el-button>
             </router-link>
             <router-link :to="`/algorithm/${algorithm.id}/call`" class="call-btn">
-              <el-button type="success" size="small">立即调用</el-button>
+              <el-button type="success" size="small">在线演示</el-button>
             </router-link>
+            <el-button type="info" size="small" @click="showApiDocs(algorithm)">API文档</el-button>
           </div>
         </div>
       </el-card>
@@ -87,46 +102,115 @@
         @current-change="handlePageChange"
       />
     </div>
+    
+    <!-- API文档对话框 -->
+    <el-dialog
+      v-model="showApiDialog"
+      title="API文档"
+      width="60%"
+    >
+      <div v-if="selectedAlgorithm" class="api-docs">
+        <h3>{{ selectedAlgorithm.name }}</h3>
+        <p>{{ selectedAlgorithm.description }}</p>
+        
+        <el-divider />
+        
+        <h4>API端点</h4>
+        <el-descriptions :column="1" border>
+          <el-descriptions-item label="基础URL">
+            http://0.0.0.0:8001/api/v1
+          </el-descriptions-item>
+          <el-descriptions-item label="算法ID">
+            {{ selectedAlgorithm.id }}
+          </el-descriptions-item>
+          <el-descriptions-item label="技术分类">
+            {{ getTechCategoryName(selectedAlgorithm.tech_category) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="输出类型">
+            {{ getOutputTypeName(selectedAlgorithm.output_type) }}
+          </el-descriptions-item>
+        </el-descriptions>
+        
+        <el-divider />
+        
+        <h4>调用示例</h4>
+        <pre class="code-example">
+POST /api/v1/algorithms/{{ selectedAlgorithm.id }}/call
+Content-Type: application/json
+
+{
+  "input_data": {
+    "data": "your input data"
+  },
+  "params": {}
+}
+        </pre>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useAlgorithmStore } from '../stores/algorithm'
-import { Search, Time, Folder, Document } from '@element-plus/icons-vue'
+import { Search, Timer, Folder, Document } from '@element-plus/icons-vue'
 
 // 获取算法存储
 const algorithmStore = useAlgorithmStore()
 
 // 筛选和分页
-const selectedType = ref('')
+const selectedTechCategory = ref('')
+const selectedOutputType = ref('')
 const searchKeyword = ref('')
 const currentPage = ref(1)
 const pageSize = ref(10)
 
-// 算法类型映射
-const algorithmTypes = {
+// API文档对话框
+const showApiDialog = ref(false)
+const selectedAlgorithm = ref<any>(null)
+
+// 技术分类映射
+const techCategories = {
   computer_vision: '计算机视觉',
+  video_processing: '视频处理',
   nlp: '自然语言处理',
   ml: '机器学习',
-  reinforcement_learning: '强化学习',
   edge_computing: '边缘计算',
   medical: '医疗算法',
   autonomous_driving: '自动驾驶算法'
 }
 
-// 获取算法类型的中文名称
-const getAlgorithmTypeName = (type: string) => {
-  return algorithmTypes[type as keyof typeof algorithmTypes] || type
+// 输出类型映射
+const outputTypes = {
+  image: '图片',
+  video: '视频',
+  text: '文本',
+  json: 'JSON',
+  audio: '音频'
+}
+
+// 获取技术分类的中文名称
+const getTechCategoryName = (type: string) => {
+  return techCategories[type as keyof typeof techCategories] || type
+}
+
+// 获取输出类型的中文名称
+const getOutputTypeName = (type: string) => {
+  return outputTypes[type as keyof typeof outputTypes] || type
 }
 
 // 筛选算法
 const filteredAlgorithms = computed(() => {
   let algorithms = algorithmStore.algorithms
   
-  // 按类型筛选
-  if (selectedType.value) {
-    algorithms = algorithms.filter(algorithm => algorithm.type === selectedType.value)
+  // 按技术分类筛选
+  if (selectedTechCategory.value) {
+    algorithms = algorithms.filter(algorithm => algorithm.tech_category === selectedTechCategory.value)
+  }
+  
+  // 按输出类型筛选
+  if (selectedOutputType.value) {
+    algorithms = algorithms.filter(algorithm => algorithm.output_type === selectedOutputType.value)
   }
   
   // 按关键词搜索
@@ -159,6 +243,12 @@ const handlePageChange = (page: number) => {
   currentPage.value = page
 }
 
+// 显示API文档
+const showApiDocs = (algorithm: any) => {
+  selectedAlgorithm.value = algorithm
+  showApiDialog.value = true
+}
+
 // 格式化日期
 const formatDate = (dateString: string) => {
   const date = new Date(dateString)
@@ -175,12 +265,21 @@ onMounted(async () => {
 .algorithms-container {
   max-width: 1200px;
   margin: 0 auto;
+  padding: 20px;
 }
 
 .algorithms-container h1 {
-  font-size: 28px;
-  margin-bottom: 30px;
+  font-size: 32px;
+  margin-bottom: 10px;
   color: #333;
+  text-align: center;
+}
+
+.subtitle {
+  font-size: 16px;
+  color: #666;
+  text-align: center;
+  margin-bottom: 30px;
 }
 
 .filter-section {
@@ -195,6 +294,20 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   gap: 20px;
+  flex-wrap: wrap;
+}
+
+.filter-form .el-form-item {
+  margin-bottom: 0;
+  min-width: 200px;
+}
+
+.filter-form .el-select {
+  width: 200px;
+}
+
+.filter-form .el-input {
+  width: 300px;
 }
 
 .algorithms-list {
@@ -215,31 +328,39 @@ onMounted(async () => {
 .algorithm-card {
   margin-bottom: 20px;
   transition: all 0.3s ease;
+  border: 1px solid #e4e7ed;
 }
 
 .algorithm-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-4px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
 }
 
 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
 }
 
 .card-header h2 {
-  font-size: 20px;
+  font-size: 22px;
   margin: 0;
   color: #333;
 }
 
-.algorithm-type {
+.tags {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.tags .el-tag {
   padding: 4px 12px;
-  background-color: #ecf5ff;
-  color: #409EFF;
-  border-radius: 16px;
-  font-size: 12px;
+  font-size: 13px;
+  white-space: nowrap;
 }
 
 .card-body {
@@ -248,8 +369,9 @@ onMounted(async () => {
 
 .algorithm-description {
   color: #606266;
-  line-height: 1.6;
+  line-height: 1.8;
   margin-bottom: 20px;
+  font-size: 15px;
 }
 
 .algorithm-meta {
@@ -258,6 +380,7 @@ onMounted(async () => {
   margin-bottom: 20px;
   font-size: 14px;
   color: #909399;
+  flex-wrap: wrap;
 }
 
 .meta-item {
@@ -270,6 +393,11 @@ onMounted(async () => {
   display: flex;
   gap: 10px;
   justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+.card-actions a {
+  text-decoration: none;
 }
 
 .pagination-section {
@@ -278,6 +406,30 @@ onMounted(async () => {
   margin-top: 30px;
 }
 
+.api-docs h3 {
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.api-docs h4 {
+  color: #666;
+  margin-bottom: 15px;
+}
+
+.api-docs p {
+  color: #909399;
+  line-height: 1.6;
+}
+
+.code-example {
+  background-color: #f5f7fa;
+  padding: 15px;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #303133;
+  overflow-x: auto;
+}
+
 @media (max-width: 768px) {
   .filter-form {
     flex-direction: column;
@@ -293,8 +445,14 @@ onMounted(async () => {
     flex-direction: column;
   }
   
-  .card-actions a {
+  .card-actions a,
+  .card-actions button {
     width: 100%;
   }
+  
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }
 </style>