@qingmingmu/components 0.1.0-beta.0

package/es/components/form/style.css

@@ -0,0 +1,70 @@
+.qm-form {
+  box-sizing: border-box;
+  width: 100%;
+}
+.qm-form--inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--qm-form-inline-gap);
+  align-items: flex-start;
+}
+.qm-form--inline .qm-form-item {
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: 0;
+}
+.qm-form--disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+.qm-form--left .qm-form-item__label {
+  text-align: left;
+}
+.qm-form--top .qm-form-item {
+  flex-direction: column;
+  align-items: stretch;
+}
+.qm-form--top .qm-form-item__label {
+  display: block;
+  width: auto;
+  margin-bottom: var(--qm-form-error-margin-top);
+  text-align: left;
+}
+
+.qm-form-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: var(--qm-form-item-margin-bottom);
+}
+.qm-form-item__label {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: var(--qm-form-label-width);
+  padding-right: calc(var(--qm-form-feedback-gap) * 3);
+  font-size: var(--qm-form-label-font-size);
+  font-weight: var(--qm-form-label-font-weight);
+  line-height: 1.5;
+  color: var(--qm-form-label-color);
+  text-align: right;
+}
+.qm-form-item__asterisk {
+  margin-right: 2px;
+  color: var(--qm-form-label-required-color);
+}
+.qm-form-item__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+.qm-form-item__error {
+  margin-top: var(--qm-form-error-margin-top);
+  font-size: var(--qm-form-error-font-size);
+  line-height: 1.4;
+  color: var(--qm-form-error-color);
+  transition: opacity var(--qm-form-transition) ease;
+}
+.qm-form-item--error .qm-form-item__label {
+  color: var(--qm-form-error-color);
+}

package/es/components/grid/index.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const gridItem = require('../../shared/components.r5I_hKLX.cjs');
+require('vue');
+require('../../shared/components.DUidQ77e.cjs');
+
+
+
+exports.QmGrid = gridItem.Grid;
+exports.QmGridItem = gridItem.gridItem;
+exports.default = gridItem.Grid;
+exports.gridBreakpoints = gridItem.gridBreakpoints;
+exports.gridBreakpointsMinWidth = gridItem.gridBreakpointsMinWidth;
+exports.gridContextKey = gridItem.gridContextKey;
+exports.gridItemProps = gridItem.gridItemProps;
+exports.gridProps = gridItem.gridProps;
+exports.normalizeGutter = gridItem.normalizeGutter;
+exports.resolveGutter = gridItem.resolveGutter;

package/es/components/grid/index.d.cts

@@ -0,0 +1,10 @@
+import { QmGrid as Grid } from '../row/index.cjs';
+export { GridAlign, GridBreakpoint, GridColSize, GridContext, GridGutter, GridJustify, QmGridItem, gridBreakpoints, gridBreakpointsMinWidth, gridContextKey, gridItemProps, gridProps, normalizeGutter, resolveGutter } from '../row/index.cjs';
+import 'vue';
+import '../../shared/components.OJRSZE6i.cjs';
+
+
+
+// @ts-ignore
+export = Grid;
+export { Grid as QmGrid };

package/es/components/grid/index.d.mts

@@ -0,0 +1,8 @@
+import { QmGrid as Grid } from '../row/index.mjs';
+export { GridAlign, GridBreakpoint, GridColSize, GridContext, GridGutter, GridJustify, QmGridItem, gridBreakpoints, gridBreakpointsMinWidth, gridContextKey, gridItemProps, gridProps, normalizeGutter, resolveGutter } from '../row/index.mjs';
+import 'vue';
+import '../../shared/components.OJRSZE6i.mjs';
+
+
+
+export { Grid as QmGrid, Grid as default };

package/es/components/grid/index.d.ts

@@ -0,0 +1,10 @@
+import { QmGrid as Grid } from '../row/index.js';
+export { GridAlign, GridBreakpoint, GridColSize, GridContext, GridGutter, GridJustify, QmGridItem, gridBreakpoints, gridBreakpointsMinWidth, gridContextKey, gridItemProps, gridProps, normalizeGutter, resolveGutter } from '../row/index.js';
+import 'vue';
+import '../../shared/components.OJRSZE6i.js';
+
+
+
+// @ts-ignore
+export = Grid;
+export { Grid as QmGrid };

