perf: Optimize installed application password parameter display

Author: ssongliu

frontend/src/api/interface/app.ts

@@ -290,6 +290,7 @@ export namespace App {
         required?: boolean;
         multiple?: boolean;
         label: Locale;
+        showPassword: boolean;
     }
 
     export interface AppConfig {

frontend/src/views/app-store/installed/detail/index.vue

@@ -28,11 +28,33 @@
                         </el-button>
                     </span>
                 </el-descriptions-item>
-                <el-descriptions-item v-for="(param, key) in params" :label="getLabel(param)" :key="key">
-                    <span class="break-all whitespace-normal">
+                <el-descriptions-item
+                    label-class-name="system-label"
+                    v-for="(param, key) in params"
+                    :label="getLabel(param)"
+                    :key="key"
+                >
+                    <span v-if="param.type === 'password' && !param.showPassword">********</span>
+                    <span v-else class="break-all whitespace-normal">
                         {{ param.showValue && param.showValue != '' ? param.showValue : param.value }}
                     </span>
-                    <CopyButton v-if="showCopyButton(param.key)" :content="param.value" />
+                    <template v-if="param.type === 'password'">
+                        <el-button
+                            v-if="!param.showPassword"
+                            link
+                            @click="param.showPassword = true"
+                            icon="View"
+                            class="-mt-1 ml-3"
+                        ></el-button>
+                        <el-button
+                            v-if="param.showPassword"
+                            link
+                            @click="param.showPassword = false"
+                            icon="Hide"
+                            class="-mt-1 ml-3"
+                        ></el-button>
+                    </template>
+                    <CopyButton class="-mt-1" v-if="showCopyButton(param.key)" :content="param.value" />
                 </el-descriptions-item>
             </el-descriptions>
         </div>
@@ -47,6 +69,19 @@
                             v-model.number="paramModel.params[p.key]"
                             :disabled="!p.edit"
                         ></el-input>
+                        <el-input
+                            v-else-if="p.type == 'password'"
+                            :type="p.showPassword ? 'text' : 'password'"
+                            v-model="paramModel.params[p.key]"
+                            :disabled="!p.edit"
+                        >
+                            <template #append>
+                                <el-button
+                                    :icon="p.showPassword ? 'Hide' : 'View'"
+                                    @click="p.showPassword = !p.showPassword"
+                                />
+                            </template>
+                        </el-input>
                         <el-select
                             v-model="paramModel.params[p.key]"
                             v-else-if="p.type == 'select'"
@@ -258,6 +293,7 @@ const acceptParams = async (props: ParamProps) => {
     await get();
     open.value = true;
     openConfig.value = false;
+    console.log('params', params.value);
 };
 
 const handleClose = () => {
@@ -304,6 +340,7 @@ const get = async () => {
                     multiple: d.multiple,
                     label: d.label,
                     required: d.required,
+                    showPassword: false,
                 });
                 if (d.required) {
                     rules.params[d.key] = [Rules.requiredInput];
@@ -437,4 +474,8 @@ defineExpose({ acceptParams });
 .change-button {
     margin-top: 5px;
 }
+.system-label {
+    width: 40% !important;
+    white-space: nowrap !important;
+}
 </style>

frontend/src/views/cronjob/cronjob/operate/index.vue

@@ -651,7 +651,7 @@
                             <el-row :gutter="20">
                                 <LayoutCol v-if="isBackup() && !isDatabase()">
                                     <el-form-item :label="$t('setting.compressPassword')" prop="secret">
-                                        <el-input v-model="form.secret" />
+                                        <el-input type="password" show-password v-model="form.secret" />
                                     </el-form-item>
                                 </LayoutCol>
                                 <LayoutCol>

frontend/src/xpack-ee

@@ -0,0 +1 @@
+Subproject commit 329f2b121b9cbe556ac8abe323d8cac273263f61