Feedback Fin 开源项目教程

1. 项目目录结构及介绍

Feedback Fin 的项目目录结构如下：

feedbackfin/
├── .husky/                    # Husky 配置目录，用于在提交前运行钩子脚本
├── src/                       # 源代码目录
│   ├── generate-form-html.js  # 生成表单 HTML 的脚本
│   ├── index.ts               # TypeScript 入口文件
│   └── ...                    # 其他源代码文件
├── types/                     # 类型定义目录
├── .gitignore                 # Git 忽略文件列表
├── .prettierrc                # Prettier 配置文件
├── LICENSE                    # 开源协议文件
├── README.md                  # 项目说明文件
├── package.json               # 项目配置文件
├── test.html                  # 测试 HTML 文件
└── tsconfig.json              # TypeScript 配置文件

• .husky/: 包含用于执行代码风格检查和格式化的 Git 钩子脚本。
• src/: 存放项目的所有 TypeScript 源代码。
• types/: 包含类型定义的文件，用于 TypeScript 的类型检查。
• .gitignore: 指定 Git 忽略跟踪的文件和目录。
• .prettierrc: Prettier 的配置文件，用于统一代码风格。
• LICENSE: 开源项目的协议文件，本项目采用 MIT 协议。
• README.md: 项目说明文件，介绍项目的使用方法和功能。
• package.json: 包含项目信息和脚本，用于管理项目依赖和执行任务。
• test.html: 用于测试 Feedback Fin 插件的 HTML 文件。
• tsconfig.json: TypeScript 的配置文件。

2. 项目的启动文件介绍

项目的启动主要是通过 HTML 文件中引入 Feedback Fin 的 JavaScript 文件来实现的。以下是一个基本的启动示例：

<!-- 在 HTML 文件中引入 Feedback Fin -->
<script src="https://unpkg.com/feedbackfin@^1" defer></script>

在上述代码中，通过 <script> 标签引入了 Feedback Fin 的脚本文件。defer 属性确保脚本在文档解析完毕后才执行。

3. 项目的配置文件介绍

Feedback Fin 的主要配置是通过 window.feedbackfin.config 对象来实现的。以下是一些基本配置的示例：

<script>
  // 配置 Feedback Fin
  window.feedbackfin = {
    config: {
      // 设置接收反馈信息的 webhook URL
      url: 'https://rowy-hooks.run.app/wh/...',

      // 设置用户信息，可选
      user: {
        name: '用户名',
        email: '用户@example.com'
      },

      // 是否禁用错误提示，默认为 false
      disableErrorAlert: false
    }
  };
</script>

在这个配置中，url 是必须的，它指定了 Feedback Fin 发送反馈信息的目标地址。user 对象可以包含用户的名字和邮箱，它们会被作为表单的一部分提交。disableErrorAlert 用于控制是否显示错误提示。

通过上述的配置，就可以在网页上使用 Feedback Fin 来收集用户反馈了。