diff --git a/docs/prototype/code-reader/openpencil/exports/react-hooks-custom.png b/docs/prototype/code-reader/openpencil/exports/react-hooks-custom.png new file mode 100644 index 0000000..63a5e22 Binary files /dev/null and b/docs/prototype/code-reader/openpencil/exports/react-hooks-custom.png differ diff --git a/docs/prototype/code-reader/openpencil/exports/react-hooks-panel.png b/docs/prototype/code-reader/openpencil/exports/react-hooks-panel.png new file mode 100644 index 0000000..c7fb69b Binary files /dev/null and b/docs/prototype/code-reader/openpencil/exports/react-hooks-panel.png differ diff --git a/docs/prototype/code-reader/openpencil/react-hooks.js b/docs/prototype/code-reader/openpencil/react-hooks.js new file mode 100644 index 0000000..5971da2 --- /dev/null +++ b/docs/prototype/code-reader/openpencil/react-hooks.js @@ -0,0 +1,1183 @@ +// 代码阅读 React 钩子卡片：一个 VS Code 窗口里左边是编辑器、右边是代码阅读预览，每张卡片和它那段源码的第一行对齐， +// 卡片比源码高时，编辑器在那段源码下面留空，下一段源码再和下一张卡片对齐。 +// 样例源码 `src/chat/Panel.tsx` 是手写的，两张画板共用：一张画第 1–20 行，一张画第 22–58 行。 +// 颜色、窗口和卡片画法取自同目录 react.js（VS Code Dark Modern，卡片淡底 7%、描边 35%）； +// 卡片里的译文照 vscode/src/codeReader/translators/typescriptZh.ts 的中文直译，渲染大纲的说法照 vscode/src/codeReader/rules/react.ts。 +// OpenPencil 自动折行量不准，长文字按估出的宽度手动断行，文字框都按内容长。 + +const C = { + editor: "#1f1f1f", + side: "#181818", + border: "#2b2b2b", + borderStrong: "#3c3c3c", + fg: "#cccccc", + fgStrong: "#e8e8e8", + desc: "#9d9d9d", + dim: "#6e7681", + activityIdle: "#868686", + activityOn: "#d7d7d7", + focus: "#0078d4", + selection: "#04395e", + input: "#313131", + inputBorder: "#454545", + field: "#111111", + toggleOn: "#37373d", + guide: "#404040", + punct: "#d4d4d4", + keyword: "#c586c0", + storage: "#569cd6", + variable: "#9cdcfe", + fn: "#dcdcaa", + type: "#4ec9b0", + string: "#ce9178", + number: "#b5cea8", + constant: "#4fc1ff", + nativeTag: "#808080", + component: "#61dafb", + branch: "#ce9178", + ret: "#89d185", + loop: "#8f9cff", + folder: "#8b9ba8", + tsx: "#519aba", +}; + +// 编辑器的括号配对着色（Dark Modern 的 editorBracketHighlight.foreground1–3），按嵌套层数轮换 +const BRACKETS = ["#ffd700", "#da70d6", "#179fff"]; + +// 卡片种类：上下文、自定义钩子、回调函数是这次新加的，别的同 react.js；函数同 build.js +const K = { + import: { label: "导入", color: "#c586c0", icon: "import" }, + fn: { label: "函数", color: "#dcdcaa", icon: "square-function" }, + context: { label: "上下文", color: "#4ec9b0", icon: "share-2" }, + hook: { label: "自定义钩子", color: "#61dafb", icon: "plug" }, + component: { label: "React 组件", color: "#61dafb", icon: "atom" }, + state: { label: "状态", color: "#9cdcfe", icon: "toggle-right" }, + ref: { label: "引用", color: "#9cdcfe", icon: "anchor" }, + read: { label: "数据源", color: "#9cdcfe", icon: "download" }, + derived: { label: "派生值", color: "#9cdcfe", icon: "sigma" }, + callback: { label: "回调函数", color: "#dcdcaa", icon: "square-function" }, + effect: { label: "副作用", color: "#e5c07b", icon: "zap" }, + handler: { label: "事件处理函数", color: "#dcdcaa", icon: "mouse-pointer-click" }, + render: { label: "渲染输出", color: "#89d185", icon: "layout-template" }, +}; + +const MONO = "Menlo"; +const UI = "PingFang SC"; + +// 窗口：活动栏 48、侧栏、编辑器（左边源码、1px 分隔、右边预览） +const WIN_W = 1700; +const SIDE_W = 250; +const CODE_W = 600; +const PREVIEW_W = WIN_W - 48 - SIDE_W - CODE_W - 1; +const PREVIEW_PAD = 20; +const BOARD_GAP = 80; +// Menlo 13px 一个字符宽，源码缩进按它算 +const MONO_CHAR = 7.83; + +// ─── 样例源码 ──────────────────────────────────────────────────────────────── + +const FILE = "Panel.tsx"; +const CRUMBS = ["src", "chat", FILE]; + +const SOURCE = [ + "import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useTransition } from 'react'", + "", + "const ThemeContext = createContext('light')", + "", + "function reducer(state: State, action: Action): State {", + " switch (action.type) {", + " case 'add': return { ...state, count: state.count + 1 }", + " default: return state", + " }", + "}", + "", + "export function useChatSession(id: string) {", + " const [messages, setMessages] = useState([])", + " useEffect(() => {", + " const ws = connect(id)", + " ws.onmessage = e => setMessages(m => [...m, e.data])", + " return () => ws.close()", + " }, [id])", + " return { messages }", + "}", + "", + "export function Panel({ id, onClose }: Props) {", + " const theme = useContext(ThemeContext)", + " const { messages } = useChatSession(id)", + " const [open, setOpen] = useState(() => readOpen(id))", + " const [state, dispatch] = useReducer(reducer, { count: 0 })", + " const [isPending, startTransition] = useTransition()", + " const boxRef = useRef(null)", + " const timer = useRef()", + " const total = useMemo(() => {", + " const sum = messages.length", + " return sum * 2", + " }, [messages])", + " const toggle = useCallback((next: boolean) => {", + " setOpen(next)", + " dispatch({ type: 'add' })", + " }, [])", + " useEffect(() => {", + " timer.current = window.setTimeout(() => setOpen(false), 1000)", + " return () => clearTimeout(timer.current)", + " }, [open])", + " useEffect(() => {", + " document.title = String(total)", + " })", + " useLayoutEffect(() => {", + " boxRef.current?.scrollTo(0, 0)", + " }, [])", + " function handleClick() {", + " startTransition(() => toggle(!open))", + " }", + " return (", + "
", + " {isPending && }", + " {messages.map(m => )}", + " {state.count}", + "
", + " )", + "}", +]; + +const TREE = [ + { kind: "folder", name: "src", open: true, depth: 0 }, + { kind: "folder", name: "chat", open: true, depth: 1 }, + { kind: "file", name: "Panel.tsx", depth: 2 }, + { kind: "file", name: "Row.tsx", depth: 2 }, + { kind: "file", name: "Spinner.tsx", depth: 2 }, + { kind: "folder", name: "lib", open: false, depth: 1 }, + { kind: "file", name: "App.tsx", depth: 1 }, +]; + +// ─── 颜色、宽度 ────────────────────────────────────────────────────────────── + +function solid(color) { + return [{ type: "solid", color }]; +} + +function rgb(hex) { + const h = hex.replace("#", ""); + return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)); +} + +/** `color` 按 `t` 盖在 `base` 上（`color-mix(in srgb, color t, base)`）。 */ +function mix(color, base, t) { + const a = rgb(color); + const b = rgb(base); + return "#" + a.map((v, i) => Math.round(v * t + b[i] * (1 - t)).toString(16).padStart(2, "0")).join(""); +} + +const WIDE = /[⺀-鿿　-〿＀-￯“”‘’…—·×→]/; + +function charWidth(ch, size, mono) { + if (WIDE.test(ch)) + return size; + if (mono) + return size * 0.61; + if (/[A-Z0-9]/.test(ch)) + return size * 0.68; + if (/[ilj.,:;'|!()[\] ]/.test(ch)) + return size * 0.34; + return size * 0.58; +} + +/** 估一段字的宽度，宁大勿小：估小了字会伸出框外。 */ +function widthOf(s, size, mono) { + let w = 0; + for (const ch of s) w += charWidth(ch, size, mono); + return w * 1.04; +} + +// ─── 译文着色 ──────────────────────────────────────────────────────────────── + +// 「当 … 时」「对 … 的每一项」是渲染大纲的关键字（react.ts 的 when、eachItem） +const ZH_KEYWORD = new Set(["如果", "否则", "返回", "当", "时", "对", "的每一项", "则", "新建", "调用", "常量", "变量", "函数"]); +const ZH_OPERATOR = new Set(["全等", "不全等", "等于", "不等于", "并且", "或者", "不成立"]); +const ZH_LITERAL = new Set(["空", "真", "假", "未定义", "空数组", "空对象"]); +const ZH_TYPE = new Set(["字符串", "数值", "布尔", "任意", "未知", "永不", "无", "对象"]); +const TOKEN = /"(?:[^"\\]|\\.)*"|`[^`]*`|'[^']*'|[A-Za-z_$][\w$]*|\d+(?:\.\d+)?|[一-鿿]+|\s+|[\s\S]/g; + +function seg(text, fill, extra) { + return Object.assign({ text, fill }, extra || {}); +} + +function merge(list) { + const out = []; + for (const s of list) { + const last = out[out.length - 1]; + if (last && last.fill === s.fill && !last.u && !s.u && last.w === s.w) + last.text += s.text; + else + out.push(Object.assign({}, s)); + } + return out; +} + +function identColor(tok, rest) { + if (/^\s*(\?\.)?(<[^()]*>)?\(/.test(rest)) + return C.fn; + if (/^[A-Z][A-Z0-9_]+$/.test(tok)) + return C.constant; + if (/^[A-Z]/.test(tok)) + return C.type; + return C.variable; +} + +/** 一段中文直译：照抄的名字按词性着色，翻出来的关键字、运算符、字面量、内置类型各用各的颜色。 */ +function cx(src) { + const out = []; + let at = 0; + for (const tok of src.match(TOKEN) || []) { + at += tok.length; + let color = C.fg; + if (/^["'`]/.test(tok)) + color = C.string; + else if (/^\d/.test(tok)) + color = C.number; + else if (/^[一-鿿]/.test(tok)) + color = ZH_KEYWORD.has(tok) ? C.keyword : ZH_OPERATOR.has(tok) ? C.storage : ZH_LITERAL.has(tok) ? C.number : ZH_TYPE.has(tok) ? C.type : C.desc; + else if (/^[A-Za-z_$]/.test(tok)) + color = identColor(tok, src.slice(at)); + out.push(seg(tok, color)); + } + return merge(out); +} + +/** 一段同色的字。 */ +function px(text, color) { + return [seg(text, color || C.fg)]; +} + +/** 能点过去的名字（跳到那张卡片）：带下划线。 */ +function link(text, color) { + return seg(text, color, { u: true }); +} + +// ─── 源码着色 ──────────────────────────────────────────────────────────────── + +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"]); + +/** + * 整份源码按 VS Code Dark Modern 着色，返回每行的着色段（不含行首缩进）。 + * 括号按整份文件的嵌套层数配色；标识符后面紧跟的 `<` 是泛型，别处的 `<名字` 是 JSX 标签，标签里的名字是属性。 + */ +function highlight(lines) { + let depth = 0; + let generic = 0; + let tag = null; + return lines.map((line) => { + const src = line.replace(/^ +/, ""); + const out = []; + let at = 0; + let prev = ""; + let prevSolid = ""; + for (const tok of src.match(TSX_TOKEN) || []) { + at += tok.length; + const rest = src.slice(at); + let color = C.punct; + if (/^\s+$/.test(tok)) { + out.push(seg(tok, C.punct)); + prev = tok; + continue; + } + if (/^['"]/.test(tok)) + color = C.string; + else if (/^\d/.test(tok)) + color = C.number; + else if (tok === "=>") + color = C.storage; + else if ("([{".includes(tok)) { + color = BRACKETS[depth % 3]; + depth++; + if (tag && tok === "{") + tag.braces++; + } + else if (")]}".includes(tok)) { + depth = Math.max(0, depth - 1); + color = BRACKETS[depth % 3]; + if (tag && tok === "}") + tag.braces--; + } + else if (tok === "<") { + if (/^[A-Za-z_$][\w$]*$/.test(prev)) + generic++; + else if (/^[A-Za-z]/.test(rest)) { + color = C.nativeTag; + tag = { name: true, braces: 0 }; + } + } + else if (tok === "" && tag && tag.braces === 0) { + color = C.nativeTag; + tag = null; + } + else if (tok === ">") { + if (generic > 0) + generic--; + else if (tag && tag.braces === 0) { + color = C.nativeTag; + tag = null; + } + } + else if (/^[A-Za-z_$]/.test(tok)) { + if (tag && tag.braces === 0) { + color = tag.name ? (/^[A-Z]/.test(tok) ? C.type : C.storage) : C.variable; + tag.name = false; + } + else if (prevSolid === "." || prevSolid === "?.") + color = /^\s*\(/.test(rest) ? C.fn : C.variable; + else if (TSX_STORAGE.has(tok)) + color = C.storage; + else if (TSX_CONTROL.has(tok)) + color = C.keyword; + else if (TSX_PRIMITIVE.has(tok)) + color = C.type; + else + color = identColor(tok, rest); + } + out.push(seg(tok, color)); + prev = tok; + prevSolid = tok; + } + return { indent: line.length - src.length, segs: merge(out) }; + }); +} + +const CODE = highlight(SOURCE); + +// ─── 断行 ──────────────────────────────────────────────────────────────────── + +const CLOSING = /^[)）\]】,，.。、；;:：!！?？」』”]/; +const OPENING = /[(（[【「『“]$/; +const WIDE_CHAR = /^[⺀-鿿　-〿＀-￯“”]$/; +const TOKENS = /\n|[^\S\n]+|[⺀-鿿　-〿＀-￯“”]|[^\s⺀-鿿　-〿＀-￯“”]+/g; + +/** + * 按估出的宽度把一串着色的字断成几行（行间用 `\n` 接起来，交给一个文字框）。 + * 代码只在空格处断；正文在空格处和汉字之间断，收尾标点跟着前一个字、开头标点跟着后一个字；能点的名字整段不断。 + */ +function wrap(segs, maxW, size, mono) { + const units = []; + let cur = null; + const open = () => { + cur = { parts: [], trail: [] }; + units.push(cur); + }; + const add = (list, text, style) => { + const last = list[list.length - 1]; + if (last && last.style === style) + last.text += text; + else + list.push({ text, style }); + }; + const lastText = () => { + const last = cur && cur.parts[cur.parts.length - 1]; + return last ? last.text : ""; + }; + for (const style of segs) { + const tokens = style.u ? [style.text] : style.text.match(TOKENS) || []; + for (const tok of tokens) { + if (tok === "\n") { + units.push({ br: true }); + cur = null; + continue; + } + if (/^\s+$/.test(tok)) { + if (cur) + add(cur.trail, tok, style); + continue; + } + const wide = !mono && WIDE_CHAR.test(tok); + const joins = cur && cur.trail.length === 0 && (CLOSING.test(tok) || OPENING.test(lastText()) || !(wide || cur.wide)); + if (!joins) + open(); + add(cur.parts, tok, style); + cur.wide = wide; + } + } + const measure = (list) => list.reduce((sum, p) => sum + widthOf(p.text, size, mono), 0); + const lines = [[]]; + let w = 0; + const emit = (text, style) => add(lines[lines.length - 1], text, style); + const newLine = () => { + const line = lines[lines.length - 1]; + const tail = line[line.length - 1]; + if (tail) + tail.text = tail.text.replace(/\s+$/, ""); + lines.push([]); + w = 0; + }; + for (const unit of units) { + if (unit.br) { + newLine(); + continue; + } + const uw = measure(unit.parts); + if (w > 0 && w + uw > maxW) + newLine(); + for (const part of unit.parts) emit(part.text, part.style); + w += uw; + for (const part of unit.trail) emit(part.text, part.style); + w += measure(unit.trail); + } + return lines.map((line) => { + const tail = line[line.length - 1]; + if (tail) + tail.text = tail.text.replace(/\s+$/, ""); + return line + .filter((p) => p.text) + .map((p) => Object.assign({}, p.style, { text: p.text })); + }); +} + +function joinLines(lines) { + const out = []; + lines.forEach((line, i) => { + if (i > 0) + out.push(seg("\n", C.fg)); + for (const s of line) out.push(s); + }); + return merge(out); +} + +// ─── 节点 ──────────────────────────────────────────────────────────────────── + +/** + * 文字：`content` 是字符串或着色的段；给了 `maxW` 就按它断行。宽、高都跟着字长，不靠 OpenPencil 折行。 + * 给了 `fixedW` 时宽度定死：几个字符的多色文字按内容长会被导出时挤小。 + * o: size、color、weight、mono、lh（行高 px）、maxW、fixedW、name + */ +function text(parent, content, o) { + const opt = o || {}; + const size = opt.size || 13; + const mono = Boolean(opt.mono); + let segs = typeof content === "string" ? px(content, opt.color || C.fg) : content; + if (opt.maxW) + segs = joinLines(wrap(segs, opt.maxW, size, mono)); + if (!segs.some((s) => s.text.trim())) + return null; + const plain = segs.length === 1 && !segs[0].u && !segs[0].w; + const node = { + type: "text", + name: opt.name || segs.map((s) => s.text).join("").replace(/\n/g, " ").slice(0, 40), + fontFamily: mono ? MONO : UI, + fontSize: size, + fontWeight: opt.weight || 400, + lineHeight: (opt.lh || 20) / size, + width: "fit_content", + height: "fit_content", + textGrowth: "auto", + }; + if (opt.fixedW) { + node.width = opt.fixedW; + node.textGrowth = "fixed-width"; + } + if (plain) { + node.content = segs[0].text; + node.fill = solid(segs[0].fill); + } + else { + node.content = segs.map((s) => { + const piece = { text: s.text, fill: s.fill }; + if (s.u) + piece.underline = true; + if (s.w) + piece.fontWeight = s.w; + return piece; + }); + node.fill = solid(C.fg); + } + return I(parent, node); +} + +function icon(parent, name, color, size) { + return I(parent, { type: "icon_font", name, iconFontName: name, width: size, height: size, fill: solid(color) }); +} + +function box(parent, name, o) { + const opt = o || {}; + const node = { + type: "frame", + name, + layout: opt.layout || "horizontal", + width: opt.width || "fill_container", + height: opt.height || "fit_content", + gap: opt.gap == null ? 0 : opt.gap, + clipContent: Boolean(opt.clip), + }; + if (opt.x != null) { + node.x = opt.x; + node.y = opt.y || 0; + } + if (opt.padding != null) + node.padding = opt.padding; + if (opt.align) + node.alignItems = opt.align; + if (opt.justify) + node.justifyContent = opt.justify; + if (opt.fill) + node.fill = solid(opt.fill); + if (opt.radius != null) + node.cornerRadius = opt.radius; + if (opt.stroke) + node.stroke = { thickness: 1, fill: solid(opt.stroke) }; + return I(parent, node); +} + +function row(parent, name, o) { + return box(parent, name, Object.assign({ layout: "horizontal", align: "center" }, o || {})); +} + +function col(parent, name, o) { + return box(parent, name, Object.assign({ layout: "vertical" }, o || {})); +} + +function spacer(parent, name, width, height) { + return I(parent, { type: "frame", name, width, height }); +} + +/** 小标签（具名导出、useReducer、元素……）：给定颜色的淡底、描边。 */ +function tag(parent, label, color, bg) { + const pill = row(parent, "Tag / " + label, { + width: "fit_content", + height: 18, + padding: [0, 5], + radius: 4, + fill: mix(color, bg, 0.14), + stroke: mix(color, bg, 0.45), + }); + text(pill, label, { size: 11, color, lh: 16, weight: 500 }); + return pill; +} + +function tagWidth(label) { + return widthOf(label, 11, false) + 12; +} + +/** 渲染大纲里的小框：条件「当 … 时」、列表「对 … 的每一项」。 */ +function group(parent, segs, color, bg) { + const pill = row(parent, "Group", { + width: "fit_content", + height: 20, + padding: [0, 5], + radius: 4, + fill: mix(color, bg, 0.14), + stroke: mix(color, bg, 0.45), + }); + text(pill, segs, { size: 12.5, mono: true, lh: 18 }); + return pill; +} + +// ─── 卡片 ──────────────────────────────────────────────────────────────────── + +/** 卡片右上角：问 AI、编辑。 */ +function tools(parent) { + const bar = row(parent, "Tools", { width: "fit_content", height: 20, gap: 2 }); + for (const name of ["sparkles", "pencil"]) { + const button = row(bar, name, { width: 22, height: 20, justify: "center", radius: 4 }); + icon(button, name, C.desc, 14); + } +} + +/** + * 一张卡片：折叠箭头（有子块才有：`open` 展开、`closed` 收起）、种类图标、内容、右上角两个按钮。 + * `w` 是卡片外宽；返回内容区和内容区的宽度，属性行、表格按它断行。 + */ +function card(parent, kind, w, o) { + const opt = o || {}; + const bg = mix(kind.color, C.editor, 0.07); + const node = box(parent, kind.label + (opt.name ? " / " + opt.name : ""), { + layout: "horizontal", + gap: 10, + padding: [8, 10, 8, 8], + radius: 8, + align: "start", + fill: bg, + stroke: mix(kind.color, C.editor, 0.35), + }); + const fold = row(node, "Fold", { width: 14, height: 20, justify: "center" }); + if (opt.fold) + icon(fold, opt.fold === "open" ? "chevron-down" : "chevron-right", C.desc, 14); + const kindBox = row(node, "Kind / " + kind.label, { width: 20, height: 20, justify: "center" }); + icon(kindBox, kind.icon, kind.color, 16); + const content = col(node, "Content", { gap: 3 }); + tools(node); + return { node, content, w: w - 18 - 24 - 30 - 10 - 46, bg, labelW: opt.labelW || 76 }; +} + +/** 属性表的一行：左边说明色的标签，右边值。`value` 是着色的段、字符串，或自己画的函数 `(frame, width)`。 */ +function prop(ctx, label, value, o) { + const opt = o || {}; + const line = row(ctx.content, "Prop / " + label, { gap: 12, align: "start" }); + const key = row(line, "Key", { width: ctx.labelW, height: 20, gap: 4 }); + if (opt.fold) + icon(key, opt.fold === "open" ? "chevron-down" : "chevron-right", C.desc, 14); + text(key, label, { size: 12.5, color: C.desc, lh: 20 }); + const valueW = ctx.w - ctx.labelW - 12; + if (typeof value === "function") { + const frame = col(line, "Value", { gap: 2 }); + value(frame, valueW); + return line; + } + const segs = typeof value === "string" ? px(value, opt.color || C.fg) : value; + text(line, segs, { size: opt.size || 13, mono: opt.mono !== false, maxW: valueW, weight: opt.weight }); + return line; +} + +/** 名称一行：名字加粗，后面跟小标签 `[文字, 颜色]`。 */ +function nameProp(ctx, name, color, tags, label) { + const line = row(ctx.content, "Prop / " + (label || "名称"), { gap: 12, align: "start" }); + const key = row(line, "Key", { width: ctx.labelW, height: 20 }); + text(key, label || "名称", { size: 12.5, color: C.desc, lh: 20 }); + const value = row(line, "Value", { gap: 6, height: 20 }); + text(value, name, { mono: true, weight: 600, color }); + for (const [tagLabel, tagColor] of tags || []) tag(value, tagLabel, tagColor, ctx.bg); + return line; +} + +/** 值后面跟一个小标签（「来自 … 自定义钩子」「仅挂载时 浏览器绘制前」）。 */ +function withTag(ctx, segs, label, color, mono) { + return (frame) => { + const line = row(frame, "Line", { gap: 6, height: 20, width: "fit_content" }); + text(line, segs, { mono: mono !== false }); + tag(line, label, color, ctx.bg); + }; +} + +/** + * 表格：`cols` 是 `{name, color?, mono?}`，最后一列分剩下的；格子是着色的段、字符串（按列色）或带 `draw` 的对象。 + * 列宽按整列的内容估，表头浅底，行和列之间一条分隔线。 + */ +function table(ctx, cols, rows) { + const tableW = ctx.w - 5; + const cellText = (cell) => typeof cell === "string" ? cell : Array.isArray(cell) ? cell.map((s) => s.text).join("") : (cell.est || ""); + const natural = cols.map((c, i) => { + let wMax = widthOf(c.name, 12, false); + for (const r of rows) wMax = Math.max(wMax, widthOf(cellText(r[i]), 12.5, c.mono !== false) + (r[i] && r[i].extra ? r[i].extra : 0)); + return Math.ceil(wMax + 18); + }); + const last = cols.length - 1; + const avail = tableW - 2 - last; + const widths = natural.slice(); + widths[last] = avail - widths.slice(0, last).reduce((a, b) => a + b, 0); + const outer = col(ctx.content, "Table wrap", { padding: [2, 0, 2, 5] }); + const grid = col(outer, "Table", { radius: 4, stroke: C.borderStrong, clip: true }); + const headBg = mix("#ffffff", ctx.bg, 0.05); + const drawRow = (cells, header) => { + if (!header) + I(grid, { type: "rectangle", name: "Divider", width: "fill_container", height: 1, fill: solid(C.borderStrong) }); + const line = row(grid, header ? "Header" : "Row", { align: "start", fill: header ? headBg : null }); + cells.forEach((cell, i) => { + if (i > 0) + I(line, { type: "rectangle", name: "Sep", width: 1, height: "fill_container", fill: solid(C.borderStrong) }); + const inner = widths[i] - 16; + const frame = col(line, cols[i].name, { width: widths[i], padding: [2, 8], gap: 3 }); + if (header) { + text(frame, cell, { size: 12, color: C.desc, lh: 20 }); + return; + } + if (cell && cell.draw) { + cell.draw(frame, inner); + return; + } + const segs = typeof cell === "string" ? px(cell, cols[i].color || C.fg) : cell; + text(frame, segs, { size: 12.5, mono: cols[i].mono !== false, maxW: inner, lh: 20 }); + }); + }; + drawRow(cols.map((c) => c.name), true); + for (const r of rows) drawRow(r, false); +} + +// ─── 渲染大纲 ──────────────────────────────────────────────────────────────── + +/** 大纲一行里的几样东西：元素名、属性、文字、条件小框。 */ +const el = (name) => ({ kind: "el", name }); +const at = (name, value) => ({ kind: "attr", name, value }); +const words = (segs) => ({ kind: "words", segs }); +const cond = (segs, color) => ({ kind: "group", segs, color: color || C.branch }); + +function drawPiece(parent, p, bg) { + if (p.kind === "el") + return text(parent, [seg(`<${p.name}>`, /^[A-Z]/.test(p.name) ? C.component : C.nativeTag)], { mono: true }); + if (p.kind === "attr") { + const segs = [seg(p.name, C.variable), seg("=", C.fg)].concat(p.value); + const plain = segs.map((s) => s.text).join(""); + return text(parent, segs, { mono: true, fixedW: plain.length < 6 ? Math.ceil(widthOf(plain, 13, true)) + 2 : null }); + } + if (p.kind === "words") + return text(parent, p.segs, { mono: true }); + return group(parent, p.segs, p.color, bg); +} + +/** 大纲：一行一个元素，下一层缩进、左边一条竖线；带下一层的行前面有折叠箭头。 */ +function outline(parent, items, bg) { + const list = col(parent, "Outline", { gap: 2 }); + for (const item of items) { + const line = row(list, "Item", { gap: 4, align: "start" }); + const fold = row(line, "Fold", { width: 14, height: 20, justify: "center" }); + if (item.kids) + icon(fold, "chevron-down", C.desc, 14); + const holder = row(line, "Line", { gap: 8, height: 20 }); + for (const p of item.line) drawPiece(holder, p, bg); + if (item.kids) { + const sub = row(list, "Sub", { gap: 10, align: "start", padding: [0, 0, 0, 5] }); + I(sub, { type: "rectangle", name: "Guide", width: 1, height: "fill_container", fill: solid(C.guide) }); + const inner = col(sub, "Kids", { gap: 2 }); + outline(inner, item.kids, bg); + } + } + return list; +} + +// ─── 卡片内容：第 1–20 行 ──────────────────────────────────────────────────── + +const EXPORTED = ["具名导出", C.keyword]; +const SESSION_EFFECT = "副作用「id 变化时」"; +const OPEN_EFFECT = "副作用「open 变化时」"; +const MOUNT_EFFECT = "副作用「仅挂载时」"; + +/** 导入收起时只剩一行：来源和导入项个数。 */ +function importCard(parent, w) { + const ctx = card(parent, K.import, w, { name: "'react'", fold: "closed" }); + const line = row(ctx.content, "Summary", { gap: 6, height: 20 }); + text(line, "来源", { size: 12.5, color: C.desc }); + text(line, "'react'", { mono: true, color: C.string }); + text(line, "·", { color: C.dim }); + text(line, "导入项", { size: 12.5, color: C.desc }); + text(line, "10 个", { size: 12.5, color: C.desc }); +} + +function contextCard(parent, w) { + const ctx = card(parent, K.context, w, { name: "ThemeContext" }); + nameProp(ctx, "ThemeContext", K.context.color); + prop(ctx, "值的类型", cx("Theme")); + prop(ctx, "默认值", px("'light'", C.string)); + prop(ctx, "读取处", [link("Panel", C.component)]); +} + +/** 文件里的普通函数，照现有函数卡：名称 / 访问级别 / 输入参数 / 输出参数，函数体收起。 */ +function reducerCard(parent, w) { + const ctx = card(parent, K.fn, w, { name: "reducer", fold: "closed" }); + nameProp(ctx, "reducer", C.fn); + prop(ctx, "访问级别", px("私有", C.keyword), { mono: false }); + prop(ctx, "输入参数", px("2 个", C.desc), { mono: false, fold: "open" }); + table(ctx, [{ name: "名称", color: C.variable }, { name: "类型", color: C.type }, { name: "默认值" }], [ + ["state", cx("State"), px("", C.fg)], + ["action", cx("Action"), px("", C.fg)], + ]); + prop(ctx, "输出参数", cx("State")); +} + +function hookCard(parent, w) { + const ctx = card(parent, K.hook, w, { name: "useChatSession", fold: "open" }); + nameProp(ctx, "useChatSession", C.fn, [EXPORTED]); + prop(ctx, "参数", px("1 个", C.desc), { mono: false, fold: "open" }); + table(ctx, [{ name: "名称", color: C.variable }, { name: "类型", color: C.type }], [["id", cx("字符串")]]); + prop(ctx, "返回", px("1 个", C.desc), { mono: false, fold: "open" }); + table(ctx, [{ name: "名称", color: C.variable }, { name: "是什么", mono: false }], [["messages", [link("状态 messages", K.state.color)]]]); +} + +function messagesStateCard(parent, w) { + const ctx = card(parent, K.state, w, { name: "messages" }); + nameProp(ctx, "messages", C.variable); + prop(ctx, "类型", cx("Message[]")); + prop(ctx, "初始值", cx("空数组")); + prop(ctx, "修改函数", px("setMessages", C.fn)); + prop(ctx, "在哪改", [link(SESSION_EFFECT, K.effect.color), seg(" 里的 ", C.fg)].concat(cx("ws.onmessage"))); +} + +/** 副作用：触发时机、用到、改动、清理函数（有才写）一行一项，函数体收起。 */ +function effectCard(parent, w, o) { + const ctx = card(parent, K.effect, w, { name: o.name, fold: "closed" }); + prop(ctx, "触发时机", o.trigger, { mono: o.triggerMono !== false }); + prop(ctx, "用到", o.uses); + prop(ctx, "改动", o.changes, { mono: o.changesMono !== false }); + if (o.cleanup) + prop(ctx, "清理函数", cx(o.cleanup)); + return ctx; +} + +function sessionEffectCard(parent, w) { + effectCard(parent, w, { + name: "id 变化时", + trigger: [seg("id", C.variable), seg(" 变化时", C.keyword)], + uses: px("id", C.variable), + changes: [seg("状态 ", C.fg), seg("messages", C.variable)], + cleanup: "ws.close()", + }); +} + +// ─── 卡片内容：第 22–58 行 ─────────────────────────────────────────────────── + +const CALLBACK = "回调"; +const PROP_COLS = [ + { name: "名称", color: C.variable }, + { name: "类型", color: C.type }, + { name: "默认值" }, + { name: "必填", mono: false }, +]; + +/** 构造参数表的一行：名称（回调带小标签）| 类型 | 默认值 | 必填。 */ +function propRow(ctx, name, type, def, required) { + const callback = /=>/.test(type); + const nameCell = { + est: name, + extra: callback ? tagWidth(CALLBACK) + 6 : 0, + draw: (frame) => { + const line = row(frame, "Name", { gap: 6, height: 20, width: "fit_content" }); + text(line, name, { size: 12.5, mono: true, color: C.variable }); + if (callback) + tag(line, CALLBACK, C.component, ctx.bg); + }, + }; + return [nameCell, cx(type), def === "—" ? px("—", C.desc) : cx(def), px(required, required === "—" ? C.desc : C.storage)]; +} + +function panelCard(parent, w) { + const ctx = card(parent, K.component, w, { name: "Panel", fold: "open" }); + nameProp(ctx, "Panel", C.component, [EXPORTED]); + prop(ctx, "构造参数", [seg("2 个", C.desc), seg(" · 类型 ", C.desc), link("Props", C.type)], { fold: "open" }); + table(ctx, PROP_COLS, [ + propRow(ctx, "id", "字符串", "—", "是"), + propRow(ctx, "onClose", "() => 无", "—", "是"), + ]); +} + +function themeCard(parent, w) { + const ctx = card(parent, K.read, w, { name: "theme", labelW: 100 }); + nameProp(ctx, "theme", C.variable, [], "变量"); + prop(ctx, "来自", [seg("上下文 ", C.fg), link("ThemeContext", K.context.color)]); + prop(ctx, "没有外层提供时", px("'light'", C.string)); +} + +function messagesReadCard(parent, w) { + const ctx = card(parent, K.read, w, { name: "messages" }); + nameProp(ctx, "messages", C.variable, [], "取出"); + prop(ctx, "来自", withTag(ctx, [link("useChatSession", C.fn)].concat(cx("(id)")), "自定义钩子", K.hook.color)); +} + +function openStateCard(parent, w) { + const ctx = card(parent, K.state, w, { name: "open" }); + nameProp(ctx, "open", C.variable); + prop(ctx, "初始值", [seg("首次渲染时调用 ", C.fg)].concat(cx("readOpen(id)"))); + prop(ctx, "修改函数", px("setOpen", C.fn)); + prop(ctx, "在哪改", [link("toggle", C.fn), seg("、", C.fg), link(OPEN_EFFECT, K.effect.color)]); +} + +function reducerStateCard(parent, w) { + const ctx = card(parent, K.state, w, { name: "state" }); + nameProp(ctx, "state", C.variable, [["useReducer", K.state.color]]); + prop(ctx, "初始值", cx("{ count: 0 }")); + prop(ctx, "派发函数", px("dispatch", C.fn)); + prop(ctx, "处理函数", [link("reducer", C.fn)]); + prop(ctx, "动作", "", { fold: "open" }); + table(ctx, [{ name: "动作", color: C.string }, { name: "状态怎么变" }], [ + ["'add'", [seg("count", C.variable), seg(" 加 ", C.fg), seg("1", C.number)]], + [px("其他", C.desc), px("不变", C.fg)], + ]); + prop(ctx, "在哪派发", [link("toggle", C.fn), seg("（", C.fg), seg("'add'", C.string), seg("）", C.fg)]); +} + +function transitionCard(parent, w) { + const ctx = card(parent, K.read, w, { name: "isPending, startTransition" }); + prop(ctx, "取出", px("2 个", C.desc), { mono: false, fold: "open" }); + table(ctx, [{ name: "名称", color: C.variable }, { name: "是什么", mono: false }], [ + ["isPending", "是否正在过渡"], + [px("startTransition", C.fn), "启动过渡的函数"], + ]); + prop(ctx, "来自", withTag(ctx, cx("useTransition()"), "React", C.component)); +} + +function boxRefCard(parent, w) { + const ctx = card(parent, K.ref, w, { name: "boxRef" }); + nameProp(ctx, "boxRef", C.variable, [["元素", K.ref.color]]); + prop(ctx, "指向", [seg("
", C.nativeTag), seg(" 元素（", C.fg), seg("HTMLDivElement", C.type), seg("）", C.fg)]); + prop(ctx, "初始值", cx("空")); + prop(ctx, "用在", [seg("
", C.nativeTag), seg(" 的 ref 属性；", C.fg), link(MOUNT_EFFECT, K.effect.color)]); +} + +function timerCard(parent, w) { + const ctx = card(parent, K.ref, w, { name: "timer" }); + nameProp(ctx, "timer", C.variable, [["可变值，改了不重新渲染", K.ref.color]]); + prop(ctx, "存的类型", cx("数值")); + prop(ctx, "初始值", cx("未定义")); + prop(ctx, "写入", [link(OPEN_EFFECT, K.effect.color)]); + prop(ctx, "读取", [link(OPEN_EFFECT, K.effect.color), seg(" 的清理函数", C.fg)]); +} + +function totalCard(parent, w) { + const ctx = card(parent, K.derived, w, { name: "total", fold: "closed" }); + nameProp(ctx, "total", C.variable); + prop(ctx, "计算", (frame, vw) => { + text(frame, cx("sum * 2"), { mono: true, maxW: vw }); + text(frame, "其中 sum = messages.length", { mono: true, size: 12.5, color: C.desc, maxW: vw }); + }); + prop(ctx, "重算时机", [seg("messages", C.variable), seg(" 变化时", C.keyword)]); +} + +function toggleCard(parent, w) { + const ctx = card(parent, K.callback, w, { name: "toggle", fold: "closed" }); + nameProp(ctx, "toggle", C.fn, [["记忆化", K.callback.color]]); + prop(ctx, "参数", px("1 个", C.desc), { mono: false, fold: "open" }); + table(ctx, [{ name: "名称", color: C.variable }, { name: "类型", color: C.type }], [["next", cx("布尔")]]); + prop(ctx, "调用位置", [link("handleClick", C.fn)]); + prop(ctx, "重建时机", [seg("不重建", C.keyword), seg("（依赖为空）", C.desc)], { mono: false }); +} + +function openEffectCard(parent, w) { + effectCard(parent, w, { + name: "open 变化时", + trigger: [seg("open", C.variable), seg(" 变化时", C.keyword)], + uses: [seg("open", C.variable), seg("、", C.fg), seg("timer", C.variable)], + changes: [ + seg("状态 ", C.fg), + seg("open", C.variable), + seg("（1 秒后设为 ", C.fg), + seg("假", C.number), + seg("）、引用 ", C.fg), + seg("timer", C.variable), + ], + cleanup: "clearTimeout(timer.current)", + }); +} + +function renderEffectCard(parent, w) { + effectCard(parent, w, { + name: "每次渲染后", + trigger: px("每次渲染后", C.keyword), + triggerMono: false, + uses: px("total", C.variable), + changes: cx("document.title"), + }); +} + +function layoutEffectCard(parent, w) { + const ctx = card(parent, K.effect, w, { name: "仅挂载时", fold: "closed" }); + prop(ctx, "触发时机", withTag(ctx, px("仅挂载时", C.keyword), "浏览器绘制前", K.effect.color, false)); + prop(ctx, "用到", [link("boxRef", C.variable)]); + prop(ctx, "改动", px("无", C.desc), { mono: false }); +} + +function handleClickCard(parent, w) { + const ctx = card(parent, K.handler, w, { name: "handleClick", fold: "closed" }); + nameProp(ctx, "handleClick", C.fn); + prop(ctx, "参数", px("无", C.desc), { mono: false }); + prop(ctx, "绑定事件", [seg("
", C.nativeTag), seg(" 的 onClick", C.fg)]); + prop(ctx, "调用", [link("toggle", C.fn), seg("（在过渡里）", C.desc)]); +} + +// Panel 返回的 JSX：key 写在列表小框后面，不再算元素的属性 +const PANEL_OUTLINE = [ + { + line: [el("div"), at("ref", [link("boxRef", C.variable)]), at("onClick", [link("handleClick", C.fn)])], + kids: [ + { line: [cond(cx("当 isPending 时")), el("Spinner")] }, + { + line: [cond(cx("对 messages 的每一项 m"), C.loop), words([seg("key ", C.desc)].concat(cx("m.id")))], + kids: [{ line: [el("Row"), at("m", cx("m"))] }], + }, + { line: [words([seg("{", C.desc)].concat(cx("state.count"), [seg("}", C.desc)]))] }, + ], + }, +]; + +function renderCard(parent, w) { + const ctx = card(parent, K.render, w, { name: "Panel" }); + outline(ctx.content, PANEL_OUTLINE, ctx.bg); +} + +// ─── 编辑器和预览对齐 ──────────────────────────────────────────────────────── + +/** + * 一段源码配一张卡片：左边是第 `from`–`to` 行，右边是这段的卡片，两边顶端对齐，较矮的一边下面留空。 + * 卡片内容比卡片顶端低 8px，源码也往下让 8px，第一行字和卡片第一行属性在同一高度。 + * `depth` 是子块的层数，每层左边一条竖线；`last` 是这一层的最后一张，竖线到卡片底边为止，源码比卡片长也不往下伸。 + */ +function band(parent, b) { + const line = row(parent, "Lines " + b.from + "–" + b.to, { align: "start" }); + const code = col(line, "Code", { width: CODE_W, height: "fill_container", padding: [8, 0, 0, 0], clip: true }); + for (let n = b.from; n <= b.to; n++) { + const src = CODE[n - 1]; + const holder = row(code, "Line " + n, { height: 20 }); + const number = row(holder, "Number", { width: 44, height: 20, justify: "end" }); + text(number, String(n), { mono: true, color: C.dim }); + spacer(holder, "Margin", 26 + src.indent * MONO_CHAR, 20); + text(holder, src.segs, { mono: true }); + } + I(line, { type: "rectangle", name: "Sash", width: 1, height: "fill_container", fill: solid(C.border) }); + const depth = b.depth || 0; + const right = col(line, "Preview", { height: "fill_container", padding: [0, PREVIEW_PAD, b.last ? 8 : 0, PREVIEW_PAD] }); + const level = row(right, "Level", { height: b.last ? "fit_content" : "fill_container", gap: 8, align: "start" }); + for (let d = 0; d < depth; d++) { + const guide = col(level, "Guide", { width: 12, height: "fill_container", align: "center" }); + I(guide, { type: "rectangle", name: "Line", width: 1, height: "fill_container", fill: solid(C.guide) }); + } + if (b.draw) { + const cards = col(level, "Cards", { padding: [0, 0, b.last ? 0 : 8, 0] }); + b.draw(cards, PREVIEW_W - PREVIEW_PAD * 2 - depth * 20); + } +} + +// ─── VS Code 窗口 ──────────────────────────────────────────────────────────── + +function activity(parent) { + const bar = col(parent, "Activity bar", { width: 48, fill: C.side }); + const icons = ["files", "search", "git-branch", "play", "monitor", "blocks", "rocket", "book-open-text"]; + for (const name of icons) { + const on = name === "book-open-text"; + const cell = row(bar, "Item / " + name, { width: 48, height: 42, justify: on ? "start" : "center", gap: on ? 10 : 0 }); + if (on) + I(cell, { type: "rectangle", name: "Active bar", width: 2, height: 42, fill: solid(C.focus) }); + icon(cell, name, on ? C.activityOn : C.activityIdle, 22); + } +} + +function sidebar(parent, selected) { + const side = col(parent, "Sidebar", { width: SIDE_W, fill: C.side }); + const header = row(side, "Header", { height: 34, padding: [0, 12, 0, 16], justify: "space_between" }); + text(header, "代码阅读", { size: 11 }); + const actions = row(header, "Actions", { width: "fit_content", gap: 10 }); + for (const name of ["git-pull-request", "file-plus", "refresh-cw"]) icon(actions, name, C.fg, 14); + const list = col(side, "Tree", { padding: [4, 0, 8, 0] }); + for (const item of TREE) { + const line = row(list, item.name, { + height: 26, + gap: 6, + padding: [0, 8, 0, 10 + item.depth * 14], + fill: item.name === selected ? C.selection : null, + }); + if (item.kind === "folder") { + icon(line, item.open ? "chevron-down" : "chevron-right", C.fg, 14); + icon(line, "folder", C.folder, 15); + } + else { + spacer(line, "Twisty", 14, 14); + icon(line, "atom", C.tsx, 14); + } + text(line, item.name, { color: item.name === selected ? C.fgStrong : C.fg }); + } +} + +/** 一组编辑器的标签栏：右边那组（代码阅读预览）有焦点，标签顶上一条聚焦色，右边是编辑 / 预览切换。 */ +function editorTitle(parent, focused) { + const bar = row(parent, "Editor title", { height: 36, justify: "space_between", fill: C.side }); + const tab = col(bar, "Tab", { width: 140, height: "fill_container", fill: C.editor }); + I(tab, { type: "rectangle", name: "Active", width: "fill_container", height: 2, fill: solid(focused ? C.focus : C.editor) }); + const label = row(tab, "Tab label", { height: "fill_container", padding: [0, 12], gap: 6 }); + icon(label, "atom", C.tsx, 14); + text(label, FILE, { color: focused ? C.fgStrong : C.fg }); + if (!focused) + return; + const mode = row(bar, "Mode", { width: "fit_content", padding: [2, 2], gap: 2, radius: 5, fill: C.field, stroke: C.borderStrong }); + const edit = row(mode, "Seg / 编辑", { width: "fit_content", padding: [2, 8], gap: 4, radius: 3 }); + icon(edit, "pencil", C.desc, 13); + text(edit, "编辑", { size: 12, color: C.desc }); + const preview = row(mode, "Seg / 预览", { width: "fit_content", padding: [2, 8], gap: 4, radius: 3, fill: C.toggleOn }); + icon(preview, "eye", C.fgStrong, 13); + text(preview, "预览", { size: 12, color: C.fgStrong }); + spacer(bar, "Pad", 8, 8); +} + +function crumb(parent) { + const line = row(parent, "Breadcrumb", { padding: [6, 16], gap: 6 }); + CRUMBS.forEach((part, index) => { + if (index) + text(line, "/", { size: 12, color: C.dim }); + text(line, part, { size: 12, color: index === CRUMBS.length - 1 ? C.fg : C.desc }); + }); +} + +function filters(parent, chips, count) { + const bar = row(parent, "Filter", { height: 36, padding: [0, 16], gap: 8 }); + text(bar, "筛选", { size: 12, color: C.desc }); + for (const chip of chips) { + const item = row(bar, "Chip / " + chip, { width: "fit_content", height: 24, padding: [0, 8], gap: 4, radius: 4, fill: C.input }); + text(item, chip, { size: 12 }); + icon(item, "chevron-down", C.desc, 12); + } + spacer(bar, "Spacer", "fill_container", 8); + text(bar, count + " 块", { size: 12, color: C.desc }); +} + +/** 两组编辑器的头：左边源码的标签栏、面包屑，下面让出筛选栏那么高；右边预览的标签栏、面包屑、筛选栏。 */ +function groupHeads(parent) { + const line = row(parent, "Group heads", { align: "start" }); + const left = col(line, "Editor group 1", { width: CODE_W }); + editorTitle(left, false); + crumb(left); + spacer(left, "Filter room", "fill_container", 36); + I(line, { type: "rectangle", name: "Sash", width: 1, height: "fill_container", fill: solid(C.border) }); + const right = col(line, "Editor group 2", {}); + editorTitle(right, true); + crumb(right); + filters(right, ["种类", "访问级别"], 5); +} + +function status(parent) { + const bar = row(parent, "Status", { height: 26, padding: [0, 12], justify: "space_between", fill: C.side }); + const branch = row(bar, "Branch", { width: "fit_content", gap: 4 }); + icon(branch, "git-branch", C.fg, 13); + text(branch, "master", { size: 12 }); + const right = row(bar, "Right", { width: "fit_content", gap: 16 }); + text(right, "代码阅读", { size: 12 }); + text(right, "TypeScript JSX", { size: 12 }); +} + +/** VS Code 窗口：标题栏、活动栏、侧栏、编辑器（左源码、右预览，一段段对齐）、状态栏。 */ +function windowOf(name, x, bands) { + const win = col(null, name, { x, width: WIN_W, fill: C.side }); + const title = row(win, "Title bar", { height: 36, padding: [0, 12], justify: "space_between" }); + const lights = row(title, "Lights", { width: "fit_content", gap: 8 }); + for (const color of ["#ff5f57", "#febc2e", "#28c840"]) I(lights, { type: "ellipse", width: 12, height: 12, fill: solid(color) }); + text(title, "web — " + FILE, { size: 12, color: C.desc }); + spacer(title, "Balance", 52, 12); + const body = row(win, "Body", { align: "start", fill: C.side }); + activity(body); + sidebar(body, FILE); + const editor = col(body, "Editor", { fill: C.editor }); + groupHeads(editor); + for (const b of bands) band(editor, b); + const end = row(editor, "End", { height: 28 }); + spacer(end, "Code", CODE_W, 28); + I(end, { type: "rectangle", name: "Sash", width: 1, height: "fill_container", fill: solid(C.border) }); + status(win); + return win; +} + +// ─── 画板 ──────────────────────────────────────────────────────────────────── + +windowOf("Prototype / React 钩子 · 自定义钩子与上下文", 0, [ + { from: 1, to: 2, draw: importCard }, + { from: 3, to: 4, draw: contextCard }, + { from: 5, to: 11, draw: reducerCard }, + { from: 12, to: 12, draw: hookCard }, + { from: 13, to: 13, depth: 1, draw: messagesStateCard }, + { from: 14, to: 18, depth: 1, last: true, draw: sessionEffectCard }, + { from: 19, to: 20 }, +]); + +windowOf("Prototype / React 钩子 · 组件 Panel", WIN_W + BOARD_GAP, [ + { from: 22, to: 22, draw: panelCard }, + { from: 23, to: 23, depth: 1, draw: themeCard }, + { from: 24, to: 24, depth: 1, draw: messagesReadCard }, + { from: 25, to: 25, depth: 1, draw: openStateCard }, + { from: 26, to: 26, depth: 1, draw: reducerStateCard }, + { from: 27, to: 27, depth: 1, draw: transitionCard }, + { from: 28, to: 28, depth: 1, draw: boxRefCard }, + { from: 29, to: 29, depth: 1, draw: timerCard }, + { from: 30, to: 33, depth: 1, draw: totalCard }, + { from: 34, to: 37, depth: 1, draw: toggleCard }, + { from: 38, to: 41, depth: 1, draw: openEffectCard }, + { from: 42, to: 44, depth: 1, draw: renderEffectCard }, + { from: 45, to: 47, depth: 1, draw: layoutEffectCard }, + { from: 48, to: 50, depth: 1, draw: handleClickCard }, + { from: 51, to: 57, depth: 1, last: true, draw: renderCard }, + { from: 58, to: 58 }, +]); diff --git a/docs/prototype/code-reader/openpencil/react-hooks.op b/docs/prototype/code-reader/openpencil/react-hooks.op new file mode 100644 index 0000000..5c761bc --- /dev/null +++ b/docs/prototype/code-reader/openpencil/react-hooks.op @@ -0,0 +1,25380 @@ +{ + "version": "0.8.4", + "name": "OpenPencil CLI Session", + "children": [ + { + "type": "frame", + "id": "n1", + "name": "Prototype / React 钩子 · 自定义钩子与上下文", + "x": 0.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": "n2", + "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": "n3", + "name": "Lights", + "width": "fit_content", + "height": "fit_content", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "ellipse", + "id": "n4", + "width": 12.0, + "height": 12.0, + "fill": [ + { + "type": "solid", + "color": "#ff5f57" + } + ] + }, + { + "type": "ellipse", + "id": "n5", + "width": 12.0, + "height": 12.0, + "fill": [ + { + "type": "solid", + "color": "#febc2e" + } + ] + }, + { + "type": "ellipse", + "id": "n6", + "width": 12.0, + "height": 12.0, + "fill": [ + { + "type": "solid", + "color": "#28c840" + } + ] + } + ] + }, + { + "type": "text", + "id": "n7", + "name": "web — Panel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "web — Panel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n8", + "name": "Balance", + "width": 52.0, + "height": 12.0, + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n9", + "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": "n10", + "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": "n11", + "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": "n12", + "name": "files", + "iconFontName": "files", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n13", + "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": "n14", + "name": "search", + "iconFontName": "search", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n15", + "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": "n16", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n17", + "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": "n18", + "name": "play", + "iconFontName": "play", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n19", + "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": "n20", + "name": "monitor", + "iconFontName": "monitor", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n21", + "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": "n22", + "name": "blocks", + "iconFontName": "blocks", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n23", + "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": "n24", + "name": "rocket", + "iconFontName": "rocket", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n25", + "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": "n26", + "name": "Active bar", + "width": 2.0, + "height": 42.0, + "fill": [ + { + "type": "solid", + "color": "#0078d4" + } + ], + "children": [] + }, + { + "type": "icon_font", + "id": "n27", + "name": "book-open-text", + "iconFontName": "book-open-text", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#d7d7d7" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n28", + "name": "Sidebar", + "width": 250.0, + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#181818" + } + ], + "children": [ + { + "type": "frame", + "id": "n29", + "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": "n30", + "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": "n31", + "name": "Actions", + "width": "fit_content", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n32", + "name": "git-pull-request", + "iconFontName": "git-pull-request", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n33", + "name": "file-plus", + "iconFontName": "file-plus", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n34", + "name": "refresh-cw", + "iconFontName": "refresh-cw", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n35", + "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": "n36", + "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": "n37", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n38", + "name": "folder", + "iconFontName": "folder", + "width": 15.0, + "height": 15.0, + "fill": [ + { + "type": "solid", + "color": "#8b9ba8" + } + ] + }, + { + "type": "text", + "id": "n39", + "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": "n40", + "name": "chat", + "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": "n41", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n42", + "name": "folder", + "iconFontName": "folder", + "width": 15.0, + "height": 15.0, + "fill": [ + { + "type": "solid", + "color": "#8b9ba8" + } + ] + }, + { + "type": "text", + "id": "n43", + "name": "chat", + "width": "fit_content", + "height": "fit_content", + "content": "chat", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n44", + "name": "Panel.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": "n45", + "name": "Twisty", + "width": 14.0, + "height": 14.0, + "children": [] + }, + { + "type": "icon_font", + "id": "n46", + "name": "atom", + "iconFontName": "atom", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#519aba" + } + ] + }, + { + "type": "text", + "id": "n47", + "name": "Panel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "Panel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#e8e8e8" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n48", + "name": "Row.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, + "children": [ + { + "type": "frame", + "id": "n49", + "name": "Twisty", + "width": 14.0, + "height": 14.0, + "children": [] + }, + { + "type": "icon_font", + "id": "n50", + "name": "atom", + "iconFontName": "atom", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#519aba" + } + ] + }, + { + "type": "text", + "id": "n51", + "name": "Row.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "Row.tsx", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n52", + "name": "Spinner.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, + "children": [ + { + "type": "frame", + "id": "n53", + "name": "Twisty", + "width": 14.0, + "height": 14.0, + "children": [] + }, + { + "type": "icon_font", + "id": "n54", + "name": "atom", + "iconFontName": "atom", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#519aba" + } + ] + }, + { + "type": "text", + "id": "n55", + "name": "Spinner.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "Spinner.tsx", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n56", + "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": "n57", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n58", + "name": "folder", + "iconFontName": "folder", + "width": 15.0, + "height": 15.0, + "fill": [ + { + "type": "solid", + "color": "#8b9ba8" + } + ] + }, + { + "type": "text", + "id": "n59", + "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": "n60", + "name": "App.tsx", + "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": "frame", + "id": "n61", + "name": "Twisty", + "width": 14.0, + "height": 14.0, + "children": [] + }, + { + "type": "icon_font", + "id": "n62", + "name": "atom", + "iconFontName": "atom", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#519aba" + } + ] + }, + { + "type": "text", + "id": "n63", + "name": "App.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "App.tsx", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n64", + "name": "Editor", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#1f1f1f" + } + ], + "children": [ + { + "type": "frame", + "id": "n65", + "name": "Group heads", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n66", + "name": "Editor group 1", + "width": 600.0, + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n67", + "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": "n68", + "name": "Tab", + "width": 140.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#1f1f1f" + } + ], + "children": [ + { + "type": "rectangle", + "id": "n69", + "name": "Active", + "width": "fill_container", + "height": 2.0, + "fill": [ + { + "type": "solid", + "color": "#1f1f1f" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n70", + "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": "n71", + "name": "atom", + "iconFontName": "atom", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#519aba" + } + ] + }, + { + "type": "text", + "id": "n72", + "name": "Panel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "Panel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n73", + "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": "n74", + "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": "n75", + "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": "n76", + "name": "chat", + "width": "fit_content", + "height": "fit_content", + "content": "chat", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n77", + "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": "n78", + "name": "Panel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "Panel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n79", + "name": "Filter room", + "width": "fill_container", + "height": 36.0, + "children": [] + } + ] + }, + { + "type": "rectangle", + "id": "n80", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n81", + "name": "Editor group 2", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n82", + "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": "n83", + "name": "Tab", + "width": 140.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#1f1f1f" + } + ], + "children": [ + { + "type": "rectangle", + "id": "n84", + "name": "Active", + "width": "fill_container", + "height": 2.0, + "fill": [ + { + "type": "solid", + "color": "#0078d4" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n85", + "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": "n86", + "name": "atom", + "iconFontName": "atom", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#519aba" + } + ] + }, + { + "type": "text", + "id": "n87", + "name": "Panel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "Panel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#e8e8e8" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n88", + "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": "n89", + "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": "n90", + "name": "pencil", + "iconFontName": "pencil", + "width": 13.0, + "height": 13.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n91", + "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": "n92", + "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": "n93", + "name": "eye", + "iconFontName": "eye", + "width": 13.0, + "height": 13.0, + "fill": [ + { + "type": "solid", + "color": "#e8e8e8" + } + ] + }, + { + "type": "text", + "id": "n94", + "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": "n95", + "name": "Pad", + "width": 8.0, + "height": 8.0, + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n96", + "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": "n97", + "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": "n98", + "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": "n99", + "name": "chat", + "width": "fit_content", + "height": "fit_content", + "content": "chat", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n100", + "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": "n101", + "name": "Panel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "Panel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n102", + "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": "n103", + "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": "n104", + "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": "n105", + "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": "n106", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 12.0, + "height": 12.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n107", + "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": "n108", + "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": "n109", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 12.0, + "height": 12.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n110", + "name": "Spacer", + "width": "fill_container", + "height": 8.0, + "children": [] + }, + { + "type": "text", + "id": "n111", + "name": "5 块", + "width": "fit_content", + "height": "fit_content", + "content": "5 块", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n112", + "name": "Lines 1–2", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n113", + "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": "n114", + "name": "Line 1", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n115", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n116", + "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": "n117", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n118", + "name": "import { createContext, useCallback, use", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "import", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "createContext", + "fill": "#9cdcfe" + }, + { + "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": "useLayoutEffect", + "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" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n119", + "name": "Line 2", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n120", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n121", + "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": "n122", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n123", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n124", + "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": "n125", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n126", + "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": "n127", + "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": "n128", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n129", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n130", + "name": "Kind / 导入", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n131", + "name": "import", + "iconFontName": "import", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#c586c0" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n132", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n133", + "name": "Summary", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n134", + "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": "n135", + "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": "n136", + "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": "n137", + "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": "n138", + "name": "10 个", + "width": "fit_content", + "height": "fit_content", + "content": "10 个", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n139", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n140", + "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": "n141", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n142", + "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": "n143", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n144", + "name": "Lines 3–4", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n145", + "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": "n146", + "name": "Line 3", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n147", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n148", + "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": "n149", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n150", + "name": "const ThemeContext = createContext", + "fill": "#d4d4d4" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "'light'", + "fill": "#ce9178" + }, + { + "text": ")", + "fill": "#ffd700" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n151", + "name": "Line 4", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n152", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n153", + "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": "n154", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n155", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n156", + "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": "n157", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n158", + "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": "n159", + "name": "上下文 / ThemeContext", + "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": "n160", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n161", + "name": "Kind / 上下文", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n162", + "name": "share-2", + "iconFontName": "share-2", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#4ec9b0" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n163", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n164", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n165", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n166", + "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": "n167", + "name": "Value", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n168", + "name": "ThemeContext", + "width": "fit_content", + "height": "fit_content", + "content": "ThemeContext", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 600, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#4ec9b0" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n169", + "name": "Prop / 值的类型", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n170", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n171", + "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": "n172", + "name": "Theme", + "width": "fit_content", + "height": "fit_content", + "content": "Theme", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#4ec9b0" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n173", + "name": "Prop / 默认值", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n174", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n175", + "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": "n176", + "name": "'light'", + "width": "fit_content", + "height": "fit_content", + "content": "'light'", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#ce9178" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n177", + "name": "Prop / 读取处", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n178", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n179", + "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": "n180", + "name": "Panel", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "Panel", + "fill": "#61dafb", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n181", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n182", + "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": "n183", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n184", + "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": "n185", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n186", + "name": "Lines 5–11", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n187", + "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": "n188", + "name": "Line 5", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n189", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n190", + "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": "n191", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n192", + "name": "function reducer(state: State, action: A", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "function", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "reducer", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "state", + "fill": "#9cdcfe" + }, + { + "text": ": ", + "fill": "#d4d4d4" + }, + { + "text": "State", + "fill": "#4ec9b0" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "action", + "fill": "#9cdcfe" + }, + { + "text": ": ", + "fill": "#d4d4d4" + }, + { + "text": "Action", + "fill": "#4ec9b0" + }, + { + "text": ")", + "fill": "#ffd700" + }, + { + "text": ": ", + "fill": "#d4d4d4" + }, + { + "text": "State", + "fill": "#4ec9b0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#ffd700" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n193", + "name": "Line 6", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n194", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n195", + "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": "n196", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n197", + "name": "switch (action.type) {", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "switch", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "action", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "type", + "fill": "#9cdcfe" + }, + { + "text": ")", + "fill": "#da70d6" + }, + { + "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": "n198", + "name": "Line 7", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n199", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n200", + "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": "n201", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n202", + "name": "case 'add': return { ...state, count: st", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "case", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "'add'", + "fill": "#ce9178" + }, + { + "text": ": ", + "fill": "#d4d4d4" + }, + { + "text": "return", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#179fff" + }, + { + "text": " ...", + "fill": "#d4d4d4" + }, + { + "text": "state", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "count", + "fill": "#9cdcfe" + }, + { + "text": ": ", + "fill": "#d4d4d4" + }, + { + "text": "state", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "count", + "fill": "#9cdcfe" + }, + { + "text": " + ", + "fill": "#d4d4d4" + }, + { + "text": "1", + "fill": "#b5cea8" + }, + { + "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": "n203", + "name": "Line 8", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n204", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n205", + "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": "n206", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n207", + "name": "default: return state", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "default", + "fill": "#c586c0" + }, + { + "text": ": ", + "fill": "#d4d4d4" + }, + { + "text": "return", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "state", + "fill": "#9cdcfe" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n208", + "name": "Line 9", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n209", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n210", + "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": "n211", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n212", + "name": "}", + "width": "fit_content", + "height": "fit_content", + "content": "}", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#da70d6" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n213", + "name": "Line 10", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n214", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n215", + "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": "n216", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n217", + "name": "}", + "width": "fit_content", + "height": "fit_content", + "content": "}", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#ffd700" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n218", + "name": "Line 11", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n219", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n220", + "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": "n221", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n222", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n223", + "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": "n224", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n225", + "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": "n226", + "name": "函数 / reducer", + "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": "n227", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n228", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n229", + "name": "Kind / 函数", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n230", + "name": "square-function", + "iconFontName": "square-function", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n231", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n232", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n233", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n234", + "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": "n235", + "name": "Value", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n236", + "name": "reducer", + "width": "fit_content", + "height": "fit_content", + "content": "reducer", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 600, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n237", + "name": "Prop / 访问级别", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n238", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n239", + "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": "n240", + "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": "n241", + "name": "Prop / 输入参数", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n242", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n243", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n244", + "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": "n245", + "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": "n246", + "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": "n247", + "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": "n248", + "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": "n249", + "name": "名称", + "width": 66.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n250", + "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": "n251", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n252", + "name": "类型", + "width": 66.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n253", + "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": "n254", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n255", + "name": "默认值", + "width": 492.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n256", + "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": "n257", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n258", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n259", + "name": "名称", + "width": 66.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n260", + "name": "state", + "width": "fit_content", + "height": "fit_content", + "content": "state", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n261", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n262", + "name": "类型", + "width": 66.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n263", + "name": "State", + "width": "fit_content", + "height": "fit_content", + "content": "State", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#4ec9b0" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n264", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n265", + "name": "默认值", + "width": 492.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [] + } + ] + }, + { + "type": "rectangle", + "id": "n266", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n267", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n268", + "name": "名称", + "width": 66.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n269", + "name": "action", + "width": "fit_content", + "height": "fit_content", + "content": "action", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n270", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n271", + "name": "类型", + "width": 66.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n272", + "name": "Action", + "width": "fit_content", + "height": "fit_content", + "content": "Action", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#4ec9b0" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n273", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n274", + "name": "默认值", + "width": 492.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n275", + "name": "Prop / 输出参数", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n276", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n277", + "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": "n278", + "name": "State", + "width": "fit_content", + "height": "fit_content", + "content": "State", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#4ec9b0" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n279", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n280", + "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": "n281", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n282", + "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": "n283", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n284", + "name": "Lines 12–12", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n285", + "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": "n286", + "name": "Line 12", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n287", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n288", + "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": "n289", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n290", + "name": "export function useChatSession(id: strin", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "export", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "function", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "useChatSession", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "id", + "fill": "#9cdcfe" + }, + { + "text": ": ", + "fill": "#d4d4d4" + }, + { + "text": "string", + "fill": "#4ec9b0" + }, + { + "text": ")", + "fill": "#ffd700" + }, + { + "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": "n291", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n292", + "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": "n293", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n294", + "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": "n295", + "name": "自定义钩子 / useChatSession", + "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": "n296", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n297", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n298", + "name": "Kind / 自定义钩子", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n299", + "name": "plug", + "iconFontName": "plug", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#61dafb" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n300", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n301", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n302", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n303", + "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": "n304", + "name": "Value", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n305", + "name": "useChatSession", + "width": "fit_content", + "height": "fit_content", + "content": "useChatSession", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 600, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + }, + { + "type": "frame", + "id": "n306", + "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": "n307", + "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": "n308", + "name": "Prop / 参数", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n309", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n310", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n311", + "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": "n312", + "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": "n313", + "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": "n314", + "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": "n315", + "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": "n316", + "name": "名称", + "width": 43.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n317", + "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": "n318", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n319", + "name": "类型", + "width": 582.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n320", + "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": "n321", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n322", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n323", + "name": "名称", + "width": 43.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n324", + "name": "id", + "width": "fit_content", + "height": "fit_content", + "content": "id", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n325", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n326", + "name": "类型", + "width": 582.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n327", + "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": "frame", + "id": "n328", + "name": "Prop / 返回", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n329", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n330", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n331", + "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": "n332", + "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": "n333", + "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": "n334", + "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": "n335", + "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": "n336", + "name": "名称", + "width": 82.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n337", + "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": "n338", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n339", + "name": "是什么", + "width": 543.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n340", + "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": "n341", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n342", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n343", + "name": "名称", + "width": 82.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n344", + "name": "messages", + "width": "fit_content", + "height": "fit_content", + "content": "messages", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n345", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n346", + "name": "是什么", + "width": 543.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n347", + "name": "状态 messages", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "状态 messages", + "fill": "#9cdcfe", + "underline": true + } + ], + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n348", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n349", + "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": "n350", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n351", + "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": "n352", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n353", + "name": "Lines 13–13", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n354", + "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": "n355", + "name": "Line 13", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n356", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n357", + "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": "n358", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n359", + "name": "const [messages, setMessages] = useState", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "[", + "fill": "#da70d6" + }, + { + "text": "messages", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "setMessages", + "fill": "#9cdcfe" + }, + { + "text": "]", + "fill": "#da70d6" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "useState", + "fill": "#dcdcaa" + }, + { + "text": "<", + "fill": "#d4d4d4" + }, + { + "text": "Message", + "fill": "#4ec9b0" + }, + { + "text": "[]", + "fill": "#da70d6" + }, + { + "text": ">", + "fill": "#d4d4d4" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "[]", + "fill": "#179fff" + }, + { + "text": ")", + "fill": "#da70d6" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n360", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n361", + "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": "n362", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n363", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n364", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n365", + "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": "n366", + "name": "状态 / messages", + "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": "n367", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n368", + "name": "Kind / 状态", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n369", + "name": "toggle-right", + "iconFontName": "toggle-right", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n370", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n371", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n372", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n373", + "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": "n374", + "name": "Value", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n375", + "name": "messages", + "width": "fit_content", + "height": "fit_content", + "content": "messages", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 600, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n376", + "name": "Prop / 类型", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n377", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n378", + "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": "n379", + "name": "Message[]", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "Message", + "fill": "#4ec9b0" + }, + { + "text": "[]", + "fill": "#cccccc" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n380", + "name": "Prop / 初始值", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n381", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n382", + "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": "n383", + "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": "n384", + "name": "Prop / 修改函数", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n385", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n386", + "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": "n387", + "name": "setMessages", + "width": "fit_content", + "height": "fit_content", + "content": "setMessages", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n388", + "name": "Prop / 在哪改", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n389", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n390", + "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": "n391", + "name": "副作用「id 变化时」 里的 ws.onmessage", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "副作用「id 变化时」", + "fill": "#e5c07b", + "underline": true + }, + { + "text": " 里的 ", + "fill": "#cccccc" + }, + { + "text": "ws", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#cccccc" + }, + { + "text": "onmessage", + "fill": "#9cdcfe" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n392", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n393", + "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": "n394", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n395", + "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": "n396", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n397", + "name": "Lines 14–18", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n398", + "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": "n399", + "name": "Line 14", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n400", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n401", + "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": "n402", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n403", + "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": "n404", + "name": "Line 15", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n405", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n406", + "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": "n407", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n408", + "name": "const ws = connect(id)", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "ws", + "fill": "#9cdcfe" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "connect", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "id", + "fill": "#9cdcfe" + }, + { + "text": ")", + "fill": "#ffd700" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n409", + "name": "Line 16", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n410", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n411", + "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": "n412", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n413", + "name": "ws.onmessage = e => setMessages(m => [..", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "ws", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "onmessage", + "fill": "#9cdcfe" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "e", + "fill": "#9cdcfe" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "=>", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "setMessages", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "m", + "fill": "#9cdcfe" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "=>", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "[", + "fill": "#da70d6" + }, + { + "text": "...", + "fill": "#d4d4d4" + }, + { + "text": "m", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "e", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "data", + "fill": "#9cdcfe" + }, + { + "text": "]", + "fill": "#da70d6" + }, + { + "text": ")", + "fill": "#ffd700" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n414", + "name": "Line 17", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n415", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n416", + "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": "n417", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n418", + "name": "return () => ws.close()", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "return", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "()", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "=>", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "ws", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "close", + "fill": "#dcdcaa" + }, + { + "text": "()", + "fill": "#ffd700" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n419", + "name": "Line 18", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n420", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n421", + "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": "n422", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n423", + "name": "}, [id])", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "}", + "fill": "#179fff" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "[", + "fill": "#179fff" + }, + { + "text": "id", + "fill": "#9cdcfe" + }, + { + "text": "]", + "fill": "#179fff" + }, + { + "text": ")", + "fill": "#da70d6" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n424", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n425", + "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": "n426", + "name": "Level", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n427", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n428", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n429", + "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": "n430", + "name": "副作用 / id 变化时", + "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": "n431", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n432", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n433", + "name": "Kind / 副作用", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n434", + "name": "zap", + "iconFontName": "zap", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#e5c07b" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n435", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n436", + "name": "Prop / 触发时机", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n437", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n438", + "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": "n439", + "name": "id 变化时", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "id", + "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": "n440", + "name": "Prop / 用到", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n441", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n442", + "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": "n443", + "name": "id", + "width": "fit_content", + "height": "fit_content", + "content": "id", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n444", + "name": "Prop / 改动", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n445", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n446", + "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": "n447", + "name": "状态 messages", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "状态 ", + "fill": "#cccccc" + }, + { + "text": "messages", + "fill": "#9cdcfe" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n448", + "name": "Prop / 清理函数", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n449", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n450", + "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": "n451", + "name": "ws.close()", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "ws", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#cccccc" + }, + { + "text": "close", + "fill": "#dcdcaa" + }, + { + "text": "()", + "fill": "#cccccc" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n452", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n453", + "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": "n454", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n455", + "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": "n456", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n457", + "name": "Lines 19–20", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n458", + "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": "n459", + "name": "Line 19", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n460", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n461", + "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": "n462", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n463", + "name": "return { messages }", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "return", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#da70d6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "messages", + "fill": "#9cdcfe" + }, + { + "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": "n464", + "name": "Line 20", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n465", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n466", + "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": "n467", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n468", + "name": "}", + "width": "fit_content", + "height": "fit_content", + "content": "}", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#ffd700" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n469", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n470", + "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": "n471", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n472", + "name": "End", + "width": "fill_container", + "height": 28.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n473", + "name": "Code", + "width": 600.0, + "height": 28.0, + "children": [] + }, + { + "type": "rectangle", + "id": "n474", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n475", + "name": "Status", + "width": "fill_container", + "height": 26.0, + "layout": "horizontal", + "gap": 0.0, + "padding": [ + 0.0, + 12.0 + ], + "justifyContent": "space_between", + "alignItems": "center", + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#181818" + } + ], + "children": [ + { + "type": "frame", + "id": "n476", + "name": "Branch", + "width": "fit_content", + "height": "fit_content", + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n477", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 13.0, + "height": 13.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "text", + "id": "n478", + "name": "master", + "width": "fit_content", + "height": "fit_content", + "content": "master", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n479", + "name": "Right", + "width": "fit_content", + "height": "fit_content", + "layout": "horizontal", + "gap": 16.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n480", + "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": "text", + "id": "n481", + "name": "TypeScript JSX", + "width": "fit_content", + "height": "fit_content", + "content": "TypeScript JSX", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n482", + "name": "Prototype / React 钩子 · 组件 Panel", + "x": 1780.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": "n483", + "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": "n484", + "name": "Lights", + "width": "fit_content", + "height": "fit_content", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "ellipse", + "id": "n485", + "width": 12.0, + "height": 12.0, + "fill": [ + { + "type": "solid", + "color": "#ff5f57" + } + ] + }, + { + "type": "ellipse", + "id": "n486", + "width": 12.0, + "height": 12.0, + "fill": [ + { + "type": "solid", + "color": "#febc2e" + } + ] + }, + { + "type": "ellipse", + "id": "n487", + "width": 12.0, + "height": 12.0, + "fill": [ + { + "type": "solid", + "color": "#28c840" + } + ] + } + ] + }, + { + "type": "text", + "id": "n488", + "name": "web — Panel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "web — Panel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n489", + "name": "Balance", + "width": 52.0, + "height": 12.0, + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n490", + "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": "n491", + "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": "n492", + "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": "n493", + "name": "files", + "iconFontName": "files", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n494", + "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": "n495", + "name": "search", + "iconFontName": "search", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n496", + "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": "n497", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n498", + "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": "n499", + "name": "play", + "iconFontName": "play", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n500", + "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": "n501", + "name": "monitor", + "iconFontName": "monitor", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n502", + "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": "n503", + "name": "blocks", + "iconFontName": "blocks", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n504", + "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": "n505", + "name": "rocket", + "iconFontName": "rocket", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#868686" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n506", + "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": "n507", + "name": "Active bar", + "width": 2.0, + "height": 42.0, + "fill": [ + { + "type": "solid", + "color": "#0078d4" + } + ], + "children": [] + }, + { + "type": "icon_font", + "id": "n508", + "name": "book-open-text", + "iconFontName": "book-open-text", + "width": 22.0, + "height": 22.0, + "fill": [ + { + "type": "solid", + "color": "#d7d7d7" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n509", + "name": "Sidebar", + "width": 250.0, + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#181818" + } + ], + "children": [ + { + "type": "frame", + "id": "n510", + "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": "n511", + "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": "n512", + "name": "Actions", + "width": "fit_content", + "height": "fit_content", + "layout": "horizontal", + "gap": 10.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n513", + "name": "git-pull-request", + "iconFontName": "git-pull-request", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n514", + "name": "file-plus", + "iconFontName": "file-plus", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n515", + "name": "refresh-cw", + "iconFontName": "refresh-cw", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n516", + "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": "n517", + "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": "n518", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n519", + "name": "folder", + "iconFontName": "folder", + "width": 15.0, + "height": 15.0, + "fill": [ + { + "type": "solid", + "color": "#8b9ba8" + } + ] + }, + { + "type": "text", + "id": "n520", + "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": "n521", + "name": "chat", + "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": "n522", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n523", + "name": "folder", + "iconFontName": "folder", + "width": 15.0, + "height": 15.0, + "fill": [ + { + "type": "solid", + "color": "#8b9ba8" + } + ] + }, + { + "type": "text", + "id": "n524", + "name": "chat", + "width": "fit_content", + "height": "fit_content", + "content": "chat", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n525", + "name": "Panel.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": "n526", + "name": "Twisty", + "width": 14.0, + "height": 14.0, + "children": [] + }, + { + "type": "icon_font", + "id": "n527", + "name": "atom", + "iconFontName": "atom", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#519aba" + } + ] + }, + { + "type": "text", + "id": "n528", + "name": "Panel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "Panel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#e8e8e8" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n529", + "name": "Row.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, + "children": [ + { + "type": "frame", + "id": "n530", + "name": "Twisty", + "width": 14.0, + "height": 14.0, + "children": [] + }, + { + "type": "icon_font", + "id": "n531", + "name": "atom", + "iconFontName": "atom", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#519aba" + } + ] + }, + { + "type": "text", + "id": "n532", + "name": "Row.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "Row.tsx", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n533", + "name": "Spinner.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, + "children": [ + { + "type": "frame", + "id": "n534", + "name": "Twisty", + "width": 14.0, + "height": 14.0, + "children": [] + }, + { + "type": "icon_font", + "id": "n535", + "name": "atom", + "iconFontName": "atom", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#519aba" + } + ] + }, + { + "type": "text", + "id": "n536", + "name": "Spinner.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "Spinner.tsx", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n537", + "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": "n538", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "icon_font", + "id": "n539", + "name": "folder", + "iconFontName": "folder", + "width": 15.0, + "height": 15.0, + "fill": [ + { + "type": "solid", + "color": "#8b9ba8" + } + ] + }, + { + "type": "text", + "id": "n540", + "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": "n541", + "name": "App.tsx", + "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": "frame", + "id": "n542", + "name": "Twisty", + "width": 14.0, + "height": 14.0, + "children": [] + }, + { + "type": "icon_font", + "id": "n543", + "name": "atom", + "iconFontName": "atom", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#519aba" + } + ] + }, + { + "type": "text", + "id": "n544", + "name": "App.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "App.tsx", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n545", + "name": "Editor", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#1f1f1f" + } + ], + "children": [ + { + "type": "frame", + "id": "n546", + "name": "Group heads", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n547", + "name": "Editor group 1", + "width": 600.0, + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n548", + "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": "n549", + "name": "Tab", + "width": 140.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#1f1f1f" + } + ], + "children": [ + { + "type": "rectangle", + "id": "n550", + "name": "Active", + "width": "fill_container", + "height": 2.0, + "fill": [ + { + "type": "solid", + "color": "#1f1f1f" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n551", + "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": "n552", + "name": "atom", + "iconFontName": "atom", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#519aba" + } + ] + }, + { + "type": "text", + "id": "n553", + "name": "Panel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "Panel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n554", + "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": "n555", + "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": "n556", + "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": "n557", + "name": "chat", + "width": "fit_content", + "height": "fit_content", + "content": "chat", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n558", + "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": "n559", + "name": "Panel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "Panel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n560", + "name": "Filter room", + "width": "fill_container", + "height": 36.0, + "children": [] + } + ] + }, + { + "type": "rectangle", + "id": "n561", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n562", + "name": "Editor group 2", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n563", + "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": "n564", + "name": "Tab", + "width": 140.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#1f1f1f" + } + ], + "children": [ + { + "type": "rectangle", + "id": "n565", + "name": "Active", + "width": "fill_container", + "height": 2.0, + "fill": [ + { + "type": "solid", + "color": "#0078d4" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n566", + "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": "n567", + "name": "atom", + "iconFontName": "atom", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#519aba" + } + ] + }, + { + "type": "text", + "id": "n568", + "name": "Panel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "Panel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#e8e8e8" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n569", + "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": "n570", + "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": "n571", + "name": "pencil", + "iconFontName": "pencil", + "width": 13.0, + "height": 13.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n572", + "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": "n573", + "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": "n574", + "name": "eye", + "iconFontName": "eye", + "width": 13.0, + "height": 13.0, + "fill": [ + { + "type": "solid", + "color": "#e8e8e8" + } + ] + }, + { + "type": "text", + "id": "n575", + "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": "n576", + "name": "Pad", + "width": 8.0, + "height": 8.0, + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n577", + "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": "n578", + "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": "n579", + "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": "n580", + "name": "chat", + "width": "fit_content", + "height": "fit_content", + "content": "chat", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n581", + "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": "n582", + "name": "Panel.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "Panel.tsx", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n583", + "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": "n584", + "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": "n585", + "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": "n586", + "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": "n587", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 12.0, + "height": 12.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n588", + "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": "n589", + "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": "n590", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 12.0, + "height": 12.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n591", + "name": "Spacer", + "width": "fill_container", + "height": 8.0, + "children": [] + }, + { + "type": "text", + "id": "n592", + "name": "5 块", + "width": "fit_content", + "height": "fit_content", + "content": "5 块", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n593", + "name": "Lines 22–22", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n594", + "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": "n595", + "name": "Line 22", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n596", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n597", + "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": "n598", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n599", + "name": "export function Panel({ id, onClose }: P", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "export", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "function", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "Panel", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "{", + "fill": "#da70d6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "id", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "onClose", + "fill": "#9cdcfe" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "}", + "fill": "#da70d6" + }, + { + "text": ": ", + "fill": "#d4d4d4" + }, + { + "text": "Props", + "fill": "#4ec9b0" + }, + { + "text": ")", + "fill": "#ffd700" + }, + { + "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": "n600", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n601", + "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": "n602", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n603", + "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": "n604", + "name": "React 组件 / Panel", + "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": "n605", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n606", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n607", + "name": "Kind / React 组件", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n608", + "name": "atom", + "iconFontName": "atom", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#61dafb" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n609", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n610", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n611", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n612", + "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": "n613", + "name": "Value", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n614", + "name": "Panel", + "width": "fit_content", + "height": "fit_content", + "content": "Panel", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 600, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#61dafb" + } + ] + }, + { + "type": "frame", + "id": "n615", + "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": "n616", + "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": "n617", + "name": "Prop / 构造参数", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n618", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n619", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n620", + "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": "n621", + "name": "2 个 · 类型 Props", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "2 个 · 类型 ", + "fill": "#9d9d9d" + }, + { + "text": "Props", + "fill": "#4ec9b0", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n622", + "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": "n623", + "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": "n624", + "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": "n625", + "name": "名称", + "width": 115.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n626", + "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": "n627", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n628", + "name": "类型", + "width": 79.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n629", + "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": "n630", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n631", + "name": "默认值", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n632", + "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": "n633", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n634", + "name": "必填", + "width": 373.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n635", + "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": "n636", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n637", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n638", + "name": "名称", + "width": 115.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n639", + "name": "Name", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n640", + "name": "id", + "width": "fit_content", + "height": "fit_content", + "content": "id", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n641", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n642", + "name": "类型", + "width": 79.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n643", + "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": "n644", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n645", + "name": "默认值", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n646", + "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": "n647", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n648", + "name": "必填", + "width": 373.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n649", + "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": "rectangle", + "id": "n650", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n651", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n652", + "name": "名称", + "width": 115.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n653", + "name": "Name", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n654", + "name": "onClose", + "width": "fit_content", + "height": "fit_content", + "content": "onClose", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + }, + { + "type": "frame", + "id": "n655", + "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": "n656", + "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": "rectangle", + "id": "n657", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n658", + "name": "类型", + "width": 79.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n659", + "name": "() => 无", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "() => ", + "fill": "#cccccc" + }, + { + "text": "无", + "fill": "#4ec9b0" + } + ], + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n660", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n661", + "name": "默认值", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n662", + "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": "n663", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n664", + "name": "必填", + "width": 373.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n665", + "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": "n666", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n667", + "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": "n668", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n669", + "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": "n670", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n671", + "name": "Lines 23–23", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n672", + "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": "n673", + "name": "Line 23", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n674", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n675", + "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": "n676", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n677", + "name": "const theme = useContext(ThemeContext)", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "theme", + "fill": "#9cdcfe" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "useContext", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "ThemeContext", + "fill": "#4ec9b0" + }, + { + "text": ")", + "fill": "#da70d6" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n678", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n679", + "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": "n680", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n681", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n682", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n683", + "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": "n684", + "name": "数据源 / theme", + "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": "n685", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n686", + "name": "Kind / 数据源", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n687", + "name": "download", + "iconFontName": "download", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n688", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n689", + "name": "Prop / 变量", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n690", + "name": "Key", + "width": 100.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n691", + "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": "n692", + "name": "Value", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n693", + "name": "theme", + "width": "fit_content", + "height": "fit_content", + "content": "theme", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 600, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n694", + "name": "Prop / 来自", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n695", + "name": "Key", + "width": 100.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n696", + "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": "n697", + "name": "上下文 ThemeContext", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "上下文 ", + "fill": "#cccccc" + }, + { + "text": "ThemeContext", + "fill": "#4ec9b0", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n698", + "name": "Prop / 没有外层提供时", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n699", + "name": "Key", + "width": 100.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n700", + "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": "n701", + "name": "'light'", + "width": "fit_content", + "height": "fit_content", + "content": "'light'", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#ce9178" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n702", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n703", + "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": "n704", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n705", + "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": "n706", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n707", + "name": "Lines 24–24", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n708", + "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": "n709", + "name": "Line 24", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n710", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n711", + "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": "n712", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n713", + "name": "const { messages } = useChatSession(id)", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#da70d6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "messages", + "fill": "#9cdcfe" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "}", + "fill": "#da70d6" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "useChatSession", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "id", + "fill": "#9cdcfe" + }, + { + "text": ")", + "fill": "#da70d6" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n714", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n715", + "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": "n716", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n717", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n718", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n719", + "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": "n720", + "name": "数据源 / messages", + "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": "n721", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n722", + "name": "Kind / 数据源", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n723", + "name": "download", + "iconFontName": "download", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n724", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n725", + "name": "Prop / 取出", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n726", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n727", + "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": "n728", + "name": "Value", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n729", + "name": "messages", + "width": "fit_content", + "height": "fit_content", + "content": "messages", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 600, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n730", + "name": "Prop / 来自", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n731", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n732", + "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": "n733", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n734", + "name": "Line", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n735", + "name": "useChatSession(id)", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "useChatSession", + "fill": "#dcdcaa", + "underline": true + }, + { + "text": "(", + "fill": "#cccccc" + }, + { + "text": "id", + "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": "n736", + "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": "#30444c" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#427a8b" + } + ] + }, + "children": [ + { + "type": "text", + "id": "n737", + "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": "n738", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n739", + "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": "n740", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n741", + "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": "n742", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n743", + "name": "Lines 25–25", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n744", + "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": "n745", + "name": "Line 25", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n746", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n747", + "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": "n748", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n749", + "name": "const [open, setOpen] = useState(() => r", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "[", + "fill": "#da70d6" + }, + { + "text": "open", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "setOpen", + "fill": "#9cdcfe" + }, + { + "text": "]", + "fill": "#da70d6" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "useState", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "()", + "fill": "#179fff" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "=>", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "readOpen", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#179fff" + }, + { + "text": "id", + "fill": "#9cdcfe" + }, + { + "text": ")", + "fill": "#179fff" + }, + { + "text": ")", + "fill": "#da70d6" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n750", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n751", + "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": "n752", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n753", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n754", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n755", + "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": "n756", + "name": "状态 / open", + "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": "n757", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n758", + "name": "Kind / 状态", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n759", + "name": "toggle-right", + "iconFontName": "toggle-right", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n760", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n761", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n762", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n763", + "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": "n764", + "name": "Value", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n765", + "name": "open", + "width": "fit_content", + "height": "fit_content", + "content": "open", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 600, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n766", + "name": "Prop / 初始值", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n767", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n768", + "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": "n769", + "name": "首次渲染时调用 readOpen(id)", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "首次渲染时调用 ", + "fill": "#cccccc" + }, + { + "text": "readOpen", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#cccccc" + }, + { + "text": "id", + "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": "n770", + "name": "Prop / 修改函数", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n771", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n772", + "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": "n773", + "name": "setOpen", + "width": "fit_content", + "height": "fit_content", + "content": "setOpen", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n774", + "name": "Prop / 在哪改", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n775", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n776", + "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": "n777", + "name": "toggle、副作用「open 变化时」", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "toggle", + "fill": "#dcdcaa", + "underline": true + }, + { + "text": "、", + "fill": "#cccccc" + }, + { + "text": "副作用「open 变化时」", + "fill": "#e5c07b", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n778", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n779", + "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": "n780", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n781", + "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": "n782", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n783", + "name": "Lines 26–26", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n784", + "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": "n785", + "name": "Line 26", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n786", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n787", + "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": "n788", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n789", + "name": "const [state, dispatch] = useReducer(red", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "[", + "fill": "#da70d6" + }, + { + "text": "state", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "dispatch", + "fill": "#9cdcfe" + }, + { + "text": "]", + "fill": "#da70d6" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "useReducer", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "reducer", + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#179fff" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "count", + "fill": "#9cdcfe" + }, + { + "text": ": ", + "fill": "#d4d4d4" + }, + { + "text": "0", + "fill": "#b5cea8" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "}", + "fill": "#179fff" + }, + { + "text": ")", + "fill": "#da70d6" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n790", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n791", + "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": "n792", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n793", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n794", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n795", + "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": "n796", + "name": "状态 / state", + "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": "n797", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n798", + "name": "Kind / 状态", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n799", + "name": "toggle-right", + "iconFontName": "toggle-right", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n800", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n801", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n802", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n803", + "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": "n804", + "name": "Value", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n805", + "name": "state", + "width": "fit_content", + "height": "fit_content", + "content": "state", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 600, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + }, + { + "type": "frame", + "id": "n806", + "name": "Tag / useReducer", + "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": "#38454c" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#5c7b8c" + } + ] + }, + "children": [ + { + "type": "text", + "id": "n807", + "name": "useReducer", + "width": "fit_content", + "height": "fit_content", + "content": "useReducer", + "fontFamily": "PingFang SC", + "fontSize": 11.0, + "fontWeight": 500, + "lineHeight": 1.4545454545454546, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n808", + "name": "Prop / 初始值", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n809", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n810", + "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": "n811", + "name": "{ count: 0 }", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "{ ", + "fill": "#cccccc" + }, + { + "text": "count", + "fill": "#9cdcfe" + }, + { + "text": ": ", + "fill": "#cccccc" + }, + { + "text": "0", + "fill": "#b5cea8" + }, + { + "text": " }", + "fill": "#cccccc" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n812", + "name": "Prop / 派发函数", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n813", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n814", + "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": "n815", + "name": "dispatch", + "width": "fit_content", + "height": "fit_content", + "content": "dispatch", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n816", + "name": "Prop / 处理函数", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n817", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n818", + "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": "n819", + "name": "reducer", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "reducer", + "fill": "#dcdcaa", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n820", + "name": "Prop / 动作", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n821", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n822", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n823", + "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": "n824", + "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": "n825", + "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": "n826", + "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": "n827", + "name": "动作", + "width": 58.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n828", + "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": "n829", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n830", + "name": "状态怎么变", + "width": 547.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n831", + "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": "n832", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n833", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n834", + "name": "动作", + "width": 58.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n835", + "name": "'add'", + "width": "fit_content", + "height": "fit_content", + "content": "'add'", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#ce9178" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n836", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n837", + "name": "状态怎么变", + "width": 547.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n838", + "name": "count 加 1", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "count", + "fill": "#9cdcfe" + }, + { + "text": " 加 ", + "fill": "#cccccc" + }, + { + "text": "1", + "fill": "#b5cea8" + } + ], + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n839", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n840", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n841", + "name": "动作", + "width": 58.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n842", + "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": "n843", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n844", + "name": "状态怎么变", + "width": 547.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n845", + "name": "不变", + "width": "fit_content", + "height": "fit_content", + "content": "不变", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n846", + "name": "Prop / 在哪派发", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n847", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n848", + "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": "n849", + "name": "toggle（'add'）", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "toggle", + "fill": "#dcdcaa", + "underline": true + }, + { + "text": "（", + "fill": "#cccccc" + }, + { + "text": "'add'", + "fill": "#ce9178" + }, + { + "text": "）", + "fill": "#cccccc" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n850", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n851", + "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": "n852", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n853", + "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": "n854", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n855", + "name": "Lines 27–27", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n856", + "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": "n857", + "name": "Line 27", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n858", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n859", + "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": "n860", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n861", + "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" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n862", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n863", + "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": "n864", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n865", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n866", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n867", + "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": "n868", + "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": "#282c2f" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#4b616d" + } + ] + }, + "children": [ + { + "type": "frame", + "id": "n869", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n870", + "name": "Kind / 数据源", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n871", + "name": "download", + "iconFontName": "download", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n872", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n873", + "name": "Prop / 取出", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n874", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n875", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n876", + "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": "n877", + "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": "n878", + "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": "n879", + "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": "n880", + "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": "n881", + "name": "名称", + "width": 137.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n882", + "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": "n883", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n884", + "name": "是什么", + "width": 468.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n885", + "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": "n886", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n887", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n888", + "name": "名称", + "width": 137.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n889", + "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": "n890", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n891", + "name": "是什么", + "width": 468.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n892", + "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": "n893", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n894", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n895", + "name": "名称", + "width": 137.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n896", + "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": "n897", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n898", + "name": "是什么", + "width": 468.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n899", + "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": "frame", + "id": "n900", + "name": "Prop / 来自", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n901", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n902", + "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": "n903", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n904", + "name": "Line", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n905", + "name": "useTransition()", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "useTransition", + "fill": "#dcdcaa" + }, + { + "text": "()", + "fill": "#cccccc" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "frame", + "id": "n906", + "name": "Tag / React", + "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": "#30444c" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#427a8b" + } + ] + }, + "children": [ + { + "type": "text", + "id": "n907", + "name": "React", + "width": "fit_content", + "height": "fit_content", + "content": "React", + "fontFamily": "PingFang SC", + "fontSize": 11.0, + "fontWeight": 500, + "lineHeight": 1.4545454545454546, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#61dafb" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n908", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n909", + "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": "n910", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n911", + "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": "n912", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n913", + "name": "Lines 28–28", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n914", + "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": "n915", + "name": "Line 28", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n916", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n917", + "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": "n918", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n919", + "name": "const boxRef = useRef(nu", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "boxRef", + "fill": "#9cdcfe" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "useRef", + "fill": "#dcdcaa" + }, + { + "text": "<", + "fill": "#d4d4d4" + }, + { + "text": "HTMLDivElement", + "fill": "#4ec9b0" + }, + { + "text": ">", + "fill": "#d4d4d4" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "null", + "fill": "#569cd6" + }, + { + "text": ")", + "fill": "#da70d6" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n920", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n921", + "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": "n922", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n923", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n924", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n925", + "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": "n926", + "name": "引用 / boxRef", + "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": "n927", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n928", + "name": "Kind / 引用", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n929", + "name": "anchor", + "iconFontName": "anchor", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n930", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n931", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n932", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n933", + "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": "n934", + "name": "Value", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n935", + "name": "boxRef", + "width": "fit_content", + "height": "fit_content", + "content": "boxRef", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 600, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + }, + { + "type": "frame", + "id": "n936", + "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": "#38454c" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#5c7b8c" + } + ] + }, + "children": [ + { + "type": "text", + "id": "n937", + "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": "#9cdcfe" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n938", + "name": "Prop / 指向", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n939", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n940", + "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": "n941", + "name": "
元素（HTMLDivElement）", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "
", + "fill": "#808080" + }, + { + "text": " 元素（", + "fill": "#cccccc" + }, + { + "text": "HTMLDivElement", + "fill": "#4ec9b0" + }, + { + "text": "）", + "fill": "#cccccc" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n942", + "name": "Prop / 初始值", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n943", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n944", + "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": "n945", + "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": "n946", + "name": "Prop / 用在", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n947", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n948", + "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": "n949", + "name": "
的 ref 属性；副作用「仅挂载时」", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "
", + "fill": "#808080" + }, + { + "text": " 的 ref 属性；", + "fill": "#cccccc" + }, + { + "text": "副作用「仅挂载时」", + "fill": "#e5c07b", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n950", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n951", + "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": "n952", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n953", + "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": "n954", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n955", + "name": "Lines 29–29", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n956", + "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": "n957", + "name": "Line 29", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n958", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n959", + "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": "n960", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n961", + "name": "const timer = useRef()", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "timer", + "fill": "#9cdcfe" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "useRef", + "fill": "#dcdcaa" + }, + { + "text": "<", + "fill": "#d4d4d4" + }, + { + "text": "number", + "fill": "#4ec9b0" + }, + { + "text": ">", + "fill": "#d4d4d4" + }, + { + "text": "()", + "fill": "#da70d6" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n962", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n963", + "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": "n964", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n965", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n966", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n967", + "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": "n968", + "name": "引用 / timer", + "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": "n969", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n970", + "name": "Kind / 引用", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n971", + "name": "anchor", + "iconFontName": "anchor", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n972", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n973", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n974", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n975", + "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": "n976", + "name": "Value", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n977", + "name": "timer", + "width": "fit_content", + "height": "fit_content", + "content": "timer", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 600, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + }, + { + "type": "frame", + "id": "n978", + "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": "#38454c" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#5c7b8c" + } + ] + }, + "children": [ + { + "type": "text", + "id": "n979", + "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": "#9cdcfe" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n980", + "name": "Prop / 存的类型", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n981", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n982", + "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": "n983", + "name": "数值", + "width": "fit_content", + "height": "fit_content", + "content": "数值", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#4ec9b0" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n984", + "name": "Prop / 初始值", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n985", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n986", + "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": "n987", + "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": "n988", + "name": "Prop / 写入", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n989", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n990", + "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": "n991", + "name": "副作用「open 变化时」", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "副作用「open 变化时」", + "fill": "#e5c07b", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n992", + "name": "Prop / 读取", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n993", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n994", + "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": "n995", + "name": "副作用「open 变化时」 的清理函数", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "副作用「open 变化时」", + "fill": "#e5c07b", + "underline": true + }, + { + "text": " 的清理函数", + "fill": "#cccccc" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n996", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n997", + "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": "n998", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n999", + "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": "n1000", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1001", + "name": "Lines 30–33", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1002", + "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": "n1003", + "name": "Line 30", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1004", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1005", + "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": "n1006", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1007", + "name": "const total = useMemo(() => {", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "total", + "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": "{", + "fill": "#179fff" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1008", + "name": "Line 31", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1009", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1010", + "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": "n1011", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1012", + "name": "const sum = messages.length", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "sum", + "fill": "#9cdcfe" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "messages", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "length", + "fill": "#9cdcfe" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1013", + "name": "Line 32", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1014", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1015", + "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": "n1016", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1017", + "name": "return sum * 2", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "return", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "sum", + "fill": "#9cdcfe" + }, + { + "text": " * ", + "fill": "#d4d4d4" + }, + { + "text": "2", + "fill": "#b5cea8" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1018", + "name": "Line 33", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1019", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1020", + "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": "n1021", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1022", + "name": "}, [messages])", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "}", + "fill": "#179fff" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "[", + "fill": "#179fff" + }, + { + "text": "messages", + "fill": "#9cdcfe" + }, + { + "text": "]", + "fill": "#179fff" + }, + { + "text": ")", + "fill": "#da70d6" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1023", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1024", + "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": "n1025", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1026", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n1027", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n1028", + "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": "n1029", + "name": "派生值 / total", + "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": "n1030", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1031", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1032", + "name": "Kind / 派生值", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1033", + "name": "sigma", + "iconFontName": "sigma", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1034", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1035", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1036", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1037", + "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": "n1038", + "name": "Value", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1039", + "name": "total", + "width": "fit_content", + "height": "fit_content", + "content": "total", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 600, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1040", + "name": "Prop / 计算", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1041", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1042", + "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": "n1043", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1044", + "name": "sum * 2", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "sum", + "fill": "#9cdcfe" + }, + { + "text": " * ", + "fill": "#cccccc" + }, + { + "text": "2", + "fill": "#b5cea8" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "text", + "id": "n1045", + "name": "其中 sum = messages.length", + "width": "fit_content", + "height": "fit_content", + "content": "其中 sum = messages.length", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1046", + "name": "Prop / 重算时机", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1047", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1048", + "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": "n1049", + "name": "messages 变化时", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "messages", + "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": "n1050", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1051", + "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": "n1052", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1053", + "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": "n1054", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1055", + "name": "Lines 34–37", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1056", + "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": "n1057", + "name": "Line 34", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1058", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1059", + "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": "n1060", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1061", + "name": "const toggle = useCallback((next: boolea", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "const", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "toggle", + "fill": "#9cdcfe" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "useCallback", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "(", + "fill": "#179fff" + }, + { + "text": "next", + "fill": "#9cdcfe" + }, + { + "text": ": ", + "fill": "#d4d4d4" + }, + { + "text": "boolean", + "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": "n1062", + "name": "Line 35", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1063", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1064", + "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": "n1065", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1066", + "name": "setOpen(next)", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "setOpen", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "next", + "fill": "#9cdcfe" + }, + { + "text": ")", + "fill": "#ffd700" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1067", + "name": "Line 36", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1068", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1069", + "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": "n1070", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1071", + "name": "dispatch({ type: 'add' })", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "dispatch", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "{", + "fill": "#da70d6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "type", + "fill": "#9cdcfe" + }, + { + "text": ": ", + "fill": "#d4d4d4" + }, + { + "text": "'add'", + "fill": "#ce9178" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "}", + "fill": "#da70d6" + }, + { + "text": ")", + "fill": "#ffd700" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1072", + "name": "Line 37", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1073", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1074", + "name": "37", + "width": "fit_content", + "height": "fit_content", + "content": "37", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1075", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1076", + "name": "}, [])", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "}", + "fill": "#179fff" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "[]", + "fill": "#179fff" + }, + { + "text": ")", + "fill": "#da70d6" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1077", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1078", + "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": "n1079", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1080", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n1081", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n1082", + "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": "n1083", + "name": "回调函数 / toggle", + "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": "n1084", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1085", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1086", + "name": "Kind / 回调函数", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1087", + "name": "square-function", + "iconFontName": "square-function", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1088", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1089", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1090", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1091", + "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": "n1092", + "name": "Value", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1093", + "name": "toggle", + "width": "fit_content", + "height": "fit_content", + "content": "toggle", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 600, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + }, + { + "type": "frame", + "id": "n1094", + "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": "#45453b" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#7b7b63" + } + ] + }, + "children": [ + { + "type": "text", + "id": "n1095", + "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": "#dcdcaa" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1096", + "name": "Prop / 参数", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1097", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1098", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n1099", + "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": "n1100", + "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": "n1101", + "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": "n1102", + "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": "n1103", + "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": "n1104", + "name": "名称", + "width": 50.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1105", + "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": "n1106", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1107", + "name": "类型", + "width": 555.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1108", + "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": "n1109", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1110", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1111", + "name": "名称", + "width": 50.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1112", + "name": "next", + "width": "fit_content", + "height": "fit_content", + "content": "next", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1113", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1114", + "name": "类型", + "width": 555.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1115", + "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": "frame", + "id": "n1116", + "name": "Prop / 调用位置", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1117", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1118", + "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": "n1119", + "name": "handleClick", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "handleClick", + "fill": "#dcdcaa", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1120", + "name": "Prop / 重建时机", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1121", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1122", + "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": "n1123", + "name": "不重建（依赖为空）", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "不重建", + "fill": "#c586c0" + }, + { + "text": "（依赖为空）", + "fill": "#9d9d9d" + } + ], + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1124", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1125", + "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": "n1126", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1127", + "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": "n1128", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1129", + "name": "Lines 38–41", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1130", + "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": "n1131", + "name": "Line 38", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1132", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1133", + "name": "38", + "width": "fit_content", + "height": "fit_content", + "content": "38", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1134", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1135", + "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": "n1136", + "name": "Line 39", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1137", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1138", + "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": "n1139", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1140", + "name": "timer.current = window.setTimeout(() => ", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "timer", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "current", + "fill": "#9cdcfe" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "window", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "setTimeout", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "()", + "fill": "#da70d6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "=>", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "setOpen", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#da70d6" + }, + { + "text": "false", + "fill": "#569cd6" + }, + { + "text": ")", + "fill": "#da70d6" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "1000", + "fill": "#b5cea8" + }, + { + "text": ")", + "fill": "#ffd700" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1141", + "name": "Line 40", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1142", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1143", + "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": "n1144", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1145", + "name": "return () => clearTimeout(timer.current)", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "return", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "()", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "=>", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "clearTimeout", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "timer", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "current", + "fill": "#9cdcfe" + }, + { + "text": ")", + "fill": "#ffd700" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1146", + "name": "Line 41", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1147", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1148", + "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": "n1149", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1150", + "name": "}, [open])", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "}", + "fill": "#179fff" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "[", + "fill": "#179fff" + }, + { + "text": "open", + "fill": "#9cdcfe" + }, + { + "text": "]", + "fill": "#179fff" + }, + { + "text": ")", + "fill": "#da70d6" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1151", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1152", + "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": "n1153", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1154", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n1155", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n1156", + "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": "n1157", + "name": "副作用 / open 变化时", + "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": "n1158", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1159", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1160", + "name": "Kind / 副作用", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1161", + "name": "zap", + "iconFontName": "zap", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#e5c07b" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1162", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1163", + "name": "Prop / 触发时机", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1164", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1165", + "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": "n1166", + "name": "open 变化时", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "open", + "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": "n1167", + "name": "Prop / 用到", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1168", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1169", + "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": "n1170", + "name": "open、timer", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "open", + "fill": "#9cdcfe" + }, + { + "text": "、", + "fill": "#cccccc" + }, + { + "text": "timer", + "fill": "#9cdcfe" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1171", + "name": "Prop / 改动", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1172", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1173", + "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": "n1174", + "name": "状态 open（1 秒后设为 假）、引用 timer", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "状态 ", + "fill": "#cccccc" + }, + { + "text": "open", + "fill": "#9cdcfe" + }, + { + "text": "（1 秒后设为 ", + "fill": "#cccccc" + }, + { + "text": "假", + "fill": "#b5cea8" + }, + { + "text": "）、引用 ", + "fill": "#cccccc" + }, + { + "text": "timer", + "fill": "#9cdcfe" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1175", + "name": "Prop / 清理函数", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1176", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1177", + "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": "n1178", + "name": "clearTimeout(timer.current)", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "clearTimeout", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#cccccc" + }, + { + "text": "timer", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#cccccc" + }, + { + "text": "current", + "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": "n1179", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1180", + "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": "n1181", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1182", + "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": "n1183", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1184", + "name": "Lines 42–44", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1185", + "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": "n1186", + "name": "Line 42", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1187", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1188", + "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": "n1189", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1190", + "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": "n1191", + "name": "Line 43", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1192", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1193", + "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": "n1194", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1195", + "name": "document.title = String(total)", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "document", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "title", + "fill": "#9cdcfe" + }, + { + "text": " = ", + "fill": "#d4d4d4" + }, + { + "text": "String", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "total", + "fill": "#9cdcfe" + }, + { + "text": ")", + "fill": "#ffd700" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1196", + "name": "Line 44", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1197", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1198", + "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": "n1199", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1200", + "name": "})", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "}", + "fill": "#179fff" + }, + { + "text": ")", + "fill": "#da70d6" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1201", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1202", + "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": "n1203", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1204", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n1205", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n1206", + "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": "n1207", + "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": "n1208", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1209", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1210", + "name": "Kind / 副作用", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1211", + "name": "zap", + "iconFontName": "zap", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#e5c07b" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1212", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1213", + "name": "Prop / 触发时机", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1214", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1215", + "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": "n1216", + "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": "n1217", + "name": "Prop / 用到", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1218", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1219", + "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": "n1220", + "name": "total", + "width": "fit_content", + "height": "fit_content", + "content": "total", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1221", + "name": "Prop / 改动", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1222", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1223", + "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": "n1224", + "name": "document.title", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "document", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#cccccc" + }, + { + "text": "title", + "fill": "#9cdcfe" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1225", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1226", + "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": "n1227", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1228", + "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": "n1229", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1230", + "name": "Lines 45–47", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1231", + "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": "n1232", + "name": "Line 45", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1233", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1234", + "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": "n1235", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1236", + "name": "useLayoutEffect(() => {", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "useLayoutEffect", + "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": "n1237", + "name": "Line 46", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1238", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1239", + "name": "46", + "width": "fit_content", + "height": "fit_content", + "content": "46", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1240", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1241", + "name": "boxRef.current?.scrollTo(0, 0)", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "boxRef", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "current", + "fill": "#9cdcfe" + }, + { + "text": "?.", + "fill": "#d4d4d4" + }, + { + "text": "scrollTo", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "0", + "fill": "#b5cea8" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "0", + "fill": "#b5cea8" + }, + { + "text": ")", + "fill": "#ffd700" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1242", + "name": "Line 47", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1243", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1244", + "name": "47", + "width": "fit_content", + "height": "fit_content", + "content": "47", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1245", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1246", + "name": "}, [])", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "}", + "fill": "#179fff" + }, + { + "text": ", ", + "fill": "#d4d4d4" + }, + { + "text": "[]", + "fill": "#179fff" + }, + { + "text": ")", + "fill": "#da70d6" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1247", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1248", + "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": "n1249", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1250", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n1251", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n1252", + "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": "n1253", + "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": "n1254", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1255", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1256", + "name": "Kind / 副作用", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1257", + "name": "zap", + "iconFontName": "zap", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#e5c07b" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1258", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1259", + "name": "Prop / 触发时机", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1260", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1261", + "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": "n1262", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1263", + "name": "Line", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1264", + "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": "n1265", + "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": "#473f31" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#806e4c" + } + ] + }, + "children": [ + { + "type": "text", + "id": "n1266", + "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": "#e5c07b" + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1267", + "name": "Prop / 用到", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1268", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1269", + "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": "n1270", + "name": "boxRef", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "boxRef", + "fill": "#9cdcfe", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1271", + "name": "Prop / 改动", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1272", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1273", + "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": "n1274", + "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": "n1275", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1276", + "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": "n1277", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1278", + "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": "n1279", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1280", + "name": "Lines 48–50", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1281", + "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": "n1282", + "name": "Line 48", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1283", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1284", + "name": "48", + "width": "fit_content", + "height": "fit_content", + "content": "48", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1285", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1286", + "name": "function handleClick() {", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "function", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "handleClick", + "fill": "#dcdcaa" + }, + { + "text": "()", + "fill": "#da70d6" + }, + { + "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": "n1287", + "name": "Line 49", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1288", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1289", + "name": "49", + "width": "fit_content", + "height": "fit_content", + "content": "49", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1290", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1291", + "name": "startTransition(() => toggle(!open))", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "startTransition", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#179fff" + }, + { + "text": "()", + "fill": "#ffd700" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "=>", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "toggle", + "fill": "#dcdcaa" + }, + { + "text": "(", + "fill": "#ffd700" + }, + { + "text": "!", + "fill": "#d4d4d4" + }, + { + "text": "open", + "fill": "#9cdcfe" + }, + { + "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": "n1292", + "name": "Line 50", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1293", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1294", + "name": "50", + "width": "fit_content", + "height": "fit_content", + "content": "50", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1295", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1296", + "name": "}", + "width": "fit_content", + "height": "fit_content", + "content": "}", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#da70d6" + } + ] + } + ] + } + ] + }, + { + "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": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n1301", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n1302", + "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": "n1303", + "name": "事件处理函数 / handleClick", + "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": "n1304", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1305", + "name": "chevron-right", + "iconFontName": "chevron-right", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1306", + "name": "Kind / 事件处理函数", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1307", + "name": "mouse-pointer-click", + "iconFontName": "mouse-pointer-click", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1308", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1309", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1310", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1311", + "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": "n1312", + "name": "Value", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1313", + "name": "handleClick", + "width": "fit_content", + "height": "fit_content", + "content": "handleClick", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 600, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1314", + "name": "Prop / 参数", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1315", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1316", + "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": "n1317", + "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": "n1318", + "name": "Prop / 绑定事件", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1319", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1320", + "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": "n1321", + "name": "
的 onClick", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "
", + "fill": "#808080" + }, + { + "text": " 的 onClick", + "fill": "#cccccc" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1322", + "name": "Prop / 调用", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1323", + "name": "Key", + "width": 76.0, + "height": 20.0, + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1324", + "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": "n1325", + "name": "toggle（在过渡里）", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "toggle", + "fill": "#dcdcaa", + "underline": true + }, + { + "text": "（在过渡里）", + "fill": "#9d9d9d" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1326", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1327", + "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": "n1328", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1329", + "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": "n1330", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1331", + "name": "Lines 51–57", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1332", + "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": "n1333", + "name": "Line 51", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1334", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1335", + "name": "51", + "width": "fit_content", + "height": "fit_content", + "content": "51", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1336", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1337", + "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": "n1338", + "name": "Line 52", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1339", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1340", + "name": "52", + "width": "fit_content", + "height": "fit_content", + "content": "52", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1341", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1342", + "name": "
", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "<", + "fill": "#808080" + }, + { + "text": "div", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "ref", + "fill": "#9cdcfe" + }, + { + "text": "=", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#179fff" + }, + { + "text": "boxRef", + "fill": "#9cdcfe" + }, + { + "text": "}", + "fill": "#179fff" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "onClick", + "fill": "#9cdcfe" + }, + { + "text": "=", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#179fff" + }, + { + "text": "handleClick", + "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": "n1343", + "name": "Line 53", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1344", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1345", + "name": "53", + "width": "fit_content", + "height": "fit_content", + "content": "53", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1346", + "name": "Margin", + "width": 72.98, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1347", + "name": "{isPending && }", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "{", + "fill": "#179fff" + }, + { + "text": "isPending", + "fill": "#9cdcfe" + }, + { + "text": " && ", + "fill": "#d4d4d4" + }, + { + "text": "<", + "fill": "#808080" + }, + { + "text": "Spinner", + "fill": "#4ec9b0" + }, + { + "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": "n1348", + "name": "Line 54", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1349", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1350", + "name": "54", + "width": "fit_content", + "height": "fit_content", + "content": "54", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1351", + "name": "Margin", + "width": 72.98, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1352", + "name": "{messages.map(m => ", + "fill": "#569cd6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "<", + "fill": "#808080" + }, + { + "text": "Row", + "fill": "#4ec9b0" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "key", + "fill": "#9cdcfe" + }, + { + "text": "=", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#da70d6" + }, + { + "text": "m", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "id", + "fill": "#9cdcfe" + }, + { + "text": "}", + "fill": "#da70d6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "text": "m", + "fill": "#9cdcfe" + }, + { + "text": "=", + "fill": "#d4d4d4" + }, + { + "text": "{", + "fill": "#da70d6" + }, + { + "text": "m", + "fill": "#9cdcfe" + }, + { + "text": "}", + "fill": "#da70d6" + }, + { + "text": " ", + "fill": "#d4d4d4" + }, + { + "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": "n1353", + "name": "Line 55", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1354", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1355", + "name": "55", + "width": "fit_content", + "height": "fit_content", + "content": "55", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1356", + "name": "Margin", + "width": 72.98, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1357", + "name": "{state.count}", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "{", + "fill": "#179fff" + }, + { + "text": "state", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#d4d4d4" + }, + { + "text": "count", + "fill": "#9cdcfe" + }, + { + "text": "}", + "fill": "#179fff" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1358", + "name": "Line 56", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1359", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1360", + "name": "56", + "width": "fit_content", + "height": "fit_content", + "content": "56", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1361", + "name": "Margin", + "width": 57.32, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1362", + "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": "n1363", + "name": "Line 57", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1364", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1365", + "name": "57", + "width": "fit_content", + "height": "fit_content", + "content": "57", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1366", + "name": "Margin", + "width": 41.66, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1367", + "name": ")", + "width": "fit_content", + "height": "fit_content", + "content": ")", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#da70d6" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1368", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1369", + "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": "n1370", + "name": "Level", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1371", + "name": "Guide", + "width": 12.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "rectangle", + "id": "n1372", + "name": "Line", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + } + ] + }, + { + "type": "frame", + "id": "n1373", + "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": "n1374", + "name": "渲染输出 / Panel", + "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": "n1375", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n1376", + "name": "Kind / 渲染输出", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1377", + "name": "layout-template", + "iconFontName": "layout-template", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#89d185" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1378", + "name": "Content", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1379", + "name": "Outline", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1380", + "name": "Item", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 4.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1381", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1382", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1383", + "name": "Line", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 8.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1384", + "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": "n1385", + "name": "ref=boxRef", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "ref", + "fill": "#9cdcfe" + }, + { + "text": "=", + "fill": "#cccccc" + }, + { + "text": "boxRef", + "fill": "#9cdcfe", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "text", + "id": "n1386", + "name": "onClick=handleClick", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "onClick", + "fill": "#9cdcfe" + }, + { + "text": "=", + "fill": "#cccccc" + }, + { + "text": "handleClick", + "fill": "#dcdcaa", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1387", + "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": "n1388", + "name": "Guide", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1389", + "name": "Kids", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1390", + "name": "Outline", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1391", + "name": "Item", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 4.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1392", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n1393", + "name": "Line", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 8.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1394", + "name": "Group", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "padding": [ + 0.0, + 5.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "fill": [ + { + "type": "solid", + "color": "#3e3931" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#72594b" + } + ] + }, + "children": [ + { + "type": "text", + "id": "n1395", + "name": "当 isPending 时", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "当", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#cccccc" + }, + { + "text": "isPending", + "fill": "#9cdcfe" + }, + { + "text": " ", + "fill": "#cccccc" + }, + { + "text": "时", + "fill": "#c586c0" + } + ], + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.44, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "text", + "id": "n1396", + "name": "", + "width": "fit_content", + "height": "fit_content", + "content": "", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#61dafb" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1397", + "name": "Item", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 4.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1398", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1399", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1400", + "name": "Line", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 8.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1401", + "name": "Group", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "padding": [ + 0.0, + 5.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "fill": [ + { + "type": "solid", + "color": "#353b44" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#555e88" + } + ] + }, + "children": [ + { + "type": "text", + "id": "n1402", + "name": "对 messages 的每一项 m", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "对", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#cccccc" + }, + { + "text": "messages", + "fill": "#9cdcfe" + }, + { + "text": " ", + "fill": "#cccccc" + }, + { + "text": "的每一项", + "fill": "#c586c0" + }, + { + "text": " ", + "fill": "#cccccc" + }, + { + "text": "m", + "fill": "#9cdcfe" + } + ], + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.44, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "text", + "id": "n1403", + "name": "key m.id", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "key ", + "fill": "#9d9d9d" + }, + { + "text": "m", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#cccccc" + }, + { + "text": "id", + "fill": "#9cdcfe" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1404", + "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": "n1405", + "name": "Guide", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#404040" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1406", + "name": "Kids", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1407", + "name": "Outline", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1408", + "name": "Item", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 4.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1409", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n1410", + "name": "Line", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 8.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1411", + "name": "", + "width": "fit_content", + "height": "fit_content", + "content": "", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#61dafb" + } + ] + }, + { + "type": "text", + "id": "n1412", + "name": "m=m", + "width": 27.0, + "height": "fit_content", + "content": [ + { + "text": "m", + "fill": "#9cdcfe" + }, + { + "text": "=", + "fill": "#cccccc" + }, + { + "text": "m", + "fill": "#9cdcfe" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1413", + "name": "Item", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 4.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1414", + "name": "Fold", + "width": 14.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n1415", + "name": "Line", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 8.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1416", + "name": "{state.count}", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "{", + "fill": "#9d9d9d" + }, + { + "text": "state", + "fill": "#9cdcfe" + }, + { + "text": ".", + "fill": "#cccccc" + }, + { + "text": "count", + "fill": "#9cdcfe" + }, + { + "text": "}", + "fill": "#9d9d9d" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1417", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1418", + "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": "n1419", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1420", + "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": "n1421", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1422", + "name": "Lines 58–58", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1423", + "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": "n1424", + "name": "Line 58", + "width": "fill_container", + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1425", + "name": "Number", + "width": 44.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "end", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1426", + "name": "58", + "width": "fit_content", + "height": "fit_content", + "content": "58", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#6e7681" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1427", + "name": "Margin", + "width": 26.0, + "height": 20.0, + "children": [] + }, + { + "type": "text", + "id": "n1428", + "name": "}", + "width": "fit_content", + "height": "fit_content", + "content": "}", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#ffd700" + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n1429", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n1430", + "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": "n1431", + "name": "Level", + "width": "fill_container", + "height": "fill_container", + "layout": "horizontal", + "gap": 8.0, + "alignItems": "start", + "clipContent": false, + "children": [] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1432", + "name": "End", + "width": "fill_container", + "height": 28.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n1433", + "name": "Code", + "width": 600.0, + "height": 28.0, + "children": [] + }, + { + "type": "rectangle", + "id": "n1434", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1435", + "name": "Status", + "width": "fill_container", + "height": 26.0, + "layout": "horizontal", + "gap": 0.0, + "padding": [ + 0.0, + 12.0 + ], + "justifyContent": "space_between", + "alignItems": "center", + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#181818" + } + ], + "children": [ + { + "type": "frame", + "id": "n1436", + "name": "Branch", + "width": "fit_content", + "height": "fit_content", + "layout": "horizontal", + "gap": 4.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n1437", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 13.0, + "height": 13.0, + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + }, + { + "type": "text", + "id": "n1438", + "name": "master", + "width": "fit_content", + "height": "fit_content", + "content": "master", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n1439", + "name": "Right", + "width": "fit_content", + "height": "fit_content", + "layout": "horizontal", + "gap": 16.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n1440", + "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": "text", + "id": "n1441", + "name": "TypeScript JSX", + "width": "fit_content", + "height": "fit_content", + "content": "TypeScript JSX", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + } + ] + } + ], + "editorMeta": { + "activePageIndex": 0, + "preserveAuthoredGeometry": false + } +} \ No newline at end of file