feat: 增加wordpress应用

frontend/src/api/interface/app.ts

@@ -54,6 +54,7 @@ export namespace App {
         required: boolean;
         default: any;
         envKey: string;
+        key?: string;
     }
 
     export interface AppInstall {
@@ -79,4 +80,9 @@ export namespace App {
         installId: number;
         operate: string;
     }
+
+    export interface AppService {
+        label: string;
+        value: string;
+    }
 }

frontend/src/api/modules/app.ts

@@ -15,7 +15,7 @@ export const GetApp = (id: number) => {
 };
 
 export const GetAppDetail = (id: number, version: string) => {
-    return http.get<App.AppDetail>('apps/detail/' + id + '/' + version);
+    return http.get<App.AppDetail>(`apps/detail/${id}/${version}`);
 };
 
 export const InstallApp = (install: App.AppInstall) => {
@@ -33,3 +33,7 @@ export const InstalledOp = (op: App.AppInstalledOp) => {
 export const SyncInstalledApp = () => {
     return http.post<any>('apps/installed/sync', {});
 };
+
+export const GetAppService = (key: string | undefined) => {
+    return http.get<any>(`apps/services/${key}`);
+};

frontend/src/views/app-store/detail/install.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="open" :title="$t('app.install')" width="30%">
+    <el-dialog v-model="open" :title="$t('app.install')" width="40%">
         <el-form ref="paramForm" label-position="left" :model="form" label-width="150px" :rules="rules">
             <el-form-item :label="$t('app.name')" prop="NAME">
                 <el-input v-model="form['NAME']"></el-input>
@@ -14,6 +14,14 @@
                         :type="f.type"
                         show-password
                     ></el-input>
+                    <el-select v-model="form[f.envKey]" v-if="f.type == 'service'">
+                        <el-option
+                            v-for="service in services"
+                            :key="service.label"
+                            :value="service.value"
+                            :label="service.label"
+                        ></el-option>
+                    </el-select>
                 </el-form-item>
             </div>
         </el-form>
@@ -30,7 +38,7 @@
 
 <script lang="ts" setup name="appInstall">
 import { App } from '@/api/interface/app';
-import { InstallApp } from '@/api/modules/app';
+import { InstallApp, GetAppService } from '@/api/modules/app';
 import { Rules } from '@/global/form-rules';
 import { FormInstance, FormRules } from 'element-plus';
 import { reactive, ref } from 'vue';
@@ -47,7 +55,6 @@ const installData = ref<InstallRrops>({
 });
 let open = ref(false);
 let form = reactive<{ [key: string]: any }>({});
-
 let rules = reactive<FormRules>({
     NAME: [Rules.requiredInput],
 });
@@ -58,6 +65,8 @@ const req = reactive({
     params: {},
     name: '',
 });
+let services = ref();
+
 const handleClose = () => {
     if (paramForm.value) {
         paramForm.value.resetFields();
@@ -74,11 +83,24 @@ const acceptParams = (props: InstallRrops): void => {
             if (p.required) {
                 rules[p.envKey] = [Rules.requiredInput];
             }
+            if (p.key) {
+                form[p.envKey] = '';
+                getServices(form[p.envKey], p.key);
+            }
         }
     }
     open.value = true;
 };
 
+const getServices = (value: any, key: string | undefined) => {
+    GetAppService(key).then((res) => {
+        services.value = res.data;
+        if (services.value != null) {
+            value = services.value[0].value;
+        }
+    });
+};
+
 const submit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     await formEl.validate((valid) => {