+
HEX: {{ mainColor }}
@@ -105,6 +105,14 @@ export default {
emit: ['changeMainColor'],
methods: {
handleAttach,
+ handleSubtitleClick(event) {
+ // 检查点击的元素是否是交互元素或其子元素
+ const target = event.target;
+ const interactiveElements = target.closest('.t-switch, .t-icon, .t-popup');
+ if (!interactiveElements) {
+ this.isActive = !this.isActive;
+ }
+ },
changeColor(hex) {
this.$emit('changeMainColor', hex, this.type);
},
diff --git a/packages/theme-generator/src/color-panel/index.vue b/packages/theme-generator/src/color-panel/index.vue
index 5b9573cd..cc3f058e 100644
--- a/packages/theme-generator/src/color-panel/index.vue
+++ b/packages/theme-generator/src/color-panel/index.vue
@@ -255,7 +255,12 @@
>
{{ lang.color.fromThemeColor }}
-
+
-
@@ -52,6 +52,14 @@ export default {
},
methods: {
handleAttach,
+ handleSubtitleClick(event) {
+ // 检查点击的元素是否是交互元素或其子元素
+ const target = event.target;
+ const interactiveElements = target.closest('.t-switch, .t-icon, .t-popup, .t-button');
+ if (!interactiveElements) {
+ this.isActive = !this.isActive;
+ }
+ },
},
};
diff --git a/packages/theme-generator/src/common/i18n/en-US.js b/packages/theme-generator/src/common/i18n/en-US.js
index df24689f..b7e092cd 100644
--- a/packages/theme-generator/src/common/i18n/en-US.js
+++ b/packages/theme-generator/src/common/i18n/en-US.js
@@ -45,6 +45,8 @@ export default {
yPadding: 'vertical Padding',
popupPadding: 'popup Padding',
margin: 'margin',
+ reset: 'Reset',
+ resetConfirm: 'Are you sure you want to reset the basic size to default?',
},
borerRadius: {
title: 'Border',
diff --git a/packages/theme-generator/src/common/i18n/zh-CN.js b/packages/theme-generator/src/common/i18n/zh-CN.js
index e8052583..3b2119b5 100644
--- a/packages/theme-generator/src/common/i18n/zh-CN.js
+++ b/packages/theme-generator/src/common/i18n/zh-CN.js
@@ -45,6 +45,8 @@ export default {
yPadding: '组件上下边距',
popupPadding: '弹出层边距',
margin: '组件间距',
+ reset: '恢复默认',
+ resetConfirm: '确定要恢复基础尺寸到默认值吗？',
},
borerRadius: {
title: '圆角',
diff --git a/packages/theme-generator/src/common/utils/animation.js b/packages/theme-generator/src/common/utils/animation.js
index 5f1ef12e..042a97fd 100644
--- a/packages/theme-generator/src/common/utils/animation.js
+++ b/packages/theme-generator/src/common/utils/animation.js
@@ -7,19 +7,19 @@ export function collapseAnimation() {
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
- el.style.height = "0";
- el.style.paddingTop = "0";
- el.style.paddingBottom = "0";
+ el.style.height = '0';
+ el.style.paddingTop = '0';
+ el.style.paddingBottom = '0';
};
const enter = (el) => {
el.dataset.oldOverflow = el.style.overflow;
el.style.height = `${el.scrollHeight}px`;
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
- el.style.overflow = "hidden";
+ el.style.overflow = 'hidden';
};
const afterEnter = (el) => {
- el.style.height = "";
+ el.style.height = '';
el.style.overflow = el.dataset.oldOverflow;
};
const beforeLeave = (el) => {
@@ -28,17 +28,17 @@ export function collapseAnimation() {
el.dataset.oldOverflow = el.style.overflow;
el.style.height = `${el.scrollHeight}px`;
- el.style.overflow = "hidden";
+ el.style.overflow = 'hidden';
};
const leave = (el) => {
if (el.scrollHeight !== 0) {
- el.style.height = "0";
- el.style.paddingTop = "0";
- el.style.paddingBottom = "0";
+ el.style.height = '0';
+ el.style.paddingTop = '0';
+ el.style.paddingBottom = '0';
}
};
const afterLeave = (el) => {
- el.style.height = "";
+ el.style.height = '';
el.style.overflow = el.dataset.oldOverflow;
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
@@ -57,12 +57,10 @@ export function collapseAnimation() {
// refer to https://dev.to/jordienr/how-to-make-animated-gradients-like-stripe-56nh
export function colorAnimation() {
const canvas =
- document
- .querySelector("td-theme-generator")
- ?.shadowRoot?.getElementById("canvas") ||
- document.getElementById("canvas");
+ document.querySelector('td-theme-generator')?.shadowRoot?.getElementById('canvas') ||
+ document.getElementById('canvas');
if (!canvas) return;
- const context = canvas.getContext("2d");
+ const context = canvas.getContext('2d');
let time = 0;
const color = function (x, y, r, g, b) {
@@ -74,23 +72,12 @@ export function colorAnimation() {
};
const G = function (x, y, time) {
- return Math.floor(
- 192 +
- 64 *
- Math.sin(
- (x * x * Math.cos(time / 4) + y * y * Math.sin(time / 3)) / 300
- )
- );
+ return Math.floor(192 + 64 * Math.sin((x * x * Math.cos(time / 4) + y * y * Math.sin(time / 3)) / 300));
};
const B = function (x, y, time) {
return Math.floor(
- 192 +
- 64 *
- Math.sin(
- 5 * Math.sin(time / 9) +
- ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100
- )
+ 192 + 64 * Math.sin(5 * Math.sin(time / 9) + ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100),
);
};
diff --git a/packages/theme-generator/src/font-panel/components/FontColorSvg.vue b/packages/theme-generator/src/font-panel/components/FontColorSvg.vue
index 34f8ede7..ee21fde4 100644
--- a/packages/theme-generator/src/font-panel/components/FontColorSvg.vue
+++ b/packages/theme-generator/src/font-panel/components/FontColorSvg.vue
@@ -4,7 +4,7 @@
height="48"
viewBox="0 0 48 48"
fill="none"
- :style="{ borderRadius: '6px', border: '1px solid var(--theme-component-border)'}"
+ :style="{ borderRadius: '6px', border: '1px solid var(--theme-component-border)' }"
xmlns="http://www.w3.org/2000/svg"
>
h(Generator),
-}).$mount("#app");
+}).$mount('#app');
diff --git a/packages/theme-generator/src/shadow-panel/components/ShadowLayer.vue b/packages/theme-generator/src/shadow-panel/components/ShadowLayer.vue
index 2413d434..780d5c77 100644
--- a/packages/theme-generator/src/shadow-panel/components/ShadowLayer.vue
+++ b/packages/theme-generator/src/shadow-panel/components/ShadowLayer.vue
@@ -17,10 +17,10 @@