优化 openmcp 图标

2025-04-21 21:32:27 +08:00 · 2025-04-21 21:32:27 +08:00 · 299bb30df7
commit 299bb30df7
parent 8105bfde85
19 changed files with 145 additions and 51 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/icons/dark/protocol.svg
+++ b/icons/dark/protocol.svg
@ -0,0 +1,15 @@
+<svg t="1745239051577" class="icon" viewBox="0 0 1024 1024" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" p-id="1864" width="200" height="200">
+    <path
+        d="M504.45208357 26.71824755c-263.34919312 0-476.83711908 213.48792596-476.83711909 476.83711908s213.48792596 476.83711908 476.83711909 476.8371191 476.83711908-213.48792596 476.83711779-476.8371191S767.8012767 26.71824755 504.45208357 26.71824755zM94.36580322 676.77916517Q59.40410586 594.12104017 59.40410586 503.55536663q0-90.56567353 34.96169736-173.22379853 33.77755215-79.86068087 95.38967588-141.47280464 61.61212375-61.61212375 141.47280464-95.38967717Q413.88640875 58.5073889 504.45208357 58.5073889q90.56567353 0 173.22379854 34.96169739 79.86068087 33.77755215 141.47280463 95.38967717 61.61212375 61.61212375 95.3896759 141.47280464Q949.50006001 412.98969311 949.50006001 503.55536663q0 90.56567353-34.96169737 173.22221015-33.77755215 79.86227058-95.3896759 141.47439303-61.61212375 61.61212375-141.47280463 95.38967717Q595.0177571 948.60334436 504.45208357 948.60334436q-90.56567353 0-173.22221013-34.96169738-79.86227058-33.77755215-141.47439434-95.38967717-61.61212375-61.61212375-95.38967588-141.47280464z"
+        fill="#fefefe" p-id="1865"></path>
+    <path
+        d="M313.71723542 385.14081556c0-151.42757481 122.75376958-274.18134308 274.18134309-274.18134308 151.42598512 0 274.18134308 122.75376958 274.18134309 274.18134308 0 151.42598512-122.75535797 274.18134308-274.18134309 274.18134308-151.42757481 0-274.18134308-122.75535797-274.18134309-274.18134308z"
+        fill="#fefefe" p-id="1866"></path>
+    <path
+        d="M504.45208357 700.64804177c0-87.78253404 71.16317146-158.94570679 158.94570551-158.94570551s158.94570679 71.16317146 158.94570678 158.94570551-71.16317146 158.94570679-158.94570678 158.94570679-158.94570679-71.16317146-158.94570551-158.94570679zM103.90890375 542.49706496c0-48.72003846 39.49482864-88.21486711 88.21486711-88.21486711s88.21486711 39.49482864 88.21486581 88.21486711-39.49482864 88.21486711-88.21486581 88.21486711-88.21486711-39.49482864-88.21486711-88.21486711z"
+        fill="#fefefe" p-id="1867"></path>
+    <path
+        d="M625.25081944 323.94671893c0-50.0361088 40.56294439-90.59905319 90.59905319-90.59905319s90.59905319 40.56294439 90.5990519 90.59905319-40.56294439 90.59905319-90.5990519 90.5990519-90.59905319-40.56294439-90.59905319-90.5990519z"
+        fill="#fefefe" p-id="1868"></path>
+</svg>
--- a/icons/light/protocol.svg
+++ b/icons/light/protocol.svg
@ -0,0 +1,15 @@
+<svg t="1745239051577" class="icon" viewBox="0 0 1024 1024" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" p-id="1864" width="200" height="200">
+    <path
+        d="M504.45208357 26.71824755c-263.34919312 0-476.83711908 213.48792596-476.83711909 476.83711908s213.48792596 476.83711908 476.83711909 476.8371191 476.83711908-213.48792596 476.83711779-476.8371191S767.8012767 26.71824755 504.45208357 26.71824755zM94.36580322 676.77916517Q59.40410586 594.12104017 59.40410586 503.55536663q0-90.56567353 34.96169736-173.22379853 33.77755215-79.86068087 95.38967588-141.47280464 61.61212375-61.61212375 141.47280464-95.38967717Q413.88640875 58.5073889 504.45208357 58.5073889q90.56567353 0 173.22379854 34.96169739 79.86068087 33.77755215 141.47280463 95.38967717 61.61212375 61.61212375 95.3896759 141.47280464Q949.50006001 412.98969311 949.50006001 503.55536663q0 90.56567353-34.96169737 173.22221015-33.77755215 79.86227058-95.3896759 141.47439303-61.61212375 61.61212375-141.47280463 95.38967717Q595.0177571 948.60334436 504.45208357 948.60334436q-90.56567353 0-173.22221013-34.96169738-79.86227058-33.77755215-141.47439434-95.38967717-61.61212375-61.61212375-95.38967588-141.47280464z"
+        fill="#1e1e1e" p-id="1865"></path>
+    <path
+        d="M313.71723542 385.14081556c0-151.42757481 122.75376958-274.18134308 274.18134309-274.18134308 151.42598512 0 274.18134308 122.75376958 274.18134309 274.18134308 0 151.42598512-122.75535797 274.18134308-274.18134309 274.18134308-151.42757481 0-274.18134308-122.75535797-274.18134309-274.18134308z"
+        fill="#1e1e1e" p-id="1866"></path>
+    <path
+        d="M504.45208357 700.64804177c0-87.78253404 71.16317146-158.94570679 158.94570551-158.94570551s158.94570679 71.16317146 158.94570678 158.94570551-71.16317146 158.94570679-158.94570678 158.94570679-158.94570679-71.16317146-158.94570551-158.94570679zM103.90890375 542.49706496c0-48.72003846 39.49482864-88.21486711 88.21486711-88.21486711s88.21486711 39.49482864 88.21486581 88.21486711-39.49482864 88.21486711-88.21486581 88.21486711-88.21486711-39.49482864-88.21486711-88.21486711z"
+        fill="#1e1e1e" p-id="1867"></path>
+    <path
+        d="M625.25081944 323.94671893c0-50.0361088 40.56294439-90.59905319 90.59905319-90.59905319s90.59905319 40.56294439 90.5990519 90.59905319-40.56294439 90.59905319-90.5990519 90.5990519-90.59905319-40.56294439-90.59905319-90.5990519z"
+        fill="#1e1e1e" p-id="1868"></path>
+</svg>
--- a/icons/protocol.svg
+++ b/icons/protocol.svg
@ -1,22 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg viewBox="0 0 824 834" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <path id="path_1" d="M300 0C465.708 0 600 134.292 600 300L600 300C600 465.708 465.708 600 300 600L300 600C134.292 600 0 465.708 0 300L0 300C0 134.292 134.292 0 300 0Z" />
-    <linearGradient id="gradient_2" gradientUnits="userSpaceOnUse" x1="300" y1="0" x2="300" y2="600">
-      <stop offset="0" stop-color="#A1A7F6" />
-      <stop offset="1" stop-color="#FFFFFF" stop-opacity="0.2" />
-    </linearGradient>
-  </defs>
-  <g>
-    <g transform="translate(186 116)">
-      <use p4:href="#path_1" fill="#5A00FF" xmlns:p4="http://www.w3.org/1999/xlink" />
-      <use p4:href="#path_1" fill="url(#gradient_2)" xmlns:p4="http://www.w3.org/1999/xlink" />
-    </g>
-
-    <path d="M300 0C465.708 0 600 134.292 600 300L600 300C600 465.708 465.708 600 300 600L300 600C134.292 600 0 465.708 0 300L0 300C0 134.292 134.292 0 300 0Z" />
-    <path d="M0 110.5C0 49.4725 49.4725 0 110.5 0C171.527 0 221 49.4725 221 110.5C221 171.527 171.527 221 110.5 221C49.4725 221 0 171.527 0 110.5Z" fill="#FFFFFF" fill-rule="evenodd" fill-opacity="0.431" transform="translate(445 458)" />
-    <path d="M0 55.5C0 24.8482 24.8482 0 55.5 0C86.1518 0 111 24.8482 111 55.5C111 86.1518 86.1518 111 55.5 111C24.8482 111 0 86.1518 0 55.5Z" fill="#FFFFFF" fill-rule="evenodd" fill-opacity="0.431" transform="translate(199 386)" />
-    <path d="M0 182.5C0 81.708 81.708 0 182.5 0C283.292 0 365 81.708 365 182.5C365 283.292 283.292 365 182.5 365C81.708 365 0 283.292 0 182.5Z" fill="#FFFFFF" fill-rule="evenodd" fill-opacity="0.424" transform="translate(339 156)" />
-    <path d="M0 57C0 25.5198 25.5198 0 57 0C88.4802 0 114 25.5198 114 57C114 88.4802 88.4802 114 57 114C25.5198 114 0 88.4802 0 57Z" fill="#FFFFFF" fill-rule="evenodd" fill-opacity="0.431" transform="translate(521 188)" />
-  </g>
-</svg>
+<svg t="1745239051577" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1864" width="200" height="200"><path d="M504.45208357 26.71824755c-263.34919312 0-476.83711908 213.48792596-476.83711909 476.83711908s213.48792596 476.83711908 476.83711909 476.8371191 476.83711908-213.48792596 476.83711779-476.8371191S767.8012767 26.71824755 504.45208357 26.71824755zM94.36580322 676.77916517Q59.40410586 594.12104017 59.40410586 503.55536663q0-90.56567353 34.96169736-173.22379853 33.77755215-79.86068087 95.38967588-141.47280464 61.61212375-61.61212375 141.47280464-95.38967717Q413.88640875 58.5073889 504.45208357 58.5073889q90.56567353 0 173.22379854 34.96169739 79.86068087 33.77755215 141.47280463 95.38967717 61.61212375 61.61212375 95.3896759 141.47280464Q949.50006001 412.98969311 949.50006001 503.55536663q0 90.56567353-34.96169737 173.22221015-33.77755215 79.86227058-95.3896759 141.47439303-61.61212375 61.61212375-141.47280463 95.38967717Q595.0177571 948.60334436 504.45208357 948.60334436q-90.56567353 0-173.22221013-34.96169738-79.86227058-33.77755215-141.47439434-95.38967717-61.61212375-61.61212375-95.38967588-141.47280464z" fill="#13227a" p-id="1865"></path><path d="M313.71723542 385.14081556c0-151.42757481 122.75376958-274.18134308 274.18134309-274.18134308 151.42598512 0 274.18134308 122.75376958 274.18134309 274.18134308 0 151.42598512-122.75535797 274.18134308-274.18134309 274.18134308-151.42757481 0-274.18134308-122.75535797-274.18134309-274.18134308z" fill="#13227a" p-id="1866"></path><path d="M504.45208357 700.64804177c0-87.78253404 71.16317146-158.94570679 158.94570551-158.94570551s158.94570679 71.16317146 158.94570678 158.94570551-71.16317146 158.94570679-158.94570678 158.94570679-158.94570679-71.16317146-158.94570551-158.94570679zM103.90890375 542.49706496c0-48.72003846 39.49482864-88.21486711 88.21486711-88.21486711s88.21486711 39.49482864 88.21486581 88.21486711-39.49482864 88.21486711-88.21486581 88.21486711-88.21486711-39.49482864-88.21486711-88.21486711z" fill="#13227a" p-id="1867"></path><path d="M625.25081944 323.94671893c0-50.0361088 40.56294439-90.59905319 90.59905319-90.59905319s90.59905319 40.56294439 90.5990519 90.59905319-40.56294439 90.59905319-90.5990519 90.5990519-90.59905319-40.56294439-90.59905319-90.5990519z" fill="#13227a" p-id="1868"></path></svg>
--- a/package.json
+++ b/package.json
@ -28,8 +28,8 @@
                "title": "展示 OpenMCP",
                "category": "openmcp",
                "icon": {
-                    "light": "./icons/protocol.svg",
-                    "dark": "./icons/protocol.svg"
+                    "light": "./icons/light/protocol.svg",
+                    "dark": "./icons/dark/protocol.svg"
                }
            }
        ],
