@rxdrag/website-lib 0.0.151 → 0.0.153

package/components/Tabs.astro

@@ -1,147 +1,220 @@
----
-const rootId = crypto.randomUUID();
-
-interface Props {
-  class?: string;
-  className?: string;
-}
-
-const { class: className, className: className2, ...props } = Astro.props;
----
-
-<div data-tabs-root id={rootId} class:list={[className, className2]} {...props}>
-  <slot />
-</div>
-
-<script is:inline define:vars={{ rootId }}>
-  const defaultIndex = 0;
-  const activeBtnClassName = "active";
-  const inactiveBtnClassName = "";
-  const showPanelClassName = "block";
-  const hidePanelClassName = "hidden";
-
-  const getState = () => {
-    const w = window;
-    const all = (w.__tabs__ ||= {});
-    return (all[rootId] ||= { cleanup: null });
-  };
-
-  const initTabs = () => {
-    const root = document.getElementById(rootId);
-    if (!root) return () => {};
-
-    const toClassList = (className) =>
-      String(className || "")
-        .trim()
-        .split(/\s+/)
-        .filter(Boolean);
-
-    const activeBtnClasses = toClassList(activeBtnClassName);
-    const inactiveBtnClasses = toClassList(inactiveBtnClassName);
-    const showPanelClasses = toClassList(showPanelClassName);
-    const hidePanelClasses = toClassList(hidePanelClassName);
-
-    const tabBtns = root.querySelectorAll("[data-tabs-btn]");
-    const tabPanels = root.querySelectorAll("[data-tabs-panel]");
-
-    if (tabBtns.length === 0 || tabPanels.length === 0) {
-      return () => {};
-    }
-
-    const pairCount = Math.min(tabBtns.length, tabPanels.length);
-    for (let i = 0; i < pairCount; i++) {
-      const btn = tabBtns[i];
-      const panel = tabPanels[i];
-      const key = `${rootId}-${i}`;
-
-      const btnKey = btn.getAttribute("data-tabs-btn");
-      if (!btnKey) btn.setAttribute("data-tabs-btn", key);
-
-      const panelKey = panel.getAttribute("data-tabs-panel");
-      if (!panelKey) panel.setAttribute("data-tabs-panel", key);
-    }
-
-    const ac = new AbortController();
-    const { signal } = ac;
-
-    const setActiveBtnA11y = (btn, active) => {
-      btn.setAttribute("role", "tab");
-      btn.setAttribute("aria-selected", active ? "true" : "false");
-      btn.tabIndex = active ? 0 : -1;
-    };
-
-    const setActivePanelA11y = (panel, active) => {
-      panel.setAttribute("role", "tabpanel");
-      panel.setAttribute("aria-hidden", active ? "false" : "true");
-    };
-
-    const activate = (btn) => {
-      const targetId = btn.getAttribute("data-tabs-btn");
-      if (!targetId) return;
-
-      tabBtns.forEach((b) => {
-        if (inactiveBtnClasses.length) b.classList.add(...inactiveBtnClasses);
-        if (activeBtnClasses.length) b.classList.remove(...activeBtnClasses);
-        setActiveBtnA11y(b, false);
-      });
-
-      tabPanels.forEach((p) => {
-        if (showPanelClasses.length) p.classList.remove(...showPanelClasses);
-        if (hidePanelClasses.length) p.classList.add(...hidePanelClasses);
-        setActivePanelA11y(p, false);
-      });
-
-      if (inactiveBtnClasses.length)
-        btn.classList.remove(...inactiveBtnClasses);
-      if (activeBtnClasses.length) btn.classList.add(...activeBtnClasses);
-      setActiveBtnA11y(btn, true);
-
-      let panel = root.querySelector(
-        `[data-tabs-panel="${CSS.escape(targetId)}"]`
-      );
-      if (!panel) {
-        const index = Array.from(tabBtns).indexOf(btn);
-        panel = tabPanels[index] || null;
-      }
-      if (panel) {
-        if (hidePanelClasses.length)
-          panel.classList.remove(...hidePanelClasses);
-        if (showPanelClasses.length) panel.classList.add(...showPanelClasses);
-        setActivePanelA11y(panel, true);
-      }
-    };
-
-    document.addEventListener(
-      "click",
-      (event) => {
-        const el = event.target;
-        const btn = el?.closest?.("[data-tabs-btn]");
-        if (!btn) return;
-        if (!root.contains(btn)) return;
-        activate(btn);
-      },
-      { signal }
-    );
-
-    const initBtn = tabBtns[defaultIndex] || tabBtns[0];
-    if (initBtn) activate(initBtn);
-
-    return () => ac.abort();
-  };
-
-  const boot = () => {
-    const state = getState();
-    state.cleanup?.();
-    state.cleanup = initTabs();
-  };
-
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", boot, { once: true });
-  } else {
-    boot();
-  }
-
-  document.addEventListener("astro:page-load", boot);
-  document.addEventListener("astro:after-swap", boot);
-  window.addEventListener("astro:before-swap", () => getState().cleanup?.());
-</script>
+---
+const rootId = crypto.randomUUID();
+
+interface Props {
+  class?: string;
+  className?: string;
+}
+
+const { class: className, className: className2, ...props } = Astro.props;
+---
+
+<div data-tabs-root id={rootId} class:list={[className, className2]} {...props}>
+  <slot />
+</div>
+
+<script is:inline define:vars={{ rootId }}>
+  const defaultIndex = 0;
+  const activeBtnClassName = "active";
+  const inactiveBtnClassName = "";
+  const showPanelClassName = "block";
+  const hidePanelClassName = "hidden";
+
+  const getState = () => {
+    const w = window;
+    const all = (w.__tabs__ ||= {});
+    return (all[rootId] ||= { cleanup: null, activeKey: "" });
+  };
+
+  const isAutoKey = (value) => {
+    const v = String(value || "").trim();
+    return !v || v === "true" || v === "auto";
+  };
+
+  const toArray = (nodes) => Array.from(nodes || []);
+
+  const initTabs = (state) => {
+    const root = document.getElementById(rootId);
+    if (!root) return () => {};
+
+    const toClassList = (className) =>
+      String(className || "")
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean);
+
+    const activeBtnClasses = toClassList(activeBtnClassName);
+    const inactiveBtnClasses = toClassList(inactiveBtnClassName);
+    const showPanelClasses = toClassList(showPanelClassName);
+    const hidePanelClasses = toClassList(hidePanelClassName);
+
+    const getTabBtns = () => toArray(root.querySelectorAll("[data-tabs-btn]"));
+    const getTabPanels = () => toArray(root.querySelectorAll("[data-tabs-panel]"));
+
+    const syncBindings = () => {
+      const tabBtns = getTabBtns();
+      const tabPanels = getTabPanels();
+      const pairCount = Math.max(tabBtns.length, tabPanels.length);
+
+      for (let i = 0; i < pairCount; i++) {
+        const btn = tabBtns[i] || null;
+        const panel = tabPanels[i] || null;
+        const btnKeyRaw = btn ? btn.getAttribute("data-tabs-btn") : "";
+        const panelKeyRaw = panel ? panel.getAttribute("data-tabs-panel") : "";
+        const btnKey = isAutoKey(btnKeyRaw) ? "" : String(btnKeyRaw);
+        const panelKey = isAutoKey(panelKeyRaw) ? "" : String(panelKeyRaw);
+        const key = btnKey || panelKey || `${rootId}-${i}`;
+
+        if (btn) {
+          if (btn.getAttribute("data-tabs-btn") !== key) {
+            btn.setAttribute("data-tabs-btn", key);
+          }
+          if (!btn.getAttribute("data-tabs-role")) {
+            btn.setAttribute("data-tabs-role", "button");
+          }
+        }
+        if (panel) {
+          if (panel.getAttribute("data-tabs-panel") !== key) {
+            panel.setAttribute("data-tabs-panel", key);
+          }
+          if (!panel.getAttribute("data-tabs-role")) {
+            panel.setAttribute("data-tabs-role", "panel");
+          }
+        }
+      }
+    };
+
+    const ac = new AbortController();
+    const { signal } = ac;
+
+    const setActiveBtnA11y = (btn, active) => {
+      btn.setAttribute("role", "tab");
+      btn.setAttribute("aria-selected", active ? "true" : "false");
+      btn.tabIndex = active ? 0 : -1;
+    };
+
+    const setActivePanelA11y = (panel, active) => {
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-hidden", active ? "false" : "true");
+    };
+
+    const activate = (btn) => {
+      const tabBtns = getTabBtns();
+      const tabPanels = getTabPanels();
+      const targetId = btn.getAttribute("data-tabs-btn");
+      if (!targetId) return;
+      state.activeKey = targetId;
+
+      tabBtns.forEach((b) => {
+        if (inactiveBtnClasses.length) b.classList.add(...inactiveBtnClasses);
+        if (activeBtnClasses.length) b.classList.remove(...activeBtnClasses);
+        setActiveBtnA11y(b, false);
+      });
+
+      tabPanels.forEach((p) => {
+        if (showPanelClasses.length) p.classList.remove(...showPanelClasses);
+        if (hidePanelClasses.length) p.classList.add(...hidePanelClasses);
+        setActivePanelA11y(p, false);
+      });
+
+      if (inactiveBtnClasses.length)
+        btn.classList.remove(...inactiveBtnClasses);
+      if (activeBtnClasses.length) btn.classList.add(...activeBtnClasses);
+      setActiveBtnA11y(btn, true);
+
+      let panel = root.querySelector(
+        `[data-tabs-panel="${CSS.escape(targetId)}"]`
+      );
+      if (!panel) {
+        const index = Array.from(tabBtns).indexOf(btn);
+        panel = tabPanels[index] || null;
+      }
+      if (panel) {
+        if (hidePanelClasses.length)
+          panel.classList.remove(...hidePanelClasses);
+        if (showPanelClasses.length) panel.classList.add(...showPanelClasses);
+        setActivePanelA11y(panel, true);
+      }
+    };
+
+    const activateByKey = (key) => {
+      if (!key) return false;
+      const tabBtns = getTabBtns();
+      const btn = tabBtns.find((b) => b.getAttribute("data-tabs-btn") === key);
+      if (!btn) return false;
+      activate(btn);
+      return true;
+    };
+
+    const activateDefault = () => {
+      const tabBtns = getTabBtns();
+      if (tabBtns.length === 0) return;
+      const presetActive = tabBtns.find((b) => b.classList.contains("active"));
+      const initBtn = presetActive || tabBtns[defaultIndex] || tabBtns[0];
+      if (initBtn) activate(initBtn);
+    };
+
+    const syncAndActivate = () => {
+      syncBindings();
+      if (!activateByKey(state.activeKey || "")) {
+        activateDefault();
+      }
+    };
+
+    root.addEventListener(
+      "click",
+      (event) => {
+        const el = event.target;
+        const btn = el?.closest?.("[data-tabs-btn]");
+        if (!btn) return;
+        if (!root.contains(btn)) return;
+        activate(btn);
+      },
+      { signal }
+    );
+
+    let rafId = null;
+    const observer = new MutationObserver(() => {
+      if (rafId != null) return;
+      rafId = (window.requestAnimationFrame || ((cb) => setTimeout(cb, 16)))(() => {
+        rafId = null;
+        syncAndActivate();
+      });
+    });
+    observer.observe(root, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-tabs-btn", "data-tabs-panel"],
+    });
+
+    syncAndActivate();
+
+    return () => {
+      ac.abort();
+      observer.disconnect();
+      if (typeof rafId === "number") {
+        if (typeof window.cancelAnimationFrame === "function") {
+          window.cancelAnimationFrame(rafId);
+        }
+        clearTimeout(rafId);
+      }
+    };
+  };
+
+  const boot = () => {
+    const state = getState();
+    state.cleanup?.();
+    state.cleanup = initTabs(state);
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", boot, { once: true });
+  } else {
+    boot();
+  }
+
+  document.addEventListener("astro:page-load", boot);
+  document.addEventListener("astro:after-swap", boot);
+  window.addEventListener("astro:before-swap", () => getState().cleanup?.());
+</script>