package/es/components/grid/index.mjs

@@ -0,0 +1,8 @@
+import { G as Grid } from '../../shared/components.DKtogC94.mjs';
+export { g as QmGridItem, a as gridBreakpoints, b as gridBreakpointsMinWidth, c as gridContextKey, d as gridItemProps, e as gridProps, n as normalizeGutter, r as resolveGutter } from '../../shared/components.DKtogC94.mjs';
+import 'vue';
+import '../../shared/components.pcqpp-6-.mjs';
+
+
+
+export { Grid as QmGrid, Grid as default };

package/es/components/grid/style/index.js

@@ -0,0 +1,2 @@
+// QmGrid 样式入口：import 编译产物 CSS（与 es/components/grid/style.css 同目录）
+import './style.css'

package/es/components/grid/style.css

@@ -0,0 +1,45 @@
+.qm-grid {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: calc(var(--qm-grid-gap, 0px) / -2);
+  margin-left: calc(var(--qm-grid-gap, 0px) / -2);
+}
+
+.qm-grid-item {
+  position: relative;
+  left: calc((var(--qm-col-push, 0) - var(--qm-col-pull, 0)) / var(--qm-col-cols, 24) * 100%);
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  width: calc(var(--qm-col-span, 24) / var(--qm-col-cols, 24) * 100%);
+  max-width: calc(var(--qm-col-span, 24) / var(--qm-col-cols, 24) * 100%);
+  margin-left: calc(var(--qm-col-offset, 0) / var(--qm-col-cols, 24) * 100%);
+}
+@media (min-width: 768px) {
+  .qm-grid-item {
+    width: calc(var(--qm-col-span-sm, var(--qm-col-span, 24)) / var(--qm-col-cols, 24) * 100%);
+    max-width: calc(var(--qm-col-span-sm, var(--qm-col-span, 24)) / var(--qm-col-cols, 24) * 100%);
+    margin-left: calc(var(--qm-col-offset-sm, var(--qm-col-offset, 0)) / var(--qm-col-cols, 24) * 100%);
+  }
+}
+@media (min-width: 992px) {
+  .qm-grid-item {
+    width: calc(var(--qm-col-span-md, var(--qm-col-span, 24)) / var(--qm-col-cols, 24) * 100%);
+    max-width: calc(var(--qm-col-span-md, var(--qm-col-span, 24)) / var(--qm-col-cols, 24) * 100%);
+    margin-left: calc(var(--qm-col-offset-md, var(--qm-col-offset, 0)) / var(--qm-col-cols, 24) * 100%);
+  }
+}
+@media (min-width: 1200px) {
+  .qm-grid-item {
+    width: calc(var(--qm-col-span-lg, var(--qm-col-span, 24)) / var(--qm-col-cols, 24) * 100%);
+    max-width: calc(var(--qm-col-span-lg, var(--qm-col-span, 24)) / var(--qm-col-cols, 24) * 100%);
+    margin-left: calc(var(--qm-col-offset-lg, var(--qm-col-offset, 0)) / var(--qm-col-cols, 24) * 100%);
+  }
+}
+@media (min-width: 1920px) {
+  .qm-grid-item {
+    width: calc(var(--qm-col-span-xl, var(--qm-col-span, 24)) / var(--qm-col-cols, 24) * 100%);
+    max-width: calc(var(--qm-col-span-xl, var(--qm-col-span, 24)) / var(--qm-col-cols, 24) * 100%);
+    margin-left: calc(var(--qm-col-offset-xl, var(--qm-col-offset, 0)) / var(--qm-col-cols, 24) * 100%);
+  }
+}

package/es/components/icon/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const icon = require('../../shared/components.CRtd1JMp.cjs');
+require('vue');
+require('@qingmingmu/icons');
+require('../../shared/components.DUidQ77e.cjs');
+
+
+
+exports.QmIcon = icon.Icon;
+exports.default = icon.Icon;
+exports.iconProps = icon.iconProps;

