# personal-knowledge-web **Repository Path**: its-liu-xiaodi_admin/personal-knowledge-web ## Basic Information - **Project Name**: personal-knowledge-web - **Description**: 个人知识库web页面 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2025-11-15 - **Last Updated**: 2025-11-16 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 个人知识库前端项目 基于 Vue 3 + TypeScript + Ant Design Vue + Tailwind CSS + Pinia 构建的个人知识库管理系统前端。 ## 技术栈 - **框架**: Vue 3 + TypeScript - **UI 组件库**: Ant Design Vue 4.x - **样式**: Tailwind CSS - **状态管理**: Pinia - **路由**: Vue Router - **HTTP 客户端**: Axios - **图标库**: Font Awesome - **构建工具**: Vite ## 项目结构 ``` 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 # 入口文件 ``` ## 快速开始 ### 安装依赖 ```bash pnpm install ``` ### 开发模式 ```bash pnpm dev ``` ### 构建生产版本 ```bash pnpm build ``` ### 预览生产构建 ```bash pnpm preview ``` ## 环境配置 创建 `.env` 文件（可选）： ```env VITE_API_BASE_URL=http://localhost:3000/api ``` ## 功能特性 ### 已实现功能 - ✅ 响应式布局设计 - ✅ 顶部导航栏（标签页管理） - ✅ 左侧图标栏 - ✅ 左侧导航栏（个人知识库、共享知识库） - ✅ 知识库内容展示 - ✅ 对话/问答区域 - ✅ Axios 封装（请求/响应拦截器） - ✅ Pinia 状态管理 - ✅ 路由配置 ### 主要组件 #### HeaderBar（顶部导航栏） - Logo 和首页链接 - 标签页管理（切换、关闭、新增） - 分享和历史按钮 #### IconSidebar（左侧图标栏） - 用户头像 - 知识库图标 - 添加、分享、通知、历史等快捷操作 #### NavSidebar（左侧导航栏） - 个人知识库列表 - 共享知识库列表（我创建的、我加入的） - 底部推广横幅 #### ContentArea（内容区域） - 左侧：知识库详情和内容列表 - 右侧：AI 对话/问答区域 - 添加内容菜单（本地文件、文件夹、笔记等） ## 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()` - 登出 ## 状态管理 ### app store 管理应用级别的状态： - 当前激活的标签页 - 标签页列表 - 左侧图标栏选中项 ### knowledge store 管理知识库相关状态： - 个人知识库列表 - 共享知识库列表 - 当前选中的知识库 - 当前知识库的内容 ### user store 管理用户相关状态： - 用户信息 - Token - 登录/登出方法 ## 开发说明 ### 添加新页面 1. 在 `src/views/` 创建新的 Vue 组件 2. 在 `src/router/index.ts` 中添加路由配置 3. 如需 API 调用，在 `src/api/index.ts` 中添加接口定义 ### 添加新组件 1. 在 `src/components/` 创建组件文件 2. 在需要的地方导入并使用 ### 样式规范 - 使用 Tailwind CSS 工具类进行样式编写 - 全局样式定义在 `src/assets/main.css` - 组件特定样式使用 `