如何在OneTimeSecret项目中自定义Web界面

OneTimeSecret是一个开源的临时秘密分享服务，开发者经常需要对其Web界面进行自定义修改。本文将详细介绍如何修改项目中的Logo、文本、颜色方案以及支付相关功能，帮助开发者快速完成界面定制。

开发环境准备

首先需要搭建开发环境，确保能够实时预览修改效果：

1. 安装项目依赖

pnpm install

2. 启动开发服务器

pnpm dev

3. 同时启动Ruby主服务器（另一个终端窗口）

RACK_ENV=development bundle exec thin -R config.ru -p 3000 start

这种双服务器模式可以实现前端代码的热重载，任何对src目录下文件的修改都会自动反映在浏览器中。

修改Logo和文本

Logo替换

项目Logo位于src/components/layout/MastHead.vue组件中，开发者可以：

1. 直接替换src/assets/img/onetime-logo-v3-xl.svg文件（保持原文件名）
2. 或者修改组件的src属性指向新的Logo文件路径

文本修改

项目使用了Vue i18n国际化方案，文本内容存储在src/locales/en.json等语言文件中。修改方式有两种：

1. 编辑对应语言文件中的翻译键值
2. 直接替换模板中的国际化标签为静态文本

调整颜色方案

项目使用Tailwind CSS作为样式框架，颜色配置集中在tailwind.config.ts文件中。修改步骤：

1. 打开配置文件找到brand相关颜色定义
2. 使用在线工具生成完整的色阶（50-900）
3. 替换原有颜色值但保持变量名不变

禁用支付功能

如需移除首页的支付相关横幅，有两种方式：

1. 直接删除Homepage.vue中的<HomepagePlansCTA />组件引用
2. 通过配置文件全局禁用：

:site:
  :plans:
    :enabled: false

或者设置环境变量PLANS_ENABLED=false

修改页面标题和图标

这些基础配置位于Ruby服务器的模板文件中：

1. 页面标题：修改templates/web/partial/head.html中的title标签
2. Favicon：替换public目录下的图标文件并清除浏览器缓存

生产环境部署

完成修改后，执行构建命令生成生产环境代码：

pnpm build

构建产物将输出到dist目录，可直接用于生产部署或Docker镜像构建。

常见问题解决

1. 修改不生效：确保修改的是源文件而非构建产物，构建文件会在每次构建时重新生成
2. 图标缓存：浏览器会强缓存favicon，开发时需要禁用缓存或强制刷新
3. 样式问题：Tailwind配置修改后需要重启开发服务器

通过以上步骤，开发者可以轻松完成OneTimeSecret项目的界面定制，打造符合自身需求的外观和功能。