feat: 完善图表属性绑定，新增边框设置组件

components/charts/Bar/BasicBar/index.ts

@@ -3,7 +3,7 @@ import Config from './src/Config.vue';
 
 BasicBar.Config = Config;
 BasicBar.install = (app: any) => {
-  app.component('FmDashboardBasicBar', BasicBar);
+  app.component('FmBasicBar', BasicBar);
   return app;
 };
 

components/charts/Line/BasicLine/index.ts

@@ -3,7 +3,7 @@ import Config from './src/Config.vue';
 
 BasicLine.Config = Config;
 BasicLine.install = (app: any) => {
-  app.component('FmDashboardBasicLine', BasicLine);
+  app.component('FmBasicLine', BasicLine);
   return app;
 };
 export default BasicLine;

components/charts/Pie/BasicPie/index.ts

@@ -3,7 +3,7 @@ import Config from './src/Config.vue';
 
 BasicPie.Config = Config;
 BasicPie.install = (app: any) => {
-  app.component('FmDashboardBasicPie', BasicPie);
+  app.component('FmBasicPie', BasicPie);
   return app;
 };
 

components/charts/Pie/BasicPie/src/Config.vue

@@ -39,7 +39,7 @@ import DataConfig from "../../../DataConfig.vue";
 import { CusForm, IFormItem } from "../../../../cusForm";
 import { basicPieProps } from "./props";
 import { chartFormItemsMap } from "../../../config/chartFormItemsMap";
-import { set, cloneDeep, get } from "lodash-es";
+import { set, cloneDeep } from "lodash-es";
 
 const props = defineProps(basicPieProps);
 const activeTab = ref("1");

components/charts/config/chartFormItemsMap.ts

@@ -1010,7 +1010,7 @@ export const chartFormItemsMap: Record<string, IFormItem> = {
                     } 
                     : {
                       type: "color",
-                      color: value.color,
+                      color: value,
                     };
                   },
                 },

components/charts/config/index.ts

