feat: 新增动画依赖、更换代码编辑器

apps/shalu-bigscreen-designer/src/views/designer/component/AnimateConfig.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

apps/shalu-bigscreen-designer/src/views/designer/component/Configurator.vue

@@ -32,7 +32,9 @@
         <div class="config-content">事件处理</div>
       </TabPane>
       <TabPane key="3" tab="动画">
-        <div class="config-content">动画处理</div>
+        <div class="config-content">
+          <AnimateConfig />
+        </div>
       </TabPane>
       <TabPane key="4" tab="组件">
         <div class="config-content">
@@ -51,6 +53,7 @@ import PageConfig from "./PageConfig.vue";
 import { asyncComponentAll, CusForm } from "@shalu/dashboard-ui";
 import { set, defaultsDeep, cloneDeep } from "lodash";
 import { useComponentConfig } from "@/hooks";
+import AnimateConfig from "./AnimateConfig.vue";
 
 const projectStore = useProjectStore();
 const configComponent = shallowRef<null | string>(null);

apps/shalu-bigscreen-designer/src/views/view/component/RenderComponent.vue

@@ -8,14 +8,14 @@
 
 <script setup lang="ts">
 import type { CustomElement } from '#/project';
-import { defineProps, ref, defineAsyncComponent } from 'vue';
+import { defineProps, ref, defineAsyncComponent, CSSProperties  } from 'vue';
 import { asyncComponentAll, Container } from '@shalu/dashboard-ui';
 
 const props = defineProps<{
   element: CustomElement;
 }>();
 const component = defineAsyncComponent(asyncComponentAll[props.element.componentType  as keyof typeof asyncComponentAll]);
