@doubao-dev/plugin-app-dev 0.0.0-stage → 0.0.40-canary-dea0ddc73-20261026073950

package/dist/skills/doubao-plugin-app/references/frontend/lynx/patterns/responsive.md

@@ -0,0 +1,194 @@
+# 响应式设计
+
+在 Lynx 中实现响应式布局。
+
+## 使用 rem + vw 自动适配（推荐）
+
+> **推荐方案**：使用 `rem` 配合 `vw` 设置根字体大小。`rpx` 是 Lynx 特有单位，功能完整但缺乏 Web 兼容性。
+
+```css
+/* 在根元素设置基准字体大小 */
+page {
+  font-size: calc(100vw / 23.4375); /* 1rem = 16px @ 375px 宽度 */
+}
+
+/* 使用 rem 进行屏幕适配 */
+.container {
+  width: 100%; /* 全宽 */
+  padding: 2rem; /* 左右各 2rem ≈ 32px @ 375px */
+}
+
+.card {
+  width: 21.4rem; /* 约一半宽度，减去间距 */
+  margin-bottom: 1.5rem;
+}
+
+/* 字体大小 */
+.title {
+  font-size: 2.25rem; /* 约 18px @ 375px 屏幕 */
+}
+
+.body {
+  font-size: 1.75rem; /* 约 14px @ 375px 屏幕 */
+}
+```
+
+## 使用视口单位（vw/vh）
+
+⚠️ **注意**：Lynx **不支持** CSS `@media` 媒体查询。请使用视口单位实现流式布局。
+
+```css
+/* 使用 vw 代替 @media */
+.container {
+  display: flex;
+  flex-direction: column;
+  padding: 4vw; /* 随视口宽度自动调整 */
+}
+
+/* 大屏幕优化 */
+.sidebar {
+  width: 26vw; /* 约 200px @ 768px 宽度 */
+}
+
+.main {
+  flex: 1;
+}
+```
+
+## 响应式网格
+
+使用 Grid 布局配合百分比或 vw 单位：
+
+```css
+.grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: 1fr; /* 移动端：1列 */
+}
+
+/* 使用 CSS 变量 + 容器查询思路（如果支持） */
+```
+
+## Flex 响应式布局
+
+```css
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.flex-item {
+  flex: 1 1 40vw; /* 随视口宽度自动调整 */
+}
+```
+
+## 安全区域适配
+
+```css
+/* iPhone 刘海屏适配 */
+.safe-area {
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}
+
+/* 底部固定按钮 */
+.fixed-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding-bottom: env(safe-area-inset-bottom);
+  background-color: #fff;
+}
+```
+
+## JavaScript 动态响应式
+
+使用 JavaScript 监听视口变化并动态调整样式：
+
+```javascript
+// 获取视口尺寸
+const viewportWidth = window.screen.width || 375;
+const viewportHeight = window.screen.height || 667;
+
+// 根据视口宽度决定布局
+function getLayoutClass(width) {
+  if (width >= 1024) return 'desktop-layout';
+  if (width >= 768) return 'tablet-layout';
+  return 'mobile-layout';
+}
+
+// 应用到组件
+const layoutClass = getLayoutClass(viewportWidth);
+```
+
+配合条件渲染：
+
+```jsx
+<view className={isTablet ? 'tablet-layout' : 'mobile-layout'}>
+  {isTablet ? <Sidebar /> : null}
+  <MainContent />
+</view>
+```
+
+```css
+.tablet-layout {
+  display: flex;
+  flex-direction: row;
+}
+
+.mobile-layout {
+  display: flex;
+  flex-direction: column;
+}
+```
+
+## 响应式最佳实践
+
+1. **移动优先**: 先写移动端样式，再用 JavaScript 动态调整
+2. **使用 rem**: 优先使用 rem 进行屏幕适配（配合 vw 设置根字体大小）
+3. **使用视口单位**: 使用 vw/vh 实现流式布局
+4. **断点选择**（JavaScript 中处理）:
+   - 320px - 小屏手机
+   - 375px - iPhone 标准
+   - 414px - iPhone Plus
+   - 768px - iPad 竖屏
+   - 1024px - iPad 横屏
+5. **测试**: 在多种设备上测试
+
+## 常见陷阱
+
+### ❌ 不要使用 @media
+
+```css
+/* ❌ 不支持 - 不会生效 */
+@media (min-width: 768px) {
+  .container {
+    flex-direction: row;
+  }
+}
+```
+
+### ✅ 使用替代方案
+
+```css
+/* ✅ 使用 rem 和视口单位 */
+.container {
+  display: flex;
+  flex-direction: column;
+  padding: 4vw;
+}
+
+/* 在根元素设置基准字体大小 */
+page {
+  font-size: calc(100vw / 23.4375); /* 1rem = 16px @ 375px 宽度 */
+}
+```
+
+```javascript
+// ✅ 使用 JavaScript 动态调整
+const isWide = viewportWidth >= 768;
+```

