diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
index 0973ef7840..18e0380afb 100644
--- a/web/public/locales/en/translation.json
+++ b/web/public/locales/en/translation.json
@@ -63,7 +63,8 @@
   "Page": "Page",
   "Save": "Save",
   "Search": "Search",
-  "ToConfirm": "to determine",
+  "ToConfirm": "to confirm",
+  "NameNotMatch": "Name not match",
   "Total": "Total",
   "Update": "Update ",
   "UpdateSuccess": "Update Success",
@@ -581,7 +582,9 @@
   "SettingModal": {
     "Exchange": "Exchange",
     "FunctionName": "Funciton Name",
-    "FunctionDesc": "Function Description"
+    "FunctionDesc": "Function Description",
+    "FunctionDesc_Name": "Function Description - Name",
+    "FunctionName_Desc": "Function Name - Description"
   },
   "Expenses": "Expenses",
   "OrderNumber": "Order Number",
@@ -648,4 +651,4 @@
   "LastPage": "Last Page",
   "FirstPage": "First Page",
   "SavedSuccessfully": "Saved Successfully"
-}
+}
\ No newline at end of file
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
index 3908e7747a..3afe1e8fb9 100644
--- a/web/public/locales/zh-CN/translation.json
+++ b/web/public/locales/zh-CN/translation.json
@@ -64,6 +64,7 @@
   "Save": "保存",
   "Search": "搜索",
   "ToConfirm": "进行确定",
+  "NameNotMatch": "名称不匹配",
   "Total": "总数",
   "Update": "更新",
   "UpdateSuccess": "更新成功",
@@ -581,7 +582,9 @@
   "SettingModal": {
     "Exchange": "兑换",
     "FunctionName": "函数名",
-    "FunctionDesc": "函数描述"
+    "FunctionDesc": "函数描述",
+    "FunctionDesc_Name": "函数描述 - 函数名",
+    "FunctionName_Desc": "函数名 - 函数描述"
   },
   "Expenses": "支出",
   "OrderNumber": "订单号",
@@ -648,4 +651,4 @@
   "LastPage": "最后一页",
   "FirstPage": "第一页",
   "SavedSuccessfully": "保存成功"
-}
+}
\ No newline at end of file
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
index b8425f6f1a..e20d2af3b0 100644
--- a/web/public/locales/zh/translation.json
+++ b/web/public/locales/zh/translation.json
@@ -64,6 +64,7 @@
   "Save": "保存",
   "Search": "搜索",
   "ToConfirm": "进行确定",
+  "NameNotMatch": "名称不匹配",
   "Total": "总数",
   "Update": "更新",
   "UpdateSuccess": "更新成功",
@@ -581,7 +582,9 @@
   "SettingModal": {
     "Exchange": "兑换",
     "FunctionName": "函数名",
-    "FunctionDesc": "函数描述"
+    "FunctionDesc": "函数描述",
+    "FunctionDesc_Name": "函数描述 - 函数名",
+    "FunctionName_Desc": "函数名 - 函数描述"
   },
   "MyIncomeAndExpenses": "我的收支",
   "Expenses": "支出",
@@ -648,4 +651,4 @@
   "LastPage": "最后一页",
   "FirstPage": "第一页",
   "SavedSuccessfully": "保存成功"
-}
+}
\ No newline at end of file
diff --git a/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx b/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx
index 8834c015c3..7a823ca92c 100644
--- a/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx
+++ b/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 import {
   Button,
   FormControl,
-  FormErrorMessage,
   Input,
   Modal,
   ModalBody,
@@ -19,6 +18,8 @@ import { RecycleDeleteIcon } from "@/components/CommonIcon";
 import IconText from "@/components/IconText";
 
 import { useDeleteDBMutation } from "../../service";
+
+import useGlobalStore from "@/pages/globalStore";
 function DeleteCollectionModal(props: { database: any }) {
   const { database } = props;
   const { t } = useTranslation();
@@ -28,14 +29,9 @@ function DeleteCollectionModal(props: { database: any }) {
       onClose();
     },
   });
+  const { showError } = useGlobalStore();
 
