diff --git a/frontend/src/components/layout/PwdForm.vue b/frontend/src/components/layout/PwdForm.vue
index 4d46f7b8..465a8138 100644
--- a/frontend/src/components/layout/PwdForm.vue
+++ b/frontend/src/components/layout/PwdForm.vue
@@ -85,6 +85,7 @@ defineExpose({
           v-model="pwdForm.pwd"
           :placeholder="t('common.please_input', { msg: t('user.upgrade_pwd.old_pwd') })"
           type="password"
+          clearable
           show-password
         />
       </el-form-item>
@@ -94,6 +95,7 @@ defineExpose({
           :placeholder="t('common.please_input', { msg: t('user.upgrade_pwd.new_pwd') })"
           type="password"
           show-password
+          clearable
         />
       </el-form-item>
       <el-form-item prop="confirm_pwd" :label="t('user.upgrade_pwd.confirm_pwd')">
@@ -102,6 +104,7 @@ defineExpose({
           :placeholder="t('common.please_input', { msg: t('user.upgrade_pwd.confirm_pwd') })"
           type="password"
           show-password
+          clearable
         />
       </el-form-item>
     </el-form>
diff --git a/frontend/src/views/chat/ChatList.vue b/frontend/src/views/chat/ChatList.vue
index a3b4e732..d81353b2 100644
--- a/frontend/src/views/chat/ChatList.vue
+++ b/frontend/src/views/chat/ChatList.vue
@@ -264,6 +264,7 @@ const handleConfirmPassword = () => {
           :placeholder="
             $t('datasource.please_enter') + $t('common.empty') + $t('qa.conversation_title')
           "
+          clearable
           autocomplete="off"
         />
       </el-form-item>
diff --git a/frontend/src/views/chat/index.vue b/frontend/src/views/chat/index.vue
index 998f510e..ca5a773f 100644
--- a/frontend/src/views/chat/index.vue
+++ b/frontend/src/views/chat/index.vue
@@ -290,6 +290,7 @@
             ref="inputRef"
             v-model="inputMessage"
             :disabled="isTyping"
+            clearable
             class="input-area"
             type="textarea"
             :rows="1"
diff --git a/frontend/src/views/dashboard/common/ResourceGroupOpt.vue b/frontend/src/views/dashboard/common/ResourceGroupOpt.vue
index d71353c7..f552b15e 100644
--- a/frontend/src/views/dashboard/common/ResourceGroupOpt.vue
+++ b/frontend/src/views/dashboard/common/ResourceGroupOpt.vue
@@ -185,6 +185,7 @@ defineExpose({
         <el-input
           v-model="resourceForm.name"
           :placeholder="state.placeholder"
+          clearable
           @keydown.stop
           @keyup.stop
         />
diff --git a/frontend/src/views/dashboard/components/sq-tab/index.vue b/frontend/src/views/dashboard/components/sq-tab/index.vue
index 652026b1..69cc8847 100644
--- a/frontend/src/views/dashboard/components/sq-tab/index.vue
+++ b/frontend/src/views/dashboard/components/sq-tab/index.vue
@@ -264,7 +264,12 @@ defineExpose({
       :close-on-click-modal="false"
       center
     >
-      <el-input v-model="state.textarea" maxlength="50" :placeholder="t('common.input_content')" />
+      <el-input
+        v-model="state.textarea"
+        maxlength="50"
+        clearable
+        :placeholder="t('common.input_content')"
+      />
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="state.dialogVisible = false">{{ t('common.cancel') }}</el-button>
diff --git a/frontend/src/views/ds/DataTable.vue b/frontend/src/views/ds/DataTable.vue
index 1491e400..b19666f1 100644
--- a/frontend/src/views/ds/DataTable.vue
+++ b/frontend/src/views/ds/DataTable.vue
@@ -431,6 +431,7 @@ const btnSelectClick = (val: any) => {
       :placeholder="$t('datasource.please_enter')"
       :rows="3"
       type="textarea"
+      clearable
     />
     <div style="display: flex; justify-content: flex-end; margin-top: 20px">
       <el-button @click="closeTable">{{ t('common.cancel') }}</el-button>
@@ -450,6 +451,7 @@ const btnSelectClick = (val: any) => {
       v-model="fieldComment"
       :placeholder="$t('datasource.please_enter')"
       :rows="3"
+      clearable
       type="textarea"
     />
     <div style="display: flex; justify-content: flex-end; margin-top: 20px">
diff --git a/frontend/src/views/ds/DatasourceForm.vue b/frontend/src/views/ds/DatasourceForm.vue
index 5daa8916..862a7416 100644
--- a/frontend/src/views/ds/DatasourceForm.vue
+++ b/frontend/src/views/ds/DatasourceForm.vue
@@ -558,6 +558,7 @@ defineExpose({
         <el-form-item :label="t('ds.form.name')" prop="name">
           <el-input
             v-model="form.name"
+            clearable
             :placeholder="$t('datasource.please_enter') + $t('common.empty') + t('ds.form.name')"
           />
         </el-form-item>
@@ -570,6 +571,7 @@ defineExpose({
             :rows="2"
             show-word-limit
             maxlength="200"
+            clearable
             type="textarea"
           />
         </el-form-item>
@@ -577,18 +579,21 @@ defineExpose({
           <el-form-item :label="t('ds.form.host')" prop="host">
             <el-input
               v-model="form.host"
+              clearable
               :placeholder="$t('datasource.please_enter') + $t('common.empty') + t('ds.form.host')"
             />
           </el-form-item>
           <el-form-item :label="t('ds.form.port')" prop="port">
             <el-input
               v-model="form.port"
+              clearable
               :placeholder="$t('datasource.please_enter') + $t('common.empty') + t('ds.form.port')"
             />
           </el-form-item>
           <el-form-item :label="t('ds.form.username')">
             <el-input
               v-model="form.username"
+              clearable
               :placeholder="
                 $t('datasource.please_enter') + $t('common.empty') + t('ds.form.username')
               "
@@ -597,6 +602,7 @@ defineExpose({
           <el-form-item :label="t('ds.form.password')">
             <el-input
               v-model="form.password"
+              clearable
               :placeholder="
                 $t('datasource.please_enter') + $t('common.empty') + t('ds.form.password')
               "
@@ -607,6 +613,7 @@ defineExpose({
           <el-form-item :label="t('ds.form.database')" prop="database">
             <el-input
               v-model="form.database"
+              clearable
               :placeholder="
                 $t('datasource.please_enter') + $t('common.empty') + t('ds.form.database')
               "
@@ -625,6 +632,7 @@ defineExpose({
           <el-form-item :label="t('ds.form.extra_jdbc')">
             <el-input
               v-model="form.extraJdbc"
+              clearable
               :placeholder="
                 $t('datasource.please_enter') + $t('common.empty') + t('ds.form.extra_jdbc')
               "
@@ -633,12 +641,19 @@ defineExpose({
           <el-form-item v-if="haveSchema.includes(form.type)" label="Schema" prop="dbSchema">
             <el-input
               v-model="form.dbSchema"
+              clearable
               :placeholder="$t('datasource.please_enter') + $t('common.empty') + 'Schema'"
             />
             <el-button v-if="false" link type="primary" :icon="Plus">Get Schema</el-button>
           </el-form-item>
           <el-form-item :label="t('ds.form.timeout')" prop="timeout">
-            <el-input-number v-model="form.timeout" :min="0" :max="300" controls-position="right" />
+            <el-input-number
+              v-model="form.timeout"
+              clearable
+              :min="0"
+              :max="300"
+              controls-position="right"
+            />
           </el-form-item>
         </div>
       </el-form>
diff --git a/frontend/src/views/ds/TableList.vue b/frontend/src/views/ds/TableList.vue
index cc371f0a..8eadc619 100644
--- a/frontend/src/views/ds/TableList.vue
+++ b/frontend/src/views/ds/TableList.vue
@@ -14,6 +14,7 @@
         </div>
         <el-input
           v-model="searchValue"
+          clearable
           style="margin: 16px 0"
           :placeholder="t('ds.Search Datasource')"
         />
@@ -105,7 +106,7 @@
       @closed="closeTable"
     >
       <div>{{ t('ds.edit.table_comment_label') }}</div>
-      <el-input v-model="tableComment" :rows="3" type="textarea" />
+      <el-input v-model="tableComment" clearable :rows="3" type="textarea" />
       <div style="display: flex; justify-content: flex-end; margin-top: 20px">
         <el-button @click="closeTable">{{ t('common.cancel') }}</el-button>
         <el-button type="primary" @click="saveTable">{{ t('common.confirm') }}</el-button>
@@ -121,7 +122,7 @@
       @closed="closeField"
     >
       <div>{{ t('ds.edit.field_comment_label') }}</div>
-      <el-input v-model="fieldComment" :rows="3" type="textarea" />
+      <el-input v-model="fieldComment" clearable :rows="3" type="textarea" />
       <div style="display: flex; justify-content: flex-end; margin-top: 20px">
         <el-button @click="closeField">{{ t('common.cancel') }}</el-button>
         <el-button type="primary" @click="saveField">{{ t('common.confirm') }}</el-button>
diff --git a/frontend/src/views/ds/form.vue b/frontend/src/views/ds/form.vue
index d973cce0..90889e90 100644
--- a/frontend/src/views/ds/form.vue
+++ b/frontend/src/views/ds/form.vue
@@ -34,10 +34,10 @@
         @submit.prevent
       >
         <el-form-item :label="t('ds.form.name')" prop="name">
-          <el-input v-model="form.name" />
+          <el-input v-model="form.name" clearable />
         </el-form-item>
         <el-form-item :label="t('ds.form.description')">
-          <el-input v-model="form.description" :rows="2" type="textarea" />
+          <el-input v-model="form.description" clearable :rows="2" type="textarea" />
         </el-form-item>
         <el-form-item :label="t('ds.type')" prop="type">
           <el-select v-model="form.type" placeholder="Select Type" :disabled="!isCreate">
@@ -68,19 +68,19 @@
         </div>
         <div v-else>
           <el-form-item :label="t('ds.form.host')" prop="host">
-            <el-input v-model="form.host" />
+            <el-input v-model="form.host" clearable />
           </el-form-item>
           <el-form-item :label="t('ds.form.port')" prop="port">
-            <el-input v-model="form.port" />
+            <el-input v-model="form.port" clearable />
           </el-form-item>
           <el-form-item :label="t('ds.form.username')">
-            <el-input v-model="form.username" />
+            <el-input v-model="form.username" clearable />
           </el-form-item>
           <el-form-item :label="t('ds.form.password')">
-            <el-input v-model="form.password" type="password" show-password />
+            <el-input v-model="form.password" clearable type="password" show-password />
           </el-form-item>
           <el-form-item :label="t('ds.form.database')" prop="database">
-            <el-input v-model="form.database" />
+            <el-input v-model="form.database" clearable />
           </el-form-item>
           <el-form-item
             v-if="form.type === 'oracle'"
@@ -93,18 +93,24 @@
             </el-radio-group>
           </el-form-item>
           <el-form-item :label="t('ds.form.extra_jdbc')">
-            <el-input v-model="form.extraJdbc" />
+            <el-input v-model="form.extraJdbc" clearable />
           </el-form-item>
           <el-form-item
             v-if="haveSchema.includes(form.type)"
             :label="t('ds.form.schema')"
             prop="dbSchema"
           >
-            <el-input v-model="form.dbSchema" />
+            <el-input v-model="form.dbSchema" clearable />
             <el-button v-if="false" link type="primary" :icon="Plus">Get Schema</el-button>
           </el-form-item>
           <el-form-item :label="t('ds.form.timeout')" prop="timeout">
-            <el-input-number v-model="form.timeout" :min="0" :max="300" controls-position="right" />
+            <el-input-number
+              v-model="form.timeout"
+              clearable
+              :min="0"
+              :max="300"
+              controls-position="right"
+            />
           </el-form-item>
           <span>
             <span>{{ t('ds.form.support_version') }}:&nbsp;</span>
diff --git a/frontend/src/views/embedded/assistant.vue b/frontend/src/views/embedded/assistant.vue
index d6dbe568..42129fd8 100644
--- a/frontend/src/views/embedded/assistant.vue
+++ b/frontend/src/views/embedded/assistant.vue
@@ -38,6 +38,7 @@ const textareaVal = ref('')
           v-model="textareaVal"
           :autosize="{ minRows: 1, maxRows: 8.5848 }"
           type="textarea"
+          clearable
           :placeholder="$t('embedded.enter_a_question')"
         />
         <el-tooltip :offset="10" effect="dark" :content="$t('embedded.send')" placement="top">
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index b944672d..242da5c4 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -17,6 +17,7 @@
             <el-form-item prop="username">
               <el-input
                 v-model="loginForm.username"
+                clearable
                 :placeholder="$t('common.your_account_email_address')"
                 size="large"
               ></el-input>
@@ -27,6 +28,7 @@
                 :placeholder="$t('common.enter_your_password')"
                 type="password"
                 show-password
+                clearable
                 size="large"
               ></el-input>
             </el-form-item>
diff --git a/frontend/src/views/setting/Professional.vue b/frontend/src/views/setting/Professional.vue
index 111794e5..bd19b976 100644
--- a/frontend/src/views/setting/Professional.vue
+++ b/frontend/src/views/setting/Professional.vue
@@ -6,6 +6,7 @@
           v-model="keyword"
           class="sqlbot-search"
           placeholder="Search"
+          clearable
           prefix-icon="el-icon-search"
           @keyup.enter="handleSearch"
         >
@@ -68,10 +69,10 @@
       @submit.prevent
     >
       <el-form-item label="Term name">
-        <el-input v-model="state.form.term" autocomplete="off" />
+        <el-input v-model="state.form.term" clearable autocomplete="off" />
       </el-form-item>
       <el-form-item label="Definition">
-        <el-input v-model="state.form.definition" type="textarea" />
+        <el-input v-model="state.form.definition" clearable type="textarea" />
       </el-form-item>
       <el-form-item label="Domain">
         <el-select v-model="state.form.domain" placeholder="Please select a domain">
diff --git a/frontend/src/views/system/embedded/index.vue b/frontend/src/views/system/embedded/index.vue
index 29085575..a076917d 100644
--- a/frontend/src/views/system/embedded/index.vue
+++ b/frontend/src/views/system/embedded/index.vue
@@ -592,6 +592,7 @@ const saveHandler = () => {
                 $t('common.empty') +
                 $t('embedded.basic_information')
               "
+              clearable
               autocomplete="off"
             />
           </el-form-item>
@@ -603,6 +604,7 @@ const saveHandler = () => {
               type="textarea"
               maxlength="200"
               show-word-limit
+              clearable
               :placeholder="$t('datasource.please_enter')"
               autocomplete="off"
             />
@@ -611,6 +613,7 @@ const saveHandler = () => {
           <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"
             />
@@ -634,6 +637,7 @@ const saveHandler = () => {
           <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')
               "
@@ -827,6 +831,7 @@ const saveHandler = () => {
       <el-form-item prop="source" :label="t('embedded.credential_name')">
         <el-input
           v-model="certificateForm.source"
+          clearable
           :placeholder="
             $t('datasource.please_enter') + $t('common.empty') + $t('embedded.credential_name')
           "
@@ -849,6 +854,7 @@ const saveHandler = () => {
       <el-form-item prop="target_key" :label="t('embedded.target_credential_name')">
         <el-input
           v-model="certificateForm.target_key"
+          clearable
           :placeholder="
             $t('datasource.please_enter') +
             $t('common.empty') +
@@ -873,6 +879,7 @@ const saveHandler = () => {
       <el-form-item prop="target_val" :label="t('embedded.target_credential')">
         <el-input
           v-model="certificateForm.target_val"
+          clearable
           :placeholder="
             $t('datasource.please_enter') + $t('common.empty') + $t('embedded.target_credential')
           "
diff --git a/frontend/src/views/system/model/ModelForm.vue b/frontend/src/views/system/model/ModelForm.vue
index fcbea1ac..9eeffd25 100644
--- a/frontend/src/views/system/model/ModelForm.vue
+++ b/frontend/src/views/system/model/ModelForm.vue
@@ -219,6 +219,7 @@ defineExpose({
           </template>
           <el-input
             v-model="modelForm.name"
+            clearable
             :placeholder="
               $t('datasource.please_enter') + $t('common.empty') + $t('model.model_name')
             "
@@ -253,6 +254,7 @@ defineExpose({
         <el-form-item 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')
             "
@@ -261,6 +263,7 @@ defineExpose({
         <el-form-item 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
diff --git a/frontend/src/views/system/model/ParamsForm.vue b/frontend/src/views/system/model/ParamsForm.vue
index 76b66e79..8d9cbebe 100644
--- a/frontend/src/views/system/model/ParamsForm.vue
+++ b/frontend/src/views/system/model/ParamsForm.vue
@@ -81,12 +81,14 @@ defineExpose({
       <el-form-item prop="key" :label="$t('model.parameters')">
         <el-input
           v-model="paramsForm.key"
+          clearable
           :placeholder="$t('datasource.please_enter') + $t('common.empty') + $t('model.parameters')"
         />
       </el-form-item>
       <el-form-item prop="name" :label="$t('model.display_name')">
         <el-input
           v-model="paramsForm.name"
+          clearable
           :placeholder="
             $t('datasource.please_enter') + $t('common.empty') + $t('model.display_name')
           "
@@ -95,6 +97,7 @@ defineExpose({
       <el-form-item prop="val" :label="$t('model.parameter_value')">
         <el-input
           v-model="paramsForm.val"
+          clearable
           :placeholder="
             $t('datasource.please_enter') + $t('common.empty') + $t('model.parameter_value')
           "
diff --git a/frontend/src/views/system/permission/auth-tree/FilterFiled.vue b/frontend/src/views/system/permission/auth-tree/FilterFiled.vue
index ecca4d01..68b00675 100644
--- a/frontend/src/views/system/permission/auth-tree/FilterFiled.vue
+++ b/frontend/src/views/system/permission/auth-tree/FilterFiled.vue
@@ -172,6 +172,7 @@ const emits = defineEmits(['update:item', 'del'])
           style="max-width: 280px; margin-left: 8px"
           :placeholder="$t('datasource.please_enter')"
           class="input-with-select"
+          clearable
         >
           <template #prepend>
             <el-select
diff --git a/frontend/src/views/system/user/User.vue b/frontend/src/views/system/user/User.vue
index e0cc058f..466d4eb5 100644
--- a/frontend/src/views/system/user/User.vue
+++ b/frontend/src/views/system/user/User.vue
@@ -7,6 +7,7 @@
           v-model="keyword"
           style="width: 240px; margin-right: 12px"
           :placeholder="$t('user.name_account_email')"
+          clearable
           @keyup.enter="handleSearch"
           @blur="handleSearch"
         >
@@ -240,6 +241,7 @@
           :placeholder="$t('datasource.please_enter') + $t('common.empty') + $t('user.name')"
           autocomplete="off"
           maxlength="50"
+          clearable
         />
       </el-form-item>
       <el-form-item prop="account" :label="t('user.account')">
@@ -249,6 +251,7 @@
           :placeholder="$t('datasource.please_enter') + $t('common.empty') + $t('user.account')"
           autocomplete="off"
           maxlength="50"
+          clearable
         />
       </el-form-item>
       <el-form-item prop="email" :label="$t('user.email')">
@@ -256,6 +259,7 @@
           v-model="state.form.email"
           :placeholder="$t('datasource.please_enter') + $t('common.empty') + $t('user.email')"
           autocomplete="off"
+          clearable
         />
       </el-form-item>
       <!-- <el-form-item :label="$t('user.phone_number')">
@@ -316,6 +320,7 @@
             $t('datasource.please_enter') + $t('common.empty') + $t('user.new_password')
           "
           autocomplete="off"
+          clearable
         />
       </el-form-item>
       <el-form-item prop="old" :label="t('user.confirm_password')">
@@ -325,6 +330,7 @@
             $t('datasource.please_enter') + $t('common.empty') + $t('user.confirm_password')
           "
           autocomplete="off"
+          clearable
         />
       </el-form-item>
     </el-form>
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index 1fe626a2..801fd1c2 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -7,6 +7,7 @@
           class="sqlbot-search"
           placeholder="Search"
           prefix-icon="el-icon-search"
+          clearable
           @keyup.enter="handleSearch"
         >
           <template #prefix>
@@ -97,10 +98,10 @@
       @submit.prevent
     >
       <el-form-item label="Account">
-        <el-input v-model="state.form.term" autocomplete="off" />
+        <el-input v-model="state.form.term" clearable autocomplete="off" />
       </el-form-item>
       <el-form-item label="Definition">
-        <el-input v-model="state.form.definition" type="textarea" />
+        <el-input v-model="state.form.definition" clearable type="textarea" />
       </el-form-item>
       <el-form-item label="Domain">
         <el-select v-model="state.form.domain" placeholder="Please select a domain">
diff --git a/frontend/src/views/system/workspace/ParamsForm.vue b/frontend/src/views/system/workspace/ParamsForm.vue
index a09b565b..d79dcf89 100644
--- a/frontend/src/views/system/workspace/ParamsForm.vue
+++ b/frontend/src/views/system/workspace/ParamsForm.vue
@@ -69,12 +69,14 @@ defineExpose({
       <el-form-item prop="key" :label="$t('model.parameters')">
         <el-input
           v-model="paramsForm.key"
+          clearable
           :placeholder="$t('datasource.please_enter') + $t('common.empty') + $t('model.parameters')"
         />
       </el-form-item>
       <el-form-item prop="name" :label="$t('model.display_name')">
         <el-input
           v-model="paramsForm.name"
+          clearable
           :placeholder="
             $t('datasource.please_enter') + $t('common.empty') + $t('model.display_name')
           "
@@ -83,6 +85,7 @@ defineExpose({
       <el-form-item prop="val" :label="$t('model.parameter_value')">
         <el-input
           v-model="paramsForm.val"
+          clearable
           :placeholder="
             $t('datasource.please_enter') + $t('common.empty') + $t('model.parameter_value')
           "
diff --git a/frontend/src/views/system/workspace/index.vue b/frontend/src/views/system/workspace/index.vue
index fa744459..4a83ff7d 100644
--- a/frontend/src/views/system/workspace/index.vue
+++ b/frontend/src/views/system/workspace/index.vue
@@ -549,6 +549,7 @@ const handleCurrentChange = (val: number) => {
       <el-form-item prop="name" :label="t('workspace.workspace_name')">
         <el-input
           v-model="workspaceForm.name"
+          clearable
           maxlength="50"
           :placeholder="
             $t('datasource.please_enter') + $t('common.empty') + $t('workspace.workspace_name')
diff --git a/frontend/src/views/work/index.vue b/frontend/src/views/work/index.vue
index 36a9f864..fd467c60 100644
--- a/frontend/src/views/work/index.vue
+++ b/frontend/src/views/work/index.vue
@@ -55,7 +55,12 @@ const dialogVisible = ref(false)
     modal-class="select-datasource_dialog"
   >
     <div class="search-datasource">
-      <el-input v-model="datasourceName" style="width: 240px" placeholder="Please input" />
+      <el-input
+        v-model="datasourceName"
+        clearable
+        style="width: 240px"
+        placeholder="Please input"
+      />
     </div>
     <div class="datasource-content">
       <DatasourceCard