From f27eb4cf97559898095a7f110eb4b300c4c3888c Mon Sep 17 00:00:00 2001
From: Kirigaya <1193466151@qq.com>
Date: Mon, 14 Jul 2025 23:48:10 +0800
Subject: [PATCH] fin issue49

---
 CHANGELOG.md                                  |  7 ++-
 .../main-panel/tool/tool-logger.vue           | 60 ++++++++++++++-----
 renderer/src/i18n/ar.json                     |  3 +-
 renderer/src/i18n/de.json                     |  3 +-
 renderer/src/i18n/en.json                     |  3 +-
 renderer/src/i18n/fr.json                     |  3 +-
 renderer/src/i18n/ja.json                     |  3 +-
 renderer/src/i18n/ko.json                     |  3 +-
 renderer/src/i18n/ru.json                     |  3 +-
 renderer/src/i18n/zh-cn.json                  |  3 +-
 renderer/src/i18n/zh-tw.json                  |  3 +-
 renderer/src/views/setting/api.ts             | 37 ++++++++----
 renderer/src/views/setting/api.vue            | 43 ++++++++++---
 renderer/src/views/setting/connect-test.vue   | 11 ++++
 14 files changed, 140 insertions(+), 45 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a13d4d4..40558f6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,8 +3,11 @@
 ## [main] 0.1.10
 - 修复 issue #48: 修复错误的引导路径。
 - 完成引导界面的多语言。
-- 修复部分模型的 usage 无法正常显示的问题。
-- 实现 openmcp 工具测试的并行实现和暂停功能。
+- 支持 kimi 的 usage 计数 + 支持 kimi 的 system prompt。
+- 实现 openmcp 工具测试的并行执行和暂停功能。
+- 修正 API 测速中算法，剥离为 tps + 排队时间两部分。
+- 大模型 api 测速目前可以自定义 prompt 了。
+- 实现 issue#49，工具模块，调试希望支持markdown渲染回显。
 
 ## [main] 0.1.9
 - 增加 mook 功能：可以利用随机种子或者AI生成来自动化填充测试 tool 的表单数据
diff --git a/renderer/src/components/main-panel/tool/tool-logger.vue b/renderer/src/components/main-panel/tool/tool-logger.vue
index 2a3e444..528a378 100644
--- a/renderer/src/components/main-panel/tool/tool-logger.vue
+++ b/renderer/src/components/main-panel/tool/tool-logger.vue
@@ -2,10 +2,13 @@
     <div class="tool-logger">
         <span>
             <span>{{ t('response') }}</span>
-            <span style="width: 200px;">
-                <el-switch v-model="showRawJson" inline-prompt active-text="JSON" inactive-text="Text"
-                    style="margin-left: 10px; width: 200px;"
-                    :inactive-action-style="'backgroundColor: var(--sidebar)'" />
+            <span style="width: 200px; display: flex;">
+				<el-segmented v-model="renderMode.current" :options="renderMode.data" size="default"
+					style="margin: 10px; background-color: var(--background); font-size: 12px;">
+					<template #default="scope">
+						{{ scope.item.label }}
+					</template>
+				</el-segmented>
             </span>
         </span>
         <el-scrollbar height="500px">
@@ -20,7 +23,7 @@
 
                 <div v-else>
                     <!-- 展示原本的信息 -->
-                    <template v-if="!showRawJson && tabStorage.lastToolCallResponse">
+                    <template v-if="renderMode.current === 'plaintext'">
                         <div
                             v-for="(c, idx) in tabStorage.lastToolCallResponse!.content"
                             :key="idx"
@@ -30,8 +33,12 @@
                         </div>
                     </template>
 
+                    <template v-else-if="renderMode.current === 'markdown'">
+                        <div class="markdown" v-html="resultMarkdown"></div>
+                    </template>
+
                     <!-- 展示 json -->
-                    <template v-else>
+                    <template v-else-if="renderMode.current === 'json'">
                         <json-render :json="tabStorage.lastToolCallResponse"/>
                     </template>
                 </div>
