💄 Build basic page framework

2025-04-24 18:13:48 +08:00
parent e8b5478bec
commit 72c2666932
32 changed files with 2996 additions and 139 deletions
--- a/frontend/src/editor/theme/base-dark.ts
+++ b/frontend/src/editor/theme/base-dark.ts
@@ -0,0 +1,129 @@
+import {EditorView} from '@codemirror/view'
+import {Extension} from '@codemirror/state'
+import {HighlightStyle, syntaxHighlighting} from '@codemirror/language'
+import {tags as t} from '@lezer/highlight'
+
+export const config = {
+    name: 'base-dark',
+    dark: true,
+    background: '#252B37',
+    foreground: '#9BB586',
+    selection: '#1A5888',
+    cursor: '#F8F8F2',
+    dropdownBackground: '#282A36',
+    dropdownBorder: '#191A21',
+    activeLine: '#2E333F',
+    lineNumber: '#676d7c',
+    lineNumberActive: '#F8F8F2',
+    lineNumberBackground: '#212731',
+    matchingBracket: '#44475A',
+    keyword: '#FF79C6',
+    storage: '#FF79C6',
+    variable: '#F8F8F2',
+    parameter: '#F8F8F2',
+    function: '#50FA7B',
+    string: '#F1FA8C',
+    constant: '#BD93F9',
+    type: '#8BE9FD',
+    class: '#8BE9FD',
+    number: '#BD93F9',
+    comment: '#6272A4',
+    heading: '#BD93F9',
+    invalid: '#FF5555',
+    regexp: '#F1FA8C',
+}
+
+export const draculaTheme = EditorView.theme({
+    '&': {
+        color: config.foreground,
+        backgroundColor: config.background,
+    },
+
+    '.cm-content': {caretColor: config.cursor},
+
+    '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor},
+    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection},
+
+    '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground},
+    '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'},
+    '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'},
+
+    '.cm-searchMatch': {
+        backgroundColor: config.dropdownBackground,
+        outline: `1px solid ${config.dropdownBorder}`
+    },
+    '.cm-searchMatch.cm-searchMatch-selected': {
+        backgroundColor: config.selection
+    },
+
+    '.cm-activeLine': {backgroundColor: config.activeLine},
+    '.cm-selectionMatch': {backgroundColor: config.selection},
+
+    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+        backgroundColor: config.matchingBracket,
+        outline: 'none'
+    },
+
+    '.cm-gutters': {
+        backgroundColor: config.lineNumberBackground,
+        color: config.foreground,
+        border: 'none'
+    },
+    '.cm-activeLineGutter': {backgroundColor: config.background},
+
+    '.cm-lineNumbers .cm-gutterElement': {color: config.lineNumber},
+    '.cm-lineNumbers .cm-activeLineGutter': {color: config.lineNumberActive},
+
+    '.cm-foldPlaceholder': {
+        backgroundColor: 'transparent',
+        border: 'none',
+        color: config.foreground
+    },
+    '.cm-tooltip': {
+        border: `1px solid ${config.dropdownBorder}`,
+        backgroundColor: config.dropdownBackground,
+        color: config.foreground,
+    },
+    '.cm-tooltip .cm-tooltip-arrow:before': {
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent'
+    },
+    '.cm-tooltip .cm-tooltip-arrow:after': {
+        borderTopColor: config.foreground,
+        borderBottomColor: config.foreground,
+    },
+    '.cm-tooltip-autocomplete': {
+        '& > ul > li[aria-selected]': {
+            background: config.selection,
+            color: config.foreground,
+        }
+    }
+}, {dark: config.dark})
+
+export const draculaHighlightStyle = HighlightStyle.define([
+    {tag: t.keyword, color: config.keyword},
+    {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable},
+    {tag: [t.propertyName], color: config.function},
+    {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string},
+    {tag: [t.function(t.variableName), t.labelName], color: config.function},
+    {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant},
+    {tag: [t.definition(t.name), t.separator], color: config.variable},
+    {tag: [t.className], color: config.class},
+    {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number},
+    {tag: [t.typeName], color: config.type, fontStyle: config.type},
+    {tag: [t.operator, t.operatorKeyword], color: config.keyword},
+    {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp},
+    {tag: [t.meta, t.comment], color: config.comment},
+    {tag: t.strong, fontWeight: 'bold'},
+    {tag: t.emphasis, fontStyle: 'italic'},
+    {tag: t.link, textDecoration: 'underline'},
+    {tag: t.heading, fontWeight: 'bold', color: config.heading},
+    {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable},
+    {tag: t.invalid, color: config.invalid},
+    {tag: t.strikethrough, textDecoration: 'line-through'},
+])
+
+export const baseDark: Extension = [
+    draculaTheme,
+    syntaxHighlighting(draculaHighlightStyle),
+]