新增页面

创建页面组件

// console/src/pages/todos/index.tsx
import { useState, useEffect } from 'react'
import { http, Button, Input } from '@readystart/console-core'

export default function TodosPage() {
  const [todos, setTodos] = useState<any[]>([])
  const [title, setTitle] = useState('')

  const fetchTodos = async () => {
    const res = await http.post('/v1/todos/list')
    if (res.statusCode === 200) setTodos(res.data)
  }

  const addTodo = async () => {
    if (!title) return
    const res = await http.post('/v1/todos/create', { title })
    if (res.statusCode === 200) {
      setTitle('')
      fetchTodos()
    }
  }

  useEffect(() => { fetchTodos() }, [])

  return (
    <div>
      <h2 className="text-lg font-medium mb-4">Todos</h2>
      <div className="flex gap-2 mb-4 max-w-md">
        <Input value={title} onChange={e => setTitle(e.target.value)} placeholder="New todo" />
        <Button onClick={addTodo}>Add</Button>
      </div>
      <div className="space-y-2">
        {todos.map(t => (
          <div key={t.id} className="p-3 bg-white rounded shadow-sm">{t.title}</div>
        ))}
      </div>
    </div>
  )
}

添加路由

// console/src/router/index.tsx
import TodosPage from '@/pages/todos'

// 在 AuthGuard > MainLayout children 中添加：
{ path: '/todos', element: <TodosPage /> },

路由类型

位置	说明
`AuthGuard > MainLayout > children`	需要登录，有侧边栏布局
`AuthGuard > children`（MainLayout 外）	需要登录，无侧边栏（如邀请页）
`GuestGuard > children`	仅未登录可访问（登录、注册页）

AuthGuard 工作原理

1. 检查 localStorage 中是否有 token
2. 调用 fetchUser() 验证 token
3. 调用 fetchTenants() 获取组织列表
4. 再次 fetchUser() 获取 tenant.role
5. 并行加载 fetchConfig() + fetchAll()（计费数据）

登出时清除所有状态：token、user、billing、tenant。