-  const {
-    register,
-    handleSubmit,
-    setFocus,
-    reset,
-    formState: { errors },
-  } = useForm<{
+  const { register, handleSubmit, setFocus, reset, setValue } = useForm<{
     name: string;
   }>();
 
@@ -63,32 +59,33 @@ function DeleteCollectionModal(props: { database: any }) {
             <p className="mb-2">
               {t("CollectionPanel.DeleteCollectionTip")}
               <span className="mx-1 font-bold">{database.name}</span>
-              {t("DeleteTip")}。
+              {t("DeleteTip")}
             </p>
             <p className="mb-4">
               {t("CollectionPanel.InputName")}
               <span className="mx-1 font-bold text-red-500">{database.name}</span>
-              {t("ToConfirm")}。
+              {t("ToConfirm")}
             </p>
             <FormControl>
               <Input
-                {...register("name", {
-                  required: "name is required",
-                })}
+                {...register("name")}
                 id="name"
                 placeholder={database?.name}
-                variant="filled"
+                onChange={(e) => {
+                  setValue("name", e.target.value.trim());
+                }}
               />
-              <FormErrorMessage>{errors.name && errors.name.message}</FormErrorMessage>
             </FormControl>
           </ModalBody>
 
           <ModalFooter>
             <Button
               isLoading={deleteDBMutation.isLoading}
-              colorScheme="red"
               onClick={handleSubmit(async (data) => {
-                if (data.name === database.name) {
+                if (data.name !== database.name) {
+                  showError(t("NameNotMatch"));
+                  return;
+                } else {
                   await deleteDBMutation.mutateAsync({ name: database.name });
                 }
               })}
diff --git a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
index 4613382f4c..8bab4d6e07 100644
--- a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
+++ b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
@@ -223,10 +223,34 @@ export default function FunctionList() {
         fileType = FileType.folder;
       }
       const level = item.level || item?.name.split("/").length - 1;
-      const itemDisplay =
-        commonSettings.funcListDisplay === "name"
-          ? item?.name.split("/")[level]
-          : item?.desc || item?.name.split("/")[level];
+      const itemDisplay = (() => {
+        if (
+          item.children?.length ||
+          isFuncList ||
+          commonSettings.funcListDisplay === "name" ||
+          !item.desc
+        ) {
+          return <span>{item.name.split("/")[level]}</span>;
+        } else if (commonSettings.funcListDisplay === "desc") {
+          return <span>{item.desc}</span>;
+        } else if (commonSettings.funcListDisplay === "desc-name") {
+          return (
+            <span className="flex items-center">
+              <span>{item.desc}</span>
+              <div className="ml-1 translate-y-[1px] scale-[.85] opacity-75">{` ${
+                item.name.split("/")[level]
+              }`}</div>
+            </span>
+          );
+        } else {
+          return (
+            <span className="flex items-center">
+              <span>{item.name.split("/")[level]}</span>
+              <div className="ml-1 translate-y-[1px] scale-[.85] opacity-75">{` ${item.desc}`}</div>
+            </span>
+          );
+        }
+      })();
 
       return (
         <React.Fragment key={index}>
@@ -253,13 +277,13 @@ export default function FunctionList() {
           >
             <div
               className={clsx(
-                "overflow-hidden text-ellipsis whitespace-nowrap font-medium",
+                "flex items-center overflow-hidden text-ellipsis whitespace-nowrap font-medium",
                 !isFuncList ? `ml-${2 * level}` : "",
               )}
             >
               <FileTypeIcon type={fileType} width="12px" />
               <span className="ml-2" style={{ fontSize: commonSettings.fontSize - 2 }}>
-                {item.children?.length || isFuncList ? item.name : itemDisplay}
+                {itemDisplay}
               </span>
             </div>
             {!item.children?.length && (
diff --git a/web/src/pages/app/setting/SysSetting/CommonSetting/index.tsx b/web/src/pages/app/setting/SysSetting/CommonSetting/index.tsx
index d6d68b0ed3..204ae3b0de 100644
--- a/web/src/pages/app/setting/SysSetting/CommonSetting/index.tsx
+++ b/web/src/pages/app/setting/SysSetting/CommonSetting/index.tsx
@@ -68,6 +68,8 @@ export default function CommonSetting() {
           >
             <option value="name">{t("SettingModal.FunctionName")}</option>
             <option value="desc">{t("SettingModal.FunctionDesc")}</option>
+            <option value="desc-name">{t("SettingModal.FunctionDesc_Name")}</option>
+            <option value="name-desc">{t("SettingModal.FunctionName_Desc")}</option>
           </Select>
         </div>
       </div>
diff --git a/web/src/pages/app/storages/mods/DeleteBucketModal/index.tsx b/web/src/pages/app/storages/mods/DeleteBucketModal/index.tsx
index 1b55629c37..1a210dc7af 100644
--- a/web/src/pages/app/storages/mods/DeleteBucketModal/index.tsx
+++ b/web/src/pages/app/storages/mods/DeleteBucketModal/index.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 import {
   Button,
   FormControl,
-  FormErrorMessage,
   Input,
   Modal,
   ModalBody,
@@ -22,19 +21,15 @@ import IconText from "@/components/IconText";
 import { useBucketDeleteMutation } from "../../service";
 
 import { TBucket } from "@/apis/typing";
+import useGlobalStore from "@/pages/globalStore";
 function DeleteBucketModal(props: { storage: TBucket; onSuccessAction?: () => void }) {
   const { storage, onSuccessAction } = props;
+  const { showError } = useGlobalStore();
 
   const bucketDeleteMutation = useBucketDeleteMutation();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { t } = useTranslation();
-  const {
-    register,
-    handleSubmit,
-    setFocus,
-    reset,
-    formState: { errors },
-  } = useForm<{
+  const { register, handleSubmit, setFocus, reset, setValue } = useForm<{
     name: string;
   }>();
 
@@ -62,23 +57,22 @@ function DeleteBucketModal(props: { storage: TBucket; onSuccessAction?: () => vo
             <p className="mb-2">
               {t("StoragePanel.DeleteConfirm")}
               <span className=" mr-1 font-bold text-black">{" " + storage.name}</span>
-              {t("DeleteTip")}。
+              {t("DeleteTip")}
             </p>
             <p className="mb-4">
               {t("StoragePanel.StorageNameTip")}
               <span className="mx-1 font-bold text-red-500">{storage.name}</span>
-              {t("ToConfirm")}。
+              {t("ToConfirm")}
             </p>
             <FormControl>
               <Input
-                {...register("name", {
-                  required: "name is required",
-                })}
+                {...register("name")}
                 id="name"
                 placeholder={storage?.name}
-                variant="filled"
+                onChange={(e) => {
+                  setValue("name", e.target.value.trim());
+                }}
               />
-              <FormErrorMessage>{errors.name && errors.name.message}</FormErrorMessage>
             </FormControl>
           </ModalBody>
 
@@ -87,7 +81,9 @@ function DeleteBucketModal(props: { storage: TBucket; onSuccessAction?: () => vo
               isLoading={bucketDeleteMutation.isLoading}
               colorScheme="red"
               onClick={handleSubmit(async (data) => {
-                if (data.name === storage.name) {
+                if (data.name !== storage.name) {
+                  showError(t("NameNotMatch"));
+                } else {
                   const res = await bucketDeleteMutation.mutateAsync({ name: storage.name });
                   if (!res.error) {
                     onSuccessAction && onSuccessAction();
diff --git a/web/src/pages/functionTemplate/Mods/MonacoEditor/index.tsx b/web/src/pages/functionTemplate/Mods/MonacoEditor/index.tsx
index 938a0ad3cf..4b267274f8 100644
--- a/web/src/pages/functionTemplate/Mods/MonacoEditor/index.tsx
+++ b/web/src/pages/functionTemplate/Mods/MonacoEditor/index.tsx
@@ -199,7 +199,7 @@ const MonacoEditor = (props: {
           )}
         </span>
       </div>
-      <div ref={monacoEl} className="mb-2 mt-1 h-[90%]" />
+      <div ref={monacoEl} className="mb-2 mt-1 h-[90%] min-h-[300px]" />
     </div>
   );
 };
diff --git a/web/src/pages/home/mods/DeleteAppModal/index.tsx b/web/src/pages/home/mods/DeleteAppModal/index.tsx
index f8387e3588..2ddc05696f 100644
--- a/web/src/pages/home/mods/DeleteAppModal/index.tsx
+++ b/web/src/pages/home/mods/DeleteAppModal/index.tsx
@@ -4,7 +4,6 @@ import { Trans, useTranslation } from "react-i18next";
 import {
   Button,
   FormControl,
-  FormErrorMessage,
   Input,
   Modal,
   ModalBody,
@@ -32,11 +31,7 @@ function DeleteAppModal(props: {
   const { t } = useTranslation();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const showError = useGlobalStore((state) => state.showError);
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<{
+  const { register, handleSubmit, setValue } = useForm<{
     appid: string;
   }>();
 
@@ -83,23 +78,23 @@ function DeleteAppModal(props: {
             </p>
             <FormControl mt="4" isRequired>
               <Input
-                {...register("appid", {
-                  required: "appid is required",
-                })}
-                id="name"
+                {...register("appid")}
+                id="appid"
                 placeholder={item.appid}
-                variant="filled"
+                onChange={(e) => {
+                  setValue("appid", e.target.value.trim());
+                }}
               />
-              <FormErrorMessage>{errors.appid && errors.appid.message}</FormErrorMessage>
             </FormControl>
           </ModalBody>
 
           <ModalFooter>
             <Button
               isLoading={deleteApplicationMutation.isLoading}
-              colorScheme="red"
               onClick={handleSubmit(async (data) => {
-                if (item.appid === data.appid) {
+                if (item.appid !== data.appid) {
+                  showError(t("NameNotMatch"));
+                } else {
                   await deleteApplicationMutation.mutateAsync({
                     appid: item.appid,
                   });