-const containerStyle = ref({
+const containerStyle = ref<CSSProperties>({
   width: `${props.element.container.props.width}px`,
   height: `${props.element.container.props.height}px`,
   position: 'absolute',

package.json

@@ -12,30 +12,30 @@
   "license": "ISC",
   "devDependencies": {
     "@types/gulp": "^4.0.17",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "css-loader": "^7.1.2",
     "gulp": "^5.0.0",
+    "less-loader": "^12.2.0",
     "sucrase": "^3.35.0",
     "typescript": "^5.5.3",
-    "vue": "^3.2.13",
     "vite": "^5.3.4",
     "vite-plugin-dts": "^3.9.1",
-    "vue-codemirror": "^6.1.1",
+    "vue": "^3.2.13",
     "vue-hooks-plus": "^2.2.0",
     "vue-loader": "^17.4.2",
-    "vue-tsc": "^2.0.24",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vitejs/plugin-vue-jsx": "^4.0.0",
-    "less-loader": "^12.2.0",
-    "css-loader": "^7.1.2"
-    
+    "vue-tsc": "^2.0.24"
   },
   "dependencies": {
     "@shalu/dashboard-ui": "workspace:^",
     "@shalu/service": "workspace:^",
     "@shalu/utils": "workspace:^",
+    "animejs": "^3.2.2",
     "ant-design-vue": "^4.X",
-    "element-plus": "^2.7.6",
     "echarts": "^5.5.1",
-    "vue-hooks-plus": "^2.2.0",
-    "lodash-es": "^4.17.21"
+    "element-plus": "^2.7.6",
+    "lodash-es": "^4.17.21",
+    "monaco-editor": "^0.50.0",
+    "vue-hooks-plus": "^2.2.0"
   }
 }

packages/shalu-dashboard-ui/components/charts/DataConfig.vue

@@ -89,7 +89,7 @@
       </Form.Item>
     </template>
   </Form>
-  <CodeEditorModal ref="codeEditorRef" title="编辑" @ok="handleCodeSave" />
+  <CodeEditorModal ref="codeEditorRef" title="编辑" @ok="handleCodeSave" language="json" />
 </template>
 
 <script setup lang="ts">

packages/shalu-dashboard-ui/components/codeEditor/src/Editor.vue

@@ -1,85 +1,110 @@
 <template>
-  <Codemirror
-    ref="editorRef"
-    placeholder="请输入"
-    style="height: 500px;"
-    :model-value="modelValue"
-    :tab-size="2"
-    :auto-focus="false"
-    :indent-with-tabs="true"
-    :extensions="[
-      oneDark,
-      javascript(),
-      json()
-    ]"
-    @change="handleCodeChange"
-  />
+  <div ref="editorRef" style="width: 750px; height: 500px"></div>
 </template>
 
 <script lang="ts">
-import { ref, defineComponent } from 'vue';
-import { Codemirror } from 'vue-codemirror';
-import { oneDark } from '@codemirror/theme-one-dark';
-import { javascript } from '@codemirror/lang-javascript';
-import { json } from '@codemirror/lang-json';
-import jsBeautify from 'js-beautify';
+import {
+  ref,
+  defineComponent,
+  onMounted,
+  PropType,
+  onBeforeUnmount,
+} from "vue";
+import jsBeautify from "js-beautify";
+
+import * as monaco from "monaco-editor";
+//@ts-ignore
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+//@ts-ignore
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+//@ts-ignore
+import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
+//@ts-ignore
+import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
+//@ts-ignore
+import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
 
 const jsBeautifyOption = {
-  "indent_size": "2",
-  "indent_char": " ",
-  "max_preserve_newlines": "5",
-  "preserve_newlines": true,
-  "keep_array_indentation": false,
-  "break_chained_methods": false,
-  "indent_scripts": "normal",
-  "brace_style": "collapse",
-  "space_before_conditional": true,
-  "unescape_strings": false,
-  "jslint_happy": false,
-  "end_with_newline": true,
-  "wrap_line_length": "0",
-  "indent_inner_html": false,
-  "comma_first": false,
-  "e4x": false,
-  "indent_empty_lines": false
-}
+  indent_size: "2",
+  indent_char: " ",
+  max_preserve_newlines: "5",
+  preserve_newlines: true,
+  keep_array_indentation: false,
+  break_chained_methods: false,
+  indent_scripts: "normal",
+  brace_style: "collapse",
+  space_before_conditional: true,
+  unescape_strings: false,
+  jslint_happy: false,
+  end_with_newline: true,
+  wrap_line_length: "0",
+  indent_inner_html: false,
+  comma_first: false,
+  e4x: false,
+  indent_empty_lines: false,
+};
 
 export default defineComponent({
   name: "DEditor",
-  components: { Codemirror },
   props: {
     code: {
       type: String,
-      default: ''
-    }
+      default: "",
+    },
+    language: {
+      type: String as PropType<
+        "javascript" | "json" | "html" | "typescript" | "sql"
+      >,
+      default: "javascript",
+    },
   },
-  emits: ['update:code', 'change'],
+  emits: ["update:code", "change"],
   setup(props, { emit }) {
-    const editorRef = ref(null);
+    const editorRef = ref();
     const modelValue = ref(jsBeautify(props.code, jsBeautifyOption));
+    let editor: monaco.editor.IStandaloneCodeEditor;
+
+    onMounted(() => {
+      self.MonacoEnvironment = {
+        getWorker(_, label) {
+          if (label === "json") {
+            return new jsonWorker();
+          }
+          if (label === "css" || label === "scss" || label === "less") {
+            return new cssWorker();
+          }
+          if (label === "html" || label === "handlebars" || label === "razor") {
+            return new htmlWorker();
+          }
+          if (label === "typescript" || label === "javascript") {
+            return new tsWorker();
+          }
+          return new editorWorker();
+        },
+      };
+      editor = monaco.editor.create(editorRef.value, {
+        value: modelValue.value,
+        language: props.language,
+        theme: "vs-dark",
+      });
+
+      // 监听代码修改事件
+      editor.onDidChangeModelContent(() => {
+        const code = editor.getValue();
+        emit('change', code);
+        emit('update:code', code);
+      });
+    });
+
+    onBeforeUnmount(() => {
+      editor?.dispose();
+    });
 
-    const handleCodeChange = (val: string) => {
-      try {
-        emit('update:code', val);
-        emit('change', val);
-      } catch (error) {
-        console.error(error);
-        return;
-      }
-    }
-    
     return {
       editorRef,
-      modelValue,
-      handleCodeChange,
-      oneDark, 
-      javascript, 
-      json,
-    }
-  }
-})
+    };
+  },
+});
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

packages/shalu-dashboard-ui/components/codeEditor/src/index.vue

@@ -5,7 +5,7 @@
     :width="width"
     :destroyOnClose="true"
   >
-    <Editor v-model:code="code" />
+    <Editor v-model:code="code" v-bind="$attrs"/>
     <template #footer>
       <slot name="footer">
         <Button @click="close">取消</Button>

packages/shalu-dashboard-ui/components/index.d.ts

@@ -1,9 +0,0 @@
-import { App } from 'vue';
-
-export * from './components';
-export declare const install: (app: App) => App;
-declare const _default: {
-    version: string;
-    install: (app: App) => App;
-};
-export default _default;

packages/shalu-dashboard-ui/package.json

