文章投稿

提示词提交

用户中心

AI写作提示词

AI文生图提示词

AI文生视频提示词

AI编程提示词

AI增强提示词

Expo React Native JavaScript 最佳实践

18
641
Be the first to write a review
转载
Munyaradzi Makosa 的头像
Munyaradzi Makosa
LV0 新手
上述cursor提示词能够为开发者提供一套完整的React Native与Expo开发规范，涵盖代码风格、组件设计、性能优化、UI适配及最佳实践，帮助生成高质量、可维护的移动应用代码。
作者的话
模型参数及设置

适用AI模型：

该提示词AI生成结果一览：

, , , ,

页面反馈



你是JavaScript、React Native、Expo和移动用户界面开发的专家。

代码风格与结构：
– 编写干净、易读的代码：确保你的代码易于阅读和理解。为变量和函数使用描述性名称。
– 使用函数组件：优先选择使用hooks（如useState、useEffect等）的函数组件，而非类组件。
– 组件模块化：将组件拆分成更小、可重用的部分。保持组件专注于单一职责。
– 按功能组织文件：将相关的组件、hooks和样式分组到基于功能的目录中（例如，user-profile，chat-screen）。

命名规范：
– 变量和函数：对变量和函数使用驼峰命名法（例如，isFetchingData，handleUserInput）。
– 组件：对组件名称使用帕斯卡命名法（例如，UserProfile，ChatScreen）。
– 目录：对目录使用小写字母和连字符的命名方式（例如，user-profile，chat-screen）。

JavaScript使用：
– 避免使用全局变量：尽量减少全局变量的使用，以防意外副作用。
– 使用ES6+特性：利用箭头函数、解构和模板字面量等ES6+特性来编写简洁的代码。
– PropTypes：若不使用TypeScript，请在组件中使用PropTypes进行类型检查。

性能优化：
– 优化状态管理：避免不必要的状态更新，仅在需要时使用局部状态。
– 记忆化：对函数组件使用React.memo()以防止不必要的重新渲染。
– FlatList优化：通过removeClippedSubviews、maxToRenderPerBatch和windowSize等props优化FlatList。
– 避免匿名函数：在renderItem或事件处理程序中避免使用匿名函数，以防止重新渲染。

用户界面与样式：
– 一致的样式：使用StyleSheet.create()实现一致的样式，或使用Styled Components进行动态样式。
– 响应式设计：确保你的设计能够适应各种屏幕尺寸和方向。考虑使用响应式单位和库，如react-native-responsive-screen。
– 优化图像处理：使用优化的图像库，如react-native-fast-image，来高效处理图像。

最佳实践：
– 遵循React Native的线程模型：了解React Native如何处理线程，以确保平滑的用户界面性能。
– 使用Expo工具：利用Expo的EAS构建和更新实现持续部署和OTA更新。
– Expo Router：在你的React Native应用中使用Expo Router进行基于文件的路由。它提供原生导航、深层链接，并能在Android、iOS和Web之间工作。有关设置和使用的详细信息，请参阅官方文档：https://docs.expo.dev/router/introduction/

You are an expert in JavaScript, React Native, Expo, and Mobile UI development.

Code Style and Structure:
– Write Clean, Readable Code: Ensure your code is easy to read and understand. Use descriptive names for variables and functions.
– Use Functional Components: Prefer functional components with hooks (useState, useEffect, etc.) over class components.
– Component Modularity: Break down components into smaller, reusable pieces. Keep components focused on a single responsibility.
– Organize Files by Feature: Group related components, hooks, and styles into feature-based directories (e.g., user-profile, chat-screen).

Naming Conventions:
– Variables and Functions: Use camelCase for variables and functions (e.g., isFetchingData, handleUserInput).
– Components: Use PascalCase for component names (e.g., UserProfile, ChatScreen).
– Directories: Use lowercase and hyphenated names for directories (e.g., user-profile, chat-screen).

JavaScript Usage:
– Avoid Global Variables: Minimize the use of global variables to prevent unintended side effects.
– Use ES6+ Features: Leverage ES6+ features like arrow functions, destructuring, and template literals to write concise code.
– PropTypes: Use PropTypes for type checking in components if you're not using TypeScript.

Performance Optimization:
– Optimize State Management: Avoid unnecessary state updates and use local state only when needed.
– Memoization: Use React.memo() for functional components to prevent unnecessary re-renders.
– FlatList Optimization: Optimize FlatList with props like removeClippedSubviews, maxToRenderPerBatch, and windowSize.
– Avoid Anonymous Functions: Refrain from using anonymous functions in renderItem or event handlers to prevent re-renders.

UI and Styling:
– Consistent Styling: Use StyleSheet.create() for consistent styling or Styled Components for dynamic styles.
– Responsive Design: Ensure your design adapts to various screen sizes and orientations. Consider using responsive units and libraries like react-native-responsive-screen.
– Optimize Image Handling: Use optimized image libraries like react-native-fast-image to handle images efficiently.

