鸿蒙 架构实战：分层架构、MVVM 与状态驱动 UI

// ❌ 反模式：UI 层直接访问数据库
@Component
struct BadExample {
  async loadData() {
    const db = relationalStore.getRdbStore(...) // UI 层不应知道数据库细节
  }
}

// ✅ 正确：通过 Repository 隔离
export class UserRepository {
  private db: relationalStore.RdbStore
  async getUsers(): Promise<User[]> {
    const result = await this.db.query('users')
    return result.rows.map(row => new User(row))
  }
}

@Component
struct GoodExample {
  private repo = new UserRepository()
  @State users: User[] = []
  
  async aboutToAppear() {
    this.users = await this.repo.getUsers() // UI 只关心业务对象
  }
}

// Model
export class Todo {
  constructor(public id: string, public text: string, public done: boolean) {}
}

// ViewModel
export class TodoViewModel {
  @State todos: Todo[] = []
  @State inputText: string = ''
  
  private repo = new TodoRepository()
  
  async loadTodos() {
    this.todos = await this.repo.getAll()
  }
  
  async addTodo() {
    if (!this.inputText.trim()) return
    const newTodo = await this.repo.create(this.inputText)
    this.todos = [...this.todos, newTodo]
    this.inputText = ''
  }
  
  async toggleTodo(id: string) {
    const todo = this.todos.find(t => t.id === id)
    if (todo) {
      todo.done = !todo.done
      await this.repo.update(todo)
      this.todos = [...this.todos] // 触发刷新
    }
  }
}

// View
@Component
struct TodoListView {
  @State vm: TodoViewModel = new TodoViewModel()
  
  aboutToAppear() {
    this.vm.loadTodos()
  }
  
  build() {
    Column() {
      TextInput({ text: this.vm.inputText })
        .onChange(v => this.vm.inputText = v)
      Button('添加').onClick(() => this.vm.addTodo())
      
      List() {
        ForEach(this.vm.todos, (todo: Todo) => {
          ListItem() {
            Row() {
              Checkbox().select(todo.done)
                .onChange(() => this.vm.toggleTodo(todo.id))
              Text(todo.text).decoration(todo.done ? TextDecorationType.LineThrough : TextDecorationType.None)
            }
          }
        }, (todo: Todo) => todo.id)
      }
    }
  }
}

// Action 定义
type Action = 
  | { type: 'ADD_TODO', text: string }
  | { type: 'TOGGLE_TODO', id: string }
  | { type: 'SET_TODOS', todos: Todo[] }

// State 定义
interface AppState {
  todos: Todo[]
}

// Reducer
function todoReducer(state: AppState, action: Action): AppState {
  switch (action.type) {
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, new Todo(Date.now().toString(), action.text, false)] }
    case 'TOGGLE_TODO':
      return { 
        ...state, 
        todos: state.todos.map(t => t.id === action.id ? { ...t, done: !t.done } : t) 
      }
    case 'SET_TODOS':
      return { ...state, todos: action.todos }
    default:
      return state
  }
}

// Store
class Store {
  @State private state: AppState = { todos: [] }
  
  dispatch(action: Action) {
    this.state = todoReducer(this.state, action)
  }
  
  getState(): AppState {
    return this.state
  }
}

// View
@Component
struct TodoApp {
  private store = new Store()
  
  build() {
    Column() {
      Button('添加').onClick(() => this.store.dispatch({ type: 'ADD_TODO', text: '新任务' }))
      List() {
        ForEach(this.store.getState().todos, (todo: Todo) => {
          ListItem() {
            Text(todo.text).onClick(() => this.store.dispatch({ type: 'TOGGLE_TODO', id: todo.id }))
          }
        })
      }
    }
  }
}