diff --git a/backend/init/migration/migrations/init.go b/backend/init/migration/migrations/init.go
index 79b204a13..b9b54ca2e 100644
--- a/backend/init/migration/migrations/init.go
+++ b/backend/init/migration/migrations/init.go
@@ -87,7 +87,7 @@ var AddTableSetting = &gormigrate.Migration{
 		if err := tx.Create(&model.Setting{Key: "ExpirationTime", Value: time.Now().AddDate(0, 0, 10).Format("2006.01.02 15:04:05")}).Error; err != nil {
 			return err
 		}
-		if err := tx.Create(&model.Setting{Key: "ExpirationDays", Value: "10"}).Error; err != nil {
+		if err := tx.Create(&model.Setting{Key: "ExpirationDays", Value: "0"}).Error; err != nil {
 			return err
 		}
 		if err := tx.Create(&model.Setting{Key: "ComplexityVerification", Value: "enable"}).Error; err != nil {
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index ef8462508..43a9c389d 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -1,77 +1,57 @@
 <template>
     <div>
         <Submenu activeName="mysql" />
-        <div v-if="!mysqlInfo.isExist" style="margin-top: 20px">
-            <el-alert :closable="false" :title="$t('database.noMysql', ['Mysql'])" type="info">
-                <el-link icon="Position" @click="goRouter('/apps')" type="primary">
-                    {{ $t('database.goInstall') }}
-                </el-link>
-            </el-alert>
-        </div>
-        <div v-else>
-            <el-button v-if="!isOnSetting" style="margin-top: 20px" size="default" icon="Setting" @click="onSetting">
-                {{ $t('database.setting') }}
-            </el-button>
-            <el-button v-if="isOnSetting" style="margin-top: 20px" size="default" icon="Back" @click="onBacklist">
-                {{ $t('database.backList') }}
-            </el-button>
+        <AppStatus :app-key="'mysql'" style="margin-top: 20px" @setting="onSetting"></AppStatus>
+        <Setting ref="settingRef"></Setting>
 
-            <Setting ref="settingRef"></Setting>
-
-            <el-card v-if="!isOnSetting" style="margin-top: 5px">
-                <ComplexTable
-                    :pagination-config="paginationConfig"
-                    v-model:selects="selects"
-                    @search="search"
-                    :data="data"
-                >
-                    <template #toolbar>
-                        <el-button type="primary" @click="onOpenDialog()">{{ $t('commons.button.create') }}</el-button>
-                        <el-button>phpMyAdmin</el-button>
-                        <el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
-                            {{ $t('commons.button.delete') }}
-                        </el-button>
+        <el-card v-if="!isOnSetting" style="margin-top: 5px">
+            <ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" @search="search" :data="data">
+                <template #toolbar>
+                    <el-button type="primary" @click="onOpenDialog()">{{ $t('commons.button.create') }}</el-button>
+                    <el-button>phpMyAdmin</el-button>
+                    <el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
+                        {{ $t('commons.button.delete') }}
+                    </el-button>
+                </template>
+                <el-table-column type="selection" fix />
+                <el-table-column :label="$t('commons.table.name')" prop="name" />
+                <el-table-column :label="$t('commons.login.username')" prop="username" />
+                <el-table-column :label="$t('commons.login.password')" prop="password">
+                    <template #default="{ row }">
+                        <div v-if="!row.showPassword">
+                            <span style="float: left">***********</span>
+                            <div style="margin-top: 2px; cursor: pointer">
+                                <el-icon style="margin-left: 5px" @click="row.showPassword = true" :size="16">
+                                    <View />
+                                </el-icon>
+                            </div>
+                        </div>
+                        <div v-else>
+                            <span style="float: left">{{ row.password }}</span>
+                            <div style="margin-top: 4px; cursor: pointer">
+                                <el-icon style="margin-left: 5px" @click="row.showPassword = false" :size="16">
+                                    <Hide />
+                                </el-icon>
+                            </div>
+                        </div>
                     </template>
-                    <el-table-column type="selection" fix />
-                    <el-table-column :label="$t('commons.table.name')" prop="name" />
-                    <el-table-column :label="$t('commons.login.username')" prop="username" />
-                    <el-table-column :label="$t('commons.login.password')" prop="password">
-                        <template #default="{ row }">
-                            <div v-if="!row.showPassword">
-                                <span style="float: left">***********</span>
-                                <div style="margin-top: 2px; cursor: pointer">
-                                    <el-icon style="margin-left: 5px" @click="row.showPassword = true" :size="16">
-                                        <View />
-                                    </el-icon>
-                                </div>
-                            </div>
-                            <div v-else>
-                                <span style="float: left">{{ row.password }}</span>
-                                <div style="margin-top: 4px; cursor: pointer">
-                                    <el-icon style="margin-left: 5px" @click="row.showPassword = false" :size="16">
-                                        <Hide />
-                                    </el-icon>
-                                </div>
-                            </div>
-                        </template>
-                    </el-table-column>
-                    <el-table-column :label="$t('commons.table.description')" prop="description" />
-                    <el-table-column
-                        prop="createdAt"
-                        :label="$t('commons.table.date')"
-                        :formatter="dateFromat"
-                        show-overflow-tooltip
-                    />
-                    <fu-table-operations
-                        width="300px"
-                        :buttons="buttons"
-                        :ellipsis="10"
-                        :label="$t('commons.table.operate')"
-                        fix
-                    />
-                </ComplexTable>
-            </el-card>
-        </div>
+                </el-table-column>
+                <el-table-column :label="$t('commons.table.description')" prop="description" />
+                <el-table-column
+                    prop="createdAt"
+                    :label="$t('commons.table.date')"
+                    :formatter="dateFromat"
+                    show-overflow-tooltip
+                />
+                <fu-table-operations
+                    width="300px"
+                    :buttons="buttons"
+                    :ellipsis="10"
+                    :label="$t('commons.table.operate')"
+                    fix
+                />
+            </ComplexTable>
+        </el-card>
         <el-dialog v-model="changeVisiable" :destroy-on-close="true" width="30%">
             <template #header>
                 <div class="card-header">
@@ -132,18 +112,16 @@ import OperatrDialog from '@/views/database/mysql/create/index.vue';
 import BackupRecords from '@/views/database/mysql/backup/index.vue';
 import UploadDialog from '@/views/database/mysql/upload/index.vue';
 import Setting from '@/views/database/mysql/setting/index.vue';
+import AppStatus from '@/components/app-status/index.vue';
 import Submenu from '@/views/database/index.vue';
 import { dateFromat } from '@/utils/util';
-import { onMounted, reactive, ref } from 'vue';
+import { reactive, ref } from 'vue';
 import { deleteMysqlDB, searchMysqlDBs, updateMysqlDBInfo } from '@/api/modules/database';
 import i18n from '@/lang';
 import { useDeleteData } from '@/hooks/use-delete-data';
 import { ElForm, ElMessage } from 'element-plus';
 import { Database } from '@/api/interface/database';
 import { Rules } from '@/global/form-rules';
-import { CheckAppInstalled } from '@/api/modules/app';
-import { useRouter } from 'vue-router';
-const router = useRouter();
 
 const selects = ref<any>([]);
 const mysqlInfo = reactive({
@@ -187,11 +165,6 @@ const onSetting = async () => {
     };
     settingRef.value!.acceptParams(params);
 };
-const onBacklist = async () => {
-    isOnSetting.value = false;
-    search();
-    settingRef.value!.onClose();
-};
 
 const changeVisiable = ref(false);
 type FormInstance = InstanceType<typeof ElForm>;
@@ -219,20 +192,6 @@ const submitChangeInfo = async (formEl: FormInstance | undefined) => {
     });
 };
 
-const checkMysqlInstalled = async () => {
-    const res = await CheckAppInstalled('mysql');
-    mysqlInfo.isExist = res.data.isExist;
-    mysqlInfo.name = res.data.name;
-    mysqlInfo.version = res.data.version;
-    if (mysqlInfo.isExist) {
-        search();
-    }
-};
-
-const goRouter = async (path: string) => {
-    router.push({ path: path });
-};
-
 const search = async () => {
     let params = {
         page: paginationConfig.currentPage,
@@ -302,8 +261,4 @@ const buttons = [
         },
     },
 ];
-
-onMounted(() => {
-    checkMysqlInstalled();
-});
 </script>
diff --git a/frontend/src/views/database/mysql/setting/index.vue b/frontend/src/views/database/mysql/setting/index.vue
index 31449a379..cae3fd16e 100644
--- a/frontend/src/views/database/mysql/setting/index.vue
+++ b/frontend/src/views/database/mysql/setting/index.vue
@@ -1,94 +1,97 @@
 <template>
     <div class="demo-collapse" v-show="onSetting">
         <el-card style="margin-top: 5px">
-            <el-collapse v-model="activeName" accordion>
-                <el-collapse-item :title="$t('database.baseSetting')" name="1">
-                    <el-form :model="baseInfo" ref="panelFormRef" label-width="120px">
-                        <el-row>
-                            <el-col :span="1"><br /></el-col>
-                            <el-col :span="10">
-                                <el-form-item :label="$t('setting.port')" prop="port" :rules="Rules.port">
-                                    <el-input clearable type="number" v-model.number="baseInfo.port">
-                                        <template #append>
-                                            <el-button
-                                                @click="onSave(panelFormRef, 'port', baseInfo.port)"
-                                                icon="Collection"
-                                            >
-                                                {{ $t('commons.button.save') }}
-                                            </el-button>
-                                        </template>
-                                    </el-input>
-                                </el-form-item>
-                                <el-form-item
-                                    :label="$t('setting.password')"
-                                    prop="password"
-                                    :rules="Rules.requiredInput"
-                                >
-                                    <el-input type="password" show-password clearable v-model="baseInfo.password">
-                                        <template #append>
-                                            <el-button
-                                                @click="onSave(panelFormRef, 'password', baseInfo.password)"
-                                                icon="Collection"
-                                            >
-                                                {{ $t('commons.button.save') }}
-                                            </el-button>
-                                        </template>
-                                    </el-input>
-                                </el-form-item>
-                                <el-form-item
-                                    :label="$t('database.remoteAccess')"
-                                    prop="remoteConn"
-                                    :rules="Rules.requiredSelect"
-                                >
-                                    <el-switch
-                                        v-model="baseInfo.remoteConn"
-                                        @change="onSave(panelFormRef, 'remoteConn', baseInfo.remoteConn)"
-                                    />
-                                    <span class="input-help">{{ $t('database.remoteConnHelper') }}</span>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                    </el-form>
-                </el-collapse-item>
-                <el-collapse-item :title="$t('database.confChange')" name="2">
-                    <codemirror
-                        :autofocus="true"
-                        placeholder="None data"
-                        :indent-with-tab="true"
-                        :tabSize="4"
-                        style="margin-top: 10px; max-height: 500px"
-                        :lineWrapping="true"
-                        :matchBrackets="true"
-                        theme="cobalt"
-                        :styleActiveLine="true"
-                        :extensions="extensions"
-                        v-model="mysqlConf"
-                        :readOnly="true"
-                    />
-                    <el-button type="primary" style="width: 120px; margin-top: 10px" @click="onSaveFile()">
-                        {{ $t('commons.button.save') }}
-                    </el-button>
-                </el-collapse-item>
-                <el-collapse-item :title="$t('database.currentStatus')" name="3">
-                    <Status ref="statusRef" />
-                </el-collapse-item>
-                <el-collapse-item :title="$t('database.performanceTuning')" name="4">
-                    <Variables ref="variablesRef" />
-                </el-collapse-item>
-                <el-collapse-item title="日志" name="5">
-                    <ContainerLog ref="dialogContainerLogRef" />
-                </el-collapse-item>
+            <LayoutContent :header="$t('database.setting')" :back-name="'Mysql'" :reload="true">
+                <el-collapse v-model="activeName" accordion>
+                    <el-collapse-item :title="$t('database.baseSetting')" name="1">
+                        <el-form :model="baseInfo" ref="panelFormRef" label-width="120px">
+                            <el-row>
+                                <el-col :span="1"><br /></el-col>
+                                <el-col :span="10">
+                                    <el-form-item :label="$t('setting.port')" prop="port" :rules="Rules.port">
+                                        <el-input clearable type="number" v-model.number="baseInfo.port">
+                                            <template #append>
+                                                <el-button
+                                                    @click="onSave(panelFormRef, 'port', baseInfo.port)"
+                                                    icon="Collection"
+                                                >
+                                                    {{ $t('commons.button.save') }}
+                                                </el-button>
+                                            </template>
+                                        </el-input>
+                                    </el-form-item>
+                                    <el-form-item
+                                        :label="$t('setting.password')"
+                                        prop="password"
+                                        :rules="Rules.requiredInput"
+                                    >
+                                        <el-input type="password" show-password clearable v-model="baseInfo.password">
+                                            <template #append>
+                                                <el-button
+                                                    @click="onSave(panelFormRef, 'password', baseInfo.password)"
+                                                    icon="Collection"
+                                                >
+                                                    {{ $t('commons.button.save') }}
+                                                </el-button>
+                                            </template>
+                                        </el-input>
+                                    </el-form-item>
+                                    <el-form-item
+                                        :label="$t('database.remoteAccess')"
+                                        prop="remoteConn"
+                                        :rules="Rules.requiredSelect"
+                                    >
+                                        <el-switch
+                                            v-model="baseInfo.remoteConn"
+                                            @change="onSave(panelFormRef, 'remoteConn', baseInfo.remoteConn)"
+                                        />
+                                        <span class="input-help">{{ $t('database.remoteConnHelper') }}</span>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </el-form>
+                    </el-collapse-item>
+                    <el-collapse-item :title="$t('database.confChange')" name="2">
+                        <codemirror
+                            :autofocus="true"
+                            placeholder="None data"
+                            :indent-with-tab="true"
+                            :tabSize="4"
+                            style="margin-top: 10px; max-height: 500px"
+                            :lineWrapping="true"
+                            :matchBrackets="true"
+                            theme="cobalt"
+                            :styleActiveLine="true"
+                            :extensions="extensions"
+                            v-model="mysqlConf"
+                            :readOnly="true"
+                        />
+                        <el-button type="primary" style="width: 120px; margin-top: 10px" @click="onSaveFile()">
+                            {{ $t('commons.button.save') }}
+                        </el-button>
+                    </el-collapse-item>
+                    <el-collapse-item :title="$t('database.currentStatus')" name="3">
+                        <Status ref="statusRef" />
+                    </el-collapse-item>
+                    <el-collapse-item :title="$t('database.performanceTuning')" name="4">
+                        <Variables ref="variablesRef" />
+                    </el-collapse-item>
+                    <el-collapse-item title="日志" name="5">
+                        <ContainerLog ref="dialogContainerLogRef" />
+                    </el-collapse-item>
 
-                <el-collapse-item title="慢日志" name="6">
-                    <SlowLog ref="slowLogRef" />
-                </el-collapse-item>
-            </el-collapse>
+                    <el-collapse-item title="慢日志" name="6">
+                        <SlowLog ref="slowLogRef" />
+                    </el-collapse-item>
+                </el-collapse>
+            </LayoutContent>
         </el-card>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ElMessage, FormInstance } from 'element-plus';
+import LayoutContent from '@/layout/layout-content.vue';
 import ContainerLog from '@/components/container-log/index.vue';
 import Status from '@/views/database/mysql/setting/status/index.vue';
 import Variables from '@/views/database/mysql/setting/variables/index.vue';
diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue
index e355b6d0b..ddd003d28 100644
--- a/frontend/src/views/database/redis/index.vue
+++ b/frontend/src/views/database/redis/index.vue
@@ -1,100 +1,32 @@
 <template>
     <div>
         <Submenu activeName="redis" />
-        <div v-show="!redisInfo.isExist" style="margin-top: 20px">
-            <el-alert :closable="false" :title="$t('database.noMysql', ['Redis'])" type="info">
-                <el-link icon="Position" @click="goRouter('/apps')" type="primary">
-                    {{ $t('database.goInstall') }}
-                </el-link>
-            </el-alert>
-        </div>
-        <div v-show="redisInfo.isExist">
-            <el-button style="margin-top: 20px" size="default" icon="Tickets" @click="changeView('status')">
-                {{ $t('database.status') }}
-            </el-button>
-            <el-button style="margin-top: 20px" size="default" icon="Setting" @click="changeView('setting')">
-                {{ $t('database.setting') }}
-            </el-button>
-            <el-button style="margin-top: 20px" size="default" icon="Files" @click="changeView('persistence')">
-                {{ $t('database.persistence') }}
-            </el-button>
-            <el-button style="margin-top: 20px" size="default" icon="Setting" @click="changeView('terminal')">
-                {{ $t('database.terminal') }}
-            </el-button>
 
-            <Status ref="statusRef"></Status>
-            <Setting ref="settingRef"></Setting>
-            <Persistence ref="persistenceRef"></Persistence>
-            <Terminal ref="terminalRef"></Terminal>
-        </div>
+        <AppStatus :app-key="'redis'" style="margin-top: 20px" @setting="onSetting"></AppStatus>
+        <Setting ref="settingRef"></Setting>
+
+        <Terminal v-if="!isOnSetting" style="margin-top: 5px" ref="terminalRef"></Terminal>
     </div>
 </template>
 
 <script lang="ts" setup>
 import Submenu from '@/views/database/index.vue';
-import Status from '@/views/database/redis/status/index.vue';
 import Setting from '@/views/database/redis/setting/index.vue';
-import Persistence from '@/views/database/redis/persistence/index.vue';
 import Terminal from '@/views/database/redis/terminal/index.vue';
-import { onMounted, reactive, ref } from 'vue';
-import { CheckAppInstalled } from '@/api/modules/app';
-import { useRouter } from 'vue-router';
-const router = useRouter();
+import AppStatus from '@/components/app-status/index.vue';
+import { onMounted, ref } from 'vue';
 
-const statusRef = ref();
-const settingRef = ref();
-const persistenceRef = ref();
 const terminalRef = ref();
+const settingRef = ref();
+const isOnSetting = ref(false);
 
-const redisInfo = reactive({
-    name: '',
-    version: '',
-    isExist: false,
-});
-
-const changeView = async (params: string) => {
-    switch (params) {
-        case 'status':
-            settingRef.value!.onClose();
-            terminalRef.value!.onClose();
-            persistenceRef.value!.onClose();
-            statusRef.value!.acceptParams(params);
-            break;
-        case 'setting':
-            statusRef.value!.onClose();
-            terminalRef.value!.onClose();
-            persistenceRef.value!.onClose();
-            settingRef.value!.acceptParams(params);
-            break;
-        case 'persistence':
-            statusRef.value!.onClose();
-            settingRef.value!.onClose();
-            terminalRef.value!.onClose();
-            persistenceRef.value!.acceptParams(params);
-            break;
-        case 'terminal':
-            statusRef.value!.onClose();
-            settingRef.value!.onClose();
-            persistenceRef.value!.onClose();
-            terminalRef.value!.acceptParams(params);
-            break;
-    }
-};
-const checkRedisInstalled = async () => {
-    const res = await CheckAppInstalled('redis');
-    redisInfo.isExist = res.data.isExist;
-    redisInfo.name = res.data.name;
-    redisInfo.version = res.data.version;
-    if (redisInfo.isExist) {
-        changeView('status');
-    }
-};
-
-const goRouter = async (path: string) => {
-    router.push({ path: path });
+const onSetting = async () => {
+    isOnSetting.value = true;
+    terminalRef.value.onClose();
+    settingRef.value!.acceptParams();
 };
 
 onMounted(() => {
-    checkRedisInstalled();
+    terminalRef.value.acceptParams();
 });
 </script>
diff --git a/frontend/src/views/database/redis/setting/index.vue b/frontend/src/views/database/redis/setting/index.vue
index a1228da11..cc1a31d90 100644
--- a/frontend/src/views/database/redis/setting/index.vue
+++ b/frontend/src/views/database/redis/setting/index.vue
@@ -1,66 +1,94 @@
 <template>
-    <div v-if="settingShow">
+    <div class="demo-collapse" v-show="settingShow">
         <el-card style="margin-top: 5px">
-            <el-radio-group v-model="confShowType" @change="onChangeMode">
-                <el-radio-button label="base">{{ $t('database.baseConf') }}</el-radio-button>
-                <el-radio-button label="all">{{ $t('database.allConf') }}</el-radio-button>
-            </el-radio-group>
-            <el-form v-if="confShowType === 'base'" :model="form" ref="formRef" :rules="rules" label-width="120px">
-                <el-row style="margin-top: 20px">
-                    <el-col :span="1"><br /></el-col>
-                    <el-col :span="10">
-                        <el-form-item :label="$t('setting.port')" prop="port" :rules="Rules.port">
-                            <el-input clearable type="number" v-model.number="form.port">
-                                <template #append>
-                                    <el-button @click="onChangePort(formRef)" icon="Collection">
-                                        {{ $t('commons.button.save') }}
-                                    </el-button>
-                                </template>
-                            </el-input>
-                            <span class="input-help">{{ $t('database.portHelper') }}</span>
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.password')" prop="requirepass">
-                            <el-input type="password" show-password clearable v-model="form.requirepass" />
-                            <span class="input-help">{{ $t('database.requirepassHelper') }}</span>
-                        </el-form-item>
-                        <el-form-item :label="$t('database.timeout')" prop="timeout">
-                            <el-input clearable type="number" v-model.number="form.timeout" />
-                            <span class="input-help">{{ $t('database.timeoutHelper') }}</span>
-                        </el-form-item>
-                        <el-form-item :label="$t('database.maxclients')" prop="maxclients">
-                            <el-input clearable type="number" v-model.number="form.maxclients" />
-                        </el-form-item>
-                        <el-form-item :label="$t('database.maxmemory')" prop="maxmemory">
-                            <el-input clearable type="number" v-model.number="form.maxmemory" />
-                            <span class="input-help">{{ $t('database.maxmemoryHelper') }}</span>
-                        </el-form-item>
-                        <el-form-item>
-                            <el-button type="primary" size="default" @click="onSave(formRef)" style="width: 90px">
+            <LayoutContent :header="$t('database.setting')" back-name="Redis" :reload="true">
+                <el-collapse v-model="activeName" accordion>
+                    <el-collapse-item :title="$t('database.baseSetting')" name="1">
+                        <el-radio-group v-model="confShowType" @change="onChangeMode">
+                            <el-radio-button label="base">{{ $t('database.baseConf') }}</el-radio-button>
+                            <el-radio-button label="all">{{ $t('database.allConf') }}</el-radio-button>
+                        </el-radio-group>
+                        <el-form
+                            v-if="confShowType === 'base'"
+                            :model="form"
+                            ref="formRef"
+                            :rules="rules"
+                            label-width="120px"
+                        >
+                            <el-row style="margin-top: 20px">
+                                <el-col :span="1"><br /></el-col>
+                                <el-col :span="10">
+                                    <el-form-item :label="$t('setting.port')" prop="port" :rules="Rules.port">
+                                        <el-input clearable type="number" v-model.number="form.port">
+                                            <template #append>
+                                                <el-button @click="onChangePort(formRef)" icon="Collection">
+                                                    {{ $t('commons.button.save') }}
+                                                </el-button>
+                                            </template>
+                                        </el-input>
+                                        <span class="input-help">{{ $t('database.portHelper') }}</span>
+                                    </el-form-item>
+                                    <el-form-item :label="$t('setting.password')" prop="requirepass">
+                                        <el-input type="password" show-password clearable v-model="form.requirepass" />
+                                        <span class="input-help">{{ $t('database.requirepassHelper') }}</span>
+                                    </el-form-item>
+                                    <el-form-item :label="$t('database.timeout')" prop="timeout">
+                                        <el-input clearable type="number" v-model.number="form.timeout" />
+                                        <span class="input-help">{{ $t('database.timeoutHelper') }}</span>
+                                    </el-form-item>
+                                    <el-form-item :label="$t('database.maxclients')" prop="maxclients">
+                                        <el-input clearable type="number" v-model.number="form.maxclients" />
+                                    </el-form-item>
+                                    <el-form-item :label="$t('database.maxmemory')" prop="maxmemory">
+                                        <el-input clearable type="number" v-model.number="form.maxmemory" />
+                                        <span class="input-help">{{ $t('database.maxmemoryHelper') }}</span>
+                                    </el-form-item>
+                                    <el-form-item>
+                                        <el-button
+                                            type="primary"
+                                            size="default"
+                                            @click="onSave(formRef)"
+                                            style="width: 90px"
+                                        >
+                                            {{ $t('commons.button.save') }}
+                                        </el-button>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </el-form>
+                        <div v-if="confShowType === 'all'">
+                            <codemirror
+                                :autofocus="true"
+                                placeholder="None data"
+                                :indent-with-tab="true"
+                                :tabSize="4"
+                                style="margin-top: 10px; height: calc(100vh - 280px)"
+                                :lineWrapping="true"
+                                :matchBrackets="true"
+                                theme="cobalt"
+                                :styleActiveLine="true"
+                                :extensions="extensions"
+                                v-model="mysqlConf"
+                                :readOnly="true"
+                            />
+                            <el-button
+                                type="primary"
+                                size="default"
+                                @click="onSaveFile"
+                                style="width: 90px; margin-top: 5px"
+                            >
                                 {{ $t('commons.button.save') }}
                             </el-button>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <div v-if="confShowType === 'all'">
-                <codemirror
-                    :autofocus="true"
-                    placeholder="None data"
-                    :indent-with-tab="true"
-                    :tabSize="4"
-                    style="margin-top: 10px; height: calc(100vh - 280px)"
-                    :lineWrapping="true"
-                    :matchBrackets="true"
-                    theme="cobalt"
-                    :styleActiveLine="true"
-                    :extensions="extensions"
-                    v-model="mysqlConf"
-                    :readOnly="true"
-                />
-                <el-button type="primary" size="default" @click="onSaveFile" style="width: 90px; margin-top: 5px">
-                    {{ $t('commons.button.save') }}
-                </el-button>
-            </div>
+                        </div>
+                    </el-collapse-item>
+                    <el-collapse-item :title="$t('database.status')" name="2">
+                        <Status ref="statusRef" />
+                    </el-collapse-item>
+                    <el-collapse-item :title="$t('database.persistence')" name="3">
+                        <Persistence ref="persistenceRef" />
+                    </el-collapse-item>
+                </el-collapse>
+            </LayoutContent>
         </el-card>
 
         <ConfirmDialog ref="confirmDialogRef" @confirm="onSubmitSave"></ConfirmDialog>
@@ -72,9 +100,12 @@ import { ElMessage, FormInstance } from 'element-plus';
 import { reactive, ref } from 'vue';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
+import LayoutContent from '@/layout/layout-content.vue';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { LoadFile } from '@/api/modules/files';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
+import Status from '@/views/database/redis/setting/status/index.vue';
+import Persistence from '@/views/database/redis/setting/persistence/index.vue';
 import { loadRedisConf, updateRedisConf, updateRedisConfByFile } from '@/api/modules/database';
 import i18n from '@/lang';
 import { Rules } from '@/global/form-rules';
@@ -98,6 +129,10 @@ const rules = reactive({
     maxmemory: [Rules.number],
 });
 
+const activeName = ref('1');
+const statusRef = ref();
+const persistenceRef = ref();
+
 const formRef = ref<FormInstance>();
 const mysqlConf = ref();
 const confirmDialogRef = ref();
@@ -107,6 +142,8 @@ const settingShow = ref<boolean>(false);
 const acceptParams = (): void => {
     settingShow.value = true;
     loadform();
+    statusRef.value!.acceptParams();
+    persistenceRef.value!.acceptParams();
 };
 const onClose = (): void => {
     settingShow.value = false;
diff --git a/frontend/src/views/database/redis/persistence/index.vue b/frontend/src/views/database/redis/setting/persistence/index.vue
similarity index 100%
rename from frontend/src/views/database/redis/persistence/index.vue
rename to frontend/src/views/database/redis/setting/persistence/index.vue
diff --git a/frontend/src/views/database/redis/status/index.vue b/frontend/src/views/database/redis/setting/status/index.vue
similarity index 100%
rename from frontend/src/views/database/redis/status/index.vue
rename to frontend/src/views/database/redis/setting/status/index.vue