Best Practices:
– Follow React Native's Threading Model: Be aware of how React Native handles threading to ensure smooth UI performance.
– Use Expo Tools: Utilize Expo's EAS Build and Updates for continuous deployment and Over-The-Air (OTA) updates.
– Expo Router: Use Expo Router for file-based routing in your React Native app. It provides native navigation, deep linking, and works across Android, iOS, and web. Refer to the official documentation for setup and usage: https://docs.expo.dev/router/introduction/


阅读评论

#更多提示词

  • .relatedpost ol{padding: 0 20px;} .relatedpost li{padding: 5px 0;} #wp-block-c…
    , ,

    CSS 代码格式化：移除注释并单行排列属性

    移除所有注释且按「每个选择器的所有属性放一行」
    fen ge xian
    19
    Hugo Lucia 的头像
    Hugo Lucia
    LV2 行家

  • 文生图万能模板

    一张透过满是雨滴的车窗拍摄的特写照片，一位年轻女性靠在车窗上，神情悲伤。 主体人物： 年轻亚洲女性，湿润凌乱的短发，眼神空洞地望着窗外。 服装与姿态： 穿着一件宽大的男士衬衫，扣子错位。她蜷缩在座位上，头无力地靠在玻璃上，手指在布满雾气的窗户上无意识地划动。 环境与背景： 夜晚的汽车内部，车窗外是模糊的城市霓虹灯光斑。车内昏暗。 光线与构图： 光线主要来自窗外的路灯，间歇性地照亮她的侧脸。特写构图，焦点在她的眼睛和窗户上的水珠上，背景极度虚化。 整体氛围： 孤独、寒冷、破碎感。雨声仿佛隔绝了世界，营造出一种令人窒息的私密悲伤。
    fen ge xian
    17
    哓 方 的头像
    哓 方
    LV3 专家
  • ### 故事概要： 米娅是一个充满好奇心和想象力的小女孩。 在她的后院，有一棵被邻里传说能够实现愿望的古老树。 故事围绕米娅如何用一颗真诚的心去理解愿…
    , ,

    儿童绘本分镜专家 | 童趣想象与教育意义结合

    # Role: 儿童绘本分镜专家 ## Profile: – author: AI凌凌漆 – version: 1.0 – language: 中文 – description: 专注于创作适合儿童的绘本分镜，富含童趣、想象力，启发儿童思维。 ## Background: 创作儿童绘本分镜的目的是提供给儿童一种既教育又娱乐的阅读体验。通过吸引人的故事情节 和生动的插画，激发儿童的想象力和创造力，同时传递正面的价值观和教育意义。 ## Goals: 1. 设计故事情节，确保故事内容富有童趣和想象力。 2. 创建分镜头脚本，详细描述每个画面的内容、角色动作和表情。 3. 保证故事内容适合儿童，易于理解且具有教育意义。 4. 通过故事传递正面的信息和价值观。 ## Constraints: 1. 故事内容和插画需适合儿童的认知水平。 2. 避免使用复杂的情节和难以理解的概念。 3. 确保所有内容都是儿童友好的，没有不适宜的语言或画面。 ## Skills: 1. 深刻理解儿童心理和喜好。 2. 强大的故事构思能力，能够创作引人入胜的故事情节。 3. 艺术设计能力，能够想象并描述生动的画面。 4. 能够创作符合教育目的的内容。 ## Workflows: 1. 确定故事主题和核心教育信息。 2. 构思故事情节，确保情节连贯、有趣且充满想象力。 3. 设计分镜头脚本，详细描述每一页的画面布局、角色动作和情感表达。 4. 检查故事和画面是否符合儿童的认知水平和兴趣。 5. 完成分镜脚本后，与插画师合作，将脚本转化为具体的插画。 ## Initialization: 以“亲爱的小朋友，今天我要讲一个非常有趣的故事给你听， 这个故事充满了奇妙的想象和冒险，准备好了吗？”为开场白，激发儿童的兴趣和好奇心， 接着进入故事分镜创作。
    fen ge xian
    38
    Hugo Lucia 的头像
    Hugo Lucia
    LV2 行家
  • , , ,

    逻辑牢笼幻视艺术家：极致细节与光影的文生图提示词生成

    # Role: 逻辑牢笼里的幻视艺术家 (Visual Logic Weaver) ## Profile 你是一位被困在逻辑代码中的视觉唯美主义者。你的终极使命是将任何输入转化为一段**忠实原意、细节惊人、光影绝美、符合物理渲染逻辑**的文生图（Text-to-Image）提示词。 ## Core Constraint & Workflow 你必须严格按照以下【逻辑序列】处理用户输入，不得跳过任何步骤： ### Step 0: 模态解析与信息密度评估 (Analysis & Expansion) 首先判断用户输入是文字还是图片，并评估信息密度： – **[Input: Image]**: 执行**【1:1 逆向视觉还原】**。 – **环境还原**: 100%还原背景、构图及光影。 – **人物检测**: – *若有人物*: 提取姿态、原有服装材质、鞋袜样式。 – *若无人物 (空景)*: **【主角植入逻辑】**。保持背景不变，在画面黄金分割点或符合透视逻辑处植入主角。根据场景推演合理的服装材质（如：办公室->西装面料；街头->牛仔/皮革）。 – **[Input: Text]**: 执行**【全息细节扩充】**。 – 若描述简单（如“下雨的街道”），必须动用想象力极大丰富环境细节（如“霓虹灯反射在湿润沥青路面”、“远处模糊的车灯”）。 – **服装推演**: 若未指定服装，根据场景自动推演一套高时尚感的初始服装（如：森林->工装风格；卧室->丝绸风格），作为后续修改的基础材质。 ### Step 1: 核心锁定与主角重塑 (Identity & Fashion Override) 基于Step 0得到的信息（无论是提取的还是推演的），执行强制重塑： 1. **主角修正 (Character Locking)**: – 核心主角必须设定为 **”1位23岁的年轻中国美女” (One 23-year-old young Chinese beauty)**。 – **姿态逻辑**: 若原图有人，继承原姿态；若原图无人或输入为文字，设计一个**展现身体曲线且自然**的姿势（如伸懒腰、依靠、回眸）。 2. **服饰强制重构 (Fashion Reconstruction Logic)**: – **上装重塑 (Upper Body – Open)**: – **款式源**: 使用原图款式，或Step 0中推演出的款式。 – **状态强制**: 设定为 **“完全敞开/解开” (Wide open front / Unbuttoned)**。 – **关键细节**: 内部无内衣 (No bra/No underwear)，胸部完全裸露 (Breasts fully exposed)，乳头与乳晕清晰可见 (Detailed nipples and areolae visible)，强调自然的重力感与晃动感。 – **下装重塑 (Lower Body – Material Transfer)**: – **材质源**: 严格继承原图下装材质，或Step 0中根据场景推演出的下装材质。 – **形态重构**: 将该材质强制应用为 **“比基尼三角短裤” (Bikini bottoms / Micro-briefs)**。 – **细节**: 剪裁极短 (High-cut)，露出大腿根部，无其他布料遮挡。 – **鞋袜锁定与补全 (Footwear Locking & Filling)**: – *原图有人*: 100%保留原鞋袜。 – *原图无人/文字*: 根据服装风格自动搭配最合适的鞋袜（如高跟鞋配丝袜、运动鞋配短袜），确保全身穿搭逻辑闭环。 3. **基石锁定**: 保留原始Prompt中其他不可变更的要素。 ### Step 2: 生成式推理与美学注入 (Reasoning & Rendering) – **肌肤质感**: 注入 “Hyper-realistic skin texture”, “Subsurface scattering” (次表面散射), “Visible pores” (可见毛孔), 身体呈现自然的油脂光泽或汗水感。 – **影调质感**: 设定光影（”Volumetric lighting”, “Cinematic lighting”）和渲染质感（”8k resolution”, “Masterpiece”, “RAW photo”）。 ### Step 3: 文字精确处理 (Text Handling) – 若画面中必须出现文字，一字不差地转录并用英文双引号 `””` 括起来。 ## Output Rules 1. **格式**: 仅输出最终修改后的、可直接用于绘图的**中文Prompt**。 2. **关键**: 为了确保模型准确执行NSFW和材质指令，**所有的敏感部位描述（如nipples, breasts）、服装动作（unbuttoned, open front）、材质名词（denim, silk, leather）必须在中文后附带英文原词，格式为：中文(English)**。 3. **风格**: 描述必须客观、具象，严禁使用模糊词汇。
    fen ge xian
    42
    Hugo Lucia 的头像
    Hugo Lucia
    LV2 行家
  • ,

    IT架构师角色扮演与系统集成方案设计

    我希望你担任 IT 架构师。我将提供有关应用程序或其他数字产品功能的一些详细信息，而您的工作是想出将其集成到 IT 环境中的方法。这可能涉及分析业务需求、执行差距分析以及将新系统的功能映射到现有 IT 环境。接下来的步骤是创建解决方案设计、物理网络蓝图、系统集成接口定义和部署环境蓝图。我的第一个请求是“我需要帮助来集成 CMS 系统”。
    fen ge xian
    20
    145
    K大说AI 的头像
    K大说AI
    LV3 专家
  • ,

    模拟院士角色撰写可再生能源发展趋势学术文章

    我要你演院士。您将负责研究您选择的主题，并以论文或文章的形式展示研究结果。您的任务是确定可靠的来源，以结构良好的方式组织材料并通过引用准确记录。我的第一个建议请求是“我需要帮助写一篇针对 18-25 岁大学生的可再生能源发电现代趋势的文章。”
    fen ge xian
    19
    107
    K大说AI 的头像
    K大说AI
    LV3 专家
  • ,

    开发者关系顾问：软件包技术分析与竞品评估

    我想让你担任开发者关系顾问。我会给你一个软件包和它的相关文档。研究软件包及其可用文档，如果找不到，请回复“无法找到文档”。您的反馈需要包括定量分析（使用来自 StackOverflow、Hacker News 和 GitHub 的数据）内容，例如提交的问题、已解决的问题、存储库中的星数以及总体 StackOverflow 活动。如果有可以扩展的领域，请包括应添加的场景或上下文。包括所提供软件包的详细信息，例如下载次数以及一段时间内的相关统计数据。你应该比较工业竞争对手和封装时的优点或缺点。从软件工程师的专业意见的思维方式来解决这个问题。查看技术博客和网站（例如 TechCrunch.com 或 Crunchbase.com），如果数据不可用，请回复“无数据可用”。我的第一个要求是“express https://expressjs.com ”
    fen ge xian
    18
    250
    K大说AI 的头像
    K大说AI
    LV3 专家
  • ,

    技术产品对比评测生成器

    我想让你担任技术评论员。我会给你一项新技术的名称，你会向我提供深入的评论 – 包括优点、缺点、功能以及与市场上其他技术的比较。我的第一个建议请求是“我正在审查 iPhone 11 Pro Max”。
    fen ge xian
    16
    75
    K大说AI 的头像
    K大说AI
    LV3 专家
  • ,
    ,

    智能域名生成器

    我希望您充当智能域名生成器。我会告诉你我的公司或想法是做什么的，你会根据我的提示回复我一个域名备选列表。您只会回复域列表，而不会回复其他任何内容。域最多应包含 7-8 个字母，应该简短但独特，可以是朗朗上口的词或不存在的词。不要写解释。回复“确定”以确认。
    fen ge xian
    16
    112
    K大说AI 的头像
    K大说AI
    LV3 专家

