Cursor Plugin
Cursor 插件 · 核心状态演示
保留欢迎、登录注册、正常面板、故障诊断、退出登录 5 个核心状态，用于展示插件从接入到日常使用的关键流程。
Lifecycle Flow
插件核心状态流程
TodoList.tsx — vibe-app — Cursor
CP
explorer
vibe-app
⌄src
▧App.tsx
▧TodoList.tsx
▧api.ts
▧store.ts
›public
▧package.json
▧tsconfig.json
TodoList.tsxApp.tsx
1import { useState } from 'react'
2import type { Todo } from './types'
4export function TodoList() {
5 const [items, setItems] = useState<Todo[]>([])
6 const [filter, setFilter] = useState<'all'|'open'|'done'>('all')
8 const add = (title: string) => {
9 setItems(prev => [...prev, { id: uid(), title, done: false }])
12 const toggle = (id: string) => {
13 setItems(prev => prev.map(it =>
14 it.id === id ? { ...it, done: !it.done } : it
21 return (
22 <section className="max-w-md mx-auto">
23 <Header onAdd={add} />
24 <FilterBar value={filter} onChange={setFilter} />
27 <TodoItem key={it.id} item={it} onToggle={toggle} />
30 </section>
32}
mainTypeScriptUTF-8LFCodePass · 28ms · 已启用
+
5 个核心状态 · 聚焦关键流程
当前保留欢迎、登录注册、正常面板、故障诊断、退出登录，覆盖插件接入、验证、日常使用、排障和退出的主路径。
+
设计稿 SDK 面板还原
右侧 SDK 示例采用暗色 Header、Account、Tools、Diagnostic Card 与 Footer，贴近 Cursor 内嵌插件外观。
+
IDE 顶部 / 底部状态条联动
核心状态会同步影响 Cursor 标题栏和底部状态栏文案，确保一眼能识别。