From e275da04eebb63ae7ce2caa269a8c214b150c423 Mon Sep 17 00:00:00 2001 From: yuetsh <517252939@qq.com> Date: Sun, 23 Feb 2025 23:17:06 +0800 Subject: [PATCH] update --- src/App.vue | 17 +-- src/components/Editor.vue | 2 +- src/components/Editors.vue | 60 +++++++++++ src/components/Preview.vue | 9 +- src/store.ts | 28 ++++- src/themes/createTheme.ts | 214 ++++++++++++++++++------------------- src/themes/oneDark.ts | 2 +- src/themes/smoothy.ts | 2 +- 8 files changed, 200 insertions(+), 134 deletions(-) create mode 100644 src/components/Editors.vue diff --git a/src/App.vue b/src/App.vue index 7d29fea..84d2a9a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,9 +1,8 @@ + diff --git a/src/components/Preview.vue b/src/components/Preview.vue index c91203e..f7a0aee 100644 --- a/src/components/Preview.vue +++ b/src/components/Preview.vue @@ -8,12 +8,11 @@ import { onMounted, useTemplateRef, watch } from "vue" const iframe = useTemplateRef("iframe") - function preview() { if (!iframe.value) return - const doc = iframe.value.contentDocument - doc!.open() - doc!.write(` + const doc = iframe.value.contentDocument! + doc.open() + doc.write(` @@ -25,7 +24,7 @@ function preview() { ${html.value} `) - doc!.close() + doc.close() } watch([html, css], preview) diff --git a/src/store.ts b/src/store.ts index 63d4e22..4cb1e69 100644 --- a/src/store.ts +++ b/src/store.ts @@ -1,5 +1,25 @@ -import { useStorage } from "@vueuse/core"; +import { useStorage } from "@vueuse/core" -export const html = useStorage("web-html", `
黄岩一职
`) -export const css = useStorage("web-css", `.welcome { color: red; }`) -export const js = useStorage("web-js", "") \ No newline at end of file +const defaultHTML = `
黄岩一职
` +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 +} diff --git a/src/themes/createTheme.ts b/src/themes/createTheme.ts index 8894071..fb4073f 100644 --- a/src/themes/createTheme.ts +++ b/src/themes/createTheme.ts @@ -1,110 +1,110 @@ import { - HighlightStyle, - type TagStyle, - syntaxHighlighting, - } from "@codemirror/language" - import { type Extension } from "@codemirror/state" - import { EditorView } from "@codemirror/view" - - interface Options { - /** - * Theme variant. Determines which styles CodeMirror will apply by default. - */ - variant: Variant - - /** - * Settings to customize the look of the editor, like background, gutter, selection and others. - */ - settings: Settings - - /** - * Syntax highlighting styles. - */ - styles: TagStyle[] - } - - type Variant = "light" | "dark" - - interface Settings { - /** - * Editor background. - */ - background: string - - /** - * Default text color. - */ - foreground: string - - /** - * Caret color. - */ - caret: string - - /** - * Selection background. - */ - selection: string - - /** - * Background of highlighted lines. - */ - lineHighlight: string - - /** - * Gutter background. - */ - gutterBackground: string - - /** - * Text color inside gutter. - */ - gutterForeground: string - - gutterBorderRight: string - } - - export const createTheme = ({ - variant, - settings, - styles, - }: Options): Extension => { - const theme = EditorView.theme( - { - // eslint-disable-next-line @typescript-eslint/naming-convention - "&": { - backgroundColor: settings.background, - color: settings.foreground, - }, - ".cm-content": { - caretColor: settings.caret, - }, - ".cm-cursor, .cm-dropCursor": { - borderLeftColor: settings.caret, - }, - "&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection": - { - backgroundColor: settings.selection, - }, - ".cm-activeLine": { - backgroundColor: settings.lineHighlight, - }, - ".cm-gutters": { - backgroundColor: settings.gutterBackground, - borderRight: settings.gutterBorderRight, - color: settings.gutterForeground, - }, - ".cm-activeLineGutter": { - backgroundColor: settings.lineHighlight, - }, + HighlightStyle, + type TagStyle, + syntaxHighlighting, +} from "@codemirror/language" +import { type Extension } from "@codemirror/state" +import { EditorView } from "@codemirror/view" + +interface Options { + /** + * Theme variant. Determines which styles CodeMirror will apply by default. + */ + variant: Variant + + /** + * Settings to customize the look of the editor, like background, gutter, selection and others. + */ + settings: Settings + + /** + * Syntax highlighting styles. + */ + styles: TagStyle[] +} + +type Variant = "light" | "dark" + +interface Settings { + /** + * Editor background. + */ + background: string + + /** + * Default text color. + */ + foreground: string + + /** + * Caret color. + */ + caret: string + + /** + * Selection background. + */ + selection: string + + /** + * Background of highlighted lines. + */ + lineHighlight: string + + /** + * Gutter background. + */ + gutterBackground: string + + /** + * Text color inside gutter. + */ + gutterForeground: string + + gutterBorderRight: string +} + +export const createTheme = ({ + variant, + settings, + styles, +}: Options): Extension => { + const theme = EditorView.theme( + { + // eslint-disable-next-line @typescript-eslint/naming-convention + "&": { + backgroundColor: settings.background, + color: settings.foreground, }, - { - dark: variant === "dark", + ".cm-content": { + caretColor: settings.caret, }, - ) - - const highlightStyle = HighlightStyle.define(styles) - const extension = [theme, syntaxHighlighting(highlightStyle)] - - return extension - } \ No newline at end of file + ".cm-cursor, .cm-dropCursor": { + borderLeftColor: settings.caret, + }, + "&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection": + { + backgroundColor: settings.selection, + }, + ".cm-activeLine": { + backgroundColor: settings.lineHighlight, + }, + ".cm-gutters": { + backgroundColor: settings.gutterBackground, + borderRight: settings.gutterBorderRight, + color: settings.gutterForeground, + }, + ".cm-activeLineGutter": { + backgroundColor: settings.lineHighlight, + }, + }, + { + dark: variant === "dark", + }, + ) + + const highlightStyle = HighlightStyle.define(styles) + const extension = [theme, syntaxHighlighting(highlightStyle)] + + return extension +} diff --git a/src/themes/oneDark.ts b/src/themes/oneDark.ts index e1175e6..28551a3 100644 --- a/src/themes/oneDark.ts +++ b/src/themes/oneDark.ts @@ -146,4 +146,4 @@ const oneDarkHighlightStyle = HighlightStyle.define([ export const oneDark: Extension = [ oneDarkTheme, syntaxHighlighting(oneDarkHighlightStyle), -] \ No newline at end of file +] diff --git a/src/themes/smoothy.ts b/src/themes/smoothy.ts index 158572b..b58cdc6 100644 --- a/src/themes/smoothy.ts +++ b/src/themes/smoothy.ts @@ -80,4 +80,4 @@ export const smoothy = createTheme({ color: "#000", }, ], -}) \ No newline at end of file +})