package/es/components/icon/index.d.cts

@@ -0,0 +1,11 @@
+import { a as Icon } from '../../shared/components.b5GjJzDh.cjs';
+export { I as IconSize, i as iconProps } from '../../shared/components.b5GjJzDh.cjs';
+import 'vue';
+import '@qingmingmu/icons';
+import '../../shared/components.OJRSZE6i.cjs';
+
+
+
+// @ts-ignore
+export = Icon;
+export { Icon as QmIcon };

package/es/components/icon/index.d.mts

@@ -0,0 +1,9 @@
+import { a as Icon } from '../../shared/components.DCuPins-.mjs';
+export { I as IconSize, i as iconProps } from '../../shared/components.DCuPins-.mjs';
+import 'vue';
+import '@qingmingmu/icons';
+import '../../shared/components.OJRSZE6i.mjs';
+
+
+
+export { Icon as QmIcon, Icon as default };

package/es/components/icon/index.d.ts

@@ -0,0 +1,11 @@
+import { a as Icon } from '../../shared/components.C6sLxXPo.js';
+export { I as IconSize, i as iconProps } from '../../shared/components.C6sLxXPo.js';
+import 'vue';
+import '@qingmingmu/icons';
+import '../../shared/components.OJRSZE6i.js';
+
+
+
+// @ts-ignore
+export = Icon;
+export { Icon as QmIcon };

package/es/components/icon/index.mjs

@@ -0,0 +1,9 @@
+import { I as Icon } from '../../shared/components.D3on6_fI.mjs';
+export { i as iconProps } from '../../shared/components.D3on6_fI.mjs';
+import 'vue';
+import '@qingmingmu/icons';
+import '../../shared/components.pcqpp-6-.mjs';
+
+
+
+export { Icon as QmIcon, Icon as default };

package/es/components/icon/style/index.js

@@ -0,0 +1,2 @@
+// QmIcon 样式入口：import 编译产物 CSS（与 es/components/icon/style.css 同目录）
+import './style.css'

package/es/components/icon/style.css

