From b5df0b2d3ea5997dfa6ccf878b004c5ae83c0510 Mon Sep 17 00:00:00 2001
From: zhangjiaxun <732128096@qq.com>
Date: Sat, 17 Oct 2026 09:09:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(todo):=20=E5=BE=85=E5=8A=9E=E6=B8=85?=
 =?UTF-8?q?=E5=8D=95=E9=A1=B5=E9=9D=A2=E6=94=B9=E7=89=88=E2=80=94=E2=80=94?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=BC=8F=E5=88=97=E8=A1=A8+=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E7=9C=8B=E6=9D=BF+=E9=A3=9E=E4=B9=A6=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E8=A7=86=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 卡片式任务列表：圆点勾选、优先级色点、截止日标签（逾期/今天高亮）
- 顶部统计看板：全部/未完成/已完成，点击卡片即筛选
- 快捷添加：回车即创建，可选优先级
- 新增卡片/表格视图切换，表格视图内嵌飞书表格（SHEET_URL 待配置）
- 手机端响应式适配（≤768px）
- 后端与接口层无改动
---
 src/view/todo/todo-list.vue | 872 +++++++++++++++++++++++-------------
 1 file changed, 569 insertions(+), 303 deletions(-)

diff --git a/src/view/todo/todo-list.vue b/src/view/todo/todo-list.vue
index 284bc56..619d91a 100644
--- a/src/view/todo/todo-list.vue
+++ b/src/view/todo/todo-list.vue
@@ -1,378 +1,644 @@
 <template>
-  <div>
-    <!-- 查询区域 start -->
-    <div class="option">
-      <Input v-model="search.title" class="short-input" clearable placeholder="标题"/>
-      <Select v-model="search.status" class="short-input" clearable placeholder="状态">
-        <Option :value="0">未完成</Option>
-        <Option :value="1">已完成</Option>
-      </Select>
-      <Select v-model="search.priority" class="short-input" clearable placeholder="优先级">
-        <Option :value="1">低</Option>
-        <Option :value="2">中</Option>
-        <Option :value="3">高</Option>
-      </Select>
-      <Button class="free" type="primary" icon="ios-search" @click="getDataList()">查询</Button>
-      <Button class="free" type="primary" icon="md-refresh" @click="refresh()">重置</Button>
+  <div class="todo-page">
+    <!-- 顶部：标题 + 统计看板 -->
+    <div class="todo-header">
+      <div class="todo-heading">
+        <h2 class="todo-title">待办清单</h2>
+        <span class="todo-date">{{ todayText }}</span>
+      </div>
+      <div class="stat-cards" v-if="viewMode === 'card'">
+        <div class="stat-card" :class="{ active: statusTab === 'all' }" @click="setTab('all')">
+          <div class="stat-num">{{ stats.total }}</div>
+          <div class="stat-label">全部</div>
+        </div>
+        <div class="stat-card warn" :class="{ active: statusTab === 'undone' }" @click="setTab('undone')">
+          <div class="stat-num">{{ stats.undone }}</div>
+          <div class="stat-label">未完成</div>
+        </div>
+        <div class="stat-card ok" :class="{ active: statusTab === 'done' }" @click="setTab('done')">
+          <div class="stat-num">{{ stats.done }}</div>
+          <div class="stat-label">已完成</div>
+        </div>
+      </div>
     </div>
-    <!-- 查询区域 end -->
 
-    <!-- 列表区域 start -->
-    <div class="table-button-list">
-      <Button class="free" type="info" icon="md-add" @click="toAdd">添加</Button>
+    <!-- 快捷添加（仅卡片视图） -->
+    <div class="quick-add" v-if="viewMode === 'card'">
+      <Input v-model="quickTitle" class="quick-input" clearable size="large"
+             placeholder="想到什么就记下来，回车快速添加…" @on-enter="quickAdd"/>
+      <Select v-model="quickPriority" class="quick-priority" size="large" placement="bottom-end">
+        <Option :value="1">低优先级</Option>
+        <Option :value="2">中优先级</Option>
+        <Option :value="3">高优先级</Option>
+      </Select>
+      <Button type="primary" class="quick-btn" size="large" icon="md-add" @click="quickAdd">添加</Button>
     </div>
