diff --git a/docs/prototype/code-reader/openpencil/exports/react-state-hooks.png b/docs/prototype/code-reader/openpencil/exports/react-state-hooks.png new file mode 100644 index 0000000..3c85c5f Binary files /dev/null and b/docs/prototype/code-reader/openpencil/exports/react-state-hooks.png differ diff --git a/docs/prototype/code-reader/openpencil/react-shared.js b/docs/prototype/code-reader/openpencil/react-shared.js index 1cc7a3f..c5158cc 100644 --- a/docs/prototype/code-reader/openpencil/react-shared.js +++ b/docs/prototype/code-reader/openpencil/react-shared.js @@ -174,7 +174,7 @@ function link(text, color) { // ─── 源码着色 ──────────────────────────────────────────────────────────────── -const TSX_TOKEN = /'[^']*'|"[^"]*"|=>|\.\.\.|\?\.|&&|<\/|\/>|[A-Za-z_$][\w$]*|\d+(?:\.\d+)?|\s+|[\s\S]/g; +const TSX_TOKEN = /'[^']*'|"[^"]*"|`[^`]*`|=>|\.\.\.|\?\.|&&|<\/|\/>|[A-Za-z_$][\w$]*|\d+(?:\.\d+)?|\s+|[\s\S]/g; const TSX_STORAGE = new Set(["const", "let", "var", "function", "new", "typeof", "true", "false", "null", "undefined", "this"]); const TSX_CONTROL = new Set(["import", "export", "from", "return", "if", "else", "switch", "case", "default", "await"]); const TSX_PRIMITIVE = new Set(["string", "number", "boolean", "void", "any", "unknown"]); @@ -211,7 +211,7 @@ function highlight(lines) { prev = tok; continue; } - if (/^['"]/.test(tok)) + if (/^['"`]/.test(tok)) color = C.string; else if (/^\d/.test(tok)) color = C.number; @@ -583,7 +583,7 @@ function conceptIcon(parent, item) { /** * 一张卡片：折叠箭头（有子块才有：`open` 展开、`closed` 收起）、概念图标、内容、右上角两个按钮。 * 概念图标默认是种类图标一个，给了 `icons` 就并排画这几个（`{name, color, tip, bubble?}`）。 - * 淡底默认用种类色，给了 `tint` 用它（钩子卡片按来源分底色）。给了 `calls` 右上角多一个调用树按钮。 + * 淡底、描边默认用种类色，给了 `tint`、`stroke` 用它们（钩子卡片按来源分底色）。给了 `calls` 右上角多一个调用树按钮。 * 放进自由摆放的框里时给 `x`、`y`，宽度定成 `w`。 * `w` 是卡片外宽；返回内容区和内容区的宽度，属性行、表格按它断行。 */ @@ -600,7 +600,7 @@ function card(parent, kind, w, o) { radius: 8, align: "start", fill: bg, - stroke: mix(kind.color, C.editor, 0.35), + stroke: mix(opt.stroke || kind.color, C.editor, 0.35), }); const fold = row(node, "Fold", { width: 14, height: 20, justify: "center" }); if (opt.fold) diff --git a/docs/prototype/code-reader/openpencil/react-state.js b/docs/prototype/code-reader/openpencil/react-state.js index 6bd8169..dfbaf7d 100644 --- a/docs/prototype/code-reader/openpencil/react-state.js +++ b/docs/prototype/code-reader/openpencil/react-state.js @@ -3,7 +3,8 @@ // 它来自 React 内置的 useState（悬停说明）；状态类型；默认值。解构表的「操作」一列放每一项能做的操作， // 现在是调用树：当前值查谁用了它，修改函数查谁改了它。 // 画板一照抄 luffy-agent-platform 的 frontend/client-nextjs/src/app/desktop/login/page.tsx 第 1–37 行， -// 画板二是手写的三行，讲没标类型、函数形式的默认值、只取当前值三种写法。 +// 画板二是手写的三行，讲没标类型、函数形式的默认值、只取当前值三种写法； +// 画板三把其它常用钩子照同一个思路画：卡片讲这个变量（或这条语句）是什么，钩子退到「来自」一行，样例是手写的搜索面板。 // 窗口、对齐、别的卡片的画法在同目录 react-shared.js，接在它后面跑：`cat react-shared.js react-state.js | op design - --script`。 // ─── 样例源码 ──────────────────────────────────────────────────────────────── @@ -81,12 +82,26 @@ const VARIANTS = sampleFile({ ], }); -// ─── 状态卡片 ──────────────────────────────────────────────────────────────── +// ─── 变量卡片：讲「这个变量是什么」，钩子退到「来自」一行 ──────────────────── -// 种类「状态」：描边、淡底、两个图标都用变量色；左边先是变量卡片的图标，再是状态图标，悬停才出名字 -const STATE = { label: "状态", color: "#9cdcfe", icon: "variable" }; +// 左边第一个图标是语言的概念：变量、语句、函数，颜色同各自的卡片 +const VAR = { icon: "variable", color: "#9cdcfe", tip: "变量" }; +const STMT = { icon: "code", color: "#9d9d9d", tip: "语句" }; +const FUNC = { icon: "square-function", color: "#dcdcaa", tip: "函数" }; -// 解构出的每一项：说明、它那一行调用树按钮查什么（悬停文字） +// 第二个图标是 React 的概念，也是种类：描边、淡底默认用它的颜色，悬停写 `tip` +const STATE = { label: "状态", color: "#9cdcfe", icon: "toggle-right", tip: "React 状态" }; +const HOOK_VALUE = { label: "钩子返回值", color: "#b180d7", icon: "fishing-hook", tip: "钩子返回值" }; +const CONTEXT_VALUE = { label: "上下文值", color: "#4ec9b0", icon: "share-2", tip: "上下文值" }; +const TRANSITION = { label: "过渡", color: "#ce9178", icon: "hourglass", tip: "过渡" }; +const REF = { label: "引用", color: "#4fc1ff", icon: "anchor", tip: "引用" }; +const MEMO_VALUE = { label: "记忆值", color: "#b5cea8", icon: "sigma", tip: "记忆值" }; +const MEMO_FN = { label: "记忆函数", color: "#b5cea8", icon: "sigma", tip: "记忆函数" }; +const EFFECT = { label: "副作用", color: "#e5c07b", icon: "zap", tip: "副作用" }; + +const BUILTIN_TIP = "React 内置钩子"; + +// useState 解构出的两项：说明、它那一行调用树按钮查什么（悬停文字） const ITEMS = [ { what: "当前值", tip: "谁用了这个状态" }, { what: "修改函数", tip: "谁改了这个状态" }, @@ -97,20 +112,25 @@ function callTreeWidth(calls) { return calls === 0 ? 22 : 4 + 14 + 1 + 14 + 4; } +/** 「操作」一列的宽：按这张卡里按钮最宽的那一行，不窄于表头。 */ +function opsWidth(calls) { + return Math.max(Math.ceil(widthOf("操作", 12, false) + 18), 8 + Math.max(...calls.map(callTreeWidth)) + 8); +} + /** 「操作」一格：这一项能做的操作从左往右排，现在只有调用树。 */ -function opsCell(item, calls) { +function opsCell(tip, calls) { return { est: "", draw: (frame) => { const line = row(frame, "Ops", { gap: 2, height: 20, width: "fit_content" }); - callTreeButton(line, calls, item.tip); + callTreeButton(line, calls, tip); }, }; } /** * 第 `n` 行调用树按钮的悬停气泡在卡片里的位置：在按钮正下方居中、隔 6px。 - * 按钮上方是上一行的按钮，右边伸出卡片，只有下面空着（「来自」那一行的右半边）。 + * 按钮上方是上一行的按钮，右边伸出卡片，只有下面空着（表格下面那一行的右半边）。 * 卡片里的位置照 [card]、[table] 的排法算：内容区左边在 84px（内边距 8、折叠箭头 14、两个图标 42、两处间距 10）， * 宽是卡片宽减 150；表从内容区上方 8 + 名称一行 20 + 间距 3 处开始，表格框留白 2、表头 24、每行前面 1px 分隔线、行高 24， * 一行的各格从表格框左边 5px 排到内容区右边往回 2px，「操作」一格在最右，按钮在格子左边 8px、上边 2px。 @@ -124,55 +144,136 @@ function opsBubble(w, n, opsW, calls, tip) { return { x: buttonX + callTreeWidth(calls) / 2 - tooltipWidth(tip) / 2, y: buttonBottom + 6 }; } -/** - * 一处 useState：名称照源码写出解构（后面灰字「数组解构」，展开是「第几项 | 名称 | 说明 | 操作」）/ - * 来自（悬停说是 React 内置钩子）/ 状态类型 / 默认值。 - * `names` 是解构出的名字，第二个是修改函数；`calls` 是各项在样例里出现几次，「操作」一格里调用树按钮上的数字。 - * 「操作」一列按这张卡里按钮最宽的那一行定宽（不窄于表头），「说明」一列分剩下的。 - * `type` 是状态类型（没写时「未标注」），`initial` 是默认值的着色段。 - * `bubble` 画出修改函数那一行调用树按钮的悬停气泡：卡片和气泡放进一个自由摆放的框，气泡在前，才画在卡片上层。 - */ -function stateCard(s) { - return (parent, w) => { - const icons = [ - { name: "variable", color: STATE.color, tip: "变量" }, - { name: "toggle-right", color: STATE.color, tip: "React 状态" }, - ]; - const opsW = Math.max(Math.ceil(widthOf("操作", 12, false) + 18), 8 + Math.max(...s.calls.map(callTreeWidth)) + 8); - let holder = parent; - let place = {}; - if (s.bubble) { - holder = box(parent, "Hover / 谁改了这个状态", { layout: "none", width: w, height: "fit_content" }); - const spot = opsBubble(w, 2, opsW, s.calls[1], ITEMS[1].tip); - tooltip(holder, ITEMS[1].tip, spot.x, spot.y); - place = { x: 0, y: 0 }; - } - const ctx = card(holder, STATE, w, Object.assign({ name: s.names[0], icons }, place)); - prop(ctx, "名称", (frame) => { - const line = row(frame, "Destructure", { gap: 8, height: 20, width: "fit_content" }); - const parts = [seg("[", C.fg)]; - s.names.forEach((name, i) => { - if (i > 0) - parts.push(seg(", ", C.fg)); - parts.push(seg(name, i === 0 ? C.variable : C.fn, { w: 600 })); - }); - parts.push(seg("]", C.fg)); - text(line, parts, { mono: true }); - text(line, "数组解构", { size: 12.5, color: C.desc }); - }, { fold: "open" }); - table(ctx, [{ name: "第几项", mono: false }, { name: "名称", color: C.variable }, { name: "说明", mono: false, fill: true }, { name: "操作", width: opsW }], - s.names.map((name, i) => [indexCell(i + 1), px(name, i === 0 ? C.variable : C.fn), ITEMS[i].what, opsCell(ITEMS[i], s.calls[i])])); - prop(ctx, "来自", (frame) => text(frame, px("useState", C.fn), { mono: true, name: "useState（悬停：React 内置钩子）" })); - prop(ctx, "状态类型", s.type || px("未标注", C.desc), { mono: Boolean(s.type) }); - prop(ctx, "默认值", s.initial); - }; -} - /** 「第几项」一格：只有一个数字，宽度定死，按内容长会被导出时挤小。 */ function indexCell(n) { return { est: String(n), draw: (frame) => text(frame, String(n), { size: 12.5, color: C.desc, lh: 20, fixedW: 12 }) }; } +/** + * 「名称」一行。只接一个名字时是名字加最右边的调用树按钮，按钮和表格「操作」一列的按钮对齐在同一个 x； + * 解构时照源码写出 `[a, b]` / `{ a, b }`，后面灰字「数组解构」「对象解构」，展开是一张表： + * 数组「第几项 | 名称 | 说明 | 操作」，对象「名称 | 说明 | 操作」（没有说明的项时不出说明一列，改了名时前面多一列「键」）。 + */ +function nameRow(ctx, s, opsW) { + if (typeof s.name === "string") { + prop(ctx, "名称", (frame) => { + const line = row(frame, "Name", { height: 20 }); + text(line, [seg(s.name, s.nameColor || C.variable, { w: 600 })], { mono: true }); + spacer(line, "Spacer", "fill_container", 8); + const ops = row(line, "Ops", { width: opsW - 6, height: 20, gap: 2 }); + callTreeButton(ops, s.calls, s.tip); + }); + return; + } + const d = s.name; + const array = d.kind === "array"; + prop(ctx, "名称", (frame) => { + const line = row(frame, "Destructure", { gap: 8, height: 20, width: "fit_content" }); + const parts = [seg(array ? "[" : "{ ", C.fg)]; + d.items.forEach((item, i) => { + if (i > 0) + parts.push(seg(", ", C.fg)); + parts.push(seg(item.name, item.color || C.variable, { w: 600 })); + }); + parts.push(seg(array ? "]" : " }", C.fg)); + text(line, parts, { mono: true }); + text(line, array ? "数组解构" : "对象解构", { size: 12.5, color: C.desc }); + }, { fold: "open" }); + const described = d.items.some((item) => item.what); + const keyed = !array && d.items.some((item) => item.key); + const cols = []; + if (array) + cols.push({ name: "第几项", mono: false }); + if (keyed) + cols.push({ name: "键", color: C.variable }); + cols.push(Object.assign({ name: "名称", color: C.variable }, described ? {} : { fill: true })); + if (described) + cols.push({ name: "说明", mono: false, fill: true }); + cols.push({ name: "操作", width: opsW }); + table(ctx, cols, d.items.map((item, i) => { + const cells = []; + if (array) + cells.push(indexCell(i + 1)); + if (keyed) + cells.push(px(item.key || "", C.variable)); + cells.push(px(item.name, item.color || C.variable)); + if (described) + cells.push(item.what || ""); + cells.push(opsCell(item.tip, item.calls)); + return cells; + })); +} + +/** + * 一张讲变量（或一条语句）的卡片：左边两个图标，先是语言的概念 `lang`，再是 React 的概念 `kind`，悬停才出名字； + * 描边、淡底默认用 `kind` 的颜色，`stroke`、`tint` 另给。`title` 写进图层名。 + * `name` 是只接的一个名字（按钮的次数 `calls`、悬停 `tip`），或解构 `{kind: "array" | "object", items}`， + * 每项 `{name, color?, what?, key?, calls, tip}`；没有就不出名称一行。`rows` 是后面各行，见 [line]、[fromRow]。 + * `bubble` 画出解构表第 2 行调用树按钮的悬停气泡：卡片和气泡放进一个自由摆放的框，气泡在前，才画在卡片上层。 + * 右上角只有问 AI、编辑；`fold` 表示有函数体子块，收起。 + */ +function valueCard(s) { + return (parent, w) => { + const icons = [ + { name: s.lang.icon, color: s.lang.color, tip: s.lang.tip }, + { name: s.kind.icon, color: s.kind.color, tip: s.kind.tip }, + ]; + const calls = typeof s.name === "string" ? [s.calls] : s.name ? s.name.items.map((item) => item.calls) : []; + const opsW = calls.length > 0 ? opsWidth(calls) : 0; + let holder = parent; + let place = {}; + if (s.bubble) { + const item = s.name.items[1]; + holder = box(parent, "Hover / " + item.tip, { layout: "none", width: w, height: "fit_content" }); + const spot = opsBubble(w, 2, opsW, item.calls, item.tip); + tooltip(holder, item.tip, spot.x, spot.y); + place = { x: 0, y: 0 }; + } + const ctx = card(holder, s.kind, w, Object.assign({ name: s.title, icons, fold: s.fold, tint: s.tint, stroke: s.stroke }, place)); + if (s.name) + nameRow(ctx, s, opsW); + for (const draw of s.rows) draw(ctx); + }; +} + +/** 一行属性，同 [prop]。 */ +const line = (label, value, o) => (ctx) => prop(ctx, label, value, o); + +/** 「来自」一行：钩子名，悬停说它是谁提供的（记在图层名里）；自己写的钩子 `linked`，能点到定义。 */ +const fromRow = (hook, tip, linked) => (ctx) => prop(ctx, "来自", (frame) => + text(frame, [seg(hook, C.fn, linked ? { u: true } : {})], { mono: true, name: `${hook}（悬停：${tip}）` })); + +/** 收起的函数体一行：小框「函数 (参数) · N 句」，同 [fnBox]。 */ +const fnRow = (label, params, count) => (ctx) => prop(ctx, label, (frame) => fnBox(params, count).draw(frame)); + +/** 带「N 个」和展开表的一行（参数）。 */ +const tableRow = (label, cols, rows) => (ctx) => { + prop(ctx, label, px(`${rows.length} 个`, C.desc), { mono: false, fold: "open" }); + table(ctx, cols, rows); +}; + +/** 依赖的几个值变化时：名字用顿号连起来。 */ +const changedAll = (names) => names.flatMap((name, i) => (i > 0 ? [seg("、", C.fg)] : []).concat([seg(name, C.variable)])).concat([seg(" 变化时", C.keyword)]); + +/** + * 一处 useState：名称照源码写出解构（展开是「第几项 | 名称 | 说明 | 操作」，当前值查谁用了它，修改函数查谁改了它）/ + * 来自 / 状态类型（没写时「未标注」）/ 默认值。`names` 是解构出的名字，`calls` 是各项在样例里出现几次。 + */ +function stateCard(s) { + return valueCard({ + kind: STATE, + lang: VAR, + title: s.names[0], + name: { kind: "array", items: s.names.map((name, i) => ({ name, color: i === 0 ? C.variable : C.fn, what: ITEMS[i].what, tip: ITEMS[i].tip, calls: s.calls[i] })) }, + bubble: s.bubble, + rows: [ + fromRow("useState", BUILTIN_TIP), + line("状态类型", s.type || px("未标注", C.desc), { mono: Boolean(s.type) }), + line("默认值", s.initial), + ], + }); +} + // ─── 画板一：登录页 ────────────────────────────────────────────────────────── const LOGIN_PAGE = componentCard({ @@ -276,3 +377,270 @@ windowOf("Prototype / React 状态 · 其他写法", WIN_W + BOARD_GAP, VARIANTS draw: stateCard({ names: ["count"], calls: [0], initial: cx("0") }), }, ]); + +// ─── 画板三：其它常用钩子 ──────────────────────────────────────────────────── + +// 搜索面板：return 里的 JSX 是补写的，每个名字在样例里出现几次就是它调用树按钮上的数（依赖数组里的不算） +const SEARCH = sampleFile({ + project: "web", + file: "SearchPanel.tsx", + crumbs: ["src", "search", "SearchPanel.tsx"], + tree: [ + { kind: "folder", name: "src", open: true, depth: 0 }, + { kind: "folder", name: "hooks", open: false, depth: 1 }, + { kind: "folder", name: "lib", open: false, depth: 1 }, + { kind: "folder", name: "search", open: true, depth: 1 }, + { kind: "file", name: "SearchPanel.tsx", depth: 2 }, + ], + count: 6, + source: [ + "\"use client\";", + "", + "import { useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState, useTransition } from \"react\";", + "import { useRouter } from \"next/navigation\";", + "", + "import { AuthContext } from \"@/lib/auth\";", + "import { useSearch } from \"@/hooks/use-search\";", + "import { EMPTY_FILTER, filterReducer } from \"./filter\";", + "", + "export const SearchPanel = ({ initialQuery }: { initialQuery: string }) => {", + " const router = useRouter();", + " const { user, logout } = useContext(AuthContext);", + " const [query, setQuery] = useState(initialQuery);", + " const [filter, dispatch] = useReducer(filterReducer, EMPTY_FILTER);", + " const { results, loading } = useSearch(query, filter);", + " const [isPending, startTransition] = useTransition();", + " const inputRef = useRef(null);", + " const visible = useMemo(() => results.filter((r) => !r.hidden), [results]);", + "", + " const submit = useCallback((e: FormEvent) => {", + " e.preventDefault();", + " startTransition(() => router.push(`/search?q=${query}`));", + " }, [router, query]);", + "", + " useEffect(() => {", + " inputRef.current?.focus();", + " }, []);", + "", + " useEffect(() => {", + " if (!user) logout();", + " }, [user, logout]);", + "", + " return (", + "
", + " setQuery(e.target.value)} />", + " ", + " {isPending && 跳转中…}", + " {loading &&

搜索中…

}", + " ", + "
", + " );", + "};", + ], +}); + +const SEARCH_PANEL = componentCard({ + name: "SearchPanel", + fold: "open", + tags: [EXPORTED, CLIENT], + props: [["initialQuery", "字符串", "—", "是"]], +}); + +const ROUTER = valueCard({ + kind: HOOK_VALUE, + lang: VAR, + tint: ORIGIN.library, + title: "router", + name: "router", + calls: 1, + tip: "谁用了", + rows: [ + fromRow("useRouter", "next/navigation 提供的钩子"), + line("说明", px("路由器，用于页面跳转", C.fg), { mono: false }), + ], +}); + +const AUTH = valueCard({ + kind: CONTEXT_VALUE, + lang: VAR, + title: "user, logout", + name: { + kind: "object", + items: [ + { name: "user", calls: 1, tip: "谁用了" }, + { name: "logout", color: C.fn, calls: 1, tip: "谁调用了" }, + ], + }, + rows: [ + fromRow("useContext", BUILTIN_TIP), + line("上下文", [link("AuthContext", CONTEXT_VALUE.color)]), + ], +}); + +const QUERY = stateCard({ + names: ["query", "setQuery"], + calls: [3, 1], + initial: cx("initialQuery"), +}); + +const FILTER = valueCard({ + kind: STATE, + lang: VAR, + title: "filter", + name: { + kind: "array", + items: [ + { name: "filter", what: "当前值", calls: 1, tip: "谁用了" }, + { name: "dispatch", color: C.fn, what: "派发函数", calls: 1, tip: "谁派发了动作" }, + ], + }, + rows: [ + fromRow("useReducer", BUILTIN_TIP), + line("处理函数", [link("filterReducer", C.fn)]), + line("状态类型", px("未标注", C.desc), { mono: false }), + line("初始值", [link("EMPTY_FILTER", C.constant)]), + ], +}); + +const RESULTS = valueCard({ + kind: HOOK_VALUE, + lang: VAR, + tint: ORIGIN.own, + title: "results, loading", + name: { + kind: "object", + items: [ + { name: "results", calls: 1, tip: "谁用了" }, + { name: "loading", calls: 1, tip: "谁用了" }, + ], + }, + rows: [ + fromRow("useSearch", "自定义钩子", true), + tableRow("参数", [{ name: "参数", color: C.variable }, { name: "值" }], [["query", cx("query")], ["filter", cx("filter")]]), + ], +}); + +const PENDING = valueCard({ + kind: TRANSITION, + lang: VAR, + title: "isPending, startTransition", + name: { + kind: "array", + items: [ + { name: "isPending", what: "是否正在过渡", calls: 1, tip: "谁用了" }, + { name: "startTransition", color: C.fn, what: "启动过渡的函数", calls: 1, tip: "谁调用了" }, + ], + }, + rows: [fromRow("useTransition", BUILTIN_TIP)], +}); + +const INPUT_REF = valueCard({ + kind: REF, + lang: VAR, + title: "inputRef", + name: "inputRef", + calls: 2, + tip: "谁用了", + rows: [ + fromRow("useRef", BUILTIN_TIP), + line("指向类型", cx("HTMLInputElement")), + line("初始值", cx("空")), + ], +}); + +const VISIBLE = valueCard({ + kind: MEMO_VALUE, + lang: VAR, + title: "visible", + name: "visible", + calls: 1, + tip: "谁用了", + rows: [ + fromRow("useMemo", BUILTIN_TIP), + line("计算", cx("results.filter((r) => r.hidden 不成立)")), + line("重算时机", changedAll(["results"])), + ], +}); + +const SUBMIT = valueCard({ + kind: MEMO_FN, + lang: FUNC, + stroke: C.fn, + tint: C.fn, + fold: "closed", + title: "submit", + name: "submit", + nameColor: C.fn, + calls: 1, + tip: "谁调用了", + rows: [ + fromRow("useCallback", BUILTIN_TIP), + tableRow("参数", [{ name: "名称", color: C.variable }, { name: "类型", color: C.type }], [["e", cx("FormEvent")]]), + fnRow("函数体", null, 2), + line("重建时机", changedAll(["router", "query"])), + ], +}); + +/** 一处 useEffect：没有名称一行，触发时机打头，执行的函数收成小框。 */ +function effectCard(title, trigger, count) { + return valueCard({ + kind: EFFECT, + lang: STMT, + fold: "closed", + title, + rows: [ + line("触发时机", trigger, { mono: trigger !== ON_MOUNT }), + fromRow("useEffect", BUILTIN_TIP), + fnRow("执行", null, count), + ], + }); +} + +// SearchPanel 返回的 JSX：条件写「当 … 时」，列表写「对 … 的每一项」并标 key，回调照译 +const SEARCH_OUTLINE = [ + { + line: [el("form"), at("onSubmit", [link("submit", C.fn)])], + kids: [ + { line: [el("input"), at("ref", [link("inputRef", C.variable)]), at("value", [link("query", C.variable)]), at("onChange", cx("(e) => setQuery(e.target.value)"))] }, + { line: [el("button"), at("type", px("\"button\"", C.string)), at("onClick", cx("() => dispatch({ type: \"toggleHidden\" })")), words(px("\"显示隐藏项\"", C.string))] }, + { line: [cond(cx("当 isPending 时")), el("span"), words(px("\"跳转中…\"", C.string))] }, + { line: [cond(cx("当 loading 时")), el("p"), words(px("\"搜索中…\"", C.string))] }, + { + line: [el("ul")], + kids: [ + { + line: [cond(cx("对 visible 的每一项 r"), C.loop), words([seg("key ", C.desc)].concat(cx("r.id")))], + kids: [{ line: [el("li"), words([seg("{", C.desc)].concat(cx("r.title"), [seg("}", C.desc)]))] }], + }, + ], + }, + ], + }, +]; + +windowOf("Prototype / React 内置钩子 · 搜索面板", (WIN_W + BOARD_GAP) * 2, SEARCH, [ + { from: 1, to: 2 }, + { from: 3, to: 3, draw: importCard("\"react\"", 8) }, + { from: 4, to: 5, draw: importCard("\"next/navigation\"", 1) }, + { from: 6, to: 6, draw: importCard("\"@/lib/auth\"", 1) }, + { from: 7, to: 7, draw: importCard("\"@/hooks/use-search\"", 1) }, + { from: 8, to: 9, draw: importCard("\"./filter\"", 2) }, + { from: 10, to: 10, draw: SEARCH_PANEL }, + { from: 11, to: 11, depth: 1, draw: ROUTER }, + { from: 12, to: 12, depth: 1, draw: AUTH }, + { from: 13, to: 13, depth: 1, draw: QUERY }, + { from: 14, to: 14, depth: 1, draw: FILTER }, + { from: 15, to: 15, depth: 1, draw: RESULTS }, + { from: 16, to: 16, depth: 1, draw: PENDING }, + { from: 17, to: 17, depth: 1, draw: INPUT_REF }, + { from: 18, to: 19, depth: 1, draw: VISIBLE }, + { from: 20, to: 24, depth: 1, draw: SUBMIT }, + { from: 25, to: 28, depth: 1, draw: effectCard("仅挂载时", ON_MOUNT, 1) }, + { from: 29, to: 32, depth: 1, draw: effectCard("user、logout 变化时", changedAll(["user", "logout"]), 1) }, + { from: 33, to: 45, depth: 1, last: true, draw: renderCard(SEARCH_OUTLINE, "SearchPanel") }, + { from: 46, to: 46 }, +]); diff --git a/docs/prototype/code-reader/openpencil/react-state.op b/docs/prototype/code-reader/openpencil/react-state.op index b5b5ede..7b20d1d 100644 --- a/docs/prototype/code-reader/openpencil/react-state.op +++ b/docs/prototype/code-reader/openpencil/react-state.op @@ -20098,6 +20098,23123 @@ ] } ] + }, + { + "type": "frame", + "id": "n1183", + "name": "Prototype / React 内置钩子 · 搜索面板", + "x": 3560.0, + "y": 0.0, + "width": 1700.0, + "height": 62.0, + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#181818" + } + ], + "children": [ + { + "type": "frame", + "id": "n1184", + "name": "Title bar", + "width": "fill_container", + "height": 36.0, + "layout": "horizontal", + "gap": 0.0, + "padding": [ + 0.0, + 12.0 + ], + "justifyContent": "space_between", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1185", + "name": "Lights", + "width": "fit_content", + "height": "fit_content", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "ellipse", + "id": "n1186", + "width": 12.0, + "height": 12.0, + "fill": [ + { + "type": "solid", + "color": "#ff5f57" + } + ] + }, + { + "type": "ellipse", + "id": "n1187", + "width": 12.0, + "height": 12.0, + "fill": [ + { + "type": "solid", + "color": "#febc2e" + } + ] + }, + { + "type": "ellipse", + "id": "n1188", + "width": 12.0, + "height": 12.0, + "fill": [ + { + "type": "solid", + "color": "#28c840" + } + ] + } + ] + }, + { + "type": "text", + "id": "n1189", + "name": "web — SearchPanel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "web — SearchPanel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n1190", + "name": "Balance", + "width": 52.0, + "height": 12.0, + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n1191", + "name": "Body", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#181818" + } + ], + "children": [ + { + "type": "frame", + "id": "n1192", + "name": "Activity bar", + "width": 48.0, + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#181818" + } + ], + "children": [ + { + "type": "frame", + "id": "n1193", + "name": "Item / files", + "width": 48.0, + "height": 42.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1194", + "name": "files", + "iconFontName": "files", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1195", + "name": "Item / search", + "width": 48.0, + "height": 42.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1196", + "name": "search", + "iconFontName": "search", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1197", + "name": "Item / git-branch", + "width": 48.0, + "height": 42.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1198", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1199", + "name": "Item / play", + "width": 48.0, + "height": 42.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1200", + "name": "play", + "iconFontName": "play", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1201", + "name": "Item / monitor", + "width": 48.0, + "height": 42.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1202", + "name": "monitor", + "iconFontName": "monitor", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1203", + "name": "Item / blocks", + "width": 48.0, + "height": 42.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1204", + "name": "blocks", + "iconFontName": "blocks", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1205", + "name": "Item / rocket", + "width": 48.0, + "height": 42.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1206", + "name": "rocket", + "iconFontName": "rocket", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1207", + "name": "Item / book-open-text", + "width": 48.0, + "height": 42.0, + "layout": "horizontal", + "gap": 10.0, + "justifyContent": "start", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n1208", + "name": "Active bar", + "width": 2.0, + "height": 42.0, + "fill": [ + { + "type": "solid", + "color": "#0078d4" + } + ], + "children": [] + }, + { + "type": "icon_font", + "id": "n1209", + "name": "book-open-text", + "iconFontName": "book-open-text", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#d7d7d7" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1210", + "name": "Sidebar", + "width": 250.0, + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#181818" + } + ], + "children": [ + { + "type": "frame", + "id": "n1211", + "name": "Header", + "width": "fill_container", + "height": 34.0, + "layout": "horizontal", + "gap": 0.0, + "padding": [ + 0.0, + 12.0, + 0.0, + 16.0 + ], + "justifyContent": "space_between", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1212", + "name": "代码阅读", + "width": "fit_content", + "height": "fit_content", + "content": "代码阅读", + "fontFamily": "PingFang SC", + "fontSize": 11.0, + "fontWeight": 400, + "lineHeight": 1.818181818181818, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "frame", + "id": "n1213", + "name": "Actions", + "width": "fit_content", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1214", + "name": "git-pull-request", + "iconFontName": "git-pull-request", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n1215", + "name": "file-plus", + "iconFontName": "file-plus", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n1216", + "name": "refresh-cw", + "iconFontName": "refresh-cw", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1217", + "name": "Tree", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 4.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1218", + "name": "src", + "width": "fill_container", + "height": 26.0, + "layout": "horizontal", + "gap": 6.0, + "padding": [ + 0.0, + 8.0, + 0.0, + 10.0 + ], + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1219", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n1220", + "name": "folder", + "iconFontName": "folder", + "width": 15.0, + "height": 15.0, + "fill": [ + { + "type": "solid", + "color": "#8b9ba8" + } + ] + }, + { + "type": "text", + "id": "n1221", + "name": "src", + "width": "fit_content", + "height": "fit_content", + "content": "src", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1222", + "name": "hooks", + "width": "fill_container", + "height": 26.0, + "layout": "horizontal", + "gap": 6.0, + "padding": [ + 0.0, + 8.0, + 0.0, + 24.0 + ], + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1223", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n1224", + "name": "folder", + "iconFontName": "folder", + "width": 15.0, + "height": 15.0, + "fill": [ + { + "type": "solid", + "color": "#8b9ba8" + } + ] + }, + { + "type": "text", + "id": "n1225", + "name": "hooks", + "width": "fit_content", + "height": "fit_content", + "content": "hooks", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1226", + "name": "lib", + "width": "fill_container", + "height": 26.0, + "layout": "horizontal", + "gap": 6.0, + "padding": [ + 0.0, + 8.0, + 0.0, + 24.0 + ], + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1227", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n1228", + "name": "folder", + "iconFontName": "folder", + "width": 15.0, + "height": 15.0, + "fill": [ + { + "type": "solid", + "color": "#8b9ba8" + } + ] + }, + { + "type": "text", + "id": "n1229", + "name": "lib", + "width": "fit_content", + "height": "fit_content", + "content": "lib", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1230", + "name": "search", + "width": "fill_container", + "height": 26.0, + "layout": "horizontal", + "gap": 6.0, + "padding": [ + 0.0, + 8.0, + 0.0, + 24.0 + ], + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1231", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n1232", + "name": "folder", + "iconFontName": "folder", + "width": 15.0, + "height": 15.0, + "fill": [ + { + "type": "solid", + "color": "#8b9ba8" + } + ] + }, + { + "type": "text", + "id": "n1233", + "name": "search", + "width": "fit_content", + "height": "fit_content", + "content": "search", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1234", + "name": "SearchPanel.tsx", + "width": "fill_container", + "height": 26.0, + "layout": "horizontal", + "gap": 6.0, + "padding": [ + 0.0, + 8.0, + 0.0, + 38.0 + ], + "alignItems": "center", + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#04395e" + } + ], + "children": [ + { + "type": "frame", + "id": "n1235", + "name": "Twisty", + "width": 14.0, + "height": 14.0, + "children": [] + }, + { + "type": "icon_font", + "id": "n1236", + "name": "atom", + "iconFontName": "atom", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#519aba" + } + ] + }, + { + "type": "text", + "id": "n1237", + "name": "SearchPanel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "SearchPanel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#e8e8e8" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1238", + "name": "Editor", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#1f1f1f" + } + ], + "children": [ + { + "type": "frame", + "id": "n1239", + "name": "Group heads", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1240", + "name": "Editor group 1", + "width": 600.0, + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1241", + "name": "Editor title", + "width": "fill_container", + "height": 36.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "space_between", + "alignItems": "center", + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#181818" + } + ], + "children": [ + { + "type": "frame", + "id": "n1242", + "name": "Tab", + "width": 140.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#1f1f1f" + } + ], + "children": [ + { + "type": "rectangle", + "id": "n1243", + "name": "Active", + "width": "fill_container", + "height": 2.0, + "fill": [ + { + "type": "solid", + "color": "#1f1f1f" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1244", + "name": "Tab label", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 6.0, + "padding": [ + 0.0, + 12.0 + ], + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1245", + "name": "atom", + "iconFontName": "atom", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#519aba" + } + ] + }, + { + "type": "text", + "id": "n1246", + "name": "SearchPanel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "SearchPanel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1247", + "name": "Breadcrumb", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 6.0, + "padding": [ + 6.0, + 16.0 + ], + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1248", + "name": "src", + "width": "fit_content", + "height": "fit_content", + "content": "src", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1249", + "name": "/", + "width": "fit_content", + "height": "fit_content", + "content": "/", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + }, + { + "type": "text", + "id": "n1250", + "name": "search", + "width": "fit_content", + "height": "fit_content", + "content": "search", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1251", + "name": "/", + "width": "fit_content", + "height": "fit_content", + "content": "/", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + }, + { + "type": "text", + "id": "n1252", + "name": "SearchPanel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "SearchPanel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1253", + "name": "Filter room", + "width": "fill_container", + "height": 36.0, + "children": [] + } + ] + }, + { + "type": "rectangle", + "id": "n1254", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1255", + "name": "Editor group 2", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1256", + "name": "Editor title", + "width": "fill_container", + "height": 36.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "space_between", + "alignItems": "center", + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#181818" + } + ], + "children": [ + { + "type": "frame", + "id": "n1257", + "name": "Tab", + "width": 140.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#1f1f1f" + } + ], + "children": [ + { + "type": "rectangle", + "id": "n1258", + "name": "Active", + "width": "fill_container", + "height": 2.0, + "fill": [ + { + "type": "solid", + "color": "#0078d4" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1259", + "name": "Tab label", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 6.0, + "padding": [ + 0.0, + 12.0 + ], + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1260", + "name": "atom", + "iconFontName": "atom", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#519aba" + } + ] + }, + { + "type": "text", + "id": "n1261", + "name": "SearchPanel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "SearchPanel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#e8e8e8" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1262", + "name": "Mode", + "width": "fit_content", + "height": "fit_content", + "layout": "horizontal", + "gap": 2.0, + "padding": [ + 2.0, + 2.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 5.0, + "fill": [ + { + "type": "solid", + "color": "#111111" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1263", + "name": "Seg / 编辑", + "width": "fit_content", + "height": "fit_content", + "layout": "horizontal", + "gap": 4.0, + "padding": [ + 2.0, + 8.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 3.0, + "children": [ + { + "type": "icon_font", + "id": "n1264", + "name": "pencil", + "iconFontName": "pencil", + "width": 13.0, + "height": 13.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1265", + "name": "编辑", + "width": "fit_content", + "height": "fit_content", + "content": "编辑", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1266", + "name": "Seg / 预览", + "width": "fit_content", + "height": "fit_content", + "layout": "horizontal", + "gap": 4.0, + "padding": [ + 2.0, + 8.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 3.0, + "fill": [ + { + "type": "solid", + "color": "#37373d" + } + ], + "children": [ + { + "type": "icon_font", + "id": "n1267", + "name": "eye", + "iconFontName": "eye", + "width": 13.0, + "height": 13.0, + "fill": [ + { + "type": "solid", + "color": "#e8e8e8" + } + ] + }, + { + "type": "text", + "id": "n1268", + "name": "预览", + "width": "fit_content", + "height": "fit_content", + "content": "预览", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#e8e8e8" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1269", + "name": "Pad", + "width": 8.0, + "height": 8.0, + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n1270", + "name": "Breadcrumb", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 6.0, + "padding": [ + 6.0, + 16.0 + ], + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1271", + "name": "src", + "width": "fit_content", + "height": "fit_content", + "content": "src", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1272", + "name": "/", + "width": "fit_content", + "height": "fit_content", + "content": "/", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + }, + { + "type": "text", + "id": "n1273", + "name": "search", + "width": "fit_content", + "height": "fit_content", + "content": "search", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1274", + "name": "/", + "width": "fit_content", + "height": "fit_content", + "content": "/", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + }, + { + "type": "text", + "id": "n1275", + "name": "SearchPanel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "SearchPanel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1276", + "name": "Filter", + "width": "fill_container", + "height": 36.0, + "layout": "horizontal", + "gap": 8.0, + "padding": [ + 0.0, + 16.0 + ], + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1277", + "name": "筛选", + "width": "fit_content", + "height": "fit_content", + "content": "筛选", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n1278", + "name": "Chip / 种类", + "width": "fit_content", + "height": 24.0, + "layout": "horizontal", + "gap": 4.0, + "padding": [ + 0.0, + 8.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "fill": [ + { + "type": "solid", + "color": "#313131" + } + ], + "children": [ + { + "type": "text", + "id": "n1279", + "name": "种类", + "width": "fit_content", + "height": "fit_content", + "content": "种类", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n1280", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 12.0, + "height": 12.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1281", + "name": "Chip / 访问级别", + "width": "fit_content", + "height": 24.0, + "layout": "horizontal", + "gap": 4.0, + "padding": [ + 0.0, + 8.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "fill": [ + { + "type": "solid", + "color": "#313131" + } + ], + "children": [ + { + "type": "text", + "id": "n1282", + "name": "访问级别", + "width": "fit_content", + "height": "fit_content", + "content": "访问级别", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n1283", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 12.0, + "height": 12.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1284", + "name": "Spacer", + "width": "fill_container", + "height": 8.0, + "children": [] + }, + { + "type": "text", + "id": "n1285", + "name": "6 块", + "width": "fit_content", + "height": "fit_content", + "content": "6 块", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1286", + "name": "Lines 1–2", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1287", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n1288", + "name": "Line 1", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1289", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1290", + "name": "1", + "width": "fit_content", + "height": "fit_content", + "content": "1", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1291", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1292", + "name": "\"use client\";", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "\"use client\"", + "fill": "#ce9178" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1293", + "name": "Line 2", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1294", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1295", + "name": "2", + "width": "fit_content", + "height": "fit_content", + "content": "2", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1296", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1297", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1298", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1299", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1300", + "name": "Lines 3–3", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1301", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n1302", + "name": "Line 3", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1303", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1304", + "name": "3", + "width": "fit_content", + "height": "fit_content", + "content": "3", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1305", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1306", + "name": "import { useCallback, useContext, useEff", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "import", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "useCallback", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "useContext", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "useEffect", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "useMemo", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "useReducer", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "useRef", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "useState", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "useTransition", + "fill": "#9cdcfe" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "}", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "from", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "\"react\"", + "fill": "#ce9178" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1307", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1308", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1309", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1310", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1311", + "name": "导入 / \"react\"", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#2b262a" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#594357" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1312", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1313", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1314", + "name": "Concepts", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1315", + "name": "Concept / 导入", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1316", + "name": "import", + "iconFontName": "import", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#c586c0" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1317", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1318", + "name": "Summary", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1319", + "name": "来源", + "width": "fit_content", + "height": "fit_content", + "content": "来源", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1320", + "name": "\"react\"", + "width": "fit_content", + "height": "fit_content", + "content": "\"react\"", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#ce9178" + } + ] + }, + { + "type": "text", + "id": "n1321", + "name": "·", + "width": "fit_content", + "height": "fit_content", + "content": "·", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + }, + { + "type": "text", + "id": "n1322", + "name": "导入项", + "width": "fit_content", + "height": "fit_content", + "content": "导入项", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1323", + "name": "8 个", + "width": "fit_content", + "height": "fit_content", + "content": "8 个", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1324", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1325", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1326", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1327", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1328", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1329", + "name": "Lines 4–5", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1330", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n1331", + "name": "Line 4", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1332", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1333", + "name": "4", + "width": "fit_content", + "height": "fit_content", + "content": "4", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1334", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1335", + "name": "import { useRouter } from \"next/navigati", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "import", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "useRouter", + "fill": "#9cdcfe" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "}", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "from", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "\"next/navigation\"", + "fill": "#ce9178" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1336", + "name": "Line 5", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1337", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1338", + "name": "5", + "width": "fit_content", + "height": "fit_content", + "content": "5", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1339", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1340", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1341", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1342", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1343", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1344", + "name": "导入 / \"next/navigation\"", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#2b262a" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#594357" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1345", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1346", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1347", + "name": "Concepts", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1348", + "name": "Concept / 导入", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1349", + "name": "import", + "iconFontName": "import", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#c586c0" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1350", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1351", + "name": "Summary", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1352", + "name": "来源", + "width": "fit_content", + "height": "fit_content", + "content": "来源", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1353", + "name": "\"next/navigation\"", + "width": "fit_content", + "height": "fit_content", + "content": "\"next/navigation\"", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#ce9178" + } + ] + }, + { + "type": "text", + "id": "n1354", + "name": "·", + "width": "fit_content", + "height": "fit_content", + "content": "·", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + }, + { + "type": "text", + "id": "n1355", + "name": "导入项", + "width": "fit_content", + "height": "fit_content", + "content": "导入项", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1356", + "name": "1 个", + "width": "fit_content", + "height": "fit_content", + "content": "1 个", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1357", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1358", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1359", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1360", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1361", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1362", + "name": "Lines 6–6", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1363", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n1364", + "name": "Line 6", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1365", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1366", + "name": "6", + "width": "fit_content", + "height": "fit_content", + "content": "6", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1367", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1368", + "name": "import { AuthContext } from \"@/lib/auth\"", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "import", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "AuthContext", + "fill": "#4ec9b0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "}", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "from", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "\"@/lib/auth\"", + "fill": "#ce9178" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1369", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1370", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1371", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1372", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1373", + "name": "导入 / \"@/lib/auth\"", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#2b262a" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#594357" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1374", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1375", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1376", + "name": "Concepts", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1377", + "name": "Concept / 导入", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1378", + "name": "import", + "iconFontName": "import", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#c586c0" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1379", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1380", + "name": "Summary", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1381", + "name": "来源", + "width": "fit_content", + "height": "fit_content", + "content": "来源", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1382", + "name": "\"@/lib/auth\"", + "width": "fit_content", + "height": "fit_content", + "content": "\"@/lib/auth\"", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#ce9178" + } + ] + }, + { + "type": "text", + "id": "n1383", + "name": "·", + "width": "fit_content", + "height": "fit_content", + "content": "·", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + }, + { + "type": "text", + "id": "n1384", + "name": "导入项", + "width": "fit_content", + "height": "fit_content", + "content": "导入项", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1385", + "name": "1 个", + "width": "fit_content", + "height": "fit_content", + "content": "1 个", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1386", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1387", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1388", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1389", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1390", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1391", + "name": "Lines 7–7", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1392", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n1393", + "name": "Line 7", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1394", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1395", + "name": "7", + "width": "fit_content", + "height": "fit_content", + "content": "7", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1396", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1397", + "name": "import { useSearch } from \"@/hooks/use-s", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "import", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "useSearch", + "fill": "#9cdcfe" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "}", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "from", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "\"@/hooks/use-search\"", + "fill": "#ce9178" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1398", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1399", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1400", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1401", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1402", + "name": "导入 / \"@/hooks/use-search\"", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#2b262a" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#594357" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1403", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1404", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1405", + "name": "Concepts", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1406", + "name": "Concept / 导入", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1407", + "name": "import", + "iconFontName": "import", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#c586c0" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1408", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1409", + "name": "Summary", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1410", + "name": "来源", + "width": "fit_content", + "height": "fit_content", + "content": "来源", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1411", + "name": "\"@/hooks/use-search\"", + "width": "fit_content", + "height": "fit_content", + "content": "\"@/hooks/use-search\"", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#ce9178" + } + ] + }, + { + "type": "text", + "id": "n1412", + "name": "·", + "width": "fit_content", + "height": "fit_content", + "content": "·", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + }, + { + "type": "text", + "id": "n1413", + "name": "导入项", + "width": "fit_content", + "height": "fit_content", + "content": "导入项", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1414", + "name": "1 个", + "width": "fit_content", + "height": "fit_content", + "content": "1 个", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1415", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1416", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1417", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1418", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1419", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1420", + "name": "Lines 8–9", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1421", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n1422", + "name": "Line 8", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1423", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1424", + "name": "8", + "width": "fit_content", + "height": "fit_content", + "content": "8", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1425", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1426", + "name": "import { EMPTY_FILTER, filterReducer } f", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "import", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "EMPTY_FILTER", + "fill": "#4fc1ff" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "filterReducer", + "fill": "#9cdcfe" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "}", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "from", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "\"./filter\"", + "fill": "#ce9178" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1427", + "name": "Line 9", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1428", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1429", + "name": "9", + "width": "fit_content", + "height": "fit_content", + "content": "9", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1430", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1431", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1432", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1433", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1434", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1435", + "name": "导入 / \"./filter\"", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#2b262a" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#594357" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1436", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1437", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1438", + "name": "Concepts", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1439", + "name": "Concept / 导入", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1440", + "name": "import", + "iconFontName": "import", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#c586c0" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1441", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1442", + "name": "Summary", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1443", + "name": "来源", + "width": "fit_content", + "height": "fit_content", + "content": "来源", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1444", + "name": "\"./filter\"", + "width": "fit_content", + "height": "fit_content", + "content": "\"./filter\"", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#ce9178" + } + ] + }, + { + "type": "text", + "id": "n1445", + "name": "·", + "width": "fit_content", + "height": "fit_content", + "content": "·", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + }, + { + "type": "text", + "id": "n1446", + "name": "导入项", + "width": "fit_content", + "height": "fit_content", + "content": "导入项", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1447", + "name": "2 个", + "width": "fit_content", + "height": "fit_content", + "content": "2 个", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1448", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1449", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1450", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1451", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1452", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1453", + "name": "Lines 10–10", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1454", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n1455", + "name": "Line 10", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1456", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1457", + "name": "10", + "width": "fit_content", + "height": "fit_content", + "content": "10", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1458", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1459", + "name": "export const SearchPanel = ({ initialQue", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "export", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "SearchPanel", + "fill": "#4ec9b0" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "{", + "fill": "#da70d6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "initialQuery", + "fill": "#9cdcfe" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "}", + "fill": "#da70d6" + }, + { + "text": ": ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#da70d6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "initialQuery", + "fill": "#9cdcfe" + }, + { + "text": ": ", + "fill": "#d4d4d4" + }, + { + "text": "string", + "fill": "#4ec9b0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "}", + "fill": "#da70d6" + }, + { + "text": ")", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "=>", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#ffd700" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1460", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1461", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1462", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1463", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1464", + "name": "React 组件 / SearchPanel", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#242c2e" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#36606c" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1465", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1466", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1467", + "name": "Concepts", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1468", + "name": "Concept / React 组件", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1469", + "name": "atom", + "iconFontName": "atom", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#61dafb" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1470", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1471", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1472", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1473", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1474", + "name": "Value", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1475", + "name": "SearchPanel", + "width": "fit_content", + "height": "fit_content", + "content": "SearchPanel", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 600, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#61dafb" + } + ] + }, + { + "type": "frame", + "id": "n1476", + "name": "Tag / 具名导出", + "width": "fit_content", + "height": 18.0, + "layout": "horizontal", + "gap": 0.0, + "padding": [ + 0.0, + 5.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "fill": [ + { + "type": "solid", + "color": "#3b3942" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#6c5570" + } + ] + }, + "children": [ + { + "type": "text", + "id": "n1477", + "name": "具名导出", + "width": "fit_content", + "height": "fit_content", + "content": "具名导出", + "fontFamily": "PingFang SC", + "fontSize": 11.0, + "fontWeight": 500, + "lineHeight": 1.4545454545454546, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#c586c0" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1478", + "name": "Tag / 客户端组件", + "width": "fit_content", + "height": 18.0, + "layout": "horizontal", + "gap": 0.0, + "padding": [ + 0.0, + 5.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "fill": [ + { + "type": "solid", + "color": "#2d444b" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3f7a8a" + } + ] + }, + "children": [ + { + "type": "text", + "id": "n1479", + "name": "客户端组件", + "width": "fit_content", + "height": "fit_content", + "content": "客户端组件", + "fontFamily": "PingFang SC", + "fontSize": 11.0, + "fontWeight": 500, + "lineHeight": 1.4545454545454546, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#61dafb" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1480", + "name": "Prop / 构造参数", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1481", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1482", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1483", + "name": "构造参数", + "width": "fit_content", + "height": "fit_content", + "content": "构造参数", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n1484", + "name": "1 个", + "width": "fit_content", + "height": "fit_content", + "content": "1 个", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1485", + "name": "Table wrap", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 2.0, + 0.0, + 2.0, + 5.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1486", + "name": "Table", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": true, + "cornerRadius": 4.0, + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1487", + "name": "Header", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#2f3738" + } + ], + "children": [ + { + "type": "frame", + "id": "n1488", + "name": "名称", + "width": 114.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1489", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1490", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1491", + "name": "类型", + "width": 57.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1492", + "name": "类型", + "width": "fit_content", + "height": "fit_content", + "content": "类型", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1493", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1494", + "name": "默认值", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1495", + "name": "默认值", + "width": "fit_content", + "height": "fit_content", + "content": "默认值", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1496", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1497", + "name": "必填", + "width": 396.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1498", + "name": "必填", + "width": "fit_content", + "height": "fit_content", + "content": "必填", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1499", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1500", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1501", + "name": "名称", + "width": 114.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1502", + "name": "Name", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1503", + "name": "initialQuery", + "width": "fit_content", + "height": "fit_content", + "content": "initialQuery", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1504", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1505", + "name": "类型", + "width": 57.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1506", + "name": "字符串", + "width": "fit_content", + "height": "fit_content", + "content": "字符串", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#4ec9b0" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1507", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1508", + "name": "默认值", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1509", + "name": "—", + "width": "fit_content", + "height": "fit_content", + "content": "—", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1510", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1511", + "name": "必填", + "width": 396.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1512", + "name": "是", + "width": "fit_content", + "height": "fit_content", + "content": "是", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#569cd6" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1513", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1514", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1515", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1516", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1517", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1518", + "name": "Lines 11–11", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1519", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n1520", + "name": "Line 11", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1521", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1522", + "name": "11", + "width": "fit_content", + "height": "fit_content", + "content": "11", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1523", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1524", + "name": "const router = useRouter();", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "router", + "fill": "#9cdcfe" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "useRouter", + "fill": "#dcdcaa" + }, + { + "text": "()", + "fill": "#da70d6" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1525", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1526", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1527", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1528", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n1529", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n1530", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1531", + "name": "钩子返回值 / router", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#2d2a25" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#52415f" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1532", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n1533", + "name": "Concepts", + "width": 42.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1534", + "name": "Concept / 变量", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1535", + "name": "variable", + "iconFontName": "variable", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1536", + "name": "Concept / 钩子返回值", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1537", + "name": "fishing-hook", + "iconFontName": "fishing-hook", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#b180d7" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1538", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1539", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1540", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1541", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1542", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1543", + "name": "Name", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1544", + "name": "router", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "router", + "fontWeight": 600, + "fill": "#9cdcfe" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "frame", + "id": "n1545", + "name": "Spacer", + "width": "fill_container", + "height": 8.0, + "children": [] + }, + { + "type": "frame", + "id": "n1546", + "name": "Ops", + "width": 47.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1547", + "name": "git-branch / 谁用了", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1548", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n1549", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n1550", + "name": "1", + "width": 8.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1551", + "name": "Prop / 来自", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1552", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1553", + "name": "来自", + "width": "fit_content", + "height": "fit_content", + "content": "来自", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1554", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1555", + "name": "useRouter（悬停：next/navigation 提供的钩子）", + "width": "fit_content", + "height": "fit_content", + "content": "useRouter", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1556", + "name": "Prop / 说明", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1557", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1558", + "name": "说明", + "width": "fit_content", + "height": "fit_content", + "content": "说明", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n1559", + "name": "路由器，用于页面跳转", + "width": "fit_content", + "height": "fit_content", + "content": "路由器，用于页面跳转", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1560", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1561", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1562", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1563", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1564", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1565", + "name": "Lines 12–12", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1566", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n1567", + "name": "Line 12", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1568", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1569", + "name": "12", + "width": "fit_content", + "height": "fit_content", + "content": "12", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1570", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1571", + "name": "const { user, logout } = useContext(Auth", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#da70d6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "user", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "logout", + "fill": "#9cdcfe" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "}", + "fill": "#da70d6" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "useContext", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "AuthContext", + "fill": "#4ec9b0" + }, + { + "text": ")", + "fill": "#da70d6" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1572", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1573", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1574", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1575", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n1576", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n1577", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1578", + "name": "上下文值 / user, logout", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#222b29" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#2f5b52" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1579", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n1580", + "name": "Concepts", + "width": 42.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1581", + "name": "Concept / 变量", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1582", + "name": "variable", + "iconFontName": "variable", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1583", + "name": "Concept / 上下文值", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1584", + "name": "share-2", + "iconFontName": "share-2", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#4ec9b0" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1585", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1586", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1587", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1588", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1589", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1590", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1591", + "name": "Destructure", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 8.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1592", + "name": "{ user, logout }", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "{ ", + "fill": "#cccccc" + }, + { + "text": "user", + "fontWeight": 600, + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#cccccc" + }, + { + "text": "logout", + "fontWeight": 600, + "fill": "#dcdcaa" + }, + { + "text": " }", + "fill": "#cccccc" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "text", + "id": "n1593", + "name": "对象解构", + "width": "fit_content", + "height": "fit_content", + "content": "对象解构", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1594", + "name": "Table wrap", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 2.0, + 0.0, + 2.0, + 5.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1595", + "name": "Table", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": true, + "cornerRadius": 4.0, + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1596", + "name": "Header", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#2d3634" + } + ], + "children": [ + { + "type": "frame", + "id": "n1597", + "name": "名称", + "width": 530.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1598", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1599", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1600", + "name": "操作", + "width": 53.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1601", + "name": "操作", + "width": "fit_content", + "height": "fit_content", + "content": "操作", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1602", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1603", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1604", + "name": "名称", + "width": 530.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1605", + "name": "user", + "width": "fit_content", + "height": "fit_content", + "content": "user", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1606", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1607", + "name": "操作", + "width": 53.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1608", + "name": "Ops", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1609", + "name": "git-branch / 谁用了", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1610", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n1611", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n1612", + "name": "1", + "width": 8.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1613", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1614", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1615", + "name": "名称", + "width": 530.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1616", + "name": "logout", + "width": "fit_content", + "height": "fit_content", + "content": "logout", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1617", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1618", + "name": "操作", + "width": 53.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1619", + "name": "Ops", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1620", + "name": "git-branch / 谁调用了", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1621", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n1622", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n1623", + "name": "1", + "width": 8.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1624", + "name": "Prop / 来自", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1625", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1626", + "name": "来自", + "width": "fit_content", + "height": "fit_content", + "content": "来自", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1627", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1628", + "name": "useContext（悬停：React 内置钩子）", + "width": "fit_content", + "height": "fit_content", + "content": "useContext", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1629", + "name": "Prop / 上下文", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1630", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1631", + "name": "上下文", + "width": "fit_content", + "height": "fit_content", + "content": "上下文", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n1632", + "name": "AuthContext", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "AuthContext", + "fill": "#4ec9b0", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1633", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1634", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1635", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1636", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1637", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1638", + "name": "Lines 13–13", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1639", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n1640", + "name": "Line 13", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1641", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1642", + "name": "13", + "width": "fit_content", + "height": "fit_content", + "content": "13", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1643", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1644", + "name": "const [query, setQuery] = useState(initi", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "[", + "fill": "#da70d6" + }, + { + "text": "query", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "setQuery", + "fill": "#9cdcfe" + }, + { + "text": "]", + "fill": "#da70d6" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "useState", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "initialQuery", + "fill": "#9cdcfe" + }, + { + "text": ")", + "fill": "#da70d6" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1645", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1646", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1647", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1648", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n1649", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n1650", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1651", + "name": "状态 / query", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#282c2f" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#4b616d" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1652", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n1653", + "name": "Concepts", + "width": 42.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1654", + "name": "Concept / 变量", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1655", + "name": "variable", + "iconFontName": "variable", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1656", + "name": "Concept / React 状态", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1657", + "name": "toggle-right", + "iconFontName": "toggle-right", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1658", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1659", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1660", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1661", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1662", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1663", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1664", + "name": "Destructure", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 8.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1665", + "name": "[query, setQuery]", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "[", + "fill": "#cccccc" + }, + { + "text": "query", + "fontWeight": 600, + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#cccccc" + }, + { + "text": "setQuery", + "fontWeight": 600, + "fill": "#dcdcaa" + }, + { + "text": "]", + "fill": "#cccccc" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "text", + "id": "n1666", + "name": "数组解构", + "width": "fit_content", + "height": "fit_content", + "content": "数组解构", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1667", + "name": "Table wrap", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 2.0, + 0.0, + 2.0, + 5.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1668", + "name": "Table", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": true, + "cornerRadius": 4.0, + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1669", + "name": "Header", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#333739" + } + ], + "children": [ + { + "type": "frame", + "id": "n1670", + "name": "第几项", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1671", + "name": "第几项", + "width": "fit_content", + "height": "fit_content", + "content": "第几项", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1672", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1673", + "name": "名称", + "width": 82.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1674", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1675", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1676", + "name": "说明", + "width": 390.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1677", + "name": "说明", + "width": "fit_content", + "height": "fit_content", + "content": "说明", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1678", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1679", + "name": "操作", + "width": 53.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1680", + "name": "操作", + "width": "fit_content", + "height": "fit_content", + "content": "操作", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1681", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1682", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1683", + "name": "第几项", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1684", + "name": "1", + "width": 12.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1685", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1686", + "name": "名称", + "width": 82.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1687", + "name": "query", + "width": "fit_content", + "height": "fit_content", + "content": "query", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1688", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1689", + "name": "说明", + "width": 390.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1690", + "name": "当前值", + "width": "fit_content", + "height": "fit_content", + "content": "当前值", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1691", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1692", + "name": "操作", + "width": 53.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1693", + "name": "Ops", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1694", + "name": "git-branch / 谁用了这个状态", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1695", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n1696", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n1697", + "name": "3", + "width": 8.0, + "height": "fit_content", + "content": "3", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1698", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1699", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1700", + "name": "第几项", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1701", + "name": "2", + "width": 12.0, + "height": "fit_content", + "content": "2", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1702", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1703", + "name": "名称", + "width": 82.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1704", + "name": "setQuery", + "width": "fit_content", + "height": "fit_content", + "content": "setQuery", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1705", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1706", + "name": "说明", + "width": 390.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1707", + "name": "修改函数", + "width": "fit_content", + "height": "fit_content", + "content": "修改函数", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1708", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1709", + "name": "操作", + "width": 53.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1710", + "name": "Ops", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1711", + "name": "git-branch / 谁改了这个状态", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1712", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n1713", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n1714", + "name": "1", + "width": 8.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1715", + "name": "Prop / 来自", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1716", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1717", + "name": "来自", + "width": "fit_content", + "height": "fit_content", + "content": "来自", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1718", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1719", + "name": "useState（悬停：React 内置钩子）", + "width": "fit_content", + "height": "fit_content", + "content": "useState", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1720", + "name": "Prop / 状态类型", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1721", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1722", + "name": "状态类型", + "width": "fit_content", + "height": "fit_content", + "content": "状态类型", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n1723", + "name": "未标注", + "width": "fit_content", + "height": "fit_content", + "content": "未标注", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1724", + "name": "Prop / 默认值", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1725", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1726", + "name": "默认值", + "width": "fit_content", + "height": "fit_content", + "content": "默认值", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n1727", + "name": "initialQuery", + "width": "fit_content", + "height": "fit_content", + "content": "initialQuery", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1728", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1729", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1730", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1731", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1732", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1733", + "name": "Lines 14–14", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1734", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n1735", + "name": "Line 14", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1736", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1737", + "name": "14", + "width": "fit_content", + "height": "fit_content", + "content": "14", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1738", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1739", + "name": "const [filter, dispatch] = useReducer(fi", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "[", + "fill": "#da70d6" + }, + { + "text": "filter", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "dispatch", + "fill": "#9cdcfe" + }, + { + "text": "]", + "fill": "#da70d6" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "useReducer", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "filterReducer", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "EMPTY_FILTER", + "fill": "#4fc1ff" + }, + { + "text": ")", + "fill": "#da70d6" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1740", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1741", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1742", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1743", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n1744", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n1745", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1746", + "name": "状态 / filter", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#282c2f" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#4b616d" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1747", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n1748", + "name": "Concepts", + "width": 42.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1749", + "name": "Concept / 变量", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1750", + "name": "variable", + "iconFontName": "variable", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1751", + "name": "Concept / React 状态", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1752", + "name": "toggle-right", + "iconFontName": "toggle-right", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1753", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1754", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1755", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1756", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1757", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1758", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1759", + "name": "Destructure", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 8.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1760", + "name": "[filter, dispatch]", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "[", + "fill": "#cccccc" + }, + { + "text": "filter", + "fontWeight": 600, + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#cccccc" + }, + { + "text": "dispatch", + "fontWeight": 600, + "fill": "#dcdcaa" + }, + { + "text": "]", + "fill": "#cccccc" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "text", + "id": "n1761", + "name": "数组解构", + "width": "fit_content", + "height": "fit_content", + "content": "数组解构", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1762", + "name": "Table wrap", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 2.0, + 0.0, + 2.0, + 5.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1763", + "name": "Table", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": true, + "cornerRadius": 4.0, + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1764", + "name": "Header", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#333739" + } + ], + "children": [ + { + "type": "frame", + "id": "n1765", + "name": "第几项", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1766", + "name": "第几项", + "width": "fit_content", + "height": "fit_content", + "content": "第几项", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1767", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1768", + "name": "名称", + "width": 82.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1769", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1770", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1771", + "name": "说明", + "width": 390.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1772", + "name": "说明", + "width": "fit_content", + "height": "fit_content", + "content": "说明", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1773", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1774", + "name": "操作", + "width": 53.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1775", + "name": "操作", + "width": "fit_content", + "height": "fit_content", + "content": "操作", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1776", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1777", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1778", + "name": "第几项", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1779", + "name": "1", + "width": 12.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1780", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1781", + "name": "名称", + "width": 82.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1782", + "name": "filter", + "width": "fit_content", + "height": "fit_content", + "content": "filter", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1783", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1784", + "name": "说明", + "width": 390.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1785", + "name": "当前值", + "width": "fit_content", + "height": "fit_content", + "content": "当前值", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1786", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1787", + "name": "操作", + "width": 53.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1788", + "name": "Ops", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1789", + "name": "git-branch / 谁用了", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1790", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n1791", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n1792", + "name": "1", + "width": 8.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1793", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1794", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1795", + "name": "第几项", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1796", + "name": "2", + "width": 12.0, + "height": "fit_content", + "content": "2", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1797", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1798", + "name": "名称", + "width": 82.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1799", + "name": "dispatch", + "width": "fit_content", + "height": "fit_content", + "content": "dispatch", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1800", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1801", + "name": "说明", + "width": 390.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1802", + "name": "派发函数", + "width": "fit_content", + "height": "fit_content", + "content": "派发函数", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1803", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1804", + "name": "操作", + "width": 53.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1805", + "name": "Ops", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1806", + "name": "git-branch / 谁派发了动作", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1807", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n1808", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n1809", + "name": "1", + "width": 8.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1810", + "name": "Prop / 来自", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1811", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1812", + "name": "来自", + "width": "fit_content", + "height": "fit_content", + "content": "来自", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1813", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1814", + "name": "useReducer（悬停：React 内置钩子）", + "width": "fit_content", + "height": "fit_content", + "content": "useReducer", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1815", + "name": "Prop / 处理函数", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1816", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1817", + "name": "处理函数", + "width": "fit_content", + "height": "fit_content", + "content": "处理函数", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n1818", + "name": "filterReducer", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "filterReducer", + "fill": "#dcdcaa", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1819", + "name": "Prop / 状态类型", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1820", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1821", + "name": "状态类型", + "width": "fit_content", + "height": "fit_content", + "content": "状态类型", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n1822", + "name": "未标注", + "width": "fit_content", + "height": "fit_content", + "content": "未标注", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1823", + "name": "Prop / 初始值", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1824", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1825", + "name": "初始值", + "width": "fit_content", + "height": "fit_content", + "content": "初始值", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n1826", + "name": "EMPTY_FILTER", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "EMPTY_FILTER", + "fill": "#4fc1ff", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1827", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1828", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1829", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1830", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1831", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1832", + "name": "Lines 15–15", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1833", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n1834", + "name": "Line 15", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1835", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1836", + "name": "15", + "width": "fit_content", + "height": "fit_content", + "content": "15", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1837", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1838", + "name": "const { results, loading } = useSearch(q", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#da70d6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "results", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "loading", + "fill": "#9cdcfe" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "}", + "fill": "#da70d6" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "useSearch", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "query", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "filter", + "fill": "#9cdcfe" + }, + { + "text": ")", + "fill": "#da70d6" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1839", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1840", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1841", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1842", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n1843", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n1844", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1845", + "name": "钩子返回值 / results, loading", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#262b26" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#52415f" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1846", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n1847", + "name": "Concepts", + "width": 42.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1848", + "name": "Concept / 变量", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1849", + "name": "variable", + "iconFontName": "variable", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1850", + "name": "Concept / 钩子返回值", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1851", + "name": "fishing-hook", + "iconFontName": "fishing-hook", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#b180d7" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1852", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1853", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1854", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1855", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1856", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1857", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1858", + "name": "Destructure", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 8.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1859", + "name": "{ results, loading }", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "{ ", + "fill": "#cccccc" + }, + { + "text": "results", + "fontWeight": 600, + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#cccccc" + }, + { + "text": "loading", + "fontWeight": 600, + "fill": "#9cdcfe" + }, + { + "text": " }", + "fill": "#cccccc" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "text", + "id": "n1860", + "name": "对象解构", + "width": "fit_content", + "height": "fit_content", + "content": "对象解构", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1861", + "name": "Table wrap", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 2.0, + 0.0, + 2.0, + 5.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1862", + "name": "Table", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": true, + "cornerRadius": 4.0, + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1863", + "name": "Header", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#313631" + } + ], + "children": [ + { + "type": "frame", + "id": "n1864", + "name": "名称", + "width": 530.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1865", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1866", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1867", + "name": "操作", + "width": 53.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1868", + "name": "操作", + "width": "fit_content", + "height": "fit_content", + "content": "操作", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1869", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1870", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1871", + "name": "名称", + "width": 530.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1872", + "name": "results", + "width": "fit_content", + "height": "fit_content", + "content": "results", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1873", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1874", + "name": "操作", + "width": 53.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1875", + "name": "Ops", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1876", + "name": "git-branch / 谁用了", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1877", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n1878", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n1879", + "name": "1", + "width": 8.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1880", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1881", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1882", + "name": "名称", + "width": 530.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1883", + "name": "loading", + "width": "fit_content", + "height": "fit_content", + "content": "loading", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1884", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1885", + "name": "操作", + "width": 53.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1886", + "name": "Ops", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1887", + "name": "git-branch / 谁用了", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1888", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n1889", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n1890", + "name": "1", + "width": 8.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1891", + "name": "Prop / 来自", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1892", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1893", + "name": "来自", + "width": "fit_content", + "height": "fit_content", + "content": "来自", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1894", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1895", + "name": "useSearch（悬停：自定义钩子）", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "useSearch", + "fill": "#dcdcaa", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1896", + "name": "Prop / 参数", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1897", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1898", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1899", + "name": "参数", + "width": "fit_content", + "height": "fit_content", + "content": "参数", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n1900", + "name": "2 个", + "width": "fit_content", + "height": "fit_content", + "content": "2 个", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1901", + "name": "Table wrap", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 2.0, + 0.0, + 2.0, + 5.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1902", + "name": "Table", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": true, + "cornerRadius": 4.0, + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1903", + "name": "Header", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#313631" + } + ], + "children": [ + { + "type": "frame", + "id": "n1904", + "name": "参数", + "width": 66.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1905", + "name": "参数", + "width": "fit_content", + "height": "fit_content", + "content": "参数", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1906", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1907", + "name": "值", + "width": 517.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1908", + "name": "值", + "width": "fit_content", + "height": "fit_content", + "content": "值", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1909", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1910", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1911", + "name": "参数", + "width": 66.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1912", + "name": "query", + "width": "fit_content", + "height": "fit_content", + "content": "query", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1913", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1914", + "name": "值", + "width": 517.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1915", + "name": "query", + "width": "fit_content", + "height": "fit_content", + "content": "query", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1916", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1917", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1918", + "name": "参数", + "width": 66.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1919", + "name": "filter", + "width": "fit_content", + "height": "fit_content", + "content": "filter", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1920", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1921", + "name": "值", + "width": 517.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1922", + "name": "filter", + "width": "fit_content", + "height": "fit_content", + "content": "filter", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1923", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1924", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1925", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1926", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1927", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1928", + "name": "Lines 16–16", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1929", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n1930", + "name": "Line 16", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1931", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1932", + "name": "16", + "width": "fit_content", + "height": "fit_content", + "content": "16", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1933", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1934", + "name": "const [isPending, startTransition] = use", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "[", + "fill": "#da70d6" + }, + { + "text": "isPending", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "startTransition", + "fill": "#9cdcfe" + }, + { + "text": "]", + "fill": "#da70d6" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "useTransition", + "fill": "#dcdcaa" + }, + { + "text": "()", + "fill": "#da70d6" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1935", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1936", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1937", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1938", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n1939", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n1940", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1941", + "name": "过渡 / isPending, startTransition", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#2b2725" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#5c473e" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1942", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n1943", + "name": "Concepts", + "width": 42.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1944", + "name": "Concept / 变量", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1945", + "name": "variable", + "iconFontName": "variable", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1946", + "name": "Concept / 过渡", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1947", + "name": "hourglass", + "iconFontName": "hourglass", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#ce9178" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1948", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1949", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1950", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1951", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1952", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1953", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1954", + "name": "Destructure", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 8.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1955", + "name": "[isPending, startTransition]", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "[", + "fill": "#cccccc" + }, + { + "text": "isPending", + "fontWeight": 600, + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#cccccc" + }, + { + "text": "startTransition", + "fontWeight": 600, + "fill": "#dcdcaa" + }, + { + "text": "]", + "fill": "#cccccc" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "text", + "id": "n1956", + "name": "数组解构", + "width": "fit_content", + "height": "fit_content", + "content": "数组解构", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1957", + "name": "Table wrap", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 2.0, + 0.0, + 2.0, + 5.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1958", + "name": "Table", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": true, + "cornerRadius": 4.0, + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n1959", + "name": "Header", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#363230" + } + ], + "children": [ + { + "type": "frame", + "id": "n1960", + "name": "第几项", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1961", + "name": "第几项", + "width": "fit_content", + "height": "fit_content", + "content": "第几项", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1962", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1963", + "name": "名称", + "width": 137.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1964", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1965", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1966", + "name": "说明", + "width": 335.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1967", + "name": "说明", + "width": "fit_content", + "height": "fit_content", + "content": "说明", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1968", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1969", + "name": "操作", + "width": 53.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1970", + "name": "操作", + "width": "fit_content", + "height": "fit_content", + "content": "操作", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1971", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1972", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1973", + "name": "第几项", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1974", + "name": "1", + "width": 12.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1975", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1976", + "name": "名称", + "width": 137.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1977", + "name": "isPending", + "width": "fit_content", + "height": "fit_content", + "content": "isPending", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1978", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1979", + "name": "说明", + "width": 335.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1980", + "name": "是否正在过渡", + "width": "fit_content", + "height": "fit_content", + "content": "是否正在过渡", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1981", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1982", + "name": "操作", + "width": 53.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1983", + "name": "Ops", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1984", + "name": "git-branch / 谁用了", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n1985", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n1986", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n1987", + "name": "1", + "width": 8.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1988", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1989", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1990", + "name": "第几项", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1991", + "name": "2", + "width": 12.0, + "height": "fit_content", + "content": "2", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1992", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1993", + "name": "名称", + "width": 137.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1994", + "name": "startTransition", + "width": "fit_content", + "height": "fit_content", + "content": "startTransition", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1995", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1996", + "name": "说明", + "width": 335.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1997", + "name": "启动过渡的函数", + "width": "fit_content", + "height": "fit_content", + "content": "启动过渡的函数", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1998", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1999", + "name": "操作", + "width": 53.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2000", + "name": "Ops", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2001", + "name": "git-branch / 谁调用了", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n2002", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n2003", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n2004", + "name": "1", + "width": 8.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2005", + "name": "Prop / 来自", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2006", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2007", + "name": "来自", + "width": "fit_content", + "height": "fit_content", + "content": "来自", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2008", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2009", + "name": "useTransition（悬停：React 内置钩子）", + "width": "fit_content", + "height": "fit_content", + "content": "useTransition", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2010", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2011", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n2012", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2013", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n2014", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2015", + "name": "Lines 17–17", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2016", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n2017", + "name": "Line 17", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2018", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2019", + "name": "17", + "width": "fit_content", + "height": "fit_content", + "content": "17", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2020", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2021", + "name": "const inputRef = useRef", + "fill": "#d4d4d4" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "null", + "fill": "#569cd6" + }, + { + "text": ")", + "fill": "#da70d6" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n2022", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n2023", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2024", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2025", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n2026", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n2027", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2028", + "name": "引用 / inputRef", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#222a2f" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#30586d" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n2029", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n2030", + "name": "Concepts", + "width": 42.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2031", + "name": "Concept / 变量", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n2032", + "name": "variable", + "iconFontName": "variable", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2033", + "name": "Concept / 引用", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n2034", + "name": "anchor", + "iconFontName": "anchor", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#4fc1ff" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2035", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2036", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2037", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2038", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2039", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2040", + "name": "Name", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2041", + "name": "inputRef", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "inputRef", + "fontWeight": 600, + "fill": "#9cdcfe" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "frame", + "id": "n2042", + "name": "Spacer", + "width": "fill_container", + "height": 8.0, + "children": [] + }, + { + "type": "frame", + "id": "n2043", + "name": "Ops", + "width": 47.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2044", + "name": "git-branch / 谁用了", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n2045", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n2046", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n2047", + "name": "2", + "width": 8.0, + "height": "fit_content", + "content": "2", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2048", + "name": "Prop / 来自", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2049", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2050", + "name": "来自", + "width": "fit_content", + "height": "fit_content", + "content": "来自", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2051", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2052", + "name": "useRef（悬停：React 内置钩子）", + "width": "fit_content", + "height": "fit_content", + "content": "useRef", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2053", + "name": "Prop / 指向类型", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2054", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2055", + "name": "指向类型", + "width": "fit_content", + "height": "fit_content", + "content": "指向类型", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n2056", + "name": "HTMLInputElement", + "width": "fit_content", + "height": "fit_content", + "content": "HTMLInputElement", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#4ec9b0" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2057", + "name": "Prop / 初始值", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2058", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2059", + "name": "初始值", + "width": "fit_content", + "height": "fit_content", + "content": "初始值", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n2060", + "name": "空", + "width": "fit_content", + "height": "fit_content", + "content": "空", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#b5cea8" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2061", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2062", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n2063", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2064", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n2065", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2066", + "name": "Lines 18–19", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2067", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n2068", + "name": "Line 18", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2069", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2070", + "name": "18", + "width": "fit_content", + "height": "fit_content", + "content": "18", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2071", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2072", + "name": "const visible = useMemo(() => results.fi", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "visible", + "fill": "#9cdcfe" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "useMemo", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "()", + "fill": "#179fff" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "=>", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "results", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "filter", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#179fff" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "r", + "fill": "#9cdcfe" + }, + { + "text": ")", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "=>", + "fill": "#569cd6" + }, + { + "text": " !", + "fill": "#d4d4d4" + }, + { + "text": "r", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "hidden", + "fill": "#9cdcfe" + }, + { + "text": ")", + "fill": "#179fff" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "[", + "fill": "#179fff" + }, + { + "text": "results", + "fill": "#9cdcfe" + }, + { + "text": "]", + "fill": "#179fff" + }, + { + "text": ")", + "fill": "#da70d6" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2073", + "name": "Line 19", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2074", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2075", + "name": "19", + "width": "fit_content", + "height": "fit_content", + "content": "19", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2076", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n2077", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n2078", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2079", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2080", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n2081", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n2082", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2083", + "name": "记忆值 / visible", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#2a2b29" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#545c4f" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n2084", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n2085", + "name": "Concepts", + "width": 42.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2086", + "name": "Concept / 变量", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n2087", + "name": "variable", + "iconFontName": "variable", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2088", + "name": "Concept / 记忆值", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n2089", + "name": "sigma", + "iconFontName": "sigma", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#b5cea8" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2090", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2091", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2092", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2093", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2094", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2095", + "name": "Name", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2096", + "name": "visible", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "visible", + "fontWeight": 600, + "fill": "#9cdcfe" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "frame", + "id": "n2097", + "name": "Spacer", + "width": "fill_container", + "height": 8.0, + "children": [] + }, + { + "type": "frame", + "id": "n2098", + "name": "Ops", + "width": 47.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2099", + "name": "git-branch / 谁用了", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n2100", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n2101", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n2102", + "name": "1", + "width": 8.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2103", + "name": "Prop / 来自", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2104", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2105", + "name": "来自", + "width": "fit_content", + "height": "fit_content", + "content": "来自", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2106", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2107", + "name": "useMemo（悬停：React 内置钩子）", + "width": "fit_content", + "height": "fit_content", + "content": "useMemo", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2108", + "name": "Prop / 计算", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2109", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2110", + "name": "计算", + "width": "fit_content", + "height": "fit_content", + "content": "计算", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n2111", + "name": "results.filter((r) => r.hidden 不成立)", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "results", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#cccccc" + }, + { + "text": "filter", + "fill": "#dcdcaa" + }, + { + "text": "((", + "fill": "#cccccc" + }, + { + "text": "r", + "fill": "#9cdcfe" + }, + { + "text": ") => ", + "fill": "#cccccc" + }, + { + "text": "r", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#cccccc" + }, + { + "text": "hidden", + "fill": "#9cdcfe" + }, + { + "text": " ", + "fill": "#cccccc" + }, + { + "text": "不成立", + "fill": "#569cd6" + }, + { + "text": ")", + "fill": "#cccccc" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2112", + "name": "Prop / 重算时机", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2113", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2114", + "name": "重算时机", + "width": "fit_content", + "height": "fit_content", + "content": "重算时机", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n2115", + "name": "results 变化时", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "results", + "fill": "#9cdcfe" + }, + { + "text": " 变化时", + "fill": "#c586c0" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2116", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2117", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n2118", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2119", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n2120", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2121", + "name": "Lines 20–24", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2122", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n2123", + "name": "Line 20", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2124", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2125", + "name": "20", + "width": "fit_content", + "height": "fit_content", + "content": "20", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2126", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2127", + "name": "const submit = useCallback((e: FormEvent", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "submit", + "fill": "#9cdcfe" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "useCallback", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "(", + "fill": "#179fff" + }, + { + "text": "e", + "fill": "#9cdcfe" + }, + { + "text": ": ", + "fill": "#d4d4d4" + }, + { + "text": "FormEvent", + "fill": "#4ec9b0" + }, + { + "text": ")", + "fill": "#179fff" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "=>", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#179fff" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2128", + "name": "Line 21", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2129", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2130", + "name": "21", + "width": "fit_content", + "height": "fit_content", + "content": "21", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2131", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2132", + "name": "e.preventDefault();", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "e", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "preventDefault", + "fill": "#dcdcaa" + }, + { + "text": "()", + "fill": "#ffd700" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2133", + "name": "Line 22", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2134", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2135", + "name": "22", + "width": "fit_content", + "height": "fit_content", + "content": "22", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2136", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2137", + "name": "startTransition(() => router.push(`/sear", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "startTransition", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "()", + "fill": "#da70d6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "=>", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "router", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "push", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "`/search?q=${query}`", + "fill": "#ce9178" + }, + { + "text": ")", + "fill": "#da70d6" + }, + { + "text": ")", + "fill": "#ffd700" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2138", + "name": "Line 23", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2139", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2140", + "name": "23", + "width": "fit_content", + "height": "fit_content", + "content": "23", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2141", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2142", + "name": "}, [router, query]);", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "}", + "fill": "#179fff" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "[", + "fill": "#179fff" + }, + { + "text": "router", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "query", + "fill": "#9cdcfe" + }, + { + "text": "]", + "fill": "#179fff" + }, + { + "text": ")", + "fill": "#da70d6" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2143", + "name": "Line 24", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2144", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2145", + "name": "24", + "width": "fit_content", + "height": "fit_content", + "content": "24", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2146", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n2147", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n2148", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2149", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2150", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n2151", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n2152", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2153", + "name": "记忆函数 / submit", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#2c2c29" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#616150" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n2154", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n2155", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2156", + "name": "Concepts", + "width": 42.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2157", + "name": "Concept / 函数", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n2158", + "name": "square-function", + "iconFontName": "square-function", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2159", + "name": "Concept / 记忆函数", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n2160", + "name": "sigma", + "iconFontName": "sigma", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#b5cea8" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2161", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2162", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2163", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2164", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2165", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2166", + "name": "Name", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2167", + "name": "submit", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "submit", + "fontWeight": 600, + "fill": "#dcdcaa" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "frame", + "id": "n2168", + "name": "Spacer", + "width": "fill_container", + "height": 8.0, + "children": [] + }, + { + "type": "frame", + "id": "n2169", + "name": "Ops", + "width": 47.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2170", + "name": "git-branch / 谁调用了", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n2171", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n2172", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n2173", + "name": "1", + "width": 8.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2174", + "name": "Prop / 来自", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2175", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2176", + "name": "来自", + "width": "fit_content", + "height": "fit_content", + "content": "来自", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2177", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2178", + "name": "useCallback（悬停：React 内置钩子）", + "width": "fit_content", + "height": "fit_content", + "content": "useCallback", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2179", + "name": "Prop / 参数", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2180", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n2181", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n2182", + "name": "参数", + "width": "fit_content", + "height": "fit_content", + "content": "参数", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n2183", + "name": "1 个", + "width": "fit_content", + "height": "fit_content", + "content": "1 个", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2184", + "name": "Table wrap", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 2.0, + 0.0, + 2.0, + 5.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2185", + "name": "Table", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": true, + "cornerRadius": 4.0, + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n2186", + "name": "Header", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#373734" + } + ], + "children": [ + { + "type": "frame", + "id": "n2187", + "name": "名称", + "width": 43.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2188", + "name": "名称", + "width": "fit_content", + "height": "fit_content", + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n2189", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n2190", + "name": "类型", + "width": 540.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2191", + "name": "类型", + "width": "fit_content", + "height": "fit_content", + "content": "类型", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n2192", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n2193", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2194", + "name": "名称", + "width": 43.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2195", + "name": "e", + "width": "fit_content", + "height": "fit_content", + "content": "e", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n2196", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n2197", + "name": "类型", + "width": 540.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2198", + "name": "FormEvent", + "width": "fit_content", + "height": "fit_content", + "content": "FormEvent", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#4ec9b0" + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2199", + "name": "Prop / 函数体", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2200", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2201", + "name": "函数体", + "width": "fit_content", + "height": "fit_content", + "content": "函数体", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2202", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2203", + "name": "Fold box", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 3.0, + "padding": [ + 0.0, + 6.0, + 0.0, + 3.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "fill": [ + { + "type": "solid", + "color": "#313131" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ] + }, + "children": [ + { + "type": "icon_font", + "id": "n2204", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 13.0, + "height": 13.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n2205", + "name": "函数 · 2 句", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "函数", + "fill": "#9d9d9d" + }, + { + "text": " · 2 句", + "fill": "#9d9d9d" + } + ], + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.44, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2206", + "name": "Prop / 重建时机", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2207", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2208", + "name": "重建时机", + "width": "fit_content", + "height": "fit_content", + "content": "重建时机", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n2209", + "name": "router、query 变化时", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "router", + "fill": "#9cdcfe" + }, + { + "text": "、", + "fill": "#cccccc" + }, + { + "text": "query", + "fill": "#9cdcfe" + }, + { + "text": " 变化时", + "fill": "#c586c0" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2210", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2211", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n2212", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2213", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n2214", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2215", + "name": "Lines 25–28", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2216", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n2217", + "name": "Line 25", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2218", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2219", + "name": "25", + "width": "fit_content", + "height": "fit_content", + "content": "25", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2220", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2221", + "name": "useEffect(() => {", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "useEffect", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "()", + "fill": "#179fff" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "=>", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#179fff" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2222", + "name": "Line 26", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2223", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2224", + "name": "26", + "width": "fit_content", + "height": "fit_content", + "content": "26", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2225", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2226", + "name": "inputRef.current?.focus();", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "inputRef", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "current", + "fill": "#9cdcfe" + }, + { + "text": "?.", + "fill": "#d4d4d4" + }, + { + "text": "focus", + "fill": "#dcdcaa" + }, + { + "text": "()", + "fill": "#ffd700" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2227", + "name": "Line 27", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2228", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2229", + "name": "27", + "width": "fit_content", + "height": "fit_content", + "content": "27", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2230", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2231", + "name": "}, []);", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "}", + "fill": "#179fff" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "[]", + "fill": "#179fff" + }, + { + "text": ")", + "fill": "#da70d6" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2232", + "name": "Line 28", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2233", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2234", + "name": "28", + "width": "fit_content", + "height": "fit_content", + "content": "28", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2235", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n2236", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n2237", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2238", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2239", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n2240", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n2241", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2242", + "name": "副作用 / 仅挂载时", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#2d2a25" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#64573f" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n2243", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n2244", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2245", + "name": "Concepts", + "width": 42.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2246", + "name": "Concept / 语句", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n2247", + "name": "code", + "iconFontName": "code", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2248", + "name": "Concept / 副作用", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n2249", + "name": "zap", + "iconFontName": "zap", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#e5c07b" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2250", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2251", + "name": "Prop / 触发时机", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2252", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2253", + "name": "触发时机", + "width": "fit_content", + "height": "fit_content", + "content": "触发时机", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n2254", + "name": "仅挂载时", + "width": "fit_content", + "height": "fit_content", + "content": "仅挂载时", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#c586c0" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2255", + "name": "Prop / 来自", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2256", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2257", + "name": "来自", + "width": "fit_content", + "height": "fit_content", + "content": "来自", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2258", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2259", + "name": "useEffect（悬停：React 内置钩子）", + "width": "fit_content", + "height": "fit_content", + "content": "useEffect", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2260", + "name": "Prop / 执行", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2261", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2262", + "name": "执行", + "width": "fit_content", + "height": "fit_content", + "content": "执行", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2263", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2264", + "name": "Fold box", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 3.0, + "padding": [ + 0.0, + 6.0, + 0.0, + 3.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "fill": [ + { + "type": "solid", + "color": "#313131" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ] + }, + "children": [ + { + "type": "icon_font", + "id": "n2265", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 13.0, + "height": 13.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n2266", + "name": "函数 · 1 句", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "函数", + "fill": "#9d9d9d" + }, + { + "text": " · 1 句", + "fill": "#9d9d9d" + } + ], + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.44, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2267", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2268", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n2269", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2270", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n2271", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2272", + "name": "Lines 29–32", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2273", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n2274", + "name": "Line 29", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2275", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2276", + "name": "29", + "width": "fit_content", + "height": "fit_content", + "content": "29", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2277", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2278", + "name": "useEffect(() => {", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "useEffect", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "()", + "fill": "#179fff" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "=>", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#179fff" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2279", + "name": "Line 30", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2280", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2281", + "name": "30", + "width": "fit_content", + "height": "fit_content", + "content": "30", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2282", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2283", + "name": "if (!user) logout();", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "if", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "!", + "fill": "#d4d4d4" + }, + { + "text": "user", + "fill": "#9cdcfe" + }, + { + "text": ")", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "logout", + "fill": "#dcdcaa" + }, + { + "text": "()", + "fill": "#ffd700" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2284", + "name": "Line 31", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2285", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2286", + "name": "31", + "width": "fit_content", + "height": "fit_content", + "content": "31", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2287", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2288", + "name": "}, [user, logout]);", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "}", + "fill": "#179fff" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "[", + "fill": "#179fff" + }, + { + "text": "user", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "logout", + "fill": "#9cdcfe" + }, + { + "text": "]", + "fill": "#179fff" + }, + { + "text": ")", + "fill": "#da70d6" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2289", + "name": "Line 32", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2290", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2291", + "name": "32", + "width": "fit_content", + "height": "fit_content", + "content": "32", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2292", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n2293", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n2294", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 0.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2295", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2296", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n2297", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n2298", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 8.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2299", + "name": "副作用 / user、logout 变化时", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#2d2a25" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#64573f" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n2300", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n2301", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2302", + "name": "Concepts", + "width": 42.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2303", + "name": "Concept / 语句", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n2304", + "name": "code", + "iconFontName": "code", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2305", + "name": "Concept / 副作用", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n2306", + "name": "zap", + "iconFontName": "zap", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#e5c07b" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2307", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2308", + "name": "Prop / 触发时机", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2309", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2310", + "name": "触发时机", + "width": "fit_content", + "height": "fit_content", + "content": "触发时机", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "text", + "id": "n2311", + "name": "user、logout 变化时", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "user", + "fill": "#9cdcfe" + }, + { + "text": "、", + "fill": "#cccccc" + }, + { + "text": "logout", + "fill": "#9cdcfe" + }, + { + "text": " 变化时", + "fill": "#c586c0" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2312", + "name": "Prop / 来自", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2313", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2314", + "name": "来自", + "width": "fit_content", + "height": "fit_content", + "content": "来自", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2315", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2316", + "name": "useEffect（悬停：React 内置钩子）", + "width": "fit_content", + "height": "fit_content", + "content": "useEffect", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2317", + "name": "Prop / 执行", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2318", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2319", + "name": "执行", + "width": "fit_content", + "height": "fit_content", + "content": "执行", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2320", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2321", + "name": "Fold box", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 3.0, + "padding": [ + 0.0, + 6.0, + 0.0, + 3.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "fill": [ + { + "type": "solid", + "color": "#313131" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ] + }, + "children": [ + { + "type": "icon_font", + "id": "n2322", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 13.0, + "height": 13.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n2323", + "name": "函数 · 1 句", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "函数", + "fill": "#9d9d9d" + }, + { + "text": " · 1 句", + "fill": "#9d9d9d" + } + ], + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.44, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2324", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2325", + "name": "sparkles", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n2326", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2327", + "name": "pencil", + "width": 22.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n2328", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2329", + "name": "Lines 33–45", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2330", + "name": "Code", + "width": 600.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 8.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": true, + "children": [ + { + "type": "frame", + "id": "n2331", + "name": "Line 33", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2332", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2333", + "name": "33", + "width": "fit_content", + "height": "fit_content", + "content": "33", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2334", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2335", + "name": "return (", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "return", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "(", + "fill": "#da70d6" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2336", + "name": "Line 34", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2337", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2338", + "name": "34", + "width": "fit_content", + "height": "fit_content", + "content": "34", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2339", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2340", + "name": "
", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "<", + "fill": "#808080" + }, + { + "text": "form", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "onSubmit", + "fill": "#9cdcfe" + }, + { + "text": "=", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#179fff" + }, + { + "text": "submit", + "fill": "#9cdcfe" + }, + { + "text": "}", + "fill": "#179fff" + }, + { + "text": ">", + "fill": "#808080" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2341", + "name": "Line 35", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2342", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2343", + "name": "35", + "width": "fit_content", + "height": "fit_content", + "content": "35", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2344", + "name": "Margin", + "width": 72.98, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2345", + "name": "", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "setQuery", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "e", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "target", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "value", + "fill": "#9cdcfe" + }, + { + "text": ")", + "fill": "#ffd700" + }, + { + "text": "}", + "fill": "#179fff" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "/>", + "fill": "#808080" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2346", + "name": "Line 36", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2347", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2348", + "name": "36", + "width": "fit_content", + "height": "fit_content", + "content": "36", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2349", + "name": "Margin", + "width": 72.98, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2350", + "name": "", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "", + "fill": "#808080" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2361", + "name": "Line 39", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2362", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2363", + "name": "39", + "width": "fit_content", + "height": "fit_content", + "content": "39", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2364", + "name": "Margin", + "width": 72.98, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2365", + "name": "{isPending && 跳转中…}", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "{", + "fill": "#179fff" + }, + { + "text": "isPending", + "fill": "#9cdcfe" + }, + { + "text": " && ", + "fill": "#d4d4d4" + }, + { + "text": "<", + "fill": "#808080" + }, + { + "text": "span", + "fill": "#569cd6" + }, + { + "text": ">", + "fill": "#808080" + }, + { + "text": "跳转中…", + "fill": "#d4d4d4" + }, + { + "text": "", + "fill": "#808080" + }, + { + "text": "}", + "fill": "#179fff" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2366", + "name": "Line 40", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2367", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2368", + "name": "40", + "width": "fit_content", + "height": "fit_content", + "content": "40", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2369", + "name": "Margin", + "width": 72.98, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2370", + "name": "{loading &&

搜索中…

}", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "{", + "fill": "#179fff" + }, + { + "text": "loading", + "fill": "#9cdcfe" + }, + { + "text": " && ", + "fill": "#d4d4d4" + }, + { + "text": "<", + "fill": "#808080" + }, + { + "text": "p", + "fill": "#569cd6" + }, + { + "text": ">", + "fill": "#808080" + }, + { + "text": "搜索中…", + "fill": "#d4d4d4" + }, + { + "text": "", + "fill": "#808080" + }, + { + "text": "}", + "fill": "#179fff" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2371", + "name": "Line 41", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2372", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2373", + "name": "41", + "width": "fit_content", + "height": "fit_content", + "content": "41", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2374", + "name": "Margin", + "width": 72.98, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2375", + "name": "
    ", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "<", + "fill": "#808080" + }, + { + "text": "ul", + "fill": "#569cd6" + }, + { + "text": ">", + "fill": "#808080" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2376", + "name": "Line 42", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2377", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2378", + "name": "42", + "width": "fit_content", + "height": "fit_content", + "content": "42", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2379", + "name": "Margin", + "width": 88.64, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2380", + "name": "{visible.map((r) =>
  • {r.ti", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "{", + "fill": "#179fff" + }, + { + "text": "visible", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "map", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "r", + "fill": "#9cdcfe" + }, + { + "text": ")", + "fill": "#da70d6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "=>", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "<", + "fill": "#808080" + }, + { + "text": "li", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "key", + "fill": "#9cdcfe" + }, + { + "text": "=", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#da70d6" + }, + { + "text": "r", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "id", + "fill": "#9cdcfe" + }, + { + "text": "}", + "fill": "#da70d6" + }, + { + "text": ">", + "fill": "#808080" + }, + { + "text": "{", + "fill": "#da70d6" + }, + { + "text": "r", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "title", + "fill": "#9cdcfe" + }, + { + "text": "}", + "fill": "#da70d6" + }, + { + "text": "", + "fill": "#808080" + }, + { + "text": ")", + "fill": "#ffd700" + }, + { + "text": "}", + "fill": "#179fff" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2381", + "name": "Line 43", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2382", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2383", + "name": "43", + "width": "fit_content", + "height": "fit_content", + "content": "43", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2384", + "name": "Margin", + "width": 72.98, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2385", + "name": "
", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "", + "fill": "#808080" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2386", + "name": "Line 44", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2387", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2388", + "name": "44", + "width": "fit_content", + "height": "fit_content", + "content": "44", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2389", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2390", + "name": "
", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "", + "fill": "#808080" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2391", + "name": "Line 45", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2392", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2393", + "name": "45", + "width": "fit_content", + "height": "fit_content", + "content": "45", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2394", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n2395", + "name": ");", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": ")", + "fill": "#da70d6" + }, + { + "text": ";", + "fill": "#d4d4d4" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n2396", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n2397", + "name": "Preview", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 20.0, + 8.0, + 20.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2398", + "name": "Level", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2399", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n2400", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n2401", + "name": "Cards", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "padding": [ + 0.0, + 0.0, + 0.0, + 0.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2402", + "name": "渲染输出 / SearchPanel", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 8.0, + 10.0, + 8.0, + 8.0 + ], + "alignItems": "start", + "clipContent": false, + "cornerRadius": 8.0, + "fill": [ + { + "type": "solid", + "color": "#262b26" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#445d43" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n2403", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n2404", + "name": "Concepts", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2405", + "name": "Concept / 渲染输出", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n2406", + "name": "layout-template", + "iconFontName": "layout-template", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#89d185" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2407", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2408", + "name": "Outline", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2409", + "name": "Item", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 4.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2410", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n2411", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2412", + "name": "Line", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 8.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2413", + "name": "
", + "width": "fit_content", + "height": "fit_content", + "content": "", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#808080" + } + ] + }, + { + "type": "text", + "id": "n2414", + "name": "onSubmit=submit", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "onSubmit", + "fill": "#9cdcfe" + }, + { + "text": "=", + "fill": "#cccccc" + }, + { + "text": "submit", + "fill": "#dcdcaa", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2415", + "name": "Sub", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "padding": [ + 0.0, + 0.0, + 0.0, + 5.0 + ], + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n2416", + "name": "Guide", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n2417", + "name": "Kids", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2418", + "name": "Outline", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2419", + "name": "Item", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 4.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2420", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n2421", + "name": "Lines", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2422", + "name": "Line", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 8.0, + "padding": [ + 0.0, + 0.0, + 0.0, + 0.0 + ], + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2423", + "name": "", + "width": "fit_content", + "height": "fit_content", + "content": "", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#808080" + } + ] + }, + { + "type": "text", + "id": "n2424", + "name": "ref=inputRef", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "ref", + "fill": "#9cdcfe" + }, + { + "text": "=", + "fill": "#cccccc" + }, + { + "text": "inputRef", + "fill": "#9cdcfe", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "text", + "id": "n2425", + "name": "value=query", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "value", + "fill": "#9cdcfe" + }, + { + "text": "=", + "fill": "#cccccc" + }, + { + "text": "query", + "fill": "#9cdcfe", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2426", + "name": "Line", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 8.0, + "padding": [ + 0.0, + 0.0, + 0.0, + 16.0 + ], + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2427", + "name": "onChange=(e) => setQuery(e.target.value)", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "onChange", + "fill": "#9cdcfe" + }, + { + "text": "=", + "fill": "#cccccc" + }, + { + "text": "(", + "fill": "#cccccc" + }, + { + "text": "e", + "fill": "#9cdcfe" + }, + { + "text": ") => ", + "fill": "#cccccc" + }, + { + "text": "setQuery", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#cccccc" + }, + { + "text": "e", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#cccccc" + }, + { + "text": "target", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#cccccc" + }, + { + "text": "value", + "fill": "#9cdcfe" + }, + { + "text": ")", + "fill": "#cccccc" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n2428", + "name": "Item", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 4.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2429", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n2430", + "name": "Lines", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n2431", + "name": "Line", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 8.0, + "padding": [ + 0.0, + 0.0, + 0.0, + 0.0 + ], + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n2432", + "name": "