Merge pull request #59 from ZhQuella/main-feat/workflow

feat(add): "增加简单在线编辑器，后续需要持续优化增加功能"

package.json

@@ -17,6 +17,8 @@
     "grow_com:build": "pnpm --filter grow_components build",
     "grow_icon:dev": "pnpm --filter grow_admin_icons dev",
     "grow_icon:build": "pnpm --filter grow_admin_icons build",
+    "grow_editor:dev": "pnpm --filter grow_editor dev",
+    "grow_editor:build": "pnpm --filter grow_editor build",
     "grow_des:dev": "pnpm --filter grow_designer dev",
     "grow_des:build": "pnpm --filter grow_designer build",
     "grow_rule:dev": "pnpm --filter grow_rule_engine dev",

packages/grow_editor/.babelrc

@@ -0,0 +1,32 @@
+{
+  "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]],
+  "plugins": [
+    "syntax-dynamic-import",
+    ["@vue/babel-plugin-jsx"],
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator"
+  ],
+  "env": {
+    "utils": {
+      "presets": [
+        [
+          "env",
+          {
+            "loose": true,
+            "modules": "commonjs",
+            "targets": {
+              "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+            }
+          }
+        ]
+      ]
+    },
+    "test": {
+      "plugins": ["istanbul"],
+      "presets": [["env", { "targets": { "node": "current" } }]]
+    },
+    "esm": {
+      "presets": [["@babel/preset-env", { "modules": false }]]
+    }
+  }
+}

packages/grow_editor/README.md

@@ -0,0 +1 @@
+开发中，暂无相关描述

packages/grow_editor/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "grow_editor",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "author": "ZhQuella (Email:[email protected])",
+  "type": "module",
+  "license": "ISC",
+  "main": "./src/index.ts",
+  "scripts": {
+    "build": "rollup -c --environment NODE_ENV:production",
+    "dev": "rollup -c -w --environment NODE_ENV:development"
+  },
+  "dependencies": {
+    "@codemirror/commands": "^6.5.0",
+    "@codemirror/lang-css": "^6.2.1",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-sql": "^6.6.4",
+    "@codemirror/lang-vue": "^0.1.3",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.26.3",
+    "codemirror": "^6.0.1"
+  }
+}

packages/grow_editor/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

packages/grow_editor/rollup.config.mjs

@@ -0,0 +1,75 @@
+import path from "path";
+import { fileURLToPath } from 'url';
+import { defineConfig } from "rollup";
+import babel from "@rollup/plugin-babel";
+import resolve from "@rollup/plugin-node-resolve";
+import esbuild from 'rollup-plugin-esbuild';
+import vue from "@vitejs/plugin-vue";
+import jsx from "@vitejs/plugin-vue-jsx";
+import json from "@rollup/plugin-json";
+import commonjs from "@rollup/plugin-commonjs";
+import { terser } from "rollup-plugin-terser";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import postcss from "rollup-plugin-postcss";
+import alias from "@rollup/plugin-alias";
+import postcssImport from 'postcss-import';
+import tailwindcss from 'tailwindcss';
+const __filenameNew = fileURLToPath(import.meta.url);
+const __dirnameNew = path.dirname(__filenameNew);
+
+import pkg from "./package.json" assert { type: "json" };
+
+const createBanner = () => {
+  return `/*!
+  * ${pkg.name} v${pkg.version}
+  * (c) ${new Date().getFullYear()} ${pkg.author}
+  * @license ${pkg.license}
+  */`;
+};
+
+export default defineConfig({
+  input: "./src/index.ts",
+  output: [
+    {
+      banner: createBanner(),
+      file: "dist/index.js",
+      format: "cjs"
+    },
+    {
+      banner: createBanner(),
+      file: "dist/index.esm.js",
+      format: "esm",
+      exports: "named"
+    },
+    {
+      banner: createBanner(),
+      file: "dist/index.umd.js",
+      format: "umd",
+      name: "w"
+    }
+  ],
+  plugins: [
+    peerDepsExternal(),
+    vue({
+      reactivityTransform: true
+    }),
+    postcss({
+      extensions: [".css"],
+      extract: true,
+      plugins: [postcssImport(), tailwindcss()]
+    }),
+    commonjs(),
+    resolve({
+      preferBuiltins: true
+    }),
+    babel(),
+    jsx(),
+    esbuild(),
+    json(),
+    terser(),
+    alias({
+      entries: [{ find: "@", replacement: path.resolve(__dirnameNew, "src") }]
+    })
+  ],
+  external: ["Vue", "element-plus"]
+});

packages/grow_editor/shims.d.ts

@@ -0,0 +1,17 @@
+declare const __DEV__: boolean;
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const comp: DefineComponent<{}, {}, any>;
+  export default comp;
+}
+
+declare module "*.scss" {
+  const classes: string;
+  export default classes;
+}
+
+declare module "*.module.scss" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

packages/grow_editor/src/index.ts

@@ -0,0 +1,35 @@
+import { App, Component } from "vue";
+import { version } from "../package.json";
+
+import { GCodemirror } from "./packages/Codemirror";
+
+import "animate.css";
+import "./styles/tailwindcss/index.css";
+import "./styles/animate/index.css";
+
+const components: Component[] = [
+  GCodemirror
+];
+
+const install = (app: App) => {
+  const useComponent = (component: Component) => {
+    if (component.name) {
+      app.component(component.name, component);
+    } else {
+      throw "component need name";
+    }
+  };
+  components.forEach((component: Component) => {
+    useComponent(component);
+  });
+};
+
+const GrowConponent = {
+  version,
+  install,
+  GCodemirror
+};
+
+export { version, GCodemirror };
+
+export default GrowConponent;

