fix(web): height calculate

web/src/views/ApplicationConfig/Agent.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:29:21 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-26 12:13:33
+ * @Last Modified time: 2026-03-27 11:39:59
  */
 import { useEffect, useRef, useState, forwardRef, useImperativeHandle, useMemo } from 'react';
 import { useTranslation } from 'react-i18next'
@@ -393,10 +393,10 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
   return (
     <>
       {loading && <Spin fullscreen></Spin>}
-      <Row className="rb:h-[calc(100vh-88px)]" gutter={12}>
-        <Col span={12} className="rb:h-full rb:overflow-y-auto">
+      <Row className="rb:h-full!" gutter={12}>
+        <Col span={12} className="rb:h-full!">
           <Form form={form}>
-            <Flex gap={16} vertical>
+            <Flex gap={12} vertical>
               <Flex align="center" justify="space-between" className="rb:p-3! rb:bg-white rb:rounded-xl">
                 <Button type="primary" ghost onClick={handleModelConfig} className="rb:group">
                   {modelLogo
@@ -417,89 +417,92 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
                   </Button>
                 </Space>
               </Flex>
-              <Form.Item name="default_model_config_id" hidden noStyle></Form.Item>
-              <Form.Item name="capability" hidden noStyle></Form.Item>
-              <Form.Item name="model_parameters" hidden noStyle></Form.Item>
-              <Form.Item name="features" hidden noStyle></Form.Item>
-              <Card
-                title={t('application.promptConfiguration')}
-                extra={
-                  <Space
-                    size={1}
-                    className="rb:px-2 rb:h-5.5 rb:rounded-md rb:cursor-pointer rb:border rb:border-[rgba(21,94,239,0.3)] rb:text-[#155EEF]"
-                    onClick={handlePrompt}
-                  >
-                    <div className="rb:size-5 rb:bg-cover rb:bg-[url('@/assets/images/application/aiPrompt.png')]"></div>
-                    <span className="rb:font-[PingFangSC, PingFang_SC]!">{t('application.aiPrompt')}</span>
-                  </Space>
-                }
-              >
-                <div className="rb:leading-4.5 rb:text-[12px] rb:mb-2">
-                  <span className="rb:font-medium">{t('application.configuration')}</span>
-                  <span className="rb:font-regular rb:text-[#5B6167]"> ({t('application.configurationDesc')})</span>
-                </div>
 
-                <Form.Item name="system_prompt" className="rb:mb-0!">
-                  <Input.TextArea
-                    placeholder={t('application.promptPlaceholder')}
-                    styles={{
-                      textarea: {
-                        minHeight: '200px',
-                        borderRadius: '8px',
-                        padding: '12px'
-                      },
-                    }}
-                  />
-                </Form.Item>
-              </Card>
+              <Flex gap={12} vertical className="rb:h-[calc(100vh-156px)]! rb:overflow-y-auto!">
+                <Form.Item name="default_model_config_id" hidden noStyle></Form.Item>
+                <Form.Item name="capability" hidden noStyle></Form.Item>
+                <Form.Item name="model_parameters" hidden noStyle></Form.Item>
+                <Form.Item name="features" hidden noStyle></Form.Item>
+                <Card
+                  title={t('application.promptConfiguration')}
+                  extra={
+                    <Space
+                      size={1}
+                      className="rb:px-2 rb:h-5.5 rb:rounded-md rb:cursor-pointer rb:border rb:border-[rgba(21,94,239,0.3)] rb:text-[#155EEF]"
+                      onClick={handlePrompt}
+                    >
+                      <div className="rb:size-5 rb:bg-cover rb:bg-[url('@/assets/images/application/aiPrompt.png')]"></div>
+                      <span className="rb:font-[PingFangSC, PingFang_SC]!">{t('application.aiPrompt')}</span>
+                    </Space>
+                  }
+                >
+                  <div className="rb:leading-4.5 rb:text-[12px] rb:mb-2">
+                    <span className="rb:font-medium">{t('application.configuration')}</span>
+                    <span className="rb:font-regular rb:text-[#5B6167]"> ({t('application.configurationDesc')})</span>
+                  </div>
+
+                  <Form.Item name="system_prompt" className="rb:mb-0!">
+                    <Input.TextArea
+                      placeholder={t('application.promptPlaceholder')}
+                      styles={{
+                        textarea: {
+                          minHeight: '200px',
+                          borderRadius: '8px',
+                          padding: '12px'
+                        },
+                      }}
+                    />
+                  </Form.Item>
+                </Card>
 
                 <Form.Item name="knowledge_retrieval" noStyle>
                   <Knowledge />
                 </Form.Item>
 
-                {/* Memory Configuration */}
-              <Card title={t('application.memoryConfiguration')}>
-                <Flex gap={16} vertical className="rb:bg-[#FAFAFA] rb:rounded-xl rb:p-3!">
-                  <SwitchFormItem
-                    title={t('application.dialogueHistoricalMemory')}
-                    name={['memory', 'enabled']}
-                    desc={t('application.dialogueHistoricalMemoryDesc')}
-                  />
-                  <Form.Item
-                    name={['memory', 'memory_config_id']}
-                    label={t('application.selectMemoryContent')}
-                    extra={<DescWrapper desc={t('application.selectMemoryContentDesc')} className="rb:mt-1" />}
-                    layout="vertical"
-                    className="rb:mb-0!"
-                  >
-                    <CustomSelect
-                      placeholder={t('common.pleaseSelect')}
-                      url={memoryConfigListUrl}
-                      hasAll={false}
-                      valueKey='config_id'
-                      labelKey="config_name"
-                      disabled={!values?.memory?.enabled}
+                  {/* Memory Configuration */}
+                <Card title={t('application.memoryConfiguration')}>
+                  <Flex gap={16} vertical className="rb:bg-[#FAFAFA] rb:rounded-xl rb:p-3!">
+                    <SwitchFormItem
+                      title={t('application.dialogueHistoricalMemory')}
+                      name={['memory', 'enabled']}
+                      desc={t('application.dialogueHistoricalMemoryDesc')}
                     />
-                  </Form.Item>
-                </Flex>
-              </Card>
+                    <Form.Item
+                      name={['memory', 'memory_config_id']}
+                      label={t('application.selectMemoryContent')}
+                      extra={<DescWrapper desc={t('application.selectMemoryContentDesc')} className="rb:mt-1" />}
+                      layout="vertical"
+                      className="rb:mb-0!"
+                    >
+                      <CustomSelect
+                        placeholder={t('common.pleaseSelect')}
+                        url={memoryConfigListUrl}
+                        hasAll={false}
+                        valueKey='config_id'
+                        labelKey="config_name"
+                        disabled={!values?.memory?.enabled}
+                      />
+                    </Form.Item>
+                  </Flex>
+                </Card>
 
-              <Form.Item name="variables" noStyle>
-                <VariableList />
-              </Form.Item>
+                <Form.Item name="variables" noStyle>
+                  <VariableList />
+                </Form.Item>
 
-              <Form.Item name="skills" noStyle>
-                <SkillList />
-              </Form.Item>
+                <Form.Item name="skills" noStyle>
+                  <SkillList />
+                </Form.Item>
 
-              {/* Tool Configuration */}
-              <Form.Item name="tools" noStyle>
-                <ToolList />
-              </Form.Item>
+                {/* Tool Configuration */}
+                <Form.Item name="tools" noStyle>
+                  <ToolList />
+                </Form.Item>
+              </Flex>
             </Flex>
           </Form>
         </Col>
-        <Col span={12} className="rb:h-full rb:overflow-y-hidden">
+        <Col span={12} className="rb:h-full! rb:overflow-y-hidden">
           <RbCard
             title={t('application.debuggingAndPreview')}
             extra={
@@ -513,7 +516,7 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
             headerType="borderless"
             headerClassName="rb:h-[56px]! rb:leading-[22px]!"
             titleClassName="rb:font-[MiSans-Bold] rb:font-bold"
-            bodyClassName="rb:p-4! rb:pt-0!"
+            bodyClassName="rb:p-4! rb:pt-0! rb:h-[calc(100%-56px)]!"
             className="rb:h-full!"
           >
             <Chat

web/src/views/ApplicationConfig/Api.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:29:29 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-25 11:18:09
+ * @Last Modified time: 2026-03-26 15:31:36
  */
 import { type FC, useState, useRef, useEffect } from 'react';
 import clsx from 'clsx';
@@ -124,7 +124,7 @@ const Api: FC<{ application: Application | null }> = ({ application }) => {
   // Calculate total requests across all API keys
   const totalRequests = apiKeyList.reduce((total, item) => total + item.total_requests, 0);
   return (
-    <div className="rb:w-250 rb:mx-auto">
+    <div className="rb:w-250 rb:mx-auto rb:max-h-[calc(100vh-88px)]! rb:overflow-y-auto">
       <Flex gap={20} vertical>
         <RbCard 
           title={() => (<Flex align="center">

web/src/views/ApplicationConfig/Cluster.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:29:33 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-20 15:16:25
+ * @Last Modified time: 2026-03-27 11:51:34
  */
 import { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -197,33 +197,34 @@ const Cluster = forwardRef<ClusterRef, { onFeaturesLoad?: (features: FeaturesCon
   return (
     <>
       {loading && <Spin fullscreen></Spin>}
-      <Row className="rb:h-[calc(100vh-89px)]" gutter={12}>
-        <Col span={12} className="rb:h-full rb:overflow-x-auto rb:border-r rb:border-[#DFE4ED]">
+      <Row className="rb:h-full!" gutter={12}>
+        <Col span={12}>
           <Form form={form} layout="vertical">
-            <Flex gap={16} vertical>
+            <Flex gap={12} vertical>
               <Flex align="center" justify="end" className="rb:p-3! rb:bg-white rb:rounded-xl">
                 {/* <FeaturesConfig value={values?.features as FeaturesConfigForm} refresh={handleSaveFeaturesConfig} /> */}
                 <Button type="primary" onClick={() => handleSave()}>
                   {t('common.save')}
                 </Button>
               </Flex>
-              <Form.Item name="features" hidden noStyle></Form.Item>
-              <Card title={t('application.collaboration')}>
-                <Form.Item
-                  name="orchestration_mode"
-                  noStyle
-                >
-                  <RadioGroupCard
-                    options={['supervisor', 'collaboration'].map((type) => ({
-                      value: type,
-                      label: t(`application.${type}`),
-                      labelDesc: t(`application.${type}Desc`),
-                    }))}
-                    allowClear={false}
-                    block={true}
-                  />
-                </Form.Item>
-              </Card>
+              <Flex gap={12} vertical className="rb:h-[calc(100vh-158px)]! rb:overflow-y-auto!">
+                <Form.Item name="features" hidden noStyle></Form.Item>
+                <Card title={t('application.collaboration')}>
+                  <Form.Item
+                    name="orchestration_mode"
+                    noStyle
+                  >
+                    <RadioGroupCard
+                      options={['supervisor', 'collaboration'].map((type) => ({
+                        value: type,
+                        label: t(`application.${type}`),
+                        labelDesc: t(`application.${type}Desc`),
+                      }))}
+                      allowClear={false}
+                      block={true}
+                    />
+                  </Form.Item>
+                </Card>
 
                 <Card
                   title={<>
@@ -289,45 +290,46 @@ const Cluster = forwardRef<ClusterRef, { onFeaturesLoad?: (features: FeaturesCon
                         >{t('application.modelConfig')}</Button>
                       </Form.Item>
                     </Flex>
-                </Form.Item>
-                <Form.Item
-                  name={['execution_config', "sub_agent_execution_mode"]}
-                  label={<span className="rb:text-[#5B6167]">{t('application.orchestrationMode')}</span>}
-                  className="rb:mb-4!"
-                >
-                  <Select
-                    options={['sequential', 'parallel'].map((type) => ({
-                      value: type,
-                      label: t(`application.${type}`),
-                    }))}
-                    placeholder={t('common.pleaseSelect')}
-                  />
-                </Form.Item>
-                <Form.Item
-                  name="aggregation_strategy"
-                  label={<span className="rb:text-[#5B6167]">{t('application.aggregationStrategy')}</span>}
-                  className="rb:mb-0!"
-                >
-                  <Select
-                    options={['merge', 'vote', 'priority'].map((type) => ({
-                      value: type,
-                      label: t(`application.${type}`),
-                    }))}
-                    placeholder={t('common.pleaseSelect')}
-                  />
-                </Form.Item>
-              </Card>}
+                  </Form.Item>
+                  <Form.Item
+                    name={['execution_config', "sub_agent_execution_mode"]}
+                    label={<span className="rb:text-[#5B6167]">{t('application.orchestrationMode')}</span>}
+                    className="rb:mb-4!"
+                  >
+                    <Select
+                      options={['sequential', 'parallel'].map((type) => ({
+                        value: type,
+                        label: t(`application.${type}`),
+                      }))}
+                      placeholder={t('common.pleaseSelect')}
+                    />
+                  </Form.Item>
+                  <Form.Item
+                    name="aggregation_strategy"
+                    label={<span className="rb:text-[#5B6167]">{t('application.aggregationStrategy')}</span>}
+                    className="rb:mb-0!"
+                  >
+                    <Select
+                      options={['merge', 'vote', 'priority'].map((type) => ({
+                        value: type,
+                        label: t(`application.${type}`),
+                      }))}
+                      placeholder={t('common.pleaseSelect')}
+                    />
+                  </Form.Item>
+                </Card>}
+              </Flex>
             </Flex>
           </Form>
         </Col>
-        <Col span={12} className="rb:h-full rb:overflow-y-hidden">
+        <Col span={12} className="rb:h-full! rb:overflow-y-hidden">
           <RbCard
             title={t('application.debuggingAndPreview')}
             headerType="borderless"
             headerClassName="rb:h-[56px]! rb:leading-[22px]!"
             titleClassName="rb:font-[MiSans-Bold] rb:font-bold"
-            bodyClassName="rb:p-4! rb:pt-0!"
-            className="rb:h-full"
+            bodyClassName="rb:p-4! rb:pt-0! rb:h-[calc(100%-56px)]!"
+            className="rb:h-full!"
           >
             <Chat
               data={data as Config}

web/src/views/ApplicationConfig/ReleasePage.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:29:41 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-24 16:43:10
+ * @Last Modified time: 2026-03-26 15:24:41
  */
 import { type FC, useState, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -30,7 +30,7 @@ const tagColors: Record<Release['tagKey'], TagProps['color']> = {
   history: 'default',
 }
 
-const heightClass = 'rb:h-[calc(100vh-88px)]'
+const heightClass = 'rb:max-h-[calc(100vh-140px)]'
 /**
  * Release page component
  * Manages application version releases, rollbacks, and version history
@@ -77,51 +77,55 @@ const ReleasePage: FC<{data: Application; refresh: () => void}> = ({data, refres
   }
   return (
     <Flex gap={12}>
-      <div className={`rb:overflow-y-auto rb:w-101 rb:flex-[0_0_auto] ${heightClass}`}>
+      <div className="rb:w-101 rb:h-full">
         <Flex gap={12} vertical>
           <div className="rb:px-1">
             <div className="rb:text-[16px] rb:leading-5.5 rb:font-medium">{t('application.versionList')}</div>
             <div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4.5">{t('application.versionListDesc')}</div>
           </div>
-          {releaseList.length === 0
-            ? <Empty />
-            : selectedVersion && releaseList.map((version, index) => {
-              const tagKey = version.id === data.current_release_id && index === 0
-                ? 'current'
-                : version.id === data.current_release_id
-                ? 'rolledBack' :  'history'
-              return (
-                <RbCard 
-                  key={version.version} 
-                  title={<>
-                    {version.version_name && version.version_name[0].toLocaleLowerCase() === 'v' ? version.version_name : version.version_name ? `v${version.version_name}` : `v${version.version}`}
-                    {tagKey && <Tag color={tagColors[tagKey]} className="rb:ml-2">
-                      {tagKey}
-                    </Tag>}
-                  </>}
-                  className={clsx("rb:hover:shadow-[0px_2px_8px_0px_rgba(0,0,0,0.2)]! rb:cursor-pointer rb:bg-white", {
-                    'rb:border-[#171719]!': version.id === selectedVersion.id,
-                    'rb:border-[#DFE4ED] ': version.id !== selectedVersion.id
-                  })}
-                  headerType="borderless"
-                  onClick={() => setSelectedVersion(version)}
-                >
-                  <div className="rb:leading-5 rb:line-clamp-2 rb:overflow-hidden rb:text-ellipsis rb:whitespace-nowrap">
-                    <Markdown content={version.release_notes} />
-                  </div>
-                  <div className="rb:mt-4 rb:text-[12px] rb:text-[#5B6167] rb:leading-4.5">
-                    {t('application.publishedOn')} {formatDateTime(version.published_at, 'YYYY-MM-DD HH:mm:ss')}
-                  </div>
-                  <div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4.5">
-                    {t('application.publisher')}: {version.publisher_name}
-                  </div>
-                </RbCard>
-              )
-            })
-          }
+          <div className={`${heightClass} rb:overflow-y-auto`}>
+            {releaseList.length === 0
+              ? <Empty />
+              : <Flex gap={12} vertical>
+                {selectedVersion && releaseList.map((version, index) => {
+                  const tagKey = version.id === data.current_release_id && index === 0
+                    ? 'current'
+                    : version.id === data.current_release_id
+                      ? 'rolledBack' : 'history'
+                  return (
+                    <RbCard
+                      key={version.version}
+                      title={<>
+                        {version.version_name && version.version_name[0].toLocaleLowerCase() === 'v' ? version.version_name : version.version_name ? `v${version.version_name}` : `v${version.version}`}
+                        {tagKey && <Tag color={tagColors[tagKey]} className="rb:ml-2">
+                          {tagKey}
+                        </Tag>}
+                      </>}
+                      className={clsx("rb:hover:shadow-[0px_2px_8px_0px_rgba(0,0,0,0.2)]! rb:cursor-pointer rb:bg-white", {
+                        'rb:border-[#171719]!': version.id === selectedVersion.id,
+                        'rb:border-[#DFE4ED] ': version.id !== selectedVersion.id
+                      })}
+                      headerType="borderless"
+                      onClick={() => setSelectedVersion(version)}
+                    >
+                      <div className="rb:leading-5 rb:line-clamp-2 rb:overflow-hidden rb:text-ellipsis rb:whitespace-nowrap">
+                        <Markdown content={version.release_notes} />
+                      </div>
+                      <div className="rb:mt-4 rb:text-[12px] rb:text-[#5B6167] rb:leading-4.5">
+                        {t('application.publishedOn')} {formatDateTime(version.published_at, 'YYYY-MM-DD HH:mm:ss')}
+                      </div>
+                      <div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4.5">
+                        {t('application.publisher')}: {version.publisher_name}
+                      </div>
+                    </RbCard>
+                  )
+                })}
+              </Flex>
+            }
+          </div>
         </Flex>
       </div>
-      <div className={`rb:overflow-y-auto rb:flex-[1_1_auto] ${heightClass}`}>
+      <div className="rb:overflow-y-auto rb:flex-1">
         <Form layout="vertical">
           <Flex align="center" className={clsx("rb:leading-6.5! rb:text-[18px] rb:font-medium rb:mb-4.75!", {
             'rb:justify-between': selectedVersion,
@@ -140,7 +144,7 @@ const ReleasePage: FC<{data: Application; refresh: () => void}> = ({data, refres
             </Space>
           </Flex>
           {selectedVersion && 
-            <Flex gap={16} vertical>
+            <Flex gap={16} vertical className={`${heightClass} rb:overflow-y-auto`}>
               <RbCard
                 title={t('application.VersionInformation')}
                 headerType="borderless"

web/src/views/ApplicationConfig/TestChat/index.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-03-13 17:27:52 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-26 13:43:02
+ * @Last Modified time: 2026-03-26 15:35:13
  */
 import { type FC, useState, useRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -531,11 +531,11 @@ const TestChat: FC<TestChatProps> = ({
   }
 
   return (
-    <div className="rb:w-250 rb:p-3 rb:mx-auto">
+    <div className="rb:w-250 rb:mx-auto rb:h-full">
       <RbCard
         title={t('application.test')}
         headerClassName="rb:min-h-[56px]!"
-        className="rb:h-[calc(100vh-88px)]!"
+        className="rb:h-full!"
         bodyClassName="rb:h-[calc(100%-56px)]! rb:overflow-y-auto rb:px-3! rb:py-0!"
       >
         <Chat

web/src/views/ApplicationConfig/index.tsx

@@ -2,10 +2,11 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:29:37 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-24 15:59:47
+ * @Last Modified time: 2026-03-26 15:37:18
  */
 import React, { useEffect, useState, useRef } from 'react';
 import { useParams } from 'react-router-dom';
+import { Flex } from 'antd'
 
 import ConfigHeader from './components/ConfigHeader'
 import type { AgentRef, ClusterRef, WorkflowRef, Config } from './types'
@@ -108,7 +109,7 @@ const ApplicationConfig: React.FC = () => {
   }
 
   return (
-    <>
+    <Flex vertical className="rb:h-screen!">
       <ConfigHeader 
         activeTab={activeTab}
         handleChangeTab={handleChangeTab}
@@ -119,7 +120,7 @@ const ApplicationConfig: React.FC = () => {
         features={features}
         onFeaturesChange={setFeatures}
       />
-      <div className="rb:p-3 rb:max-h-[calc(100vh-65px)] rb:overflow-auto">
+      <div className="rb:p-3 rb:flex-1 rb:overflow-auto">
         {activeTab === 'arrangement' && application?.type === 'agent' && <Agent ref={agentRef} onFeaturesLoad={setFeatures} />}
         {activeTab === 'arrangement' && application?.type === 'multi_agent' && <Cluster ref={clusterRef} onFeaturesLoad={setFeatures} />}
         {activeTab === 'arrangement' && application?.type === 'workflow' && <Workflow ref={workflowRef} onFeaturesLoad={setFeatures} />}
@@ -129,7 +130,7 @@ const ApplicationConfig: React.FC = () => {
         {activeTab === 'test' && <TestChat application={application} config={config} />}
         {activeTab === 'log' && <Logs />}
       </div>
-    </>
+    </Flex>
   );
 };