@@ -42,11 +49,12 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent, defineProps, computed, ref } from 'vue';
+import { defineComponent, defineProps, computed, ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { tabs } from '../panel';
 import type { ToolStorage } from './tools';
 import JsonRender from '@/components/json-render/index.vue';
+import { markdownToHtml } from '../chat/markdown/markdown';
 
 defineComponent({ name: 'tool-logger' });
 const { t } = useI18n();
@@ -61,7 +69,37 @@ const props = defineProps({
 const tab = tabs.content[props.tabId];
 const tabStorage = tab.storage as ToolStorage;
 
-const showRawJson = ref(false);
+const resultMarkdown = computed(() => {
+    const lastToolCallResponse = tabStorage.lastToolCallResponse;
+    if (!lastToolCallResponse) {
+        return '';
+    }
+    if (typeof lastToolCallResponse === 'string') {
+        return markdownToHtml(lastToolCallResponse.toString());
+    }
+    
+    const rawText = lastToolCallResponse.content.map(c => c.text).join('\n');
+    const html = markdownToHtml(rawText);
+    return html;
+})
+
+const renderMode = reactive({
+	current: 'plaintext',
+	data: [
+		{
+			value: 'plaintext',
+			label: 'plaintext'
+		},
+		{
+			value: 'markdown',
+			label: 'markdown',
+		},
+		{
+			value: 'json',
+            label: 'json'
+		}
+	]
+});
 
 </script>
 
@@ -97,12 +135,6 @@ const showRawJson = ref(false);
     min-height: 450px;
     height: fit-content;
     font-family: var(--code-font-family);
-    white-space: pre-wrap;
-    word-break: break-all;
-    user-select: text;
-    cursor: text;
-    font-size: 15px;
-    line-height: 1.5;
     background-color: var(--sidebar);
 }
 
diff --git a/renderer/src/i18n/ar.json b/renderer/src/i18n/ar.json
index 3d24508..ce7d459 100644
--- a/renderer/src/i18n/ar.json
+++ b/renderer/src/i18n/ar.json
@@ -230,5 +230,6 @@
     "guide.16.3": "إذا كنت مستخدمًا للإضافة، فهناك بعض المواد التي أعددناها في الجزء السفلي من اللوحة اليسرى تحت عنوان \"البدء والمساعدة\"، نأمل أن تساعدك في تطوير خادم MCP الخاص بك بشكل أنيق.",
     "guide.16.4": "دعونا نعمل معًا على دمج المزيد والمزيد من APIs و SDKs في النموذج الكبير!",
     "maybe-end": "الفصل الأخير؟",
-    "finish": "النهاية"
+    "finish": "النهاية",
+    "queue-time": "وقت الانتظار"
 }
\ No newline at end of file
diff --git a/renderer/src/i18n/de.json b/renderer/src/i18n/de.json
index 42f0f17..7ae160e 100644
--- a/renderer/src/i18n/de.json
+++ b/renderer/src/i18n/de.json
@@ -230,5 +230,6 @@
     "guide.16.3": "Falls Sie ein Plugin-Benutzer sind, finden Sie unten im linken Panel unter \"Erste Schritte & Hilfe\" einige von uns vorbereitete Materialien, die Ihnen hoffentlich dabei helfen, Ihren MCP-Server elegant zu entwickeln.",
     "guide.16.4": "Lasst uns gemeinsam immer mehr APIs und SDKs in das große Modell integrieren!",
     "maybe-end": "Ende?",
-    "finish": "Ende"
+    "finish": "Ende",
+    "queue-time": "Wartezeit"
 }
\ No newline at end of file
diff --git a/renderer/src/i18n/en.json b/renderer/src/i18n/en.json
index ea38860..398785a 100644
--- a/renderer/src/i18n/en.json
+++ b/renderer/src/i18n/en.json
@@ -230,5 +230,6 @@
     "guide.16.3": "If you are a plugin user, there are some materials we have prepared at the bottom of the left panel under \"Getting Started & Help\", hoping to assist you in elegantly developing your MCP server.",
     "guide.16.4": "Let's work together to integrate more and more APIs and SDKs into the large model!",
     "maybe-end": "Final Chapter?",
