From 56e2eb17ab111c9104077f722c084d0792050b07 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Fri, 7 Nov 2025 11:24:02 +0800
Subject: [PATCH] fix: Style optimization

---
 .../src/views/system/appearance/index.vue     | 401 +++++++-------
 frontend/src/views/system/embedded/iframe.vue | 437 ++++++++-------
 frontend/src/views/system/model/ModelForm.vue | 510 +++++++++---------
 .../src/views/system/permission/index.vue     | 266 ++++-----
 4 files changed, 840 insertions(+), 774 deletions(-)

diff --git a/frontend/src/views/system/appearance/index.vue b/frontend/src/views/system/appearance/index.vue
index f27c6656..3f5d8a36 100644
--- a/frontend/src/views/system/appearance/index.vue
+++ b/frontend/src/views/system/appearance/index.vue
@@ -1,135 +1,136 @@
 <template>
-  <div class="appearance">
-    <p class="router-title">{{ t('system.appearance_settings') }}</p>
-    <div class="appearance-table__content">
-      <el-scrollbar>
-        <div class="theme">
-          <div class="show-theme">{{ $t('system.platform_display_theme') }}</div>
-          <div class="theme-color">
-            <div class="btn-select">
-              <el-button
-                :class="[themeColor === 'default' && 'is-active']"
-                text
-                @click="themeColorChange('default')"
-              >
-                {{ $t('system.default_turquoise') }}
-              </el-button>
-              <el-button
-                :class="[themeColor === 'blue' && 'is-active']"
-                text
-                @click="themeColorChange('blue')"
-              >
-                {{ $t('system.tech_blue') }}
-              </el-button>
-              <el-button
-                :class="[themeColor === 'custom' && 'is-active']"
-                text
-                @click="themeColorChange('custom')"
-              >
-                {{ $t('system.custom') }}
-              </el-button>
-            </div>
-          </div>
-
-          <template v-if="themeColor === 'custom'">
-            <div class="theme-bg">{{ t('system.customize_theme_color') }}</div>
-            <el-color-picker
-              v-model="customColor"
-              :trigger-width="28"
-              :predefine="COLOR_PANEL"
-              is-custom
-              effect="light"
-              @change="customColorChange"
-            />
-          </template>
-        </div>
-        <div class="login" :class="themeColor">
-          <div class="platform-login">
-            {{ t('system.platform_login_settings') }}
-          </div>
-          <div class="page-preview">
-            <div class="title">
-              <span class="left">{{ t('system.page_preview') }}</span>
-              <el-button text @click="resetLoginForm(true)">{{
-                t('system.restore_default')
-              }}</el-button>
-            </div>
-            <div class="page-setting">
-              <div class="page-content">
-                <!-- <img :src="loginPreview" alt="" /> -->
-                <login-preview
-                  :navigate-bg="navigateBg"
-                  :theme-color="themeColor"
-                  :custom-color="customColor"
-                  :name="loginForm.name"
-                  :slogan="loginForm.slogan"
-                  :web="web"
-                  :show-slogan="loginForm.showSlogan"
-                  :bg="bg"
-                  :login="login"
-                  :is-blue="isBlue"
-                  :height="navigateHeight"
-                  :foot="loginForm.foot"
-                  :foot-content="loginForm.footContent"
-                />
-                <div class="tips-page">
-                  {{
-                    t('system.screen_customization_supported', {
-                      msg: loginForm.name || 'SQLBot',
-                    })
-                  }}
-                </div>
-              </div>
-              <div class="config-list">
-                <div v-for="ele in configList" :key="ele.type" class="config-item">
-                  <div class="config-logo">
-                    <span class="logo">{{ ele.logo }}</span>
-                    <el-upload
-                      :name="ele.type"
-                      :show-file-list="false"
-                      class="upload-demo"
-                      accept=".jpeg,.jpg,.png,.gif,.svg"
-                      :before-upload="(e: any) => beforeUpload(e, ele)"
-                      :http-request="uploadImg"
-                    >
-                      <el-button secondary>{{ t('system.replace_image') }}</el-button>
-                    </el-upload>
-                  </div>
-                  <div class="tips">{{ ele.tips }}</div>
-                </div>
-                <el-form
-                  ref="loginFormRef"
-                  :model="loginForm"
-                  label-position="top"
-                  :rules="rules"
-                  require-asterisk-position="right"
-                  label-width="120px"
-                  class="page-Form form-content_error_a"
+  <div class="appearance no-padding">
+    <el-scrollbar>
+      <div class="scroll-content">
+        <p class="router-title">{{ t('system.appearance_settings') }}</p>
+        <div class="appearance-table__content">
+          <div class="theme">
+            <div class="show-theme">{{ $t('system.platform_display_theme') }}</div>
+            <div class="theme-color">
+              <div class="btn-select">
+                <el-button
+                  :class="[themeColor === 'default' && 'is-active']"
+                  text
+                  @click="themeColorChange('default')"
                 >
