style: 修改部分弹窗 提示文字样式 (#2202)

frontend/src/components/error-prompt/index.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="msg">
+        <span>{{ props.title }}</span>
+    </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'ErrPrompt' });
+const props = defineProps({
+    title: {
+        type: String,
+        default: '',
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+.msg {
+    color: #ff0000;
+    line-height: 30px;
+}
+</style>

frontend/src/components/index.ts

@@ -2,10 +2,12 @@ import { type App } from 'vue';
 import LayoutContent from './layout-content/index.vue';
 import RouterButton from './router-button/index.vue';
 import ComplexTable from './complex-table/index.vue';
+import ErrPrompt from './error-prompt/index.vue';
 export default {
     install(app: App) {
         app.component(LayoutContent.name, LayoutContent);
         app.component(RouterButton.name, RouterButton);
         app.component(ComplexTable.name, ComplexTable);
+        app.component(ErrPrompt.name, ErrPrompt);
     },
 };

frontend/src/styles/common.scss

@@ -253,6 +253,10 @@ html {
         border-top-left-radius: 50px;
         border-bottom-left-radius: 50px;
     }
+    .el-input-group__append {
+        border-top-right-radius: 50px;
+        border-bottom-right-radius: 50px;
+    }
 }
 
 // drawer头部增加按钮
@@ -353,7 +357,6 @@ html {
     width: 85px !important;
 }
 
-
 .el-input-group__append {
     border-left: 0;
     &:hover {
@@ -365,4 +368,4 @@ html {
     border-bottom-left-radius: 0;
     box-shadow: 0 1px 0 0 var(--el-input-border-color) inset, 0 -1px 0 0 var(--el-input-border-color) inset,
         -1px 0 0 0 var(--el-input-border-color) inset;
-}
+}

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

@@ -68,8 +68,8 @@
             v-model="app.readMe"
             :theme="globalStore.$state.themeConfig.theme === 'dark' ? 'dark' : 'light'"
         />
-        <Install ref="installRef"></Install>
     </el-drawer>
+    <Install ref="installRef"></Install>
 </template>
 
 <script lang="ts" setup>
@@ -138,6 +138,7 @@ const openInstall = () => {
             app: app.value,
         };
         installRef.value.acceptParams(params);
+        open.value = false;
     }
 };
 

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

@@ -3,7 +3,7 @@
         <el-row>
             <el-col :span="20" :offset="2" v-if="open">
                 <el-alert
-                    type="warning"
+                    type="error"
                     :description="$t('app.deleteHelper', [$t('app.app')])"
                     center
                     show-icon
@@ -20,16 +20,9 @@
                         </span>
                     </el-descriptions-item>
                 </el-descriptions>
-                <div class="center" v-if="installData.key === 'openresty'">
+                <div v-if="installData.key === 'openresty'" class="mt-5">
                     <el-checkbox v-model="forceDelete" label="true">{{ $t('app.forceDelete') }}</el-checkbox>
-                    <el-alert
-                        v-if="forceDelete"
-                        type="error"
-                        effect="dark"
-                        :description="$t('app.openrestyDeleteHelper')"
-                        center
-                        :closable="false"
-                    />
+                    <ErrPrompt :title="$t('app.openrestyDeleteHelper')" />
                 </div>
             </el-col>
         </el-row>

frontend/src/views/host/file-management/delete/index.vue

@@ -2,7 +2,7 @@
     <el-dialog v-model="open" :title="$t('app.delete')" width="30%" :close-on-click-modal="false">
         <el-row>
             <el-col :span="20" :offset="2">
-                <el-alert :title="$t('file.deleteHelper')" type="error" effect="dark" :closable="false"></el-alert>
+                <el-alert :title="$t('file.deleteHelper')" show-icon type="error" :closable="false"></el-alert>
                 <div class="resource">
                     <table>
                         <tr v-for="(row, index) in files" :key="index">

frontend/src/views/host/file-management/index.vue

@@ -99,7 +99,7 @@
                             </el-checkbox>
                         </template>
                         <template #append>
-                            <el-button icon="Search" @click="search" />
+                            <el-button icon="Search" @click="search" round />
                         </template>
                     </el-input>
                 </div>
@@ -680,7 +680,7 @@ onMounted(() => {
 
 .search {
     display: inline;
-    width: 300px;
+    width: 400px;
     float: right;
 }
 

frontend/src/views/host/tool/supervisor/status/init/index.vue

@@ -24,7 +24,6 @@
                         class="common-prompt"
                         :closable="false"
                         type="error"
-                        effect="dark"
                     />
                 </el-form>
             </el-col>

frontend/src/views/website/website/delete/index.vue

@@ -2,7 +2,7 @@
     <el-dialog
         v-model="open"
         :close-on-click-modal="false"
-        :title="$t('website.delete')"
+        :title="$t('website.delete') + ' - ' + websiteName"
         width="30%"
         :before-close="handleClose"
     >
@@ -58,21 +58,21 @@ import { ref } from 'vue';
 import { Website } from '@/api/interface/website';
 import { MsgSuccess } from '@/utils/message';
 
-let key = 1;
-let open = ref(false);
-let loading = ref(false);
-let deleteReq = ref({
+const key = 1;
+const open = ref(false);
+const loading = ref(false);
+const deleteReq = ref({
     id: 0,
     deleteApp: false,
     deleteBackup: false,
     forceDelete: false,
 });
-let type = ref('');
+const type = ref('');
 const em = defineEmits(['close']);
 const deleteForm = ref<FormInstance>();
-let deleteInfo = ref('');
-let websiteName = ref('');
-let deleteHelper = ref('');
+const deleteInfo = ref('');
+const websiteName = ref('');
+const deleteHelper = ref('');
 const runtimeApp = ref(false);
 
 const handleClose = () => {