@@ -15,9 +15,6 @@
   },
   "devDependencies": {
     "@ant-design/icons-vue": "^7.0.1",
-    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/theme-one-dark": "^6.1.2",
     "@types/jest": "^27.0.1",
     "@types/node": "^20.14.9",
     "@typescript-eslint/eslint-plugin": "^5.4.0",

packages/shalu-dashboard-ui/typings/shalu-dashboard-ui.d.ts

@@ -10,6 +10,7 @@ import { Config as BasicPieConfig } from './charts/Pie/BasicPie';
 import { defaultPropsValue as BasicPieDefaultProps } from './charts/Pie/BasicPie';
 import { basicPieProps as BasicPieProps } from './charts/Pie/BasicPie';
 import { ChartData } from './charts/types';
+import { default as Container } from './container';
 import { CusForm } from './cusForm';
 import { DataSource } from './charts/types';
 import { IFormItem } from './cusForm';
@@ -20,6 +21,7 @@ export declare const asyncComponentAll: {
     BasicLine: () => Promise<any>;
     BasicBar: () => Promise<any>;
     BasicPie: () => Promise<any>;
+    Container: () => Promise<any>;
 };
 
 export declare const BasicBar: any;
@@ -53,15 +55,20 @@ export declare const components: {
     BasicBar: any;
     Title: any;
     BasicPie: any;
+    Container: any;
 };
 
+export { Container }
+
 export { CusForm }
 
 export { DataSource }
 
 export declare enum DataSourceType {
     STATIC = 0,
-    API = 1
+    API = 1,
+    BASIC_PATH = 2,
+    VIEW_CODE = 3
 }
 
 declare const _default: {

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@shalu/utils':
         specifier: workspace:^
         version: link:packages/utils
+      animejs:
+        specifier: ^3.2.2
+        version: 3.2.2
       ant-design-vue:
         specifier: ^4.X
         version: 4.2.3(vue@3.4.31)
@@ -29,6 +32,9 @@ importers:
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
+      monaco-editor:
+        specifier: ^0.50.0
+        version: 0.50.0
       vue-hooks-plus:
         specifier: ^2.2.0
         version: 2.2.1(vue@3.4.31)
@@ -66,9 +72,6 @@ importers:
       vue:
         specifier: ^3.2.13
         version: 3.4.31(typescript@5.5.3)
-      vue-codemirror:
-        specifier: ^6.1.1
-        version: 6.1.1(codemirror@6.0.1)(vue@3.4.31)
       vue-loader:
         specifier: ^17.4.2
         version: 17.4.2(vue@3.4.31)(webpack@5.93.0)
@@ -157,15 +160,6 @@ importers:
       '@ant-design/icons-vue':
         specifier: ^7.0.1
         version: 7.0.1(vue@3.4.31)
-      '@codemirror/lang-javascript':
-        specifier: ^6.2.2
-        version: 6.2.2
-      '@codemirror/lang-json':
-        specifier: ^6.0.1
-        version: 6.0.1
-      '@codemirror/theme-one-dark':
-        specifier: ^6.1.2
-        version: 6.1.2
       '@types/jest':
         specifier: ^27.0.1
         version: 27.5.2
@@ -1645,6 +1639,7 @@ packages:
       '@codemirror/state': 6.4.1
       '@codemirror/view': 6.28.4
       '@lezer/common': 1.2.1
+    dev: false
 
   /@codemirror/commands@6.6.0:
     resolution: {integrity: sha512-qnY+b7j1UNcTS31Eenuc/5YJB6gQOzkUoNmJQc0rznwqSRpeaWWpjkWy2C/MPTcePpsKJEM26hXrOXl1+nceXg==}
@@ -1653,6 +1648,7 @@ packages:
       '@codemirror/state': 6.4.1
       '@codemirror/view': 6.28.4
       '@lezer/common': 1.2.1
+    dev: false
 
   /@codemirror/lang-javascript@6.2.2:
     resolution: {integrity: sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==}
@@ -1664,12 +1660,14 @@ packages:
       '@codemirror/view': 6.28.4
       '@lezer/common': 1.2.1
       '@lezer/javascript': 1.4.17
+    dev: false
 
   /@codemirror/lang-json@6.0.1:
     resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
     dependencies:
       '@codemirror/language': 6.10.2
       '@lezer/json': 1.0.2
+    dev: false
 
   /@codemirror/language@6.10.2:
     resolution: {integrity: sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==}
@@ -1680,6 +1678,7 @@ packages:
       '@lezer/highlight': 1.2.0
       '@lezer/lr': 1.4.1
       style-mod: 4.1.2
+    dev: false
 
   /@codemirror/lint@6.8.1:
     resolution: {integrity: sha512-IZ0Y7S4/bpaunwggW2jYqwLuHj0QtESf5xcROewY6+lDNwZ/NzvR4t+vpYgg9m7V8UXLPYqG+lu3DF470E5Oxg==}
@@ -1687,6 +1686,7 @@ packages:
       '@codemirror/state': 6.4.1
       '@codemirror/view': 6.28.4
       crelt: 1.0.6
+    dev: false
 
   /@codemirror/search@6.5.6:
     resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==}
@@ -1694,9 +1694,11 @@ packages:
       '@codemirror/state': 6.4.1
       '@codemirror/view': 6.28.4
       crelt: 1.0.6
+    dev: false
 
   /@codemirror/state@6.4.1:
     resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
+    dev: false
 
   /@codemirror/theme-one-dark@6.1.2:
     resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
@@ -1705,6 +1707,7 @@ packages:
       '@codemirror/state': 6.4.1
       '@codemirror/view': 6.28.4
       '@lezer/highlight': 1.2.0
+    dev: false
 
   /@codemirror/view@6.28.4:
     resolution: {integrity: sha512-QScv95fiviSQ/CaVGflxAvvvDy/9wi0RFyDl4LkHHWiMr/UPebyuTspmYSeN5Nx6eujcPYwsQzA6ZIZucKZVHQ==}
@@ -1712,6 +1715,7 @@ packages:
       '@codemirror/state': 6.4.1
       style-mod: 4.1.2
       w3c-keyname: 2.2.8
+    dev: false
 
   /@ctrl/tinycolor@3.6.1:
     resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
@@ -2550,11 +2554,13 @@ packages:
 
   /@lezer/common@1.2.1:
     resolution: {integrity: sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==}
+    dev: false
 
   /@lezer/highlight@1.2.0:
     resolution: {integrity: sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==}
     dependencies:
       '@lezer/common': 1.2.1
+    dev: false
 
   /@lezer/javascript@1.4.17:
     resolution: {integrity: sha512-bYW4ctpyGK+JMumDApeUzuIezX01H76R1foD6LcRX224FWfyYit/HYxiPGDjXXe/wQWASjCvVGoukTH68+0HIA==}
@@ -2562,6 +2568,7 @@ packages:
       '@lezer/common': 1.2.1
       '@lezer/highlight': 1.2.0
       '@lezer/lr': 1.4.1
+    dev: false
 
   /@lezer/json@1.0.2:
     resolution: {integrity: sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==}
@@ -2569,11 +2576,13 @@ packages:
       '@lezer/common': 1.2.1
       '@lezer/highlight': 1.2.0
       '@lezer/lr': 1.4.1
+    dev: false
 
   /@lezer/lr@1.4.1:
     resolution: {integrity: sha512-CHsKq8DMKBf9b3yXPDIU4DbH+ZJd/sJdYOW2llbW/HudP5u0VS6Bfq1hLYfgU7uAYGFIyGGQIsSOXGPEErZiJw==}
     dependencies:
       '@lezer/common': 1.2.1
+    dev: false
 
   /@microsoft/api-extractor-model@7.28.13(@types/node@20.14.10):
     resolution: {integrity: sha512-39v/JyldX4MS9uzHcdfmjjfS6cYGAoXV+io8B5a338pkHiSt+gy2eXQ0Q7cGFJ7quSa1VqqlMdlPrB6sLR/cAw==}
@@ -4504,6 +4513,10 @@ packages:
       require-from-string: 2.0.2
     dev: true
 
+  /animejs@3.2.2:
+    resolution: {integrity: sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ==}
+    dev: false
+
   /ansi-colors@4.1.3:
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
     engines: {node: '>=6'}
@@ -5234,6 +5247,7 @@ packages:
       '@codemirror/view': 6.28.4
     transitivePeerDependencies:
       - '@lezer/common'
+    dev: false
 
   /collect-v8-coverage@1.0.2:
     resolution: {integrity: sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==}
@@ -5646,6 +5660,7 @@ packages:
 
   /crelt@1.0.6:
     resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+    dev: false
 
   /cross-spawn@5.1.0:
     resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
@@ -9063,6 +9078,10 @@ packages:
     resolution: {integrity: sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==}
     dev: true
 
+  /monaco-editor@0.50.0:
+    resolution: {integrity: sha512-8CclLCmrRRh+sul7C08BmPBP3P8wVWfBHomsTcndxg5NRCEPfu/mc2AGU8k37ajjDVXcXFc12ORAMUkmk+lkFA==}
+    dev: false
+
   /mrmime@2.0.0:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
@@ -11026,6 +11045,7 @@ packages:
 
   /style-mod@4.1.2:
     resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
+    dev: false
 
   /stylehacks@5.1.1(postcss@8.4.39):
     resolution: {integrity: sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==}
@@ -11732,6 +11752,7 @@ packages:
       '@codemirror/view': 6.28.4
       codemirror: 6.0.1(@lezer/common@1.2.1)
       vue: 3.4.31(typescript@5.5.3)
+    dev: false
 
   /vue-component-type-helpers@2.0.26:
     resolution: {integrity: sha512-sO9qQ8oC520SW6kqlls0iqDak53gsTVSrYylajgjmkt1c0vcgjsGSy1KzlDrbEx8pm02IEYhlUkU5hCYf8rwtg==}
@@ -11985,6 +12006,7 @@ packages:
 
   /w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+    dev: false
 
   /w3c-xmlserializer@2.0.0:
     resolution: {integrity: sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==}