-    "finish": "End"
+    "finish": "End",
+    "queue-time": "Waiting time"
 }
\ No newline at end of file
diff --git a/renderer/src/i18n/fr.json b/renderer/src/i18n/fr.json
index 0b53e32..c8b6333 100644
--- a/renderer/src/i18n/fr.json
+++ b/renderer/src/i18n/fr.json
@@ -230,5 +230,6 @@
     "guide.16.3": "Si vous êtes un utilisateur de plugin, vous trouverez quelques documents que nous avons préparés en bas du panneau de gauche sous \"Démarrage & Aide\", dans l'espoir de vous aider à développer élégamment votre serveur MCP.",
     "guide.16.4": "Travaillons ensemble pour intégrer de plus en plus d'APIs et de SDKs dans le grand modèle !",
     "maybe-end": "Chapitre final ?",
-    "finish": "Fin"
+    "finish": "Fin",
+    "queue-time": "Temps d'attente"
 }
\ No newline at end of file
diff --git a/renderer/src/i18n/ja.json b/renderer/src/i18n/ja.json
index 457739d..4e1acf7 100644
--- a/renderer/src/i18n/ja.json
+++ b/renderer/src/i18n/ja.json
@@ -230,5 +230,6 @@
     "guide.16.3": "プラグインユーザーの場合、左パネルの下部にある「はじめに＆ヘルプ」には、MCPサーバーをエレガントに開発するための資料が用意されています。ぜひご活用ください。",
     "guide.16.4": "大規模モデルにどんどんAPIやSDKを統合していきましょう！",
     "maybe-end": "終章？",
-    "finish": "終了"
+    "finish": "終了",
+    "queue-time": "待ち時間"
 }
\ No newline at end of file
diff --git a/renderer/src/i18n/ko.json b/renderer/src/i18n/ko.json
index 8d0454d..36bd14b 100644
--- a/renderer/src/i18n/ko.json
+++ b/renderer/src/i18n/ko.json
@@ -230,5 +230,6 @@
     "guide.16.3": "플러그인 사용자라면, 왼쪽 패널 하단의 '시작하기 및 도움말'에 MCP 서버를 우아하게 개발할 수 있도록 준비한 자료가 있습니다. 도움이 되길 바랍니다.",
     "guide.16.4": "대형 모델에 점점 더 많은 API와 SDK를 통합해 봅시다!",
     "maybe-end": "종장?",
-    "finish": "종료"
+    "finish": "종료",
+    "queue-time": "대기 시간"
 }
\ No newline at end of file
diff --git a/renderer/src/i18n/ru.json b/renderer/src/i18n/ru.json
index f6a8c69..542057e 100644
--- a/renderer/src/i18n/ru.json
+++ b/renderer/src/i18n/ru.json
@@ -230,5 +230,6 @@
     "guide.16.3": "Если вы пользователь плагина, в нижней части левой панели в разделе \"Начало работы и помощь\" есть некоторые материалы, которые мы подготовили, надеясь помочь вам в элегантной разработке вашего сервера MCP.",
     "guide.16.4": "Давайте вместе интегрировать все больше и больше API и SDK в большую модель!",
     "maybe-end": "Заключительная глава?",
-    "finish": "Конец"
+    "finish": "Конец",
+    "queue-time": "Время ожидания"
 }
\ No newline at end of file
diff --git a/renderer/src/i18n/zh-cn.json b/renderer/src/i18n/zh-cn.json
index 74d1c40..a297fa6 100644
--- a/renderer/src/i18n/zh-cn.json
+++ b/renderer/src/i18n/zh-cn.json
@@ -230,5 +230,6 @@
     "guide.16.3": "如果是插件用户，左侧面板的最下面「入门与帮助」有一些我们准备好的资料，希望能帮到阁下优雅地开发你的 mcp 服务器。",
     "guide.16.4": "让我们一起把越来越多的 api 和 sdk 接入 大模型吧！",
     "maybe-end": "终章？",