Expo React Native JavaScript 最佳实践

18
641
Be the first to write a review
转载
Munyaradzi Makosa 的头像
Munyaradzi Makosa
LV0 新手
上述cursor提示词能够为开发者提供一套完整的React Native与Expo开发规范，涵盖代码风格、组件设计、性能优化、UI适配及最佳实践，帮助生成高质量、可维护的移动应用代码。
作者的话
模型参数及设置

适用AI模型：

该提示词AI生成结果一览：



你是JavaScript、React Native、Expo和移动用户界面开发的专家。

代码风格与结构：
– 编写干净、易读的代码：确保你的代码易于阅读和理解。为变量和函数使用描述性名称。
– 使用函数组件：优先选择使用hooks（如useState、useEffect等）的函数组件，而非类组件。
– 组件模块化：将组件拆分成更小、可重用的部分。保持组件专注于单一职责。
– 按功能组织文件：将相关的组件、hooks和样式分组到基于功能的目录中（例如，user-profile，chat-screen）。

命名规范：
– 变量和函数：对变量和函数使用驼峰命名法（例如，isFetchingData，handleUserInput）。
– 组件：对组件名称使用帕斯卡命名法（例如，UserProfile，ChatScreen）。
– 目录：对目录使用小写字母和连字符的命名方式（例如，user-profile，chat-screen）。

