From 35c946a0649e0100e9a7a69e8d0175bc4a07fb60 Mon Sep 17 00:00:00 2001
From: CityFun <31820853+zhengkunwang223@users.noreply.github.com>
Date: Thu, 27 Nov 2025 11:21:23 +0800
Subject: [PATCH] feat: support creating databases with custom charset and
 collation during app installation (#11092)

---
 .../src/views/app-store/detail/params/index.vue  | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/app-store/detail/params/index.vue b/frontend/src/views/app-store/detail/params/index.vue
index 4f1631d66..64b158ac6 100644
--- a/frontend/src/views/app-store/detail/params/index.vue
+++ b/frontend/src/views/app-store/detail/params/index.vue
@@ -118,12 +118,20 @@
             </div>
             <span class="input-help" v-if="p.description">{{ getDescription(p) }}</span>
         </el-form-item>
-        <el-form-item v-if="form[p.envKey] == 'mysql'" :label="$t('database.format')" prop="format">
+        <el-form-item
+            v-if="form[p.envKey] == 'mysql' || form[p.envKey] == 'mariadb'"
+            :label="$t('database.format')"
+            prop="format"
+        >
             <el-select filterable v-model="form.format" @change="loadCollations()">
                 <el-option v-for="item of formatOptions" :key="item.format" :label="item.format" :value="item.format" />
             </el-select>
         </el-form-item>
-        <el-form-item v-if="form[p.envKey] == 'mysql'" :label="$t('database.collation')" prop="collation">
+        <el-form-item
+            v-if="form[p.envKey] == 'mysql' || form[p.envKey] == 'mariadb'"
+            :label="$t('database.collation')"
+            prop="collation"
+        >
             <el-select filterable v-model="form.collation">
                 <el-option v-for="item of collationOptions" :key="item" :label="item" :value="item" />
             </el-select>
@@ -256,7 +264,7 @@ const handleParams = () => {
 const getServices = async (childKey: string, key: string | undefined, pObj: ParamObj | undefined) => {
     pObj.services = [];
     appKey.value = key || '';
-    if (appKey.value == 'mysql') {
+    if (appKey.value == 'mysql' || appKey.value == 'mariadb') {
         form.format = 'utf8mb4';
     }
     await getAppService(key).then((res) => {
@@ -286,7 +294,7 @@ const changeService = (value: string, services: App.AppService[]) => {
             });
         }
     });
-    if (appKey.value == 'mysql') {
+    if (appKey.value == 'mysql' || appKey.value == 'mariadb') {
         loadOptions(value);
     }
     updateParam();