-    <Table :height="fixedHeader ? autoHeight : ''"
-           border ref="table"
-           :columns="listColumns"
-           :data="dataList"
-           :loading="tableLoading">
-      <template slot-scope="{ row }" slot="status">
-        <i-switch :value="row.status === 1" true-value="1" false-value="0"
-                  @on-change="val => updateStatus(row, val)">
-          <span slot="open">完成</span>
-          <span slot="close">未完成</span>
-        </i-switch>
-      </template>
-      <template slot-scope="{ row }" slot="priority">
-        <Tag :color="priorityColor(row.priority)">{{ priorityName(row.priority) }}</Tag>
-      </template>
-      <template slot-scope="{ row, index }" slot="action">
-        <Button type="primary"
-                size="small"
-                style="margin-right: 5px"
-                icon="ios-create"
-                @click="toEdit(index)">编辑
-        </Button>
-        <Poptip
-          confirm
-          title="您确定要删除吗？"
-          :transfer="true"
-          @on-ok="toDelete(index)"
-        >
-          <Button type="error" size="small" icon="md-trash">删除</Button>
-        </Poptip>
-      </template>
-    </Table>
-    <div class="pagination">
-      <Page show-elevator show-sizer show-total
-            :total="pageTotal" :page-size="pageParam.pageSize"
-            :current="pageParam.pageNum"
-            @on-page-size-change="changePageSize" @on-change="changePage"></Page>
-    </div>
-    <!-- 列表区域 end -->
 
