feat: 修改组件库配置

apps/shalu-bigscreen-designer/src/config/compSetting.ts

@@ -171,29 +171,29 @@ export const compSetting: CompSetting = {
           name: '条形图类',
           children: [
             {
-              name: '饼状图',
+              name: '条形图',
               componetName: 'BasicPie',
-              icon: compIcon['chart/pie/basic']
+              icon: compIcon['chart/strip/basic']
             },
             {
-              name: '不等弧度玫瑰图',
+              name: '堆积条形图',
               componetName: 'BasicPie',
-              icon: compIcon['chart/pie/unequal-radians-rose']
+              icon: compIcon['chart/strip/percent']
             },
             {
-              name: '等弧度玫瑰图',
+              name: '百分比堆积条形图',
               componetName: 'BasicPie',
-              icon: compIcon['chart/pie/equal-radians-rose']
+              icon: compIcon['chart/strip/stack']
             },
             {
-              name: '多层饼图',
+              name: '自定义条形图',
               componetName: 'BasicPie',
-              icon: compIcon['chart/pie/multilayer']
+              icon: compIcon['chart/strip/custom']
             },
             {
-              name: '轮播饼图',
+              name: '轮播条形图',
               componetName: 'BasicPie',
-              icon: compIcon['chart/pie/carousel']
+              icon: compIcon['chart/strip/carousel']
             },
           ]
         },

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

@@ -1,13 +1,71 @@
 <template>
   <div>
-
+    <CusForm :columns="animateFormItems" @change="handleSetAnimate" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { CusForm, IFormItem } from "@shalu/dashboard-ui";
+import { computed } from "vue";
 
+const animateFormItems = computed((): IFormItem[] => {
+  return [
+    {
+      label: "组件动画",
+      type: "divider",
+    },
+    {
+      label: "开启动画",
+      prop: "animate.enable",
+      type: "switch",
+      defaultValue: false,
+    },
+    {
+      type: "dependency",
+      label: "",
+      prop: "",
+      name: ["animate.enable"],
+      children: (model: Record<string, any>) => {
+        return model["animate.enable"]
+          ? [
+              {
+                label: "动画类型",
+                prop: "animate.props.type",
+                type: "select",
+                fieldProps: {
+                  placeholder: "请选择",
+                  options: [
+                    { label: "淡入", value: "fade-in" },
+                    { label: "向右进入", value: "fade-right" },
+                    { label: "向左进入", value: "fade-left" },
+                    { label: "向上进入", value: "fade-top" },
+                    { label: "向下进入", value: "fade-bottom" },
+                  ],
+                },
+              },
+              {
+                label: "动画时长",
+                prop: "animate.props.duration",
+                type: "inputNumber",
+                fieldProps: {
+                  min: 0,
+                  addonAfter: "ms",
+                },
+                defaultValue: 1000,
+              },
+            ]
+          : [];
+      },
+    },
+  ];
+});
+const handleSetAnimate = (data: any) => {
+  console.log(data);
+};
 </script>
 
-<style scoped>
-
-</style>
+<style lang="less" scoped>
+p {
+  margin: 0;
+}
+</style>

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

@@ -63,7 +63,7 @@
         <Button
           type="default"
           size="small"
-          @click="handleEditData('dataProcess')"
+          @click="handleEditData('dataProcess', 'javascript')"
           >编辑</Button
         >
       </Form.Item>
@@ -89,7 +89,7 @@
       </Form.Item>
     </template>
   </Form>
-  <CodeEditorModal ref="codeEditorRef" title="编辑" @ok="handleCodeSave" language="json" />
+  <CodeEditorModal ref="codeEditorRef" title="编辑" @ok="handleCodeSave" />
 </template>
 
 <script setup lang="ts">
