feat: 添加代码编辑器示例 (#1194)

build/optimize.ts

@@ -23,6 +23,7 @@ const include = [
   "vue-tippy",
   "cropperjs",
   "jsbarcode",
+  "codemirror",
   "pinyin-pro",
   "sortablejs",
   "swiper/vue",
@@ -43,6 +44,7 @@ const include = [
   "@howdyjs/mouse-menu",
   "@logicflow/extension",
   "vue-virtual-scroller",
+  "codemirror-editor-vue3",
   "@amap/amap-jsapi-loader",
   "el-table-infinite-scroll",
   "vue-waterfall-plugin-next",

locales/en.yaml

@@ -76,6 +76,7 @@ menus:
   pureLoginLog: Login Log
   pureOperationLog: Operation Log
   pureSystemLog: System Log
+  pureCodeMirror: CodeMirror
   pureMarkdown: Markdown
   pureEditor: Editor
   pureAbnormal: Abnormal Page

locales/zh-CN.yaml

@@ -76,6 +76,7 @@ menus:
   pureLoginLog: 登录日志
   pureOperationLog: 操作日志
   pureSystemLog: 系统日志
+  pureCodeMirror: 代码编辑器
   pureMarkdown: Markdown
   pureEditor: 编辑器
   pureAbnormal: 异常页面

package.json

@@ -65,6 +65,8 @@
     "animate.css": "^4.1.1",
     "axios": "^1.7.9",
     "china-area-data": "^5.0.1",
+    "codemirror": "^5",
+    "codemirror-editor-vue3": "^2.8.0",
     "cropperjs": "^1.6.2",
     "dayjs": "^1.11.13",
     "echarts": "^5.5.1",
@@ -119,6 +121,7 @@
     "@iconify-icons/ri": "^1.2.10",
     "@iconify/vue": "^4.2.0",
     "@intlify/unplugin-vue-i18n": "^6.0.1",
+    "@types/codemirror": "^5.60.15",
     "@types/dagre": "^0.7.52",
     "@types/intro.js": "^5.1.5",
     "@types/js-cookie": "^3.0.6",

pnpm-lock.yaml

@@ -62,6 +62,12 @@ importers:
       china-area-data:
         specifier: ^5.0.1
         version: 5.0.1
+      codemirror:
+        specifier: ^5
+        version: 5.65.18
+      codemirror-editor-vue3:
+        specifier: ^2.8.0
+        version: 2.8.0(codemirror@5.65.18)(diff-match-patch@1.0.5)(vue@3.5.13(typescript@5.6.3))
       cropperjs:
         specifier: ^1.6.2
         version: 1.6.2
@@ -219,6 +225,9 @@ importers:
       '@intlify/unplugin-vue-i18n':
         specifier: ^6.0.1
         version: 6.0.1(@vue/compiler-dom@3.5.13)(eslint@9.16.0(jiti@2.4.1))(rollup@4.28.1)(typescript@5.6.3)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
+      '@types/codemirror':
+        specifier: ^5.60.15
+        version: 5.60.15
       '@types/dagre':
         specifier: ^0.7.52
         version: 0.7.52
@@ -1441,6 +1450,9 @@ packages:
   '@types/babel__traverse@7.20.6':
     resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
 
+  '@types/codemirror@5.60.15':
+    resolution: {integrity: sha512-dTOvwEQ+ouKJ/rE9LT1Ue2hmP6H1mZv5+CCnNWu2qtiOe2LQa9lCprEY20HxiDmV/Bxh+dXjywmy5aKvoGjULA==}
+
   '@types/conventional-commits-parser@5.0.1':
     resolution: {integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==}
 
@@ -1507,6 +1519,9 @@ packages:
   '@types/stack-utils@2.0.3':
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
 
+  '@types/tern@0.23.9':
+    resolution: {integrity: sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==}
+
   '@types/tinycolor2@1.4.6':
     resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
 
@@ -2128,6 +2143,16 @@ packages:
   code-inspector-plugin@0.18.2:
     resolution: {integrity: sha512-LKOhA4YsoUZ6Dq4OQKP7G+kPcfeYGLoIQz7EDG4yoL5mqSu+uWR+0QvzoDc4HGXQ0jpkzEwlatbH6fBlbPiwKQ==}
 
+  codemirror-editor-vue3@2.8.0:
+    resolution: {integrity: sha512-ebYGNhBpLmQNLguXzNyMMkn6K8v3lcS5/Ncvdn6YS4bLGEHE67MfsJIS/WV0L7I6WavUuFlY/Rs/AJKChIwSwg==}
+    peerDependencies:
+      codemirror: ^5
+      diff-match-patch: ^1.0.5
+      vue: ^3.x
+
+  codemirror@5.65.18:
+    resolution: {integrity: sha512-Gaz4gHnkbHMGgahNt3CA5HBk5lLQBqmD/pBgeB4kQU6OedZmqMBjlRF0LSrp2tJ4wlLNPm2FfaUd1pDy0mdlpA==}
+
   codepage@1.15.0:
     resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==}
     engines: {node: '>=0.8'}
@@ -6432,6 +6457,10 @@ snapshots:
     dependencies:
       '@babel/types': 7.26.3
 
+  '@types/codemirror@5.60.15':
+    dependencies:
+      '@types/tern': 0.23.9
+
   '@types/conventional-commits-parser@5.0.1':
     dependencies:
       '@types/node': 20.17.9
@@ -6490,6 +6519,10 @@ snapshots:
 
   '@types/stack-utils@2.0.3': {}
 
+  '@types/tern@0.23.9':
+    dependencies:
+      '@types/estree': 1.0.6
+
   '@types/tinycolor2@1.4.6': {}
 
   '@types/web-animations-js@2.2.16': {}
@@ -7328,6 +7361,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  codemirror-editor-vue3@2.8.0(codemirror@5.65.18)(diff-match-patch@1.0.5)(vue@3.5.13(typescript@5.6.3)):
+    dependencies:
+      codemirror: 5.65.18
+      diff-match-patch: 1.0.5
+      vue: 3.5.13(typescript@5.6.3)
+
+  codemirror@5.65.18: {}
+
   codepage@1.15.0: {}
 
   collect-v8-coverage@1.0.2: {}

src/layout/components/lay-notice/components/NoticeItem.vue

@@ -112,7 +112,7 @@ function hoverDescription(event, description) {
   max-width: 238px;
 }
 </style>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .notice-container {
   display: flex;
   align-items: flex-start;

src/router/enums.ts

@@ -17,15 +17,16 @@ const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以
   monitor = 14,
   tabs = 15,
   about = 16,
-  markdown = 17,
-  editor = 18,
-  flowchart = 19,
-  formdesign = 20,
-  board = 21,
-  ppt = 22,
-  mind = 23,
-  guide = 24,
-  menuoverflow = 25;
+  codemirror = 17,
+  markdown = 18,
+  editor = 19,
+  flowchart = 20,
+  formdesign = 21,
+  board = 22,
+  ppt = 23,
+  mind = 24,
+  guide = 25,
+  menuoverflow = 26;
 
 export {
   home,
@@ -45,6 +46,7 @@ export {
   monitor,
   tabs,
   about,
+  codemirror,
   markdown,
   editor,
   flowchart,

src/router/modules/codemirror.ts

@@ -0,0 +1,23 @@
+import { $t } from "@/plugins/i18n";
+import { codemirror } from "@/router/enums";
+
+export default {
+  path: "/codemirror",
+  redirect: "/codemirror/index",
+  meta: {
+    icon: "ri:code-box-line",
+    title: $t("menus.pureCodeMirror"),
+    rank: codemirror
+  },
+  children: [
+    {
+      path: "/codemirror/index",
+      name: "CodeMirror",
+      component: () => import("@/views/codemirror/index.vue"),
+      meta: {
+        title: $t("menus.pureCodeMirror"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;

src/views/able/video-frame/index.vue

@@ -170,7 +170,7 @@ onBeforeUnmount(() => {
   </el-card>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 ::v-deep(.el-upload-dragger) {
   display: flex;
   align-items: center;

src/views/codemirror/index.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import "codemirror/theme/material-darker.css";
+import "codemirror/addon/hint/show-hint.css";
+import "codemirror/addon/hint/show-hint";
+import "codemirror/addon/hint/javascript-hint.js";
+import "codemirror/mode/javascript/javascript.js";
+
+import { useDark } from "@pureadmin/utils";
+import Codemirror from "codemirror-editor-vue3";
+import { ref, reactive, watch, nextTick } from "vue";
+import type { Editor, EditorConfiguration } from "codemirror";
+
+const { isDark } = useDark();
+const cminstance = ref<Editor | null>(null);
+const cmOptions: EditorConfiguration = reactive({
+  mode: "javascript",
+  theme: isDark.value ? "material-darker" : "default",
+  tabSize: 4,
+  readOnly: false,
+  autofocus: true,
+  autoRefresh: true,
+  lineNumbers: true,
+  lineWiseCopyCut: true,
+  gutters: ["CodeMirror-lint-markers"],
+  lint: true,
+  extraKeys: {
+    Ctrl: "autocomplete",
+    Tab: "autocomplete"
+  },
+  hintOptions: {
+    completeSingle: false
+  }
+});
+
+const code = ref(`function sayHello() {
+    console.log("Hello, World!");
+}
+
+sayHello();`);
+
+const onReady = (cm: Editor) => {
+  cminstance.value = cm;
+  cm.on("keypress", () => cm.showHint());
+  // console.log(cm.getValue());
+};
+
+watch(
+  () => isDark.value,
+  async newVal => {
+    await nextTick();
+    newVal
+      ? cminstance.value.setOption("theme", "material-darker")
+      : cminstance.value.setOption("theme", "default");
+  }
+);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          代码编辑器组件，采用开源的
+          <el-link
+            href="https://rennzhang.github.io/codemirror-editor-vue3/zh-CN/guide/getting-started"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            codemirror-editor-vue3
+          </el-link>
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/codemirror/index.vue"
+        target="_blank"
+      >
+        代码位置 src/views/codemirror/index.vue
+      </el-link>
+    </template>
+    <Codemirror
+      v-model:value="code"
+      width="100%"
+      height="400px"
+      :options="cmOptions"
+      :border="true"
+      @ready="onReady"
+    />
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.codemirror-container.bordered {
+  border: 1px solid var(--pure-border-color);
+}
+</style>

src/views/components/json-editor.vue

@@ -84,17 +84,7 @@ watch(
           >
             vue-json-pretty
           </el-link>
-          （支持大数据量）。
-        </span>
-        <span class="font-medium">
-          当然还有一款代码编辑器推荐（这里就不做演示了），采用开源的
-          <el-link
-            href="https://github.com/surmon-china/vue-codemirror"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            codemirror6
-          </el-link>
+          （支持大数据量）
         </span>
       </div>
       <el-link

src/views/components/swiper.vue

@@ -121,7 +121,7 @@ const swiperExample: any[] = [
   </el-card>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 :deep(.el-card__body) {
   padding-top: 0;
 }

src/views/list/card/components/ListCard.vue

@@ -89,7 +89,7 @@ const cardLogoClass = computed(() => [
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .list-card-item {
   display: flex;
   flex-direction: column;

src/views/monitor/logs/login/index.vue

@@ -147,7 +147,7 @@ const {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 :deep(.el-dropdown-menu__item i) {
   margin: 0;
 }

src/views/monitor/logs/operation/index.vue

@@ -147,7 +147,7 @@ const {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 :deep(.el-dropdown-menu__item i) {
   margin: 0;
 }

src/views/monitor/logs/system/index.vue

@@ -153,7 +153,7 @@ const {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 :deep(.el-dropdown-menu__item i) {
   margin: 0;
 }

src/views/monitor/online/index.vue

@@ -107,7 +107,7 @@ const {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 :deep(.el-dropdown-menu__item i) {
   margin: 0;
 }

src/views/system/role/index.vue

@@ -327,7 +327,7 @@ onMounted(() => {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 :deep(.el-dropdown-menu__item i) {
   margin: 0;
 }

src/views/system/user/index.vue

@@ -254,7 +254,7 @@ const {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 :deep(.el-dropdown-menu__item i) {
   margin: 0;
 }