From 02dce0e3fa297944d0a564652d594c81f8a035e1 Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Wed, 6 Sep 2023 17:16:12 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=20=E6=8F=90=E7=A4=BA=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20(#2202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/error-prompt/index.vue     | 22 +++++++++++++++++++
 frontend/src/components/index.ts              |  2 ++
 frontend/src/styles/common.scss               |  7 ++++--
 frontend/src/views/app-store/detail/index.vue |  3 ++-
 .../views/app-store/installed/check/index.vue | 13 +++--------
 .../host/file-management/delete/index.vue     |  2 +-
 .../src/views/host/file-management/index.vue  |  4 ++--
 .../tool/supervisor/status/init/index.vue     |  1 -
 .../views/website/website/delete/index.vue    | 18 +++++++--------
 9 files changed, 46 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/components/error-prompt/index.vue

diff --git a/frontend/src/components/error-prompt/index.vue b/frontend/src/components/error-prompt/index.vue
new file mode 100644
index 000000000..05f63982c
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 8ee78becc..9a13b48ff 100644
--- a/frontend/src/components/index.ts
+++ b/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);
     },
 };
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 1d59422f5..ee67c5bb5 100644
--- a/frontend/src/styles/common.scss
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/views/app-store/detail/index.vue b/frontend/src/views/app-store/detail/index.vue
index a4942e967..a4c834bd5 100644
--- a/frontend/src/views/app-store/detail/index.vue
+++ b/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;
     }
 };
 
diff --git a/frontend/src/views/app-store/installed/check/index.vue b/frontend/src/views/app-store/installed/check/index.vue
index e36cec98f..d678e05b5 100644
--- a/frontend/src/views/app-store/installed/check/index.vue
+++ b/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>
diff --git a/frontend/src/views/host/file-management/delete/index.vue b/frontend/src/views/host/file-management/delete/index.vue
index 24960cda6..d586493d2 100644
--- a/frontend/src/views/host/file-management/delete/index.vue
+++ b/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">
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 4f3f94ee6..58f8ee955 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/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;
 }
 
diff --git a/frontend/src/views/host/tool/supervisor/status/init/index.vue b/frontend/src/views/host/tool/supervisor/status/init/index.vue
index 148d8ceb5..6e583fa88 100644
--- a/frontend/src/views/host/tool/supervisor/status/init/index.vue
+++ b/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>
diff --git a/frontend/src/views/website/website/delete/index.vue b/frontend/src/views/website/website/delete/index.vue
index a4fda5d2c..424bdc781 100644
--- a/frontend/src/views/website/website/delete/index.vue
+++ b/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 = () => {