@@ -159,12 +159,13 @@ const handleRefreshTimeChange = (val: unknown) => {
 /* =====================编辑代码======================= */
 let pathKey: "data" | "params" | "headers" | "dataProcess";
 const codeEditorRef = ref<Ref<CodeEditorModalInstance> | null>(null);
-const handleEditData = (key: "data" | "params" | "headers" | "dataProcess") => {
+const handleEditData = (key: "data" | "params" | "headers" | "dataProcess", language = 'json') => {
   pathKey = key;
   codeEditorRef.value?.open(
     typeof formModel.value[key] === "string"
       ? formModel.value[key]
-      : JSON.stringify(formModel.value[key])
+      : JSON.stringify(formModel.value[key]),
+      language
   );
 };
 const handleCodeSave = (code: string) => {

packages/shalu-dashboard-ui/components/charts/config/index.ts

@@ -38,6 +38,7 @@ export const chartDefaultConfig: EChartsOption = {
       color: "#FFFFFFFF",
       fontSize: 16,
       fontWeight: "normal",
+      fontStyle: "normal"
     },
   },
   // 图例

packages/shalu-dashboard-ui/components/charts/hooks/useChartOptions.ts

@@ -92,7 +92,9 @@ export const useChartOptions = (chartProps: Record<string, any>) => {
           key: '',
           isOne: '',
         };
-        (window as Window & typeof globalThis & {mabp: any}).mabp.$doLoadComponentData(obj).then(function (res: any) {
+        (window as Window & typeof globalThis & {mabp: any}).mabp && 
+        (window as Window & typeof globalThis & {mabp: any}).mabp
+        .$doLoadComponentData(obj).then(function (res: any) {
           series.value = res.data;
         });
       }

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

@@ -1,7 +1,7 @@
 import CodeEditorModal from './src/index.vue';
 
 export type CodeEditorModalInstance = {
-  open: (code: string) => void;
+  open: (code: string, language: string) => void;
   close: () => void;
   getCode: () => string;
 };

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

@@ -44,6 +44,8 @@ const jsBeautifyOption = {
   indent_empty_lines: false,
 };
 
+export type Language = "javascript" | "json" | "html" | "typescript" | "sql";
+
 export default defineComponent({
   name: "DEditor",
   props: {
@@ -52,9 +54,7 @@ export default defineComponent({
       default: "",
     },
     language: {
-      type: String as PropType<
-        "javascript" | "json" | "html" | "typescript" | "sql"
-      >,
+      type: String as PropType<Language>,
       default: "javascript",
     },
   },
@@ -82,6 +82,7 @@ export default defineComponent({
           return new editorWorker();
         },
       };
+      console.log(props.language)
       editor = monaco.editor.create(editorRef.value, {
         value: modelValue.value,
         language: props.language,

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

@@ -1,11 +1,20 @@
 <template>
   <Modal
     v-model:open="show"
-    :title="title"
     :width="width"
+    :wrap-style="{ overflow: 'hidden' }"
     :destroyOnClose="true"
+    :maskClosable="false"
   >
-    <Editor v-model:code="code" v-bind="$attrs"/>
+    <template #title>
+      <div ref="modalTitleRef" style="width: 100%; cursor: move">{{ title }}</div>
+    </template>
+    <template #modalRender="{ originVNode }">
+      <div :style="transformStyle">
+        <component :is="originVNode" />
+      </div>
+    </template>
+    <Editor v-model:code="code" v-bind="$attrs" :language="language"/>
     <template #footer>
       <slot name="footer">
         <Button @click="close">取消</Button>
@@ -17,8 +26,9 @@
 
 <script lang="ts">
 import { Modal, Button } from "ant-design-vue";
-import { ref, defineComponent } from "vue";
-import Editor from "./Editor.vue";
+import { ref, defineComponent, watch, watchEffect, computed, CSSProperties } from "vue";
+import Editor, { Language } from "./Editor.vue";
+import { useDraggable } from '@vueuse/core';
 
 export default defineComponent({
   name: "DEditorModal",
@@ -41,16 +51,64 @@ export default defineComponent({
   setup(_, { emit }) {
     const show = ref(false);
     const code = ref("");
+    const language = ref<Language>();
+    const modalTitleRef = ref<HTMLElement>();
+
+    const { x, y, isDragging } = useDraggable(modalTitleRef);
+    const startX = ref<number>(0);
+    const startY = ref<number>(0);
+    const startedDrag = ref(false);
+    const transformX = ref(0);
+    const transformY = ref(0);
+    const preTransformX = ref(0);
+    const preTransformY = ref(0);
+    const dragRect = ref({ left: 0, right: 0, top: 0, bottom: 0 });
+    watch([x, y], () => {
+      if (!startedDrag.value) {
+        startX.value = x.value;
+        startY.value = y.value;
+        const bodyRect = document.body.getBoundingClientRect();
+        const titleRect = modalTitleRef.value?.getBoundingClientRect() || { width: 0, height: 0 };
+        dragRect.value.right = bodyRect.width - titleRect.width;
+        dragRect.value.bottom = bodyRect.height - titleRect.height;
+        preTransformX.value = transformX.value;
+        preTransformY.value = transformY.value;
+      }
+      startedDrag.value = true;
+    });
+    watch(isDragging, () => {
+      if (!isDragging) {
+        startedDrag.value = false;
+      }
+    });
 
+    watchEffect(() => {
+      if (startedDrag.value) {
+        transformX.value =
+          preTransformX.value +
+          Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) -
+          startX.value;
+        transformY.value =
+          preTransformY.value +
+          Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) -
+          startY.value;
+      }
+    });
+    const transformStyle = computed<CSSProperties>(() => {
+      return {
+        transform: `translate(${transformX.value}px, ${transformY.value}px)`,
+      };
+    });
     const handleOk = () => {
       // TODO: 检验code
       emit("ok", code.value);
       show.value = false;
     };
 
-    const open = (codeStr: string) => {
+    const open = (codeStr: string, lang: Language = 'javascript') => {
       show.value = true;
       code.value = codeStr;
+      language.value = lang;
     };
     const close = () => {
       show.value = false;
@@ -61,7 +119,10 @@ export default defineComponent({
       close,
       code,
       handleOk,
-      show
+      show,
+      language,
+      modalTitleRef,
+      transformStyle
     };
   },
 });

packages/shalu-dashboard-ui/components/cusForm/src/CusFormItem.vue

@@ -13,6 +13,9 @@
     <template v-else-if="item.type === 'select'">
       <Select v-model:value="model" v-bind="item?.fieldProps"></Select>
     </template>
+    <template v-else-if="item.type === 'switch'">
+      <Switch v-model:checked="model" v-bind="item?.fieldProps"></Switch>
+    </template>
     <template v-else-if="item.type === 'inputNumber'">
       <InputNumber
         v-model:value="model"
@@ -90,6 +93,7 @@ import {
   RadioGroup,
   Tooltip,
   RadioButton,
+  Switch,
 } from "ant-design-vue";
 import { InfoCircleOutlined } from "@ant-design/icons-vue";
 import { isEqual } from "lodash-es";

packages/shalu-dashboard-ui/components/cusForm/src/index.tsx

@@ -46,6 +46,9 @@ export default defineComponent({
           setFormModel(list);
         } else {
           if (item.type === "divider") return;
+          // 当表单数据有这个属性时则不再进行处理了，
+          // 有可能以及处理过了。
+          if (Object.hasOwn(formModel.value, item.prop)) return;
           // 获取初始值 先从formModel中取，没有则取默认值
           const value = get(props.formModel, item.prop);
           // 表单的值需要转换成把option值转换成表单值