weifuwu 0.51.1 → 0.52.0

package/dist/client/index.js

@@ -536,6 +536,7 @@ function createApp() {
   let _rendering = false;
   let _dirtyBatch = /* @__PURE__ */ new Set();
   let _dirtyScheduled = false;
+  const _mediaRegistry = /* @__PURE__ */ new Map();
   function renderByIds(ids) {
     if (_rendering) return;
     _rendering = true;
@@ -635,6 +636,63 @@ function createApp() {
             if (selfId) ctx.ui.dirty([selfId]);
           });
         },
+        /**
+         * 响应式媒体查询：注册监听，值变化时自动 dirty
+         *
+         * 用法：
+         *   const $ = ctx.ui.$()
+         *   ctx.ui.useMedia('(max-width: 640px)', (v) => { $.isMobile = v })
+         *
+         * callback 会立即执行一次（取当前值），之后在变化时再次执行
+         */
+        useMedia: function(query, callback) {
+          const selfId = getSelfId(this);
+          const key = `media:${selfId}:${query}`;
+          if (!_mediaRegistry.has(key)) {
+            const mql = window.matchMedia(query);
+            callback(mql.matches);
+            const handler = (e) => callback(e.matches);
+            mql.addEventListener("change", handler);
+            _mediaRegistry.set(key, { mql, handler });
+          }
+        },
+        /**
+         * 响应式断点：注册命名断点监听，值变化时自动 dirty
+         *
+         * 用法：
+         *   const $ = ctx.ui.$()
+         *   ctx.ui.useBreakpoint((vp) => { $.vp = vp })
+         *   // vp: 'mobile' | 'tablet' | 'desktop'
+         *
+         * 自定义断点：
+         *   ctx.ui.useBreakpoint(
+         *     { narrow: '(max-width: 480px)', wide: '(min-width: 1200px)' },
+         *     (vp) => { $.size = vp }
+         *   )
+         */
+        useBreakpoint: function(bpsOrCallback, callback) {
+          const bps = typeof bpsOrCallback === "function" ? { mobile: "(max-width: 639px)", tablet: "(min-width: 640px) and (max-width: 1023px)", desktop: "(min-width: 1024px)" } : bpsOrCallback;
+          const cb = typeof bpsOrCallback === "function" ? bpsOrCallback : callback;
+          const selfId = getSelfId(this);
+          const key = `bp:${selfId}`;
+          function evaluate() {
+            for (const [name, query] of Object.entries(bps)) {
+              if (window.matchMedia(query).matches) return name;
+            }
+            return Object.keys(bps)[0] ?? "";
+          }
+          if (!_mediaRegistry.has(key)) {
+            cb(evaluate());
+            const handlers = [];
+            for (const query of Object.values(bps)) {
+              const mql = window.matchMedia(query);
+              const handler = () => cb(evaluate());
+              mql.addEventListener("change", handler);
+              handlers.push(() => mql.removeEventListener("change", handler));
+            }
+            _mediaRegistry.set(key, { mql: null, handler: null });
+          }
+        },
         /** 注册组件实例的自定义 ID（用于跨组件精准刷新） */
         selfId: function(name) {
           if (typeof name !== "string" || !name) {

package/dist/components/style.css

@@ -110,6 +110,12 @@
   --wf-accent-color: var(--wf-color-primary);
   --wf-caret-color: var(--wf-color-primary);
 
+  /* ── 断点 ── */
+  --wf-bp-sm: 640px;
+  --wf-bp-md: 768px;
+  --wf-bp-lg: 1024px;
+  --wf-bp-xl: 1280px;
+
   /* ── 透明度 ── */
   --wf-opacity-disabled: 0.5;
   --wf-opacity-overlay: 0.4;
@@ -314,6 +320,9 @@ code {
   flex-direction: column;
   gap: var(--wf-gap, var(--wf-gap-md));
 }
+@media (min-width: 640px) { .wf-stack\@sm { flex-direction: row; align-items: var(--wf-align, center); } }
+@media (min-width: 768px) { .wf-stack\@md { flex-direction: row; align-items: var(--wf-align, center); } }
+@media (min-width: 1024px) { .wf-stack\@lg { flex-direction: row; align-items: var(--wf-align, center); } }
 
 /* stack-reverse — 纵向反向堆叠 */
 .wf-stack-reverse {
@@ -321,6 +330,9 @@ code {
   flex-direction: column-reverse;
   gap: var(--wf-gap, var(--wf-gap-md));
 }
+@media (min-width: 640px) { .wf-stack-reverse\@sm { flex-direction: row-reverse; align-items: var(--wf-align, center); } }
+@media (min-width: 768px) { .wf-stack-reverse\@md { flex-direction: row-reverse; align-items: var(--wf-align, center); } }
+@media (min-width: 1024px) { .wf-stack-reverse\@lg { flex-direction: row-reverse; align-items: var(--wf-align, center); } }
 
 /* row — 横向排列 */
 .wf-row {
@@ -329,6 +341,9 @@ code {
   gap: var(--wf-gap, var(--wf-gap-md));
   align-items: var(--wf-align, center);
 }
+@media (min-width: 640px) { .wf-row\@sm { flex-direction: row; flex-wrap: wrap; } }
+@media (min-width: 768px) { .wf-row\@md { flex-direction: row; flex-wrap: wrap; } }
+@media (min-width: 1024px) { .wf-row\@lg { flex-direction: row; flex-wrap: wrap; } }
 
 /* row-reverse — 横向反向排列 */
 .wf-row-reverse {
@@ -338,6 +353,9 @@ code {
   gap: var(--wf-gap, var(--wf-gap-md));
   align-items: var(--wf-align, center);
 }
+@media (min-width: 640px) { .wf-row-reverse\@sm { flex-direction: row-reverse; flex-wrap: wrap; } }
+@media (min-width: 768px) { .wf-row-reverse\@md { flex-direction: row-reverse; flex-wrap: wrap; } }
+@media (min-width: 1024px) { .wf-row-reverse\@lg { flex-direction: row-reverse; flex-wrap: wrap; } }
 
 /* split — 两端展开 */
 .wf-split {
@@ -486,11 +504,17 @@ code {
 .wf-hidden {
   display: none;
 }
+@media (min-width: 640px) { .wf-hidden\@sm { display: none; } }
+@media (min-width: 768px) { .wf-hidden\@md { display: none; } }
+@media (min-width: 1024px) { .wf-hidden\@lg { display: none; } }
 
 /* block — 块级显示 */
 .wf-block {
   display: block;
 }
+@media (min-width: 640px) { .wf-block\@sm { display: block; } }
+@media (min-width: 768px) { .wf-block\@md { display: block; } }
+@media (min-width: 1024px) { .wf-block\@lg { display: block; } }
 
 /* inline — 行内显示 */
 .wf-inline {

package/dist/layout/weifuwu-layout.css

@@ -110,6 +110,12 @@
   --wf-accent-color: var(--wf-color-primary);
   --wf-caret-color: var(--wf-color-primary);
 
+  /* ── 断点 ── */
+  --wf-bp-sm: 640px;
+  --wf-bp-md: 768px;
+  --wf-bp-lg: 1024px;
+  --wf-bp-xl: 1280px;
+
   /* ── 透明度 ── */
   --wf-opacity-disabled: 0.5;
   --wf-opacity-overlay: 0.4;
@@ -314,6 +320,9 @@ code {
   flex-direction: column;
   gap: var(--wf-gap, var(--wf-gap-md));
 }
+@media (min-width: 640px) { .wf-stack\@sm { flex-direction: row; align-items: var(--wf-align, center); } }
+@media (min-width: 768px) { .wf-stack\@md { flex-direction: row; align-items: var(--wf-align, center); } }
+@media (min-width: 1024px) { .wf-stack\@lg { flex-direction: row; align-items: var(--wf-align, center); } }
 
 /* stack-reverse — 纵向反向堆叠 */
 .wf-stack-reverse {
@@ -321,6 +330,9 @@ code {
   flex-direction: column-reverse;
   gap: var(--wf-gap, var(--wf-gap-md));
 }
+@media (min-width: 640px) { .wf-stack-reverse\@sm { flex-direction: row-reverse; align-items: var(--wf-align, center); } }
+@media (min-width: 768px) { .wf-stack-reverse\@md { flex-direction: row-reverse; align-items: var(--wf-align, center); } }
+@media (min-width: 1024px) { .wf-stack-reverse\@lg { flex-direction: row-reverse; align-items: var(--wf-align, center); } }
 
 /* row — 横向排列 */
 .wf-row {
@@ -329,6 +341,9 @@ code {
   gap: var(--wf-gap, var(--wf-gap-md));
   align-items: var(--wf-align, center);
 }
+@media (min-width: 640px) { .wf-row\@sm { flex-direction: row; flex-wrap: wrap; } }
+@media (min-width: 768px) { .wf-row\@md { flex-direction: row; flex-wrap: wrap; } }
+@media (min-width: 1024px) { .wf-row\@lg { flex-direction: row; flex-wrap: wrap; } }
 
 /* row-reverse — 横向反向排列 */
 .wf-row-reverse {
@@ -338,6 +353,9 @@ code {
   gap: var(--wf-gap, var(--wf-gap-md));
   align-items: var(--wf-align, center);
 }
+@media (min-width: 640px) { .wf-row-reverse\@sm { flex-direction: row-reverse; flex-wrap: wrap; } }
+@media (min-width: 768px) { .wf-row-reverse\@md { flex-direction: row-reverse; flex-wrap: wrap; } }
+@media (min-width: 1024px) { .wf-row-reverse\@lg { flex-direction: row-reverse; flex-wrap: wrap; } }
 
 /* split — 两端展开 */
 .wf-split {
@@ -486,11 +504,17 @@ code {
 .wf-hidden {
   display: none;
 }
+@media (min-width: 640px) { .wf-hidden\@sm { display: none; } }
+@media (min-width: 768px) { .wf-hidden\@md { display: none; } }
+@media (min-width: 1024px) { .wf-hidden\@lg { display: none; } }
 
 /* block — 块级显示 */
 .wf-block {
   display: block;
 }
+@media (min-width: 640px) { .wf-block\@sm { display: block; } }
+@media (min-width: 768px) { .wf-block\@md { display: block; } }
+@media (min-width: 1024px) { .wf-block\@lg { display: block; } }
 
 /* inline — 行内显示 */
 .wf-inline {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "weifuwu",
   "type": "module",
-  "version": "0.51.1",
+  "version": "0.52.0",
   "description": "AI SaaS framework — (req, ctx) => Response",
   "exports": {
     ".": {