From f16be7f49e34944b66904f7f153075ff4e51d95e Mon Sep 17 00:00:00 2001
From: Hu Gang <18768366022@163.com>
Date: Wed, 30 Apr 2025 17:18:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8F=92=E4=BB=B6=E4=B8=AD=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/paths/api.ts                         |  25 +-
 src/apis/paths/index.ts                       |   2 +
 src/apis/paths/mcp.ts                         |  70 ++++
 src/views/api/components/McpDrawer.vue        | 280 ++++++++++++++++
 src/views/api/components/McpServiceDetail.vue | 314 ++++++++++++++++++
 src/views/api/components/MonacoEditor.vue     |  90 +++++
 src/views/api/components/PluginCard.vue       |  85 +++++
 src/views/api/style.scss                      |  79 ++---
 8 files changed, 883 insertions(+), 62 deletions(-)
 create mode 100644 src/apis/paths/mcp.ts
 create mode 100644 src/views/api/components/McpDrawer.vue
 create mode 100644 src/views/api/components/McpServiceDetail.vue
 create mode 100644 src/views/api/components/MonacoEditor.vue
 create mode 100644 src/views/api/components/PluginCard.vue

diff --git a/src/apis/paths/api.ts b/src/apis/paths/api.ts
index 96c5d1db..95dd5fae 100644
--- a/src/apis/paths/api.ts
+++ b/src/apis/paths/api.ts
@@ -10,7 +10,26 @@ import { QueryApiListParamsType, CreateOrUpdateApiParamsType } from './type';
 // 导出一个函数queryApiList，用于查询API列表
 export const queryApiList = (
   params: QueryApiListParamsType,
-): Promise<[any, FcResponse<unknown> | undefined]> => {
+): Promise<
+  [
+    any,
+    (
+      | FcResponse<{
+          totalCount: number;
+          currentPage: number;
+          services: {
+            serviceId: string;
+            description: string;
+            favorited: boolean;
+            icon: string;
+            author: string;
+            name: string;
+          }[];
+        }>
+      | undefined
+    ),
+  ]
+> => {
   // 调用get函数，传入/api/service路径和params参数，返回一个Promise对象
   return get('/api/service', params);
 };
@@ -34,7 +53,9 @@ export const createOrUpdateApi = (
 export const querySingleApiData = (params: {
   serviceId: string;
   edit?: boolean;
-}): Promise<[any, FcResponse<unknown> | undefined]> => {
+}): Promise<
+  [any, FcResponse<{ data: any; name: string; apis: string }> | undefined]
+> => {
   return get(`/api/service/${params.serviceId}`, { edit: params.edit });
 };
 
diff --git a/src/apis/paths/index.ts b/src/apis/paths/index.ts
index f87c8a52..786e662d 100644
--- a/src/apis/paths/index.ts
+++ b/src/apis/paths/index.ts
@@ -14,3 +14,5 @@ export * from './apikey';
 export * from './knowledge';
 export * from './app';
 export * from './api';
