feat: 增加drawer指令

frontend/src/directives/index.ts

@@ -5,6 +5,7 @@ import draggable from './modules/draggable';
 import debounce from './modules/debounce';
 import throttle from './modules/throttle';
 import longpress from './modules/longpress';
+import drawerDrag from './modules/drawer-drag';
 
 const directivesList: any = {
     // Custom directives
@@ -14,6 +15,7 @@ const directivesList: any = {
     debounce,
     throttle,
     longpress,
+    drawerDrag,
 };
 
 const directives = {

frontend/src/directives/modules/drawer-drag.ts

@@ -0,0 +1,60 @@
+/*
+	需求：实现一个drawer可拖拽指令。
+	使用：在 Dom 上加上 v-draggable 即可
+	<el-drawer v-drawerDrag />
+*/
+import type { Directive } from 'vue';
+interface ElType extends HTMLElement {
+    parentNode: any;
+}
+const drawerDrag: Directive = {
+    mounted: function (el: ElType) {
+        const minWidth = 400;
+        const maxWidth = document.body.clientWidth;
+        const dragDom = el.querySelector('.el-drawer');
+        (dragDom as HTMLElement).style.overflow = 'auto';
+
+        const resizeElL = document.createElement('div');
+        dragDom.appendChild(resizeElL);
+        resizeElL.style.cursor = 'w-resize';
+        resizeElL.style.position = 'absolute';
+        resizeElL.style.height = '100%';
+        resizeElL.style.width = '10px';
+        resizeElL.style.left = '0px';
+        resizeElL.style.top = '0px';
+
+        resizeElL.onmousedown = (e) => {
+            const elW = dragDom.clientWidth;
+            const EloffsetLeft = (dragDom as HTMLElement).offsetLeft;
+            const clientX = e.clientX;
+            document.onmousemove = function (e) {
+                e.preventDefault();
+                // 左侧鼠标拖拽位置
+                if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
+                    // 往左拖拽
+                    if (clientX > e.clientX) {
+                        if (dragDom.clientWidth < maxWidth) {
+                            (dragDom as HTMLElement).style.width = elW + (clientX - e.clientX) + 'px';
+                        } else {
+                            (dragDom as HTMLElement).style.width = maxWidth + 'px';
+                        }
+                    }
+                    // 往右拖拽
+                    if (clientX < e.clientX) {
+                        if (dragDom.clientWidth > minWidth) {
+                            (dragDom as HTMLElement).style.width = elW - (e.clientX - clientX) + 'px';
+                        } else {
+                            (dragDom as HTMLElement).style.width = minWidth + 'px';
+                        }
+                    }
+                }
+            };
+            // 拉伸结束
+            document.onmouseup = function () {
+                document.onmousemove = null;
+                document.onmouseup = null;
+            };
+        };
+    },
+};
+export default drawerDrag;

frontend/src/views/container/container/log/index.vue

@@ -1,41 +1,43 @@
 <template>
-    <el-drawer v-model="logVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
-        <template #header>
-            <DrawerHeader :header="$t('commons.button.log')" :back="handleClose" />
-        </template>
-        <div>
-            <el-select @change="searchLogs" style="width: 30%; float: left" v-model="logSearch.mode">
-                <el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" />
-            </el-select>
-            <div style="margin-left: 20px; float: left">
-                <el-checkbox border v-model="logSearch.isWatch">{{ $t('commons.button.watch') }}</el-checkbox>
+    <div>
+        <el-drawer v-model="logVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
+            <template #header>
+                <DrawerHeader :header="$t('commons.button.log')" :back="handleClose" />
+            </template>
+            <div>
+                <el-select @change="searchLogs" style="width: 30%; float: left" v-model="logSearch.mode">
+                    <el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" />
+                </el-select>
+                <div style="margin-left: 20px; float: left">
+                    <el-checkbox border v-model="logSearch.isWatch">{{ $t('commons.button.watch') }}</el-checkbox>
+                </div>
+                <el-button style="margin-left: 20px" @click="onDownload" icon="Download">
+                    {{ $t('file.download') }}
+                </el-button>
             </div>
-            <el-button style="margin-left: 20px" @click="onDownload" icon="Download">
-                {{ $t('file.download') }}
-            </el-button>
-        </div>
 
-        <codemirror
-            :autofocus="true"
-            placeholder="None data"
-            :indent-with-tab="true"
-            :tabSize="4"
-            style="margin-top: 20px; height: calc(100vh - 230px)"
-            :lineWrapping="true"
-            :matchBrackets="true"
-            theme="cobalt"
-            :styleActiveLine="true"
-            :extensions="extensions"
-            v-model="logInfo"
-            @ready="handleReady"
-            :disabled="true"
-        />
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="logVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-            </span>
-        </template>
-    </el-drawer>
+            <codemirror
+                :autofocus="true"
+                placeholder="None data"
+                :indent-with-tab="true"
+                :tabSize="4"
+                style="margin-top: 20px; height: calc(100vh - 230px)"
+                :lineWrapping="true"
+                :matchBrackets="true"
+                theme="cobalt"
+                :styleActiveLine="true"
+                :extensions="extensions"
+                v-model="logInfo"
+                @ready="handleReady"
+                :disabled="true"
+            />
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="logVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
+                </span>
+            </template>
+        </el-drawer>
+    </div>
 </template>
 
 <script lang="ts" setup>