feat(component): Replace Drawer Component (#7428)

frontend/src/components/layout-content/index.vue

@@ -42,11 +42,9 @@
                         <div v-else class="flex flex-wrap gap-4 sm:justify-between">
                             <div class="flex gap-2 flex-wrap items-center justify-start">
                                 <slot name="leftToolBar" v-if="slots.leftToolBar"></slot>
-                                <slot name="buttons" v-if="slots.buttons"></slot>
                             </div>
-                            <div class="flex flex-wrap gap-3" v-if="slots.rightToolBar || slots.rightButton">
+                            <div class="flex flex-wrap gap-3" v-if="slots.rightToolBar">
                                 <slot name="rightToolBar"></slot>
-                                <slot name="rightButton"></slot>
                             </div>
                         </div>
 

frontend/src/components/log-dialog/index.vue

@@ -1,38 +1,11 @@
 <template>
-    <el-drawer
-        v-model="open"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        :before-close="handleClose"
-        :size="globalStore.isFullScreen ? '100%' : '50%'"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('website.log')" :back="handleClose">
-                <template #extra v-if="!mobile">
-                    <el-tooltip :content="loadTooltip()" placement="top">
-                        <el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
-                    </el-tooltip>
-                </template>
-            </DrawerHeader>
-        </template>
-        <div>
-            <LogFile :config="config" :height-diff="config.heightDiff"></LogFile>
-        </div>
-    </el-drawer>
+    <DrawerPro v-model="open" :header="$t('website.log')" size="large" :back="handleClose">
+        <LogFile :config="config" :height-diff="config.heightDiff"></LogFile>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
+import { ref } from 'vue';
 import LogFile from '@/components/log-file/index.vue';
-import { GlobalStore } from '@/store';
-import screenfull from 'screenfull';
-import i18n from '@/lang';
-
-const globalStore = GlobalStore();
-
-const mobile = computed(() => {
-    return globalStore.isMobile();
-});
 
 interface LogProps {
     id: number;
@@ -50,30 +23,11 @@ const em = defineEmits(['close']);
 const handleClose = () => {
     open.value = false;
     em('close', false);
-    globalStore.isFullScreen = false;
-};
-
-watch(open, (val) => {
-    if (screenfull.isEnabled && !val && !mobile.value) screenfull.exit();
-});
-
-function toggleFullscreen() {
-    globalStore.isFullScreen = !globalStore.isFullScreen;
-}
-
-const loadTooltip = () => {
-    return i18n.global.t('commons.button.' + (globalStore.isFullScreen ? 'quitFullscreen' : 'fullscreen'));
 };
 
 const acceptParams = (props: LogProps) => {
     config.value = props;
     open.value = true;
-
-    if (!mobile.value) {
-        screenfull.on('change', () => {
-            globalStore.isFullScreen = screenfull.isFullscreen;
-        });
-    }
 };
 
 defineExpose({ acceptParams });

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

@@ -1,15 +1,11 @@
 <template>
-    <el-drawer
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        :key="refresh"
+    <DrawerPro
         v-model="drawerVisible"
-        size="50%"
-        append-to-body
+        :header="$t('commons.button.upgrade')"
+        :back="handleClose"
+        size="large"
+        :key="refresh"
     >
-        <template #header>
-            <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>
@@ -38,11 +34,10 @@
                 <el-button type="primary" @click="onUpgrade">{{ $t('setting.upgradeNow') }}</el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script setup lang="ts">
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { loadReleaseNotes, upgrade } from '@/api/modules/setting';
 import MdEditor from 'md-editor-v3';
 import i18n from '@/lang';

frontend/src/config/pinia-persist.ts

@@ -1,15 +1,9 @@
 import { PersistedStateOptions } from 'pinia-plugin-persistedstate';
 
-/**
- * @description pinia持久化参数配置
- * @param {String} key 存储到持久化的 name
- * @return persist
- * */
 const piniaPersistConfig = (key: string) => {
     const persist: PersistedStateOptions = {
         key,
         storage: window.localStorage,
-        // storage: window.sessionStorage,
     };
     return persist;
 };

frontend/src/env.d.ts

@@ -2,7 +2,6 @@
 
 declare module '*.vue' {
     import type { DefineComponent } from 'vue';
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
     const component: DefineComponent<{}, {}, any>;
     export default component;
 }

frontend/src/main.ts

@@ -14,7 +14,6 @@ for (const path in styleModule) {
     styleModule[path]?.();
 }
 
-import directives from '@/directives/index';
 import router from '@/routers/index';
 import i18n from '@/lang/index';
 import pinia from '@/store/index';
@@ -39,6 +38,5 @@ Object.keys(Icons).forEach((key) => {
 app.use(router);
 app.use(i18n);
 app.use(pinia);
-app.use(directives);
 app.use(Components);
 app.mount('#app');