@zhang_jifan/fanui 2.1.0

package/src/base/_animations.scss

@@ -0,0 +1,210 @@
+// =============================================================================
+// fanUI · 动画与动效 (Animations & Motion)
+// -----------------------------------------------------------------------------
+// 统一动效语言：命名 `fanui-*`，时长/缓动均取自设计令牌。
+// 所有动画默认在 prefers-reduced-motion: reduce 下自动降级。
+// =============================================================================
+
+@use "sass:map";
+@use "sass:list";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 关键帧
+// -----------------------------------------------------------------------------
+
+@keyframes fanui-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes fanui-fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+@keyframes fanui-slide-in-up {
+  from { opacity: 0; transform: translateY(12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fanui-slide-in-down {
+  from { opacity: 0; transform: translateY(-12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fanui-slide-in-start {
+  from { opacity: 0; transform: translateX(-16px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes fanui-slide-in-end {
+  from { opacity: 0; transform: translateX(16px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes fanui-zoom-in {
+  from { opacity: 0; transform: scale(0.94); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+@keyframes fanui-zoom-out {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.94); }
+}
+
+@keyframes fanui-pop-in {
+  from { opacity: 0; transform: scale(0.86) translateY(8px); }
+  60%  { opacity: 1; transform: scale(1.02) translateY(0); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+@keyframes fanui-spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes fanui-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.45; }
+}
+
+@keyframes fanui-bounce {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(-6px); }
+}
+
+@keyframes fanui-shake {
+  0%, 100% { transform: translateX(0); }
+  20%      { transform: translateX(-6px); }
+  40%      { transform: translateX(6px); }
+  60%      { transform: translateX(-4px); }
+  80%      { transform: translateX(4px); }
+}
+
+@keyframes fanui-progress-stripes {
+  from { background-position: 1rem 0; }
+  to   { background-position: 0 0; }
+}
+
+@keyframes fanui-progress-indeterminate {
+  0%   { left: -35%; width: 35%; }
+  60%  { left: 100%; width: 60%; }
+  100% { left: 100%; width: 60%; }
+}
+
+@keyframes fanui-skeleton-shimmer {
+  from { background-position: 200% 0; }
+  to   { background-position: -200% 0; }
+}
+
+@keyframes fanui-toast-in {
+  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes fanui-ripple {
+  from { transform: scale(0); opacity: 0.45; }
+  to   { transform: scale(2.6); opacity: 0; }
+}
+
+@keyframes fanui-blink {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0; }
+}
+
+// -----------------------------------------------------------------------------
+// 2. 动画工具类
+// -----------------------------------------------------------------------------
+
+$fanui-animations: (
+  "fade-in":       (fanui-fade-in,        v.$fanui-duration-base, v.$fanui-ease-out, both),
+  "fade-out":      (fanui-fade-out,       v.$fanui-duration-base, v.$fanui-ease-in,  both),
+  "slide-in-up":   (fanui-slide-in-up,    v.$fanui-duration-slow, v.$fanui-ease-out, both),
+  "slide-in-down": (fanui-slide-in-down,  v.$fanui-duration-slow, v.$fanui-ease-out, both),
+  "slide-in-start":(fanui-slide-in-start, v.$fanui-duration-slow, v.$fanui-ease-out, both),
+  "slide-in-end":  (fanui-slide-in-end,   v.$fanui-duration-slow, v.$fanui-ease-out, both),
+  "zoom-in":       (fanui-zoom-in,        v.$fanui-duration-base, v.$fanui-ease-out, both),
+  "zoom-out":      (fanui-zoom-out,       v.$fanui-duration-base, v.$fanui-ease-in,  both),
+  "pop-in":        (fanui-pop-in,         v.$fanui-duration-slow, v.$fanui-ease-spring, both),
+  "spin":          (fanui-spin,           900ms,                  linear,            infinite),
+  "pulse":         (fanui-pulse,          1.6s,                   v.$fanui-ease-in-out, infinite),
+  "bounce":        (fanui-bounce,         1s,                     v.$fanui-ease-in-out, infinite),
+  "shake":         (fanui-shake,          420ms,                  v.$fanui-ease-in-out, both),
+  "blink":         (fanui-blink,          1s,                     step-end,          infinite),
+) !default;
+
+@each $name, $config in $fanui-animations {
+  .fanui-animate-#{$name} {
+    animation-name: list.nth($config, 1);
+    animation-duration: list.nth($config, 2);
+    animation-timing-function: list.nth($config, 3);
+    animation-fill-mode: list.nth($config, 4);
+    animation-iteration-count: 1;
+  }
+}
+
+// 无限循环类需单独纠正 iteration-count
+.fanui-animate-spin,
+.fanui-animate-pulse,
+.fanui-animate-bounce,
+.fanui-animate-blink {
+  animation-iteration-count: infinite;
+}
+
+.fanui-animate-infinite { animation-iteration-count: infinite; }
+.fanui-animate-once     { animation-iteration-count: 1; }
+
+@each $name, $value in v.$fanui-durations {
+  .fanui-duration-#{$name} { animation-duration: $value; transition-duration: $value; }
+}
+
+.fanui-ease-linear  { animation-timing-function: linear; transition-timing-function: linear; }
+.fanui-ease-in      { animation-timing-function: v.$fanui-ease-in; transition-timing-function: v.$fanui-ease-in; }
+.fanui-ease-out     { animation-timing-function: v.$fanui-ease-out; transition-timing-function: v.$fanui-ease-out; }
+.fanui-ease-in-out  { animation-timing-function: v.$fanui-ease-in-out; transition-timing-function: v.$fanui-ease-in-out; }
+.fanui-ease-spring  { animation-timing-function: v.$fanui-ease-spring; transition-timing-function: v.$fanui-ease-spring; }
+
+.fanui-delay-75  { animation-delay: 75ms; }
+.fanui-delay-150 { animation-delay: 150ms; }
+.fanui-delay-300 { animation-delay: 300ms; }
+.fanui-delay-500 { animation-delay: 500ms; }
+
+.fanui-paused  { animation-play-state: paused; }
+.fanui-running { animation-play-state: running; }
+
+// 过渡工具类
+@each $prop in (all, color, background-color, border-color, box-shadow, opacity, transform) {
+  .fanui-transition-#{$prop} {
+    @include mx.fanui-transition($prop);
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 3. 无障碍降级：尊重用户的「减少动态效果」偏好
+// -----------------------------------------------------------------------------
+
+@include mx.fanui-motion-safe() {
+  .fanui-animate-fade-in,
+  .fanui-animate-fade-out,
+  .fanui-animate-slide-in-up,
+  .fanui-animate-slide-in-down,
+  .fanui-animate-slide-in-start,
+  .fanui-animate-slide-in-end,
+  .fanui-animate-zoom-in,
+  .fanui-animate-zoom-out,
+  .fanui-animate-pop-in,
+  .fanui-animate-shake {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+
+  .fanui-animate-spin,
+  .fanui-animate-pulse,
+  .fanui-animate-bounce,
+  .fanui-animate-blink {
+    animation-duration: 3s !important;
+  }
+}

package/src/base/_reset.scss

@@ -0,0 +1,359 @@
+// =============================================================================
+// fanUI · CSS 重置 (Reset / Normalize)
+// -----------------------------------------------------------------------------
+// 目标：抹平浏览器差异 + 提供合理的默认排版，不破坏语义。
+// 说明：所有规则使用低特异性选择器，便于业务侧覆盖。
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  scroll-behavior: smooth;
+  font-size: 100%; // 尊重用户浏览器默认字号，配合 rem 缩放
+  line-height: 1;
+  tab-size: 4;
+  font-family: v.$fanui-font-family-base;
+  text-rendering: optimizeLegibility;
+}
+
+@include mx.fanui-motion-safe() {
+  html { scroll-behavior: auto; }
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: fn.fanui-var("font-base", v.$fanui-font-family-base);
+  font-size: fn.fanui-var("font-size-base", v.$fanui-control-font-size);
+  font-weight: map.get(v.$fanui-font-weights, "normal");
+  line-height: fn.fanui-var("line-height-base", v.$fanui-line-height-base);
+  color: fn.fanui-var("color-text");
+  background-color: fn.fanui-var("color-bg");
+  @include mx.fanui-transition((color, background-color), v.$fanui-duration-slow);
+
+  @if v.$fanui-body-font-smoothing {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 元素默认值
+// -----------------------------------------------------------------------------
+
+main,
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+details,
+summary,
+figcaption {
+  display: block;
+}
+
+h1, h2, h3, h4, h5, h6,
+p,
+figure,
+blockquote,
+dl,
+dd,
+ol,
+ul,
+pre {
+  margin: 0;
+}
+
+ol[class],
+ul[class],
+li[class] {
+  list-style: none;
+  padding: 0;
+}
+
+a {
+  color: fn.fanui-var("primary");
+  text-decoration: none;
+  background-color: transparent;
+  @include mx.fanui-transition(color, v.$fanui-duration-fast);
+
+  &:hover {
+    color: fn.fanui-var("primary-hover");
+    text-decoration: underline;
+  }
+  &:active {
+    color: fn.fanui-var("primary-active");
+  }
+  &:focus-visible {
+    @include mx.fanui-focus-ring();
+    border-radius: 2px;
+  }
+}
+
+b,
+strong {
+  font-weight: map.get(v.$fanui-font-weights, "bold");
+}
+
+small {
+  font-size: 0.875em;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub { bottom: -0.25em; }
+sup { top: -0.5em; }
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+img,
+video {
+  height: auto;
+  border-style: none;
+}
+
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+// 表单元素继承字体
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  line-height: inherit;
+  color: inherit;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"],
+[role="button"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+  text-transform: none;
+  background-color: transparent;
+  background-image: none;
+  border: 0;
+  padding: 0;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  padding: 0;
+  display: table;
+  max-width: 100%;
+  white-space: normal;
+  color: inherit;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+textarea {
+  resize: vertical;
+  overflow: auto;
+}
+
+[type="search"] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+  appearance: textfield;
+
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+[type="number"] {
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    height: auto;
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  -moz-appearance: textfield;
+}
+
+[hidden],
+template {
+  display: none !important;
+}
+
+iframe {
+  border: 0;
+  display: block;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  margin: 1em 0;
+  border: 0;
+  border-top: fn.fanui-var("border-width", v.$fanui-border-width) solid fn.fanui-var("color-border");
+  opacity: 1;
+  color: inherit;
+}
+
+abbr[title] {
+  text-decoration: underline dotted;
+  cursor: help;
+}
+
+code,
+kbd,
+samp,
+pre {
+  font-family: fn.fanui-var("font-mono", v.$fanui-font-family-mono);
+  font-size: 1em;
+}
+
+pre {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+details > summary::-webkit-details-marker {
+  display: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  text-indent: 0;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+// 全局滚动条（仅 WebKit / Firefox），可通过 .fanui-no-scrollbar 关闭
+html {
+  @include mx.fanui-scrollbar();
+}
+
+// 选中文本
+::selection {
+  background-color: fn.fanui-var("primary-soft");
+  color: fn.fanui-var("primary-active");
+}
+
+// 无障碍：跳过导航链接（C4）—— 键盘 Tab 聚焦后悬浮于左上角，点击直达主内容
+.fanui-skip-link {
+  position: fixed;
+  top: -100%;
+  left: fn.fanui-var("space-4");
+  z-index: calc(fn.fanui-var("z-toast") + 1);
+  padding: 10px 18px;
+  border-radius: fn.fanui-var("radius-md");
+  background-color: fn.fanui-var("primary");
+  color: fn.fanui-var("primary-fg");
+  font-size: fn.fanui-var("font-size-sm");
+  font-weight: fn.fanui-var("font-weight-semibold");
+  text-decoration: none;
+  box-shadow: fn.fanui-var("shadow-lg");
+  @include mx.fanui-transition((top), v.$fanui-duration-fast);
+
+  &:focus {
+    top: fn.fanui-var("space-3");
+    outline: 3px solid fn.fanui-var("primary-ring");
+    outline-offset: 2px;
+  }
+}
+
+// 无障碍辅助类
+.fanui-visually-hidden,
+.fanui-sr-only {
+  @include mx.fanui-visually-hidden();
+}
+
+.fanui-sr-only-focusable {
+  @include mx.fanui-visually-hidden($focusable: true);
+}
+
+.fanui-no-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+}
+
+// 全局焦点可见性兜底（不覆盖组件自定义环）
+:focus-visible {
+  outline: 2px solid fn.fanui-var("primary-ring");
+  outline-offset: 1px;
+}
+
+@media (forced-colors: active) {
+  :focus-visible {
+    outline: 2px solid transparent;
+  }
+}

package/src/base/_rtl.scss

@@ -0,0 +1,133 @@
+// =============================================================================
+// fanUI · RTL 双向布局覆盖层
+// -----------------------------------------------------------------------------
+// 策略（两层）：
+//   ① 主力：**逻辑属性**。src 中的行内轴属性（margin/padding/border/text-align）
+//      已统一改写为 *-inline-start / *-inline-end / *-inline（见 utilities/_spacing.scss），
+//      在 [dir="rtl"] 下自动镜像，无需任何覆盖规则。当前产物逻辑属性约 690 处。
+//   ② 补齐层：本文件，只处理**本质物理**的东西 ——
+//      浮层锚点方向、抽屉滑入方向、动画/位移方向、图标指向、非对称圆角。
+//
+// 用法：<html dir="rtl"> 整站镜像；局部 <div dir="rtl"> 同样生效。
+// 审计：scripts/audit-coverage.cjs 统计产物中残留的物理行内轴属性数量。
+// =============================================================================
+
+@use "../functions" as fn;
+
+[dir="rtl"] {
+  /* ---------------------------------------------------------------------------
+   * 1. 下拉菜单 / 弹出面板：默认锚点由「左上」变为「右上」
+   * ------------------------------------------------------------------------- */
+  .fanui-dropdown__menu {
+    transform-origin: top right;
+
+    &--start { left: auto; right: 0; transform-origin: top right; }
+    &--end   { left: 0; right: auto; transform-origin: top left; }
+
+    &--up {
+      transform-origin: bottom right;
+
+      &.fanui-dropdown__menu--end { transform-origin: bottom left; }
+    }
+
+    &--center { left: 50%; right: auto; }
+  }
+
+  .fanui-popover__panel {
+    transform-origin: top right;
+
+    &--end   { left: auto; right: 0; transform-origin: top right; }
+    &--start { left: 0; right: auto; transform-origin: top left; }
+    &--center { left: 50%; right: auto; transform: translateX(-50%) translateY(-4px); }
+    &--center.is-open,
+    &--center.is-active { transform: translateX(-50%) translateY(0); }
+  }
+
+  /* ---------------------------------------------------------------------------
+   * 2. 气泡提示：左右指向对调
+   * ------------------------------------------------------------------------- */
+  .fanui-tooltip--right .fanui-tooltip__bubble {
+    left: auto;
+    right: calc(100% + 8px);
+
+    &::after { left: auto; right: 0; margin: 0 -3px 0 0; }
+  }
+
+  .fanui-tooltip--left .fanui-tooltip__bubble {
+    left: calc(100% + 8px);
+    right: auto;
+
+    &::after { left: 0; right: auto; margin: 0 100% 0 -3px; }
+  }
+
+  /* ---------------------------------------------------------------------------
+   * 3. 抽屉：start / end 语义随方向对调（滑入位移必须反向）
+   * ------------------------------------------------------------------------- */
+  .fanui-drawer--start .fanui-drawer__panel {
+    left: auto;
+    right: 0;
+    transform: translateX(100%);
+  }
+
+  .fanui-drawer--end .fanui-drawer__panel {
+    left: 0;
+    right: auto;
+    transform: translateX(-100%);
+  }
+
+  .fanui-drawer--start.is-open > .fanui-drawer__panel,
+  .fanui-drawer--end.is-open > .fanui-drawer__panel { transform: translate(0, 0); }
+
+  .fanui-sidebar--end { left: 0; right: auto; }
+
+  /* ---------------------------------------------------------------------------
+   * 4. 日期 / 时间 / 颜色 / 级联面板：展开原点镜像
+   * ------------------------------------------------------------------------- */
+  .fanui-datepanel,
+  .fanui-timepanel,
+  .fanui-colorpanel,
+  .fanui-cascader__panel { transform-origin: top right; }
+
+  /* ---------------------------------------------------------------------------
+   * 5. 提示条区域：左右位置对调
+   * ------------------------------------------------------------------------- */
+  .fanui-toast-region {
+    &--top-right    { left: fn.fanui-var("space-5"); right: auto; align-items: flex-start; }
+    &--top-left     { left: auto; right: fn.fanui-var("space-5"); align-items: flex-end; }
+    &--bottom-right { left: fn.fanui-var("space-5"); right: auto; align-items: flex-start; }
+  }
+
+  /* ---------------------------------------------------------------------------
+   * 6. 开关：轨道镜像（滑块的 left:2px 与 translateX 一并翻转）
+   * ------------------------------------------------------------------------- */
+  .fanui-switch__track { transform: scaleX(-1); }
+
+  /* ---------------------------------------------------------------------------
+   * 7. 进度 / 加载条 / 跑马灯：起始边与流向镜像
+   * ------------------------------------------------------------------------- */
+  .fanui-scroll-progress__bar,
+  .fanui-loading-bar__inner { transform-origin: right center; }
+
+  .fanui-marquee__track { animation-direction: reverse; }
+
+  /* ---------------------------------------------------------------------------
+   * 8. 方向性图标：必须水平翻转，否则语义相反
+   * ------------------------------------------------------------------------- */
+  .fanui-breadcrumb__separator,
+  .fanui-sidebar__item__arrow,
+  .fanui-cascader__arrow,
+  .fanui-cascader__caret,
+  .fanui-tree__caret,
+  .fanui-carousel__nav,
+  .fanui-datepanel__nav { display: inline-block; transform: scaleX(-1); }
+
+  /* ---------------------------------------------------------------------------
+   * 9. 悬浮操作球：贴边位置对调
+   * ------------------------------------------------------------------------- */
+  .fanui-fab { left: fn.fanui-var("space-5"); right: auto; }
+
+  /* ---------------------------------------------------------------------------
+   * 10. 跳转链接
+   * ------------------------------------------------------------------------- */
+  .fanui-skip-link { left: auto; right: fn.fanui-var("space-4"); }
+}