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

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

🏗️ 新架构特点

$3

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

$3

每个功能特性包含：
``ts
const FeatureOptions = { data, event, api }
headless.createFeature(FeatureName, FeatureOptions)

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

🚀 使用方式

$3

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

function App() {
return (



)
}
`

$3

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

function App() {
return
}
`

$3

`tsx
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)
})
`

🔌 自定义功能特性

$3

`tsx
// 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
}
}
`

📋 可用功能特性

$3


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

$3

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

$3

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

$3

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

🎯 事件监听示例

`tsx
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('请输入待办事项内容')
}
})
``

🏗️ 架构优势

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

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