@dimples/todo-list

@anker-fe/ui-todo-list-v2

基于全新utils-headless架构的Todo列表组件，完全按照ui-editor的最新架构模式实现。

🏗️ 新架构特点

基于最新utils-headless

• 使用createHeadless(workspace)创建workspace实例
• 使用getHeadless(workspace).getFeature(name)获取功能特性
• 通过createData、createEvent创建数据和事件

功能特性模式

每个功能特性包含：

const FeatureOptions = { data, event, api }
headless.createFeature(FeatureName, FeatureOptions)

declare module '../headless' {
  interface Features {
    [FeatureName]: typeof FeatureOptions
  }
}

🚀 使用方式

1. Web端使用

import React from 'react'
import { WebTodoApp } from '@anker-fe/ui-todo-list-v2'

function App() {
  return (
    <div>
      <WebTodoApp />
    </div>
  )
}

2. Mobile端使用

import React from 'react'
import { MobileTodoApp } from '@anker-fe/ui-todo-list-v2'

function App() {
  return <MobileTodoApp />
}

3. 直接使用Headless功能

import { getHeadless } from '@anker-fe/ui-todo-list-v2'

// 获取功能特性
const addTodoFeature = getHeadless('todo-list').getFeature('add-todo')
const todosFeature = getHeadless('todo-list').getFeature('todos')

// 使用API
addTodoFeature.api.addTodo('新的待办事项')

// 获取数据
const items = todosFeature.data.value.items

// 监听事件
addTodoFeature.event.on('afterAdd', (data) => {
  console.log('添加了todo:', data)
})

🔌 自定义功能特性

创建新的功能特性

// 1. 创建数据
import { createData } from '@dimples/utils-headless'
export const data = createData({
  customValue: 'initial'
})

// 2. 创建事件
import { createEvent } from '@dimples/utils-headless'
export const event = createEvent<{
  customEvent: [string]
}>()

// 3. 创建API
import { getHeadless } from '@dimples/utils-headless'
export const customAction = (value: string) => {
  const feature = getHeadless('todo-list').getFeature('custom-feature')
  feature.data.value.customValue = value
  feature.event.emit('customEvent', value)
}

// 4. 注册功能特性
import { data } from './data'
import { event } from './event'
import * as api from './api'
import { headless } from '../headless'

const FeatureName = 'custom-feature' as const
const FeatureOptions = { data, event, api }
headless.createFeature(FeatureName, FeatureOptions)

declare module '../headless' {
  interface Features {
    [FeatureName]: typeof FeatureOptions
  }
}

📋 可用功能特性

todos

• Data: items, filter, loading, error
• API: getTodos(), getFilteredTodos()
• Events: itemsChange, filterChange

add-todo

• Data: inputValue, isAdding
• API: addTodo(text), setInputValue(value)
• Events: beforeAdd, afterAdd, addFailed

remove-todo

• API: removeTodo(id)
• Events: beforeRemove, afterRemove

toggle-todo

• API: toggleTodo(id)
• Events: beforeToggle, afterToggle

🎯 事件监听示例

import { getHeadless } from '@anker-fe/ui-todo-list-v2'

const addTodoFeature = getHeadless('todo-list').getFeature('add-todo')

// 监听添加成功事件
addTodoFeature.event.on('afterAdd', (data) => {
  console.log('添加了新的todo:', data)
  // 可以在这里添加自定义逻辑，如统计、通知等
})

// 监听添加失败事件
addTodoFeature.event.on('addFailed', (data) => {
  if (data.reason === 'empty') {
    alert('请输入待办事项内容')
  }
})

🏗️ 架构优势

• 标准化架构 - 完全遵循utils-headless最新架构
• 工作区隔离 - 通过workspace避免功能特性冲突
• 类型安全 - 完整的TypeScript支持和模块声明增强
• 功能模块化 - 每个功能特性独立封装
• 事件驱动 - 基于事件的松耦合通信
• 跨端复用 - 逻辑层完全共享，UI层独立实现

这个架构完全基于ui-editor的最新实现模式，与anker-fe项目保持完全一致！🎉