zhbaor
341c0b7415
All checks were successful
ci/woodpecker/push/check_format Pipeline was successful
349 lines
11 KiB
JavaScript
349 lines
11 KiB
JavaScript
import { derived, changeColor, cB, defineComponent, h, useConfig, computed, formatLength, useTheme, createKey, useThemeClass, c, cE, cNotM, VResizeObserver, repeat, ref, nextTick, _export_sfc, useCssVars, useMowerStore, storeToRefs, inject, onMounted, createBlock, createCommentVNode, unref, openBlock, withCtx, createVNode, createTextVNode, toDisplayString } from "./index.js";
|
|
import { useHoudini } from "./use-houdini.js";
|
|
import { __unplugin_components_1 as __unplugin_components_1$1 } from "./Alert.js";
|
|
function self$1(vars) {
|
|
const {
|
|
primaryColor,
|
|
successColor,
|
|
warningColor,
|
|
errorColor,
|
|
infoColor,
|
|
fontWeightStrong
|
|
} = vars;
|
|
return {
|
|
fontWeight: fontWeightStrong,
|
|
rotate: "252deg",
|
|
colorStartPrimary: changeColor(primaryColor, {
|
|
alpha: 0.6
|
|
}),
|
|
colorEndPrimary: primaryColor,
|
|
colorStartInfo: changeColor(infoColor, {
|
|
alpha: 0.6
|
|
}),
|
|
colorEndInfo: infoColor,
|
|
colorStartWarning: changeColor(warningColor, {
|
|
alpha: 0.6
|
|
}),
|
|
colorEndWarning: warningColor,
|
|
colorStartError: changeColor(errorColor, {
|
|
alpha: 0.6
|
|
}),
|
|
colorEndError: errorColor,
|
|
colorStartSuccess: changeColor(successColor, {
|
|
alpha: 0.6
|
|
}),
|
|
colorEndSuccess: successColor
|
|
};
|
|
}
|
|
const gradientTextLight = {
|
|
common: derived,
|
|
self: self$1
|
|
};
|
|
const style$1 = cB("gradient-text", `
|
|
display: inline-block;
|
|
font-weight: var(--n-font-weight);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: #0000;
|
|
white-space: nowrap;
|
|
background-image: linear-gradient(var(--n-rotate), var(--n-color-start) 0%, var(--n-color-end) 100%);
|
|
transition:
|
|
--n-color-start .3s var(--n-bezier),
|
|
--n-color-end .3s var(--n-bezier);
|
|
`);
|
|
const gradientTextProps = Object.assign(Object.assign({}, useTheme.props), {
|
|
size: [String, Number],
|
|
fontSize: [String, Number],
|
|
type: {
|
|
type: String,
|
|
default: "primary"
|
|
},
|
|
color: [Object, String],
|
|
gradient: [Object, String]
|
|
});
|
|
const __unplugin_components_0 = defineComponent({
|
|
name: "GradientText",
|
|
props: gradientTextProps,
|
|
setup(props) {
|
|
useHoudini();
|
|
const {
|
|
mergedClsPrefixRef,
|
|
inlineThemeDisabled
|
|
} = useConfig(props);
|
|
const compatibleTypeRef = computed(() => {
|
|
const {
|
|
type
|
|
} = props;
|
|
if (type === "danger") return "error";
|
|
return type;
|
|
});
|
|
const styleFontSizeRef = computed(() => {
|
|
let fontSize = props.size || props.fontSize;
|
|
if (fontSize) fontSize = formatLength(fontSize);
|
|
return fontSize || void 0;
|
|
});
|
|
const styleBgImageRef = computed(() => {
|
|
const gradient = props.color || props.gradient;
|
|
if (typeof gradient === "string") {
|
|
return gradient;
|
|
} else if (gradient) {
|
|
const deg = gradient.deg || 0;
|
|
const from = gradient.from;
|
|
const to = gradient.to;
|
|
return `linear-gradient(${deg}deg, ${from} 0%, ${to} 100%)`;
|
|
}
|
|
return void 0;
|
|
});
|
|
const themeRef = useTheme("GradientText", "-gradient-text", style$1, gradientTextLight, props, mergedClsPrefixRef);
|
|
const cssVarsRef = computed(() => {
|
|
const {
|
|
value: type
|
|
} = compatibleTypeRef;
|
|
const {
|
|
common: {
|
|
cubicBezierEaseInOut
|
|
},
|
|
self: {
|
|
rotate,
|
|
[createKey("colorStart", type)]: colorStart,
|
|
[createKey("colorEnd", type)]: colorEnd,
|
|
fontWeight
|
|
}
|
|
} = themeRef.value;
|
|
return {
|
|
"--n-bezier": cubicBezierEaseInOut,
|
|
"--n-rotate": rotate,
|
|
"--n-color-start": colorStart,
|
|
"--n-color-end": colorEnd,
|
|
"--n-font-weight": fontWeight
|
|
};
|
|
});
|
|
const themeClassHandle = inlineThemeDisabled ? useThemeClass("gradient-text", computed(() => compatibleTypeRef.value[0]), cssVarsRef, props) : void 0;
|
|
return {
|
|
mergedClsPrefix: mergedClsPrefixRef,
|
|
compatibleType: compatibleTypeRef,
|
|
styleFontSize: styleFontSizeRef,
|
|
styleBgImage: styleBgImageRef,
|
|
cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
|
|
themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
|
|
onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
|
|
};
|
|
},
|
|
render() {
|
|
const {
|
|
mergedClsPrefix,
|
|
onRender
|
|
} = this;
|
|
onRender === null || onRender === void 0 ? void 0 : onRender();
|
|
return h("span", {
|
|
class: [`${mergedClsPrefix}-gradient-text`, `${mergedClsPrefix}-gradient-text--${this.compatibleType}-type`, this.themeClass],
|
|
style: [{
|
|
fontSize: this.styleFontSize,
|
|
backgroundImage: this.styleBgImage
|
|
}, this.cssVars]
|
|
}, this.$slots);
|
|
}
|
|
});
|
|
function self() {
|
|
return {};
|
|
}
|
|
const marqueeLight = {
|
|
common: derived,
|
|
self
|
|
};
|
|
const marqueeProps = Object.assign(Object.assign({}, useTheme.props), {
|
|
autoFill: Boolean,
|
|
speed: {
|
|
type: Number,
|
|
default: 48
|
|
}
|
|
});
|
|
const style = c([cB("marquee", `
|
|
overflow: hidden;
|
|
display: flex;
|
|
`, [cE("group", `
|
|
flex: 0 0 auto;
|
|
min-width: var(--n-min-width);
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
animation: n-marquee var(--n-duration) linear var(--n-delay) var(--n-iteration-count);
|
|
animation-play-state: var(--n-play);
|
|
animation-delay: var(--n-delay);
|
|
animation-direction: var(--n-direction);
|
|
`), cNotM("auto-fill", [cE("group", `min-width: 100%;`), cE("item", `min-width: 100%;`)])]), c("@keyframes n-marquee", {
|
|
from: {
|
|
transform: "translateX(0)"
|
|
},
|
|
to: {
|
|
transform: "translateX(-100%)"
|
|
}
|
|
})]);
|
|
const __unplugin_components_1 = defineComponent({
|
|
name: "Marquee",
|
|
props: marqueeProps,
|
|
setup(props) {
|
|
const {
|
|
mergedClsPrefixRef
|
|
} = useConfig(props);
|
|
useTheme("Marquee", "-marquee", style, marqueeLight, props, mergedClsPrefixRef);
|
|
const containerElRef = ref(null);
|
|
const contentWidthRef = ref(-1);
|
|
const containerWidthRef = ref(-1);
|
|
const playStateRef = ref("running");
|
|
const repeatCountInOneGroupRef = computed(() => {
|
|
if (!props.autoFill) return 1;
|
|
const {
|
|
value: contentWidth
|
|
} = contentWidthRef;
|
|
const {
|
|
value: containerWidth
|
|
} = containerWidthRef;
|
|
if (contentWidth === -1 || containerWidth === -1) return 1;
|
|
return Math.ceil(containerWidthRef.value / contentWidth);
|
|
});
|
|
const durationRef = computed(() => {
|
|
const {
|
|
value: contentWidth
|
|
} = contentWidthRef;
|
|
if (contentWidth === -1) return 0;
|
|
return contentWidth * repeatCountInOneGroupRef.value / props.speed;
|
|
});
|
|
const animationCssVarsRef = computed(() => {
|
|
return {
|
|
"--n-play": playStateRef.value,
|
|
"--n-direction": "normal",
|
|
"--n-duration": `${durationRef.value}s`,
|
|
"--n-delay": "0s",
|
|
"--n-iteration-count": "infinite",
|
|
"--n-min-width": "auto"
|
|
};
|
|
});
|
|
function resetScrollState() {
|
|
playStateRef.value = "paused";
|
|
nextTick().then(() => {
|
|
var _a;
|
|
void ((_a = containerElRef.value) === null || _a === void 0 ? void 0 : _a.offsetTop);
|
|
playStateRef.value = "running";
|
|
});
|
|
}
|
|
function handleContainerResize(entry) {
|
|
containerWidthRef.value = entry.contentRect.width;
|
|
}
|
|
function handleContentResize(entry) {
|
|
contentWidthRef.value = entry.contentRect.width;
|
|
}
|
|
function handleAnimationIteration() {
|
|
resetScrollState();
|
|
}
|
|
return {
|
|
mergedClsPrefix: mergedClsPrefixRef,
|
|
animationCssVars: animationCssVarsRef,
|
|
containerElRef,
|
|
repeatCountInOneGroup: repeatCountInOneGroupRef,
|
|
handleContainerResize,
|
|
handleContentResize,
|
|
handleAnimationIteration
|
|
};
|
|
},
|
|
render() {
|
|
const {
|
|
$slots,
|
|
mergedClsPrefix,
|
|
animationCssVars,
|
|
repeatCountInOneGroup,
|
|
handleAnimationIteration
|
|
} = this;
|
|
const originalNode = h(VResizeObserver, {
|
|
onResize: this.handleContentResize
|
|
}, h("div", {
|
|
class: `${mergedClsPrefix}-marquee__item ${mergedClsPrefix}-marquee__original-item`
|
|
}, $slots));
|
|
const mirrorNode = h("div", {
|
|
class: `${mergedClsPrefix}-marquee__item`
|
|
}, $slots);
|
|
if (this.autoFill) {
|
|
return h(VResizeObserver, {
|
|
onResize: this.handleContainerResize
|
|
}, h("div", {
|
|
class: `${mergedClsPrefix}-marquee ${mergedClsPrefix}-marquee--auto-fill`,
|
|
ref: "containerElRef",
|
|
style: animationCssVars
|
|
}, h("div", {
|
|
class: `${mergedClsPrefix}-marquee__group`,
|
|
onAnimationiteration: handleAnimationIteration
|
|
}, originalNode, repeat(repeatCountInOneGroup - 1, mirrorNode)), h("div", {
|
|
class: `${mergedClsPrefix}-marquee__group`
|
|
}, repeat(repeatCountInOneGroup, mirrorNode))));
|
|
} else {
|
|
return h("div", {
|
|
class: [`${mergedClsPrefix}-marquee`],
|
|
ref: "containerElRef",
|
|
style: animationCssVars
|
|
}, h("div", {
|
|
class: `${mergedClsPrefix}-marquee__group`,
|
|
onAnimationiteration: handleAnimationIteration
|
|
}, originalNode), h("div", {
|
|
class: `${mergedClsPrefix}-marquee__group`
|
|
}, mirrorNode));
|
|
}
|
|
}
|
|
});
|
|
const _sfc_main = {
|
|
__name: "paomadeng",
|
|
setup(__props) {
|
|
useCssVars((_ctx) => ({
|
|
"abe189c8": margin_x.value
|
|
}));
|
|
const mower_store = useMowerStore();
|
|
const { speed_msg } = storeToRefs(mower_store);
|
|
const show_paomadeng = inject("show_paomadeng");
|
|
const marqueeContent = computed(() => {
|
|
var _a;
|
|
return ((_a = speed_msg.value) == null ? void 0 : _a.length) > 0 ? `🚁🚁${speed_msg.value[0]}🚁🚁` : "🚁🚁尊贵的 mower 正在给你跑分🚁🚁";
|
|
});
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
show_paomadeng.value = false;
|
|
}, 60 * 1e3);
|
|
});
|
|
const mobile = inject("mobile");
|
|
const margin_x = computed(() => {
|
|
return mobile.value ? "16px" : "33%";
|
|
});
|
|
return (_ctx, _cache) => {
|
|
const _component_n_gradient_text = __unplugin_components_0;
|
|
const _component_n_marquee = __unplugin_components_1;
|
|
const _component_n_alert = __unplugin_components_1$1;
|
|
return unref(show_paomadeng) ? (openBlock(), createBlock(_component_n_alert, {
|
|
key: 0,
|
|
closable: "",
|
|
class: "custom-alert",
|
|
bordered: false
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_n_marquee, {
|
|
speed: 100,
|
|
class: "custom-marquee"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_n_gradient_text, { style: { "color": "white" } }, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(marqueeContent.value), 1)
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("", true);
|
|
};
|
|
}
|
|
};
|
|
const paomadeng = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-01ea1f7d"]]);
|
|
export {
|
|
paomadeng as default
|
|
};
|