package/dist/skills/doubao-plugin-app/references/frontend/lynx/patterns/theming.md

@@ -0,0 +1,143 @@
+# 主题和 CSS 变量
+
+使用 CSS 变量实现主题切换。
+
+## 定义 CSS 变量
+
+```css
+/* 默认主题（亮色） */
+:root {
+  /* 颜色 */
+  --color-primary: #ff351a;
+  --color-secondary: #00ebeb;
+  --color-background: #ffffff;
+  --color-surface: #f5f5f5;
+  --color-text: #333333;
+  --color-text-secondary: #666666;
+  --color-border: #e0e0e0;
+
+  /* 间距 */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+
+  /* 字体 */
+  --font-size-xs: 10px;
+  --font-size-sm: 12px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-xxl: 24px;
+
+  /* 圆角 */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-round: 50%;
+
+  /* 阴影 */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+```
+
+## 暗色主题
+
+```css
+/* 暗色主题 */
+[data-theme='dark'] {
+  --color-primary: #ff5c45;
+  --color-secondary: #33eeee;
+  --color-background: #1a1a2e;
+  --color-surface: #252540;
+  --color-text: #ffffff;
+  --color-text-secondary: #a0a0a0;
+  --color-border: #33334d;
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5);
+}
+```
+
+## 使用 CSS 变量
+
+```css
+/* 组件样式 */
+.button {
+  padding: var(--spacing-sm) var(--spacing-md);
+  background-color: var(--color-primary);
+  color: #ffffff;
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-md);
+  box-shadow: var(--shadow-sm);
+}
+
+.button-secondary {
+  background-color: var(--color-secondary);
+}
+
+.card {
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-md);
+}
+
+.title {
+  color: var(--color-text);
+  font-size: var(--font-size-xl);
+}
+
+.description {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-md);
+}
+```
+
+## 在 Lynx 中切换主题
+
+```jsx
+// ThemeProvider.jsx
+import { useState, useEffect } from '@lynx-js/react';
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState('light');
+
+  useEffect(() => {
+    // 设置主题属性
+    document.documentElement.setAttribute('data-theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <view className={`theme-wrapper ${theme}`}>
+      {children}
+      <view className="theme-toggle" bindtap={toggleTheme}>
+        <text>{theme === 'light' ? '🌙' : '☀️'}</text>
+      </view>
+    </view>
+  );
+}
+```
+
+## 最佳实践
+
+1. **命名规范**: 使用 `--category-property` 格式
+2. **分层定义**: 颜色、间距、字体分开定义
+3. **语义化**: 使用 `--color-primary` 而非 `--color-red`
+4. **默认值**: 始终提供默认值 `var(--prop, default)`
+
+```css
+.button {
+  /* 提供默认值 */
+  color: var(--button-color, var(--color-primary));
+  padding: var(--button-padding, var(--spacing-md));
+}
+```

package/dist/skills/doubao-plugin-app/references/frontend/lynx/quick-reference.md

