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-25 20:39:03 +08:00
parent eec8c3d0ac
commit c0771bbc5d
5 changed files with 34 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@@ -30,7 +30,9 @@ whenever(ctrl_r, () => {})
inline-theme-disabled
>
<n-split :default-size="1 / 3" min="300px" max="800px">
<template #1><Tutorial /></template>
<template #1>
<Tutorial />
</template>
<template #2>
<n-split direction="vertical" min="200px">
<template #1>

29
src/components/Editors.vue
View File

@@ -1,46 +1,46 @@
<template>
<n-tabs
style="height: 100%"
pane-class="pane"
:value="tab"
pane-class="pane"
style="height: 100%"
type="card"
@update:value="changeTab"
>
<n-tab-pane name="html" tab="HTML">
<template #tab>
<n-flex align="center">
<Icon icon="skill-icons:html" :width="20"></Icon>
<Icon :width="20" icon="skill-icons:html"></Icon>
<span>HTML</span>
</n-flex>
</template>
<Editor language="html" :font-size="size" v-model:value="html" />
<Editor v-model:value="html" :font-size="size" language="html" />
</n-tab-pane>
<n-tab-pane name="css" tab="CSS">
<template #tab>
<n-flex align="center">
<Icon icon="skill-icons:css" :width="20"></Icon>
<Icon :width="20" icon="skill-icons:css"></Icon>
<span>CSS</span>
</n-flex>
</template>
<Editor language="css" :font-size="size" v-model:value="css" />
<Editor v-model:value="css" :font-size="size" language="css" />
</n-tab-pane>
<n-tab-pane name="js" tab="JS">
<template #tab>
<n-flex align="center">
<Icon icon="skill-icons:javascript" :width="20"></Icon>
<Icon :width="20" icon="skill-icons:javascript"></Icon>
<span>JS</span>
</n-flex>
</template>
<Editor language="js" :font-size="size" v-model:value="js" />
<Editor v-model:value="js" :font-size="size" language="js" />
</n-tab-pane>
<n-tab-pane name="actions" tab="选项">
<template #tab>
<n-flex align="center">
<Icon icon="skill-icons:actix-dark" :width="20"></Icon>
<Icon :width="20" icon="skill-icons:actix-dark"></Icon>
<span>选项</span>
</n-flex>
</template>
<n-flex vertical class="wrapper">
<n-flex class="wrapper" vertical>
<n-flex align="center">
<span class="label">重置</span>
<n-button @click="reset('html')">HTML</n-button>
@@ -51,10 +51,10 @@
<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 :disabled="size === 20" @click="changeSize(size - 2)">
调小
</n-button>
<n-button @click="changeSize(size + 2)" :disabled="size === 40">
<n-button :disabled="size === 40" @click="changeSize(size + 2)">
调大
</n-button>
</n-flex>
@@ -71,11 +71,12 @@
<script lang="ts" setup>
import { Icon } from "@iconify/vue"
import Editor from "./Editor.vue"
import { html, css, js, reset, tab, size } from "../store"
import { css, html, js, reset, size, tab } from "../store"
function changeTab(name: string) {
tab.value = name
}
function changeSize(num: number) {
size.value = num
}
@@ -85,9 +86,11 @@ function changeSize(num: number) {
height: 100%;
overflow: auto;
}
.wrapper {
padding-left: 16px;
}
.label {
font-size: 16px;
}

5
src/components/Preview.vue
View File

@@ -13,7 +13,7 @@
<script lang="ts" setup>
import { watchDebounced } from "@vueuse/core"
import { html, css, js } from "../store"
import { css, html, js } from "../store"
import { onMounted, useTemplateRef } from "vue"
import { Icon } from "@iconify/vue"
@@ -41,6 +41,7 @@ function preview() {
doc.write(content)
doc.close()
}
watchDebounced([html, css, js], preview, { debounce: 500, maxWait: 1000 })
onMounted(preview)
</script>
@@ -51,9 +52,11 @@ onMounted(preview)
border-bottom: 1px solid rgb(239, 239, 245);
box-sizing: border-box;
}
.titleText {
font-size: 16px;
}
.iframe {
width: 100%;
height: 100%;

11
src/components/Tutorial.vue
View File

@@ -17,7 +17,7 @@
</template>
<script lang="ts" setup>
import { Icon } from "@iconify/vue"
import { tab, html, js, css } from "../store"
import { css, html, js, tab } from "../store"
import { onMounted, ref, useTemplateRef, watch } from "vue"
import { marked } from "marked"
import { useStorage } from "@vueuse/core"
@@ -41,8 +41,7 @@ async function getContent() {
const res = await fetch(`/turtorial/${step.value}/README.md`)
const data = await res.text()
if (!!data) {
const html = await marked.parse(data, { async: true })
content.value = html
content.value = await marked.parse(data, { async: true })
last.value = false
} else {
content.value = ""
@@ -93,6 +92,7 @@ watch(step, render)
flex-direction: column;
height: 100%;
}
.title {
height: 43px;
padding: 0 20px;
@@ -100,9 +100,11 @@ watch(step, render)
border-bottom: 1px solid rgb(239, 239, 245);
box-sizing: border-box;
}
.preview {
font-size: 16px;
}
.markdown-body {
padding: 16px;
box-sizing: border-box;
@@ -113,6 +115,7 @@ watch(step, render)
.markdown-body pre {
position: relative;
}
.my-action-btn {
position: absolute;
top: 0;
@@ -121,9 +124,11 @@ watch(step, render)
cursor: pointer;
border-radius: 0.4rem;
}
.my-action-btn::before {
content: "替换";
}
.my-action-btn.click::before {
content: "已替换";
}

3
src/main.ts
View File

@@ -1,8 +1,11 @@
import { createApp } from "vue"
import { create } from "naive-ui"
import { marked } from "marked"
//@ts-ignore
import "normalize.css"
//@ts-ignore
import "github-markdown-css/github-markdown-light.css"
//@ts-ignore
import "highlight.js/styles/github.min.css"
import App from "./App.vue"