@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/dist/src/visual/config-page/dashboard-theme-setting/Index.js

@@ -0,0 +1,545 @@
+import '../../../../style.css';
+import Background from "./Background.js";
+import Border from "./Border.js";
+import Font from "./Font.js";
+import Shadow from "./Shadow.js";
+import CssEditor from "../../../page-designer/setting-panel/css-editor/CssEditor.js";
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, withCtx, createVNode, createTextVNode, createCommentVNode, Fragment, renderList, normalizeClass } from "vue";
+/* empty css          */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-dashboard-designer-theme-setting",
+  components: {
+    ThemeSettingBackground: Background,
+    ThemeSettingBorder: Border,
+    ThemeSettingFont: Font,
+    ThemeSettingShadow: Shadow,
+    CssEditor
+  },
+  props: {
+    editTheme: Object,
+    value: Object
+  },
+  data() {
+    return {
+      settingTree: [],
+      fold: {},
+      hoverMode: {},
+      // 各分区是否处于"悬浮"编辑态，key 为分区 key
+      mobileEdit: false,
+      // 是否处于"移动端"编辑态：写入 themeConfig.mobile 覆盖层
+      predefineColors: ["#4078ff", "#00c78b", "#ff8c42", "#a855f7", "#ef4444", "#f59e0b", "#06b6d4", "#84cc16"],
+      themeConfig: {
+        page: {},
+        component: {},
+        num: {},
+        chart: {},
+        custom: {},
+        mobile: {}
+        // 移动端覆盖层（只存被覆盖的键，结构同顶层 page/component/num）
+      }
+    };
+  },
+  computed: {
+    // 移动端态只展示支持覆盖的样式分区（page/component/num）；chart 走 JS、custom 走基础层，暂不支持移动端覆盖
+    visibleSettingTree() {
+      return this.mobileEdit ? this.settingTree.filter((s) => s.mobileOverride) : this.settingTree;
+    }
+  },
+  watch: {
+    // 上报"移动端编辑态"，供设计器加 .is-mobile-preview 类预览移动端覆盖
+    mobileEdit(v) {
+      this.$emit("mobile-edit", v);
+    }
+  },
+  methods: {
+    getSetting() {
+      this.settingTree = [
+        {
+          key: "page",
+          label: "页面样式",
+          mobileOverride: true,
+          children: [
+            {
+              key: "background",
+              label: "背景",
+              type: "background"
+            },
+            {
+              key: "margin",
+              label: "间距",
+              type: "num"
+            }
+          ]
+        },
+        {
+          key: "component",
+          label: "图表组件样式",
+          hover: true,
+          // 支持"默认/悬浮"切换
+          mobileOverride: true,
+          children: [
+            {
+              key: "titleBackground",
+              label: "标题背景",
+              type: "background"
+            },
+            {
+              key: "titleIcon",
+              label: "标题图标",
+              type: "image"
+            },
+            {
+              key: "titleIconSize",
+              label: "图标大小",
+              type: "number"
+            },
+            {
+              key: "titleFontStyle",
+              label: "标题文字",
+              type: "font"
+            },
+            {
+              key: "background",
+              label: "组件背景",
+              type: "background",
+              hover: true
+              // 悬浮态可配
+            },
+            {
+              key: "fontStyle",
+              label: "组件文字",
+              type: "font",
+              hover: true
+            },
+            {
+              key: "border",
+              label: "组件边框",
+              type: "border",
+              hover: true
+            },
+            {
+              key: "shadow",
+              label: "组件阴影",
+              type: "shadow",
+              hover: true
+            }
+          ]
+        },
+        {
+          key: "num",
+          label: "数字统计样式",
+          hover: true,
+          mobileOverride: true,
+          children: [
+            {
+              key: "background",
+              label: "组件背景",
+              type: "background",
+              hover: true
+            },
+            {
+              key: "border",
+              label: "组件边框",
+              type: "border",
+              hover: true
+            },
+            {
+              key: "shadow",
+              label: "组件阴影",
+              type: "shadow",
+              hover: true
+            },
+            {
+              key: "fontStyle",
+              label: "数字文字",
+              type: "font",
+              hover: true
+            },
+            {
+              key: "titleFontStyle",
+              label: "标题文字",
+              type: "font"
+            }
+          ]
+        },
+        {
+          key: "chart",
+          label: "图表配色",
+          mobileOverride: true,
+          children: [
+            {
+              key: "colors",
+              label: "系列色板",
+              type: "colors"
+            },
+            {
+              key: "splitLineColor",
+              label: "分割线颜色",
+              type: "color"
+            },
+            {
+              key: "axisLineColor",
+              label: "轴线颜色",
+              type: "color"
+            }
+          ]
+        },
+        {
+          key: "custom",
+          label: "高级自定义",
+          children: [
+            {
+              key: "css",
+              label: "自定义 CSS（& 代表当前仪表盘作用域）",
+              type: "css"
+            }
+          ]
+        }
+      ];
+    },
+    // 读分区容器：移动端态走 themeConfig.mobile 子树，否则顶层。不创建，缺失返回 {}
+    readSection(itemKey) {
+      const root = this.mobileEdit ? this.themeConfig.mobile || {} : this.themeConfig;
+      return root[itemKey] || {};
+    },
+    // 写分区容器：移动端态写入 themeConfig.mobile 子树
+    writeSection(itemKey, updated) {
+      if (this.mobileEdit) {
+        if (!this.themeConfig.mobile) this.themeConfig.mobile = {};
+        this.themeConfig.mobile[itemKey] = updated;
+      } else {
+        this.themeConfig[itemKey] = updated;
+      }
+      this.$emit("change", this.themeConfig);
+    },
+    changeConfig(item, config, value) {
+      this.writeSection(item.key, { ...this.readSection(item.key), [config.key]: value });
+    },
+    // 悬浮态：把编辑结果写进分区的 hoverStyle 子对象（与默认态键名对称，引擎渲染时拍平为 :hover 规则）
+    changeHoverConfig(item, config, value) {
+      const section = this.readSection(item.key);
+      const hoverStyle = { ...section.hoverStyle || {}, [config.key]: value };
+      this.writeSection(item.key, { ...section, hoverStyle });
+    },
+    // 编辑器取值：悬浮态读 hoverStyle 子对象，默认态读分区本身（移动端态读 mobile 子树）
+    cfgValue(item, config) {
+      const section = this.readSection(item.key);
+      if (this.hoverMode[item.key]) {
+        return (section.hoverStyle || {})[config.key];
+      }
+      return section[config.key];
+    },
+    onChange(item, config, value) {
+      if (this.hoverMode[item.key]) {
+        this.changeHoverConfig(item, config, value);
+      } else {
+        this.changeConfig(item, config, value);
+      }
+    },
+    // 色板：兼容旧的逗号分隔字符串，统一取成数组
+    getColors(item, config) {
+      const v = this.readSection(item.key)[config.key];
+      if (Array.isArray(v)) return v;
+      if (typeof v === "string" && v.trim()) return v.split(/[,，\s]+/).filter(Boolean);
+      return [];
+    },
+    addColor(item, config) {
+      this.changeConfig(item, config, [...this.getColors(item, config), "#4078ff"]);
+    },
+    setColor(item, config, index, value) {
+      const list = [...this.getColors(item, config)];
+      if (value) {
+        list.splice(index, 1, value);
+      } else {
+        list.splice(index, 1);
+      }
+      this.changeConfig(item, config, list);
+    },
+    removeColor(item, config, index) {
+      const list = [...this.getColors(item, config)];
+      list.splice(index, 1);
+      this.changeConfig(item, config, list);
+    }
+  },
+  created() {
+    this.getSetting();
+    if (this.editTheme) {
+      const themeConfig = JSON.parse(this.editTheme.CONTENT);
+      if (themeConfig) this.themeConfig = { ...this.themeConfig, ...themeConfig };
+    } else if (this.value) {
+      this.themeConfig = { ...this.themeConfig, ...this.value };
+    }
+  },
+  beforeUnmount() {
+    this.$emit("mobile-edit", false);
+  }
+};
+const _hoisted_1 = { class: "theme-setting" };
+const _hoisted_2 = { class: "theme-setting__header" };
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = { class: "theme-setting__content" };
+const _hoisted_5 = { class: "theme-setting__device-switch" };
+const _hoisted_6 = {
+  key: 0,
+  class: "theme-setting__device-tip"
+};
+const _hoisted_7 = { class: "theme-setting__tree" };
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = { class: "theme-setting__tree-content" };
+const _hoisted_10 = {
+  key: 0,
+  class: "theme-setting__mode-switch"
+};
+const _hoisted_11 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_12 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_13 = { class: "theme-setting__palette-list" };
+const _hoisted_14 = ["onClick"];
+const _hoisted_15 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_16 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_17 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_18 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_button = resolveComponent("el-button");
+  const _component_el_radio_button = resolveComponent("el-radio-button");
+  const _component_el_radio_group = resolveComponent("el-radio-group");
+  const _component_theme_setting_background = resolveComponent("theme-setting-background");
+  const _component_theme_setting_border = resolveComponent("theme-setting-border");
+  const _component_theme_setting_font = resolveComponent("theme-setting-font");
+  const _component_theme_setting_shadow = resolveComponent("theme-setting-shadow");
+  const _component_el_color_picker = resolveComponent("el-color-picker");
+  const _component_el_input_number = resolveComponent("el-input-number");
+  const _component_el_input = resolveComponent("el-input");
+  const _component_css_editor = resolveComponent("css-editor");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      $props.editTheme ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString($props.editTheme.NAME), 1)) : (openBlock(), createBlock(_component_el_button, {
+        key: 1,
+        type: "primary",
+        link: "",
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("save"))
+      }, {
+        default: withCtx(() => [..._cache[2] || (_cache[2] = [
+          createElementVNode("i", { class: "epx-icon-save" }, null, -1),
+          createElementVNode("span", null, "保存为预设", -1)
+        ])]),
+        _: 1
+      }))
+    ]),
+    createElementVNode("div", _hoisted_4, [
+      createElementVNode("div", _hoisted_5, [
+        createVNode(_component_el_radio_group, {
+          "model-value": $data.mobileEdit ? "mobile" : "pc",
+          size: "small",
+          onChange: _cache[1] || (_cache[1] = (v) => $data.mobileEdit = v === "mobile")
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_el_radio_button, {
+              label: "pc",
+              value: "pc"
+            }, {
+              default: withCtx(() => [..._cache[3] || (_cache[3] = [
+                createTextVNode("PC 端", -1)
+              ])]),
+              _: 1
+            }),
+            createVNode(_component_el_radio_button, {
+              label: "mobile",
+              value: "mobile"
+            }, {
+              default: withCtx(() => [..._cache[4] || (_cache[4] = [
+                createTextVNode("移动端", -1)
+              ])]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["model-value"]),
+        $data.mobileEdit ? (openBlock(), createElementBlock("span", _hoisted_6, "仅覆盖移动端(≤992px)，未设项继承 PC")) : createCommentVNode("", true)
+      ]),
+      createElementVNode("ul", _hoisted_7, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList($options.visibleSettingTree, (item) => {
+          return openBlock(), createElementBlock("li", {
+            class: normalizeClass(["theme-setting__tree-item", { "is-fold": $data.fold[item.key] }]),
+            key: item.key
+          }, [
+            createElementVNode("div", {
+              class: "theme-setting__tree-header",
+              onClick: ($event) => $data.fold[item.key] = !$data.fold[item.key]
+            }, [
+              createElementVNode("span", null, toDisplayString(item.label), 1),
+              _cache[5] || (_cache[5] = createElementVNode("i", { class: "el-icon-arrow-down" }, null, -1))
+            ], 8, _hoisted_8),
+            createElementVNode("div", _hoisted_9, [
+              item.hover ? (openBlock(), createElementBlock("div", _hoisted_10, [
+                createVNode(_component_el_radio_group, {
+                  "model-value": $data.hoverMode[item.key] ? "hover" : "default",
+                  size: "small",
+                  onChange: (v) => $data.hoverMode[item.key] = v === "hover"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_radio_button, {
+                      label: "default",
+                      value: "default"
+                    }, {
+                      default: withCtx(() => [..._cache[6] || (_cache[6] = [
+                        createTextVNode("默认", -1)
+                      ])]),
+                      _: 1
+                    }),
+                    createVNode(_component_el_radio_button, {
+                      label: "hover",
+                      value: "hover"
+                    }, {
+                      default: withCtx(() => [..._cache[7] || (_cache[7] = [
+                        createTextVNode("悬浮", -1)
+                      ])]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["model-value", "onChange"])
+              ])) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(item.children, (config) => {
+                return openBlock(), createElementBlock(Fragment, {
+                  key: item.key + "-" + config.key
+                }, [
+                  !$data.hoverMode[item.key] || config.hover ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                    config.type === "background" ? (openBlock(), createBlock(_component_theme_setting_background, {
+                      key: item.key + "-" + config.key + "-" + ($data.mobileEdit ? "m" : "p") + "-" + ($data.hoverMode[item.key] ? "h" : "d"),
+                      label: config.label,
+                      value: $options.cfgValue(item, config),
+                      onChange: (v) => $options.onChange(item, config, v)
+                    }, null, 8, ["label", "value", "onChange"])) : config.type === "border" ? (openBlock(), createBlock(_component_theme_setting_border, {
+                      key: item.key + "-" + config.key + "-" + ($data.mobileEdit ? "m" : "p") + "-" + ($data.hoverMode[item.key] ? "h" : "d"),
+                      label: config.label,
+                      value: $options.cfgValue(item, config),
+                      onChange: (v) => $options.onChange(item, config, v)
+                    }, null, 8, ["label", "value", "onChange"])) : config.type === "font" ? (openBlock(), createBlock(_component_theme_setting_font, {
+                      key: item.key + "-" + config.key + "-" + ($data.mobileEdit ? "m" : "p") + "-" + ($data.hoverMode[item.key] ? "h" : "d"),
+                      label: config.label,
+                      value: $options.cfgValue(item, config),
+                      onChange: (v) => $options.onChange(item, config, v)
+                    }, null, 8, ["label", "value", "onChange"])) : config.type === "shadow" ? (openBlock(), createBlock(_component_theme_setting_shadow, {
+                      key: item.key + "-" + config.key + "-" + ($data.mobileEdit ? "m" : "p") + "-" + ($data.hoverMode[item.key] ? "h" : "d"),
+                      label: config.label,
+                      value: $options.cfgValue(item, config),
+                      onChange: (v) => $options.onChange(item, config, v)
+                    }, null, 8, ["label", "value", "onChange"])) : config.type === "color" ? (openBlock(), createElementBlock("div", {
+                      key: item.key + "-" + config.key + "-" + ($data.mobileEdit ? "m" : "p"),
+                      class: "epx-page-designer-setting-style__item--alone"
+                    }, [
+                      createElementVNode("label", _hoisted_11, toDisplayString(config.label), 1),
+                      createVNode(_component_el_color_picker, {
+                        "model-value": $options.cfgValue(item, config),
+                        "show-alpha": "",
+                        predefine: $data.predefineColors,
+                        onChange: (v) => $options.changeConfig(item, config, v)
+                      }, null, 8, ["model-value", "predefine", "onChange"])
+                    ])) : config.type === "colors" ? (openBlock(), createElementBlock("div", {
+                      key: item.key + "-" + config.key + "-" + ($data.mobileEdit ? "m" : "p"),
+                      class: "theme-setting__palette"
+                    }, [
+                      createElementVNode("label", _hoisted_12, toDisplayString(config.label), 1),
+                      createElementVNode("div", _hoisted_13, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList($options.getColors(item, config), (color, index) => {
+                          return openBlock(), createElementBlock("div", {
+                            class: "theme-setting__palette-item",
+                            key: index
+                          }, [
+                            createVNode(_component_el_color_picker, {
+                              "model-value": color,
+                              "show-alpha": "",
+                              predefine: $data.predefineColors,
+                              onChange: (v) => $options.setColor(item, config, index, v)
+                            }, null, 8, ["model-value", "predefine", "onChange"]),
+                            createElementVNode("i", {
+                              class: "el-icon-close theme-setting__palette-remove",
+                              onClick: ($event) => $options.removeColor(item, config, index)
+                            }, null, 8, _hoisted_14)
+                          ]);
+                        }), 128)),
+                        createVNode(_component_el_button, {
+                          class: "theme-setting__palette-add",
+                          icon: "el-icon-plus",
+                          onClick: ($event) => $options.addColor(item, config)
+                        }, null, 8, ["onClick"])
+                      ])
+                    ])) : config.type === "number" ? (openBlock(), createElementBlock("div", {
+                      key: item.key + "-" + config.key + "-" + ($data.mobileEdit ? "m" : "p"),
+                      class: "epx-page-designer-setting-style__item--alone"
+                    }, [
+                      createElementVNode("label", _hoisted_15, toDisplayString(config.label), 1),
+                      createVNode(_component_el_input_number, {
+                        "model-value": $options.cfgValue(item, config),
+                        "controls-position": "right",
+                        min: 0,
+                        size: "default",
+                        onChange: (v) => $options.changeConfig(item, config, v)
+                      }, null, 8, ["model-value", "onChange"])
+                    ])) : config.type === "text" ? (openBlock(), createElementBlock("div", {
+                      key: item.key + "-" + config.key + "-" + ($data.mobileEdit ? "m" : "p"),
+                      class: "epx-page-designer-setting-style__item--alone"
+                    }, [
+                      createElementVNode("label", _hoisted_16, toDisplayString(config.label), 1),
+                      createVNode(_component_el_input, {
+                        "model-value": $options.cfgValue(item, config),
+                        size: "default",
+                        placeholder: config.placeholder,
+                        clearable: "",
+                        onInput: (v) => $options.changeConfig(item, config, v)
+                      }, null, 8, ["model-value", "placeholder", "onInput"])
+                    ])) : config.type === "textarea" ? (openBlock(), createElementBlock("div", {
+                      key: item.key + "-" + config.key + "-" + ($data.mobileEdit ? "m" : "p"),
+                      class: "epx-page-designer-setting-style__item--alone"
+                    }, [
+                      createElementVNode("label", _hoisted_17, toDisplayString(config.label), 1),
+                      createVNode(_component_el_input, {
+                        type: "textarea",
+                        rows: 8,
+                        "model-value": $options.cfgValue(item, config),
+                        placeholder: config.placeholder,
+                        onInput: (v) => $options.changeConfig(item, config, v)
+                      }, null, 8, ["model-value", "placeholder", "onInput"])
+                    ])) : config.type === "css" ? (openBlock(), createElementBlock("div", {
+                      key: item.key + "-" + config.key + "-" + ($data.mobileEdit ? "m" : "p"),
+                      class: "theme-setting__css"
+                    }, [
+                      createElementVNode("label", _hoisted_18, toDisplayString(config.label), 1),
+                      createVNode(_component_css_editor, {
+                        value: $options.cfgValue(item, config),
+                        onChange: (v) => $options.changeConfig(item, config, v)
+                      }, null, 8, ["value", "onChange"])
+                    ])) : createCommentVNode("", true)
+                  ], 64)) : createCommentVNode("", true)
+                ], 64);
+              }), 128))
+            ])
+          ], 2);
+        }), 128))
+      ])
+    ])
+  ]);
+}
+const DashboardThemeSetting = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-949a9b09"]]);
+export {
+  DashboardThemeSetting as default
+};