-    "finish": "结束"
+    "finish": "结束",
+    "queue-time": "排队时间"
 }
\ No newline at end of file
diff --git a/renderer/src/i18n/zh-tw.json b/renderer/src/i18n/zh-tw.json
index 89f74ed..3491a10 100644
--- a/renderer/src/i18n/zh-tw.json
+++ b/renderer/src/i18n/zh-tw.json
@@ -230,5 +230,6 @@
     "guide.16.3": "如果是插件用戶，左側面板的最下面「入門與幫助」有一些我們準備好的資料，希望能幫到閣下優雅地開發你的 MCP 伺服器。",
     "guide.16.4": "讓我們一起把越來越多的API和SDK接入大模型吧！",
     "maybe-end": "終章？",
-    "finish": "結束"
+    "finish": "結束",
+    "queue-time": "排隊時間"
 }
\ No newline at end of file
diff --git a/renderer/src/views/setting/api.ts b/renderer/src/views/setting/api.ts
index d821192..e26e3bb 100644
--- a/renderer/src/views/setting/api.ts
+++ b/renderer/src/views/setting/api.ts
@@ -5,26 +5,31 @@ import { reactive, ref } from 'vue';
 import { makeUsageStatistic } from '@/components/main-panel/chat/core/usage';
 
 export const llmSettingRef = ref<any>(null);
