cuixueshe / dida Goto Github PK

问题描述：task 页面重新加载时，左侧清单列表会产生错误的冗余数据

会引入 dexie 来存储数据
整个 services 层都会做出很大的改动
如果你的 pr 涉及到了 services 层 那么先不要提交 pr

智能清单

只实现这3个就可以

设置完按钮后 会影响主页面 侧边栏智能清单的显示

这里的核心问题是 左侧的 active 逻辑是比较混乱的
需要重新梳理一遍
有能力的同学可以把左侧的 active 逻辑重构掉

点击按钮的时候 左侧的侧边栏隐藏
再次点击后 显示左侧的侧边栏

Tasking

• 用户悬停在对应的 tag 上的时候可以点击右侧的按钮显示编辑面板
• 用户可以在编辑面板编辑 tag 的名称
• 用户编辑完 tag 名称后 可以看到最新名称的 tag

Notes

• 第一版可以不实现颜色和父标签的功能

Tasking

• 用户点击删除按钮的时候 显示删除提示框
• 用户点击取消按钮的时候 可以取消删除提示框
• 用户点击确认按钮的时候 tag 会被删除掉

功能如下：

可以先实现一个 happy path
更具体的操作可以直接参考滴答清单的方式

注意点

这个功能不止是 UI逻辑还需要修改业务逻辑
移动完除了视图的改变还需要改变 project.tasks 里面 task 的索引位置

现在的项目名字太 low 了 同学们有没有好的意见和建议？

说明一下为什么要叫推荐的名字

后面我们投票来决定 看看谁的寓意更好

现在的输入框的样式

期望的样式

目前 TaskLeftListView.vue 可以继续拆分逻辑了

一个是和清单相关 UI 逻辑

一个是和特殊project 的相关 UI 逻辑

可以重构成：
TaskLeftListView
- 清单相关 UI 逻辑.vue
- 特殊project 的相关 UI 逻辑.vue

要注意的问题是 active 的 project 只能有一个

所以要考虑到 active 的问题

Expect

点击清单按钮之后 不应该改变之前 active 的 project

可以看到拖拽的时候会错位 光标的位置会跳一下

因为这个任务很大
所以我把任务拆分成一个一个的小任务
有能力的同学可以一口气做完

Tasking

#41
#43
#44
#46

Tasking

• 鼠标到边框的时候显示拖拽的 icon
• 鼠标在边框的时候可以拖拽控制区域的宽度
• 区域的宽度有最小值和最大值的概念

v-model好像不能监听到中文拼音输入中的变化

点击头像的时候会显示

可以只弄一个设置按钮就可以

icon 的话 可以去 iconfont 找

期望

从设置面板回到主页后 project 列表是没有任何变化的

记录项目初始化 backend 进度：

• Monorepo 初始化 - 使用 pnpm workspace, 分为 apps + packages 两个文件夹，apps 放 frontend 和 backend 源码，packages 放工具包（utils/deploy) 等 #103
• Nestjs 初始化配置 #146
• 前后端类型共享构想（方案：公用类型配置或者使用 swagger，由后端生成 Dto 类型供前端使用）并初始化类型共享方案
• DB 初始化
• 数据表制定 + 初始化数据库迁移文件
• Todo API 开发
• 部署后端 Docker 配置

还有其他欢迎补充

任务在 垃圾桶和已完成 project 里面不允许拖拽

Tasking

• 鼠标 hover 在便签上的时候 显示 +
• 点击 + 按钮之后显示创建 tag 的 panel
• 点击关闭按钮或者点击右上角的关闭按钮可以关闭 panel
• 点击保存按钮后 可以新创建一个 tag
• 用户可以在便签栏看到新创建的 tag

问题描述：
点击页面右上角的主题按钮改主体，设置页的当前主题不会同步更改

样式上要求上下左右居中

icon 可以使用 svg

点击 + 按钮的时候可以新建一个 project

点击完成后 显示创建框

只需要实现可输入project 的 name 以及有两个按钮（关闭、保存）即可

