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-24 10:47:02 +08:00
parent fc2126f364
commit 697cd50544
5 changed files with 71 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Editor.vue
View File

@@ -1,9 +1,7 @@
<script lang="ts" setup>
import { EditorView } from "@codemirror/view"
import { Codemirror } from "vue-codemirror"
import { oneDark } from "../themes/oneDark.ts"
import { smoothy } from "../themes/smoothy.ts"
import { useDark } from "@vueuse/core"
import { computed } from "vue"
import { css } from "@codemirror/lang-css"
import { javascript } from "@codemirror/lang-javascript"
@@ -33,8 +31,6 @@ const props = withDefaults(defineProps<Props>(), {
const code = defineModel<string>("value")
const isDark = useDark()
const lang = computed(() => {
if (props.language === "html") {
return html()
@@ -49,7 +45,7 @@ const lang = computed(() => {
<Codemirror
v-model="code"
indentWithTab
:extensions="[styleTheme, lang, isDark ? oneDark : smoothy]"
:extensions="[styleTheme, lang, smoothy]"
:tabSize="4"
:style="{ height: '100%', fontSize: props.fontSize + 'px' }"
/>

45
src/components/Editors.vue
View File

@@ -1,27 +1,41 @@
<template>
<n-config-provider
:locale="zhCN"
:date-locale="dateZhCN"
:theme="null"
>
<n-config-provider :locale="zhCN" :date-locale="dateZhCN">
<n-tabs 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>HTML5</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>CSS3</span>
</n-flex>
</template>
<Editor language="css" :font-size="size" v-model:value="css" />
</n-tab-pane>
<n-tab-pane name="js" tab="JS">
<n-tab-pane disabled name="js" tab="JS(未完成)">
<template #tab>
<n-flex align="center">
<Icon icon="skill-icons:javascript" :width="20" :height="20"></Icon>
<span>JS(未完成)</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="toggleDark()">
{{ isDark ? "浅色" : "深色" }}
</n-button>
</n-flex> -->
<n-flex align="center">
<span class="label">重置</span>
<n-button @click="reset('html')">HTML</n-button>
@@ -46,13 +60,10 @@
</n-config-provider>
</template>
<script lang="ts" setup>
import { darkTheme, dateZhCN, zhCN } from "naive-ui"
import { useDark, useToggle } from "@vueuse/core"
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"
const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>
<style scoped>
.pane {

23
src/components/Preview.vue
View File

@@ -13,20 +13,19 @@ function preview() {
const doc = iframe.value.contentDocument!
doc.open()
doc.write(`<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
<meta charset="UTF-8" />
<title>预览</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>${css.value}</style>
</head>
<body>
${html.value}
</body>
</html>`)
<html lang="zh-Hans-CN">
<head>
<meta charset="UTF-8" />
<title>预览</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>${css.value}</style>
</head>
<body>
${html.value}
</body>
</html>`)
doc.close()
}
watch([html, css], preview)
onMounted(preview)
</script>