feat: 增加浮动按钮组件

internal/eslint-config/package.json

@@ -31,8 +31,8 @@
   "devDependencies": {
     "@eslint/js": "^9.30.1",
     "@types/eslint": "^9.6.1",
-    "@typescript-eslint/eslint-plugin": "^8.35.1",
-    "@typescript-eslint/parser": "^8.35.1",
+    "@typescript-eslint/eslint-plugin": "^8.36.0",
+    "@typescript-eslint/parser": "^8.36.0",
     "eslint": "^9.30.1",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-eslint-comments": "^3.2.0",
@@ -43,7 +43,7 @@
     "eslint-plugin-regexp": "^2.9.0",
     "eslint-plugin-unicorn": "^56.0.1",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "eslint-plugin-vue": "^10.2.0",
+    "eslint-plugin-vue": "^10.3.0",
     "globals": "^15.15.0",
     "jsonc-eslint-parser": "^2.4.0",
     "vue-eslint-parser": "^10.2.0"

internal/prettier-config/package.json

@@ -23,6 +23,6 @@
     "prettier": "^3.6.2"
   },
   "devDependencies": {
-    "prettier-plugin-packagejson": "^2.5.17"
+    "prettier-plugin-packagejson": "^2.5.18"
   }
 }

internal/stylelint-config/package.json

@@ -30,7 +30,7 @@
     "postcss-html": "^1.8.0",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.6.2",
-    "stylelint": "^16.21.0",
+    "stylelint": "^16.21.1",
     "stylelint-config-recommended": "^14.0.1",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-config-recommended-vue": "^1.6.1",

internal/ts-config/package.json

@@ -18,9 +18,9 @@
     "web.json"
   ],
   "dependencies": {
-    "@types/node": "^22.16.0"
+    "@types/node": "^22.16.2"
   },
   "devDependencies": {
-    "vite": "^6.3.5"
+    "vite": "^7.0.3"
   }
 }

internal/vite-config/package.json

@@ -41,8 +41,8 @@
     "postcss": "^8.5.6",
     "rollup-plugin-visualizer": "^5.14.0",
     "unbuild": "^3.5.0",
-    "unocss": "^66.3.2",
-    "vite": "^6.3.5",
+    "unocss": "^66.3.3",
+    "vite": "^7.0.3",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-html": "^3.2.2",

package.json

@@ -32,8 +32,8 @@
     "@iconify/vue": "^4.3.0",
     "@jiaminghi/color": "^1.1.3",
     "@vue/shared": "^3.5.17",
-    "@vueuse/core": "^13.4.0",
-    "@vueuse/shared": "^13.4.0",
+    "@vueuse/core": "^13.5.0",
+    "@vueuse/shared": "^13.5.0",
     "@zxcvbn-ts/core": "^3.0.4",
     "animate.css": "^4.1.1",
     "ant-design-vue": "^4.2.6",
@@ -56,15 +56,15 @@
     "sm-crypto": "^0.3.13",
     "sortablejs": "^1.15.6",
     "uuid": "^11.1.0",
-    "vue-data-ui": "^2.12.7",
-    "vue-i18n": "^11.1.7",
+    "vue-data-ui": "^2.15.0",
+    "vue-i18n": "^11.1.9",
     "vue-json-pretty": "^2.5.0",
     "vue-router": "^4.5.1",
     "vue-types": "^6.0.0",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.354",
+    "@iconify/json": "^2.2.356",
     "@logicflow/core": "^1.2.28",
     "@logicflow/extension": "^1.2.28",
     "@mfish/core": "workspace:*",
@@ -85,14 +85,14 @@
     "@types/intro.js": "^5.1.5",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.16.0",
+    "@types/node": "^22.16.2",
     "@types/nprogress": "^0.2.3",
     "@types/qrcode": "^1.5.5",
     "@types/qs": "^6.14.0",
     "@types/sm-crypto": "^0.3.4",
     "@types/sortablejs": "^1.15.8",
-    "@typescript-eslint/eslint-plugin": "^8.35.1",
-    "@typescript-eslint/parser": "^8.35.1",
+    "@typescript-eslint/eslint-plugin": "^8.36.0",
+    "@typescript-eslint/parser": "^8.36.0",
     "@vitejs/plugin-legacy": "^6.1.1",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vitejs/plugin-vue-jsx": "^4.2.0",
@@ -105,7 +105,7 @@
     "eslint": "^9.30.1",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-prettier": "^5.5.1",
-    "eslint-plugin-vue": "^10.2.0",
+    "eslint-plugin-vue": "^10.3.0",
     "esno": "^4.8.0",
     "fs-extra": "^11.3.0",
     "inquirer": "^12.7.0",
@@ -116,19 +116,19 @@
     "picocolors": "^1.1.1",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