问题：search 快速输入一些内容时，组件的ref会丢失，产生报错

问题：已完成中的项目搜索不到

控制台输出 indexedDB 报错：

Uncaught (in promise) ："Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.
 NotFoundError: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found."

用户一个标签都没有设置的话 那么显示

现在的样式

期望的样式

taskItem 两个显示状态
一个是 active 的时候，高亮 task （input 就不可以高亮了）
另外一个是 hover 的样式

目前正在开发ing

• tag 模块
• 搜索模块
• 智能列表模块

这3个模块都可以不依赖后端 直接在前端模拟数据就可以完成
目前大家完成任务的效率非常的高
不过已经出现有意思的问题了
某个 pr merged 后 会破坏之前的功能
当然因为现在对核心业务逻辑有测试覆盖 所以出现问题的大多是 UI 逻辑
这就需要组件测试和 e2e 来解决了

所以接下来我们的任务是要巩固好这三大模块的功能
不管是技术层面 还是从产品交互层面 都需要更上一层楼
同学们可以点吧点吧 测试一下 然后把发现的 bug 提到 issues 里面

下一步

下一步就是搭建好后端，然后引入用户的概念 包括常见的功能 注册 登录之类的

注意

• services 层的代码我在一直重构， 会基于单元测试来重新驱动实现等等。这是一个非常容易造成代码冲突的点 同学们可以先不提相关 pr

头脑风暴

同学们目前对该项目有什么想法 或者有什么期待 在或者有什么意见和建议 留言我们讨论讨论 做个头脑风暴

原本已有对应的创建清单逻辑，但因为树的节点的 suffix 做了调整，所以需要把原来的触发创建清单弹框的逻辑调整到现在的 suffix 按钮事件上，可参考标签创建的逻辑和原来的创建清单核心逻辑 pr

在任务上右击 显示 “移动到” 然后显示所有的 project list

点击 project 后 当前任务就可以移动过去了

“搜索”功能可以先不实现

当编辑完任务的内容后 不点击多下其他区域的话 保存不上
下次刷新的时候内容就消失了

期望

当编辑完内容后 失去焦点的时候 就会保存内容

参考滴答

鼠标 hover 到智能清单上后 会显示 右侧的点击按钮

点击之后显示菜单栏
点击隐藏后
该智能清单会被隐藏掉

关联的功能

#8

Tasking

• url为 #settings 的时候跳转到设置面板
• 显示左侧的导航栏
  - 智能清单
  - 主题
• 点击完成按钮后回到主页面

主题

只支持黑白就可以了

基本信息

• 浏览器: Google Chrome 108.0.5359.125
• 复现地址: https://vue3-dida.vercel.app/#/task

预期结果

复现步骤

1. 进入复现地址
2. 点击侧边栏 - 垃圾桶
3. TaskItem 文字部分未垂直居中

问题复现如下：

期望

拖拽 task 位置后 可以保存起来

实现方式就是需要加一个 index 来保存 task 的位置到 db
然后获取数据后 需要基于 index 来排个序

问题描述：
使用Naive ui中的NButton，样式与unocss发生冲突，会被 tailwind reset.css 覆盖掉
可是使用文档中的方法会导致unocss不生效

参考文档：
https://www.naiveui.com/zh-CN/os-theme/docs/style-conflict

当前只有点击节点前的三角符号才可以 展开/折叠 节点

现在的数据是直接保存到用户的浏览器上的

我们期望有一个功能 可以把本地的数据保存到用户的 gist 里面

这样当用户清空浏览器的时候 也可以通过保存在 gist 里面的数据来恢复

流程应该如下：

1. 用户授权自己的 github
2. 用户点击按钮后 调用 gist api 把数据保存上去
3. 数据恢复的时候 可以优先读取用户本地的数据 如果发现本地数据没有的话 那么尝试读取 gist 保存的数据来进行恢复

可以把整个探索的过程记录到这个 issue 下
确实方案可行后 就可以来一个 pr