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

fix

Browse Source
This commit is contained in:
yuetsh
2025-02-23 23:36:22 +08:00
parent 73ad304863
commit fc2126f364
3 changed files with 53 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/App.vue
View File

@@ -1,11 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { darkTheme, dateZhCN, zhCN } from "naive-ui" import { useMagicKeys, whenever } from "@vueuse/core"
import { useDark, useMagicKeys, whenever } from "@vueuse/core"
import Editors from "./components/Editors.vue" import Editors from "./components/Editors.vue"
import Preview from "./components/Preview.vue" import Preview from "./components/Preview.vue"
const isDark = useDark()
const { ctrl_s } = useMagicKeys({ const { ctrl_s } = useMagicKeys({
passive: false, passive: false,
onEventFired(e) { onEventFired(e) {
@@ -24,18 +21,12 @@ whenever(ctrl_r, () => {})
</script> </script>
<template> <template>
<n-config-provider <n-split :max="0.75" :min="0.25">
:locale="zhCN" <template #1>
:date-locale="dateZhCN" <Editors />
:theme="isDark ? darkTheme : null" </template>
> <template #2>
<n-split :max="0.75" :min="0.25"> <Preview />
<template #1> </template>
<Editors /> </n-split>
</template>
<template #2>
<Preview />
</template>
</n-split>
</n-config-provider>
</template> </template>

79
src/components/Editors.vue
View File

@@ -1,45 +1,52 @@
<template> <template>
<n-tabs pane-class="pane" default-value="html" type="segment"> <n-config-provider
<n-tab-pane name="html" tab="HTML"> :locale="zhCN"
<Editor language="html" :font-size="size" v-model:value="html" /> :date-locale="dateZhCN"
</n-tab-pane> :theme="null"
<n-tab-pane name="css" tab="CSS"> >
<Editor language="css" :font-size="size" v-model:value="css" /> <n-tabs pane-class="pane" default-value="html" type="segment">
</n-tab-pane> <n-tab-pane name="html" tab="HTML">
<n-tab-pane name="js" tab="JS"> <Editor language="html" :font-size="size" v-model:value="html" />
<Editor language="js" :font-size="size" v-model:value="js" /> </n-tab-pane>
</n-tab-pane> <n-tab-pane name="css" tab="CSS">
<n-tab-pane name="actions" tab="选项"> <Editor language="css" :font-size="size" v-model:value="css" />
<n-flex vertical class="wrapper"> </n-tab-pane>
<n-flex align="center"> <n-tab-pane name="js" tab="JS">
<span class="label">主题</span> <Editor language="js" :font-size="size" v-model:value="js" />
<n-button @click="toggleDark()"> </n-tab-pane>
{{ isDark ? "浅色" : "深色" }} <n-tab-pane name="actions" tab="选项">
</n-button> <n-flex vertical class="wrapper">
</n-flex> <!-- <n-flex align="center">
<n-flex align="center"> <span class="label">主题</span>
<span class="label">重置</span> <n-button @click="toggleDark()">
<n-button @click="reset('html')">HTML</n-button> {{ isDark ? "浅色" : "深色" }}
<n-button @click="reset('css')">CSS</n-button> </n-button>
<n-button @click="reset('js')">JS</n-button> </n-flex> -->
</n-flex>
<n-flex align="center">
<span class="label">字号</span>
<n-flex align="center"> <n-flex align="center">
<span :style="{ 'font-size': size + 'px' }">{{ size }}</span> <span class="label">重置</span>
<n-button @click="changeSize(size - 2)" :disabled="size === 20"> <n-button @click="reset('html')">HTML</n-button>
调小 <n-button @click="reset('css')">CSS</n-button>
</n-button> <n-button @click="reset('js')">JS</n-button>
<n-button @click="changeSize(size + 2)" :disabled="size === 40"> </n-flex>
调大 <n-flex align="center">
</n-button> <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>
</n-flex> </n-flex>
</n-flex> </n-flex>
</n-flex> </n-tab-pane>
</n-tab-pane> </n-tabs>
</n-tabs> </n-config-provider>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { darkTheme, dateZhCN, zhCN } from "naive-ui"
import { useDark, useToggle } from "@vueuse/core" import { useDark, useToggle } from "@vueuse/core"
import Editor from "./Editor.vue" import Editor from "./Editor.vue"
import { html, css, js, reset, size, changeSize } from "../store.ts" import { html, css, js, reset, size, changeSize } from "../store.ts"

2
src/main.ts
View File

@@ -8,7 +8,7 @@ import {
NTabPane, NTabPane,
NConfigProvider, NConfigProvider,
} from "naive-ui" } from "naive-ui"
import "normalize.css" import "normalize.css"
import App from "./App.vue" import App from "./App.vue"
const app = createApp(App) const app = createApp(App)