@@ -140,13 +140,13 @@ export const chartDefaultConfig: EChartsOption = {
   tooltip: {
     show: true,
     trigger: "axis",
-    formatter: "{b}",
+    formatter: "{b} {c}",
     // valueFormatter: "(value, dataIndex) => value",
     axisPointer: {
       type: "line",
     },
     textStyle: {
-      color: "#FFFFFF",
+      color: "#000000FF",
       fontSize: 12,
       fontWeight: "normal",
       fontStyle: "normal",
@@ -155,7 +155,7 @@ export const chartDefaultConfig: EChartsOption = {
     borderWidth: 1,
     borderColor: "#ccc",
     borderRadius: 4,
-    backgroundColor: "#fff",
+    backgroundColor: "#FFFFFFFF",
     extraCssText: "",
   }
 }

components/cusForm/src/BorderRadius.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <RadioGroup v-model:value="radius.type">
+      <RadioButton value="all">整体</RadioButton>
+      <RadioButton value="custom">单个</RadioButton>
+    </RadioGroup>
+
+    <div class="all" v-if="radius.type === 'all'">
+      <InputNumber v-model:value="radius.value" />
+      <Select v-model:value="radius.unit" :options="unitOptions" />
+    </div>
+
+    <div class="custom" v-else>
+      <InputNumber v-model:value="radius.topLeft" >
+        <template #addonBefore><RadiusUpleftOutlined/></template>
+      </InputNumber>
+      <InputNumber v-model:value="radius.topRight" >
+        <template #addonBefore><RadiusUprightOutlined/></template>
+      </InputNumber>
+      <InputNumber v-model:value="radius.bottomLeft" >
+        <template #addonBefore><RadiusBottomleftOutlined/></template>
+      </InputNumber>
+      <InputNumber v-model:value="radius.bottomRight" >
+        <template #addonBefore><RadiusBottomrightOutlined/></template>
+      </InputNumber>
+      <Select v-model:value="radius.unit" :options="unitOptions" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, reactive, watch } from "vue";
+import { RadioGroup, RadioButton, InputNumber, Select } from "ant-design-vue";
+import {
+  RadiusUpleftOutlined,
+  RadiusUprightOutlined,
+  RadiusBottomleftOutlined,
+  RadiusBottomrightOutlined,
+} from "@ant-design/icons-vue";
+
+type BorderRadius = {
+  type: "all" | "custom";
+  value:
+    | number
+    | {
+        topLeft: number;
+        topRight: number;
+        bottomLeft: number;
+        bottomRight: number;
+      };
+  unit: "px" | "%";
+};
+export default defineComponent({
+  name: "FmBorderRadius",
+  components: {
+    RadioGroup,
+    RadioButton,
+    InputNumber,
+    Select,
+    RadiusUpleftOutlined,
+    RadiusUprightOutlined,
+    RadiusBottomleftOutlined,
+    RadiusBottomrightOutlined,
+  },
+  props: {
+    value: {
+      type: Object as PropType<BorderRadius>,
+      default: () => ({}),
+    },
+  },
+  emits: ["update:value"],
+  setup(props, { emit }) {
+
+    const radius = reactive({
+      type: props.value.type || "all",
+      value: props.value.type === "all" ? props.value.value : 0,
+      unit: props.value.unit || "px",
+      topLeft:
+        typeof props.value.value === "object" ? props.value.value?.topLeft : 0,
+      topRight:
+        typeof props.value.value === "object" ? props.value.value?.topRight : 0,
+      bottomLeft:
+        typeof props.value.value === "object"
+          ? props.value.value?.bottomLeft
+          : 0,
+      bottomRight:
+        typeof props.value.value === "object"
+          ? props.value.value?.bottomRight
+          : 0,
+    });
+
+    watch(
+      () => radius,
+      (value) => {
+        emit("update:value", {
+          type: value.type,
+          value:
+            value.type === "all"
+              ? value.value
+              : {
+                  topLeft: value.topLeft,
+                  topRight: value.topRight,
+                  bottomLeft: value.bottomLeft,
+                  bottomRight: value.bottomRight,
+                },
+          unit: value.unit,
+        });
+      },
+      {
+        deep: true
+      }
+    )
+
+    return {
+      radius,
+      unitOptions: [
+        { label: "px", value: "px" },
+        { label: "%", value: "%" },
+      ],
+    };
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.all, .custom {
+  margin-top: 10px;
+}
+.all {
+  display: flex;
+  gap: 10px;
+  .ant-input-number {
+    width: 256px;
+  }
+}
+.custom {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>

components/cusForm/src/CusFormItem.vue

@@ -61,6 +61,11 @@
         <CusSlider v-model:value="model" v-bind="item?.fieldProps" />
       </FormItemRest>
     </template>
+    <template v-else-if="item.type === 'boderRadiusSelect'">
+      <FormItemRest>
+        <BorderRadius v-model:value="model" v-bind="item?.fieldProps" />
+      </FormItemRest>
+    </template>
     <!-- 提示 -->
     <template v-if="item.tip">
       <Tooltip :title="item.tip">
@@ -87,6 +92,7 @@ import {
   RadioButton,
 } from "ant-design-vue";
 import { InfoCircleOutlined } from "@ant-design/icons-vue";
+import { isEqual } from "lodash-es";
 
 import BackgroundSelect from "./BackgroundSelect.vue";
 import ColorSelect from "./ColorSelect.vue";
@@ -94,6 +100,7 @@ import ColorScheme from "./ColorScheme.vue";
 import Position from "./Position.vue";
 import FontStyle from "./FontStyle.vue";
 import CusSlider from "./CusSlider.vue";
+import BorderRadius from "./BorderRadius.vue";
 
 const props = defineProps<{ item: IFormItem; modelValue: any }>();
 const emit = defineEmits(["update:modelValue"]);
@@ -107,6 +114,15 @@ watch(
   },
   { deep: true }
 );
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if(!isEqual(val, model.value)) {
+      model.value = val;
+    }
+  }
+)
 </script>
 
 <style lang="less" scoped>

lib/demo.html

@@ -1,87 +1 @@
-<!DOCTYPE html><meta charset="utf-8" /><title>shaluDashBoardUi demo</title>
-<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
-<script src="./shaluDashBoardUi.umd.js"></script>
-<link rel="stylesheet" href="./shaluDashBoardUi.css" />
-<body>
-  <div id="app">
-    <fm-dashboard-basic-bar
-      :width="400"
-      :height="300"
-      :dataSource="dataSource"
-      v-bind="other"
-    />
-  </div>
-  <script>
-    Vue.createApp({
-      data() {
-        return {
-          message: "hello",
-          dataSource: {
-            sourceType: 0,
-            data: {
-              xData: ["轴标签A", "轴标签B", "轴标签C", "轴标签D"],
-              series: [
-                {
-                  type: "bar",
-                  name: "系列1",
-                  data: [89.3, 92.1, 94.4, 85.4],
-                },
-                {
-                  type: "bar",
-                  name: "系列2",
-                  data: [95.8, 89.4, 91.2, 76.9],
-                },
-              ],
-            },
-          },
-          other: {
-            title: {
-              left: "center",
-              top: 8,
-              textStyle: {
-                color: "#fff",
-                fontSize: 16,
-              },
-            },
-            // 图例
-            legend: {
-              textStyle: {
-                color: "#fff",
-              },
-              top: 32,
-            },
-            // 布局
-            grid: {
-              bottom: 34,
-              right: 20,
-              top: 60,
-            },
-            // 提示框
-            tooltip: {},
-            // x轴
-            xAxis: {
-              type: "category",
-              axisLabel: {
-                color: "#9fadbf",
-              },
-            },
-            // y轴
-            yAxis: {
-              axisLabel: {
-                color: "#9fadbf",
-              },
-              splitLine: {
-                lineStyle: {
-                  type: "dashed",
-                  color: "#36485f",
-                },
-              },
-            },
-          },
-        };
-      },
-    })
-      .use(shaluDashBoardUi)
-      .mount("#app");
-  </script>
-</body>
+<!doctype html><meta charset="utf-8"><title>shaluDashBoardUi demo</title><script src="./shaluDashBoardUi.umd.js"></script><link rel="stylesheet" href="./shaluDashBoardUi.css"><script>console.log(shaluDashBoardUi)</script>

package.json

@@ -7,7 +7,7 @@
   "typings": "./typings/global.d.ts",
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build --target lib --name shaluDashBoardUi --dest lib index.js --inline-vue",
+    "build": "vue-cli-service build --target lib --name shaluDashBoardUi --dest lib index.js",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint"
   },
@@ -24,6 +24,7 @@
     "@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",
     "@typescript-eslint/parser": "^5.4.0",
     "@vue/babel-plugin-jsx": "^1.2.2",

pnpm-lock.yaml

@@ -37,6 +37,9 @@ devDependencies:
   '@types/jest':
     specifier: ^27.0.1
     version: 27.5.2
+  '@types/node':
+    specifier: ^20.14.9
+    version: 20.14.9
   '@typescript-eslint/eslint-plugin':
     specifier: ^5.4.0
     version: 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@7.32.0)(typescript@4.5.5)