-                  <el-form-item :label="t('system.website_name')" prop="name">
-                    <el-input
-                      v-model="loginForm.name"
-                      :placeholder="
-                        $t('datasource.please_enter') +
-                        $t('common.empty') +
-                        $t('system.website_name')
-                      "
-                      maxlength="20"
-                    />
-                    <div class="form-tips">{{ t('system.on_webpage_tabs') }}</div>
-                  </el-form-item>
-                  <el-form-item>
-                    <template #label>
-                      <el-checkbox
-                        v-model="loginForm.showSlogan"
-                        true-value="0"
-                        false-value="1"
-                        :label="$t('system.welcome_message')"
+                  {{ $t('system.default_turquoise') }}
+                </el-button>
+                <el-button
+                  :class="[themeColor === 'blue' && 'is-active']"
+                  text
+                  @click="themeColorChange('blue')"
+                >
+                  {{ $t('system.tech_blue') }}
+                </el-button>
+                <el-button
+                  :class="[themeColor === 'custom' && 'is-active']"
+                  text
+                  @click="themeColorChange('custom')"
+                >
+                  {{ $t('system.custom') }}
+                </el-button>
+              </div>
+            </div>
+
+            <template v-if="themeColor === 'custom'">
+              <div class="theme-bg">{{ t('system.customize_theme_color') }}</div>
+              <el-color-picker
+                v-model="customColor"
+                :trigger-width="28"
+                :predefine="COLOR_PANEL"
+                is-custom
+                effect="light"
+                @change="customColorChange"
+              />
+            </template>
+          </div>
+          <div class="login" :class="themeColor">
+            <div class="platform-login">
+              {{ t('system.platform_login_settings') }}
+            </div>
+            <div class="page-preview">
+              <div class="title">
+                <span class="left">{{ t('system.page_preview') }}</span>
+                <el-button text @click="resetLoginForm(true)">{{
+                  t('system.restore_default')
+                }}</el-button>
+              </div>
+              <div class="page-setting">
+                <div class="page-content">
+                  <!-- <img :src="loginPreview" alt="" /> -->
+                  <login-preview
+                    :navigate-bg="navigateBg"
+                    :theme-color="themeColor"
+                    :custom-color="customColor"
+                    :name="loginForm.name"
+                    :slogan="loginForm.slogan"
+                    :web="web"
+                    :show-slogan="loginForm.showSlogan"
+                    :bg="bg"
+                    :login="login"
+                    :is-blue="isBlue"
+                    :height="navigateHeight"
+                    :foot="loginForm.foot"
+                    :foot-content="loginForm.footContent"
+                  />
+                  <div class="tips-page">
+                    {{
+                      t('system.screen_customization_supported', {
+                        msg: loginForm.name || 'SQLBot',
+                      })
+                    }}
+                  </div>
+                </div>
+                <div class="config-list">
+                  <div v-for="ele in configList" :key="ele.type" class="config-item">
+                    <div class="config-logo">
+                      <span class="logo">{{ ele.logo }}</span>
+                      <el-upload
+                        :name="ele.type"
+                        :show-file-list="false"
+                        class="upload-demo"
+                        accept=".jpeg,.jpg,.png,.gif,.svg"
+                        :before-upload="(e: any) => beforeUpload(e, ele)"
+                        :http-request="uploadImg"
+                      >
+                        <el-button secondary>{{ t('system.replace_image') }}</el-button>
+                      </el-upload>
+                    </div>
+                    <div class="tips">{{ ele.tips }}</div>
+                  </div>
+                  <el-form
+                    ref="loginFormRef"
+                    :model="loginForm"
+                    label-position="top"
+                    :rules="rules"
+                    require-asterisk-position="right"
+                    label-width="120px"
+                    class="page-Form form-content_error_a"
+                  >
+                    <el-form-item :label="t('system.website_name')" prop="name">
+                      <el-input
+                        v-model="loginForm.name"
+                        :placeholder="
+                          $t('datasource.please_enter') +
+                          $t('common.empty') +
+                          $t('system.website_name')
+                        "
+                        maxlength="20"
                       />
-                    </template>
-                    <el-input v-model="loginForm.slogan" maxlength="50" />
-                  </el-form-item>
-                  <!-- <el-form-item :label="t('system.footer')" prop="foot">
+                      <div class="form-tips">{{ t('system.on_webpage_tabs') }}</div>
+                    </el-form-item>
+                    <el-form-item>
+                      <template #label>
+                        <el-checkbox
+                          v-model="loginForm.showSlogan"
+                          true-value="0"
+                          false-value="1"
+                          :label="$t('system.welcome_message')"
+                        />
+                      </template>
+                      <el-input v-model="loginForm.slogan" maxlength="50" />
+                    </el-form-item>
+                    <!-- <el-form-item :label="t('system.footer')" prop="foot">
                   <el-switch v-model="loginForm.foot" active-value="true" inactive-value="false" />
                 </el-form-item>
                 <el-form-item
@@ -142,79 +143,82 @@
                     v-model="loginForm.footContent"
                   />
                 </el-form-item> -->
-                </el-form>
+                  </el-form>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div class="login">
-          <div class="platform-login">{{ t('system.platform_settings') }}</div>
-          <div class="page-preview">
-            <div class="title">
-              <span class="left">{{ t('system.page_preview') }}</span>
-              <el-button text @click="resetTopForm(true)">{{
-                t('system.restore_default')
-              }}</el-button>
-            </div>
-            <div class="page-setting">
-              <div class="page-content">
-                <!-- <div class="navigate-preview" :style="{'height': `${navigateHeight}px`}"> -->
-                <div class="navigate-preview" style="height: 425px">
-                  <div class="navigate-head">
-                    <div class="header-sql">
-                      <img height="30" width="30" v-if="pageLogin" :src="pageLogin" alt="" />
-                      <custom_small v-else-if="themeColor === 'custom'" class="logo" />
-                      <logo v-else></logo>
-                      <span style="margin-left: 8px">{{ loginForm.name }}</span>
-                    </div>
-                    <div class="bottom-sql">
-                      <Person
-                        :is-blue="isBlue"
-                        :show-about="topForm.showAbout === '0'"
-                        :show-doc="topForm.showDoc === '0'"
-                      ></Person>
-                      <el-icon size="20" class="fold">
-                        <icon_side_fold_outlined></icon_side_fold_outlined>
-                      </el-icon>
+          <div class="login">
+            <div class="platform-login">{{ t('system.platform_settings') }}</div>
+            <div class="page-preview">
+              <div class="title">
+                <span class="left">{{ t('system.page_preview') }}</span>
+                <el-button text @click="resetTopForm(true)">{{
+                  t('system.restore_default')
+                }}</el-button>
+              </div>
+              <div class="page-setting">
+                <div class="page-content">
+                  <!-- <div class="navigate-preview" :style="{'height': `${navigateHeight}px`}"> -->
+                  <div class="navigate-preview" style="height: 425px">
+                    <div class="navigate-head">
+                      <div class="header-sql">
+                        <img height="30" width="30" v-if="pageLogin" :src="pageLogin" alt="" />
+                        <custom_small v-else-if="themeColor === 'custom'" class="logo" />
+                        <logo v-else></logo>
+                        <span style="margin-left: 8px">{{ loginForm.name }}</span>
+                      </div>
+                      <div class="bottom-sql">
+                        <Person
+                          :is-blue="isBlue"
+                          :show-about="topForm.showAbout === '0'"
+                          :show-doc="topForm.showDoc === '0'"
+                        ></Person>
+                        <el-icon size="20" class="fold">
+                          <icon_side_fold_outlined></icon_side_fold_outlined>
+                        </el-icon>
+                      </div>
                     </div>
                   </div>
+                  <div class="tips-page">
+                    {{
+                      t('system.screen_customization_settings', {
+                        msg: loginForm.name || 'SQLBot',
+                      })
+                    }}
+                  </div>
                 </div>
-                <div class="tips-page">
-                  {{
-                    t('system.screen_customization_settings', { msg: loginForm.name || 'SQLBot' })
-                  }}
-                </div>
-              </div>
-              <div class="config-list">
-                <el-checkbox
-                  v-model="topForm.showDoc"
-                  true-value="0"
-                  false-value="1"
-                  :label="$t('system.help_documentation')"
-                />
-                <div class="doc-input">
-                  <el-input
-                    v-model="topForm.help"
-                    style="width: 100%"
-                    :placeholder="
-                      $t('datasource.please_enter') +
-                      $t('common.empty') +
-                      $t('system.help_documentation')
-                    "
+                <div class="config-list">
+                  <el-checkbox
+                    v-model="topForm.showDoc"
+                    true-value="0"
+                    false-value="1"
+                    :label="$t('system.help_documentation')"
+                  />
+                  <div class="doc-input">
+                    <el-input
+                      v-model="topForm.help"
+                      style="width: 100%"
+                      :placeholder="
+                        $t('datasource.please_enter') +
+                        $t('common.empty') +
+                        $t('system.help_documentation')
+                      "
+                    />
+                  </div>
+                  <el-checkbox
+                    v-model="topForm.showAbout"
+                    true-value="0"
+                    false-value="1"
+                    :label="$t('system.show_about')"
                   />
                 </div>
