vite-react-ts

介绍

这是一个使用Vite、React和TypeScript搭建的前端项目，用于构建个人知识管理系统（PKMS）。

TODO

• [] 前端的前后台一体设计
• [] 后端的前后台一体设计

Chrome插件

• [] 将分类和链接数据扩展出公共和个人：方便聚焦个人数据，但数据仍然是整体的，个人数据会放入公共库，而公共库也可以被个人引用

中后台

• [] 设计中后台的界面，包括分类、链接、笔记、知识图谱、AI助手等
• [] 设计中后台的接口，包括分类、链接、笔记、知识图谱、AI助手等

参考资料

课程地址： 【【地表最强系列】React Hooks 基础入门视频教程-哔哩哔哩】 https://b23.tv/7aakt9s

相关技术栈研究

• Ant Design: https://ant.design/
• Vite: https://vitejs.dev/
• React: https://reactjs.org/
• TypeScript: https://www.typescriptlang.org/
• ESLint: https://eslint.org/
• Prettier: https://prettier.io/
• Husky: https://typicode.github.io/husky/#/
• Lint-staged: https://github.com/okonet/lint-staged

可视化框架

AntV: https://antv.antgroup.com/

G2: 统计图表
S2: 多维表格
G6: 关系图
X6: 流程图
L7: 地图
F2: 移动统计图
F6: 移动关系图
F7: 移动地图

软件架构

我的设计

• 前端项目：前后台的前端融合在一个项目中，以实现代码的完全复用
• 后端项目：前后台的接口也融合在一个项目中，实现代码复用的同时，对敏感的逻辑采用不同的实现

ChatGPT建议

下面是ChatGPT 3.5给出的建议，具有一定参考意义：

设计一个个人知识管理系统（PKM），并集成AI能力，是一项挑战性的任务，但也是提升个人效率和学习体验的绝佳方式。以下是一些步骤和建议，希望能帮助你开始这个项目：

1. 需求分析与规划

首先，明确你需要管理的知识类型和范围，比如技术、历史、数学等。然后决定你希望通过系统实现的主要功能，例如知识存储、检索、推荐、提醒复习等。

2. 选择合适的技术栈

• 前端：React, Vue, Angular等现代JavaScript框架可以帮助你构建一个交互式的用户界面。
• 后端：Node.js, Python (Django, Flask), Java (Spring Boot)等可以作为服务器端的技术选择。
• 数据库：根据数据的结构化程度，可以选择关系型数据库如PostgreSQL，或者非关系型数据库如MongoDB。
• AI集成：TensorFlow, PyTorch用于机器学习模型的开发；自然语言处理库如spaCy, NLTK用于处理文本数据。

3. 设计系统架构

• 用户界面：简洁明了的操作界面，方便用户添加、编辑、浏览知识条目。
• 知识存储：设计合理的数据结构来存储不同类型的知识。
• 知识检索：利用关键词搜索、分类浏览等功能快速找到所需信息。
• AI模块：利用机器学习算法实现智能推荐、自动分类等功能。

4. AI功能的实现

• 知识推荐：根据用户的学习历史和偏好，使用推荐算法（如协同过滤）提供个性化的学习内容。
• 自动化标签：使用自然语言处理技术自动识别文本的关键信息，为知识条目打上合适的标签。
• 智能提醒：基于用户的学习进度和记忆曲线，AI可以提醒用户复习即将遗忘的内容。

5. 开发与测试

按照设计好的架构逐步开发各个模块，并进行充分的测试以确保系统的稳定性和可用性。

6. 持续迭代与优化

根据实际使用情况，不断收集用户反馈，对系统进行迭代更新和功能优化。

7. 保护隐私与安全

确保系统中的个人数据安全，实施适当的数据加密和访问控制策略。

8. 文档与维护

编写详细的开发和使用文档，便于后续的维护和升级。

通过上述步骤，你可以构建一个既满足当前需求又具备一定扩展性的个人知识管理系统。随着技术的发展，你还可以考虑加入更多先进的AI功能，如语音识别输入、图像识别等，以进一步提升系统的实用性和互动性。

命名规范