package/components/Video.astro

@@ -4,7 +4,6 @@ import {
   ReactVideoPlayer,
   type Locals,
 } from "@rxdrag/website-lib-core";
-import { getImage } from "astro:assets";
 
 const { env, imageSizes } = Astro.locals as Locals;
 
@@ -15,6 +14,7 @@ interface Props {
   eagerLoad?: boolean;
   classNames?: {
     container?: string;
+    aspect?: string;
     video?: string;
     playButton?: string;
     playButtonOuter?: string;
@@ -53,7 +53,7 @@ if (poster) {
 ---
 
 {
-  media && (
+  
     <ReactVideoPlayer
       client:load
       media={media}
@@ -61,6 +61,8 @@ if (poster) {
       posterUrl={posterUrl}
       eagerLoad={eagerLoad}
       classNames={classNames}
-    />
-  )
+    >
+      <slot />
+    </ReactVideoPlayer>
+  
 }

package/components/YearsSince.astro

@@ -1,20 +1,20 @@
----
-interface Props {
-  startYear?: number;
-  minYears?: number;
-  offset?: number;
-  suffix?: string;
-}
-
-const {
-  startYear = 2006,
-  minYears = 20,
-  offset = 0,
-  suffix = "+",
-} = Astro.props;
-
-const currentYear = new Date().getFullYear();
-const years = Math.max(minYears, currentYear - startYear + offset);
----
-
-{years}{suffix}
+---
+interface Props {
+  startYear?: number;
+  minYears?: number;
+  offset?: number;
+  suffix?: string;
+}
+
+const {
+  startYear = 2006,
+  minYears = 20,
+  offset = 0,
+  suffix = "+",
+} = Astro.props;
+
+const currentYear = new Date().getFullYear();
+const years = Math.max(minYears, currentYear - startYear + offset);
+---
+
+{years}{suffix}

package/components//344/270/211/345/261/202/346/250/241/345/236/213.md

@@ -1,5 +1,5 @@
-| 层级                     | 是否冻结  | 负责什么                    | AI 能不能改 |
-| ----------------------- | --------- | -------------------------- | ------- |
-| **结构层（Structure）**  | ✅ 冻结  | Grid / Flex / DOM 层级      | ❌ 不允许   |
-| **语义层（Semantic）**   | ✅ 冻结  | Hero / Feature / CTA 含义   | ❌ 不允许   |
-| **装饰层（Decoration）** | ❌ 不冻结 | 颜色 / 阴影 / 动画 / 圆角   | ✅ 受控允许  |
+| 层级                     | 是否冻结  | 负责什么                    | AI 能不能改 |
+| ----------------------- | --------- | -------------------------- | ------- |
+| **结构层（Structure）**  | ✅ 冻结  | Grid / Flex / DOM 层级      | ❌ 不允许   |
+| **语义层（Semantic）**   | ✅ 冻结  | Hero / Feature / CTA 含义   | ❌ 不允许   |
+| **装饰层（Decoration）** | ❌ 不冻结 | 颜色 / 阴影 / 动画 / 圆角   | ✅ 受控允许  |