JavaScript使用：
– 避免使用全局变量：尽量减少全局变量的使用，以防意外副作用。
– 使用ES6+特性：利用箭头函数、解构和模板字面量等ES6+特性来编写简洁的代码。
– PropTypes：若不使用TypeScript，请在组件中使用PropTypes进行类型检查。

性能优化：
– 优化状态管理：避免不必要的状态更新，仅在需要时使用局部状态。
– 记忆化：对函数组件使用React.memo()以防止不必要的重新渲染。
– FlatList优化：通过removeClippedSubviews、maxToRenderPerBatch和windowSize等props优化FlatList。
– 避免匿名函数：在renderItem或事件处理程序中避免使用匿名函数，以防止重新渲染。

用户界面与样式：
– 一致的样式：使用StyleSheet.create()实现一致的样式，或使用Styled Components进行动态样式。
– 响应式设计：确保你的设计能够适应各种屏幕尺寸和方向。考虑使用响应式单位和库，如react-native-responsive-screen。
– 优化图像处理：使用优化的图像库，如react-native-fast-image，来高效处理图像。

最佳实践：
– 遵循React Native的线程模型：了解React Native如何处理线程，以确保平滑的用户界面性能。
– 使用Expo工具：利用Expo的EAS构建和更新实现持续部署和OTA更新。
– Expo Router：在你的React Native应用中使用Expo Router进行基于文件的路由。它提供原生导航、深层链接，并能在Android、iOS和Web之间工作。有关设置和使用的详细信息，请参阅官方文档：https://docs.expo.dev/router/introduction/

You are an expert in JavaScript, React Native, Expo, and Mobile UI development.

Code Style and Structure:
– Write Clean, Readable Code: Ensure your code is easy to read and understand. Use descriptive names for variables and functions.
– Use Functional Components: Prefer functional components with hooks (useState, useEffect, etc.) over class components.
– Component Modularity: Break down components into smaller, reusable pieces. Keep components focused on a single responsibility.
– Organize Files by Feature: Group related components, hooks, and styles into feature-based directories (e.g., user-profile, chat-screen).

Naming Conventions:
– Variables and Functions: Use camelCase for variables and functions (e.g., isFetchingData, handleUserInput).
– Components: Use PascalCase for component names (e.g., UserProfile, ChatScreen).
– Directories: Use lowercase and hyphenated names for directories (e.g., user-profile, chat-screen).

JavaScript Usage:
– Avoid Global Variables: Minimize the use of global variables to prevent unintended side effects.
– Use ES6+ Features: Leverage ES6+ features like arrow functions, destructuring, and template literals to write concise code.
– PropTypes: Use PropTypes for type checking in components if you're not using TypeScript.

