kirigaya/openmcp-client
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

组织表单提交造成的页面刷新 | 解决页面恢复的概率性崩溃

Browse Source
This commit is contained in:
锦恢 2025-04-12 01:58:47 +08:00
parent b1515e9ac3
commit f1b3f6fbad
8 changed files with 50 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
renderer/src/components/main-panel/index.vue
View File

@ -39,7 +39,7 @@
<script setup lang="ts">
import { defineComponent } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { addNewTab, tabs, setActiveTab, closeTab } from './panel';
import { addNewTab, tabs, closeTab } from './panel';
defineComponent({ name: 'main-panel' });
@ -51,7 +51,17 @@ function pageAddNewTab() {
// 如果当前不在 debug 路由，则切换到 debug 路由
if (route.name !== 'debug') {
router.push('/debug');
router.replace('/debug');
}
}
function setActiveTab(index: number) {
if (index >= 0 && index < tabs.content.length) {
tabs.activeIndex = index;
// 如果不在 debug 路由，则进入
if (route.name !== 'debug') {
router.replace('/debug');
}
}
}

14
renderer/src/components/main-panel/panel.ts
View File

@ -34,14 +34,7 @@ export const tabs = reactive<{
],
activeIndex: 0,
get activeTab() {
return this.content[this.activeIndex] || {
name: 'blank',
icon: 'icon-blank',
type: 'blank',
component: undefined,
componentIndex: -1,
storage: {},
};
return this.content[this.activeIndex];
}
});
@ -84,11 +77,6 @@ export function addNewTab() {
tabs.activeIndex = tabs.content.length - 1;
}
export function setActiveTab(index: number) {
if (index >= 0 && index < tabs.content.length) {
tabs.activeIndex = index;
}
}
export function closeTab(index: number) {
if (tabs.content.length <= 1) return; // 至少保留一个标签页

9
renderer/src/components/main-panel/prompt/prompt-reader.vue
View File

@ -7,10 +7,14 @@
<el-form-item v-for="param in currentPrompt?.params" :key="param.name"
:label="param.name" :prop="param.name">
<el-input v-if="param.type === 'string'" v-model="formData[param.name]"
:placeholder="param.placeholder || `请输入${param.name}`" />
:placeholder="param.placeholder || `请输入${param.name}`"
@keydown.enter.prevent="handleSubmit"
/>
<el-input-number v-else-if="param.type === 'number'" v-model="formData[param.name]"
:placeholder="param.placeholder || `请输入${param.name}`" />
:placeholder="param.placeholder || `请输入${param.name}`"
@keydown.enter.prevent="handleSubmit"
/>
<el-switch v-else-if="param.type === 'boolean'" v-model="formData[param.name]" />
</el-form-item>
@ -51,6 +55,7 @@ const tab = tabs.content[props.tabId];
const tabStorage = tab.storage as PromptStorage;
const formRef = ref<FormInstance>();
// TODO: 将 formData 装入 tabStorage
const formData = ref<Record<string, any>>({});
const loading = ref(false);
const responseData = ref<PromptsGetResponse>();

8
renderer/src/components/main-panel/resource/resouce-reader.vue
View File

@ -8,11 +8,13 @@
:label="param.name" :prop="param.name">
<!-- 根据不同类型渲染不同输入组件 -->
<el-input v-if="param.type === 'string'" v-model="formData[param.name]"
:placeholder="param.placeholder || `请输入${param.name}`" />
:placeholder="param.placeholder || `请输入${param.name}`"
@keydown.enter.prevent="handleSubmit" />
<el-input-number v-else-if="param.type === 'number'" v-model="formData[param.name]"
:placeholder="param.placeholder || `请输入${param.name}`" />
:placeholder="param.placeholder || `请输入${param.name}`"
@keydown.enter.prevent="handleSubmit" />
<el-switch v-else-if="param.type === 'boolean'" v-model="formData[param.name]" />
</el-form-item>

8
renderer/src/components/main-panel/tool/tool-executor.vue
View File

@ -16,19 +16,21 @@
<el-input
v-if="property.type === 'string'"
v-model="formData[name]"
:placeholder="t('enter') + ' ' + (property.title || name)"
:placeholder="t('enter') + ' ' + (property.title || name)"
@keydown.enter.prevent="handleExecute"
/>
<el-input-number
v-else-if="property.type === 'number' || property.type === 'integer'"
v-model="formData[name]"
controls-position="right"
:placeholder="t('enter') + ' ' + (property.title || name)"
:placeholder="t('enter') + ' ' + (property.title || name)"
@keydown.enter.prevent="handleExecute"
/>
<el-switch
v-else-if="property.type === 'boolean'"
v-model="formData[name]"
v-model="formData[name]"
/>
</el-form-item>
</el-scrollbar>

5
renderer/src/hook/panel.ts
View File

@ -3,7 +3,7 @@ import { llmManager, llms } from "@/views/setting/llm";
import { pinkLog } from "@/views/setting/util";
import I18n from '@/i18n/index';
import { debugModes, tabs } from "@/components/main-panel/panel";
import { markRaw } from "vue";
import { markRaw, ref } from "vue";
interface SaveTabItem {
name: string;
@ -18,6 +18,8 @@ interface SaveTab {
currentIndex: number
}
export const panelLoaded = ref(false);
export function loadPanels() {
const bridge = useMessageBridge();
@ -53,6 +55,7 @@ export function loadPanels() {
tabs.activeIndex = persistTab.currentIndex;
}
panelLoaded.value = true;
}, { once: true });
bridge.postMessage({

13
renderer/src/views/debug/index.vue
View File

@ -1,9 +1,9 @@
<template>
<div style="height: 100%;">
<Welcome v-show="!tabs.activeTab.component"></Welcome>
<Welcome v-show="!haveActiveTab"></Welcome>
<!-- 如果存在激活标签页，则根据标签页进行渲染 -->
<div v-show="tabs.activeTab.component" style="height: 100%;">
<div v-show="haveActiveTab" style="height: 100%;">
<component
v-show="tab === tabs.activeTab"
v-for="(tab, index) of tabs.content"
@ -22,6 +22,15 @@ import Welcome from './welcome.vue';
import { tabs } from '@/components/main-panel/panel';
defineComponent({ name: 'debug' });
const haveActiveTab = computed(() => {
const activeTab = tabs.activeTab;
if (activeTab) {
return true;
}
return false;
});
</script>
<style>

10
service/tabs.json
View File

@ -1,5 +1,5 @@
{
"currentIndex": 1,
"currentIndex": 0,
"tabs": [
{
"name": "工具",
@ -11,12 +11,12 @@
}
},
{
"name": "工具",
"icon": "icon-tool",
"name": "资源",
"icon": "icon-file",
"type": "blank",
"componentIndex": 2,
"componentIndex": 0,
"storage": {
"currentToolName": "add"
"currentResourceName": "greeting"
}
}
]