@@ -0,0 +1,229 @@
+# Lynx CSS Quick Reference
+
+Quick reference for the most commonly used Lynx CSS and layout system features.
+
+## Layout System Cheat Sheet
+
+| Scenario                           | Recommended Display | Description                            |
+| ---------------------------------- | ------------------- | -------------------------------------- |
+| Simple list (performance priority) | `linear`            | Default layout, similar to Flex Column |
+| Flexible layout                    | `flex`              | Standard CSS Flexbox                   |
+| 2D grid                            | `grid`              | CSS Grid subset                        |
+| Relative positioning               | `relative`          | Android-style relative positioning     |
+
+## Display Types
+
+| Value      | Description                       | Version |
+| ---------- | --------------------------------- | ------- |
+| `none`     | Hide element                      | 1.0     |
+| `flex`     | Flexbox layout                    | 1.0     |
+| `grid`     | Grid layout                       | 1.0     |
+| `linear`   | Linear layout (default)           | 1.0     |
+| `relative` | Relative layout                   | 2.0     |
+| `block`    | Block layout (falls back to Flex) | 2.0     |
+| `auto`     | Automatic selection               | 2.0     |
+
+## Supported CSS Properties (Common)
+
+### Box Model
+
+```css
+width, height, min-width, min-height, max-width, max-height
+margin, margin-top, margin-right, margin-bottom, margin-left
+padding, padding-top, padding-right, padding-bottom, padding-left
+border, border-radius
+box-sizing (default: auto)
+```
+
+### Flex Layout
+
+```css
+display: flex
+flex-direction: row | column | row-reverse | column-reverse
+flex-wrap: wrap | nowrap | wrap-reverse
+flex-flow: <direction> <wrap>  /* shorthand */
+justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly | stretch  /* stretch: 2.1+ */
+align-items: flex-start | center | flex-end | stretch | baseline
+align-self: auto | flex-start | center | flex-end | stretch | baseline
+flex-grow, flex-shrink, flex-basis
+flex: <grow> <shrink> <basis>  /* shorthand */
+order
+gap, row-gap, column-gap
+```
+
+### Grid Layout (Subset)
+
+```css
+display: grid
+grid-template-columns, grid-template-rows
+grid-auto-columns, grid-auto-rows
+grid-column-start, grid-column-end
+grid-row-start, grid-row-end
+grid-column-span, grid-row-span
+gap, row-gap, column-gap
+grid-auto-flow: row | column | dense | row dense | column dense
+justify-items, justify-self
+align-items, align-self    /* 注意：使用 flex-start/flex-end 而非 start/end */
+```
+
+> ⚠️ **注意**: Lynx 不支持 `grid-column`、`grid-row`、`grid-area` 简写属性。请使用 `*-start/*-end` 替代。
+
+### Linear Layout (Lynx-Specific)
+
+```css
+display: linear
+linear-orientation: horizontal | vertical | row | column | row-reverse | column-reverse
+linear-direction: row | column | row-reverse | column-reverse  /* 2.2+ */
+linear-gravity: top | bottom | left | right | center | center-vertical | center-horizontal | start | end | space-between
+linear-layout-gravity: none | top | bottom | left | right | center | fill-vertical | fill-horizontal | stretch
+linear-cross-gravity: none | start | end | center | stretch
+linear-weight: <number>
+linear-weight-sum: <number>
+```
+
+### Relative Layout (Lynx-Specific)
+
+```css
+display: relative
+relative-id: <number>
+relative-align-top: <id> | parent
+relative-align-bottom: <id> | parent
+relative-align-left: <id> | parent
+relative-align-right: <id> | parent
+relative-align-inline-start: <id> | parent  /* RTL support */
+relative-align-inline-end: <id> | parent  /* RTL support */
+relative-top-of: <id>
+relative-bottom-of: <id>
+relative-left-of: <id>
+relative-right-of: <id>
+relative-inline-start-of: <id>  /* RTL support */
+relative-inline-end-of: <id>  /* RTL support */
+relative-center: none | vertical | horizontal | both
+```
+
+### Positioning
+
+```css
+position: relative | absolute | fixed | sticky top, right, bottom, left
+    inset-inline-start, inset-inline-end /* RTL support */ z-index;
+```
+
+> **⚠️ z-index Note**: In scrollable containers like `scroll-view` and `fold-view`, child elements with `z-index` may not follow scroll. **Solution**: Add `z-index: 0` to the parent container to establish the same stacking context.
+
+### Visual
+
+```css
+background, background-color, background-image
+background-size, background-position, background-repeat
+opacity
+transform: translate, scale, rotate
+```
+
+### Text
+
+```css
+color, font-size, font-weight, font-family, font-style
+line-height, text-align, text-decoration
+white-space: normal | nowrap
+text-overflow: clip | ellipsis
+```
+
+## Lynx vs Web CSS Key Differences
+
+| Web CSS                   | Lynx Support                     | Notes                                                |
+| ------------------------- | -------------------------------- | ---------------------------------------------------- |
+| `display: block`          | ✅ Supported (2.0+)              | Falls back to Flex/Linear                            |
+| `display: inline`         | ❌ Not supported                 | Use `<text>` component                               |
+| `display: inline-block`   | ❌ Not supported                 | Use Flex/Grid                                        |
+| `float`                   | ❌ Not supported                 | Use Flex/Grid                                        |
+| `position: static`        | ❌ Not supported                 | Use `position: relative`                             |
+| `box-sizing: content-box` | ⚠️ Supported but not default | Default is `border-box` (Web default is `content-box`) |
+| `min-content`             | ⚠️ Partial support               | Treated as 0px in flex-basis                         |
+| `max-content`             | ✅ Supported                     | Available                                            |
+| `fit-content`             | ✅ Supported                     | Available                                            |
+| Margin collapsing         | ❌ Not supported                 | Margins do not collapse                              |
+
+## Selector Support
+
+### Fully Supported (Parsed + Matched)
+
+```
+✅ Tag selectors: view, text, image
+✅ Class selectors: .class-name
+✅ ID selectors: #id-name
+✅ Descendant selectors: .parent .child
+✅ Child selectors: .parent > .child
+✅ Adjacent sibling: .prev + .next
+✅ General sibling: .prev ~ .sibling
+✅ Attribute selectors: [type="text"]
+✅ Pseudo-classes: :hover, :active, :focus, :not(), :root
+✅ Pseudo-elements: ::placeholder, ::selection
+```
+
+### Not Supported (Parsed but NOT Matched)
+
+```
+❌ Structural pseudo-classes: :first-child, :last-child, :nth-child()
+❌ Pseudo-elements: ::before, ::after
+```
+
+> **Note:** These selectors are recognized by the CSS parser but lack matching implementation in the selector engine. They will not apply styles.
+
+## Unit Support
+
+```
+✅ px - Pixels
+✅ % - Percentage
+✅ vw, vh - Viewport units
+✅ rem - Root element font size (recommended for responsive)
+✅ em - Relative font units
+⚠️ rpx - Responsive pixels (Lynx-specific, lacks web compatibility)
+❌ cm, mm, in, pt, pc - Physical units not supported
+```
+
+**Responsive Adaptation (Recommended)**:
+
+```css
+/* Set base font size on root element */
+page {
+  font-size: calc(100vw / 23.4375); /* 1rem = 16px @ 375px */
+}
+
+/* Use rem for responsive sizing */
+.container {
+  padding: 2rem;
+  font-size: 1rem;
+}
+```
+
+## CSS Function Support
+
+### calc() - Partial Support
+
+- ✅ **Supported in:** Length properties (width, height, margin, padding, flex-basis, etc.)
+- ❌ **Not supported in:** Enum properties (flex-direction, justify-content, align-items, etc.), colors, or numbers
+
+Example:
+
+```css
+/* ✅ Works */
+width: calc(100% - 20px);
+margin: calc(var(--spacing) * 2);
+
+/* ❌ Does NOT work */
+flex-direction: calc(row); /* Enum property */
+color: calc(#ff0000); /* Color property */
+```
+
+### var() - Full Support
+
+```css
+/* Works in all properties */
+color: var(--primary-color);
+width: var(--sidebar-width);
+```
+
+### env() - Partial Support
+
+- ✅ **Supported:** `safe-area-inset-*` for notched devices
+- ❌ **Not supported:** Other environment variables