topuser

.gitignore

@@ -5,3 +5,4 @@ dist-ssr
 *.local
 src/pages/Ezopen
 src/router/route/ezopen.ts
+.idea

components.d.ts

@@ -4,6 +4,7 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AdjustWidth: typeof import('./src/components/ui/AdjustWidth.vue')['default']
     Toast: typeof import('./src/components/Toast/Toast.vue')['default']
   }
 }

src/components/index.ts

@@ -5,7 +5,7 @@ import Column from './Column/Column.vue'
 // https://vitejs.dev/guide/features.html#glob-import
 export default {
     install(app: App) {
-        const modules = import.meta.globEager('./{icons,base}/**/*.vue')    
+        const modules = import.meta.globEager('./{icons,base,ui}/**/*.vue')    
         for (const path in modules) {
             const mod = modules[path]
             const module = mod.default || mod

src/components/ui/AdjustWidth.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="adjust-line" ref="adjustLineEL"></div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from "vue"
+const adjustLineEL = ref<HTMLElement>()
+
+onMounted(() => {
+    if (adjustLineEL.value) {
+        let el = adjustLineEL.value as HTMLElement
+        let container = el.parentElement as HTMLElement
+        let parentContainer = el.parentElement!.parentElement as HTMLElement
+        el.onmousedown = function (e) {
+            let owidth = parentContainer.clientWidth
+            let width = container.clientWidth
+            let startX = e.clientX
+            document.onmousemove = function (e) {
+                let nowX = e.clientX
+                let w = width + nowX - startX
+                if (Math.abs(w - owidth / 2) <= 5) {
+                    w = owidth / 2
+                }
+                parentContainer.style.pointerEvents = "none"
+                container.style.width = (w / owidth) * 100 + "%"
+            }
+            document.onmouseup = function (e) {
+                document.onmousemove = null
+                document.onmouseup = null
+                parentContainer.style.pointerEvents = "auto"
+            }
+        }
+    }
+})
+</script>

src/pages/Home/Home.vue

@@ -1,9 +1,13 @@
 <template>
-    <div class="font-bold text-red-500">
+    <div class="font-bold text-red-500 h-1/1">
-        <MonacoEditor></MonacoEditor>
+        <div class="flex align-middle flex-col h-1/1">
+            <MonacoEditor class="flex-1 !h-0"></MonacoEditor>
+        </div>
     </div>
 </template>
 
 <script lang="ts" setup>
-import MonacoEditor from '@/pagesUI/editor/editor.vue';
+import MonacoEditor from "@/pagesUI/editor/editor.vue"
+
+
 </script>

src/pages/HomeRoute.ts

@@ -1,20 +0,0 @@
-import { useDefineRoutes, useRouteConfig } from "@/hook/useDefineRoute"
-import { LAYOUT } from "@/router/constant"
-
-export default useDefineRoutes([
-    {
-        path: '',
-        redirect: '/home',
-        component: LAYOUT,
-        children: [
-            {
-                path: 'home',
-                name: "HOME",
-                component: ()=>import("@/pages/Home/Home.vue"),
-                meta: {
-                    title: "HOME"
-                }
-            }
-        ]
-    }
-])

src/pagesSys/Layout/Layout.vue

@@ -2,13 +2,20 @@
 import SiteHeader from "./SiteHeader/SiteHeader.vue"
 import SiteContent from "./SiteContent/SiteContent.vue"
 import SliderMenu from "./SliderMenu/SliderMenu.vue"
+import { useRoute } from "vue-router"
+import { computed } from "vue"
+
+const route = useRoute()
+const hideSlideMenu = computed(() => {
+    return route.meta.hideSlideMenu
+})
 </script>
 
 <template>
     <section class="app-layout">
         <SiteHeader></SiteHeader>
         <div class="app-container">
-            <SliderMenu></SliderMenu>
+            <SliderMenu v-if="!hideSlideMenu"></SliderMenu>
             <div class="app-content">
                 <SiteContent></SiteContent>
             </div>

src/pagesUI/editor/data.ts

@@ -0,0 +1,16 @@
+import { reactive } from "vue"
+
+interface IFile{
+    filename: "",
+    code: ""
+}
+
+interface IData{
+    filelist: IFile[]
+}
+
+const data = reactive<IData>({
+    filelist: []
+})
+
+export default data

src/pagesUI/editor/editor.vue

@@ -1,44 +1,101 @@
 <template>
-    <div class="ui-monaco-editor" ref="monacoEL">
+    <div class="ui-editor-wrapper">
-
+        <Files></Files>
+        <div class="ui-editor">
+            <div class="ui-monaco-editor__wrapper">
+                <div class="ui-monaco-editor" ref="monacoEL"></div>
+                <div class="adjust-line" ref="adjustLineEL"></div>
+                <img class="ui-monaco-logo" src="/static/logo.png" alt="" />
+                <AdjustWidth></AdjustWidth>
+            </div>
+            <div class="ui-preview">asdsa</div>
+        </div>
     </div>
 </template>
 
 <script lang="ts" setup>
-import 'monaco-editor/esm/vs/editor/editor.all.js';
+import Files from "./files.vue"
-import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';
-
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api"
-import { onMounted, ref } from "vue";
+import "monaco-editor/esm/vs/editor/editor.main"
+
+import { onBeforeMount, onBeforeUnmount, onMounted, ref } from "vue"
 import "./work"
 
-let editor: monaco.editor.IStandaloneCodeEditor;
+let editor: monaco.editor.IStandaloneCodeEditor
-const monacoEL = ref()
+const monacoEL = ref<HTMLElement>()
 
-onMounted(()=>{
+onMounted(() => {
+    if (monacoEL.value) {
+        // @ts-ignore
+        window.monaco = monaco
         // https://www.typescriptlang.org/dev/typescript-vfs/
         editor = monaco.editor.create(monacoEL.value, {
-        value: "function hello() {\n\talert('Hello world!');\n}",
-        language: 'javascript',
             automaticLayout: true,
-        // folding: false,
+        })
-        // theme: 'vs-dark',
+        let model: monaco.editor.ITextModel = monaco.editor.createModel(`function hello() {\n\talert('Hello world!');\n}`, "javascript")
-        // lineNumbers: 'off',
+        editor.setModel(model)
-        // minimap: {
+    }
-            // enabled: false
+})
-        // }
+onBeforeUnmount(() => {
-    });
+    if (editor) {
-    window.onresize = () => {
+        // @ts-ignore
-        console.log('Window resize');
+        window.monaco = undefined
-        editor.layout({} as monaco.editor.IDimension);
+        editor.dispose()
     }
 })
-
 </script>
 
 <style scoped lang="less">
-.ui-monaco-editor{
+.ui-editor-wrapper{
+    display: flex;
+    flex-direction: column;
+}
+.ui-editor {
+    flex: 1;
+    height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 100%;
-    height: 500px;
+    height: 100%;
+    .ui-monaco-editor__wrapper {
+        width: 50%;
+        height: 100%;
+        position: relative;
+        .ui-monaco-logo {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+            opacity: 0.3;
+        }
+        .ui-monaco-editor {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+    }
+
+    .ui-preview {
+        width: 0;
+        height: 100%;
+        flex: 1;
+    }
+}
+
+.adjust-line {
+    position: absolute;
+    z-index: 99;
+    right: -2px;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    cursor: w-resize;
+    transition: background-color 0.5s ease;
+    &:hover,
+    &:active {
+        background: red;
+    }
 }
 </style>

src/pagesUI/editor/files.vue

@@ -0,0 +1,13 @@
+<template>
+    <form action="/" :onSubmit="onSubmit">
+        <input type="text" placeholder="请输入文件名" />
+        <input type="submit" />
+    </form>
+</template>
+
+<script lang="ts" setup>
+function onSubmit(e: Event) {
+    e.preventDefault()
+    console.log(123)
+}
+</script>

src/router/basic/route/index.ts

@@ -0,0 +1,19 @@
+import { LAYOUT } from "@/router/constant"
+import { RouteRecordRaw } from "vue-router"
+
+export default {
+    path: "",
+    redirect: "/home",
+    component: LAYOUT,
+    children: [
+        {
+            path: "home",
+            name: "HOME",
+            component: () => import("@/pages/Home/Home.vue"),
+            meta: {
+                hideSlideMenu: true,
+                title: "HOME"
+            }
+        }
+    ]
+} as RouteRecordRaw