-    <!-- Modal区域 start -->
-    <Modal v-model="modal" :title="modalTitle" :styles="{top: '20px'}" width="700" :mask-closable="false"
-           @on-cancel="cancel()">
-      <Form :rules="ruleCustom" :model="formItem" ref="formItem" :label-width="110" label-position="right">
-        <Row :gutter="32">
-          <Col span="24">
-            <FormItem label="标题" prop="title">
-              <Input type="text" class="form-input" v-model="formItem.title" placeholder="请输入待办标题"/>
-            </FormItem>
-          </Col>
-          <Col span="12">
-            <FormItem label="优先级" prop="priority">
-              <RadioGroup v-model="formItem.priority">
-                <Radio :label="1"><span>低</span></Radio>
-                <Radio :label="2"><span>中</span></Radio>
-                <Radio :label="3"><span>高</span></Radio>
-              </RadioGroup>
-            </FormItem>
-          </Col>
-          <Col span="12">
-            <FormItem label="状态" prop="status">
-              <RadioGroup v-model="formItem.status">
-                <Radio :label="0"><span>未完成</span></Radio>
-                <Radio :label="1"><span>已完成</span></Radio>
-              </RadioGroup>
-            </FormItem>
-          </Col>
-          <Col span="12">
-            <FormItem label="截止日期" prop="dueDate">
-              <DatePicker type="date"
-                          class="form-input"
-                          format="yyyy-MM-dd"
-                          v-model="formItem.dueDate"
-                          placeholder="请选择截止日期">
-              </DatePicker>
-            </FormItem>
-          </Col>
-          <Col span="24">
-            <FormItem label="备注" prop="remark">
-              <Input type="textarea" :rows="3" maxlength="200" show-word-limit class="form-input"
-                     v-model="formItem.remark" placeholder="选填：补充说明"/>
-            </FormItem>
-          </Col>
-        </Row>
+    <!-- 筛选栏 -->
+    <div class="filter-bar">
+      <RadioGroup v-model="statusTab" type="button" button-style="solid" @on-change="onTabChange"
+                  v-if="viewMode === 'card'">
+        <Radio label="all">全部</Radio>
+        <Radio label="undone">未完成</Radio>
+        <Radio label="done">已完成</Radio>
+      </RadioGroup>
+      <span v-else class="sheet-hint">飞书共享表格，数据在飞书侧维护</span>
+      <div class="filter-right">
+        <!-- 视图切换：卡片 / 飞书表格 -->
+        <RadioGroup v-model="viewMode" type="button" class="view-switch">
+          <Radio label="card"><Icon type="md-list-box"/> 卡片</Radio>
+          <Radio label="sheet"><Icon type="md-grid"/> 表格</Radio>
+        </RadioGroup>
+        <template v-if="viewMode === 'card'">
+          <Select v-model="search.priority" clearable class="filter-priority" placeholder="优先级" @on-change="onSearch">
+            <Option :value="1">低</Option>
+            <Option :value="2">中</Option>
+            <Option :value="3">高</Option>
+          </Select>
+          <Input v-model="search.title" class="filter-search" search clearable
+                 placeholder="搜索标题，回车确认" @on-search="onSearch" @on-clear="onSearch"/>
+        </template>
+      </div>
+    </div>
+
+    <!-- 飞书表格视图 -->
+    <div v-if="viewMode === 'sheet'" class="sheet-view">
+      <iframe v-if="sheetUrl" :src="sheetUrl" class="sheet-frame" allowfullscreen></iframe>
+      <div v-else class="sheet-empty">
+        <Icon type="md-grid" size="48"/>
+        <p>尚未配置飞书表格链接</p>
+        <p class="sheet-tip">在代码顶部 SHEET_URL 填入飞书表格分享链接（表格需开启「获得链接的人可编辑」）</p>
+      </div>
+    </div>
+
+    <!-- 任务列表（卡片视图） -->
+    <template v-if="viewMode === 'card'">
+    <Spin v-if="tableLoading" class="todo-spin"/>
+    <div v-else-if="dataList.length" class="todo-list">
+      <div v-for="(item, index) in dataList" :key="item.id"
+           class="todo-item" :class="{ 'is-done': item.status === 1 }">
+        <span class="check-circle" :title="item.status === 1 ? '标记未完成' : '标记完成'" @click="toggleStatus(item)">
+          <Icon v-if="item.status === 1" type="md-checkmark" size="14"/>
+        </span>
+        <div class="item-main" @click="toEdit(index)">
+          <div class="item-title">
+            <span class="prio-dot" :class="'prio-' + (item.priority || 2)"></span>
+            <span class="title-text">{{ item.title }}</span>
+            <span v-if="item.dueDate" class="due-chip" :class="dueClass(item)">
+              <Icon type="md-time" size="12"/> {{ dueText(item) }}
+            </span>
+          </div>
+          <div v-if="item.remark" class="item-remark">{{ item.remark }}</div>
+          <div class="item-meta">创建于 {{ formatCreate(item.createDate) }}</div>
+        </div>
+        <div class="item-actions">
+          <Button type="text" icon="ios-create-outline" size="small" @click="toEdit(index)"/>
+          <Poptip confirm transfer title="确定删除这条待办吗？" @on-ok="toDelete(index)">
+            <Button type="text" class="del-btn" icon="md-trash" size="small"/>
+          </Poptip>
+        </div>
+      </div>
+    </div>
+
+    <!-- 空状态 -->
+    <div v-else class="todo-empty">
+      <Icon type="md-clipboard" size="48"/>
+      <p v-if="statusTab === 'done'">还没有已完成的待办</p>
+      <p v-else-if="statusTab === 'undone'">太棒了，没有未完成的待办</p>
+      <p v-else>暂无待办，从上方输入框添加第一条吧</p>
+    </div>
+
+    <!-- 分页 -->
+    <div v-if="pageTotal > pageParam.pageSize" class="pagination">
+      <Page show-total
+            :total="pageTotal" :page-size="pageParam.pageSize" :current="pageParam.pageNum"
+            @on-page-size-change="changePageSize" @on-change="changePage"/>
+    </div>
+    </template>
+
+    <!-- 编辑弹窗 -->
+    <Modal v-model="modal" :title="modalTitle" width="520" class-name="todo-modal"
+           :mask-closable="false" @on-cancel="cancel()">
+      <Form :model="formItem" ref="formItem" :rules="ruleCustom" :label-width="70" label-position="left">
+        <FormItem label="标题" prop="title">
+          <Input v-model="formItem.title" maxlength="200" placeholder="待办标题"/>
+        </FormItem>
+        <FormItem label="优先级">
+          <RadioGroup v-model="formItem.priority" type="button" button-style="solid">
+            <Radio :label="1">低</Radio>
+            <Radio :label="2">中</Radio>
+            <Radio :label="3">高</Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="状态">
+          <i-switch v-model="doneSwitch" size="large">
+            <span slot="open">已完成</span>
+            <span slot="close">未完成</span>
+          </i-switch>
+        </FormItem>
+        <FormItem label="截止日期">
+          <DatePicker type="date" format="yyyy-MM-dd" v-model="formItem.dueDate"
+                      :clearable="true" class="full-input" placeholder="选填"/>
+        </FormItem>
+        <FormItem label="备注">
+          <Input type="textarea" :rows="3" maxlength="200" show-word-limit
+                 v-model="formItem.remark" class="full-input" placeholder="选填：补充说明"/>
+        </FormItem>
       </Form>
       <div slot="footer">
         <Button type="text" size="large" @click="cancel">取消</Button>