-    "prettier-plugin-packagejson": "^2.5.17",
+    "prettier-plugin-packagejson": "^2.5.18",
     "rimraf": "^6.0.1",
-    "rollup": "^4.44.1",
+    "rollup": "^4.44.2",
     "rollup-plugin-visualizer": "^5.14.0",
-    "stylelint": "^16.21.0",
+    "stylelint": "^16.21.1",
     "stylelint-config-standard": "^37.0.0",
     "stylelint-order": "^6.0.4",
     "terser": "^5.43.1",
     "turbo": "^2.5.4",
     "typescript": "^5.8.3",
     "unbuild": "^3.5.0",
-    "unocss": "^66.3.2",
-    "vite": "^6.3.5",
+    "unocss": "^66.3.3",
+    "vite": "^7.0.3",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-imagemin": "^0.6.1",
     "vite-plugin-mkcert": "^1.17.8",
@@ -163,7 +163,7 @@
     "node": ">=20",
     "pnpm": ">=9"
   },
-  "packageManager": "pnpm@10.12.4",
+  "packageManager": "pnpm@10.13.0",
   "pnpm": {
     "peerDependencyRules": {
       "allowedVersions": {
@@ -176,8 +176,9 @@
       "vite": "$vite",
       "rollup": "$rollup"
     },
-    "onlyBuiltDependencies": [
-      "core-js"
+    "ignoredBuiltDependencies": [
+      "core-js",
+      "esbuild"
     ]
   }
 }

packages/core/src/utils/Color.ts

@@ -36,7 +36,7 @@ export function hexToRGB(hex: string) {
     if (sHex.length === 4) {
       let sColorNew = "#";
       for (let i = 1; i < 4; i += 1) {
-        sColorNew += sHex.slice(i, i + 1).concat(sHex.slice(i, i + 1));
+        sColorNew += [...sHex.slice(i, i + 1), ...sHex.slice(i, i + 1)];
       }
       sHex = sColorNew;
     }
@@ -65,7 +65,7 @@ export function colorIsDark(color: string) {
  * @returns {string} The HEX representation of the processed color
  */
 export function darken(color: string, amount: number) {
-  color = color.includes("#") ? color.substring(1, color.length) : color;
+  color = color.includes("#") ? color.slice(1) : color;
   amount = Math.trunc((255 * amount) / 100);
   return `#${subtractLight(color.slice(0, 2), amount)}${subtractLight(
     color.slice(2, 4),
@@ -80,7 +80,7 @@ export function darken(color: string, amount: number) {
  * @returns {string} The processed color represented as HEX
  */
 export function lighten(color: string, amount: number) {
-  color = color.includes("#") ? color.substring(1, color.length) : color;
+  color = color.includes("#") ? color.slice(1) : color;
   amount = Math.trunc((255 * amount) / 100);
   return `#${addLight(color.slice(0, 2), amount)}${addLight(color.slice(2, 4), amount)}${addLight(
     color.slice(4, 6),
@@ -97,7 +97,7 @@ export function lighten(color: string, amount: number) {
  */
 function addLight(color: string, amount: number) {
   const cc = Number.parseInt(color, 16) + amount;
-  const c = cc > 255 ? 255 : cc;
+  const c = Math.min(cc, 255);
   return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
 }
 
@@ -146,6 +146,6 @@ export function calculateBestTextColor(hexColor: string) {
  */
 function subtractLight(color: string, amount: number) {
   const cc = Number.parseInt(color, 16) - amount;
-  const c = cc < 0 ? 0 : cc;
+  const c = Math.max(cc, 0);
   return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
 }

packages/nocode/core/MfFloatButtonConfig.js

@@ -0,0 +1,51 @@
+import { defineComponent as e, ref as o, computed as t, watch as n, createBlock as a, openBlock as l, normalizeClass as u, unref as i, withCtx as c, renderSlot as r, createElementVNode as C, createVNode as s, createTextVNode as g, createElementBlock as p, Fragment as v, renderList as f, toDisplayString as d } from "vue";
+import { useDesign as h } from "@mfish/core/hooks";
+import { Input as m, RadioGroup as F, RadioButton as b, InputNumber as _ } from "ant-design-vue";
+import { u as k, M as I, h as w, I as S, _ as y } from "./index.js";
+import { S as x } from "./StyleConfig.js";
+import { IconPicker as U } from "@mfish/core/components/Icon";
+import "lodash-es";
+import "@mfish/core/enums";
+import "@mfish/core/utils/Is";
+const Z = { class: "title" }, j = { class: "title" }, M = { class: "title" }, q = y(e({ __name: "MfFloatButtonConfig", setup(e2) {
+  const y2 = k(), { prefixCls: q2 } = h("tag-config"), z = o(), B = o(), $ = o("circle"), A = [{ title: "圆形", value: "circle" }, { title: "方形", value: "square" }], D = t(() => !!y2.getCurConfigComponent.chart.options.badge), E = o(0), G = o(true), H = o();
+  function J(e3) {
+    y2.getCurConfigComponent.chart.data.dataSet.icon = e3;
+  }
+  function K(e3) {
+    L(e3), z.value = e3;
+  }
+  function L(e3) {
+    y2.getCurConfigComponent.chart.options.color = e3;
+  }
+  function N(e3) {
+    O(e3), B.value = e3;
+  }
+  function O(e3) {
+    y2.getCurConfigComponent.chart.options.buttonColor = e3;
+  }
+  function P() {
+    y2.getCurConfigComponent.chart.options.shape = $.value;
+  }
+  function Q(e3) {
+    e3 ? y2.getCurConfigComponent.chart.options.badge = { count: E.value, showZero: G.value, color: H.value } : delete y2.getCurConfigComponent.chart.options.badge;
+  }
+  function R() {
+    y2.getCurConfigComponent.chart.options.badge.count = E.value;
+  }
+  function T(e3) {
+    V(e3), H.value = e3;
+  }
+  function V(e3) {
+    y2.getCurConfigComponent.chart.options.badge.color = e3;
+  }
+  function W() {
+    y2.getCurConfigComponent.chart.options.badge.showZero = G.value;
+  }
+  return n(() => y2.getCurConfigComponent, (e3) => {
+    e3 && (z.value = y2.getCurConfigComponent.chart.options.color, B.value = y2.getCurConfigComponent.chart.options.buttonColor, $.value = y2.getCurConfigComponent.chart.options.shape || "circle", E.value = y2.getCurConfigComponent.chart.options.badge?.count || 0, G.value = y2.getCurConfigComponent.chart.options.badge?.showZero || true, H.value = y2.getCurConfigComponent.chart.options.badge?.color || "");
+  }, { immediate: true }), (e3, o2) => (l(), a(x, { class: u(i(q2)) }, { default: c(() => [r(e3.$slots, "default", {}, void 0, true), o2[7] || (o2[7] = C("div", { class: "title" }, " 文本 ", -1)), s(i(m), { value: i(y2).getCurConfigComponent.chart.data.dataSet.title, "onUpdate:value": o2[0] || (o2[0] = (e4) => i(y2).getCurConfigComponent.chart.data.dataSet.title = e4), "show-count": "", maxlength: 50 }, null, 8, ["value"]), o2[8] || (o2[8] = C("div", { class: "title" }, " 图标 ", -1)), s(i(U), { value: i(y2).getCurConfigComponent.chart.data.dataSet.icon, onChange: J }, null, 8, ["value"]), o2[9] || (o2[9] = C("div", { class: "title" }, " 文字颜色 ", -1)), s(i(I), { placeholder: "设置文本颜色，格式#FFFFFF", type: 1, value: z.value, onConfirmChange: K, onInputChange: L }, null, 8, ["value"]), o2[10] || (o2[10] = C("div", { class: "title" }, " 按钮颜色 ", -1)), s(i(I), { placeholder: "设置按钮颜色，格式#FFFFFF", value: B.value, onConfirmChange: N, onInputChange: O }, null, 8, ["value"]), C("div", Z, [o2[4] || (o2[4] = g(" 按钮形状 ")), s(i(F), { size: "small", value: $.value, "onUpdate:value": o2[1] || (o2[1] = (e4) => $.value = e4), onChange: P }, { default: c(() => [(l(), p(v, null, f(A, (e4) => s(i(b), { key: e4.value, value: e4.value }, { default: c(() => [g(d(e4.title), 1)]), _: 2 }, 1032, ["value"])), 64))]), _: 1 }, 8, ["value"])]), s(w, { title: "显示徽标", "allow-check": true, "title-check": D.value, onChecked: Q }, { default: c(() => [C("div", j, [o2[5] || (o2[5] = g(" 数值 ")), C("div", null, [s(i(_), { style: { width: "100%" }, value: E.value, "onUpdate:value": o2[2] || (o2[2] = (e4) => E.value = e4), onChange: R }, null, 8, ["value"])])]), C("div", M, [o2[6] || (o2[6] = g(" 颜色 ")), C("div", null, [s(i(I), { placeholder: "设置文本颜色，格式#FFFFFF", type: 1, value: H.value, onConfirmChange: T, onInputChange: V }, null, 8, ["value"])])]), s(S, { title: "0是否显示", tooltip: "当数值为0时，是否展示徽标", checked: G.value, "onUpdate:checked": o2[3] || (o2[3] = (e4) => G.value = e4), onChange: W }, null, 8, ["checked"])]), _: 1 }, 8, ["title-check"])]), _: 3, __: [7, 8, 9, 10] }, 8, ["class"]));
+} }), [["__scopeId", "data-v-d29ac97d"]]);
+export {
+  q as default
+};