style: 面板样式优化 (#7026)

Author: lan-yonghui

frontend/src/components/system-upgrade/index.vue

@@ -54,11 +54,6 @@
             <DrawerHeader :header="$t('commons.button.upgrade')" :back="handleClose" />
         </template>
         <div class="panel-MdEditor">
-            <el-alert :closable="false">
-                <span class="line-height">{{ $t('setting.versionHelper') }}</span>
-                <li class="line-height">{{ $t('setting.versionHelper1') }}</li>
-                <li class="line-height">{{ $t('setting.versionHelper2') }}</li>
-            </el-alert>
             <div class="default-theme" style="margin-left: 20px">
                 <h2 class="inline-block">{{ $t('app.version') }}</h2>
             </div>
@@ -229,4 +224,7 @@ onMounted(() => {
 :deep(.el-link__inner) {
     font-weight: 400;
 }
+:deep(.md-editor-dark) {
+    background-color: var(--panel-main-bg-color-9);
+}
 </style>

frontend/src/layout/components/Sidebar/components/Collapse.vue

@@ -23,6 +23,7 @@ const isCollapse = computed(() => menuStore.isCollapse);
 }
 
 .collapse-icon {
+    color: var(--panel-main-bg-color-1);
     margin-left: 25px;
     &:hover {
         color: $primary-color;

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

@@ -2,26 +2,25 @@
     <el-dialog
         v-model="open"
         :title="$t('app.checkTitle')"
-        width="50%"
+        width="40%"
         :close-on-click-modal="false"
         :destroy-on-close="true"
     >
         <el-row>
             <el-col :span="20" :offset="2" v-if="open">
                 <el-alert
                     type="error"
-                    :description="$t('app.deleteHelper', [$t('app.database')])"
+                    :title="$t('app.deleteHelper', [$t('app.database')])"
                     center
                     show-icon
                     :closable="false"
                 />
-                <br />
-                <el-descriptions border :column="1">
-                    <el-descriptions-item>
+                <el-descriptions :column="1" border>
+                    <el-descriptions-item label-class-name="label" class-name="content" min-width="60px">
                         <template #label>
-                            <a href="javascript:void(0);" @click="toApp()">{{ $t('app.app') }}</a>
+                            <a href="javascript:void(0);" class="content-a" @click="toApp()">{{ $t('app.app') }}</a>
                         </template>
-                        {{ installData.join(',') }}
+                        <pre>{{ installData.join('\n') }}</pre>
                     </el-descriptions-item>
                 </el-descriptions>
             </el-col>
@@ -41,6 +40,7 @@ let open = ref(false);
 
 const acceptParams = (props: InstallProps) => {
     installData.value = props.items;
+    installData.value.push('sdsfhjdghjdgfhsdgfhjsgfkhjsdgfhjasgdfhjasgdfjhsagdfhjsagdfashdfgaskhjdfgaskjhdf');
     open.value = true;
 };
 
@@ -52,3 +52,25 @@ defineExpose({
     acceptParams,
 });
 </script>
+
+<style scoped>
+:deep(.label) {
+    background: var(--panel-main-bg-color-10) !important;
+}
+:deep(.content) {
+    background: var(--panel-main-bg-color-10);
+}
+:deep(.content-a) {
+    color: var(--panel-color-primary);
+}
+pre {
+    margin: 0;
+    width: 350px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+:deep(.el-descriptions) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+</style>