-        <Button type="primary" size="large"
-                :loading="submitLoading"
-                @click="submit('formItem')">提交
-        </Button>
+        <Button type="primary" size="large" :loading="submitLoading" @click="submit">保存</Button>
       </div>
     </Modal>
-    <!-- Modal区域 end -->
-
   </div>
 </template>
 
 <script>
 import { getDataList, add, update, updateStatus, remove } from '@/api/todo/todo'
-import { objectUtil } from '@/common/js/util'
+
+// 飞书表格分享链接（表格视图内嵌展示）；需开启「获得链接的人可编辑/阅读」
+const SHEET_URL = ''
 
 export default {
   name: 'todo-list',
   data () {
     return {
-      fixedHeader: true, // 高度自适应
-      autoHeight: `${window.innerHeight} ` * 0.55, // 获取当前可视高度-定义Table高度
-      search: {
-        title: '',
-        status: '',
-        priority: ''
-      },
-      listColumns: [
-        {
-          title: '#',
-          type: 'index',
-          width: 60,
-          align: 'center',
-          indexMethod: (row) => {
-            return (row._index + 1) + ((this.pageParam.pageNum - 1) * this.pageParam.pageSize)
-          }
-        },
-        {
-          title: '标题',
-          key: 'title',
-          minWidth: 200
-        },
-        {
-          title: '状态',
-          slot: 'status',
-          width: 110,
-          align: 'center'
-        },
-        {
-          title: '优先级',
-          slot: 'priority',
-          width: 100,
-          align: 'center'
-        },
-        {
-          title: '截止日期',
-          key: 'dueDate',
-          width: 120,
-          align: 'center'
-        },
-        {
-          title: '备注',
-          key: 'remark',
-          minWidth: 180,
-          ellipsis: true,
-          tooltip: true
-        },
-        {
-          title: '创建时间',
-          key: 'createDate',
-          width: 160,
-          align: 'center'
-        },
-        {
-          title: '操作区',
-          slot: 'action',
-          width: 160,
-          fixed: 'right',
-          align: 'center'
-        }
-      ],
+      // 视图模式：card 卡片 / sheet 飞书表格
+      viewMode: 'card',
+      sheetUrl: SHEET_URL,
+      // 快捷添加
+      quickTitle: '',
+      quickPriority: 2,
+      // 筛选
+      statusTab: 'all',
+      search: { title: '', priority: null },
+      // 统计（由独立请求获取总数）
+      stats: { total: 0, undone: 0, done: 0 },
+      // 列表
       dataList: [],
       tableLoading: false,
-      pageTotal: 0, // 总页数
-      pageParam: { // 调用时候的分页参数
-        pageNum: 1,
-        pageSize: 10
-      },
+      pageTotal: 0,
+      pageParam: { pageNum: 1, pageSize: 20 },
+      // 弹窗
       modal: false,
-      modalTitle: '',
-      addModal: false, // 添加
-      editModal: false, // 编辑
+      modalTitle: '编辑待办',
       submitLoading: false,
+      doneSwitch: false,
       formItem: {
-        id: '',
-        title: '',
-        status: 0,
-        priority: 2,
-        dueDate: '',
-        remark: ''
+        id: '', title: '', status: 0, priority: 2, dueDate: '', remark: ''
       },
       ruleCustom: {
         title: [{ required: true, message: '请输入标题', trigger: 'blur' }]
       }
     }
   },
+  computed: {
+    todayText () {
+      const d = new Date()
+      const week = ['日', '一', '二', '三', '四', '五', '六'][d.getDay()]
+      return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日 · 星期${week}`
+    }
+  },
   methods: {
+    // ===== 数据加载 =====
     getDataList () {
-      let temp = JSON.parse(JSON.stringify(this.pageParam))
-      let data = objectUtil.trimJoin(temp, this.search)
+      const data = {
+        pageNum: this.pageParam.pageNum,
+        pageSize: this.pageParam.pageSize
+      }
+      if (this.search.title) data.title = this.search.title.trim()
+      if (this.search.priority) data.priority = this.search.priority
+      if (this.statusTab === 'undone') data.status = 0
+      if (this.statusTab === 'done') data.status = 1
       this.tableLoading = true
       getDataList(data).then(res => {
-        let page = res.data.data
+        const page = res.data.data
         this.pageTotal = page.total
         this.dataList = page.records
-        // 延迟300毫秒，给它更流畅的感觉
-        setTimeout(() => {
-          this.tableLoading = false
-        }, 300)
+        this.tableLoading = false
+      }).catch(() => { this.tableLoading = false })
+    },
+    // 统计卡片：分别请求三种状态的总数（pageSize=1 只取 total）
+    loadStats () {
+      const count = (extra) => getDataList(Object.assign({ pageNum: 1, pageSize: 1 }, extra)).then(res => res.data.data.total)
+      Promise.all([count({}), count({ status: 0 }), count({ status: 1 })]).then(([total, undone, done]) => {
+        this.stats = { total, undone, done }
+      }).catch(() => {})
+    },
+    reloadAll () {
+      this.loadStats()
+      this.getDataList()
+    },
+    // ===== 筛选交互 =====
+    setTab (tab) {
+      this.statusTab = tab
+      this.pageParam.pageNum = 1
+      this.getDataList()
+    },
+    onTabChange () {
+      this.pageParam.pageNum = 1
+      this.getDataList()
+    },
+    onSearch () {
+      this.pageParam.pageNum = 1
+      this.getDataList()
+    },
+    // ===== 快捷添加 =====
+    quickAdd () {
+      const title = (this.quickTitle || '').trim()
+      if (!title) {
+        this.$Message.warning('先输入待办内容再添加')
+        return
+      }
+      add({ title, priority: this.quickPriority }).then(() => {
+        this.quickTitle = ''
+        this.$Message.success('已添加')
+        this.pageParam.pageNum = 1
+        this.reloadAll()
       })
     },
-    toAdd () {
-      this.modalTitle = '添加'
-      this.modal = true
-      this.addModal = true
-      this.editModal = false
-      this.$nextTick(() => {
-        if (this.$refs.formItem) {
-          this.$refs.formItem.resetFields()
-        }
-      })
+    // ===== 勾选完成 =====
+    toggleStatus (row) {
+      const status = row.status === 1 ? 0 : 1
+      updateStatus({ id: row.id, status }).then(() => {
+        this.$Message.success(status === 1 ? '已完成' : '已标记为未完成')
+        this.reloadAll()
+      }).catch(() => this.getDataList())
     },
+    // ===== 编辑弹窗 =====
     toEdit (index) {
-      this.modalTitle = '编辑'
-      let temp = this.dataList[index]
-
-      this.addModal = false
-      this.editModal = true
+      const temp = this.dataList[index]
+      this.modalTitle = '编辑待办'
       this.modal = true
-
       this.$nextTick(() => {
-        // 清除上次校验状态，避免编辑回显报红
-        if (this.$refs.formItem) {
-          this.$refs.formItem.resetFields()
+        if (this.$refs.formItem) this.$refs.formItem.resetFields()
+        this.formItem = {
+          id: temp.id,
+          title: temp.title,
+          status: temp.status,
+          priority: temp.priority || 2,
+          dueDate: temp.dueDate ? new Date(String(temp.dueDate).replace(/-/g, '/')) : '',
+          remark: temp.remark || ''
         }
-        this.formItem.id = temp.id
-        this.formItem.title = temp.title
-        this.formItem.status = temp.status
-        this.formItem.priority = temp.priority
-        this.formItem.dueDate = temp.dueDate ? new Date(String(temp.dueDate).replace(/-/g, '/')) : ''
-        this.formItem.remark = temp.remark || ''
+        this.doneSwitch = temp.status === 1
       })
     },
-    submit (formItem) {
-      // modal 提交
-      this.$refs[formItem].validate((valid) => {
-        if (valid) {
-          let data = Object.assign({}, this.formItem)
-          // DatePicker 绑定的是 Date 对象，后端按 yyyy-MM-dd 字符串接收
-          data.dueDate = this.formatDate(this.formItem.dueDate)
-          if (this.addModal) { // 添加
-            add(data).then(res => {
-              this.$Message.success('添加成功!')
-              this.refresh()
-              this.getDataList()
-            })
-          } else { // 编辑
-            update(data).then(res => {
-              this.$Message.success('编辑成功!')
-              this.refresh()
-              this.getDataList()
-            })
-          }
+    submit () {
+      this.$refs.formItem.validate((valid) => {
+        if (!valid) return
+        this.submitLoading = true
+        const data = Object.assign({}, this.formItem)
+        data.dueDate = this.formatDate(this.formItem.dueDate)
+        data.status = this.doneSwitch ? 1 : 0
+        update(data).then(() => {
+          this.$Message.success('保存成功')
           this.cancel()
-        }
+          this.reloadAll()
+        }).finally(() => { this.submitLoading = false })
       })
     },
     cancel () {
-      // Modal cancel
       this.modal = false
-      this.refresh()
+      if (this.$refs.formItem) this.$refs.formItem.resetFields()
     },
     toDelete (index) {
-      let temp = this.dataList[index]
-      let data = {
-        id: temp.id
-      }
-      remove(data).then(res => {
-        this.refresh()
-        this.getDataList()
-        this.$Message.success('删除成功!')
+      remove({ id: this.dataList[index].id }).then(() => {
+        this.$Message.success('删除成功')
+        // 删除后若当前页空了则回退一页
+        if (this.dataList.length === 1 && this.pageParam.pageNum > 1) {
+          this.pageParam.pageNum -= 1
+        }
+        this.reloadAll()
       })
     },
-    updateStatus (row, value) {
-      let status = value === true || value === 1 || value === '1' ? 1 : 0
-      let data = {
-        id: row.id,
-        status: status
-      }
-      updateStatus(data).then(res => {
-        this.$Message.success(status === 1 ? '已完成!' : '已标记为未完成!')
-        this.getDataList()
-      }).catch(() => {
-        this.getDataList()
-      })
-    },
-    refresh () {
-      this.pageParam = {
-        pageNum: 1,
-        pageSize: 10
-      }
-      this.search = {
-        title: '',
-        status: '',
-        priority: ''
-      }
-      this.formItem = {
-        id: '',
-        title: '',
-        status: 0,
-        priority: 2,
-        dueDate: '',
-        remark: ''
-      }
-    },
+    // ===== 分页 =====
     changePage (index) {
-      // 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
       this.pageParam.pageNum = index
       this.getDataList()
     },
-    changePageSize (page) {
-      // 切换分页条数
+    changePageSize (size) {
       this.pageParam.pageNum = 1
-      this.pageParam.pageSize = page
+      this.pageParam.pageSize = size
       this.getDataList()
     },
-    /** 日期格式化为 yyyy-MM-dd，空值返回空串 **/
+    // ===== 展示辅助 =====
     formatDate (date) {
-      if (!date) {
-        return ''
-      }
-      let d = date instanceof Date ? date : new Date(String(date).replace(/-/g, '/'))
-      if (isNaN(d.getTime())) {
-        return ''
-      }
-      let month = d.getMonth() + 1
-      let day = d.getDate()
-      return `${d.getFullYear()}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`
+      if (!date) return ''
+      const d = date instanceof Date ? date : new Date(String(date).replace(/-/g, '/'))
+      if (isNaN(d.getTime())) return ''
+      const m = d.getMonth() + 1
+      const day = d.getDate()
+      return `${d.getFullYear()}-${m < 10 ? '0' + m : m}-${day < 10 ? '0' + day : day}`
     },
-    priorityName (priority) {
-      let map = { 1: '低', 2: '中', 3: '高' }
-      return map[priority] || '中'
+    formatCreate (val) {
+      if (!val) return ''
+      return String(val).substring(0, 10)
     },
-    priorityColor (priority) {
-      let map = { 1: 'default', 2: 'blue', 3: 'red' }
-      return map[priority] || 'blue'
+    dueDateObj (item) {
+      if (!item.dueDate) return null
+      const d = new Date(String(item.dueDate).replace(/-/g, '/'))
+      d.setHours(0, 0, 0, 0)
+      return d
+    },
+    // 截止日展示：已逾期 / 今天 / 明天 / 具体日期
+    dueText (item) {
+      const d = this.dueDateObj(item)
+      if (!d) return ''
+      const today = new Date()
+      today.setHours(0, 0, 0, 0)
+      const diff = Math.round((d - today) / 86400000)
+      if (item.status === 0 && diff < 0) return `已逾期${-diff}天`
+      if (diff === 0) return '今天截止'
+      if (diff === 1) return '明天截止'
+      return this.formatDate(d)
+    },
+    dueClass (item) {
+      const d = this.dueDateObj(item)
+      if (!d || item.status === 1) return ''
+      const today = new Date()
+      today.setHours(0, 0, 0, 0)
+      const diff = Math.round((d - today) / 86400000)
+      if (diff < 0) return 'overdue'
+      if (diff === 0) return 'today'
+      return ''
     }
   },
   created () {
-    this.getDataList()
+    this.reloadAll()
   }
 }
 </script>
 
 <style lang="less" scoped>
-  .form-input {
-    width: 100%
+  @primary: #2d8cf0;
+  @text-main: #17233d;
+  @text-sub: #808695;
+  @radius: 10px;
+
+  .todo-page {
+    padding: 16px;
+    max-width: 960px;
+    margin: 0 auto;
+  }
+
+  /* ===== 顶部 ===== */
+  .todo-header {
+    margin-bottom: 16px;
+  }
+  .todo-heading {
+    display: flex;
+    align-items: baseline;
+    gap: 12px;
+    margin-bottom: 14px;
+  }
+  .todo-title {
+    font-size: 24px;
+    font-weight: 600;
+    color: @text-main;
+    margin: 0;
+  }
+  .todo-date {
+    font-size: 13px;
+    color: @text-sub;
+  }
+  .stat-cards {
+    display: flex;
+    gap: 12px;
+  }
+  .stat-card {
+    flex: 1;
+    background: #fff;
+    border: 1px solid #e8eaec;
+    border-radius: @radius;
+    padding: 14px 16px;
+    cursor: pointer;
+    transition: all .2s;
+    &:hover {
+      box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
+      transform: translateY(-1px);
+    }
+    &.active {
+      border-color: @primary;
+      box-shadow: 0 0 0 2px fade(@primary, 15%);
+    }
+    &.warn .stat-num { color: #ff9900; }
+    &.ok .stat-num { color: #19be6b; }
+  }
+  .stat-num {
+    font-size: 26px;
+    font-weight: 700;
+    color: @text-main;
+    line-height: 1.2;
+  }
+  .stat-label {
+    font-size: 12px;
+    color: @text-sub;
+    margin-top: 2px;
+  }
+
+  /* ===== 快捷添加 ===== */
+  .quick-add {
+    display: flex;
+    gap: 10px;
+    background: #fff;
+    border: 1px solid #e8eaec;
+    border-radius: @radius;
+    padding: 12px;
+    margin-bottom: 14px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
+  }
+  .quick-input { flex: 1; }
+  .quick-priority { width: 110px; flex-shrink: 0; }
+  .quick-btn { flex-shrink: 0; }
+
+  /* ===== 筛选栏 ===== */
+  .filter-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 12px;
+  }
+  .filter-right {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+  .filter-priority { width: 90px; }
+  .filter-search { width: 200px; }
+  .view-switch { margin-right: 8px; }
+  .sheet-hint { font-size: 13px; color: @text-sub; }
+
+  /* ===== 飞书表格视图 ===== */
+  .sheet-view {
+    background: #fff;
+    border: 1px solid #e8eaec;
+    border-radius: @radius;
+    overflow: hidden;
+  }
+  .sheet-frame {
+    width: 100%;
+    height: calc(100vh - 320px);
+    min-height: 480px;
+    border: none;
+    display: block;
+  }
+  .sheet-empty {
+    text-align: center;
+    padding: 72px 16px;
+    color: #c5c8ce;
+    p { margin-top: 12px; font-size: 14px; }
+    .sheet-tip { font-size: 12px; color: #b0b4bc; }
+  }
+
+  /* ===== 任务列表 ===== */
+  .todo-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .todo-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    background: #fff;
+    border: 1px solid #e8eaec;
+    border-radius: @radius;
+    padding: 14px 16px;
+    transition: all .2s;
+    &:hover {
+      border-color: #dcdee2;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
+      .item-actions { opacity: 1; }
+    }
+    &.is-done {
+      background: #fafafa;
+      .title-text {
+        color: @text-sub;
+        text-decoration: line-through;
+      }
+      .item-remark, .item-meta { opacity: .7; }
+    }
+  }
+  .check-circle {
+    width: 22px;
+    height: 22px;
+    flex-shrink: 0;
+    margin-top: 1px;
+    border: 2px solid #c5c8ce;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    cursor: pointer;
+    transition: all .15s;
+    &:hover { border-color: @primary; }
+    .is-done & {
+      background: #19be6b;
+      border-color: #19be6b;
+    }
+  }
+  .item-main {
+    flex: 1;
+    min-width: 0;
+    cursor: pointer;
+  }
+  .item-title {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  .prio-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    &.prio-1 { background: #c5c8ce; }
+    &.prio-2 { background: #2d8cf0; }
+    &.prio-3 { background: #ed4014; }
+  }
+  .title-text {
+    font-size: 15px;
+    font-weight: 500;
+    color: @text-main;
+    word-break: break-all;
+  }
+  .due-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    font-size: 12px;
+    color: @text-sub;
+    background: #f5f7f9;
+    border-radius: 4px;
+    padding: 1px 7px;
+    white-space: nowrap;
+    &.today {
+      color: #ff9900;
+      background: fade(#ff9900, 12%);
+    }
+    &.overdue {
+      color: #ed4014;
+      background: fade(#ed4014, 10%);
+      font-weight: 500;
+    }
+  }
+  .item-remark {
+    font-size: 13px;
+    color: @text-sub;
+    margin-top: 6px;
+    word-break: break-all;
+    white-space: pre-wrap;
+  }
+  .item-meta {
+    font-size: 12px;
+    color: #c5c8ce;
+    margin-top: 6px;
+  }
+  .item-actions {
+    flex-shrink: 0;
+    display: flex;
+    gap: 2px;
+    opacity: 0;
+    transition: opacity .2s;
+    .del-btn { color: #ed4014; }
+  }
+
+  /* ===== 空状态 / 分页 / 加载 ===== */
+  .todo-empty {
+    text-align: center;
+    padding: 56px 0;
+    color: #c5c8ce;
+    p { margin-top: 12px; font-size: 14px; }
+  }
+  .todo-spin { display: block; margin: 60px auto; }
+  .pagination {
+    margin-top: 16px;
+    text-align: center;
+  }
+  .full-input { width: 100%; }
+
+  /* ===== 手机端适配（≤768px） ===== */
+  @media (max-width: 768px) {
+    .todo-page { padding: 10px; }
+    .todo-title { font-size: 20px; }
+    .stat-card { padding: 10px 12px; }
+    .stat-num { font-size: 20px; }
+    .quick-add {
+      flex-wrap: wrap;
+      .quick-input { flex: 1 1 100%; }
+      .quick-priority { flex: 1; width: auto; }
+      .quick-btn { flex: 1; }
+    }
+    .filter-bar { flex-direction: column; align-items: stretch; }
+    .filter-right { width: 100%; }
+    .filter-priority { width: 100px; }
+    .filter-search { flex: 1; width: auto; }
+    .todo-item { padding: 12px; }
+    .item-actions { opacity: 1; } // 手机端常显操作按钮
+    .sheet-frame { height: 60vh; min-height: 360px; }
   }
 </style>