导入 AKSRT 主题开发源码

assets/admin/src/components/form/AksCodeEditor.vue

@@ -0,0 +1,105 @@
+<template>
+  <div ref="editorRef" class="aks-code-editor" :class="{ 'is-disabled': disabled }" />
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount, shallowRef } from 'vue'
+import { EditorView, basicSetup } from 'codemirror'
+import { EditorState } from '@codemirror/state'
+import { html } from '@codemirror/lang-html'
+import { css } from '@codemirror/lang-css'
+import { javascript } from '@codemirror/lang-javascript'
+import { oneDark } from '@codemirror/theme-one-dark'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  language: { type: String, default: 'html' },
+  disabled: { type: Boolean, default: false },
+  rows: { type: Number, default: 8 },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const editorRef = ref(null)
+const view = shallowRef(null)
+let updating = false
+
+function resolveLang(lang) {
+  switch (lang) {
+    case 'css': return css()
+    case 'js':
+    case 'javascript': return javascript()
+    case 'html':
+    default: return html()
+  }
+}
+
+onMounted(() => {
+  if (!editorRef.value) return
+  const state = EditorState.create({
+    doc: props.modelValue || '',
+    extensions: [
+      basicSetup,
+      resolveLang(props.language),
+      oneDark,
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged && !updating) {
+          const val = update.state.doc.toString()
+          emit('update:modelValue', val)
+        }
+      }),
+      EditorView.editable.of(!props.disabled),
+      EditorState.readOnly.of(props.disabled),
+    ],
+  })
+  view.value = new EditorView({ state, parent: editorRef.value })
+})
+
+watch(() => props.modelValue, (newVal) => {
+  if (!view.value) return
+  const current = view.value.state.doc.toString()
+  if (newVal !== current) {
+    updating = true
+    view.value.dispatch({
+      changes: { from: 0, to: current.length, insert: newVal || '' },
+    })
+    updating = false
+  }
+})
+
+watch(() => props.disabled, (val) => {
+  if (!view.value) return
+  view.value.dispatch({
+    effects: [
+      EditorView.editable.reconfigure(EditorView.editable.of(!val)),
+      EditorState.readOnly.reconfigure(EditorState.readOnly.of(val)),
+    ],
+  })
+})
+
+onBeforeUnmount(() => {
+  if (view.value) {
+    view.value.destroy()
+    view.value = null
+  }
+})
+</script>
+
+<style scoped>
+.aks-code-editor {
+  border: 1px solid var(--n-border-color, #e0e0e6);
+  border-radius: 4px;
+  overflow: hidden;
+  min-height: calc(var(--rows, 8) * 22px);
+}
+.aks-code-editor :deep(.cm-editor) {
+  font-size: 13px;
+}
+.aks-code-editor :deep(.cm-editor.cm-focused) {
+  outline: none;
+}
+.aks-code-editor.is-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+</style>