--- a/renderer/public/iconfont.css
+++ b/renderer/public/iconfont.css
@ -1,8 +1,8 @@
@font-face {
  font-family: "iconfont"; /* Project id 4870215 */
-  src: url('iconfont.woff2?t=1745222758998') format('woff2'),
-       url('iconfont.woff?t=1745222758998') format('woff'),
-       url('iconfont.ttf?t=1745222758998') format('truetype');
+  src: url('iconfont.woff2?t=1745241183941') format('woff2'),
+       url('iconfont.woff?t=1745241183941') format('woff'),
+       url('iconfont.ttf?t=1745241183941') format('truetype');
 }

 .iconfont {
@ -13,6 +13,14 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.icon-prompt:before {
+  content: "\eb50";
+}
+
+.icon-empty:before {
+  content: "\e698";
+}
+
 .icon-test:before {
  content: "\e8ad";
 }
--- a/renderer/public/iconfont.woff2
+++ b/renderer/public/iconfont.woff2
--- a/renderer/src/components/main-panel/chat/index.vue
+++ b/renderer/src/components/main-panel/chat/index.vue
@ -75,8 +75,10 @@
                                    </div>
                                    <span v-else>
                                        <div v-for="(item, index) in JSON.parse(message.toolResult)" :key="index">
-                                            <div v-if="item.type === 'text'" class="tool-text">{{ item.text }}</div>
-                                            <div v-else class="tool-other">{{ JSON.stringify(item) }}</div>
+                                            <el-scrollbar width="100%">
+                                                <div v-if="item.type === 'text'" class="tool-text">{{ item.text }}</div>
+                                                <div v-else class="tool-other">{{ JSON.stringify(item) }}</div>
+                                            </el-scrollbar>
                                        </div>
                                    </span>
                                </div>
@ -107,8 +109,17 @@
                </div>
            </div>
        </el-scrollbar>
-        <div v-else>
-            
+        <div v-else class="chat-openmcp-icon">
+            <div>
+                <!-- <span class="iconfont icon-openmcp"></span> -->
+                <span>{{ t('press-and-run') }}
+
+                    <span style="padding: 5px 15px; border-radius: .5em; background-color: var(--background);">
+                        <span class="iconfont icon-send"></span>
+                    </span>
+
+                </span>
+            </div>
        </div>

        <el-footer class="chat-footer" ref="footerRef">
@ -398,6 +409,30 @@ const formatToolArguments = (args: string) => {
    flex-direction: column;
 }

+.chat-openmcp-icon {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    opacity: 0.75;
+    padding-top: 70px;
+}
+
+.chat-openmcp-icon > div {
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    font-size: 28px;
+}
+
+.chat-openmcp-icon > div > span {
+    margin-bottom: 23px;
+}
+
+.chat-openmcp-icon .iconfont {
+    font-size: 22px;
+}
+
 .message-list {
    max-width: 800px;
    margin: 0 auto;
--- a/renderer/src/components/main-panel/chat/setting.vue
+++ b/renderer/src/components/main-panel/chat/setting.vue
@ -11,15 +11,20 @@
 		<el-tooltip :content="t('system-prompt')" placement="top">
 			<div class="setting-button" :class="{ 'active': hasSystemPrompt }" size="small"
 				@click="showSystemPromptDialog = true">
-				<span class="iconfont icon-robot"></span>
+				<span class="iconfont icon-prompt"></span>
 			</div>
 		</el-tooltip>

 		<el-tooltip :content="t('tool-use')" placement="top">
-			<div class="setting-button" :class="{ 'active': toolActive }" size="small"
-				@click="toggleTools">
-				<span class="iconfont icon-tool"></span>
-			</div>
+			<div class="setting-button" :class="{ 'active': availableToolsNum > 0 }" size="small"
+			@click="toggleTools">
+			<span class="iconfont icon-tool badge-outer" v-if="availableToolsNum > 0">
+				<span class="badge-inner">
+					{{ availableToolsNum }}
+				</span>
+			</span>
+		</div>
+
 		</el-tooltip>

 		<el-tooltip :content="t('websearch')" placement="top">
@ -195,9 +200,8 @@ const hasSystemPrompt = computed(() => {

 const showToolsDialog = ref(false);

-const toolActive = computed(() => {
-	const availableTools = tabStorage.settings.enableTools.filter(tool => tool.enabled);
-	return availableTools.length > 0;
+const availableToolsNum = computed(() => {
+	return tabStorage.settings.enableTools.filter(tool => tool.enabled).length;
 });

 // 修改 toggleTools 方法
@ -415,4 +419,20 @@ const disableAllTools = () => {
 	font-size: 12px;
 	color: var(--el-text-color-primary);
 }
+
+.badge-outer {
+	position: relative;
+}
+
+.badge-inner {
+	position: absolute;
+	color: var(--foreground);
+	background-color: var(--main-color);
+	border-radius: 50%;
+	padding: 2px 6px;
+	font-size: 10px;
+	top: -16px;
+	right: -18px;
+	box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
+}
 </style>
--- a/renderer/src/components/sidebar/mcp-title.vue
+++ b/renderer/src/components/sidebar/mcp-title.vue
@ -1,7 +1,9 @@
 <template>
 	<div class="mcp-title">
-		<div class="openmcp-logo" style="width: 48px; height: 48px; margin-top: 10px; margin-bottom: 15px; margin-right: 10px;"></div>
-		<!-- <div>OpenMCP</div> -->
+		<div class="simple-logo">
+			<span class="iconfont icon-openmcp"></span>
+			<span style="font-size: 12px;">openmcp</span>
+		</div>
 	</div>
 </template>

@ -15,9 +17,20 @@ defineComponent({ name: 'mcp-title' });
 .mcp-title {
 	display: flex;
 	align-items: center;
+	padding: 5px 10px;
 }

-.mcp-title > div {
+.mcp-title>div {
 	font-size: 24px;
 }
+
+.simple-logo {
+	height: 73px;
+	display: flex;
+	flex-direction: column;
+}
+
+.simple-logo .iconfont {
+	font-size: 48px;
+}
 </style>
--- a/renderer/src/i18n/ar.json
+++ b/renderer/src/i18n/ar.json
@ -142,5 +142,6 @@
    "moderate": "توازن",
    "creative": "إبداع",
    "single-dialog": "محادثة من جولة واحدة",
-    "multi-dialog": "محادثة متعددة الجولات"
+    "multi-dialog": "محادثة متعددة الجولات",
+    "press-and-run": "اكتب سؤالاً لبدء الاختبار"
 }
--- a/renderer/src/i18n/de.json
+++ b/renderer/src/i18n/de.json
@ -142,5 +142,6 @@
    "moderate": "Gleichgewicht",
    "creative": "Kreativität",
    "single-dialog": "Einzelrunden-Dialog",
-    "multi-dialog": "Mehrrundengespräch"
+    "multi-dialog": "Mehrrundengespräch",
+    "press-and-run": "Geben Sie eine Frage ein, um den Test zu starten"
 }
--- a/renderer/src/i18n/en.json
+++ b/renderer/src/i18n/en.json
@ -142,5 +142,6 @@
    "moderate": "Balance",
    "creative": "Creativity",
    "single-dialog": "Single-round dialogue",
-    "multi-dialog": "Multi-turn conversation"
+    "multi-dialog": "Multi-turn conversation",
+    "press-and-run": "Type a question to start the test"
 }
--- a/renderer/src/i18n/fr.json
+++ b/renderer/src/i18n/fr.json
@ -142,5 +142,6 @@
    "moderate": "Équilibre",
    "creative": "Créativité",
    "single-dialog": "Dialogue en un tour",
-    "multi-dialog": "Conversation multi-tours"
+    "multi-dialog": "Conversation multi-tours",
+    "press-and-run": "Tapez une question pour commencer le test"
 }
--- a/renderer/src/i18n/ja.json
+++ b/renderer/src/i18n/ja.json
@ -142,5 +142,6 @@
    "moderate": "バランス",
    "creative": "創造性",
    "single-dialog": "単一ラウンドの対話",
-    "multi-dialog": "マルチターン会話"
+    "multi-dialog": "マルチターン会話",
+    "press-and-run": "テストを開始するには質問を入力してください"
 }
--- a/renderer/src/i18n/ko.json
+++ b/renderer/src/i18n/ko.json
@ -142,5 +142,6 @@
    "moderate": "균형",
    "creative": "창의성",
    "single-dialog": "단일 라운드 대화",
-    "multi-dialog": "다중 턴 대화"
+    "multi-dialog": "다중 턴 대화",
+    "press-and-run": "테스트를 시작하려면 질문을 입력하세요"
 }
--- a/renderer/src/i18n/ru.json
+++ b/renderer/src/i18n/ru.json
@ -142,5 +142,6 @@
    "moderate": "Баланс",
    "creative": "Творчество",
    "single-dialog": "Однораундовый диалог",
-    "multi-dialog": "Многораундовый разговор"
+    "multi-dialog": "Многораундовый разговор",
+    "press-and-run": "Введите вопрос, чтобы начать тест"
 }
--- a/renderer/src/i18n/zh-cn.json
+++ b/renderer/src/i18n/zh-cn.json
@ -142,5 +142,6 @@
    "moderate": "平衡",
    "creative": "创意",
    "single-dialog": "单轮对话",
-    "multi-dialog": "多轮对话"
+    "multi-dialog": "多轮对话",
+    "press-and-run": "键入问题以开始测试"
 }
--- a/renderer/src/i18n/zh-tw.json
+++ b/renderer/src/i18n/zh-tw.json
@ -142,5 +142,6 @@
    "moderate": "平衡",
    "creative": "創意",
    "single-dialog": "單輪對話",
-    "multi-dialog": "多輪對話"
+    "multi-dialog": "多輪對話",
+    "press-and-run": "輸入問題以開始測試"
 }