|
|
@@ -387,7 +387,117 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="home-guide-doubao-right">
|
|
|
- <img src="@/assets/images/doubao_img.png" alt="豆包自定义连接器示意" class="home-guide-doubao-img" />
|
|
|
+ <div class="home-guide-doubao-form">
|
|
|
+ <div class="home-guide-doubao-form-head">
|
|
|
+ <div class="home-guide-doubao-form-title">编辑自定义连接器</div>
|
|
|
+ <div class="home-guide-doubao-form-sub">自定义连接器仅支持在本地电脑中使用</div>
|
|
|
+ </div>
|
|
|
+ <div class="home-guide-doubao-form-row">
|
|
|
+ <div class="home-guide-doubao-form-field">
|
|
|
+ <div class="home-guide-doubao-form-label">
|
|
|
+ 服务器名称 <span class="is-required">*</span>
|
|
|
+ </div>
|
|
|
+ <div class="home-guide-doubao-form-select" @click.stop>
|
|
|
+ <div
|
|
|
+ class="home-guide-doubao-form-input"
|
|
|
+ :class="{ 'is-open': doubaoSelectOpen }"
|
|
|
+ @click="toggleDoubaoSelect"
|
|
|
+ >
|
|
|
+ <span>{{ doubaoServerName }}</span>
|
|
|
+ <div class="home-guide-doubao-form-icons">
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ class="home-guide-doubao-form-copy"
|
|
|
+ @click.stop="copyText(doubaoServerName)"
|
|
|
+ >
|
|
|
+ <icon-svg name="http_copy" size="16px" />
|
|
|
+ </button>
|
|
|
+ <icon-svg name="icon_arrow_server" size="12px" class="home-guide-doubao-form-arrow" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Transition name="home-guide-doubao-dropdown">
|
|
|
+ <div v-if="doubaoSelectOpen" class="home-guide-doubao-form-dropdown">
|
|
|
+ <button
|
|
|
+ v-for="item in doubaoServerList"
|
|
|
+ :key="item.id"
|
|
|
+ type="button"
|
|
|
+ class="home-guide-doubao-form-option"
|
|
|
+ :class="{ 'is-active': String(item.id) === doubaoSelectedId }"
|
|
|
+ @click="selectDoubaoServer(item)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </Transition>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="home-guide-doubao-form-field home-guide-doubao-form-field--type">
|
|
|
+ <div class="home-guide-doubao-form-label">传输类型</div>
|
|
|
+ <div class="home-guide-doubao-form-input">HTTP</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="home-guide-doubao-form-field">
|
|
|
+ <div class="home-guide-doubao-form-label">
|
|
|
+ 服务器 URL <span class="is-required">*</span>
|
|
|
+ </div>
|
|
|
+ <div class="home-guide-doubao-form-input">
|
|
|
+ <span>{{ doubaoServerUrl }}</span>
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ class="home-guide-doubao-form-copy"
|
|
|
+ @click="copyText(doubaoServerUrl)"
|
|
|
+ >
|
|
|
+ <icon-svg name="http_copy" size="16px" />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="home-guide-doubao-form-field">
|
|
|
+ <div class="home-guide-doubao-form-label">自定义 Headers</div>
|
|
|
+ <div class="home-guide-doubao-form-headers">
|
|
|
+ <div class="home-guide-doubao-form-input">
|
|
|
+ <span>Authorization</span>
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ class="home-guide-doubao-form-copy"
|
|
|
+ @click="copyText('Authorization')"
|
|
|
+ >
|
|
|
+ <icon-svg name="http_copy" size="16px" />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <button
|
|
|
+ v-if="!guideToken"
|
|
|
+ type="button"
|
|
|
+ class="home-guide-doubao-form-token"
|
|
|
+ @click="createToken"
|
|
|
+ >
|
|
|
+ 点击获取token
|
|
|
+ </button>
|
|
|
+ <div v-else class="home-guide-doubao-form-input home-guide-doubao-form-token-value">
|
|
|
+ <span>
|
|
|
+ <template v-if="guideTokenVisible">{{ guideToken }}</template>
|
|
|
+ <template v-else>{{ guideTokenMasked.head }}{{ guideTokenMasked.middle }}{{ guideTokenMasked.tail }}</template>
|
|
|
+ </span>
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ class="home-guide-doubao-form-copy"
|
|
|
+ @click="guideTokenVisible = !guideTokenVisible"
|
|
|
+ >
|
|
|
+ <icon-svg
|
|
|
+ :name="guideTokenVisible ? 'eye_not_displayed' : 'eye_show'"
|
|
|
+ size="24px"
|
|
|
+ />
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ class="home-guide-doubao-form-copy"
|
|
|
+ @click="copyText(`Bearer ${guideToken}`)"
|
|
|
+ >
|
|
|
+ <icon-svg name="http_copy" size="16px" />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -750,10 +860,10 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { computed, onMounted, ref } from "vue";
|
|
|
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
|
|
|
import { useRouter } from "vue-router";
|
|
|
import { ElMessage } from "element-plus";
|
|
|
-import { getMcpToken, createMcpToken, getMcpServerHotList } from "@/api/mcp";
|
|
|
+import { getMcpToken, createMcpToken, getMcpServerHotList, getMcpServerList } from "@/api/mcp";
|
|
|
import { requireUserLogin } from "@/utils/auth";
|
|
|
import globalStore from "@/store/modules/global";
|
|
|
import demoImgGreen from "@/assets/images/test_instruction_green.jpg";
|
|
|
@@ -865,6 +975,11 @@ const createToken = async () => {
|
|
|
onMounted(() => {
|
|
|
fetchMcpToken();
|
|
|
fetchHotServerList();
|
|
|
+ fetchDoubaoServerList();
|
|
|
+ document.addEventListener("click", closeDoubaoSelect);
|
|
|
+});
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ document.removeEventListener("click", closeDoubaoSelect);
|
|
|
});
|
|
|
const guideAccessTab = ref("mcp");
|
|
|
const guideToolTab = ref("qianwen");
|
|
|
@@ -893,12 +1008,58 @@ const guideDoubaoContent = {
|
|
|
},
|
|
|
],
|
|
|
notes: [
|
|
|
- "服务器名称可自行命名",
|
|
|
- "服务器 URL 内填入对应的 server URL ,每个服务对应一个链接",
|
|
|
- "自定义 Headers 内填入 Authorization",
|
|
|
+ "请参照右图依次添入参数,每个服务对应一个URL",
|
|
|
+ "请在豆包-工作-连接器中选择对应的MCP进行检索",
|
|
|
"自定义 Headers 内需要填写页面「获取 Token」生成的真实 Token",
|
|
|
],
|
|
|
};
|
|
|
+const doubaoServerList = ref([]);
|
|
|
+const doubaoSelectedId = ref("");
|
|
|
+const doubaoSelectOpen = ref(false);
|
|
|
+const doubaoSelectedServer = computed(
|
|
|
+ () =>
|
|
|
+ doubaoServerList.value.find((item) => String(item.id) === doubaoSelectedId.value) ||
|
|
|
+ doubaoServerList.value[0] ||
|
|
|
+ null,
|
|
|
+);
|
|
|
+const doubaoServerName = computed(() => {
|
|
|
+ const name = doubaoSelectedServer.value?.name || "法规导则-关键词检索";
|
|
|
+ return `环评云助手MCP(${name})`;
|
|
|
+});
|
|
|
+const doubaoServerUrl = computed(
|
|
|
+ () => doubaoSelectedServer.value?.url || "https://mcp.eiacloud.com/law-keyword",
|
|
|
+);
|
|
|
+const fetchDoubaoServerList = async () => {
|
|
|
+ try {
|
|
|
+ let list = Array.isArray(global.mcpServerList) ? global.mcpServerList : [];
|
|
|
+ if (!list.length) {
|
|
|
+ const res = await getMcpServerList();
|
|
|
+ list = Array.isArray(res?.data) ? res.data : [];
|
|
|
+ if (list.length) global.setMcpServerList(list);
|
|
|
+ }
|
|
|
+ const openList = list.filter(
|
|
|
+ (item) => item.openStatus == null || Number(item.openStatus) === 1,
|
|
|
+ );
|
|
|
+ doubaoServerList.value = openList;
|
|
|
+ const exists = openList.some((item) => String(item.id) === doubaoSelectedId.value);
|
|
|
+ if (!exists && openList[0]) {
|
|
|
+ doubaoSelectedId.value = String(openList[0].id || "");
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error);
|
|
|
+ }
|
|
|
+};
|
|
|
+const toggleDoubaoSelect = () => {
|
|
|
+ if (!doubaoServerList.value.length) return;
|
|
|
+ doubaoSelectOpen.value = !doubaoSelectOpen.value;
|
|
|
+};
|
|
|
+const selectDoubaoServer = (item) => {
|
|
|
+ doubaoSelectedId.value = String(item?.id || "");
|
|
|
+ doubaoSelectOpen.value = false;
|
|
|
+};
|
|
|
+const closeDoubaoSelect = () => {
|
|
|
+ doubaoSelectOpen.value = false;
|
|
|
+};
|
|
|
const guideWpsContent = {
|
|
|
alert:
|
|
|
"仅支持内置连接：WPS Comate 只能通过内置「环评云助手」连接接入，不支持粘贴 JSON 或自定义 MCP 配置。",
|
|
|
@@ -2322,7 +2483,7 @@ const guideVerifyCards = [
|
|
|
}
|
|
|
|
|
|
.home-guide-doubao-body {
|
|
|
- align-items: flex-start;
|
|
|
+ align-items: stretch;
|
|
|
min-width: 0;
|
|
|
}
|
|
|
|
|
|
@@ -2336,16 +2497,231 @@ const guideVerifyCards = [
|
|
|
min-width: 0;
|
|
|
max-width: 608px;
|
|
|
display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- align-items: flex-start;
|
|
|
}
|
|
|
|
|
|
-.home-guide-doubao-img {
|
|
|
+.home-guide-doubao-form {
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 16px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 16px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 4px 24px 0px rgba(15, 23, 42, 0.06);
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-head {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-title {
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #1E293B;
|
|
|
+ line-height: 26px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-sub {
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #6B7280;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 24px;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-field {
|
|
|
+ min-width: 0;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-row .home-guide-doubao-form-field:not(.home-guide-doubao-form-field--type) {
|
|
|
+ flex: 2 1 0;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-field--type {
|
|
|
+ flex: 1 1 0;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-label {
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1E293B;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-label .is-required {
|
|
|
+ color: #EF4444;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-input {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px 12px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #E5E7EB;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1F2937;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-input span {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-copy {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ color: #94A3B8;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-icons {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 14px;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-arrow {
|
|
|
+ flex-shrink: 0;
|
|
|
+ color: #94A3B8;
|
|
|
+ pointer-events: none;
|
|
|
+ transition: transform 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-input.is-open .home-guide-doubao-form-arrow {
|
|
|
+ transform: rotate(180deg);
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-select {
|
|
|
+ position: relative;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-select .home-guide-doubao-form-input {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-dropdown {
|
|
|
+ position: absolute;
|
|
|
+ top: calc(100% + 4px);
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 20;
|
|
|
+ box-sizing: border-box;
|
|
|
+ max-height: 220px;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 6px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid #E5E7EB;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0px 4px 24px 0px rgba(15, 23, 42, 0.06);
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-dropdown-enter-active,
|
|
|
+.home-guide-doubao-dropdown-leave-active {
|
|
|
+ transition: opacity 0.2s ease, transform 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-dropdown-enter-from,
|
|
|
+.home-guide-doubao-dropdown-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(-6px);
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-option {
|
|
|
display: block;
|
|
|
width: 100%;
|
|
|
- max-width: 100%;
|
|
|
- height: auto;
|
|
|
- object-fit: contain;
|
|
|
+ margin: 0;
|
|
|
+ padding: 8px 12px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ background: transparent;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1F2937;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: left;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-option:hover,
|
|
|
+.home-guide-doubao-form-option.is-active {
|
|
|
+ background: #EEF4FF;
|
|
|
+ color: #1678FF;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-headers {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-headers .home-guide-doubao-form-input:first-child {
|
|
|
+ flex: 0 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-headers .home-guide-doubao-form-input:first-child span {
|
|
|
+ flex: none;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-token,
|
|
|
+.home-guide-doubao-form-token-value {
|
|
|
+ flex: 1 1 0;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.home-guide-doubao-form-token {
|
|
|
+ min-width: 0;
|
|
|
+ margin: 0;
|
|
|
+ padding: 10px 12px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #E5E7EB;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1678FF;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.home-guide-ima-left,
|
肖栋
