本项目基于 CloudBase AI ToolKit 开发，通过AI提示词和 MCP 协议+云开发，让开发更智能、更高效，支持AI生成全栈代码、一键部署至腾讯云开发（免服务器）、智能日志修复。

• 学习记录管理

  • 添加/编辑/删除学习记录
  • 按状态筛选记录（进行中/已完成/已延期）
  • 按时间排序查看历史记录
  • 响应式设计，适配各种设备

• 时间追踪

  • 全屏专注计时器
  • 自动关联学习记录
  • 学习时长统计

• 数据安全

  • 腾讯云数据库存储
  • 完善的权限控制
  • 数据备份与恢复

• 前端框架: Vue 3 + Vite
• UI框架: Tailwind CSS
• 路由: Vue Router
• 云服务: 腾讯云开发(CloudBase)
  • 云数据库
  • 静态网站托管
  • 云函数

src/
├── components/               # 可复用组件
│   ├── NavBar.vue            # 顶部导航栏
│   ├── Footer.vue            # 页面底部
│   ├── Modal/                # 模态框组件
│   │   ├── BaseModal.vue      # 基础模态框
│   │   └── ConfirmModal.vue   # 确认对话框
│   └── LoadingSpinner.vue    # 加载动画
│
├── views/                    # 页面视图
│   ├── Home.vue              # 首页仪表盘
│   ├── LearningRecord.vue    # 学习记录管理
│   ├── TimeTracker.vue       # 时间追踪器
│   └── Statistics.vue        # 学习统计
│
├── router/                   # 路由配置
│   └── index.js              # 路由定义
│
├── store/                    # 状态管理
│   └── index.js              # Vuex/Pinia store
│
├── utils/                    # 工具函数
│   ├── cloudbase.js          # 云开发初始化
│   ├── initDB.js             # 数据库初始化
│   ├── auth.js               # 认证相关
│   └── helpers.js            # 辅助函数
│
├── assets/                   # 静态资源
│   ├── styles/               # 样式文件
│   │   ├── tailwind.css       # Tailwind基础样式
│   │   └── animations.css    # 自定义动画
│   └── images/               # 图片资源
│
├── App.vue                   # 根组件
└── main.js                   # 应用入口

• 数据模型:

  {
    title: String,       // 学习标题
    date: String,        // 学习日期(YYYY-MM-DD)
    status: String,     // 学习状态
    description: String, // 详细描述
    studyTime: Number,   // 学习时长(分钟)
    tags: Array,        // 学习标签
    createdAt: Date,    // 创建时间
    updatedAt: Date     // 更新时间
  }
  

• 主要操作:

  • 添加记录: 使用模态框表单收集数据
  • 编辑记录: 保留原始数据并支持修改
  • 删除记录: 二次确认防止误操作
  • 列表展示: 分页加载，支持排序和筛选

1. 初始化配置 (src/utils/cloudbase.js)

   import cloudbase from "@cloudbase/js-sdk";
   
   const app = cloudbase.init({
     env: "your-env-id", // 替换为实际环境ID
   });
   
   export default app;
   

2. 数据库操作示例:

   // 获取学习记录
   async function getRecords() {
     const db = app.database();
     const res = await db
       .collection("learning_records")
       .orderBy("createdAt", "desc")
       .get();
     return res.data;
   }
   

• 数据库权限:

  • 集合权限: 所有用户可读，仅创建者可写
  • 字段权限: 敏感字段如createdAt仅管理端可写

• 操作权限:

  • 匿名用户: 仅可查看记录
  • 登录用户: 可管理自己的记录
  • 管理员: 可管理所有记录

1. 依赖安装

   npm install
   

2. 初始化配置 (src/utils/cloudbase.js)

   import cloudbase from "@cloudbase/js-sdk";
   
   const app = cloudbase.init({
     env: "your-env-id", // 替换为实际环境ID
   });
   
   export default app;
   

3. 启动开发服务器

   npm run dev
   

MIT License

• 邮箱: 2120946311@qq.com
• cnb: shuishenhuole