个人知识库
个人知识库
个人知识库web页面
基于 Vue 3 + TypeScript + Ant Design Vue + Tailwind CSS + Pinia 构建的个人知识库管理系统前端。
src/
├── api/ # API 接口定义
│ └── index.ts
├── assets/ # 静态资源
│ └── main.css # 全局样式
├── components/ # 组件
│ └── layout/ # 布局组件
│ ├── HeaderBar.vue # 顶部导航栏
│ ├── IconSidebar.vue # 左侧图标栏
│ ├── NavSidebar.vue # 左侧导航栏
│ └── ContentArea.vue # 内容区域
├── router/ # 路由配置
│ └── index.ts
├── stores/ # Pinia 状态管理
│ ├── app.ts # 应用状态（标签页等）
│ ├── knowledge.ts # 知识库状态
│ └── user.ts # 用户状态
├── utils/ # 工具函数
│ └── axios.ts # Axios 封装
├── views/ # 页面视图
│ └── KnowledgeView.vue
├── App.vue # 根组件
└── main.ts # 入口文件
pnpm install
pnpm dev
pnpm build
pnpm preview
创建 .env 文件（可选）：
VITE_API_BASE_URL=http://localhost:3000/api
API 接口定义在 src/api/index.ts 中，包括：
知识库相关: knowledgeBaseApi
getPersonalKnowledgeBases() - 获取个人知识库getSharedKnowledgeBases() - 获取共享知识库getKnowledgeBaseDetail(id) - 获取知识库详情getKnowledgeBaseContent(id) - 获取知识库内容createKnowledgeBase(data) - 创建知识库updateKnowledgeBase(id, data) - 更新知识库deleteKnowledgeBase(id) - 删除知识库文件相关: fileApi
uploadFile(formData) - 上传文件uploadFolder(formData) - 上传文件夹对话相关: chatApi
sendMessage(data) - 发送消息getChatHistory(knowledgeBaseId) - 获取对话历史用户相关: userApi
getUserInfo() - 获取用户信息login(data) - 登录logout() - 登出管理应用级别的状态：
管理知识库相关状态：
管理用户相关状态：
src/views/ 创建新的 Vue 组件src/router/index.ts 中添加路由配置src/api/index.ts 中添加接口定义src/components/ 创建组件文件src/assets/main.css
<style scoped>
.env 文件中配置，默认使用 http://localhost:3000/api
