xuyue/webpreview
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

auto import

Browse Source
This commit is contained in:
yuetsh
2025-02-24 18:42:11 +08:00
parent eed4f3a64c
commit 06368bb8ec
8 changed files with 542 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/App.vue
View File

@@ -1,7 +1,8 @@
<script setup lang="ts">
import { useMagicKeys, whenever } from "@vueuse/core"
import { dateZhCN, zhCN } from "naive-ui"
import Editors from "./components/Editors.vue"
import Preview from "./components/Preview.vue"
import { useMagicKeys, whenever } from "@vueuse/core"
const { ctrl_s } = useMagicKeys({
passive: false,
@@ -21,12 +22,14 @@ whenever(ctrl_r, () => {})
</script>
<template>
<n-split :max="0.75" :min="0.25">
<template #1>
<Editors />
</template>
<template #2>
<Preview />
</template>
</n-split>
<n-config-provider :locale="zhCN" :date-locale="dateZhCN">
<n-split direction="horizontal">
<template #1>
<Editors />
</template>
<template #2>
<Preview />
</template>
</n-split>
</n-config-provider>
</template>

2
src/components/Editor.vue
View File

@@ -2,10 +2,10 @@
import { EditorView } from "@codemirror/view"
import { Codemirror } from "vue-codemirror"
import { smoothy } from "../themes/smoothy.ts"
import { computed } from "vue"
import { css } from "@codemirror/lang-css"
import { javascript } from "@codemirror/lang-javascript"
import { html } from "@codemirror/lang-html"
import { computed } from "vue"
const styleTheme = EditorView.baseTheme({
"& .cm-scroller": {

111
src/components/Editors.vue
View File

@@ -1,66 +1,63 @@
<template>
<n-config-provider :locale="zhCN" :date-locale="dateZhCN">
<n-tabs size="large" pane-class="pane" default-value="html" type="segment">
<n-tab-pane name="html" tab="HTML">
<template #tab>
<n-tabs size="large" pane-class="pane" default-value="html" type="segment">
<n-tab-pane name="html" tab="HTML">
<template #tab>
<n-flex align="center">
<Icon icon="skill-icons:html" :width="20" :height="20"></Icon>
<span>HTML</span>
</n-flex>
</template>
<Editor language="html" :font-size="size" v-model:value="html" />
</n-tab-pane>
<n-tab-pane name="css" tab="CSS">
<template #tab>
<n-flex align="center">
<Icon icon="skill-icons:css" :width="20" :height="20"></Icon>
<span>CSS</span>
</n-flex>
</template>
<Editor language="css" :font-size="size" v-model:value="css" />
</n-tab-pane>
<n-tab-pane name="js" tab="JavaScript">
<template #tab>
<n-flex align="center">
<Icon icon="skill-icons:javascript" :width="20" :height="20"></Icon>
<span>JavaScript</span>
</n-flex>
</template>
<Editor language="js" :font-size="size" v-model:value="js" />
</n-tab-pane>
<n-tab-pane name="actions" tab="选项">
<template #tab>
<n-flex align="center">
<Icon icon="solar:settings-bold" :width="20" :height="20"></Icon>
<span>选项</span>
</n-flex>
</template>
<n-flex vertical class="wrapper">
<n-flex align="center">
<span class="label">重置</span>
<n-button @click="reset('html')">HTML</n-button>
<n-button @click="reset('css')">CSS</n-button>
<n-button @click="reset('js')">JS</n-button>
</n-flex>
<n-flex align="center">
<span class="label">字号</span>
<n-flex align="center">
<Icon icon="skill-icons:html" :width="20" :height="20"></Icon>
<span>HTML</span>
</n-flex>
</template>
<Editor language="html" :font-size="size" v-model:value="html" />
</n-tab-pane>
<n-tab-pane name="css" tab="CSS">
<template #tab>
<n-flex align="center">
<Icon icon="skill-icons:css" :width="20" :height="20"></Icon>
<span>CSS</span>
</n-flex>
</template>
<Editor language="css" :font-size="size" v-model:value="css" />
</n-tab-pane>
<n-tab-pane name="js" tab="JavaScript">
<template #tab>
<n-flex align="center">
<Icon icon="skill-icons:javascript" :width="20" :height="20"></Icon>
<span>JavaScript</span>
</n-flex>
</template>
<Editor language="js" :font-size="size" v-model:value="js" />
</n-tab-pane>
<n-tab-pane name="actions" tab="选项">
<template #tab>
<n-flex align="center">
<Icon icon="solar:settings-bold" :width="20" :height="20"></Icon>
<span>选项</span>
</n-flex>
</template>
<n-flex vertical class="wrapper">
<n-flex align="center">
<span class="label">重置</span>
<n-button @click="reset('html')">HTML</n-button>
<n-button @click="reset('css')">CSS</n-button>
<n-button @click="reset('js')">JS</n-button>
</n-flex>
<n-flex align="center">
<span class="label">字号</span>
<n-flex align="center">
<span :style="{ 'font-size': size + 'px' }">{{ size }}</span>
<n-button @click="changeSize(size - 2)" :disabled="size === 20">
调小
</n-button>
<n-button @click="changeSize(size + 2)" :disabled="size === 40">
调大
</n-button>
</n-flex>
<span :style="{ 'font-size': size + 'px' }">{{ size }}</span>
<n-button @click="changeSize(size - 2)" :disabled="size === 20">
调小
</n-button>
<n-button @click="changeSize(size + 2)" :disabled="size === 40">
调大
</n-button>
</n-flex>
</n-flex>
</n-tab-pane>
</n-tabs>
</n-config-provider>
</n-flex>
</n-tab-pane>
</n-tabs>
</template>
<script lang="ts" setup>
import { dateZhCN, zhCN } from "naive-ui"
import { Icon } from "@iconify/vue"
import Editor from "./Editor.vue"
import { html, css, js, reset, size, changeSize } from "../store.ts"

16
src/main.ts
View File

@@ -1,19 +1,9 @@
import { createApp } from "vue"
import {
create,
NButton,
NFlex,
NSplit,
NTabs,
NTabPane,
NConfigProvider,
} from "naive-ui"
import "normalize.css"
import { create } from "naive-ui"
import "normalize.css"
import App from "./App.vue"
const app = createApp(App)
const naive = create({
components: [NButton, NSplit, NFlex, NTabs, NTabPane, NConfigProvider],
})
const naive = create()
app.use(naive)
app.mount("#app")