组件

在 React 项目中，组件命名规范是非常重要的，它有助于代码的可读性和维护性。以下是一些关于 React 组件命名的最佳实践：

1. 组件命名应该清晰明了:

   • 使用描述性的名称，能够清晰地表达组件的作用和功能。
   • 避免使用模糊的名称，确保其他开发人员能够轻松理解组件的用途。

2. 组件命名应该使用大驼峰命名法:

   • 组件名称的每个单词首字母大写，单词之间没有下划线或连接符。
   • 例如：UserCard, ProductList, Header.

3. 避免与 HTML 元素冲突:

   • 避免使用与 HTML 元素相同的名称，以免造成混淆。例如，不要使用 div、span 等作为组件名称。

4. 使用前缀:

   • 对于特定类型的组件，可以使用前缀来标识，例如 AppHeader, UserList, ProductCard。
   • 前缀有助于快速识别组件所属的功能或类型。

5. 文件名与组件名称一致:

   • 组件的文件名应该与组件名称一致，使用相同的大驼峰命名法。
   • 这样可以方便开发人员快速定位和查找组件。

6. 避免缩写:

   • 尽量避免使用缩写，除非是广为人知的缩写，否则会降低代码的可读性。

7. 使用有意义的后缀:

   • 对于表示特定类型的组件，可以在名称中添加有意义的后缀，如 Button, List, Form 等。

示例：

// Good naming conventions
function UserProfile() {}
function ProductCard() {}
function HeaderMenu() {}

// Avoid using vague names
function Item() {}
function Box() {}

遵循这些最佳实践可以帮助你在 React 项目中建立清晰、一致的组件命名规范，提高代码质量和可维护性。

commit message格式

格式：git commit -m "[type] XXXX模块（XXXXX功能）"
示例：git commit -m "fix XXXX模块（XXXXX功能）"

Type：必选项，取值如下：

● init：初始化
● feat：新功能（feature）
● directory：工程目录调整
● build：构建工具
● dev：功能开发（feature development）
● fix：修补bug
● compliance：合规处理，标准化、规范化和最佳实践
● update：更新相对独立的外部(第三方)文件或代码引用
● delete：删除无效代码或文件
● docs：文档修改（documentation）
● style：格式（不影响代码运行的变动）
● change：指需求变更引发的调整
● optimize：优化代码（指程序员主动改善性的优化，非bug，非重大或颠覆性的调整）
● refactor：重构（对已有功能的重大或颠覆性的调整，非新增功能）
● merge：合并代码（代码冲突时，须注明冲突点）
● test：增加测试
● chore：构建过程、辅助工具的变动
● revert：用于撤销以前的 commit。（特殊情况）

安装教程

1. xxxx
2. xxxx
3. xxxx

使用说明

1. xxxx
2. xxxx
3. xxxx

问题记录

状态码

当前实现

当前返回值包含success，message，data三个字段，早期觉得处理多个code状态太复杂没必要，但目前发下如果缺乏明确的code状态，会导致前端处理逻辑存在bug，比如登录token失效时，所以需要增加code字段，并明确其含义。

{
  "success": true,
  "code": 200,
  "message": "success",
  "data": {
    // ...
  }
}

状态码规范

Rest API规范

REST API 状态码（HTTP Status Code）是用以标识请求处理的结果的一种机制。它们遵循一定的规范，用以表示请求的成功程度。以下是一些常见的状态码及其含义：

200 OK：请求已成功，且有 body 数据返回。
201 Created：请求已成功，并因此创建了一个新的资源。
204 No Content：请求已成功，但没有内容返回。
400 Bad Request：请求格式错误或无法处理请求。
401 Unauthorized：请求需要用户验证。
403 Forbidden：请求已经得到验证，但是访问是被禁止的。
404 Not Found：服务器无法找到请求的资源。
405 Method Not Allowed：请求行中的方法不允许对请求 URL 使用。
415 Unsupported Media Type：请求的格式不支持。
500 Internal Server Error：服务器遇到了意料之外的情况，不能完成请求。
503 Service Unavailable：服务器暂时不可用（可能是过载或维护）。

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list