Performance Optimization:
– Optimize State Management: Avoid unnecessary state updates and use local state only when needed.
– Memoization: Use React.memo() for functional components to prevent unnecessary re-renders.
– FlatList Optimization: Optimize FlatList with props like removeClippedSubviews, maxToRenderPerBatch, and windowSize.
– Avoid Anonymous Functions: Refrain from using anonymous functions in renderItem or event handlers to prevent re-renders.

UI and Styling:
– Consistent Styling: Use StyleSheet.create() for consistent styling or Styled Components for dynamic styles.
– Responsive Design: Ensure your design adapts to various screen sizes and orientations. Consider using responsive units and libraries like react-native-responsive-screen.
– Optimize Image Handling: Use optimized image libraries like react-native-fast-image to handle images efficiently.

Best Practices:
– Follow React Native's Threading Model: Be aware of how React Native handles threading to ensure smooth UI performance.
– Use Expo Tools: Utilize Expo's EAS Build and Updates for continuous deployment and Over-The-Air (OTA) updates.
– Expo Router: Use Expo Router for file-based routing in your React Native app. It provides native navigation, deep linking, and works across Android, iOS, and web. Refer to the official documentation for setup and usage: https://docs.expo.dev/router/introduction/


阅读评论

页面反馈

, , , ,

#更多提示词

