Petal Components 开源项目使用手册

---

1. 项目目录结构及介绍

Petal Components 是一套专为 Phoenix 框架开发者设计的 HEEX 组件库，旨在简化美观的网页应用构建过程。以下是对核心目录结构的概览：

• lib: 包含所有组件的实现代码。

  • petal_components: 核心模块，按功能分为不同的模块如 Avatar, Modal, Table 等。
  • petal_components_web: 相关的Web特定逻辑或集成部分。

• assets: 通常包括静态资源，但在这个上下文中，Petal Components可能依赖于此来提供客户端JavaScript支持（例如Alpine.js）。

• config: 配置文件所在目录，可以在此找到如何设置错误翻译函数等配置项的示例。

• test: 单元测试和集成测试代码，确保各组件按预期工作。

• .gitignore, mix.exs, README.md: 标准Git忽略文件、项目配置文件以及项目的读我文档，是任何Elixir项目的标准组成部分。

2. 项目的启动文件介绍

在 Petal Components 作为依赖被其他项目引入时，其自身并不直接启动一个应用。但在你的 Phoenix 项目中，通过在lib/your_app/application.ex文件中加入对use PetalComponents的调用，你可以启用并导入所有Petal Components。虽然“启动文件”直接指代的是Phoenix应用的这个配置文件，Petal Components的启动体验更多地体现在将其添加到你的项目依赖并通过混入相应模块的方式来“启动”使用它的能力。

3. 项目的配置文件介绍

Petal Components 的主要配置位于你的 Phoenix 应用中的相关地方，而非项目本身直接提供一个单独的配置文件。配置通常是通过config/config.exs或特定环境的配置文件进行的。要配置Petal Components，你需要添加相应的选项到你的应用程序配置中，比如设置错误翻译函数。示例配置如下：

config :petal_components, :error_translator_function, YourApp.Web.ErrorHelpers.translate_error

这行配置指示Petal Components使用提供的函数进行表单错误的翻译。此外，根据官方说明，关于CSS配置，可能需要调整TailwindCSS的配置以指定扫描Petal Components库中的类，但具体配置细节需在你的Tailwind配置文件(tailwind.config.js)中完成。

通过这种方式，Petal Components让你能够定制化其集成方式，从而满足不同项目的具体需求，而不直接控制一个启动流程或拥有独立的配置文件。