大家好，我是ReAvid，是Hotkey CheatSheet网页的作者。Hotkey CheatSheet 是一个快捷键网页大全，灵感来自鼠标垫。因为我本身是一位爱折腾，喜欢研究一些效率工具的人。所以这个网页的初步构想就有了，有了想法就立马开始行动，着手开发了。
技术选型
对于独立开发者而言，技术选型很简单，自己熟悉哪个技术，或者想用刚刚学到的技术都可以。我很熟悉Java领域的技术栈，但我这里使用了NextJS全栈框架，对应的详细选择如下
- 主要技术栈：React、NextJS、TypeScript
- UI组件：shadcn/ui、tailwindcss
- ORM：Prisma
- DB：PostgreSQL
- 状态管理：jotai
- 国际化：next-intl
- AI：Coze
- 主题：next-themes
大的技术选型就以上这些，还有一些零散的，比如cookie，swr之类的，其实就是看自己喜好了。
数据库设计
Hotkey CheatSheet 主要有两个维度的数据
- App：主要记录App的名称、描述、所属公司等。
- 每个App对应的快捷键：主要记录快捷键、所属平台、对应的指令。
一个App自然对应多个快捷键，所以上面两个模型应该是一对多关系。按照这个思路，两个比较重要的表结构如下：
App表
| 字段名 | 类型 | 描述 |
|---|---|---|
| id | String | 应用ID，主键，默认使用cuid生成，32位可变字符 |
| name | String | 应用名称，32位可变字符 |
| slug | String | 应用短链接，唯一，32位可变字符 |
| iconSvg | String | 应用图标SVG |
| website | String | 应用网站 |
| author | String | 作者名称，32位可变字符 |
| description | String | 应用描述 |
| isHot | Boolean | 是否热门，默认为false |
| createTime | DateTime | 创建时间，默认为当前时间 |
AppHotKey表
| 字段名 | 类型 | 描述 |
|---|---|---|
| id | String | 热键ID，主键，默认使用cuid生成，32位可变字符 |
| appId | String | 关联的应用ID，32位可变字符 |
| appSlug | String | 关联的应用短链接，32位可变字符 |
| os | OSEnum(Windows, MacOS, Linux) | 操作系统枚举类型 |
| category | String | 快捷键分类，64位可变字符 |
| hotkey | String | 热键组合（JSON数组） |
| action | String | 热键动作描述 |
| createTime | DateTime | 创建时间，默认为当前时间 |
| isShow | Boolean | 是否显示，默认为true |
还有一些其他的表，比如Cateogry、AppCategory表，这些表不是重点，这里就看一下基本模型。
model Category {
id String @id @default(cuid()) @db.VarChar(32)
name String
AppCategory AppCategory[]
@@map("category")
}
model AppCategory {
appId String @map("app_id") @db.VarChar(32)
categoryId String @map("category_id") @db.VarChar(32)
App App @relation(fields: [appId], references: [id])
Category Category @relation(fields: [categoryId], references: [id])
@@id([appId, categoryId], name: "id")
@@map("app_category")
}
其中AppCategory是中间表，因为App 和 Category，我这里设计成多对多关系，需要一张中间表维护。
主要的业务逻辑表就是这些，很简单。
