diff --git a/eslint.config.js b/eslint.config.js
index 229cb6d886a405c25589b60dee677c8dea30f775..bf9b67a143b439dadc66d596534152881b8d50b2 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -24,6 +24,7 @@ export default [
   {
     rules: {
       '@typescript-eslint/no-explicit-any': 'off',
+      'vue/multi-word-component-names': 'off',
     },
   },
 ];
diff --git a/src/views/api/components/McpDrawer.vue b/src/views/api/components/McpDrawer.vue
index ecc37eade07c8049c15e6c75f5c73f433aac5bb3..83c8f903c1345d01bbfd5f8529517a7b825c9455 100644
--- a/src/views/api/components/McpDrawer.vue
+++ b/src/views/api/components/McpDrawer.vue
@@ -123,7 +123,7 @@ async function onConfirm(formEl: FormInstance | undefined) {
   if (json) form.mcpConfig = json;
   await formEl.validate(async (valid) => {
     if (!valid) return;
-    const [_, res] = await api.createOrUpdateMcpService({
+    const [, res] = await api.createOrUpdateMcpService({
       serviceId: props.serviceId || undefined,
       icon: form.icon,
       name: form.name,
@@ -132,14 +132,16 @@ async function onConfirm(formEl: FormInstance | undefined) {
       mcpType: form.type,
     });
 
-    formEl.resetFields();
-    jsonEditorRef.value.setJsonValue('{\n  \n}');
-    emits('success');
+    if (res) {
+      formEl.resetFields();
+      jsonEditorRef.value.setJsonValue('{\n  \n}');
+      emits('success');
+    }
   });
 }
 
 async function getMcpServiceDetail(serviceId: string) {
-  const [_, res] = await api.getMcpServiceDetail(serviceId);
+  const [, res] = await api.getMcpServiceDetail(serviceId);
   if (res) {
     const { icon, name, description, data, mcpType } = res.result;
     form.icon = icon;
@@ -169,7 +171,7 @@ watch(
       }
       getMcpServiceDetail(props.serviceId);
     } else {
-      formRef.value && formRef.value.resetFields();
+      if (formRef.value) formRef.value.resetFields();
       setMcpConfig(form.type);
     }
   },
@@ -238,7 +240,11 @@ watch(
               class="form-item"
             >
               <el-radio-group v-model="form.type" @change="setMcpConfig">
-                <el-radio v-for="{ label, value } in mcpTypes" :value="value">
+                <el-radio
+                  v-for="{ label, value } in mcpTypes"
+                  :value="value"
+                  :key="value"
+                >
                   {{ label }}
                 </el-radio>
               </el-radio-group>
@@ -264,6 +270,8 @@ watch(
 <style lang="scss" scoped>
 .mcp-drawer {
   :deep(.el-drawer) {
+    top: 48px;
+    height: calc(100vh - 48px);
     .el-drawer__header {
       color: #000;
       font-weight: 700;
@@ -303,7 +311,7 @@ watch(
 
         .editor {
           width: 100%;
-          max-height: 440px;
+          height: 450px;
           flex: 1;
           border: 1px solid rgb(195, 206, 223);
         }
diff --git a/src/views/api/components/McpServiceDetail.vue b/src/views/api/components/McpServiceDetail.vue
index 9a6ede3f1cf582f11e3aeec395f0f6524532df21..17d52aa78c9bbe9703810ab5d8068b94dd7d4644 100644
--- a/src/views/api/components/McpServiceDetail.vue
+++ b/src/views/api/components/McpServiceDetail.vue
@@ -364,6 +364,8 @@ watch(
 }
 .mcp-drawer {
   :deep(.el-drawer) {
+    top: 48px;
+    height: calc(100vh - 48px);
     .el-drawer__header {
       color: #000;
       font-weight: 700;
diff --git a/src/views/app/components/SelectAppTypeDialog.vue b/src/views/app/components/SelectAppTypeDialog.vue
index 50ed824e170c02a6e9d08e71d1366766d0bd7855..9ef66130ae22798f891b6c2c5c6ae150c5a16401 100644
--- a/src/views/app/components/SelectAppTypeDialog.vue
+++ b/src/views/app/components/SelectAppTypeDialog.vue
@@ -6,7 +6,7 @@ const { t } = i18n.global;
 
 type AppType = 'agent' | 'flow';
 
-const props = defineProps<{
+defineProps<{
   visible: boolean;
   title?: string;
 }>();
@@ -72,6 +72,8 @@ const selectedType = ref<AppType>('agent');
 .select-app {
   :deep(.el-dialog) {
     --o-dialog-width: 544px;
+    border-radius: 12px;
+
     .el-dialog__body {
       padding: 16px 24px;
       margin: 0;
diff --git a/src/views/createapp/components/AgentAppConfig.vue b/src/views/createapp/components/AgentAppConfig.vue
index b249e2f4aae973ea6dff449e9a18ca56a503f08d..21b2087ffbb6c81e4d957e76d6c9bb932df41d11 100644
--- a/src/views/createapp/components/AgentAppConfig.vue
+++ b/src/views/createapp/components/AgentAppConfig.vue
@@ -75,6 +75,7 @@ const selectedMcpService = computed<Mcp[]>(() =>
 );
 
 const rules = reactive<FormRules<typeof createAppForm>>({
+  name: [{ required: true, message: t('app.appName_input') }],
   description: [{ required: true, message: t('app.appDescription_input') }],
   model: [{ required: true, message: t('app.modelSelected_input') }],
   dialogRounds: [
@@ -94,6 +95,8 @@ async function queryAgentConfig() {
   const [, res] = await api.querySingleAppData({
     id: route.query?.appId as string,
   });
+  createAppFormRef.value?.clearValidate();
+
   if (res) {
     const { name, description, permission, icon, mcpService, dialogRounds } =
       res.result;
@@ -193,16 +196,20 @@ const createAppFormRef = ref();
 watch(
   () => createAppForm,
   async () => {
+    if (createAppForm.name === '') {
+      return;
+    }
+
     if (createAppFormRef.value && props.handleValidateContent) {
       try {
         const validate = await createAppFormRef.value.validate();
         props.handleValidateContent(validate);
-      } catch (error) {
+      } catch {
         props.handleValidateContent(false);
       }
     }
   },
-  { deep: true, immediate: true },
+  { deep: true },
 );
 
 function onDebugSuccess(status: boolean) {
@@ -272,7 +279,7 @@ onMounted(async () => {
               <el-input
                 v-model="createAppForm.name"
                 :placeholder="t('app.appName_input')"
-                validate-event
+                :validate-event="false"
               ></el-input>
             </el-form-item>
 
diff --git a/src/views/createapp/index.vue b/src/views/createapp/index.vue
index 78dffea54309bbb827e6a032620e11c8aca4ee53..5d99e86f135720690db1ce8cf2dcc879c5a34cc4 100644
--- a/src/views/createapp/index.vue
+++ b/src/views/createapp/index.vue
@@ -63,7 +63,7 @@ const handlePublishApp = async () => {
           }
         });
     });
-  } catch (error) {
+  } catch {
     ElMessage.error(t('app.publishFailed'));
   }
 };
@@ -143,7 +143,7 @@ const saveApp = async (type: 'agent' | 'flow') => {
     } else if (type === 'agent') {
       const formData = agentAppConfigRef.value.createAppForm;
       if (!formData) return;
-      const [_, res] = await api.createOrUpdateApp({
+      const [, res] = await api.createOrUpdateApp({
         appId: route.query?.appId as string,
         appType: type,
         icon: formData.icon,
@@ -164,7 +164,7 @@ const saveApp = async (type: 'agent' | 'flow') => {
       }
     }
     return true;
-  } catch (error) {
+  } catch {
     return false;
   }
 };
@@ -181,7 +181,7 @@ const handleJumperAppCenter = () => {
 
 const agentAppConfigRef = ref();
 function onDebugClick() {
-  if (agentAppConfigRef) {
+  if (agentAppConfigRef.value) {
     agentAppConfigRef.value.openDebugDialog();
   }
 }
@@ -279,7 +279,9 @@ function onDebugSuccess(status: boolean) {
       >
         {{ $t('semantic.save') }}
       </el-button>
-      <el-button :disabled="true">{{ $t('semantic.preview') }}</el-button>
+      <el-button :disabled="appType !== 'agent'" @click="onDebugClick">
+        {{ appType === 'flow' ? $t('semantic.preview') : $t('flow.debug') }}
+      </el-button>
       <el-tooltip
         :disabled="publishValidate"
         :content="$t('semantic.publish_condition')"