-                <el-checkbox
-                  v-model="topForm.showAbout"
-                  true-value="0"
-                  false-value="1"
-                  :label="$t('system.show_about')"
-                />
               </div>
             </div>
           </div>
         </div>
-      </el-scrollbar>
-    </div>
+      </div>
+    </el-scrollbar>
     <div class="appearance-foot">
       <el-button secondary @click="giveUp">{{ $t('system.abort_update') }}</el-button>
       <el-button v-if="showSaveButton" type="primary" @click="saveHandler">{{
@@ -610,6 +614,14 @@ onUnmounted(() => {
 .appearance {
   position: relative;
   height: 100%;
+  & > .ed-scrollbar {
+    .scroll-content {
+      padding: 16px 24px 80px 24px;
+      height: 100%;
+      position: relative;
+      z-index: 10;
+    }
+  }
   .router-title {
     color: #1f2329;
     font-feature-settings:
@@ -625,8 +637,7 @@ onUnmounted(() => {
     width: 100%;
     min-width: 840px;
     margin-top: 16px;
-    overflow-y: auto;
-    height: calc(100vh - 180px);
+    height: 100%;
     box-sizing: border-box;
 
     :deep(.ed-form-item__error) {
@@ -910,13 +921,13 @@ onUnmounted(() => {
     display: flex;
     justify-content: flex-end;
     padding: 16px 24px;
-    padding-bottom: 0;
     background: var(--ContentBG, #ffffff);
     position: absolute;
-    left: -24px;
+    left: 0;
     bottom: 0;
-    width: calc(100% + 48px);
+    width: 100%;
     border-top: 1px solid #1f232926;
+    z-index: 100;
   }
 }
 </style>
diff --git a/frontend/src/views/system/embedded/iframe.vue b/frontend/src/views/system/embedded/iframe.vue
index e12a40be..eb15cabd 100644
--- a/frontend/src/views/system/embedded/iframe.vue
+++ b/frontend/src/views/system/embedded/iframe.vue
@@ -697,103 +697,113 @@ const saveHandler = () => {
       </template>
 
       <div v-if="activeStep === 0" class="drawer-content">
-        <div class="title">
-          {{ $t('embedded.basic_information') }}
-        </div>
+        <el-scrollbar>
+          <div class="scroll-content">
+            <div class="title">
+              {{ $t('embedded.basic_information') }}
+            </div>
 
-        <el-form
-          ref="embeddedFormRef"
-          :model="currentEmbedded"
-          label-width="180px"
-          label-position="top"
-          :rules="rules"
-          class="form-content_error"
-          @submit.prevent
-        >
-          <el-form-item prop="name" :label="t('embedded.application_name')">
-            <el-input
-              v-model="currentEmbedded.name"
-              :placeholder="
-                $t('datasource.please_enter') + $t('common.empty') + $t('embedded.application_name')
-              "
-              clearable
-              maxlength="50"
-              autocomplete="off"
-            />
-          </el-form-item>
+            <el-form
+              ref="embeddedFormRef"
+              :model="currentEmbedded"
+              label-width="180px"
+              label-position="top"
+              :rules="rules"
+              class="form-content_error"
+              @submit.prevent
+            >
+              <el-form-item prop="name" :label="t('embedded.application_name')">
+                <el-input
+                  v-model="currentEmbedded.name"
+                  :placeholder="
+                    $t('datasource.please_enter') +
+                    $t('common.empty') +
+                    $t('embedded.application_name')
+                  "
+                  clearable
+                  maxlength="50"
+                  autocomplete="off"
+                />
+              </el-form-item>
 
-          <el-form-item prop="description" :label="t('embedded.application_description')">
-            <el-input
-              v-model="currentEmbedded.description"
-              :rows="3"
-              type="textarea"
-              maxlength="200"
-              show-word-limit
-              clearable
-              :placeholder="$t('datasource.please_enter')"
-              autocomplete="off"
-            />
-          </el-form-item>
+              <el-form-item prop="description" :label="t('embedded.application_description')">
+                <el-input
+                  v-model="currentEmbedded.description"
+                  :rows="3"
+                  type="textarea"
+                  maxlength="200"
+                  show-word-limit
+                  clearable
+                  :placeholder="$t('datasource.please_enter')"
+                  autocomplete="off"
+                />
+              </el-form-item>
 
-          <el-form-item prop="domain" :label="t('embedded.cross_domain_settings')">
-            <el-input
-              v-model="currentEmbedded.domain"
-              clearable
-              :placeholder="$t('embedded.third_party_address')"
-              autocomplete="off"
-            />
-          </el-form-item>
-        </el-form>
+              <el-form-item prop="domain" :label="t('embedded.cross_domain_settings')">
+                <el-input
+                  v-model="currentEmbedded.domain"
+                  clearable
+                  :placeholder="$t('embedded.third_party_address')"
+                  autocomplete="off"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-scrollbar>
       </div>
       <div v-if="activeStep === 1 && advancedApplication" class="drawer-content">
-        <div class="title">
-          {{ $t('embedded.configure_interface') }}
-        </div>
+        <el-scrollbar>
+          <div class="scroll-content">
+            <div class="title">
+              {{ $t('embedded.configure_interface') }}
+            </div>
 
-        <el-form
-          ref="urlFormRef"
-          :model="urlForm"
-          label-width="180px"
-          label-position="top"
-          :rules="urlRules"
-          class="form-content_error"
-          @submit.prevent
-        >
-          <el-form-item prop="endpoint" :label="t('embedded.interface_url')">
-            <el-input
-              v-model="urlForm.endpoint"
-              clearable
-              :placeholder="
-                $t('datasource.please_enter') + $t('common.empty') + $t('embedded.interface_url')
-              "
-              autocomplete="off"
-            />
-          </el-form-item>
-          <el-form-item prop="AES" class="custom-require">
-            <template #label>
-              <span class="custom-require_danger">{{ t('embedded.aes_enable') }}</span>
-            </template>
+            <el-form
+              ref="urlFormRef"
+              :model="urlForm"
+              label-width="180px"
+              label-position="top"
+              :rules="urlRules"
+              class="form-content_error"
+              @submit.prevent
+            >
+              <el-form-item prop="endpoint" :label="t('embedded.interface_url')">
+                <el-input
+                  v-model="urlForm.endpoint"
+                  clearable
+                  :placeholder="
+                    $t('datasource.please_enter') +
+                    $t('common.empty') +
+                    $t('embedded.interface_url')
+                  "
+                  autocomplete="off"
+                />
+              </el-form-item>
+              <el-form-item prop="AES" class="custom-require">
+                <template #label>
+                  <span class="custom-require_danger">{{ t('embedded.aes_enable') }}</span>
+                </template>
 
-            <el-switch v-model="urlForm.encrypt" />
-            <span class="aes-encrypt-tips">{{ t('embedded.aes_enable_tips') }}</span>
-          </el-form-item>
-          <el-form-item v-if="urlForm.encrypt" prop="aes_key" label="AES Key">
-            <el-input
-              v-model="urlForm.aes_key"
-              clearable
-              type="password"
-              show-password
-              :placeholder="
-                $t('datasource.please_enter') +
-                $t('common.empty') +
-                ' 32 ' +
-                $t('embedded.bit') +
-                ' AES Key'
-              "
-              autocomplete="off"
-            />
-          </el-form-item>
-          <!-- <el-form-item v-if="urlForm.encrypt" prop="aes_iv" label="AES IV">
+                <el-switch v-model="urlForm.encrypt" />
+                <span class="aes-encrypt-tips">{{ t('embedded.aes_enable_tips') }}</span>
+              </el-form-item>
+              <el-form-item v-if="urlForm.encrypt" prop="aes_key" label="AES Key">
+                <el-input
+                  v-model="urlForm.aes_key"
+                  clearable
+                  type="password"
+                  show-password
+                  :placeholder="
+                    $t('datasource.please_enter') +
+                    $t('common.empty') +
+                    ' 32 ' +
+                    $t('embedded.bit') +
+                    ' AES Key'
+                  "
+                  autocomplete="off"
+                />
+              </el-form-item>
+              <!-- <el-form-item v-if="urlForm.encrypt" prop="aes_iv" label="AES IV">
             <el-input
               v-model="urlForm.aes_iv"
               clearable
@@ -807,124 +817,135 @@ const saveHandler = () => {
               autocomplete="off"
             />
           </el-form-item> -->
-          <el-form-item class="certificate-table_form" prop="certificate">
-            <template #label>
-              <div class="title-content">
-                <span class="title-form">{{ t('embedded.interface_credentials') }}</span>
-                <span class="add btn" @click="initCertificate(null)">
-                  <el-icon size="16">
-                    <icon_add_outlined></icon_add_outlined>
-                  </el-icon>
-                  {{ t('model.add') }}
-                </span>
-              </div>
-            </template>
-            <div
-              class="table-content"
-              :class="!!urlForm.certificate.length && 'no-credentials_yet'"
-            >
-              <el-table
-                :empty-text="$t('embedded.no_credentials_yet')"
-                :data="urlForm.certificate"
-                style="width: 100%"
-              >
-                <el-table-column prop="source" :label="t('embedded.credential_name')" width="180" />
-                <el-table-column
-                  prop="type"
-                  :label="t('embedded.system_credential_type')"
-                  width="180"
-                />
-                <el-table-column
-                  prop="target_key"
-                  :label="t('embedded.target_credential_name')"
-                  width="180"
-                />
-                <el-table-column prop="target" :label="t('embedded.target_credential_location')" />
-                <el-table-column
-                  fixed="right"
-                  width="80"
-                  class-name="operation-column_text"
-                  :label="$t('ds.actions')"
+              <el-form-item class="certificate-table_form" prop="certificate">
+                <template #label>
+                  <div class="title-content">
+                    <span class="title-form">{{ t('embedded.interface_credentials') }}</span>
+                    <span class="add btn" @click="initCertificate(null)">
+                      <el-icon size="16">
+                        <icon_add_outlined></icon_add_outlined>
+                      </el-icon>
+                      {{ t('model.add') }}
+                    </span>
+                  </div>
+                </template>
+                <div
+                  class="table-content"
+                  :class="!!urlForm.certificate.length && 'no-credentials_yet'"
                 >
-                  <template #default="scope">
-                    <el-button text type="primary" @click="initCertificate(scope.row)">
-                      <el-icon size="16">
-                        <icon_edit_outlined></icon_edit_outlined>
-                      </el-icon>
-                    </el-button>
-                    <el-button text type="primary" @click="handleCredentialsDel(scope.row)">
-                      <el-icon size="16">
-                        <icon_delete></icon_delete>
-                      </el-icon>
-                    </el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
-          </el-form-item>
-        </el-form>
+                  <el-table
+                    :empty-text="$t('embedded.no_credentials_yet')"
+                    :data="urlForm.certificate"
+                    style="width: 100%"
+                  >
+                    <el-table-column
+                      prop="source"
+                      :label="t('embedded.credential_name')"
+                      width="180"
+                    />
+                    <el-table-column
+                      prop="type"
+                      :label="t('embedded.system_credential_type')"
+                      width="180"
+                    />
+                    <el-table-column
+                      prop="target_key"
+                      :label="t('embedded.target_credential_name')"
+                      width="180"
+                    />
+                    <el-table-column
+                      prop="target"
+                      :label="t('embedded.target_credential_location')"
+                    />
+                    <el-table-column
+                      fixed="right"
+                      width="80"
+                      class-name="operation-column_text"
+                      :label="$t('ds.actions')"
+                    >
+                      <template #default="scope">
+                        <el-button text type="primary" @click="initCertificate(scope.row)">
+                          <el-icon size="16">
+                            <icon_edit_outlined></icon_edit_outlined>
+                          </el-icon>
+                        </el-button>
+                        <el-button text type="primary" @click="handleCredentialsDel(scope.row)">
+                          <el-icon size="16">
+                            <icon_delete></icon_delete>
+                          </el-icon>
+                        </el-button>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </div>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-scrollbar>
       </div>
       <div v-if="activeStep === 1 && !advancedApplication" class="drawer-content">
         <el-scrollbar>
-          <div class="title">
-            {{ $t('embedded.set_data_source') }}
-          </div>
+          <div class="scroll-content">
+            <div class="title">
+              {{ $t('embedded.set_data_source') }}
+            </div>
 
-          <el-form
-            ref="dsFormRef"
-            :model="dsForm"
-            label-width="180px"
-            label-position="top"
-            :rules="dsRules"
-            class="form-content_error"
-            @submit.prevent
-          >
-            <el-form-item prop="oid" :label="t('user.workspace')">
-              <el-select
-                v-model="dsForm.oid"
-                filterable
-                :placeholder="
-                  $t('datasource.please_enter') + $t('common.empty') + $t('user.workspace')
-                "
-                @change="wsChanged"
-              >
-                <el-option
-                  v-for="item in workspaces"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                />
-              </el-select>
-            </el-form-item>
+            <el-form
+              ref="dsFormRef"
+              :model="dsForm"
+              label-width="180px"
+              label-position="top"
+              :rules="dsRules"
+              class="form-content_error"
+              @submit.prevent
+            >
+              <el-form-item prop="oid" :label="t('user.workspace')">
+                <el-select
+                  v-model="dsForm.oid"
+                  filterable
+                  :placeholder="
+                    $t('datasource.please_enter') + $t('common.empty') + $t('user.workspace')
+                  "
+                  @change="wsChanged"
+                >
+                  <el-option
+                    v-for="item in workspaces"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
 
-            <el-form-item class="private-list_form">
-              <template #label>
-                <div class="private-list">
-                  {{ t('embedded.set_data_source') }}
-                  <span :title="$t('embedded.open_the_query')" class="open-the_query ellipsis"
-                    >{{ $t('embedded.open_the_query') }}
-                  </span>
+              <el-form-item class="private-list_form">
+                <template #label>
+                  <div class="private-list">
+                    {{ t('embedded.set_data_source') }}
+                    <span :title="$t('embedded.open_the_query')" class="open-the_query ellipsis"
+                      >{{ $t('embedded.open_the_query') }}
+                    </span>
+                  </div>
+                </template>
+                <div class="card-ds_content">
+                  <DsCard
+                    v-for="(ele, index) in dsListOptions"
+                    :id="ele.id"
+                    :key="ele.id"
+                    :class="[0, 1].includes(index) && 'no-margin_top'"
+                    :name="ele.name"
+                    :type="ele.type"
+                    :type-name="ele.type_name"
+                    :description="ele.description"
+                    :is-private="!dsForm.public_list.includes(ele.id)"
+                    :num="ele.num"
+                    @active="handleActive(ele)"
+                    @private="handlePrivate(ele)"
+                    @public="handlePublic(ele)"
+                  ></DsCard>
                 </div>
-              </template>
-              <div class="card-ds_content">
-                <DsCard
-                  v-for="(ele, index) in dsListOptions"
-                  :id="ele.id"
-                  :key="ele.id"
-                  :class="[0, 1].includes(index) && 'no-margin_top'"
-                  :name="ele.name"
-                  :type="ele.type"
-                  :type-name="ele.type_name"
-                  :description="ele.description"
-                  :is-private="!dsForm.public_list.includes(ele.id)"
-                  :num="ele.num"
-                  @active="handleActive(ele)"
-                  @private="handlePrivate(ele)"
-                  @public="handlePublic(ele)"
-                ></DsCard>
-              </div>
-            </el-form-item>
-          </el-form>
+              </el-form-item>
+            </el-form>
+          </div>
         </el-scrollbar>
       </div>
 
@@ -1175,6 +1196,10 @@ const saveHandler = () => {
 
 <style lang="less">
 .embedded-drawer-fullscreen {
+  .ed-drawer__body {
+    padding-left: 0;
+    padding-right: 0;
+  }
   .title {
     font-weight: 500;
     font-size: 16px;
@@ -1218,11 +1243,15 @@ const saveHandler = () => {
   }
 
   .drawer-content {
-    width: 800px;
-    margin: 0 auto;
+    width: 100%;
     height: 100%;
     padding-bottom: 24px;
-    overflow-y: auto;
+    & > .ed-scrollbar {
+      .scroll-content {
+        width: 800px;
+        margin: 0 auto;
+      }
+    }
 
     .ed-form-item {
       &:last-child {
diff --git a/frontend/src/views/system/model/ModelForm.vue b/frontend/src/views/system/model/ModelForm.vue
index 4151f24e..0abb792a 100644
--- a/frontend/src/views/system/model/ModelForm.vue
+++ b/frontend/src/views/system/model/ModelForm.vue
@@ -277,146 +277,148 @@ defineExpose({
 <template>
   <div class="model-form" :class="editModel && 'is-edit_model'">
     <div v-if="!editModel" class="model-name">{{ activeName }}</div>
-    <div class="form-content">
-      <el-form
-        ref="modelRef"
-        :rules="rules"
-        label-position="top"
-        :model="modelForm"
-        style="width: 100%"
-        @submit.prevent
-      >
-        <el-form-item class="custom-require flex-inline" prop="name">
-          <template #label
-            ><span class="custom-require_danger">{{ t('model.model_name') }}</span>
-            <el-tooltip effect="dark" :content="t('model.custom_model_name')" placement="right">
-              <el-icon style="margin-left: 4px" size="16">
-                <dashboard_info></dashboard_info>
-              </el-icon>
-            </el-tooltip>
-          </template>
-          <el-input
-            v-model="modelForm.name"
-            clearable
-            :placeholder="
-              $t('datasource.please_enter') + $t('common.empty') + $t('model.model_name')
-            "
-          />
-        </el-form-item>
-        <el-form-item prop="type" :label="t('model.model_type')">
-          <el-select v-model="modelForm.model_type" style="width: 100%" disabled>
-            <el-option
-              v-for="item in modelTypeOptions"
-              :key="item.value"
-              :label="item.i18nKey ? $t(item.i18nKey) : item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item class="custom-require" prop="base_model">
-          <template #label
-            ><span class="custom-require_danger">{{ t('model.basic_model') }}</span>
-            <span class="enter">{{ t('model.enter_to_add') }}</span>
-          </template>
-          <el-select
-            v-model="modelForm['base_model']"
-            style="width: 100%"
-            filterable
-            allow-create
-            default-first-option
-            :reserve-keyword="false"
-            @change="baseModelChange"
-          >
-            <el-option
-              v-for="item in modelList"
-              :key="item.name"
-              :label="item.name"
-              :value="item.name"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="modelSelected" prop="api_domain" :label="t('model.api_domain_name')">
-          <el-input
-            v-model="modelForm.api_domain"
-            clearable
-            :placeholder="
-              $t('datasource.please_enter') + $t('common.empty') + $t('model.api_domain_name')
-            "
-          />
-        </el-form-item>
-        <el-form-item v-if="modelSelected" prop="api_key" label="API Key">
-          <el-input
-            v-model="modelForm.api_key"
-            clearable
-            :placeholder="$t('datasource.please_enter') + $t('common.empty') + 'API Key'"
-            type="password"
-            show-password
-          />
-        </el-form-item>
-      </el-form>
-      <div
-        v-if="modelSelected"
-        class="advance-setting"
-        :class="configExpand && 'expand'"
-        @click="configExpand = !configExpand"
-      >
-        {{ t('model.advanced_settings') }}
-        <el-icon size="16">
-          <arrow_down></arrow_down>
-        </el-icon>
-      </div>
-      <div v-if="modelSelected && configExpand" class="model-params">
-        {{ t('model.model_parameters') }}
-        <span class="btn" @click="handleParamsCreate">
-          <el-icon size="16">
-            <icon_add_outlined></icon_add_outlined>
-          </el-icon>
-          {{ t('model.add') }}
-        </span>
-      </div>
-
-      <div
-        v-if="modelSelected && configExpand"
-        class="params-table"
-        :class="!advancedSettingPagination.length && 'bottom-border'"
-      >
-        <el-table :data="advancedSettingPagination" style="width: 100%">
-          <el-table-column prop="key" :label="t('model.parameters')" width="280" />
-          <el-table-column prop="name" :label="t('model.display_name')" width="280" />
-          <el-table-column prop="val" show-overflow-tooltip :label="t('model.parameter_value')" />
-          <el-table-column
-            fixed="right"
-            width="80"
-            class-name="operation-column_text"
-            :label="$t('ds.actions')"
-          >
-            <template #default="scope">
-              <el-button text type="primary" @click="handleParamsEdite(scope.row)">
-                <el-icon size="16">
-                  <icon_edit_outlined></icon_edit_outlined>
+    <el-scrollbar>
+      <div class="form-content">
+        <el-form
+          ref="modelRef"
+          :rules="rules"
+          label-position="top"
+          :model="modelForm"
+          style="width: 100%"
+          @submit.prevent
+        >
+          <el-form-item class="custom-require flex-inline" prop="name">
+            <template #label
+              ><span class="custom-require_danger">{{ t('model.model_name') }}</span>
+              <el-tooltip effect="dark" :content="t('model.custom_model_name')" placement="right">
+                <el-icon style="margin-left: 4px" size="16">
+                  <dashboard_info></dashboard_info>
                 </el-icon>
-              </el-button>
-              <el-button text type="primary" @click="handleParamsDel(scope.row)">
-                <el-icon size="16">
-                  <icon_delete></icon_delete>
-                </el-icon>
-              </el-button>
+              </el-tooltip>
             </template>
-          </el-table-column>
-        </el-table>
+            <el-input
+              v-model="modelForm.name"
+              clearable
+              :placeholder="
+                $t('datasource.please_enter') + $t('common.empty') + $t('model.model_name')
+              "
+            />
+          </el-form-item>
+          <el-form-item prop="type" :label="t('model.model_type')">
+            <el-select v-model="modelForm.model_type" style="width: 100%" disabled>
+              <el-option
+                v-for="item in modelTypeOptions"
+                :key="item.value"
+                :label="item.i18nKey ? $t(item.i18nKey) : item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item class="custom-require" prop="base_model">
+            <template #label
+              ><span class="custom-require_danger">{{ t('model.basic_model') }}</span>
+              <span class="enter">{{ t('model.enter_to_add') }}</span>
+            </template>
+            <el-select
+              v-model="modelForm['base_model']"
+              style="width: 100%"
+              filterable
+              allow-create
+              default-first-option
+              :reserve-keyword="false"
+              @change="baseModelChange"
+            >
+              <el-option
+                v-for="item in modelList"
+                :key="item.name"
+                :label="item.name"
+                :value="item.name"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="modelSelected" prop="api_domain" :label="t('model.api_domain_name')">
+            <el-input
+              v-model="modelForm.api_domain"
+              clearable
+              :placeholder="
+                $t('datasource.please_enter') + $t('common.empty') + $t('model.api_domain_name')
+              "
+            />
+          </el-form-item>
+          <el-form-item v-if="modelSelected" prop="api_key" label="API Key">
+            <el-input
+              v-model="modelForm.api_key"
+              clearable
+              :placeholder="$t('datasource.please_enter') + $t('common.empty') + 'API Key'"
+              type="password"
+              show-password
+            />
+          </el-form-item>
+        </el-form>
+        <div
+          v-if="modelSelected"
+          class="advance-setting"
+          :class="configExpand && 'expand'"
+          @click="configExpand = !configExpand"
+        >
+          {{ t('model.advanced_settings') }}
+          <el-icon size="16">
+            <arrow_down></arrow_down>
+          </el-icon>
+        </div>
+        <div v-if="modelSelected && configExpand" class="model-params">
+          {{ t('model.model_parameters') }}
+          <span class="btn" @click="handleParamsCreate">
+            <el-icon size="16">
+              <icon_add_outlined></icon_add_outlined>
+            </el-icon>
+            {{ t('model.add') }}
+          </span>
+        </div>
+
+        <div
+          v-if="modelSelected && configExpand"
+          class="params-table"
+          :class="!advancedSettingPagination.length && 'bottom-border'"
+        >
+          <el-table :data="advancedSettingPagination" style="width: 100%">
+            <el-table-column prop="key" :label="t('model.parameters')" width="280" />
+            <el-table-column prop="name" :label="t('model.display_name')" width="280" />
+            <el-table-column prop="val" show-overflow-tooltip :label="t('model.parameter_value')" />
+            <el-table-column
+              fixed="right"
+              width="80"
+              class-name="operation-column_text"
+              :label="$t('ds.actions')"
+            >
+              <template #default="scope">
+                <el-button text type="primary" @click="handleParamsEdite(scope.row)">
+                  <el-icon size="16">
+                    <icon_edit_outlined></icon_edit_outlined>
+                  </el-icon>
+                </el-button>
+                <el-button text type="primary" @click="handleParamsDel(scope.row)">
+                  <el-icon size="16">
+                    <icon_delete></icon_delete>
+                  </el-icon>
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div
+          v-if="modelSelected && advancedSetting.length > 5 && configExpand"
+          class="params-table_pagination"
+        >
+          <el-pagination
+            :default-page-size="5"
+            layout="prev, pager, next"
+            :total="advancedSetting.length"
+            @current-change="handleCurrentChange"
+          />
+        </div>
       </div>
-      <div
-        v-if="modelSelected && advancedSetting.length > 5 && configExpand"
-        class="params-table_pagination"
-      >
-        <el-pagination
-          :default-page-size="5"
-          layout="prev, pager, next"
-          :total="advancedSetting.length"
-          @current-change="handleCurrentChange"
-        />
-      </div>
-    </div>
+    </el-scrollbar>
     <el-drawer
       v-model="paramsFormDrawer"
       :size="600"
@@ -444,11 +446,7 @@ defineExpose({
   position: absolute;
   right: 0;
   top: 56px;
-  height: 100%;
-
-  &.is-edit_model {
-    width: 100%;
-  }
+  height: calc(100% - 120px);
   .model-name {
     height: 56px;
     width: 100%;
@@ -460,137 +458,145 @@ defineExpose({
     display: flex;
     align-items: center;
   }
-  .form-content {
-    width: 800px;
-    margin: 0 auto;
-    padding-top: 24px;
-    overflow-y: auto;
-    height: calc(100% - 176px);
-    padding-bottom: 24px;
+  & > .ed-scrollbar {
+    .form-content {
+      width: 800px;
+      margin: 0 auto;
+      padding-top: 24px;
+      height: 100%;
+      padding-bottom: 80px;
 
-    .ed-form-item--default {
-      margin-bottom: 16px;
+      .ed-form-item--default {
+        margin-bottom: 16px;
 
-      &.is-error {
-        margin-bottom: 40px;
+        &.is-error {
+          margin-bottom: 40px;
+        }
       }
-    }
 
-    :deep(
-      .custom-require.ed-form-item.is-required:not(.is-no-asterisk).asterisk-right
-        > .ed-form-item__label:after
-    ) {
-      display: none;
-    }
+      :deep(
+        .custom-require.ed-form-item.is-required:not(.is-no-asterisk).asterisk-right
+          > .ed-form-item__label:after
+      ) {
+        display: none;
+      }
 
-    :deep(.flex-inline .ed-form-item__label) {
-      display: inline-flex;
-      align-items: center;
-    }
+      :deep(.flex-inline .ed-form-item__label) {
+        display: inline-flex;
+        align-items: center;
+      }
 
-    .enter {
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 22px;
-      color: #ff8800;
-      margin-left: 8px;
-    }
-
-    .custom-require_danger::after {
-      color: var(--ed-color-danger);
-      content: '*';
-      margin-left: 2px;
-    }
-
-    .advance-setting {
-      display: flex;
-      align-items: center;
-      font-weight: 500;
-      font-size: 14px;
-      line-height: 22px;
-      cursor: pointer;
-
-      .ed-icon {
+      .enter {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        color: #ff8800;
         margin-left: 8px;
       }
 
-      &.expand {
-        .ed-icon {
-          transform: rotate(180deg);
-        }
+      .custom-require_danger::after {
+        color: var(--ed-color-danger);
+        content: '*';
+        margin-left: 2px;
       }
-    }
 
-    .model-params {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 22px;
-      margin: 16px 0 8px 0;
-
-      .btn {
-        height: 26px;
+      .advance-setting {
         display: flex;
         align-items: center;
-        justify-content: center;
-        padding: 0 4px;
-        border-radius: 6px;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 22px;
         cursor: pointer;
 
-        &:hover {
-          background-color: #1f23291a;
+        .ed-icon {
+          margin-left: 8px;
+        }
+
+        &.expand {
+          .ed-icon {
+            transform: rotate(180deg);
+          }
         }
       }
 
-      .ed-icon {
-        margin-right: 4px;
+      .model-params {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        margin: 16px 0 8px 0;
+
+        .btn {
+          height: 26px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 4px;
+          border-radius: 6px;
+          cursor: pointer;
+
+          &:hover {
+            background-color: #1f23291a;
+          }
+        }
+
+        .ed-icon {
+          margin-right: 4px;
+        }
+      }
+
+      .params-table {
+        border-radius: 6px;
+        border: 1px solid #dee0e3;
+        border-top: none;
+        border-bottom: none;
+        overflow-y: auto;
+
+        &.bottom-border {
+          border-bottom: 1px solid #dee0e3;
+        }
+        :deep(.ed-table .ed-table__cell) {
+          padding: 7px 0;
+        }
+
+        :deep(.ed-table .cell) {
+          line-height: 24px;
+        }
+      }
+
+      .params-table_pagination {
+        margin-top: 8px;
+
+        .ed-pagination {
+          justify-content: flex-end;
+        }
+
+        :deep(.ed-pager li.number:hover) {
+          background-color: var(--ed-color-primary-1a, #1cba901a);
+        }
+      }
+
+      .operation-column_text {
+        .ed-button {
+          color: #646a73;
+          height: 24px;
+        }
+        .ed-button:not(.is-disabled):hover {
+          background: #1f23291a;
+        }
+        .ed-button + .ed-button {
+          margin-left: 8px;
+        }
       }
     }
+  }
 
-    .params-table {
-      border-radius: 6px;
-      border: 1px solid #dee0e3;
-      border-top: none;
-      border-bottom: none;
-      overflow-y: auto;
-
-      &.bottom-border {
-        border-bottom: 1px solid #dee0e3;
-      }
-      :deep(.ed-table .ed-table__cell) {
-        padding: 7px 0;
-      }
-
-      :deep(.ed-table .cell) {
-        line-height: 24px;
-      }
-    }
-
-    .params-table_pagination {
-      margin-top: 8px;
-
-      .ed-pagination {
-        justify-content: flex-end;
-      }
-
-      :deep(.ed-pager li.number:hover) {
-        background-color: var(--ed-color-primary-1a, #1cba901a);
-      }
-    }
-
-    .operation-column_text {
-      .ed-button {
-        color: #646a73;
-        height: 24px;
-      }
-      .ed-button:not(.is-disabled):hover {
-        background: #1f23291a;
-      }
-      .ed-button + .ed-button {
-        margin-left: 8px;
-      }
+  &.is-edit_model {
+    width: 100%;
+    .form-content {
+      padding-bottom: 24px;
     }
   }
 }
diff --git a/frontend/src/views/system/permission/index.vue b/frontend/src/views/system/permission/index.vue
index d1a187fd..5a64fb7a 100644
--- a/frontend/src/views/system/permission/index.vue
+++ b/frontend/src/views/system/permission/index.vue
@@ -632,129 +632,141 @@ const columnRules = {
       </template>
 
       <div v-show="activeStep === 0" class="drawer-content">
-        <div class="title">
-          {{ $t('ds.form.base_info') }}
-        </div>
-
-        <el-form
-          ref="termFormRef"
-          :model="currentPermission"
-          label-width="180px"
-          label-position="top"
-          :rules="rules"
-          class="form-content_error"
-          @submit.prevent
-        >
-          <el-form-item prop="name" :label="t('permission.rule_group_name')">
-            <el-input
-              v-model="currentPermission.name"
-              maxlength="50"
-              clearable
-              :placeholder="
-                $t('datasource.please_enter') +
-                $t('common.empty') +
-                $t('permission.rule_group_name')
-              "
-              autocomplete="off"
-            />
-          </el-form-item>
-
-          <el-form-item class="add-permission_form">
-            <template #label>
-              <div
-                style="
-                  width: 100%;
-                  display: flex;
-                  align-items: center;
-                  justify-content: space-between;
-                  font-size: 16px;
-                  font-weight: 500;
-                "
-              >
-                {{ t('permission.permission_rule') }}
-
-                <el-popover popper-class="system-permission_user" placement="bottom">
-                  <template #reference>
-                    <el-button class="add-btn" type="primary">
-                      {{ $t('model.add') }}
-                      <el-icon style="margin-left: 4px" size="16">
-                        <icon_down_outlined></icon_down_outlined>
-                      </el-icon>
-                    </el-button>
-                  </template>
-                  <div class="popover">
-                    <div class="popover-content">
-                      <div
-                        v-for="ele in userTypeList"
-                        :key="ele.name"
-                        class="popover-item"
-                        @click="handleAddPermission(ele.value)"
-                      >
-                        <div class="model-name">{{ ele.name }}</div>
-                      </div>
-                    </div>
-                  </div>
-                </el-popover>
-              </div>
-            </template>
-            <div
-              class="table-content"
-              :class="!currentPermission.permissions.length && 'border-bottom'"
-            >
-              <el-table
-                :empty-text="$t('permission.no_rule')"
-                :data="currentPermission.permissions"
-                style="width: 100%"
-              >
-                <el-table-column prop="name" :label="$t('permission.rule_name')" />
-                <el-table-column prop="type" :label="$t('permission.type')">
-                  <template #default="scope">
-                    {{
-                      scope.row.type === 'row'
-                        ? $t('permission.row_permission')
-                        : $t('permission.column_permission')
-                    }}
-                  </template>
-                </el-table-column>
-                <el-table-column prop="ds_name" :label="$t('permission.data_source')" />
-                <el-table-column prop="table_name" :label="$t('permission.data_table')" />
-                <el-table-column
-                  class-name="actions-methods"
-                  fixed="right"
-                  width="80"
-                  :label="$t('ds.actions')"
-                >
-                  <template #default="scope">
-                    <el-tooltip
-                      :offset="14"
-                      effect="dark"
-                      :content="$t('datasource.edit')"
-                      placement="top"
-                    >
-                      <el-icon class="action-btn" size="16" @click="editForm(scope.row)">
-                        <IconOpeEdit></IconOpeEdit>
-                      </el-icon>
-                    </el-tooltip>
-
-                    <el-tooltip
-                      :offset="14"
-                      effect="dark"
-                      :content="$t('dashboard.delete')"
-                      placement="top"
-                    >
-                      <el-icon class="action-btn" size="16" @click="deleteRuleHandler(scope.row)">
-                        <IconOpeDelete></IconOpeDelete>
-                      </el-icon>
-                    </el-tooltip>
-                  </template>
-                </el-table-column>
-              </el-table>
+        <el-scrollbar>
+          <div class="scroll-content">
+            <div class="title">
+              {{ $t('ds.form.base_info') }}
             </div>
-          </el-form-item>
-        </el-form>
+
+            <el-form
+              ref="termFormRef"
+              :model="currentPermission"
+              label-width="180px"
+              label-position="top"
+              :rules="rules"
+              class="form-content_error"
+              @submit.prevent
+            >
+              <el-form-item prop="name" :label="t('permission.rule_group_name')">
+                <el-input
+                  v-model="currentPermission.name"
+                  maxlength="50"
+                  clearable
+                  :placeholder="
+                    $t('datasource.please_enter') +
+                    $t('common.empty') +
+                    $t('permission.rule_group_name')
+                  "
+                  autocomplete="off"
+                />
+              </el-form-item>
+
+              <el-form-item class="add-permission_form">
+                <template #label>
+                  <div
+                    style="
+                      width: 100%;
+                      display: flex;
+                      align-items: center;
+                      justify-content: space-between;
+                      font-size: 16px;
+                      font-weight: 500;
+                    "
+                  >
+                    {{ t('permission.permission_rule') }}
+
+                    <el-popover popper-class="system-permission_user" placement="bottom">
+                      <template #reference>
+                        <el-button class="add-btn" type="primary">
+                          {{ $t('model.add') }}
+                          <el-icon style="margin-left: 4px" size="16">
+                            <icon_down_outlined></icon_down_outlined>
+                          </el-icon>
+                        </el-button>
+                      </template>
+                      <div class="popover">
+                        <div class="popover-content">
+                          <div
+                            v-for="ele in userTypeList"
+                            :key="ele.name"
+                            class="popover-item"
+                            @click="handleAddPermission(ele.value)"
+                          >
+                            <div class="model-name">{{ ele.name }}</div>
+                          </div>
+                        </div>
+                      </div>
+                    </el-popover>
+                  </div>
+                </template>
+                <div
+                  class="table-content"
+                  :class="!currentPermission.permissions.length && 'border-bottom'"
+                >
+                  <el-table
+                    :empty-text="$t('permission.no_rule')"
+                    :data="currentPermission.permissions"
+                    style="width: 100%"
+                  >
+                    <el-table-column prop="name" :label="$t('permission.rule_name')" />
+                    <el-table-column prop="type" :label="$t('permission.type')">
+                      <template #default="scope">
+                        {{
+                          scope.row.type === 'row'
+                            ? $t('permission.row_permission')
+                            : $t('permission.column_permission')
+                        }}
+                      </template>
+                    </el-table-column>
+                    <el-table-column prop="ds_name" :label="$t('permission.data_source')" />
+                    <el-table-column prop="table_name" :label="$t('permission.data_table')" />
+                    <el-table-column
+                      class-name="actions-methods"
+                      fixed="right"
+                      width="80"
+                      :label="$t('ds.actions')"
+                    >
+                      <template #default="scope">
+                        <el-tooltip
+                          :offset="14"
+                          effect="dark"
+                          :content="$t('datasource.edit')"
+                          placement="top"
+                        >
+                          <el-icon class="action-btn" size="16" @click="editForm(scope.row)">
+                            <IconOpeEdit></IconOpeEdit>
+                          </el-icon>
+                        </el-tooltip>
+
+                        <el-tooltip
+                          :offset="14"
+                          effect="dark"
+                          :content="$t('dashboard.delete')"
+                          placement="top"
+                        >
+                          <el-icon
+                            class="action-btn"
+                            size="16"
+                            @click="deleteRuleHandler(scope.row)"
+                          >
+                            <IconOpeDelete></IconOpeDelete>
+                          </el-icon>
+                        </el-tooltip>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </div>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-scrollbar>
       </div>
       <div v-show="activeStep !== 0" class="select-permission_content">
-        <SelectPermission ref="selectPermissionRef"></SelectPermission>
+        <el-scrollbar>
+          <div class="scroll-content">
+            <SelectPermission ref="selectPermissionRef"></SelectPermission>
+          </div>
+        </el-scrollbar>
       </div>
       <template #footer>
         <el-button secondary @click="beforeClose"> {{ $t('common.cancel') }} </el-button>
@@ -938,6 +950,10 @@ const columnRules = {
 
 <style lang="less">
 .permission-drawer-fullscreen {
+  .ed-drawer__body {
+    padding-left: 0;
+    padding-right: 0;
+  }
   .title {
     font-weight: 500;
     font-size: 16px;
@@ -948,11 +964,15 @@ const columnRules = {
 
   .select-permission_content,
   .drawer-content {
-    width: 800px;
-    margin: 0 auto;
+    width: 100%;
     height: 100%;
     padding-bottom: 24px;
-    overflow-y: auto;
+    & > .ed-scrollbar {
+      .scroll-content {
+        width: 800px;
+        margin: 0 auto;
+      }
+    }
   }
 
   .drawer-content {