feat: qqwry 文件嵌入二进制

frontend/src/views/database/mysql/index.vue

@@ -1,86 +1,77 @@
 <template>
     <div>
         <Submenu activeName="mysql" />
-        <el-dropdown size="default" split-button style="margin-top: 20px; margin-bottom: 5px">
-            {{ mysqlName }}
-            <template #dropdown>
-                <el-dropdown-menu v-model="mysqlName">
-                    <el-dropdown-item v-for="item in mysqlVersions" :key="item" @click="onChangeVersion(item)">
-                        {{ item }}
-                    </el-dropdown-item>
-                </el-dropdown-menu>
-            </template>
-        </el-dropdown>
-        <el-button
-            v-if="!isOnSetting"
-            style="margin-top: 20px; margin-left: 10px"
-            size="default"
-            icon="Setting"
-            @click="onSetting"
-        >
-            {{ $t('database.setting') }}
-        </el-button>
-        <el-button
-            v-if="isOnSetting"
-            style="margin-top: 20px; margin-left: 10px"
-            size="default"
-            icon="Back"
-            @click="onBacklist"
-        >
-            {{ $t('database.backList') }}
-        </el-button>
+        <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>
 
-        <Setting ref="settingRef"></Setting>
+            <Setting ref="settingRef"></Setting>
 
-        <el-card v-if="!isOnSetting">
-            <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('auth.username')" prop="username" />
-                <el-table-column :label="$t('auth.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>
+            <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>
-                <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-table-column type="selection" fix />
+                    <el-table-column :label="$t('commons.table.name')" prop="name" />
+                    <el-table-column :label="$t('auth.username')" prop="username" />
+                    <el-table-column :label="$t('auth.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-dialog v-model="changeVisiable" :destroy-on-close="true" width="30%">
             <template #header>
                 <div class="card-header">
@@ -140,16 +131,22 @@ import Setting from '@/views/database/mysql/setting/index.vue';
 import Submenu from '@/views/database/index.vue';
 import { dateFromat } from '@/utils/util';
 import { onMounted, reactive, ref } from 'vue';
-import { deleteMysqlDB, loadVersions, searchMysqlDBs, updateMysqlDBInfo } from '@/api/modules/database';
+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 mysqlVersions = ref();
-const mysqlName = ref<string>('5.7');
+const mysqlInfo = reactive({
+    name: '',
+    version: '',
+    isExist: false,
+});
 const isOnSetting = ref<boolean>();
 
 const data = ref();