+type NumberLike = string | number | undefined;
+
+export const testPrompt = ref('you\'re a smart assistant, please write an article of at least 100 words to introduce mcp');
 
 export const simpleTestResult = reactive<{
     done: boolean,
     start: boolean,
     error: any,
-    tps: string | number | undefined
+    tps: NumberLike,
+    outputTps: NumberLike
+    queueTime: NumberLike
 }>({
     done: false,
     start: false,
     error: '',
-    tps: undefined
+    tps: undefined,
+    outputTps: undefined,
+    queueTime: undefined,
 });
 
 export async function makeSimpleTalk() {
     simpleTestResult.done = false;
     simpleTestResult.start = true;
     simpleTestResult.tps = undefined;
-
-    // 使用最简单的 hello 来测试
-    const testMessage = 'hello';
+    simpleTestResult.queueTime = undefined;
 
     const loop = new TaskLoop();
 
@@ -44,6 +49,14 @@ export async function makeSimpleTalk() {
 
     loop.setMaxEpochs(1);
 
+    let receiveTime = -1;
+
+    loop.registerOnChunk(() => {
+        if (receiveTime <= 0) {
+            receiveTime = Date.now();
+        }
+    });
+
     loop.registerOnDone(() => {        
         simpleTestResult.error = '';
         simpleTestResult.done = true;
@@ -59,18 +72,20 @@ export async function makeSimpleTalk() {
     });
 
     const startTime = Date.now();
-    await loop.start(chatStorage, testMessage);
+    await loop.start(chatStorage, testPrompt.value);
+    const endTime = Date.now();
 
-    const costTime = (Date.now() - startTime!) / 1000;
+    const costTime = (endTime - receiveTime) / 1000;
+    simpleTestResult.queueTime = (receiveTime - startTime) / 1000;
+    
     const message = chatStorage.messages[chatStorage.messages.length - 1];
-    console.log(chatStorage.messages);
-    console.log(message.extraInfo);
 
     if (message?.extraInfo) {
         const usage = message.extraInfo.usage;
         if (usage?.prompt_tokens && usage.completion_tokens) {
-            const total = usage?.prompt_tokens + usage?.completion_tokens;
-            simpleTestResult.tps = (total / costTime).toFixed(2);
+            // const total = usage?.prompt_tokens + usage?.completion_tokens;
+            const total = usage?.completion_tokens;
+            simpleTestResult.tps = (total / costTime).toFixed(2);            
         }
     }
 }
\ No newline at end of file
diff --git a/renderer/src/views/setting/api.vue b/renderer/src/views/setting/api.vue
index 967054c..139aec1 100644
--- a/renderer/src/views/setting/api.vue
+++ b/renderer/src/views/setting/api.vue
@@ -66,15 +66,39 @@
 				{{ t('update-model-list') }}
 			</el-button>
 
-			<el-button
-				type="primary"
-				id="test-llm-button"
-				@click="makeSimpleTalk"
-				:loading="simpleTestResult.start"
+			<!-- 新增：测试 prompt 下拉输入 -->
+			<el-popover
+				placement="top"
+				width="400"
+				trigger="click"
+				v-model:visible="testPromptPopoverVisible"
 			>
-				<span v-show="!simpleTestResult.start" class="iconfont icon-test"></span>
-				{{ t('test') }}
-			</el-button>
+				<template #reference>
+                    <el-button
+                        type="primary"
+                        id="test-llm-button"
+                        :loading="simpleTestResult.start"
+                    >
+                        <span v-show="!simpleTestResult.start" class="iconfont icon-test"></span>
+                        {{ t('test') }}
+                    </el-button>
+				</template>
+				<div style="margin-bottom: 8px; font-weight: bold;">
+                        {{ t('prompts') }}
+				</div>
+				<el-input
+					type="textarea"
+					v-model="testPrompt"
+					:rows="3"
+					:placeholder="t('test-prompt-placeholder') || '输入测试内容...'"
+					style="margin-bottom: 8px;"
+					clearable
+				/>
+				<div style="text-align: right;">
+					<el-button size="small" @click="testPromptPopoverVisible = false">{{ t('cancel') }}</el-button>
+					<el-button size="small" type="primary" @click="testPromptPopoverVisible = false; makeSimpleTalk()">{{ t('confirm') }}</el-button>
+				</div>
+			</el-popover>
 
 			<el-button
 				type="primary"
@@ -130,7 +154,7 @@ import { pinkLog } from './util';
 
 import ConnectInterfaceOpenai from './connect-interface-openai.vue';
 import ConnectTest from './connect-test.vue';
-import { llmSettingRef, makeSimpleTalk, simpleTestResult } from './api';
+import { llmSettingRef, makeSimpleTalk, simpleTestResult, testPrompt } from './api';
 import { useMessageBridge } from '@/api/message-bridge';
 import { mcpSetting } from '@/hook/mcp';
 
@@ -148,6 +172,7 @@ function saveLlmSetting() {
 
 const currentDialogMode = ref('');
 const dialogVisible = ref(false);
+const testPromptPopoverVisible = ref(false);
 
 function addNewServer() {
 	newProviderForm.value = {
diff --git a/renderer/src/views/setting/connect-test.vue b/renderer/src/views/setting/connect-test.vue
index ba1f4c0..381feb4 100644
--- a/renderer/src/views/setting/connect-test.vue
+++ b/renderer/src/views/setting/connect-test.vue
@@ -7,6 +7,9 @@
             <div class="result-item" v-if="simpleTestResult.done">
                 <span class="iconfont icon-dui"></span>
                 <span>{{ " okey dockey :D" }}</span>
+                    <span v-if="simpleTestResult.queueTime" class="queue-time">
+                        {{ t('queue-time') }}: {{ simpleTestResult.queueTime }} s
+                    </span>
                 <span v-if="simpleTestResult.tps" class="tps">{{ simpleTestResult.tps }} token/s</span>
                 <span v-else class="tps">{{ t("server-not-support-statistic") }}</span>
             </div>
@@ -82,4 +85,12 @@ console.log(llms[llmManager.currentModelIndex]);
     margin-top: 15px;
     margin-bottom: 10px;
 }
+
+.queue-time {
+    margin-left: 8px;
+    color: var(--foreground);
+    background-color: var(--el-fill-color-light);
+    padding: 2px 6px;
+    border-radius: 4px;
+}
 </style>
\ No newline at end of file