public/demo.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <script src="./shaluDashBoardUi.umd.js"></script>
+  <link rel="stylesheet" href="./shaluDashBoardUi.css" />
+</head>
+<body>
+  <div id="app">
+    <fm-dashboard-basic-bar :width="400" :height="260" v-bind="barData"></fm-dashboard-basic-bar>
+  </div>
+
+  <script>
+    const { createApp } = Vue;
+    const ShaluDashBoardUi = window.shaluDashBoardUi;
+    
+    const app = createApp({
+      data() {
+        return {
+          barData: ShaluDashBoardUi.BasicBarDefaultProps.props
+        }
+      }
+    });
+    app.use(ShaluDashBoardUi);
+    app.mount('#app');
+  </script>
+</body>
+</html>

src/App.vue

@@ -1,15 +1,18 @@
 <template>
-  <FmDashboardBasicBar :width="400" :height="300" :dataSource="dataSource" />
-  <FmDashboardBasicLine :width="400" :height="300" :dataSource="lineDataSource" />
+  <!-- <FmDashboardBasicBar :width="400" :height="300" v-bind="shaluDashBoardUi.BasicBarDefaultProps.props"/>
+  <FmDashboardBasicLine :width="400" :height="300" v-bind="shaluDashBoardUi.BasicLineDefaultProps.props"/> -->
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from "vue";
+import { defineComponent } from "vue";
+
+// const shaluDashBoardUi = await import('../lib/shaluDashBoardUi.umd');
 
 export default defineComponent({
   name: "App",
   setup: () => {
     return {
+      // shaluDashBoardUi,
       dataSource: {
         sourceType: 0,
         data: {

src/main.js

@@ -0,0 +1,8 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+// import '../lib/shaluDashBoardUi.css'
+// import * as shaluDashBoardUi from '../lib/shaluDashBoardUi.common';
+const app = createApp(App);
+// app.use(shaluDashBoardUi as any)
+app.mount("#app");
+//# sourceMappingURL=main.js.map

src/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,uCAAuC;AACvC,sEAAsE;AAEtE,MAAM,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC,CAAA;AAC1B,mCAAmC;AACnC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC"}

src/main.ts

@@ -1,5 +1,8 @@
 import { createApp } from "vue";
 import App from "./App.vue";
+// import '../lib/shaluDashBoardUi.css'
+// import * as shaluDashBoardUi from '../lib/shaluDashBoardUi.common';
 
 const app = createApp(App)
+// app.use(shaluDashBoardUi as any)
 app.mount("#app");

tests/unit/example.spec.js

@@ -0,0 +1,12 @@
+import { shallowMount } from "@vue/test-utils";
+import HelloWorld from "@/components/HelloWorld.vue";
+describe("HelloWorld.vue", () => {
+    it("renders props.msg when passed", () => {
+        const msg = "new message";
+        const wrapper = shallowMount(HelloWorld, {
+            props: { msg },
+        });
+        expect(wrapper.text()).toMatch(msg);
+    });
+});
+//# sourceMappingURL=example.spec.js.map

tests/unit/example.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"example.spec.js","sourceRoot":"","sources":["example.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,UAAU,MAAM,6BAA6B,CAAC;AAErD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,+BAA+B,EAAE,GAAG,EAAE;QACvC,MAAM,GAAG,GAAG,aAAa,CAAC;QAC1B,MAAM,OAAO,GAAG,YAAY,CAAC,UAAU,EAAE;YACvC,KAAK,EAAE,EAAE,GAAG,EAAE;SACf,CAAC,CAAC;QACH,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

tsconfig.json

@@ -11,11 +11,12 @@
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "useDefineForClassFields": true,
+    "declaration": true,
+    "declarationDir": "./types",
     "sourceMap": true,
     "allowJs": true,
     "baseUrl": ".",
     "types": [
-      "webpack-env",
       "jest",
       "vue"
     ],

types/index.d.ts

@@ -1,8 +0,0 @@
-declare type Recordable<T = any> = Record<string, T>;
-
-declare module '*.umd.js' {
-  const value: any;
-  export default value;
-}
-
-declare module 'lodash';

types/src/main.d.ts

@@ -0,0 +1 @@
+export {};

types/tests/unit/example.spec.d.ts

@@ -0,0 +1 @@
+export {};

vue.config.js

@@ -1,5 +1,14 @@
 const { defineConfig } = require("@vue/cli-service");
 module.exports = defineConfig({
   transpileDependencies: true,
-  // lintOnSave: false
+  // lintOnSave: false,
+  chainWebpack: (config) => {
+    config.plugin('define').tap((definitions) => {
+      Object.assign(definitions[0]['process.env'], {
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
+      });
+
+      return definitions
+    })
+  },
 });