@@ -162,7 +159,7 @@ const paginationConfig = reactive({
 const dialogRef = ref();
 const onOpenDialog = async () => {
     let params = {
-        mysqlName: mysqlName.value,
+        mysqlName: mysqlInfo.name,
     };
     dialogRef.value!.acceptParams(params);
 };
@@ -170,7 +167,7 @@ const onOpenDialog = async () => {
 const dialogBackupRef = ref();
 const onOpenBackupDialog = async (dbName: string) => {
     let params = {
-        mysqlName: mysqlName.value,
+        mysqlName: mysqlInfo.name,
         dbName: dbName,
     };
     dialogBackupRef.value!.acceptParams(params);
@@ -182,7 +179,7 @@ const settingRef = ref();
 const onSetting = async () => {
     isOnSetting.value = true;
     let params = {
-        mysqlName: mysqlName.value,
+        mysqlName: mysqlInfo.name,
     };
     settingRef.value!.acceptParams(params);
 };
@@ -210,7 +207,7 @@ const submitChangeInfo = async (formEl: FormInstance | undefined) => {
     formEl.validate(async (valid) => {
         if (!valid) return;
         changeForm.value = changeForm.operation === 'password' ? changeForm.password : changeForm.privilege;
-        changeForm.mysqlName = mysqlName.value;
+        changeForm.mysqlName = mysqlInfo.name;
         await updateMysqlDBInfo(changeForm);
         ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
         search();
@@ -218,31 +215,24 @@ const submitChangeInfo = async (formEl: FormInstance | undefined) => {
     });
 };
 
-const loadRunningOptions = async () => {
-    const res = await loadVersions();
-    mysqlVersions.value = res.data;
-    if (mysqlVersions.value.length != 0) {
-        mysqlName.value = mysqlVersions.value[0];
+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 onChangeVersion = async (val: string) => {
-    mysqlName.value = val;
-    search();
-    if (isOnSetting.value) {
-        let params = {
-            mysqlName: mysqlName.value,
-        };
-        settingRef.value!.acceptParams(params);
-    }
+const goRouter = async (path: string) => {
+    router.push({ path: path });
 };
 
 const search = async () => {
     let params = {
         page: paginationConfig.currentPage,
         pageSize: paginationConfig.pageSize,
-        mysqlName: mysqlName.value,
     };
     const res = await searchMysqlDBs(params);
     data.value = res.data.items || [];
@@ -295,7 +285,7 @@ const buttons = [
         label: i18n.global.t('database.loadBackup'),
         click: (row: Database.MysqlDBInfo) => {
             let params = {
-                mysqlName: mysqlName.value,
+                mysqlName: mysqlInfo.name,
                 dbName: row.name,
             };
             uploadRef.value!.acceptParams(params);
@@ -310,6 +300,6 @@ const buttons = [
 ];
 
 onMounted(() => {
-    loadRunningOptions();
+    checkMysqlInstalled();
 });
 </script>

frontend/src/views/database/mysql/setting/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="demo-collapse" v-show="onSetting">
-        <el-card>
+        <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">
@@ -116,7 +116,6 @@ const baseInfo = reactive({
     port: 3306,
     password: '',
     remoteConn: false,
-    mysqlKey: '',
     containerID: '',
 });
 const panelFormRef = ref<FormInstance>();
@@ -137,7 +136,6 @@ interface DialogProps {
 const dialogContainerLogRef = ref();
 const acceptParams = (params: DialogProps): void => {
     onSetting.value = true;
-    mysqlName.value = params.mysqlName;
     loadBaseInfo();
     loadVariables();
     loadSlowLogs();
@@ -155,7 +153,7 @@ const onSave = async (formEl: FormInstance | undefined, key: string, val: any) =
     }
     if (key === 'port') {
         let params = {
-            key: baseInfo.mysqlKey,
+            key: 'mysql',
             name: mysqlName.value,
             port: val,
         };
@@ -197,19 +195,19 @@ const loadContainerLog = async (containerID: string) => {
 };
 
 const loadBaseInfo = async () => {
-    const res = await loadMysqlBaseInfo(mysqlName.value);
+    const res = await loadMysqlBaseInfo();
+    mysqlName.value = res.data?.name;
     baseInfo.name = res.data?.name;
     baseInfo.port = res.data?.port;
     baseInfo.password = res.data?.password;
     baseInfo.remoteConn = res.data?.remoteConn;
-    baseInfo.mysqlKey = res.data?.mysqlKey;
     baseInfo.containerID = res.data?.containerName;
-    loadMysqlConf(`/opt/1Panel/data/apps/${baseInfo.mysqlKey}/${baseInfo.name}/conf/my.cnf`);
+    loadMysqlConf(`/opt/1Panel/data/apps/mysql/${baseInfo.name}/conf/my.cnf`);
     loadContainerLog(baseInfo.containerID);
 };
 
 const loadVariables = async () => {
-    const res = await loadMysqlVariables(mysqlName.value);
+    const res = await loadMysqlVariables();
     variables.value = res.data;
     variablesRef.value!.acceptParams({ mysqlName: mysqlName.value, variables: res.data });
 };
@@ -218,7 +216,6 @@ const loadSlowLogs = async () => {
     await Promise.all([loadBaseInfo(), loadVariables()]);
     let param = {
         mysqlName: mysqlName.value,
-        mysqlKey: baseInfo.mysqlKey,
         variables: variables.value,
     };
     slowLogRef.value!.acceptParams(param);

frontend/src/views/database/mysql/setting/slow-log/index.vue

@@ -52,7 +52,6 @@ const slowLogs = ref();
 const confirmDialogRef = ref();
 
 const mysqlName = ref();
-const mysqlKey = ref();
 const variables = reactive({
     slow_query_log: 'OFF',
     long_query_time: 10,
@@ -61,17 +60,15 @@ const oldVariables = ref();
 
 interface DialogProps {
     mysqlName: string;
-    mysqlKey: string;
     variables: Database.MysqlVariables;
 }
 const acceptParams = (params: DialogProps): void => {
     mysqlName.value = params.mysqlName;
-    mysqlKey.value = params.mysqlKey;
     variables.slow_query_log = params.variables.slow_query_log;
     variables.long_query_time = Number(params.variables.long_query_time);
 
     if (variables.slow_query_log === 'ON') {
-        let path = `/opt/1Panel/data/apps/${mysqlKey.value}/${mysqlName.value}/data/1Panel-slow.log`;
+        let path = `/opt/1Panel/data/apps/mysql/${mysqlName.value}/data/1Panel-slow.log`;
         loadMysqlSlowlogs(path);
     }
     oldVariables.value = { ...variables };
@@ -95,7 +92,7 @@ const onSave = async () => {
         param.push({ param: 'long_query_time', value: variables.long_query_time });
         param.push({ param: 'slow_query_log_file', value: '/var/lib/mysql/1Panel-slow.log' });
     }
-    await updateMysqlVariables(mysqlName.value, param);
+    await updateMysqlVariables(param);
     ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
 };
 

frontend/src/views/database/mysql/setting/status/index.vue

@@ -110,7 +110,7 @@
 <script lang="ts" setup>
 import { loadMysqlStatus } from '@/api/modules/database';
 import { computeSize } from '@/utils/util';
-import { reactive, ref } from 'vue';
+import { reactive } from 'vue';
 
 let mysqlStatus = reactive({
     run: 0,
@@ -136,17 +136,12 @@ let mysqlStatus = reactive({
     tableLocksWaited: 0,
 });
 
-const mysqlName = ref();
-interface DialogProps {
-    mysqlName: string;
-}
-const acceptParams = (params: DialogProps): void => {
-    mysqlName.value = params.mysqlName;
+const acceptParams = (): void => {
     loadStatus();
 };
 
 const loadStatus = async () => {
-    const res = await loadMysqlStatus(mysqlName.value);
+    const res = await loadMysqlStatus();
     let queryPerSecond = res.data.Questions / res.data.Uptime;
     let txPerSecond = (res.data!.Com_commit + res.data.Com_rollback) / res.data.Uptime;
 

frontend/src/views/database/redis/index.vue

@@ -1,23 +1,32 @@
 <template>
     <div>
         <Submenu activeName="redis" />
-        <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>
+        <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>
+            <Status ref="statusRef"></Status>
+            <Setting ref="settingRef"></Setting>
+            <Persistence ref="persistenceRef"></Persistence>
+            <Terminal ref="terminalRef"></Terminal>
+        </div>
     </div>
 </template>
 
@@ -27,13 +36,22 @@ 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, ref } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
+import { CheckAppInstalled } from '@/api/modules/app';
+import { useRouter } from 'vue-router';
+const router = useRouter();
 
 const statusRef = ref();
 const settingRef = ref();
 const persistenceRef = ref();
 const terminalRef = ref();
 
+const redisInfo = reactive({
+    name: '',
+    version: '',
+    isExist: false,
+});
+
 const changeView = async (params: string) => {
     switch (params) {
         case 'status':
@@ -62,8 +80,21 @@ const changeView = async (params: string) => {
             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 });
+};
 
 onMounted(() => {
-    changeView('status');
+    checkRedisInstalled();
 });
 </script>

frontend/src/views/database/redis/setting/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-if="settingShow">
         <el-card style="margin-top: 5px">
-            <el-radio-group v-model="confShowType">
+            <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>
@@ -135,6 +135,14 @@ function callback(error: any) {
     }
 }
 
+const onChangeMode = async () => {
+    if (confShowType.value === 'all') {
+        loadMysqlConf();
+    } else {
+        loadform();
+    }
+};
+
 const onSave = async (formEl: FormInstance | undefined) => {
     if (confShowType.value === 'all') {
         onSaveFile();
@@ -149,6 +157,7 @@ const onSave = async (formEl: FormInstance | undefined) => {
             maxmemory: form.maxmemory + '',
         };
         await updateRedisConf(param);
+        loadform();
         ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
     });
 };
@@ -179,10 +188,10 @@ const loadform = async () => {
     form.requirepass = res.data?.requirepass;
     form.maxmemory = Number(res.data?.maxmemory);
     form.port = Number(res.data?.port);
-    loadMysqlConf(`/opt/1Panel/data/apps/redis/${form.name}/conf/redis.conf`);
 };
 
-const loadMysqlConf = async (path: string) => {
+const loadMysqlConf = async () => {
+    let path = `/opt/1Panel/data/apps/redis/${form.name}/conf/redis.conf`;
     const res = await LoadFile({ path: path });
     mysqlConf.value = res.data;
 };