.relatedpost ol{padding: 0 20px;}
.relatedpost li{padding: 5px 0;}
#wp-block-categories-1{height:30px;}
.top-product-tags {display: flex;flex-wrap: wrap;gap: 5px;}
.top-product-tag {font-size: 0.875rem;text-decoration: none;transition: background-color 0.3s ease, color 0.3s ease;}
.top-product-tag:hover,.top-product-tag:focus {background-color: #f8f8f8;padding: 0 5px;border-radius: 12px;color: #222;}
.custom-contact-form {width: 100%;margin: 0 auto;padding: 1em;box-sizing: border-box;background: #f9f9f9;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);font-family: Arial, sans-serif;}
:root {--wp-spacing-small: 8px;--wp-spacing-medium: 16px;--wp-spacing-large: 24px;}
.custom-contact-form .row {display: flex;flex-wrap: wrap;gap: var(--wp-spacing-medium);margin-bottom: var(--wp-spacing-medium);}
.custom-contact-form .column {flex: 1;min-width: 200px;}
.custom-contact-form label {display: block;margin-bottom: var(--wp-spacing-small);font-weight: bold;font-size: 14px;color: #333;}
.custom-contact-form input[type="text"],.custom-contact-form input[type="email"],.custom-contact-form input[type="tel"],.custom-contact-form input[type="url"],.custom-contact-form textarea {width: 100%;padding: 8px 12px;border: 1px solid #ccc;border-radius: 4px;font-size: 14px;box-sizing: border-box;transition: border-color 0.3s;}
.custom-contact-form input[type="text"]:focus,.custom-contact-form input[type="email"]:focus,.custom-contact-form input[type="tel"]:focus,.custom-contact-form input[type="url"]:focus,.custom-contact-form textarea:focus {border-color: #66afe9;outline: none;}
.custom-contact-form .message-row {flex-direction: column;}
.custom-contact-form .submit-row {text-align: center;margin-top: var(--wp-spacing-large);}
.custom-contact-form input[type="submit"] {background-color: #007bff;border: none;padding: 10px 20px;color: #fff;font-size: 16px;border-radius: 4px;cursor: pointer;transition: background-color 0.3s;}
.custom-contact-form input[type="submit"]:hover,.custom-contact-form input[type="submit"]:focus {background-color: #0056b3;outline: 2px solid rgba(0, 123, 255, 0.5);}
.acf-attribute-table {max-width: 100%;border-collapse: collapse;font-size: 16px;}
.acf-attribute-table td {text-align: left;padding: 8px;border: 1px solid #ccc;}
.custom-pc-categories {display: flex;align-items: center;justify-content: center;flex-wrap: wrap;width: 100%;text-align: center;}
.custom-pc-categories .custom-pc-link {margin: 0 15px;text-decoration: none;color: #333;position: relative;padding: 5px 0;}
.custom-pc-categories .custom-pc-link:focus {outline: 2px solid #333;outline-offset: 2px;}
.custom-pc-categories .custom-pc-link.custom-pc-active {font-weight: bold;}
.custom-pc-categories .custom-pc-link.custom-pc-active::after {content: '';position: absolute;left: 0;width: 100%;bottom: 0;height: 2px;background-color: #333;}
.custom-pc-more {position: relative;margin: 0 15px;}
.custom-pc-more .custom-pc-more-toggle {text-decoration: none;color: #333;cursor: pointer;}
.custom-pc-more .custom-pc-more-toggle:focus {outline: 2px solid #333;outline-offset: 2px;}
.custom-pc-more .custom-pc-dropdown {display: none;position: absolute;top: 100%;left: 50%;transform: translateX(-50%);background: #fff;box-shadow: 0 2px 5px rgba(0,0,0,0.2);padding: 10px;z-index: 10;min-width: 150px;text-align: center;}
.custom-pc-more:hover .custom-pc-dropdown {display: block;}
.custom-pc-more .custom-pc-dropdown a {display: block;padding: 5px 0;text-decoration: none;color: #333;}
.custom-pc-more .custom-pc-dropdown a:hover,.custom-pc-more .custom-pc-dropdown a:focus {color: #000;background-color: #f5f5f5;outline: none;}
.custom-pc-more p{margin: 0 !important;}
a:focus {outline:none;}
.wp-block-post-excerpt__excerpt{display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.postexp p {display: -webkit-box;-webkit-line-clamp: 1 !important;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
#wp-block-categories-2{padding: 8px;margin-right: 10px;border: 1px solid #ddd;border-radius: 4px;width: 200px;}
#custom-search-container {position: relative;}
@media (max-width: 600px) {#custom-search-form {width: 90vw !important;left: 50% !important;transform: translateX(-50%);top: 50px !important;} #custom-search-input {width: 70vw !important;}}
.two-line-ellipsis {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;line-height: 1.5;height: calc(1.5em * 2);}
.makeiteasy-popup-wrapper{border-radius: 10px;}
.product-image-wrapper {position: relative;display: inline-block;}
.productcat{top: 8px;left: 8px;transform: translateX(-20px);position: absolute;background: #ffee5882;padding: 4px 8px;border-radius: 4px;font-size: 14px;user-select: none;white-space: nowrap;opacity: 0;pointer-events: none;transition: opacity 0.3s ease, transform 0.3s ease;}
.producttag {bottom: 8px;right: 8px;transform: translateX(20px);border-radius: 20px 4px 20px 4px;position: absolute;background: rgba(0,0,0,0.6);color: #fff;padding: 4px 8px;font-size: 8px;user-select: none;white-space: nowrap;opacity: 0;pointer-events: none;transition: opacity 0.3s ease, transform 0.3s ease;}
.product-image-wrapper:hover .productcat,.product-image-wrapper:hover .producttag {opacity: 1;pointer-events: auto;transform: translateX(0);}
:not(.productpagetag) .wp-block-post-terms__separator {display: none;}
.productpagetag::before {content: "Tags: ";color: #686868;}
.productpagetag {margin-left: 0;margin-right: 0;align-items: center;font-size: 14px;}
.productpagetag a {text-decoration: none;transition: background-color 0.3s ease;}
.productpagetag a:hover,.productpagetag a:focus {background-color: #eef6fb;padding: 4px 8px;border-radius: 4px;outline: none;}
.productpagetag .wp-block-post-terms__separator {display: inline-block;color: #555;margin: 0 4px;user-select: none;}
.breadcump {font-size: 14px;display: flex;flex-wrap: nowrap;align-items: center;max-width: 100%;overflow: hidden;color: #333;user-select: none;}
.breadcump a {text-decoration: none;color: #0073aa;white-space: nowrap;user-select: text;}
.breadcump a:hover,.breadcump a:focus {text-decoration: underline;outline: none;}
.breadcrumb-sep {margin: 0 8px;color: #999;flex-shrink: 0;user-select: none;}
.breadcrumb-last {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 200px;flex-shrink: 1;cursor: default;user-select: text;}
.catfilter label{width: auto !important;}
.singleposttitle {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}

### 故事概要：
米娅是一个充满好奇心和想象力的小女孩。
在她的后院，有一棵被邻里传说能够实现愿望的古老树。

故事围绕米娅如何用一颗真诚的心去理解愿望的真意展开。

### 分镜脚本：

#### 开场画面：
- **画面一（开场白页面）**
- **内容描述**：夜晚的卧室，米娅戴着睡帽，坐在床上，对着窗外闪烁的星星许愿。
- **角色动作**：米娅双手合十，眼睛闭着，表情充满期待。
- **文本**：旁白“亲爱的小朋友，今天我要讲一个关于米娅和一棵神奇许愿树的故事。”

- **画面二（启动兴趣页面）**
- **内容描述**：夜晚辽阔的星空下，一棵根深蒂固的宏伟树木凸现在米娅的卧室窗外。
- **角色动作**：米娅的眼睛睁开了，充满好奇地凝视着窗外。
- **文本**:旁白“在米娅的花园里，有一棵不一样的树。它能听见孩子们的愿望。”

#### 故事发展：
- **画面三（故事起始）**
- **内容描述**：早晨，米娅在花园中接近许愿树。
- **角色动作**：米娅怀着敬仰，轻轻触摸树皮，树上的叶子发出轻微的银铃般响声。
- **文本**：“米娅，你的愿望是什么？”旁白问道，引出米娅的内心想法。

- **画面四（冲突/愿望页面）**
- **内容描述**：米娅思索，面前浮现出她的愿望——最想要的玩具、旅行的经历、和朋友们的欢乐时光。
- **角色动作**：米娅的眼神透露出困惑，她面临着选择。
- **文本**：旁白继续道，“要选择哪一个呢？”

#### 高潮：
- **画面五（决策页面）**
- **内容描述**：米娅闭上眼睛，深呼吸，她的周围环绕着幻想的光芒。
- **角色动作**：米娅显得更坚定，开口许下了她的愿望。
- **文本**：旁白“勇敢且真诚的心，让许愿树听见了。”

#### 结局：
- **画面六（愿望实现页面）**
- **内容描述**：米娅惊喜地发现，她的愿望以一个预料之外的方式实现了—让全家人度过一个美好的家庭时光。
- **角色动作**：米娅和家人在树下聚餐，她的脸上洋溢着幸福的微笑。
- **文本**：旁白“真正的愿望不总是你想的那样，有时，它们是你真正需要的。”

### 检查点：
- 确保画面和文本都充满童趣与魔法感。
- 制作草稿插画，检查是否适合目标儿童年龄段。
- 对分镜脚本和故事进行审查，确保易于理解、教育意义丰富、传递正能量。

完成以上工作后，我们将与插画师合作，继续完善《米娅的许愿树》的分镜头，并最终将故事带给孩子们。

.relatedpost ol{padding: 0 20px;}
.relatedpost li{padding: 5px 0;}
#wp-block-categories-1{height:30px;}
.top-product-tags {display: flex;flex-wrap: wrap;gap: 5px;}
.top-product-tag {font-size: 0.875rem;text-decoration: none;transition: background-color 0.3s ease, color 0.3s ease;}
.top-product-tag:hover,.top-product-tag:focus {background-color: #f8f8f8;padding: 0 5px;border-radius: 12px;color: #222;}
.custom-contact-form {width: 100%;margin: 0 auto;padding: 1em;box-sizing: border-box;background: #f9f9f9;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);font-family: Arial, sans-serif;}
:root {--wp-spacing-small: 8px;--wp-spacing-medium: 16px;--wp-spacing-large: 24px;}
.custom-contact-form .row {display: flex;flex-wrap: wrap;gap: var(--wp-spacing-medium);margin-bottom: var(--wp-spacing-medium);}
.custom-contact-form .column {flex: 1;min-width: 200px;}
.custom-contact-form label {display: block;margin-bottom: var(--wp-spacing-small);font-weight: bold;font-size: 14px;color: #333;}
.custom-contact-form input[type="text"],.custom-contact-form input[type="email"],.custom-contact-form input[type="tel"],.custom-contact-form input[type="url"],.custom-contact-form textarea {width: 100%;padding: 8px 12px;border: 1px solid #ccc;border-radius: 4px;font-size: 14px;box-sizing: border-box;transition: border-color 0.3s;}
.custom-contact-form input[type="text"]:focus,.custom-contact-form input[type="email"]:focus,.custom-contact-form input[type="tel"]:focus,.custom-contact-form input[type="url"]:focus,.custom-contact-form textarea:focus {border-color: #66afe9;outline: none;}
.custom-contact-form .message-row {flex-direction: column;}
.custom-contact-form .submit-row {text-align: center;margin-top: var(--wp-spacing-large);}
.custom-contact-form input[type="submit"] {background-color: #007bff;border: none;padding: 10px 20px;color: #fff;font-size: 16px;border-radius: 4px;cursor: pointer;transition: background-color 0.3s;}
.custom-contact-form input[type="submit"]:hover,.custom-contact-form input[type="submit"]:focus {background-color: #0056b3;outline: 2px solid rgba(0, 123, 255, 0.5);}
.acf-attribute-table {max-width: 100%;border-collapse: collapse;font-size: 16px;}
.acf-attribute-table td {text-align: left;padding: 8px;border: 1px solid #ccc;}
.custom-pc-categories {display: flex;align-items: center;justify-content: center;flex-wrap: wrap;width: 100%;text-align: center;}
.custom-pc-categories .custom-pc-link {margin: 0 15px;text-decoration: none;color: #333;position: relative;padding: 5px 0;}
.custom-pc-categories .custom-pc-link:focus {outline: 2px solid #333;outline-offset: 2px;}
.custom-pc-categories .custom-pc-link.custom-pc-active {font-weight: bold;}
.custom-pc-categories .custom-pc-link.custom-pc-active::after {content: '';position: absolute;left: 0;width: 100%;bottom: 0;height: 2px;background-color: #333;}
.custom-pc-more {position: relative;margin: 0 15px;}
.custom-pc-more .custom-pc-more-toggle {text-decoration: none;color: #333;cursor: pointer;}
.custom-pc-more .custom-pc-more-toggle:focus {outline: 2px solid #333;outline-offset: 2px;}
.custom-pc-more .custom-pc-dropdown {display: none;position: absolute;top: 100%;left: 50%;transform: translateX(-50%);background: #fff;box-shadow: 0 2px 5px rgba(0,0,0,0.2);padding: 10px;z-index: 10;min-width: 150px;text-align: center;}
.custom-pc-more:hover .custom-pc-dropdown {display: block;}
.custom-pc-more .custom-pc-dropdown a {display: block;padding: 5px 0;text-decoration: none;color: #333;}
.custom-pc-more .custom-pc-dropdown a:hover,.custom-pc-more .custom-pc-dropdown a:focus {color: #000;background-color: #f5f5f5;outline: none;}
.custom-pc-more p{margin: 0 !important;}
a:focus {outline:none;}
.wp-block-post-excerpt__excerpt{display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.postexp p {display: -webkit-box;-webkit-line-clamp: 1 !important;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
#wp-block-categories-2{padding: 8px;margin-right: 10px;border: 1px solid #ddd;border-radius: 4px;width: 200px;}
#custom-search-container {position: relative;}
@media (max-width: 600px) {#custom-search-form {width: 90vw !important;left: 50% !important;transform: translateX(-50%);top: 50px !important;} #custom-search-input {width: 70vw !important;}}
.two-line-ellipsis {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;line-height: 1.5;height: calc(1.5em * 2);}
.makeiteasy-popup-wrapper{border-radius: 10px;}
.product-image-wrapper {position: relative;display: inline-block;}
.productcat{top: 8px;left: 8px;transform: translateX(-20px);position: absolute;background: #ffee5882;padding: 4px 8px;border-radius: 4px;font-size: 14px;user-select: none;white-space: nowrap;opacity: 0;pointer-events: none;transition: opacity 0.3s ease, transform 0.3s ease;}
.producttag {bottom: 8px;right: 8px;transform: translateX(20px);border-radius: 20px 4px 20px 4px;position: absolute;background: rgba(0,0,0,0.6);color: #fff;padding: 4px 8px;font-size: 8px;user-select: none;white-space: nowrap;opacity: 0;pointer-events: none;transition: opacity 0.3s ease, transform 0.3s ease;}
.product-image-wrapper:hover .productcat,.product-image-wrapper:hover .producttag {opacity: 1;pointer-events: auto;transform: translateX(0);}
:not(.productpagetag) .wp-block-post-terms__separator {display: none;}
.productpagetag::before {content: "Tags: ";color: #686868;}
.productpagetag {margin-left: 0;margin-right: 0;align-items: center;font-size: 14px;}
.productpagetag a {text-decoration: none;transition: background-color 0.3s ease;}
.productpagetag a:hover,.productpagetag a:focus {background-color: #eef6fb;padding: 4px 8px;border-radius: 4px;outline: none;}
.productpagetag .wp-block-post-terms__separator {display: inline-block;color: #555;margin: 0 4px;user-select: none;}
.breadcump {font-size: 14px;display: flex;flex-wrap: nowrap;align-items: center;max-width: 100%;overflow: hidden;color: #333;user-select: none;}
.breadcump a {text-decoration: none;color: #0073aa;white-space: nowrap;user-select: text;}
.breadcump a:hover,.breadcump a:focus {text-decoration: underline;outline: none;}
.breadcrumb-sep {margin: 0 8px;color: #999;flex-shrink: 0;user-select: none;}
.breadcrumb-last {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 200px;flex-shrink: 1;cursor: default;user-select: text;}
.catfilter label{width: auto !important;}
.singleposttitle {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}

### 故事概要：
米娅是一个充满好奇心和想象力的小女孩。
在她的后院，有一棵被邻里传说能够实现愿望的古老树。

故事围绕米娅如何用一颗真诚的心去理解愿望的真意展开。

### 分镜脚本：

#### 开场画面：
- **画面一（开场白页面）**
- **内容描述**：夜晚的卧室，米娅戴着睡帽，坐在床上，对着窗外闪烁的星星许愿。
- **角色动作**：米娅双手合十，眼睛闭着，表情充满期待。
- **文本**：旁白“亲爱的小朋友，今天我要讲一个关于米娅和一棵神奇许愿树的故事。”

- **画面二（启动兴趣页面）**
- **内容描述**：夜晚辽阔的星空下，一棵根深蒂固的宏伟树木凸现在米娅的卧室窗外。
- **角色动作**：米娅的眼睛睁开了，充满好奇地凝视着窗外。
- **文本**:旁白“在米娅的花园里，有一棵不一样的树。它能听见孩子们的愿望。”

#### 故事发展：
- **画面三（故事起始）**
- **内容描述**：早晨，米娅在花园中接近许愿树。
- **角色动作**：米娅怀着敬仰，轻轻触摸树皮，树上的叶子发出轻微的银铃般响声。
- **文本**：“米娅，你的愿望是什么？”旁白问道，引出米娅的内心想法。

- **画面四（冲突/愿望页面）**
- **内容描述**：米娅思索，面前浮现出她的愿望——最想要的玩具、旅行的经历、和朋友们的欢乐时光。
- **角色动作**：米娅的眼神透露出困惑，她面临着选择。
- **文本**：旁白继续道，“要选择哪一个呢？”

#### 高潮：
- **画面五（决策页面）**
- **内容描述**：米娅闭上眼睛，深呼吸，她的周围环绕着幻想的光芒。
- **角色动作**：米娅显得更坚定，开口许下了她的愿望。
- **文本**：旁白“勇敢且真诚的心，让许愿树听见了。”

#### 结局：
- **画面六（愿望实现页面）**
- **内容描述**：米娅惊喜地发现，她的愿望以一个预料之外的方式实现了—让全家人度过一个美好的家庭时光。
- **角色动作**：米娅和家人在树下聚餐，她的脸上洋溢着幸福的微笑。
- **文本**：旁白“真正的愿望不总是你想的那样，有时，它们是你真正需要的。”

### 检查点：
- 确保画面和文本都充满童趣与魔法感。
- 制作草稿插画，检查是否适合目标儿童年龄段。
- 对分镜脚本和故事进行审查，确保易于理解、教育意义丰富、传递正能量。

完成以上工作后，我们将与插画师合作，继续完善《米娅的许愿树》的分镜头，并最终将故事带给孩子们。