+export * from './model';
+export * from './mcp';
diff --git a/src/apis/paths/mcp.ts b/src/apis/paths/mcp.ts
new file mode 100644
index 00000000..bf0b67ec
--- /dev/null
+++ b/src/apis/paths/mcp.ts
@@ -0,0 +1,70 @@
+import { get, post, del } from '../server';
+
+const MCP_BASE_URL = '/api/mcpservice';
+/**
+ * 获取用户的模型列表
+ * @returns
+ */
+const getMcpList = (params: {
+  searchType: string;
+  keyword: string;
+  page: number;
+  pageSize: number;
+}) => {
+  return get<{
+    currentPage: number;
+    totalCount: 0;
+    services: [
+      {
+        mcpserviceId: string;
+        name: string;
+        description: string;
+        icon: string;
+        author: string;
+      },
+    ];
+    totalModels: number;
+  }>(MCP_BASE_URL, params);
+};
+
+const getMcpServiceDetail = (mcpserviceId: string) => {
+  return get<{
+    serviceId: string;
+    icon: string;
+    name: string;
+    description: string;
+    data: {
+      transmitProto: 'Stdio' | 'Streamable' | 'SSE';
+      config: string;
+    };
+    tools: {
+      name: string;
+      description: string;
+      input_args: {
+        name: string;
+        description: string;
+        type: string;
+      }[];
+      output_args: {
+        name: string;
+        description: string;
+        type: string;
+      }[];
+    }[];
+  }>(`${MCP_BASE_URL}/${mcpserviceId}`);
+};
+
+const createMcpService = (params: {
+  icon: string;
+  name: string;
+  description: string;
+  config: { transmitProto: 'Stdio' | 'Streamable' | 'SSE'; config: string };
+}) => {
+  return post<{}>(`${MCP_BASE_URL}`, params);
+};
+
+export const mcpApi = {
+  getMcpList,
+  getMcpServiceDetail,
+  createMcpService,
+};
diff --git a/src/views/api/components/McpDrawer.vue b/src/views/api/components/McpDrawer.vue
new file mode 100644
index 00000000..15b8646a
--- /dev/null
+++ b/src/views/api/components/McpDrawer.vue
@@ -0,0 +1,280 @@
+<script lang="ts" setup>
+import { ElMessage, FormInstance, FormRules, UploadProps } from 'element-plus';
+import { nextTick, reactive, ref, watch } from 'vue';
+import MonacoEditor from './MonacoEditor.vue';
+import defaultIcon from '@/assets/svgs/app_upload.svg';
+import { api } from '@/apis';
+
+interface McpDetail {
+  icon: string;
+  name: string;
+  description: string;
+  type: 'Stdio' | 'SSE' | 'Streamable';
+  mcpConfig: string;
+}
+
+const props = defineProps<{
+  visible: boolean;
+  serviceId?: string;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:visible', visible: boolean): void;
+}>();
+
+const form = reactive<McpDetail>({
+  icon: '',
+  name: '',
+  description: '',
+  type: 'Stdio',
+  mcpConfig: '',
+});
+
+const formRef = ref<FormInstance>();
+const jsonEditorRef = ref();
+
+const rules = reactive<FormRules<typeof form>>({
+  icon: [{ required: true, message: '请上传MCP图标', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入MCP名称', trigger: 'blur' }],
+  description: [{ required: true, message: '请输入MCP描述', trigger: 'blur' }],
+  type: [{ required: true }],
+});
+
+const mcpTypes = [
+  { label: 'Stdio', value: 'Stdio' },
+  { label: 'SSE', value: 'sse' },
+  { label: 'Streamable', value: 'Ssreamable' },
+];
+
+const beforeIconUpload: UploadProps['beforeUpload'] = async (rawFile) => {
+  const isLt2M = rawFile.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    ElMessage({
+      message: 'Image size cannot exceed 2MB!',
+      type: 'error',
+    });
+    return false;
+  }
+
+  try {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      form.icon = e.target?.result as string;
+    };
+    reader.readAsDataURL(rawFile);
+    return false;
+  } catch (error) {
+    console.error('Error during file upload process:', error);
+    ElMessage({
+      message: 'An error occurred during file upload!',
+      type: 'error',
+    });
+    return false;
+  }
+};
+
+async function onConfirm(formEl: FormInstance | undefined) {
+  if (!formEl) return;
+  const json = jsonEditorRef.value.getJsonValue();
+  if (json) form.mcpConfig = json;
+  await formEl.validate(async (valid) => {
+    if (!valid) return;
+    const [err, _] = await api.createMcpService({
+      icon: form.icon,
+      name: form.name,
+      description: form.description,
+      config: {
+        transmitProto: form.type as 'Stdio' | 'Streamable' | 'SSE',
+        config: form.mcpConfig,
+      },
+    });
+    ElMessage.success('Success');
+    emits('update:visible', false);
+  });
+}
+
+async function getMcpServiceDetail(serviceId: string) {
+  const [_, res] = await api.getMcpServiceDetail(serviceId);
+  if (res) {
+    const { icon, name, description, data } = res.result;
+    form.icon = icon;
+    form.name = name;
+    form.description = description;
+    form.type = data.transmitProto as 'Stdio' | 'Streamable' | 'SSE';
+    form.mcpConfig = data.config;
+    jsonEditorRef.value.setJsonValue(form.mcpConfig);
+  }
+}
+
+watch(
+  () => props.visible,
+  () => {
+    if (props.visible) {
+      if (!props.serviceId) return;
+      getMcpServiceDetail(props.serviceId);
+    }
+  },
+);
+</script>
+<template>
+  <div class="mcp-drawer">
+    <el-drawer
+      size="700"
+      title="创建MCP服务"
+      :model-value="visible"
+      @close="emits('update:visible', false)"
+    >
+      <div class="wrapper">
+        <div class="content">
+          <el-form
+            ref="formRef"
+            class="content-form"
+            label-position="left"
+            label-width="auto"
+            :model="form"
+            :rules="rules"
+          >
+            <el-form-item label="图标" prop="icon">
+              <div class="upload-area">
+                <el-upload
+                  class="uploader"
+                  :show-file-list="false"
+                  :before-upload="beforeIconUpload"
+                  :accept="'image/*'"
+                >
+                  <div class="uploader-icon">
+                    <img v-if="form.icon" :src="form.icon" alt="" />
+                    <img v-else :src="defaultIcon" />
+                  </div>
+                </el-upload>
+                <span class="text">上传图标</span>
+              </div>
+            </el-form-item>
+            <el-form-item label="MCP名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入MCP名称" />
+            </el-form-item>
+            <el-form-item label="MCP描述" prop="description">
+              <el-input
+                type="textarea"
+                :maxlength="1000"
+                show-word-limit
+                v-model="form.description"
+                :rows="8"
+                placeholder="请输入MCP描述"
+              />
+            </el-form-item>
+            <el-form-item label="MCP类型" prop="type" class="form-item">
+              <el-radio-group v-model="form.type">
+                <el-radio v-for="{ label, value } in mcpTypes" :value="value">
+                  {{ label }}
+                </el-radio>
+              </el-radio-group>
+              <div class="editor">
+                <MonacoEditor ref="jsonEditorRef" />
+              </div>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <div class="footer">
+          <el-button @click="emits('update:visible', false)">取消</el-button>
+          <el-button type="primary" @click="onConfirm(formRef)">确定</el-button>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+<style lang="scss" scoped>
+.mcp-drawer {
+  :deep(.el-drawer) {
+    .el-drawer__header {
+      color: #000;
+      font-weight: 700;
+      padding: 24px 24px 0px 24px;
+      margin: 0;
+    }
+    .el-drawer__body {
+      padding: 0 24px;
+    }
+    .el-drawer__footer {
+      padding: 0;
+      padding: 8px 24px;
+      box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+.wrapper {
+  height: calc(100% - 38px);
+  display: flex;
+  flex-direction: column;
+  .content {
+    margin-top: 16px;
+    flex: 1;
+    &-form {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: start;
+      .form-item {
+        flex: 1;
+        :deep(.el-form-item__content) {
+          display: flex;
+          flex-direction: column;
+          align-items: start;
+          height: 100%;
+        }
+
+        .editor {
+          width: 100%;
+          max-height: 440px;
+          flex: 1;
+          border: 1px solid rgb(195, 206, 223);
+        }
+      }
+    }
+    .upload-area {
+      display: flex;
+      flex-direction: column;
+      .uploader {
+        cursor: pointer;
+
+        .uploader-icon {
+          position: relative;
+          img {
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+          }
+          &::after {
+            content: '';
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            background-image: url('@/assets/svgs/upload_icon.svg');
+            position: absolute;
+            right: 2px;
+            bottom: 12px;
+          }
+        }
+      }
+      .text {
+        height: 16px;
+        line-height: 12px;
+        color: rgb(141, 152, 170);
+      }
+    }
+  }
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    padding: 8px 24px;
+    box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.1);
+    z-index: 9999;
+  }
+}
+</style>
diff --git a/src/views/api/components/McpServiceDetail.vue b/src/views/api/components/McpServiceDetail.vue
new file mode 100644
index 00000000..e0088155
--- /dev/null
+++ b/src/views/api/components/McpServiceDetail.vue
@@ -0,0 +1,314 @@
+<script lang="ts" setup>
+import { CaretRight } from '@element-plus/icons-vue';
+import { ref, watch } from 'vue';
+import { api } from '@/apis';
+import defaultIcon from '@/assets/svgs/app_upload.svg';
+
+interface McpDetail {
+  serviceId: string;
+  icon: string;
+  name: string;
+  description: string;
+  data: {
+    transmitProto: 'Stdio' | 'Streamable' | 'SSE';
+    config: string;
+  };
+  tools: {
+    name: string;
+    description: string;
+    input_args: {
+      name: string;
+      description: string;
+      type: string;
+    }[];
+    output_args: {
+      name: string;
+      description: string;
+      type: string;
+    }[];
+  }[];
+}
+
+const props = defineProps<{
+  visible: boolean;
+  serviceId: string;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:visible', visible: boolean): void;
+}>();
+
+const activeTab = ref<'description' | 'tools'>('description');
+
+const mcpServiceDetail = ref<McpDetail>();
+
+const activeNames = ref([]);
+
+async function getMcpServiceDetail(serviceId: string) {
+  const [_, res] = await api.getMcpServiceDetail(serviceId);
+  if (res) {
+    mcpServiceDetail.value = res.result;
+  }
+}
+
+watch(
+  () => props.visible,
+  () => {
+    if (props.visible) {
+      if (!props.serviceId) return;
+      getMcpServiceDetail(props.serviceId);
+    }
+  },
+);
+</script>
+<template>
+  <div class="mcp-drawer">
+    <el-drawer
+      size="700"
+      :model-value="visible"
+      title="服务详情"
+      @close="emits('update:visible', false)"
+    >
+      <div class="content" v-if="mcpServiceDetail">
+        <div class="overview">
+          <img :src="mcpServiceDetail.icon || defaultIcon" alt="" />
+          <div class="overview-text">
+            <p class="name">{{ mcpServiceDetail.name }}</p>
+            <p class="desc">{{ mcpServiceDetail.description }}</p>
+          </div>
+        </div>
+
+        <div class="detail">
+          <el-tabs v-model="activeTab" class="settings-tabs">
+            <el-tab-pane label="描述" name="description" :lazy="true">
+              <div class="description">
+                {{ mcpServiceDetail.description }}
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="工具" name="tools" :lazy="true">
+              <div class="tool" v-for="tool in mcpServiceDetail.tools">
+                <p class="tool_name">{{ tool.name }}</p>
+                <span class="tool-description">
+                  {{ tool.description }}
+                </span>
+                <el-collapse v-model="activeNames">
+                  <el-collapse-item name="regeocode" :icon="CaretRight">
+                    <template #title>
+                      <span class="collapse-title">工具入参</span>
+                    </template>
+                    <div
+                      class="tool-parameter"
+                      v-for="(args, idx) in tool.input_args"
+                      :key="idx"
+                    >
+                      <div class="tool-parameter__key-value">
+                        <span class="key">{{ args.name }}</span>
+                        <span class="type">{{ args.type }}</span>
+                      </div>
+                      <span class="tool-parameter__introduction">
+                        {{ args.description }}
+                      </span>
+                    </div>
+                  </el-collapse-item>
+                  <el-collapse-item name="geocode" :icon="CaretRight">
+                    <template #title>
+                      <span class="collapse-title">工具出参</span>
+                    </template>
+
+                    <div
+                      class="tool-parameter"
+                      v-for="(args, idx) in tool.input_args"
+                      :key="idx"
+                    >
+                      <div class="tool-parameter__key-value">
+                        <span class="key">{{ args.name }}</span>
+                        <span class="type">{{ args.type }}</span>
+                      </div>
+                      <span class="tool-parameter__introduction">
+                        {{ args.description }}
+                      </span>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="emits('update:visible', false)">关闭</el-button>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+<style lang="scss" scoped>
+.content {
+  height: calc(100% - 24px);
+  margin-top: 16px;
+  .overview {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    &-text {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+    img {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+    }
+    .name {
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 24px;
+    }
+    .desc {
+      max-width: 550px;
+      font-size: 14px;
+      line-height: 22px;
+      font-weight: 400;
+      color: rgb(78, 88, 101);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+  .detail {
+    margin-top: 16px;
+    height: calc(100% - 40px);
+    .settings-tabs {
+      height: 100%;
+
+      --o-tabs-font-size: 14px;
+      --o-tabs-item-padding: 5px 16px 0 5px;
+      --o-tabs-line-height: 32px;
+      --o-tabs-color_active: rgb(99, 149, 253);
+      --o-text-color-secondary: #000;
+
+      .description {
+        height: 100%;
+        overflow: scroll;
+        line-height: 22px;
+        font-weight: 400;
+        color: rgb(78, 88, 101);
+      }
+
+      :deep(.el-tabs__content) {
+        padding: 8px 0;
+        height: 100%;
+        .el-tab-pane {
+          height: 100%;
+        }
+      }
+      :deep(.el-tab-pane) {
+        overflow: scroll;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+      }
+
+      .tool {
+        --c-collapse-bg: rgb(244, 246, 250);
+        padding: 16px;
+        border-radius: 4px;
+        background-color: var(--c-collapse-bg);
+        &:not(:first-child) {
+          margin-top: 8px;
+        }
+
+        &_name {
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 22px;
+        }
+
+        &-description {
+          font-size: 12px;
+          line-height: 16px;
+          font-weight: 400;
+          color: rgb(78, 88, 101);
+        }
+
+        :deep(.el-collapse) {
+          margin-top: 8px;
+
+          .tool-parameter {
+            display: flex;
+            flex-direction: column;
+            &__key-value {
+              display: flex;
+              align-items: center;
+              gap: 8px;
+              font-size: 12px;
+              font-weight: 400;
+              line-height: 16px;
+              padding: 8px 0 4px 0;
+              .key {
+                color: #000;
+              }
+              .type {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 0 8px;
+                background-color: rgb(195, 206, 223);
+                border-radius: 2px;
+                font-weight: 500;
+              }
+            }
+
+            &__introduction {
+              font-size: 12px;
+              line-height: 16px;
+              font-weight: 400;
+              color: rgb(141, 151, 170);
+            }
+          }
+
+          .collapse-title {
+            display: flex;
+            justify-content: start;
+            flex: 1 0 90%;
+            order: 1;
+          }
+          .el-collapse-item__header {
+            background-color: var(--c-collapse-bg);
+            padding: 0;
+            flex: 1 0 auto;
+            order: -1;
+            height: 32px;
+            border-bottom: 1px solid rgb(230, 230, 230);
+            border-radius: 0;
+          }
+          .el-collapse-item__wrap {
+            background-color: var(--c-collapse-bg);
+          }
+          .el-collapse-item__content {
+            background-color: var(--c-collapse-bg);
+            margin-bottom: 0px;
+          }
+        }
+      }
+    }
+  }
+}
+.mcp-drawer {
+  :deep(.el-drawer) {
+    .el-drawer__header {
+      color: #000;
+      font-weight: 700;
+      padding: 24px 24px 16px 24px;
+      margin: 0;
+    }
+    .el-drawer__body {
+      padding: 0 24px;
+    }
+    .el-drawer__footer {
+      padding: 0;
+      padding: 8px 24px;
+      box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+</style>
diff --git a/src/views/api/components/MonacoEditor.vue b/src/views/api/components/MonacoEditor.vue
new file mode 100644
index 00000000..ae400ba4
--- /dev/null
+++ b/src/views/api/components/MonacoEditor.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount, toRaw } from 'vue';
+import * as monaco from 'monaco-editor';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+const props = defineProps<{
+  code?: string;
+}>();
+
+defineExpose({
+  getJsonValue,
+  setJsonValue,
+});
+
+const monacoEditorRef = ref<HTMLElement | null>(null);
+let editor: monaco.editor.IStandaloneCodeEditor | undefined = undefined;
+
+function getJsonValue() {
+  if (!editor) return '';
+  return editor.getValue();
+}
+
+function setJsonValue(value: string) {
+  if (!editor) return;
+  editor.setValue(value);
+}
+
+function initMonacoEditor() {
+  if (!monacoEditorRef.value) return;
+  window.MonacoEnvironment = {
+    getWorker(_: string, label: string) {
+      if (label === 'json') {
+        return new jsonWorker();
+      }
+      if (['typescript', 'javascript'].includes(label)) {
+        return new tsWorker();
+      }
+      return new EditorWorker();
+    },
+  };
+
+  editor = monaco.editor.create(monacoEditorRef.value, {
+    value: props.code || '{}',
+    language: 'json',
+    theme: 'vs',
+    tabSize: 4,
+    automaticLayout: true,
+    insertSpaces: true,
+    folding: false,
+    roundedSelection: true,
+  });
+}
+
+onMounted(() => {
+  initMonacoEditor();
+});
+
+onBeforeUnmount(() => {
+  if (editor) {
+    editor.dispose();
+  }
+});
+</script>
+<template>
+  <div ref="monacoEditorRef" class="editor-container" />
+</template>
+<style lang="scss">
+.editor-container {
+  width: 100%;
+  height: 100%;
+}
+
+.code-container {
+  height: 100%;
+}
+
+.line-numbers {
+  text-align: center !important;
+}
+
+.inputarea {
+  position: absolute !important;
+  left: unset !important;
+  height: 1px !important;
+  opacity: 0;
+  margin-top: 20px;
+}
+</style>
diff --git a/src/views/api/components/PluginCard.vue b/src/views/api/components/PluginCard.vue
new file mode 100644
index 00000000..a504f634
--- /dev/null
+++ b/src/views/api/components/PluginCard.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import TextMoreTootip from '@/components/textMoreTootip/index.vue';
+import DefaultIcon from '@/assets/svgs/defaultIcon.webp';
+
+interface CardInfo {
+  name: string;
+  description: string;
+  icon?: string;
+}
+const props = defineProps<CardInfo>();
+</script>
+<template>
+  <div class="plugin-card">
+    <div class="plugin-card-icon">
+      <el-icon class="menu-icon">
+        <img class="create-button__icon" :src="icon || DefaultIcon" />
+      </el-icon>
+    </div>
+    <div class="plugin-card-content">
+      <div class="plugin-card-content__top">
+        <div class="title">
+          {{ name }}
+        </div>
+        <slot name="topRight"></slot>
+      </div>
+      <div class="plugin-card-content__desc">
+        <TextMoreTootip :value="description" :row="2" />
+      </div>
+    </div>
+  </div>
+  <slot name="footer"></slot>
+</template>
+<style lang="scss" scoped>
+.plugin-card {
+  display: flex;
+  .plugin-card-icon {
+    margin-right: 18px;
+    display: flex;
+    align-items: start;
+    .menu-icon {
+      width: 48px;
+      height: 48px;
+      img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  .plugin-card-content {
+    cursor: pointer;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    &__top {
+      display: flex;
+      justify-content: space-between;
+      .title {
+        color: var(--o-text-color-primary);
+        font-size: 16px;
+        line-height: 24px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        width: 80%;
+      }
+    }
+  }
+
+  .no-click {
+    cursor: not-allowed;
+  }
+  .plugin-card-content__desc {
+    font-size: 14px;
+    line-height: 22px;
+    .vue-text {
+      cursor: pointer !important;
+      color: var(--o-api-description);
+    }
+  }
+}
+</style>
diff --git a/src/views/api/style.scss b/src/views/api/style.scss
index 12a46734..fb4c0923 100644
--- a/src/views/api/style.scss
+++ b/src/views/api/style.scss
@@ -30,14 +30,14 @@
       }
 
       .createApi {
-        margin-left: 16px;
+        margin-left: 8px;
         border-radius: 4px;
       }
+      
     }
 
     .apiCenterType {
       display: flex;
-      width: 400px;
       height: 32px;
       align-items: center;
       justify-content: space-between;
@@ -45,7 +45,7 @@
       border-radius: 4px;
       background-color: var(--o-border-color-base);
       .apiCenterBtn {
-        width: 130px;
+        width: 197px;
         height: 28px;
         display: flex;
         font-size: 12px;
@@ -57,8 +57,6 @@
       }
     }
     .apiCenterCardContainer {
-      margin-top: 12px;
-      padding-top: 4px;
       max-width: 1336px;
       max-height: calc(100vh - 370px);
       min-height: calc(100vh - 370px);
@@ -70,6 +68,7 @@
         flex-wrap: wrap;
         box-sizing: border-box;
         gap: 16px;
+        margin-top: 16px;
         .apiCenterCardSingle {
           box-sizing: border-box;
           border: 1px solid transparent;
@@ -82,64 +81,24 @@
           height: 136px;
           padding: 16px;
           background-color: var(--o-bg-color-base);
-          .apiCenterCardTop {
+          .apiCenterCardContentCollect {
+            width: 24px;
+            height: 24px;
+            background-color: var(--o-bg-color-light);
+            border-radius: 8px;
             display: flex;
-            .apiCenterCardIcon {
-              margin-right: 18px;
-              display: flex;
-              align-items: center;
-              .menu-icon {
-                width: 48px;
-                height: 48px;
+            justify-content: center;
+            align-items: center;
+            svg {
+              width: 16px;
+              height: 16px;
+              path {
+                fill: var(--o-text-color-tertiary);
               }
             }
-            .apiCenterCardContent {
-              cursor: pointer;
-              flex: 1;
-              display: flex;
-              flex-direction: column;
-              gap: 4px;
-              .apiCenterCardContentTop {
-                display: flex;
-                justify-content: space-between;
-                .apiCenterCardContentTitle {
-                  color: var(--o-text-color-primary);
-                  font-size: 16px;
-                  line-height: 24px;
-                  overflow: hidden;
-                  white-space: nowrap;
-                  text-overflow: ellipsis;
-                  width: 80%;
-                }
-                .apiCenterCardContentCollect {
-                  width: 24px;
-                  height: 24px;
-                  background-color: var(--o-bg-color-light);
-                  border-radius: 8px;
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  svg {
-                    width: 16px;
-                    height: 16px;
-                    path {
-                      fill: var(--o-text-color-tertiary);
-                    }
-                  }
-                  .apiFavorite {
-                    path {
-                      fill: rgb(99, 149, 253);
-                    }
-                  }
-                }
-              }
-              .apiCenterCardContentDes {
-                .vue-text{
-                  cursor: pointer !important;
-                  color: var(--o-api-description);
-                }
-                font-size: 14px;
-                line-height: 22px;
+            .apiFavorite {
+              path {
+                fill: rgb(99, 149, 253);
               }
             }
           }
-- 
Gitee