packages/grow_editor/src/packages/Codemirror/GCodemirror.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="flex flex-col h-full">
+    <div class="grow-0 shrink-0 h-[40px] bg-BG_COLOR2 flex justify-between">
+      <div class="p-[4px] pl-[10px]">
+        <ElTooltip effect="dark"
+                    content="清空"
+                    placement="top">
+          <ElButton type="primary" text @click="onCleanEditor">
+            <ElIcon size="16">
+              <Clean />
+            </ElIcon>
+          </ElButton>
+        </ElTooltip>
+      </div>
+      <div class="p-[4px] pr-[10px]">
+        <ElSelect v-model="editorValue"
+                  @change="onModelChange"
+                  v-if="isSelectMode">
+          <ElOption v-for="(item) of selectMap"
+                    value-key="value"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item"></ElOption>
+        </ElSelect>
+      </div>
+    </div>
+    <ElScrollbar class="h-full w-full">
+      <div ref="codeEditor"></div>
+    </ElScrollbar>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: "GCodemirror" });
+import { ElScrollbar, ElSelect, ElOption, ElTooltip, ElButton, ElIcon } from "element-plus";
+import { Clean } from "@vicons/carbon";
+import { ref, onMounted, toRefs } from "vue";
+
+import { selectMap } from "../../static/dict";
+import { initEditor } from "./use/initEditor";
+import { useEvent } from "./use/useEvent";
+
+const props = defineProps({
+  isSelectMode: { type: Boolean, default: true },
+  defaultModel: { type: String, default: "javascript" }
+});
+
+const { defaultModel, isSelectMode } = toRefs(props);
+
+const editorValue = ref(selectMap[0]);
+const codeEditor = ref();
+
+const {
+  resetEditor,
+  editorView
+} = initEditor();
+
+const {
+  onModelChange,
+  onCleanEditor
+} = useEvent({
+  editorView,
+  codeEditor,
+  resetEditor,
+  editorValue
+});
+
+onMounted(() => {
+  resetEditor(codeEditor.value, editorValue.value.method);
+  if(isSelectMode.value){
+    editorValue.value = selectMap.find((el) => el.value === defaultModel.value) || selectMap[0];
+  };
+});
+</script>

packages/grow_editor/src/packages/Codemirror/index.ts

@@ -0,0 +1,3 @@
+import GCodemirror from './GCodemirror.vue';
+
+export { GCodemirror };

packages/grow_editor/src/packages/Codemirror/use/initEditor.ts

@@ -0,0 +1,31 @@
+import { ref } from "vue";
+
+import { EditorState } from "@codemirror/state";
+import { basicSetup } from "codemirror";
+import { EditorView, keymap } from "@codemirror/view";
+import { defaultKeymap } from "@codemirror/commands";
+// import { oneDark } from "@codemirror/theme-one-dark";
+
+export const initEditor = () => {
+
+    const editorView = ref();
+
+    const resetEditor = (parent: HTMLDivElement, method): void => {
+        editorView.value = new EditorView({
+            state: EditorState.create({
+                doc: "",
+                extensions: [
+                    basicSetup,
+                    keymap.of(defaultKeymap),
+                    method()
+                ]
+            }),
+            parent
+        });
+    }
+
+    return {
+        resetEditor,
+        editorView
+    }
+}

packages/grow_editor/src/packages/Codemirror/use/useEvent.ts

@@ -0,0 +1,23 @@
+
+
+export const useEvent = ({
+    editorView,
+    codeEditor,
+    resetEditor, editorValue
+}) => {
+
+    const onModelChange = (value) => {
+        codeEditor.value.innerHTML = "";
+        resetEditor(codeEditor.value, value.method);
+    };
+
+    const onCleanEditor= () => {
+        codeEditor.value.innerHTML = "";
+        resetEditor(codeEditor.value, editorValue.value.method);
+    }
+
+    return {
+        onCleanEditor,
+        onModelChange
+    }
+}

packages/grow_editor/src/static/dict.ts

@@ -0,0 +1,39 @@
+import { javascript } from "@codemirror/lang-javascript";
+import { vue } from "@codemirror/lang-vue";
+import { css } from "@codemirror/lang-css";
+import { json } from "@codemirror/lang-json";
+import { html } from "@codemirror/lang-html";
+import { sql } from "@codemirror/lang-sql";
+
+export const selectMap = [
+    {
+        label: "JavaScript",
+        value: "javascript",
+        method: javascript
+    },
+    {
+        label: "Css",
+        value: "css",
+        method: css
+    },
+    {
+        label: "Vue",
+        value: "vue",
+        method: vue
+    },
+    {
+        label: "HTML",
+        value: "html",
+        method: html
+    },
+    {
+        label: "SQL",
+        value: "sql",
+        method: sql
+    },
+    {
+        label: "Json",
+        value: "json",
+        method: json
+    }
+];

packages/grow_editor/src/styles/animate/index.css

@@ -0,0 +1,3 @@
+:root {
+  --animate-duration: 0.35s;
+}