Browse Source

topuser

master
1549469775 3 years ago
parent
commit
e1bfb2a969
  1. 3
      .gitignore
  2. 1
      components.d.ts
  3. 2
      src/components/index.ts
  4. 35
      src/components/ui/AdjustWidth.vue
  5. 12
      src/pages/Home/Home.vue
  6. 20
      src/pages/HomeRoute.ts
  7. 9
      src/pagesSys/Layout/Layout.vue
  8. 16
      src/pagesUI/editor/data.ts
  9. 113
      src/pagesUI/editor/editor.vue
  10. 13
      src/pagesUI/editor/files.vue
  11. 19
      src/router/basic/route/index.ts

3
.gitignore

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

1
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']
}
}

2
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

35
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>

12
src/pages/Home/Home.vue

@ -1,9 +1,13 @@
<template>
<div class="font-bold text-red-500">
<MonacoEditor></MonacoEditor>
<div class="font-bold text-red-500 h-1/1">
<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';
</script>
import MonacoEditor from "@/pagesUI/editor/editor.vue"
</script>

20
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"
}
}
]
}
])

9
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>

16
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

113
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 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';
import Files from "./files.vue"
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;
const monacoEL = ref()
let editor: monaco.editor.IStandaloneCodeEditor
const monacoEL = ref<HTMLElement>()
onMounted(()=>{
// 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',
// lineNumbers: 'off',
// minimap: {
// enabled: false
// }
});
window.onresize = () => {
console.log('Window resize');
editor.layout({} as monaco.editor.IDimension);
onMounted(() => {
if (monacoEL.value) {
// @ts-ignore
window.monaco = monaco
// https://www.typescriptlang.org/dev/typescript-vfs/
editor = monaco.editor.create(monacoEL.value, {
automaticLayout: true,
})
let model: monaco.editor.ITextModel = monaco.editor.createModel(`function hello() {\n\talert('Hello world!');\n}`, "javascript")
editor.setModel(model)
}
})
onBeforeUnmount(() => {
if (editor) {
// @ts-ignore
window.monaco = undefined
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>
</style>

13
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>

19
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
Loading…
Cancel
Save