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

update

Browse Source
This commit is contained in:
yuetsh
2025-02-23 23:17:06 +08:00
parent d934111354
commit e275da04ee
8 changed files with 200 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/App.vue
View File

@@ -1,9 +1,8 @@
<script setup lang="ts">
import { darkTheme, dateZhCN, zhCN } from "naive-ui"
import { useDark, useMagicKeys, whenever } from "@vueuse/core"
import Editor from "./components/Editor.vue"
import Editors from "./components/Editors.vue"
import Preview from "./components/Preview.vue"
import { html, css, js } from "./store.ts"
const isDark = useDark()
@@ -32,17 +31,7 @@ whenever(ctrl_r, () => {})
>
<n-split :max="0.75" :min="0.25">
<template #1>
<n-tabs default-value="html" type="segment">
<n-tab-pane name="html" tab="HTML">
<Editor language="html" v-model:value="html" />
</n-tab-pane>
<n-tab-pane name="css" tab="CSS">
<Editor language="css" v-model:value="css" />
</n-tab-pane>
<n-tab-pane name="js" tab="JS">
<Editor language="js" v-model:value="js" />
</n-tab-pane>
</n-tabs>
<Editors />
</template>
<template #2>
<Preview />
@@ -50,5 +39,3 @@ whenever(ctrl_r, () => {})
</n-split>
</n-config-provider>
</template>
<style scoped></style>

2
src/components/Editor.vue
View File

@@ -51,6 +51,6 @@ const lang = computed(() => {
indentWithTab
:extensions="[styleTheme, lang, isDark ? oneDark : smoothy]"
:tabSize="4"
:style="{ height: 'calc(100vh - 52px)', fontSize: props.fontSize + 'px' }"
:style="{ height: '100%', fontSize: props.fontSize + 'px' }"
/>
</template>

60
src/components/Editors.vue Normal file
View File

@@ -0,0 +1,60 @@
<template>
<n-tabs pane-class="pane" default-value="html" type="segment">
<n-tab-pane name="html" tab="HTML">
<Editor language="html" :font-size="size" v-model:value="html" />
</n-tab-pane>
<n-tab-pane name="css" tab="CSS">
<Editor language="css" :font-size="size" v-model:value="css" />
</n-tab-pane>
<n-tab-pane name="js" tab="JS">
<Editor language="js" :font-size="size" v-model:value="js" />
</n-tab-pane>
<n-tab-pane name="actions" tab="选项">
<n-flex vertical class="wrapper">
<!-- <n-flex align="center">
<span class="label">主题</span>
<n-button @click="toggleDark()">
{{ isDark ? "浅色" : "深色" }}
</n-button>
</n-flex> -->
<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>
</n-flex>
</n-flex>
</n-tab-pane>
</n-tabs>
</template>
<script lang="ts" setup>
import { useDark, useToggle } from "@vueuse/core"
import Editor from "./Editor.vue"
import { html, css, js, reset, size, changeSize } from "../store.ts"
const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>
<style scoped>
.pane {
height: calc(100vh - 52px);
}
.wrapper {
padding: 12px;
}
.label {
font-size: 16px;
}
</style>

9
src/components/Preview.vue
View File

@@ -8,12 +8,11 @@ import { onMounted, useTemplateRef, watch } from "vue"
const iframe = useTemplateRef<HTMLIFrameElement>("iframe")
function preview() {
if (!iframe.value) return
const doc = iframe.value.contentDocument
doc!.open()
doc!.write(`<!DOCTYPE html>
const doc = iframe.value.contentDocument!
doc.open()
doc.write(`<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
<meta charset="UTF-8" />
@@ -25,7 +24,7 @@ function preview() {
${html.value}
</body>
</html>`)
doc!.close()
doc.close()
}
watch([html, css], preview)

26
src/store.ts
View File

@@ -1,5 +1,25 @@
import { useStorage } from "@vueuse/core";
import { useStorage } from "@vueuse/core"
export const html = useStorage("web-html", `<div class="welcome">黄岩一职</div>`)
export const css = useStorage("web-css", `.welcome { color: red; }`)
const defaultHTML = `<div class="welcome">黄岩一职</div>`
const defaultCSS = `.welcome {
color: red;
}`
export const html = useStorage("web-html", defaultHTML)
export const css = useStorage("web-css", defaultCSS)
export const js = useStorage("web-js", "")
export function reset(lang: "html" | "css" | "js") {
if (lang === "html") {
html.value = defaultHTML
} else if (lang === "css") {
css.value = defaultCSS
} else {
js.value = ""
}
}
export const size = useStorage("web-fontsize", 14)
export function changeSize(num: number) {
size.value = num
}

22
src/themes/createTheme.ts
View File

@@ -2,11 +2,11 @@ import {
HighlightStyle,
type TagStyle,
syntaxHighlighting,
} from "@codemirror/language"
import { type Extension } from "@codemirror/state"
import { EditorView } from "@codemirror/view"
} from "@codemirror/language"
import { type Extension } from "@codemirror/state"
import { EditorView } from "@codemirror/view"
interface Options {
interface Options {
/**
* Theme variant. Determines which styles CodeMirror will apply by default.
*/
@@ -21,11 +21,11 @@ import {
* Syntax highlighting styles.
*/
styles: TagStyle[]
}
}
type Variant = "light" | "dark"
type Variant = "light" | "dark"
interface Settings {
interface Settings {
/**
* Editor background.
*/
@@ -62,13 +62,13 @@ import {
gutterForeground: string
gutterBorderRight: string
}
}
export const createTheme = ({
export const createTheme = ({
variant,
settings,
styles,
}: Options): Extension => {
}: Options): Extension => {
const theme = EditorView.theme(
{
// eslint-disable-next-line @typescript-eslint/naming-convention
@@ -107,4 +107,4 @@ import {
const extension = [theme, syntaxHighlighting(highlightStyle)]
return extension
}
}