初始化

easyflow-ui-admin/app/src/views/ai/mcp/Mcp.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import type { FormInstance } from 'element-plus';
+
+import { markRaw, ref } from 'vue';
+
+import { Delete, MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
+import {
+  ElButton,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElMessage,
+  ElMessageBox,
+  ElSwitch,
+  ElTable,
+  ElTableColumn,
+  ElTooltip,
+} from 'element-plus';
+
+import { api } from '#/api/request';
+import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
+import PageData from '#/components/page/PageData.vue';
+import { $t } from '#/locales';
+
+import McpModal from './McpModal.vue';
+
+const formRef = ref<FormInstance>();
+const pageDataRef = ref();
+const saveDialog = ref();
+function reset(formEl: FormInstance | undefined) {
+  formEl?.resetFields();
+  pageDataRef.value.setQuery({});
+}
+function showDialog(row: any) {
+  saveDialog.value.openDialog({ ...row });
+}
+function remove(row: any) {
+  ElMessageBox.confirm($t('message.deleteAlert'), $t('message.noticeTitle'), {
+    confirmButtonText: $t('message.ok'),
+    cancelButtonText: $t('message.cancel'),
+    type: 'warning',
+    beforeClose: (action, instance, done) => {
+      if (action === 'confirm') {
+        instance.confirmButtonLoading = true;
+        api
+          .post('/api/v1/mcp/remove', { id: row.id })
+          .then((res) => {
+            instance.confirmButtonLoading = false;
+            if (res.errorCode === 0) {
+              ElMessage.success(res.message);
+              reset(formRef.value);
+              done();
+            }
+          })
+          .catch(() => {
+            instance.confirmButtonLoading = false;
+          });
+      } else {
+        done();
+      }
+    },
+  }).catch(() => {});
+}
+const handleUpdate = (row: any, isRefresh: boolean) => {
+  if (isRefresh) {
+    refreshLoadingMap.value[row.id] = true;
+  } else {
+    loadingMap.value[row.id] = true;
+  }
+  api.post('/api/v1/mcp/update', { ...row }).then((res) => {
+    if (isRefresh) {
+      refreshLoadingMap.value[row.id] = false;
+    } else {
+      loadingMap.value[row.id] = false;
+    }
+    if (res.errorCode === 0) {
+      if (row.status) {
+        ElMessage.success($t('mcp.message.startupSuccessful'));
+      } else {
+        ElMessage.success($t('mcp.message.stopSuccessful'));
+      }
+    }
+    pageDataRef.value.setQuery({});
+  });
+};
+const headerButtons = [
+  {
+    key: 'create',
+    type: 'primary',
+    text: $t('button.add'),
+    icon: markRaw(Plus),
+    data: { action: 'create' },
+  },
+];
+const handleSearch = (params: string) => {
+  pageDataRef.value.setQuery({ packageName: params, isQueryOr: true });
+};
+const handleHeaderButtonClick = (button: any) => {
+  if (button.key === 'create') {
+    showDialog({});
+  }
+};
+const loadingMap = ref<Record<number | string, boolean>>({});
+const refreshLoadingMap = ref<Record<number | string, boolean>>({});
+</script>
+
+<template>
+  <div class="flex h-full flex-col gap-6 p-6">
+    <McpModal ref="saveDialog" @reload="reset" />
+    <HeaderSearch
+      :buttons="headerButtons"
+      @search="handleSearch"
+      @button-click="handleHeaderButtonClick"
+    />
+    <div class="bg-background border-border flex-1 rounded-lg border p-5">
+      <PageData ref="pageDataRef" page-url="/api/v1/mcp/page" :page-size="10">
+        <template #default="{ pageList }">
+          <ElTable :data="pageList" border>
+            <ElTableColumn prop="title" :label="$t('mcp.title')">
+              <template #default="{ row }">
+                <ElTooltip
+                  :content="
+                    row.clientOnline
+                      ? $t('mcp.labels.clientOnline')
+                      : $t('mcp.labels.clientOffline')
+                  "
+                  placement="top"
+                >
+                  <span
+                    class="mr-2 inline-block h-2 w-2 rounded-full"
+                    :class="row.clientOnline ? 'bg-green-500' : 'bg-red-500'"
+                  ></span>
+                </ElTooltip>
+                {{ row.title }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn prop="description" :label="$t('mcp.description')">
+              <template #default="{ row }">
+                {{ row.description }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn prop="created" :label="$t('mcp.created')">
+              <template #default="{ row }">
+                {{ row.created }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn prop="status" :label="$t('mcp.status')">
+              <template #default="{ row }">
+                <ElSwitch
+                  v-model="row.status"
+                  @change="() => handleUpdate(row, false)"
+                  :loading="loadingMap[row.id]"
+                  :disabled="loadingMap[row.id]"
+                />
+              </template>
+            </ElTableColumn>
+            <ElTableColumn
+              :label="$t('common.handle')"
+              width="150"
+              align="right"
+            >
+              <template #default="{ row }">
+                <div class="flex items-center gap-3">
+                  <div v-access:code="'/api/v1/mcp/save'">
+                    <ElButton
+                      @click="handleUpdate({ ...row, status: true }, true)"
+                      type="primary"
+                      link
+                      :icon="Refresh"
+                      :loading="refreshLoadingMap[row.id]"
+                    >
+                      {{ $t('重启') }}
+                    </ElButton>
+                  </div>
+                  <div v-access:code="'/api/v1/mcp/save'">
+                    <ElButton type="primary" link @click="showDialog(row)">
+                      {{ $t('button.edit') }}
+                    </ElButton>
+                  </div>
+
+                  <ElDropdown>
+                    <ElButton link :icon="MoreFilled" />
+                    <template #dropdown>
+                      <ElDropdownMenu>
+                        <div v-access:code="'/api/v1/mcp/remove'">
+                          <ElDropdownItem @click="remove(row)">
+                            <ElButton type="danger" :icon="Delete" link>
+                              {{ $t('button.delete') }}
+                            </ElButton>
+                          </ElDropdownItem>
+                        </div>
+                      </ElDropdownMenu>
+                    </template>
+                  </ElDropdown>
+                </div>
+              </template>
+            </ElTableColumn>
+          </ElTable>
+        </template>
+      </PageData>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

easyflow-ui-admin/app/src/views/ai/mcp/McpModal.vue

@@ -0,0 +1,338 @@
+<script setup lang="ts">
+import type { FormInstance } from 'element-plus';
+
+import { onMounted, ref } from 'vue';
+
+import {
+  ElButton,
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElSwitch,
+  ElTable,
+  ElTableColumn,
+  ElTabPane,
+  ElTabs,
+} from 'element-plus';
+
+import { api } from '#/api/request';
+import { $t } from '#/locales';
+
+interface PropValue {
+  type?: string;
+  description?: string;
+}
+
+interface McpTool {
+  name: string;
+  description: string;
+  status: boolean;
+  inputSchema?: {
+    properties: Record<string, PropValue>;
+    required?: string[];
+  };
+}
+
+interface McpEntity {
+  id?: string;
+  title: string;
+  description: string;
+  configJson: string;
+  deptId: string;
+  status: boolean;
+  tools: McpTool[];
+}
+
+const emit = defineEmits(['reload']);
+
+onMounted(() => {});
+defineExpose({
+  openDialog,
+});
+
+const saveForm = ref<FormInstance>();
+const dialogVisible = ref(false);
+const isAdd = ref(true);
+const btnLoading = ref(false);
+
+const defaultEntity: McpEntity = {
+  title: '',
+  description: '',
+  configJson: '',
+  deptId: '',
+  status: false,
+  tools: [],
+};
+const entity = ref<McpEntity>({ ...defaultEntity });
+
+const rules = ref({
+  title: [
+    {
+      required: true,
+      message: $t('message.required'),
+      trigger: 'blur',
+    },
+  ],
+  configJson: [
+    {
+      required: true,
+      message: $t('message.required'),
+      trigger: 'blur',
+    },
+  ],
+});
+
+function openDialog(row: Partial<McpEntity> = {}) {
+  isAdd.value = !row.id;
+  entity.value = { ...defaultEntity, ...row };
+  if (!isAdd.value) {
+    getMcpTools(row);
+  }
+  dialogVisible.value = true;
+}
+
+function getMcpTools(row: Partial<McpEntity>) {
+  api.post('api/v1/mcp/getMcpTools', { id: row.id }).then((res) => {
+    if (res.errorCode === 0) {
+      entity.value.tools = res.data.tools;
+    }
+  });
+}
+function save() {
+  saveForm.value?.validate((valid) => {
+    if (valid) {
+      btnLoading.value = true;
+      api
+        .post(
+          isAdd.value ? 'api/v1/mcp/save' : 'api/v1/mcp/update',
+          entity.value,
+        )
+        .then((res) => {
+          btnLoading.value = false;
+          if (res.errorCode === 0) {
+            if (isAdd.value) {
+              ElMessage.success($t('message.saveOkMessage'));
+            } else {
+              ElMessage.success($t('message.updateOkMessage'));
+            }
+            emit('reload');
+            closeDialog();
+          }
+        })
+        .catch(() => {
+          btnLoading.value = false;
+        });
+    }
+  });
+}
+
+function closeDialog() {
+  saveForm.value?.resetFields();
+  isAdd.value = true;
+  entity.value = { ...defaultEntity };
+  dialogVisible.value = false;
+}
+const jsonPlaceholder = ref(`{
+  "mcpServers": {
+    "12306-mcp": {
+      "command": "npx.cmd",
+      "args": [
+        "-y",
+        "12306-mcp"
+      ]
+    }
+  }
+}`);
+const activeName = ref('config');
+</script>
+
+<template>
+  <ElDialog
+    v-model="dialogVisible"
+    draggable
+    :title="isAdd ? $t('button.add') : $t('button.edit')"
+    :before-close="closeDialog"
+    :close-on-click-modal="false"
+  >
+    <ElTabs v-model="activeName" class="demo-tabs">
+      <ElTabPane :label="$t('mcp.modal.config')" name="config">
+        <ElForm
+          label-width="120px"
+          ref="saveForm"
+          :model="entity"
+          status-icon
+          :rules="rules"
+        >
+          <ElFormItem prop="title" :label="$t('mcp.title')">
+            <ElInput v-model.trim="entity.title" />
+          </ElFormItem>
+          <ElFormItem prop="description" :label="$t('mcp.description')">
+            <ElInput v-model.trim="entity.description" />
+          </ElFormItem>
+          <ElFormItem prop="configJson" :label="$t('mcp.configJson')">
+            <ElInput
+              type="textarea"
+              :rows="15"
+              v-model.trim="entity.configJson"
+              :placeholder="$t('mcp.example') + jsonPlaceholder" />
+          </ElFormItem>
+          <ElFormItem prop="status" :label="$t('mcp.status')">
+            <ElSwitch v-model="entity.status" />
+          </ElFormItem>
+        </ElForm>
+      </ElTabPane>
+      <div v-if="!isAdd">
+        <ElTabPane :label="$t('mcp.modal.tool')" name="tool">
+          <ElTable
+            :data="entity.tools"
+            border
+            :preserve-expanded-content="true"
+          >
+            <ElTableColumn type="expand">
+              <template #default="scope">
+                <!-- 解构获取properties和required，同时做空值保护 -->
+                <div
+                  v-if="scope.row?.inputSchema?.properties"
+                  class="params-list"
+                >
+                  <div
+                    v-for="([propKey, propValue], index) in Object.entries(
+                      scope.row.inputSchema.properties,
+                    )"
+                    :key="index"
+                    class="params-content-container"
+                  >
+                    <div class="params-left-title-container">
+                      <div class="content-title">
+                        {{ propKey }}
+                        <span
+                          v-if="
+                            scope.row.inputSchema.required &&
+                            scope.row.inputSchema.required.includes(propKey)
+                          "
+                          class="required-mark"
+                        >
+                          *
+                        </span>
+                      </div>
+                    </div>
+                    <div class="params-desc-container">
+                      <div class="content-title">
+                        {{ (propValue as PropValue).type || '未知类型' }}
+                      </div>
+                      <div class="content-desc">
+                        {{ (propValue as PropValue).description || '无描述' }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div v-else class="params-name">暂无属性配置</div>
+              </template>
+            </ElTableColumn>
+
+            <ElTableColumn :label="$t('mcp.modal.table.availableTools')">
+              <template #default="{ row }">
+                <div class="content-left">
+                  <span class="content-title">{{ row.name }}</span>
+                  <span class="content-desc">{{ row.description }}</span>
+                </div>
+              </template>
+            </ElTableColumn>
+            <!--          <ElTableColumn :label="$t('mcp.status')">
+              <template #default="{ row }">
+                <ElSwitch v-model="row.status" />
+              </template>
+            </ElTableColumn>-->
+          </ElTable>
+        </ElTabPane>
+      </div>
+    </ElTabs>
+    <template #footer>
+      <ElButton @click="closeDialog">
+        {{ $t('button.cancel') }}
+      </ElButton>
+      <ElButton
+        type="primary"
+        @click="save"
+        :loading="btnLoading"
+        :disabled="btnLoading"
+      >
+        {{ $t('button.save') }}
+      </ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<style scoped>
+.content-left {
+  display: flex;
+  flex-direction: column;
+}
+.content-title {
+  font-weight: 500;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 24px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.content-desc {
+  font-weight: 400;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  line-height: 22px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.params-name {
+  flex: 1;
+  background-color: #fafafa;
+  display: flex;
+  align-items: center;
+  border: 1px solid #e6e9ee;
+  border-radius: 8px;
+  padding: 8px;
+}
+.params-content-container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  flex: 1;
+  border-radius: 8px;
+  padding: 8px;
+}
+.params-desc-container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  border-radius: 8px;
+  border: 1px solid #e6e9ee;
+  padding: 8px;
+}
+.params-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.params-left-title-container {
+  display: flex;
+  flex-direction: row;
+  background-color: #fafafa;
+  gap: 8px;
+  flex: 1;
+  border: 1px solid #e6e9ee;
+  border-radius: 8px;
+  padding: 8px;
+  align-items: center;
+}
+.required-mark {
+  color: #f56c6c;
+  margin-left: 2px;
+  font-size: 14px;
+}
+</style>