@@ -0,0 +1,437 @@
+@charset "UTF-8";
+.qm-icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  color: var(--qm-icon-color);
+  mix-blend-mode: var(--qm-icon-blend-mode, normal);
+  opacity: var(--qm-icon-opacity, 1);
+  transition: color var(--qm-icon-transition) ease, opacity var(--qm-icon-transition) ease;
+  --qm-icon-stroke-width: 2;
+  --qm-icon-stroke-linecap: round;
+  --qm-icon-stroke-linejoin: round;
+  --qm-icon-opacity: 1;
+  --qm-icon-image-rendering: auto;
+  --qm-icon-shape-rendering: geometricprecision;
+  --qm-icon-filter: none;
+  --qm-icon-blend-mode: normal;
+  --qm-icon-transform: none;
+}
+.qm-icon--small {
+  font-size: var(--qm-icon-size-small);
+}
+.qm-icon--medium {
+  font-size: var(--qm-icon-size-medium);
+}
+.qm-icon--large {
+  font-size: var(--qm-icon-size-large);
+}
+.qm-icon > svg,
+.qm-icon > svg * {
+  image-rendering: var(--qm-icon-image-rendering, auto);
+  filter: var(--qm-icon-filter, none);
+  stroke-width: var(--qm-icon-stroke-width, 2);
+  stroke-linecap: var(--qm-icon-stroke-linecap, round);
+  stroke-linejoin: var(--qm-icon-stroke-linejoin, round);
+  shape-rendering: var(--qm-icon-shape-rendering, geometricprecision);
+}
+.qm-icon > svg > .qm-var {
+  display: none;
+}
+.qm-icon > svg > .qm-var--default {
+  display: inline;
+}
+.qm-icon--multicolor > svg {
+  shape-rendering: geometricprecision;
+}
+.qm-icon--mono {
+  --qm-icon-c1: currentcolor;
+  --qm-icon-c2: currentcolor;
+  --qm-icon-c3: currentcolor;
+  --qm-icon-c4: currentcolor;
+  --qm-icon-c5: currentcolor;
+  --qm-icon-c6: currentcolor;
+}
+.qm-icon--nofx {
+  opacity: 1 !important;
+  filter: none !important;
+}
+.qm-icon--nofx > svg * {
+  filter: none !important;
+  animation: none !important;
+}
+
+/* ============================================================
+ * 主题几何变体切换：15 种预置风格
+ * 规则：仅当 SVG 声明了对应变体（data-qm-variants~='<id>'）时，
+ * 才隐藏 default 层并显示 <id> 层；未提供该变体的图标保持 default 显示。
+ * ========================================================== */
+[data-qm-style=pixel] .qm-icon > svg[data-qm-variants~=pixel] > .qm-var--default {
+  display: none;
+}
+
+[data-qm-style=pixel] .qm-icon > svg[data-qm-variants~=pixel] > .qm-var--pixel {
+  display: inline;
+}
+
+[data-qm-style=chinese] .qm-icon > svg[data-qm-variants~=chinese] > .qm-var--default {
+  display: none;
+}
+
+[data-qm-style=chinese] .qm-icon > svg[data-qm-variants~=chinese] > .qm-var--chinese {
+  display: inline;
+}
+
+[data-qm-style=origami] .qm-icon > svg[data-qm-variants~=origami] > .qm-var--default {
+  display: none;
+}
+
+[data-qm-style=origami] .qm-icon > svg[data-qm-variants~=origami] > .qm-var--origami {
+  display: inline;
+}
+
+[data-qm-style=cyberpunk] .qm-icon > svg[data-qm-variants~=cyberpunk] > .qm-var--default {
+  display: none;
+}
+
+[data-qm-style=cyberpunk] .qm-icon > svg[data-qm-variants~=cyberpunk] > .qm-var--cyberpunk {
+  display: inline;
+}
+
+[data-qm-style=scifi] .qm-icon > svg[data-qm-variants~=scifi] > .qm-var--default {
+  display: none;
+}
+
+[data-qm-style=scifi] .qm-icon > svg[data-qm-variants~=scifi] > .qm-var--scifi {
+  display: inline;
+}
+
+[data-qm-style=hologram] .qm-icon > svg[data-qm-variants~=hologram] > .qm-var--default {
+  display: none;
+}
+
+[data-qm-style=hologram] .qm-icon > svg[data-qm-variants~=hologram] > .qm-var--hologram {
+  display: inline;
+}
+
+[data-qm-style=liquid] .qm-icon > svg[data-qm-variants~=liquid] > .qm-var--default {
+  display: none;
+}
+
+[data-qm-style=liquid] .qm-icon > svg[data-qm-variants~=liquid] > .qm-var--liquid {
+  display: inline;
+}
+
+[data-qm-style=aurora] .qm-icon > svg[data-qm-variants~=aurora] > .qm-var--default {
+  display: none;
+}
+
+[data-qm-style=aurora] .qm-icon > svg[data-qm-variants~=aurora] > .qm-var--aurora {
+  display: inline;
+}
+
+[data-qm-style=glass] .qm-icon > svg[data-qm-variants~=glass] > .qm-var--default {
+  display: none;
+}
+
+[data-qm-style=glass] .qm-icon > svg[data-qm-variants~=glass] > .qm-var--glass {
+  display: inline;
+}
+
+[data-qm-style=block] .qm-icon > svg[data-qm-variants~=block] > .qm-var--default {
+  display: none;
+}
+
+[data-qm-style=block] .qm-icon > svg[data-qm-variants~=block] > .qm-var--block {
+  display: inline;
+}
+
+[data-qm-style=industrial] .qm-icon > svg[data-qm-variants~=industrial] > .qm-var--default {
+  display: none;
+}
+
+[data-qm-style=industrial] .qm-icon > svg[data-qm-variants~=industrial] > .qm-var--industrial {
+  display: inline;
+}
+
+[data-qm-style=ink] .qm-icon > svg[data-qm-variants~=ink] > .qm-var--default {
+  display: none;
+}
+
+[data-qm-style=ink] .qm-icon > svg[data-qm-variants~=ink] > .qm-var--ink {
+  display: inline;
+}
+
+[data-qm-style=win7] .qm-icon > svg[data-qm-variants~=win7] > .qm-var--default {
+  display: none;
+}
+
+[data-qm-style=win7] .qm-icon > svg[data-qm-variants~=win7] > .qm-var--win7 {
+  display: inline;
+}
+
+[data-qm-style=win11] .qm-icon > svg[data-qm-variants~=win11] > .qm-var--default {
+  display: none;
+}
+
+[data-qm-style=win11] .qm-icon > svg[data-qm-variants~=win11] > .qm-var--win11 {
+  display: inline;
+}
+
+[data-qm-style=xp] .qm-icon > svg[data-qm-variants~=xp] > .qm-var--default {
+  display: none;
+}
+
+[data-qm-style=xp] .qm-icon > svg[data-qm-variants~=xp] > .qm-var--xp {
+  display: inline;
+}
+
+/* ============================================================
+ * 全局风格化滤镜 + 染色：让未提供专属几何变体的旧线性图标
+ * 在各主题下也能呈现风格气质（光晕/描边/硬边/柔化/染色）。
+ * 对已提供变体的图标同样生效——变体层叠加光晕更到位。
+ * .qm-icon 的 color 设为 c1 主题色，旧线性图标的 currentColor
+ * 会染上主题色；v3 多色图标用 var(--qm-icon-c1) 不依赖 color，不受影响。
+ * 优先级低于 .qm-icon--nofx 的 !important 兜底。
+ * ========================================================== */
+[data-qm-style=scifi] .qm-icon {
+  color: var(--qm-icon-c1);
+}
+[data-qm-style=scifi] .qm-icon > svg {
+  filter: drop-shadow(0 0 2px var(--qm-icon-c1));
+  stroke-width: calc(var(--qm-icon-stroke-width, 2) + 0.4);
+}
+
+[data-qm-style=cyberpunk] .qm-icon {
+  color: var(--qm-icon-c1);
+}
+[data-qm-style=cyberpunk] .qm-icon > svg {
+  filter: drop-shadow(0 0 2px var(--qm-icon-c1)) drop-shadow(0 0 5px var(--qm-icon-c4));
+}
+
+[data-qm-style=pixel] .qm-icon {
+  color: var(--qm-icon-c1);
+}
+[data-qm-style=pixel] .qm-icon > svg {
+  image-rendering: pixelated;
+  stroke-width: var(--qm-icon-stroke-width, 2);
+  shape-rendering: crispEdges; /* stylelint-disable-line value-keyword-case -- SVG standard value */
+}
+
+[data-qm-style=chinese] .qm-icon {
+  color: var(--qm-icon-c1);
+}
+[data-qm-style=chinese] .qm-icon > svg {
+  stroke-width: calc(var(--qm-icon-stroke-width, 2) + 0.6);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+[data-qm-style=ink] .qm-icon {
+  color: var(--qm-icon-c1);
+}
+[data-qm-style=ink] .qm-icon > svg {
+  filter: contrast(1.2) brightness(0.95) drop-shadow(1px 1px 0 rgba(63, 63, 70, 0.15));
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+[data-qm-style=hologram] .qm-icon {
+  color: var(--qm-icon-c1);
+}
+[data-qm-style=hologram] .qm-icon > svg {
+  opacity: 0.85;
+  filter: drop-shadow(0 0 3px var(--qm-icon-c1)) hue-rotate(8deg);
+}
+
+[data-qm-style=liquid] .qm-icon {
+  color: var(--qm-icon-c1);
+}
+[data-qm-style=liquid] .qm-icon > svg {
+  filter: blur(0.3px) drop-shadow(0 0 2px var(--qm-icon-c2));
+}
+
+[data-qm-style=aurora] .qm-icon {
+  color: var(--qm-icon-c1);
+}
+[data-qm-style=aurora] .qm-icon > svg {
+  filter: hue-rotate(12deg) drop-shadow(0 0 2px var(--qm-icon-c3));
+}
+
+[data-qm-style=glass] .qm-icon {
+  color: var(--qm-icon-c1);
+}
+[data-qm-style=glass] .qm-icon > svg {
+  opacity: 0.92;
+  filter: blur(0.15px);
+}
+
+[data-qm-style=block] .qm-icon {
+  color: var(--qm-icon-c1);
+}
+[data-qm-style=block] .qm-icon > svg {
+  stroke-linecap: butt;
+  stroke-linejoin: miter;
+  shape-rendering: crispEdges; /* stylelint-disable-line value-keyword-case -- SVG standard value */
+}
+
+[data-qm-style=industrial] .qm-icon {
+  color: var(--qm-icon-c1);
+}
+[data-qm-style=industrial] .qm-icon > svg {
+  filter: contrast(1.15) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2));
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+}
+
+[data-qm-style=origami] .qm-icon {
+  color: var(--qm-icon-c1);
+}
+[data-qm-style=origami] .qm-icon > svg {
+  stroke-linecap: butt;
+  stroke-linejoin: miter;
+}
+
+[data-qm-style=win7] .qm-icon {
+  color: var(--qm-icon-c1);
+}
+[data-qm-style=win7] .qm-icon > svg {
+  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
+}
+
+[data-qm-style=win11] .qm-icon {
+  color: var(--qm-icon-c1);
+}
+[data-qm-style=win11] .qm-icon > svg {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
+}
+
+[data-qm-style=xp] .qm-icon {
+  color: var(--qm-icon-c1);
+}
+[data-qm-style=xp] .qm-icon > svg {
+  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.35));
+}
+
+/* ============================================================
+ * 图标动画（由 data-animate 属性触发；作用于 svg 根节点）
+ * 每个动画都尊重 prefers-reduced-motion。
+ * ========================================================== */
+@keyframes qm-icon-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes qm-icon-shake {
+  0%, 100% {
+    transform: rotate(0deg);
+  }
+  15% {
+    transform: rotate(12deg);
+  }
+  30% {
+    transform: rotate(-10deg);
+  }
+  45% {
+    transform: rotate(7deg);
+  }
+  60% {
+    transform: rotate(-5deg);
+  }
+  75% {
+    transform: rotate(3deg);
+  }
+}
+@keyframes qm-icon-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.85;
+    transform: scale(1.18);
+  }
+}
+@keyframes qm-icon-bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+}
+@keyframes qm-icon-float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-1.5px);
+  }
+}
+@keyframes qm-icon-twinkle {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+  50% {
+    opacity: 0.55;
+    transform: scale(0.82) rotate(8deg);
+  }
+}
+@keyframes qm-icon-wave {
+  0%, 100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-8deg);
+  }
+  75% {
+    transform: rotate(8deg);
+  }
+}
+/* 动画触发：data-animate 挂在 svg 上 */
+.qm-icon > svg[data-animate=spin] {
+  transform-origin: center;
+  animation: qm-icon-spin 1.1s linear infinite;
+}
+
+.qm-icon > svg[data-animate=shake] {
+  transform-origin: top center;
+  animation: qm-icon-shake 2.4s ease-in-out infinite;
+}
+
+.qm-icon > svg[data-animate=pulse] {
+  transform-origin: center;
+  animation: qm-icon-pulse 1.6s ease-in-out infinite;
+}
+
+.qm-icon > svg[data-animate=bounce] {
+  animation: qm-icon-bounce 1.4s ease-in-out infinite;
+}
+
+.qm-icon > svg[data-animate=float] {
+  animation: qm-icon-float 3s ease-in-out infinite;
+}
+
+.qm-icon > svg[data-animate=twinkle] {
+  transform-origin: center;
+  animation: qm-icon-twinkle 2.2s ease-in-out infinite;
+}
+
+.qm-icon > svg[data-animate=wave] {
+  transform-origin: bottom center;
+  animation: qm-icon-wave 1.8s ease-in-out infinite;
+}
+
+/* ===== 降级：尊重系统减弱动效偏好 ===== */
+@media (prefers-reduced-motion: reduce) {
+  [data-qm-style] .qm-icon > svg {
+    filter: none;
+    transition: none;
+  }
+  [data-qm-style] .qm-icon > svg[data-animate] {
+    animation: none !important;
+  }
+}