diff --git a/docs/prototype/code-reader/openpencil/exports/react-state-login.png b/docs/prototype/code-reader/openpencil/exports/react-state-login.png index 4ee166d..345af22 100644 Binary files a/docs/prototype/code-reader/openpencil/exports/react-state-login.png and b/docs/prototype/code-reader/openpencil/exports/react-state-login.png differ diff --git a/docs/prototype/code-reader/openpencil/exports/react-state-variants.png b/docs/prototype/code-reader/openpencil/exports/react-state-variants.png index 93a92d0..a5935f9 100644 Binary files a/docs/prototype/code-reader/openpencil/exports/react-state-variants.png and b/docs/prototype/code-reader/openpencil/exports/react-state-variants.png differ diff --git a/docs/prototype/code-reader/openpencil/react-shared.js b/docs/prototype/code-reader/openpencil/react-shared.js index d69ef32..29e31ee 100644 --- a/docs/prototype/code-reader/openpencil/react-shared.js +++ b/docs/prototype/code-reader/openpencil/react-shared.js @@ -503,9 +503,25 @@ function group(parent, segs, color, bg) { // ─── 卡片 ──────────────────────────────────────────────────────────────────── /** - * 卡片右上角：问 AI、编辑；给了 `calls` 再加调用树，同 webview 的 BlockTools：调用次数大于 0 时图标后面跟一个小圆标 - * （徽标底色、字色取 Dark Modern 的 badge），是 0 时只有图标。返回这一排的宽度。 + * 调用树按钮，同 webview 的 BlockTools：git-branch 图标，调用次数大于 0 时后面跟一个小圆标 + * （徽标底色、字色取 Dark Modern 的 badge），是 0 时只有图标。`tip` 是悬停文字，记在图层名里。返回按钮的宽度。 */ +function callTreeButton(parent, calls, tip) { + const name = tip ? "git-branch / " + tip : "git-branch"; + if (calls === 0) { + const tree = row(parent, name, { width: 22, height: 20, justify: "center", radius: 4 }); + icon(tree, "git-branch", C.desc, 14); + return 22; + } + const tree = row(parent, name, { width: "fit_content", height: 20, padding: [0, 4], gap: 1, radius: 4 }); + icon(tree, "git-branch", C.desc, 14); + const badge = row(tree, "Count", { width: 14, height: 14, justify: "center", radius: 7, fill: "#616161" }); + // 一两个字的数字按内容长会被导出时挤小，宽度定死 + text(badge, String(calls), { size: 9, weight: 700, color: "#f8f8f8", lh: 14, fixedW: Math.ceil(widthOf(String(calls), 9, false)) + 1 }); + return 4 + 14 + 1 + 14 + 4; +} + +/** 卡片右上角：问 AI、编辑；给了 `calls` 再加调用树按钮。返回这一排的宽度。 */ function tools(parent, calls) { const bar = row(parent, "Tools", { width: "fit_content", height: 20, gap: 2 }); for (const name of ["sparkles", "pencil"]) { @@ -514,28 +530,22 @@ function tools(parent, calls) { } if (calls == null) return 22 * 2 + 2; - if (calls === 0) { - const tree = row(bar, "git-branch", { width: 22, height: 20, justify: "center", radius: 4 }); - icon(tree, "git-branch", C.desc, 14); - return 22 * 3 + 2 * 2; - } - const tree = row(bar, "git-branch", { width: "fit_content", height: 20, padding: [0, 4], gap: 1, radius: 4 }); - icon(tree, "git-branch", C.desc, 14); - const badge = row(tree, "Count", { width: 14, height: 14, justify: "center", radius: 7, fill: "#616161" }); - text(badge, String(calls), { size: 9, weight: 700, color: "#f8f8f8", lh: 14 }); - return 22 * 2 + 2 + 2 + (4 + 14 + 1 + 14 + 4); + return 22 * 2 + 2 + 2 + callTreeButton(bar, calls); } -/** 悬停提示气泡，样子同 webview 的 data-tooltip：悬停浮层的底色、边框、11px 字。`x`、`y` 是它在父节点里的位置。 */ +/** + * 悬停提示气泡，样子同 webview 的 data-tooltip：悬停浮层的底色、边框、11px 字。 + * `x`、`y` 是它在自由摆放的父节点里的位置；不给时跟着自动排版排在前一个兄弟后面，高度压成一行的 20px。 + */ function tooltip(parent, label, x, y) { const bw = Math.ceil(widthOf(label, 11, false)) + 16; - const tip = I(parent, { + const placed = x != null ? { x: Math.round(x), y: Math.round(y) } : {}; + const tip = I(parent, Object.assign({ type: "frame", name: "Tooltip", - x: Math.round(x), - y: Math.round(y), + }, placed, { width: bw, - height: 22, + height: x != null ? 22 : 20, layout: "horizontal", alignItems: "center", justifyContent: "center", @@ -543,7 +553,7 @@ function tooltip(parent, label, x, y) { fill: solid("#202020"), stroke: { thickness: 1, fill: solid("#454545") }, effects: [{ type: "shadow", offsetX: 0, offsetY: 2, blur: 8, spread: 0, color: "rgba(0,0,0,0.36)" }], - }); + })); text(tip, label, { size: 11, color: C.fg, lh: 14 }); return bw; } diff --git a/docs/prototype/code-reader/openpencil/react-state.js b/docs/prototype/code-reader/openpencil/react-state.js index cd465a6..7c4786c 100644 --- a/docs/prototype/code-reader/openpencil/react-state.js +++ b/docs/prototype/code-reader/openpencil/react-state.js @@ -1,6 +1,6 @@ // 代码阅读 React 状态卡片：useState 不再写成「钩子 useState」，而是一张「状态」卡片，讲清楚五件事： // 它是普通变量也是 React 状态（左边变量、状态两个图标）；它是数组解构（名称照源码写出解构，展开是每一项）； -// 它来自 React 内置的 useState（悬停说明）；状态类型；默认值。修改函数在哪调用，用右上角的调用树查。 +// 它来自 React 内置的 useState（悬停说明）；状态类型；默认值。解构出的每一项各有一个调用树按钮：当前值查谁用了它，修改函数查谁改了它。 // 画板一照抄 luffy-agent-platform 的 frontend/client-nextjs/src/app/desktop/login/page.tsx 第 1–37 行， // 画板二是手写的三行，讲没标类型、函数形式的默认值、只取当前值三种写法。 // 窗口、对齐、别的卡片的画法在同目录 react-shared.js，接在它后面跑：`cat react-shared.js react-state.js | op design - --script`。 @@ -84,26 +84,36 @@ const VARIANTS = sampleFile({ // 种类「状态」：描边、淡底、两个图标都用变量色；左边先是变量卡片的图标，再是状态图标，悬停才出名字 const STATE = { label: "状态", color: "#9cdcfe", icon: "variable" }; -const FROM_TIP = "React 内置钩子"; + +// 解构出的每一项：是什么、它那一行调用树按钮查什么（悬停文字） +const ITEMS = [ + { what: "当前值", tip: "谁用了这个状态" }, + { what: "修改函数", tip: "谁改了这个状态" }, +]; /** - * 「来自」那一行悬停时的气泡在卡片里的位置：在 `useState` 几个字正上方居中、隔 6px。 - * 内容区从卡片内边距（上 8、左 8）、折叠箭头一列（14）、两个图标（42）各隔 10px 往后排； - * 「来自」前面是名称一行和解构表（表头一行、每项一行，各带 1px 分隔线、上下各 2px 留白）。 + * 「是什么」一格：说法后面跟这一项自己的调用树按钮，`calls` 是它在样例里出现几次； + * `bubble` 时按钮右边画出它的悬停气泡（上方是上一行的按钮，放上面会挡住它）。 */ -function fromBubble(labelW, items) { - const tableH = 2 + 24 + items * (24 + 1) + 2; - const rowTop = 8 + 20 + 3 + tableH + 3; - const valueX = 8 + 14 + 10 + 42 + 10 + labelW + 12; - const center = valueX + widthOf("useState", 13, true) / 1.04 / 2; - return { x: center - tooltipWidth(FROM_TIP) / 2, y: rowTop - 6 - 22 }; +function whatCell(item, calls, bubble) { + return { + est: item.what, + extra: 6 + 37, + draw: (frame) => { + const line = row(frame, "What", { gap: 6, height: 20, width: "fit_content" }); + text(line, item.what, { size: 12.5, lh: 20 }); + callTreeButton(line, calls, item.tip); + if (bubble) + tooltip(line, item.tip); + }, + }; } /** - * 一处 useState：名称照源码写出解构（后面灰字「数组解构」，展开是「第几项 | 名称 | 是什么」）/ 来自 / 状态类型 / 默认值。 - * `names` 是解构出的名字，第二个是修改函数；有修改函数时右上角有调用树，`calls` 是它被调用几次。 - * `type` 是状态类型（没写时「未标注」），`initial` 是默认值的着色段。 - * `bubble` 画出「来自」的悬停气泡：卡片和气泡放进一个自由摆放的框，气泡在前，才画在卡片上层。 + * 一处 useState：名称照源码写出解构（后面灰字「数组解构」，展开是「第几项 | 名称 | 是什么」，每一项一个调用树按钮）/ + * 来自（悬停说是 React 内置钩子）/ 状态类型 / 默认值。 + * `names` 是解构出的名字，第二个是修改函数；`calls` 是各项在样例里出现几次。 + * `type` 是状态类型（没写时「未标注」），`initial` 是默认值的着色段；`bubble` 画出修改函数那一行调用树按钮的悬停气泡。 */ function stateCard(s) { return (parent, w) => { @@ -111,15 +121,7 @@ function stateCard(s) { { name: "variable", color: STATE.color, tip: "变量" }, { name: "toggle-right", color: STATE.color, tip: "React 状态" }, ]; - let holder = parent; - let place = {}; - if (s.bubble) { - holder = box(parent, "Hover / 来自", { layout: "none", width: w, height: "fit_content" }); - const spot = fromBubble(76, s.names.length); - tooltip(holder, FROM_TIP, spot.x, spot.y); - place = { x: 0, y: 0 }; - } - const ctx = card(holder, STATE, w, Object.assign({ name: s.names[0], icons, calls: s.names.length > 1 ? s.calls : null }, place)); + const ctx = card(parent, STATE, w, { name: s.names[0], icons }); prop(ctx, "名称", (frame) => { const line = row(frame, "Destructure", { gap: 8, height: 20, width: "fit_content" }); const parts = [seg("[", C.fg)]; @@ -133,8 +135,8 @@ function stateCard(s) { text(line, "数组解构", { size: 12.5, color: C.desc }); }, { fold: "open" }); table(ctx, [{ name: "第几项", mono: false }, { name: "名称", color: C.variable }, { name: "是什么", mono: false }], - s.names.map((name, i) => [indexCell(i + 1), px(name, i === 0 ? C.variable : C.fn), i === 0 ? "当前值" : "修改函数"])); - prop(ctx, "来自", px("useState", C.fn)); + s.names.map((name, i) => [indexCell(i + 1), px(name, i === 0 ? C.variable : C.fn), whatCell(ITEMS[i], s.calls[i], s.bubble && i === 1)])); + prop(ctx, "来自", (frame) => text(frame, px("useState", C.fn), { mono: true, name: "useState（悬停：React 内置钩子）" })); prop(ctx, "状态类型", s.type || px("未标注", C.desc), { mono: Boolean(s.type) }); prop(ctx, "默认值", s.initial); }; @@ -175,7 +177,7 @@ function searchParamsHook(parent, w) { const ACTIVE_TAB = stateCard({ names: ["activeTab", "setActiveTab"], - calls: 1, + calls: [1, 1], type: [link("LoginTab", C.type)], initial: px("\"sms\"", C.string), bubble: true, @@ -183,7 +185,7 @@ const ACTIVE_TAB = stateCard({ const PASSWORD_VIEW = stateCard({ names: ["passwordView", "setPasswordView"], - calls: 1, + calls: [1, 1], type: [link("PasswordView", C.type)], initial: px("\"login\"", C.string), }); @@ -235,16 +237,16 @@ windowOf("Prototype / React 状态 · 其他写法", WIN_W + BOARD_GAP, VARIANTS { from: 1, to: 1, - draw: stateCard({ names: ["open", "setOpen"], calls: 0, initial: cx("假") }), + draw: stateCard({ names: ["open", "setOpen"], calls: [0, 0], initial: cx("假") }), }, { from: 2, to: 2, - draw: stateCard({ names: ["items", "setItems"], calls: 0, type: [link("Item", C.type), seg("[]", C.fg)], initial: [seg("首次渲染时调用 ", C.fg)].concat(cx("loadItems()")) }), + draw: stateCard({ names: ["items", "setItems"], calls: [0, 0], type: [link("Item", C.type), seg("[]", C.fg)], initial: [seg("首次渲染时调用 ", C.fg)].concat(cx("loadItems()")) }), }, { from: 3, to: 3, - draw: stateCard({ names: ["count"], initial: cx("0") }), + draw: stateCard({ names: ["count"], calls: [0], initial: cx("0") }), }, ]); diff --git a/docs/prototype/code-reader/openpencil/react-state.op b/docs/prototype/code-reader/openpencil/react-state.op index c27e02c..895e929 100644 --- a/docs/prototype/code-reader/openpencil/react-state.op +++ b/docs/prototype/code-reader/openpencil/react-state.op @@ -8491,67 +8491,113 @@ { "type": "frame", "id": "n502", - "name": "Hover / 来自", - "width": 741.0, + "name": "状态 / activeTab", + "width": "fill_container", "height": "fit_content", - "layout": "none", - "gap": 0.0, + "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": "n503", - "name": "Tooltip", - "x": 154.0, - "y": 84.0, - "width": 100.0, - "height": 22.0, + "name": "Fold", + "width": 14.0, + "height": 20.0, "layout": "horizontal", + "gap": 0.0, "justifyContent": "center", "alignItems": "center", - "cornerRadius": 4.0, - "fill": [ - { - "type": "solid", - "color": "#202020" - } - ], - "stroke": { - "thickness": 1.0, - "fill": [ - { - "type": "solid", - "color": "#454545" - } - ] - }, - "effects": [ - { - "type": "shadow", - "offsetX": 0.0, - "offsetY": 2.0, - "blur": 8.0, - "spread": 0.0, - "color": "rgba(0,0,0,0.36)" - } - ], + "clipContent": false, + "children": [] + }, + { + "type": "frame", + "id": "n504", + "name": "Concepts", + "width": 42.0, + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, "children": [ { - "type": "text", - "id": "n504", - "name": "React 内置钩子", - "width": "fit_content", - "height": "fit_content", - "content": "React 内置钩子", - "fontFamily": "PingFang SC", - "fontSize": 11.0, - "fontWeight": 400, - "lineHeight": 1.2727272727272727, - "textGrowth": "auto", - "fill": [ + "type": "frame", + "id": "n505", + "name": "Concept / 变量", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ { - "type": "solid", - "color": "#cccccc" + "type": "icon_font", + "id": "n506", + "name": "variable", + "iconFontName": "variable", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n507", + "name": "Concept / React 状态", + "width": 20.0, + "height": 20.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "icon_font", + "id": "n508", + "name": "toggle-right", + "iconFontName": "toggle-right", + "width": 16.0, + "height": 16.0, + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] } ] } @@ -8559,86 +8605,66 @@ }, { "type": "frame", - "id": "n505", - "name": "状态 / activeTab", - "x": 0.0, - "y": 0.0, - "width": 741.0, + "id": "n509", + "name": "Content", + "width": "fill_container", "height": "fit_content", - "layout": "horizontal", - "gap": 10.0, - "padding": [ - 8.0, - 10.0, - 8.0, - 8.0 - ], - "alignItems": "start", + "layout": "vertical", + "gap": 3.0, "clipContent": false, - "cornerRadius": 8.0, - "fill": [ - { - "type": "solid", - "color": "#282c2f" - } - ], - "stroke": { - "thickness": 1.0, - "fill": [ - { - "type": "solid", - "color": "#4b616d" - } - ] - }, "children": [ { "type": "frame", - "id": "n506", - "name": "Fold", - "width": 14.0, - "height": 20.0, + "id": "n510", + "name": "Prop / 名称", + "width": "fill_container", + "height": "fit_content", "layout": "horizontal", - "gap": 0.0, - "justifyContent": "center", - "alignItems": "center", - "clipContent": false, - "children": [] - }, - { - "type": "frame", - "id": "n507", - "name": "Concepts", - "width": 42.0, - "height": 20.0, - "layout": "horizontal", - "gap": 2.0, - "alignItems": "center", + "gap": 12.0, + "alignItems": "start", "clipContent": false, "children": [ { "type": "frame", - "id": "n508", - "name": "Concept / 变量", - "width": 20.0, + "id": "n511", + "name": "Key", + "width": 76.0, "height": 20.0, "layout": "horizontal", - "gap": 0.0, - "justifyContent": "center", + "gap": 4.0, "alignItems": "center", "clipContent": false, "children": [ { "type": "icon_font", - "id": "n509", - "name": "variable", - "iconFontName": "variable", - "width": 16.0, - "height": 16.0, + "id": "n512", + "name": "chevron-down", + "iconFontName": "chevron-down", + "width": 14.0, + "height": 14.0, "fill": [ { "type": "solid", - "color": "#9cdcfe" + "color": "#9d9d9d" + } + ] + }, + { + "type": "text", + "id": "n513", + "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" } ] } @@ -8646,87 +8672,74 @@ }, { "type": "frame", - "id": "n510", - "name": "Concept / React 状态", - "width": 20.0, - "height": 20.0, - "layout": "horizontal", - "gap": 0.0, - "justifyContent": "center", - "alignItems": "center", - "clipContent": false, - "children": [ - { - "type": "icon_font", - "id": "n511", - "name": "toggle-right", - "iconFontName": "toggle-right", - "width": 16.0, - "height": 16.0, - "fill": [ - { - "type": "solid", - "color": "#9cdcfe" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "n512", - "name": "Content", - "width": "fill_container", - "height": "fit_content", - "layout": "vertical", - "gap": 3.0, - "clipContent": false, - "children": [ - { - "type": "frame", - "id": "n513", - "name": "Prop / 名称", + "id": "n514", + "name": "Value", "width": "fill_container", "height": "fit_content", - "layout": "horizontal", - "gap": 12.0, - "alignItems": "start", + "layout": "vertical", + "gap": 2.0, "clipContent": false, "children": [ { "type": "frame", - "id": "n514", - "name": "Key", - "width": 76.0, + "id": "n515", + "name": "Destructure", + "width": "fit_content", "height": 20.0, "layout": "horizontal", - "gap": 4.0, + "gap": 8.0, "alignItems": "center", "clipContent": false, "children": [ { - "type": "icon_font", - "id": "n515", - "name": "chevron-down", - "iconFontName": "chevron-down", - "width": 14.0, - "height": 14.0, + "type": "text", + "id": "n516", + "name": "[activeTab, setActiveTab]", + "width": "fit_content", + "height": "fit_content", + "content": [ + { + "text": "[", + "fill": "#cccccc" + }, + { + "text": "activeTab", + "fontWeight": 600, + "fill": "#9cdcfe" + }, + { + "text": ", ", + "fill": "#cccccc" + }, + { + "text": "setActiveTab", + "fontWeight": 600, + "fill": "#dcdcaa" + }, + { + "text": "]", + "fill": "#cccccc" + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", "fill": [ { "type": "solid", - "color": "#9d9d9d" + "color": "#cccccc" } ] }, { "type": "text", - "id": "n516", - "name": "名称", + "id": "n517", + "name": "数组解构", "width": "fit_content", "height": "fit_content", - "content": "名称", + "content": "数组解构", "fontFamily": "PingFang SC", "fontSize": 12.5, "fontWeight": 400, @@ -8740,81 +8753,187 @@ ] } ] - }, + } + ] + } + ] + }, + { + "type": "frame", + "id": "n518", + "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": "n519", + "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": "n517", - "name": "Value", + "id": "n520", + "name": "Header", "width": "fill_container", "height": "fit_content", - "layout": "vertical", - "gap": 2.0, + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#333739" + } + ], "children": [ { "type": "frame", - "id": "n518", - "name": "Destructure", - "width": "fit_content", - "height": 20.0, - "layout": "horizontal", - "gap": 8.0, - "alignItems": "center", + "id": "n521", + "name": "第几项", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], "clipContent": false, "children": [ { "type": "text", - "id": "n519", - "name": "[activeTab, setActiveTab]", + "id": "n522", + "name": "第几项", "width": "fit_content", "height": "fit_content", - "content": [ - { - "text": "[", - "fill": "#cccccc" - }, - { - "text": "activeTab", - "fontWeight": 600, - "fill": "#9cdcfe" - }, - { - "text": ", ", - "fill": "#cccccc" - }, - { - "text": "setActiveTab", - "fontWeight": 600, - "fill": "#dcdcaa" - }, - { - "text": "]", - "fill": "#cccccc" - } - ], - "fontFamily": "Menlo", - "fontSize": 13.0, + "content": "第几项", + "fontFamily": "PingFang SC", + "fontSize": 12.0, "fontWeight": 400, - "lineHeight": 1.5384615384615383, + "lineHeight": 1.6666666666666667, "textGrowth": "auto", "fill": [ { "type": "solid", - "color": "#cccccc" + "color": "#9d9d9d" } ] - }, + } + ] + }, + { + "type": "rectangle", + "id": "n523", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n524", + "name": "名称", + "width": 114.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ { "type": "text", - "id": "n520", - "name": "数组解构", + "id": "n525", + "name": "名称", "width": "fit_content", "height": "fit_content", - "content": "数组解构", + "content": "名称", "fontFamily": "PingFang SC", - "fontSize": 12.5, + "fontSize": 12.0, "fontWeight": 400, - "lineHeight": 1.6, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n526", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n527", + "name": "是什么", + "width": 412.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n528", + "name": "是什么", + "width": "fit_content", + "height": "fit_content", + "content": "是什么", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, "textGrowth": "auto", "fill": [ { @@ -8826,192 +8945,62 @@ ] } ] - } - ] - }, - { - "type": "frame", - "id": "n521", - "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": "rectangle", + "id": "n529", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, { "type": "frame", - "id": "n522", - "name": "Table", + "id": "n530", + "name": "Row", "width": "fill_container", "height": "fit_content", - "layout": "vertical", + "layout": "horizontal", "gap": 0.0, - "clipContent": true, - "cornerRadius": 4.0, - "stroke": { - "thickness": 1.0, - "fill": [ - { - "type": "solid", - "color": "#3c3c3c" - } - ] - }, + "alignItems": "start", + "clipContent": false, "children": [ { "type": "frame", - "id": "n523", - "name": "Header", - "width": "fill_container", + "id": "n531", + "name": "第几项", + "width": 56.0, "height": "fit_content", - "layout": "horizontal", - "gap": 0.0, - "alignItems": "start", - "clipContent": false, - "fill": [ - { - "type": "solid", - "color": "#333739" - } + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 ], + "clipContent": false, "children": [ { - "type": "frame", - "id": "n524", - "name": "第几项", - "width": 56.0, + "type": "text", + "id": "n532", + "name": "1", + "width": 12.0, "height": "fit_content", - "layout": "vertical", - "gap": 3.0, - "padding": [ - 2.0, - 8.0 - ], - "clipContent": false, - "children": [ - { - "type": "text", - "id": "n525", - "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": "n526", - "name": "Sep", - "width": 1.0, - "height": "fill_container", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "fixed-width", "fill": [ { "type": "solid", - "color": "#3c3c3c" - } - ], - "children": [] - }, - { - "type": "frame", - "id": "n527", - "name": "名称", - "width": 114.0, - "height": "fit_content", - "layout": "vertical", - "gap": 3.0, - "padding": [ - 2.0, - 8.0 - ], - "clipContent": false, - "children": [ - { - "type": "text", - "id": "n528", - "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": "n529", - "name": "Sep", - "width": 1.0, - "height": "fill_container", - "fill": [ - { - "type": "solid", - "color": "#3c3c3c" - } - ], - "children": [] - }, - { - "type": "frame", - "id": "n530", - "name": "是什么", - "width": 373.0, - "height": "fit_content", - "layout": "vertical", - "gap": 3.0, - "padding": [ - 2.0, - 8.0 - ], - "clipContent": false, - "children": [ - { - "type": "text", - "id": "n531", - "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" - } - ] + "color": "#9d9d9d" } ] } @@ -9019,10 +9008,10 @@ }, { "type": "rectangle", - "id": "n532", - "name": "Divider", - "width": "fill_container", - "height": 1.0, + "id": "n533", + "name": "Sep", + "width": 1.0, + "height": "fill_container", "fill": [ { "type": "solid", @@ -9033,130 +9022,81 @@ }, { "type": "frame", - "id": "n533", - "name": "Row", - "width": "fill_container", + "id": "n534", + "name": "名称", + "width": 114.0, "height": "fit_content", - "layout": "horizontal", - "gap": 0.0, - "alignItems": "start", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n535", + "name": "activeTab", + "width": "fit_content", + "height": "fit_content", + "content": "activeTab", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n536", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n537", + "name": "是什么", + "width": 412.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], "clipContent": false, "children": [ { "type": "frame", - "id": "n534", - "name": "第几项", - "width": 56.0, - "height": "fit_content", - "layout": "vertical", - "gap": 3.0, - "padding": [ - 2.0, - 8.0 - ], + "id": "n538", + "name": "What", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", "clipContent": false, "children": [ { "type": "text", - "id": "n535", - "name": "1", - "width": 12.0, - "height": "fit_content", - "content": "1", - "fontFamily": "PingFang SC", - "fontSize": 12.5, - "fontWeight": 400, - "lineHeight": 1.6, - "textGrowth": "fixed-width", - "fill": [ - { - "type": "solid", - "color": "#9d9d9d" - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "n536", - "name": "Sep", - "width": 1.0, - "height": "fill_container", - "fill": [ - { - "type": "solid", - "color": "#3c3c3c" - } - ], - "children": [] - }, - { - "type": "frame", - "id": "n537", - "name": "名称", - "width": 114.0, - "height": "fit_content", - "layout": "vertical", - "gap": 3.0, - "padding": [ - 2.0, - 8.0 - ], - "clipContent": false, - "children": [ - { - "type": "text", - "id": "n538", - "name": "activeTab", - "width": "fit_content", - "height": "fit_content", - "content": "activeTab", - "fontFamily": "Menlo", - "fontSize": 12.5, - "fontWeight": 400, - "lineHeight": 1.6, - "textGrowth": "auto", - "fill": [ - { - "type": "solid", - "color": "#9cdcfe" - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "n539", - "name": "Sep", - "width": 1.0, - "height": "fill_container", - "fill": [ - { - "type": "solid", - "color": "#3c3c3c" - } - ], - "children": [] - }, - { - "type": "frame", - "id": "n540", - "name": "是什么", - "width": 373.0, - "height": "fit_content", - "layout": "vertical", - "gap": 3.0, - "padding": [ - 2.0, - 8.0 - ], - "clipContent": false, - "children": [ - { - "type": "text", - "id": "n541", + "id": "n539", "name": "当前值", "width": "fit_content", "height": "fit_content", @@ -9172,6 +9112,140 @@ "color": "#cccccc" } ] + }, + { + "type": "frame", + "id": "n540", + "name": "git-branch / 谁用了这个状态", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n541", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n542", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n543", + "name": "1", + "width": 8.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n544", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n545", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n546", + "name": "第几项", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n547", + "name": "2", + "width": 12.0, + "height": "fit_content", + "content": "2", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" } ] } @@ -9179,10 +9253,10 @@ }, { "type": "rectangle", - "id": "n542", - "name": "Divider", - "width": "fill_container", - "height": 1.0, + "id": "n548", + "name": "Sep", + "width": 1.0, + "height": "fill_container", "fill": [ { "type": "solid", @@ -9193,130 +9267,81 @@ }, { "type": "frame", - "id": "n543", - "name": "Row", - "width": "fill_container", + "id": "n549", + "name": "名称", + "width": 114.0, "height": "fit_content", - "layout": "horizontal", - "gap": 0.0, - "alignItems": "start", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n550", + "name": "setActiveTab", + "width": "fit_content", + "height": "fit_content", + "content": "setActiveTab", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n551", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n552", + "name": "是什么", + "width": 412.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], "clipContent": false, "children": [ { "type": "frame", - "id": "n544", - "name": "第几项", - "width": 56.0, - "height": "fit_content", - "layout": "vertical", - "gap": 3.0, - "padding": [ - 2.0, - 8.0 - ], + "id": "n553", + "name": "What", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", "clipContent": false, "children": [ { "type": "text", - "id": "n545", - "name": "2", - "width": 12.0, - "height": "fit_content", - "content": "2", - "fontFamily": "PingFang SC", - "fontSize": 12.5, - "fontWeight": 400, - "lineHeight": 1.6, - "textGrowth": "fixed-width", - "fill": [ - { - "type": "solid", - "color": "#9d9d9d" - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "n546", - "name": "Sep", - "width": 1.0, - "height": "fill_container", - "fill": [ - { - "type": "solid", - "color": "#3c3c3c" - } - ], - "children": [] - }, - { - "type": "frame", - "id": "n547", - "name": "名称", - "width": 114.0, - "height": "fit_content", - "layout": "vertical", - "gap": 3.0, - "padding": [ - 2.0, - 8.0 - ], - "clipContent": false, - "children": [ - { - "type": "text", - "id": "n548", - "name": "setActiveTab", - "width": "fit_content", - "height": "fit_content", - "content": "setActiveTab", - "fontFamily": "Menlo", - "fontSize": 12.5, - "fontWeight": 400, - "lineHeight": 1.6, - "textGrowth": "auto", - "fill": [ - { - "type": "solid", - "color": "#dcdcaa" - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "n549", - "name": "Sep", - "width": 1.0, - "height": "fill_container", - "fill": [ - { - "type": "solid", - "color": "#3c3c3c" - } - ], - "children": [] - }, - { - "type": "frame", - "id": "n550", - "name": "是什么", - "width": 373.0, - "height": "fit_content", - "layout": "vertical", - "gap": 3.0, - "padding": [ - 2.0, - 8.0 - ], - "clipContent": false, - "children": [ - { - "type": "text", - "id": "n551", + "id": "n554", "name": "修改函数", "width": "fit_content", "height": "fit_content", @@ -9332,6 +9357,135 @@ "color": "#cccccc" } ] + }, + { + "type": "frame", + "id": "n555", + "name": "git-branch / 谁改了这个状态", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n556", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n557", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n558", + "name": "1", + "width": 8.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n559", + "name": "Tooltip", + "width": 97.0, + "height": 20.0, + "layout": "horizontal", + "justifyContent": "center", + "alignItems": "center", + "cornerRadius": 4.0, + "fill": [ + { + "type": "solid", + "color": "#202020" + } + ], + "stroke": { + "thickness": 1.0, + "fill": [ + { + "type": "solid", + "color": "#454545" + } + ] + }, + "effects": [ + { + "type": "shadow", + "offsetX": 0.0, + "offsetY": 2.0, + "blur": 8.0, + "spread": 0.0, + "color": "rgba(0,0,0,0.36)" + } + ], + "children": [ + { + "type": "text", + "id": "n560", + "name": "谁改了这个状态", + "width": "fit_content", + "height": "fit_content", + "content": "谁改了这个状态", + "fontFamily": "PingFang SC", + "fontSize": 11.0, + "fontWeight": 400, + "lineHeight": 1.2727272727272727, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] } ] } @@ -9340,54 +9494,66 @@ ] } ] - }, + } + ] + }, + { + "type": "frame", + "id": "n561", + "name": "Prop / 来自", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ { "type": "frame", - "id": "n552", - "name": "Prop / 来自", - "width": "fill_container", - "height": "fit_content", + "id": "n562", + "name": "Key", + "width": 76.0, + "height": 20.0, "layout": "horizontal", - "gap": 12.0, - "alignItems": "start", + "gap": 4.0, + "alignItems": "center", "clipContent": false, "children": [ { - "type": "frame", - "id": "n553", - "name": "Key", - "width": 76.0, - "height": 20.0, - "layout": "horizontal", - "gap": 4.0, - "alignItems": "center", - "clipContent": false, - "children": [ + "type": "text", + "id": "n563", + "name": "来自", + "width": "fit_content", + "height": "fit_content", + "content": "来自", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ { - "type": "text", - "id": "n554", - "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": "solid", + "color": "#9d9d9d" } ] - }, + } + ] + }, + { + "type": "frame", + "id": "n564", + "name": "Value", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ { "type": "text", - "id": "n555", - "name": "useState", + "id": "n565", + "name": "useState（悬停：React 内置钩子）", "width": "fit_content", "height": "fit_content", "content": "useState", @@ -9404,138 +9570,74 @@ ] } ] - }, + } + ] + }, + { + "type": "frame", + "id": "n566", + "name": "Prop / 状态类型", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 12.0, + "alignItems": "start", + "clipContent": false, + "children": [ { "type": "frame", - "id": "n556", - "name": "Prop / 状态类型", - "width": "fill_container", - "height": "fit_content", + "id": "n567", + "name": "Key", + "width": 76.0, + "height": 20.0, "layout": "horizontal", - "gap": 12.0, - "alignItems": "start", + "gap": 4.0, + "alignItems": "center", "clipContent": false, "children": [ - { - "type": "frame", - "id": "n557", - "name": "Key", - "width": 76.0, - "height": 20.0, - "layout": "horizontal", - "gap": 4.0, - "alignItems": "center", - "clipContent": false, - "children": [ - { - "type": "text", - "id": "n558", - "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": "n559", - "name": "LoginTab", + "id": "n568", + "name": "状态类型", "width": "fit_content", "height": "fit_content", - "content": [ - { - "text": "LoginTab", - "fill": "#4ec9b0", - "underline": true - } - ], - "fontFamily": "Menlo", - "fontSize": 13.0, + "content": "状态类型", + "fontFamily": "PingFang SC", + "fontSize": 12.5, "fontWeight": 400, - "lineHeight": 1.5384615384615383, + "lineHeight": 1.6, "textGrowth": "auto", "fill": [ { "type": "solid", - "color": "#cccccc" + "color": "#9d9d9d" } ] } ] }, { - "type": "frame", - "id": "n560", - "name": "Prop / 默认值", - "width": "fill_container", + "type": "text", + "id": "n569", + "name": "LoginTab", + "width": "fit_content", "height": "fit_content", - "layout": "horizontal", - "gap": 12.0, - "alignItems": "start", - "clipContent": false, - "children": [ + "content": [ { - "type": "frame", - "id": "n561", - "name": "Key", - "width": 76.0, - "height": 20.0, - "layout": "horizontal", - "gap": 4.0, - "alignItems": "center", - "clipContent": false, - "children": [ - { - "type": "text", - "id": "n562", - "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" - } - ] - } - ] - }, + "text": "LoginTab", + "fill": "#4ec9b0", + "underline": true + } + ], + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ { - "type": "text", - "id": "n563", - "name": "\"sms\"", - "width": "fit_content", - "height": "fit_content", - "content": "\"sms\"", - "fontFamily": "Menlo", - "fontSize": 13.0, - "fontWeight": 400, - "lineHeight": 1.5384615384615383, - "textGrowth": "auto", - "fill": [ - { - "type": "solid", - "color": "#ce9178" - } - ] + "type": "solid", + "color": "#cccccc" } ] } @@ -9543,35 +9645,38 @@ }, { "type": "frame", - "id": "n564", - "name": "Tools", - "width": "fit_content", - "height": 20.0, + "id": "n570", + "name": "Prop / 默认值", + "width": "fill_container", + "height": "fit_content", "layout": "horizontal", - "gap": 2.0, - "alignItems": "center", + "gap": 12.0, + "alignItems": "start", "clipContent": false, "children": [ { "type": "frame", - "id": "n565", - "name": "sparkles", - "width": 22.0, + "id": "n571", + "name": "Key", + "width": 76.0, "height": 20.0, "layout": "horizontal", - "gap": 0.0, - "justifyContent": "center", + "gap": 4.0, "alignItems": "center", "clipContent": false, - "cornerRadius": 4.0, "children": [ { - "type": "icon_font", - "id": "n566", - "name": "sparkles", - "iconFontName": "sparkles", - "width": 14.0, - "height": 14.0, + "type": "text", + "id": "n572", + "name": "默认值", + "width": "fit_content", + "height": "fit_content", + "content": "默认值", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", "fill": [ { "type": "solid", @@ -9582,103 +9687,92 @@ ] }, { - "type": "frame", - "id": "n567", - "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": "n568", - "name": "pencil", - "iconFontName": "pencil", - "width": 14.0, - "height": 14.0, - "fill": [ - { - "type": "solid", - "color": "#9d9d9d" - } - ] - } - ] - }, - { - "type": "frame", - "id": "n569", - "name": "git-branch", + "type": "text", + "id": "n573", + "name": "\"sms\"", "width": "fit_content", - "height": 20.0, - "layout": "horizontal", - "gap": 1.0, - "padding": [ - 0.0, - 4.0 - ], - "alignItems": "center", - "clipContent": false, - "cornerRadius": 4.0, - "children": [ + "height": "fit_content", + "content": "\"sms\"", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ { - "type": "icon_font", - "id": "n570", - "name": "git-branch", - "iconFontName": "git-branch", - "width": 14.0, - "height": 14.0, - "fill": [ - { - "type": "solid", - "color": "#9d9d9d" - } - ] - }, + "type": "solid", + "color": "#ce9178" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n574", + "name": "Tools", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 2.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n575", + "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": "n576", + "name": "sparkles", + "iconFontName": "sparkles", + "width": 14.0, + "height": 14.0, + "fill": [ { - "type": "frame", - "id": "n571", - "name": "Count", - "width": 14.0, - "height": 14.0, - "layout": "horizontal", - "gap": 0.0, - "justifyContent": "center", - "alignItems": "center", - "clipContent": false, - "cornerRadius": 7.0, - "fill": [ - { - "type": "solid", - "color": "#616161" - } - ], - "children": [ - { - "type": "text", - "id": "n572", - "name": "1", - "width": "fit_content", - "height": "fit_content", - "content": "1", - "fontFamily": "PingFang SC", - "fontSize": 9.0, - "fontWeight": 700, - "lineHeight": 1.5555555555555556, - "textGrowth": "auto", - "fill": [ - { - "type": "solid", - "color": "#f8f8f8" - } - ] - } - ] + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n577", + "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": "n578", + "name": "pencil", + "iconFontName": "pencil", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" } ] } @@ -9698,7 +9792,7 @@ }, { "type": "frame", - "id": "n573", + "id": "n579", "name": "Lines 20–21", "width": "fill_container", "height": "fit_content", @@ -9709,7 +9803,7 @@ "children": [ { "type": "frame", - "id": "n574", + "id": "n580", "name": "Code", "width": 600.0, "height": "fill_container", @@ -9725,7 +9819,7 @@ "children": [ { "type": "frame", - "id": "n575", + "id": "n581", "name": "Line 20", "width": "fill_container", "height": 20.0, @@ -9736,7 +9830,7 @@ "children": [ { "type": "frame", - "id": "n576", + "id": "n582", "name": "Number", "width": 44.0, "height": 20.0, @@ -9748,7 +9842,7 @@ "children": [ { "type": "text", - "id": "n577", + "id": "n583", "name": "20", "width": "fit_content", "height": "fit_content", @@ -9769,7 +9863,7 @@ }, { "type": "frame", - "id": "n578", + "id": "n584", "name": "Margin", "width": 41.66, "height": 20.0, @@ -9777,7 +9871,7 @@ }, { "type": "text", - "id": "n579", + "id": "n585", "name": "const [passwordView, setPasswordView] = ", "width": "fit_content", "height": "fit_content", @@ -9863,7 +9957,7 @@ }, { "type": "frame", - "id": "n580", + "id": "n586", "name": "Line 21", "width": "fill_container", "height": 20.0, @@ -9874,7 +9968,7 @@ "children": [ { "type": "frame", - "id": "n581", + "id": "n587", "name": "Number", "width": 44.0, "height": 20.0, @@ -9886,7 +9980,7 @@ "children": [ { "type": "text", - "id": "n582", + "id": "n588", "name": "21", "width": "fit_content", "height": "fit_content", @@ -9907,7 +10001,7 @@ }, { "type": "frame", - "id": "n583", + "id": "n589", "name": "Margin", "width": 26.0, "height": 20.0, @@ -9919,7 +10013,7 @@ }, { "type": "rectangle", - "id": "n584", + "id": "n590", "name": "Sash", "width": 1.0, "height": "fill_container", @@ -9933,7 +10027,7 @@ }, { "type": "frame", - "id": "n585", + "id": "n591", "name": "Preview", "width": "fill_container", "height": "fill_container", @@ -9949,7 +10043,7 @@ "children": [ { "type": "frame", - "id": "n586", + "id": "n592", "name": "Level", "width": "fill_container", "height": "fill_container", @@ -9960,7 +10054,7 @@ "children": [ { "type": "frame", - "id": "n587", + "id": "n593", "name": "Guide", "width": 12.0, "height": "fill_container", @@ -9971,7 +10065,7 @@ "children": [ { "type": "rectangle", - "id": "n588", + "id": "n594", "name": "Line", "width": 1.0, "height": "fill_container", @@ -9987,7 +10081,7 @@ }, { "type": "frame", - "id": "n589", + "id": "n595", "name": "Cards", "width": "fill_container", "height": "fit_content", @@ -10003,7 +10097,7 @@ "children": [ { "type": "frame", - "id": "n590", + "id": "n596", "name": "状态 / passwordView", "width": "fill_container", "height": "fit_content", @@ -10036,7 +10130,7 @@ "children": [ { "type": "frame", - "id": "n591", + "id": "n597", "name": "Fold", "width": 14.0, "height": 20.0, @@ -10049,7 +10143,7 @@ }, { "type": "frame", - "id": "n592", + "id": "n598", "name": "Concepts", "width": 42.0, "height": 20.0, @@ -10060,7 +10154,7 @@ "children": [ { "type": "frame", - "id": "n593", + "id": "n599", "name": "Concept / 变量", "width": 20.0, "height": 20.0, @@ -10072,7 +10166,7 @@ "children": [ { "type": "icon_font", - "id": "n594", + "id": "n600", "name": "variable", "iconFontName": "variable", "width": 16.0, @@ -10088,7 +10182,7 @@ }, { "type": "frame", - "id": "n595", + "id": "n601", "name": "Concept / React 状态", "width": 20.0, "height": 20.0, @@ -10100,7 +10194,7 @@ "children": [ { "type": "icon_font", - "id": "n596", + "id": "n602", "name": "toggle-right", "iconFontName": "toggle-right", "width": 16.0, @@ -10118,7 +10212,7 @@ }, { "type": "frame", - "id": "n597", + "id": "n603", "name": "Content", "width": "fill_container", "height": "fit_content", @@ -10128,7 +10222,7 @@ "children": [ { "type": "frame", - "id": "n598", + "id": "n604", "name": "Prop / 名称", "width": "fill_container", "height": "fit_content", @@ -10139,7 +10233,7 @@ "children": [ { "type": "frame", - "id": "n599", + "id": "n605", "name": "Key", "width": 76.0, "height": 20.0, @@ -10150,7 +10244,7 @@ "children": [ { "type": "icon_font", - "id": "n600", + "id": "n606", "name": "chevron-down", "iconFontName": "chevron-down", "width": 14.0, @@ -10164,7 +10258,7 @@ }, { "type": "text", - "id": "n601", + "id": "n607", "name": "名称", "width": "fit_content", "height": "fit_content", @@ -10185,7 +10279,7 @@ }, { "type": "frame", - "id": "n602", + "id": "n608", "name": "Value", "width": "fill_container", "height": "fit_content", @@ -10195,7 +10289,7 @@ "children": [ { "type": "frame", - "id": "n603", + "id": "n609", "name": "Destructure", "width": "fit_content", "height": 20.0, @@ -10206,7 +10300,7 @@ "children": [ { "type": "text", - "id": "n604", + "id": "n610", "name": "[passwordView, setPasswordView]", "width": "fit_content", "height": "fit_content", @@ -10248,7 +10342,7 @@ }, { "type": "text", - "id": "n605", + "id": "n611", "name": "数组解构", "width": "fit_content", "height": "fit_content", @@ -10273,7 +10367,7 @@ }, { "type": "frame", - "id": "n606", + "id": "n612", "name": "Table wrap", "width": "fill_container", "height": "fit_content", @@ -10289,7 +10383,7 @@ "children": [ { "type": "frame", - "id": "n607", + "id": "n613", "name": "Table", "width": "fill_container", "height": "fit_content", @@ -10309,7 +10403,7 @@ "children": [ { "type": "frame", - "id": "n608", + "id": "n614", "name": "Header", "width": "fill_container", "height": "fit_content", @@ -10326,7 +10420,7 @@ "children": [ { "type": "frame", - "id": "n609", + "id": "n615", "name": "第几项", "width": 56.0, "height": "fit_content", @@ -10340,7 +10434,7 @@ "children": [ { "type": "text", - "id": "n610", + "id": "n616", "name": "第几项", "width": "fit_content", "height": "fit_content", @@ -10361,7 +10455,7 @@ }, { "type": "rectangle", - "id": "n611", + "id": "n617", "name": "Sep", "width": 1.0, "height": "fill_container", @@ -10375,7 +10469,7 @@ }, { "type": "frame", - "id": "n612", + "id": "n618", "name": "名称", "width": 137.0, "height": "fit_content", @@ -10389,7 +10483,7 @@ "children": [ { "type": "text", - "id": "n613", + "id": "n619", "name": "名称", "width": "fit_content", "height": "fit_content", @@ -10410,7 +10504,7 @@ }, { "type": "rectangle", - "id": "n614", + "id": "n620", "name": "Sep", "width": 1.0, "height": "fill_container", @@ -10424,9 +10518,9 @@ }, { "type": "frame", - "id": "n615", + "id": "n621", "name": "是什么", - "width": 350.0, + "width": 389.0, "height": "fit_content", "layout": "vertical", "gap": 3.0, @@ -10438,7 +10532,7 @@ "children": [ { "type": "text", - "id": "n616", + "id": "n622", "name": "是什么", "width": "fit_content", "height": "fit_content", @@ -10461,7 +10555,7 @@ }, { "type": "rectangle", - "id": "n617", + "id": "n623", "name": "Divider", "width": "fill_container", "height": 1.0, @@ -10475,7 +10569,7 @@ }, { "type": "frame", - "id": "n618", + "id": "n624", "name": "Row", "width": "fill_container", "height": "fit_content", @@ -10486,7 +10580,7 @@ "children": [ { "type": "frame", - "id": "n619", + "id": "n625", "name": "第几项", "width": 56.0, "height": "fit_content", @@ -10500,7 +10594,7 @@ "children": [ { "type": "text", - "id": "n620", + "id": "n626", "name": "1", "width": 12.0, "height": "fit_content", @@ -10521,7 +10615,7 @@ }, { "type": "rectangle", - "id": "n621", + "id": "n627", "name": "Sep", "width": 1.0, "height": "fill_container", @@ -10535,7 +10629,7 @@ }, { "type": "frame", - "id": "n622", + "id": "n628", "name": "名称", "width": 137.0, "height": "fit_content", @@ -10549,7 +10643,7 @@ "children": [ { "type": "text", - "id": "n623", + "id": "n629", "name": "passwordView", "width": "fit_content", "height": "fit_content", @@ -10570,7 +10664,7 @@ }, { "type": "rectangle", - "id": "n624", + "id": "n630", "name": "Sep", "width": 1.0, "height": "fill_container", @@ -10584,9 +10678,9 @@ }, { "type": "frame", - "id": "n625", + "id": "n631", "name": "是什么", - "width": 350.0, + "width": 389.0, "height": "fit_content", "layout": "vertical", "gap": 3.0, @@ -10597,21 +10691,106 @@ "clipContent": false, "children": [ { - "type": "text", - "id": "n626", - "name": "当前值", + "type": "frame", + "id": "n632", + "name": "What", "width": "fit_content", - "height": "fit_content", - "content": "当前值", - "fontFamily": "PingFang SC", - "fontSize": 12.5, - "fontWeight": 400, - "lineHeight": 1.6, - "textGrowth": "auto", - "fill": [ + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ { - "type": "solid", - "color": "#cccccc" + "type": "text", + "id": "n633", + "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": "n634", + "name": "git-branch / 谁用了这个状态", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n635", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n636", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n637", + "name": "1", + "width": 8.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] } ] } @@ -10621,7 +10800,7 @@ }, { "type": "rectangle", - "id": "n627", + "id": "n638", "name": "Divider", "width": "fill_container", "height": 1.0, @@ -10635,7 +10814,7 @@ }, { "type": "frame", - "id": "n628", + "id": "n639", "name": "Row", "width": "fill_container", "height": "fit_content", @@ -10646,7 +10825,7 @@ "children": [ { "type": "frame", - "id": "n629", + "id": "n640", "name": "第几项", "width": 56.0, "height": "fit_content", @@ -10660,7 +10839,7 @@ "children": [ { "type": "text", - "id": "n630", + "id": "n641", "name": "2", "width": 12.0, "height": "fit_content", @@ -10681,7 +10860,7 @@ }, { "type": "rectangle", - "id": "n631", + "id": "n642", "name": "Sep", "width": 1.0, "height": "fill_container", @@ -10695,7 +10874,7 @@ }, { "type": "frame", - "id": "n632", + "id": "n643", "name": "名称", "width": 137.0, "height": "fit_content", @@ -10709,7 +10888,7 @@ "children": [ { "type": "text", - "id": "n633", + "id": "n644", "name": "setPasswordView", "width": "fit_content", "height": "fit_content", @@ -10730,7 +10909,7 @@ }, { "type": "rectangle", - "id": "n634", + "id": "n645", "name": "Sep", "width": 1.0, "height": "fill_container", @@ -10744,9 +10923,9 @@ }, { "type": "frame", - "id": "n635", + "id": "n646", "name": "是什么", - "width": 350.0, + "width": 389.0, "height": "fit_content", "layout": "vertical", "gap": 3.0, @@ -10757,21 +10936,106 @@ "clipContent": false, "children": [ { - "type": "text", - "id": "n636", - "name": "修改函数", + "type": "frame", + "id": "n647", + "name": "What", "width": "fit_content", - "height": "fit_content", - "content": "修改函数", - "fontFamily": "PingFang SC", - "fontSize": 12.5, - "fontWeight": 400, - "lineHeight": 1.6, - "textGrowth": "auto", - "fill": [ + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ { - "type": "solid", - "color": "#cccccc" + "type": "text", + "id": "n648", + "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": "n649", + "name": "git-branch / 谁改了这个状态", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 1.0, + "padding": [ + 0.0, + 4.0 + ], + "alignItems": "center", + "clipContent": false, + "cornerRadius": 4.0, + "children": [ + { + "type": "icon_font", + "id": "n650", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + }, + { + "type": "frame", + "id": "n651", + "name": "Count", + "width": 14.0, + "height": 14.0, + "layout": "horizontal", + "gap": 0.0, + "justifyContent": "center", + "alignItems": "center", + "clipContent": false, + "cornerRadius": 7.0, + "fill": [ + { + "type": "solid", + "color": "#616161" + } + ], + "children": [ + { + "type": "text", + "id": "n652", + "name": "1", + "width": 8.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 9.0, + "fontWeight": 700, + "lineHeight": 1.5555555555555556, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#f8f8f8" + } + ] + } + ] + } + ] } ] } @@ -10785,7 +11049,7 @@ }, { "type": "frame", - "id": "n637", + "id": "n653", "name": "Prop / 来自", "width": "fill_container", "height": "fit_content", @@ -10796,7 +11060,7 @@ "children": [ { "type": "frame", - "id": "n638", + "id": "n654", "name": "Key", "width": 76.0, "height": 20.0, @@ -10807,7 +11071,7 @@ "children": [ { "type": "text", - "id": "n639", + "id": "n655", "name": "来自", "width": "fit_content", "height": "fit_content", @@ -10827,21 +11091,33 @@ ] }, { - "type": "text", - "id": "n640", - "name": "useState", - "width": "fit_content", + "type": "frame", + "id": "n656", + "name": "Value", + "width": "fill_container", "height": "fit_content", - "content": "useState", - "fontFamily": "Menlo", - "fontSize": 13.0, - "fontWeight": 400, - "lineHeight": 1.5384615384615383, - "textGrowth": "auto", - "fill": [ + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ { - "type": "solid", - "color": "#dcdcaa" + "type": "text", + "id": "n657", + "name": "useState（悬停：React 内置钩子）", + "width": "fit_content", + "height": "fit_content", + "content": "useState", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] } ] } @@ -10849,7 +11125,7 @@ }, { "type": "frame", - "id": "n641", + "id": "n658", "name": "Prop / 状态类型", "width": "fill_container", "height": "fit_content", @@ -10860,7 +11136,7 @@ "children": [ { "type": "frame", - "id": "n642", + "id": "n659", "name": "Key", "width": 76.0, "height": 20.0, @@ -10871,7 +11147,7 @@ "children": [ { "type": "text", - "id": "n643", + "id": "n660", "name": "状态类型", "width": "fit_content", "height": "fit_content", @@ -10892,7 +11168,7 @@ }, { "type": "text", - "id": "n644", + "id": "n661", "name": "PasswordView", "width": "fit_content", "height": "fit_content", @@ -10919,7 +11195,7 @@ }, { "type": "frame", - "id": "n645", + "id": "n662", "name": "Prop / 默认值", "width": "fill_container", "height": "fit_content", @@ -10930,7 +11206,7 @@ "children": [ { "type": "frame", - "id": "n646", + "id": "n663", "name": "Key", "width": 76.0, "height": 20.0, @@ -10941,7 +11217,7 @@ "children": [ { "type": "text", - "id": "n647", + "id": "n664", "name": "默认值", "width": "fit_content", "height": "fit_content", @@ -10962,7 +11238,7 @@ }, { "type": "text", - "id": "n648", + "id": "n665", "name": "\"login\"", "width": "fit_content", "height": "fit_content", @@ -10985,7 +11261,7 @@ }, { "type": "frame", - "id": "n649", + "id": "n666", "name": "Tools", "width": "fit_content", "height": 20.0, @@ -10996,7 +11272,7 @@ "children": [ { "type": "frame", - "id": "n650", + "id": "n667", "name": "sparkles", "width": 22.0, "height": 20.0, @@ -11009,7 +11285,7 @@ "children": [ { "type": "icon_font", - "id": "n651", + "id": "n668", "name": "sparkles", "iconFontName": "sparkles", "width": 14.0, @@ -11025,7 +11301,7 @@ }, { "type": "frame", - "id": "n652", + "id": "n669", "name": "pencil", "width": 22.0, "height": 20.0, @@ -11038,7 +11314,7 @@ "children": [ { "type": "icon_font", - "id": "n653", + "id": "n670", "name": "pencil", "iconFontName": "pencil", "width": 14.0, @@ -11051,78 +11327,6 @@ ] } ] - }, - { - "type": "frame", - "id": "n654", - "name": "git-branch", - "width": "fit_content", - "height": 20.0, - "layout": "horizontal", - "gap": 1.0, - "padding": [ - 0.0, - 4.0 - ], - "alignItems": "center", - "clipContent": false, - "cornerRadius": 4.0, - "children": [ - { - "type": "icon_font", - "id": "n655", - "name": "git-branch", - "iconFontName": "git-branch", - "width": 14.0, - "height": 14.0, - "fill": [ - { - "type": "solid", - "color": "#9d9d9d" - } - ] - }, - { - "type": "frame", - "id": "n656", - "name": "Count", - "width": 14.0, - "height": 14.0, - "layout": "horizontal", - "gap": 0.0, - "justifyContent": "center", - "alignItems": "center", - "clipContent": false, - "cornerRadius": 7.0, - "fill": [ - { - "type": "solid", - "color": "#616161" - } - ], - "children": [ - { - "type": "text", - "id": "n657", - "name": "1", - "width": "fit_content", - "height": "fit_content", - "content": "1", - "fontFamily": "PingFang SC", - "fontSize": 9.0, - "fontWeight": 700, - "lineHeight": 1.5555555555555556, - "textGrowth": "auto", - "fill": [ - { - "type": "solid", - "color": "#f8f8f8" - } - ] - } - ] - } - ] } ] } @@ -11138,7 +11342,7 @@ }, { "type": "frame", - "id": "n658", + "id": "n671", "name": "Lines 22–34", "width": "fill_container", "height": "fit_content", @@ -11149,7 +11353,7 @@ "children": [ { "type": "frame", - "id": "n659", + "id": "n672", "name": "Code", "width": 600.0, "height": "fill_container", @@ -11165,7 +11369,7 @@ "children": [ { "type": "frame", - "id": "n660", + "id": "n673", "name": "Line 22", "width": "fill_container", "height": 20.0, @@ -11176,7 +11380,7 @@ "children": [ { "type": "frame", - "id": "n661", + "id": "n674", "name": "Number", "width": 44.0, "height": 20.0, @@ -11188,7 +11392,7 @@ "children": [ { "type": "text", - "id": "n662", + "id": "n675", "name": "22", "width": "fit_content", "height": "fit_content", @@ -11209,7 +11413,7 @@ }, { "type": "frame", - "id": "n663", + "id": "n676", "name": "Margin", "width": 41.66, "height": 20.0, @@ -11217,7 +11421,7 @@ }, { "type": "text", - "id": "n664", + "id": "n677", "name": "return (", "width": "fit_content", "height": "fit_content", @@ -11251,7 +11455,7 @@ }, { "type": "frame", - "id": "n665", + "id": "n678", "name": "Line 23", "width": "fill_container", "height": 20.0, @@ -11262,7 +11466,7 @@ "children": [ { "type": "frame", - "id": "n666", + "id": "n679", "name": "Number", "width": 44.0, "height": 20.0, @@ -11274,7 +11478,7 @@ "children": [ { "type": "text", - "id": "n667", + "id": "n680", "name": "23", "width": "fit_content", "height": "fit_content", @@ -11295,7 +11499,7 @@ }, { "type": "frame", - "id": "n668", + "id": "n681", "name": "Margin", "width": 57.32, "height": 20.0, @@ -11303,7 +11507,7 @@ }, { "type": "text", - "id": "n669", + "id": "n682", "name": "
router.replace(from && ", "width": "fit_content", "height": "fit_content", @@ -12079,7 +12283,7 @@ }, { "type": "frame", - "id": "n705", + "id": "n718", "name": "Line 31", "width": "fill_container", "height": 20.0, @@ -12090,7 +12294,7 @@ "children": [ { "type": "frame", - "id": "n706", + "id": "n719", "name": "Number", "width": 44.0, "height": 20.0, @@ -12102,7 +12306,7 @@ "children": [ { "type": "text", - "id": "n707", + "id": "n720", "name": "31", "width": "fit_content", "height": "fit_content", @@ -12123,7 +12327,7 @@ }, { "type": "frame", - "id": "n708", + "id": "n721", "name": "Margin", "width": 88.64, "height": 20.0, @@ -12131,7 +12335,7 @@ }, { "type": "text", - "id": "n709", + "id": "n722", "name": "/>", "width": "fit_content", "height": "fit_content", @@ -12152,7 +12356,7 @@ }, { "type": "frame", - "id": "n710", + "id": "n723", "name": "Line 32", "width": "fill_container", "height": 20.0, @@ -12163,7 +12367,7 @@ "children": [ { "type": "frame", - "id": "n711", + "id": "n724", "name": "Number", "width": 44.0, "height": 20.0, @@ -12175,7 +12379,7 @@ "children": [ { "type": "text", - "id": "n712", + "id": "n725", "name": "32", "width": "fit_content", "height": "fit_content", @@ -12196,7 +12400,7 @@ }, { "type": "frame", - "id": "n713", + "id": "n726", "name": "Margin", "width": 72.98, "height": 20.0, @@ -12204,7 +12408,7 @@ }, { "type": "text", - "id": "n714", + "id": "n727", "name": "", "width": "fit_content", "height": "fit_content", @@ -12238,7 +12442,7 @@ }, { "type": "frame", - "id": "n715", + "id": "n728", "name": "Line 33", "width": "fill_container", "height": 20.0, @@ -12249,7 +12453,7 @@ "children": [ { "type": "frame", - "id": "n716", + "id": "n729", "name": "Number", "width": 44.0, "height": 20.0, @@ -12261,7 +12465,7 @@ "children": [ { "type": "text", - "id": "n717", + "id": "n730", "name": "33", "width": "fit_content", "height": "fit_content", @@ -12282,7 +12486,7 @@ }, { "type": "frame", - "id": "n718", + "id": "n731", "name": "Margin", "width": 57.32, "height": 20.0, @@ -12290,7 +12494,7 @@ }, { "type": "text", - "id": "n719", + "id": "n732", "name": "
", "width": "fit_content", "height": "fit_content", @@ -12324,7 +12528,7 @@ }, { "type": "frame", - "id": "n720", + "id": "n733", "name": "Line 34", "width": "fill_container", "height": 20.0, @@ -12335,7 +12539,7 @@ "children": [ { "type": "frame", - "id": "n721", + "id": "n734", "name": "Number", "width": 44.0, "height": 20.0, @@ -12347,7 +12551,7 @@ "children": [ { "type": "text", - "id": "n722", + "id": "n735", "name": "34", "width": "fit_content", "height": "fit_content", @@ -12368,7 +12572,7 @@ }, { "type": "frame", - "id": "n723", + "id": "n736", "name": "Margin", "width": 41.66, "height": 20.0, @@ -12376,7 +12580,7 @@ }, { "type": "text", - "id": "n724", + "id": "n737", "name": ");", "width": "fit_content", "height": "fit_content", @@ -12408,7 +12612,7 @@ }, { "type": "rectangle", - "id": "n725", + "id": "n738", "name": "Sash", "width": 1.0, "height": "fill_container", @@ -12422,7 +12626,7 @@ }, { "type": "frame", - "id": "n726", + "id": "n739", "name": "Preview", "width": "fill_container", "height": "fill_container", @@ -12438,7 +12642,7 @@ "children": [ { "type": "frame", - "id": "n727", + "id": "n740", "name": "Level", "width": "fill_container", "height": "fit_content", @@ -12449,7 +12653,7 @@ "children": [ { "type": "frame", - "id": "n728", + "id": "n741", "name": "Guide", "width": 12.0, "height": "fill_container", @@ -12460,7 +12664,7 @@ "children": [ { "type": "rectangle", - "id": "n729", + "id": "n742", "name": "Line", "width": 1.0, "height": "fill_container", @@ -12476,7 +12680,7 @@ }, { "type": "frame", - "id": "n730", + "id": "n743", "name": "Cards", "width": "fill_container", "height": "fit_content", @@ -12492,7 +12696,7 @@ "children": [ { "type": "frame", - "id": "n731", + "id": "n744", "name": "渲染输出 / DesktopLoginPage", "width": "fill_container", "height": "fit_content", @@ -12525,7 +12729,7 @@ "children": [ { "type": "frame", - "id": "n732", + "id": "n745", "name": "Fold", "width": 14.0, "height": 20.0, @@ -12538,7 +12742,7 @@ }, { "type": "frame", - "id": "n733", + "id": "n746", "name": "Concepts", "width": 20.0, "height": 20.0, @@ -12549,7 +12753,7 @@ "children": [ { "type": "frame", - "id": "n734", + "id": "n747", "name": "Concept / 渲染输出", "width": 20.0, "height": 20.0, @@ -12561,7 +12765,7 @@ "children": [ { "type": "icon_font", - "id": "n735", + "id": "n748", "name": "layout-template", "iconFontName": "layout-template", "width": 16.0, @@ -12579,7 +12783,7 @@ }, { "type": "frame", - "id": "n736", + "id": "n749", "name": "Content", "width": "fill_container", "height": "fit_content", @@ -12589,7 +12793,7 @@ "children": [ { "type": "frame", - "id": "n737", + "id": "n750", "name": "Outline", "width": "fill_container", "height": "fit_content", @@ -12599,7 +12803,7 @@ "children": [ { "type": "frame", - "id": "n738", + "id": "n751", "name": "Item", "width": "fill_container", "height": "fit_content", @@ -12610,7 +12814,7 @@ "children": [ { "type": "frame", - "id": "n739", + "id": "n752", "name": "Fold", "width": 14.0, "height": 20.0, @@ -12622,7 +12826,7 @@ "children": [ { "type": "icon_font", - "id": "n740", + "id": "n753", "name": "chevron-down", "iconFontName": "chevron-down", "width": 14.0, @@ -12638,7 +12842,7 @@ }, { "type": "frame", - "id": "n741", + "id": "n754", "name": "Line", "width": "fill_container", "height": 20.0, @@ -12649,7 +12853,7 @@ "children": [ { "type": "text", - "id": "n742", + "id": "n755", "name": "
", "width": "fit_content", "height": "fit_content", @@ -12668,7 +12872,7 @@ }, { "type": "frame", - "id": "n743", + "id": "n756", "name": "Classes", "width": "fit_content", "height": 20.0, @@ -12699,7 +12903,7 @@ "children": [ { "type": "text", - "id": "n744", + "id": "n757", "name": "样式 4 个类", "width": "fit_content", "height": "fit_content", @@ -12724,7 +12928,7 @@ }, { "type": "frame", - "id": "n745", + "id": "n758", "name": "Sub", "width": "fill_container", "height": "fit_content", @@ -12741,7 +12945,7 @@ "children": [ { "type": "rectangle", - "id": "n746", + "id": "n759", "name": "Guide", "width": 1.0, "height": "fill_container", @@ -12755,7 +12959,7 @@ }, { "type": "frame", - "id": "n747", + "id": "n760", "name": "Kids", "width": "fill_container", "height": "fit_content", @@ -12765,7 +12969,7 @@ "children": [ { "type": "frame", - "id": "n748", + "id": "n761", "name": "Outline", "width": "fill_container", "height": "fit_content", @@ -12775,7 +12979,7 @@ "children": [ { "type": "frame", - "id": "n749", + "id": "n762", "name": "Item", "width": "fill_container", "height": "fit_content", @@ -12786,7 +12990,7 @@ "children": [ { "type": "frame", - "id": "n750", + "id": "n763", "name": "Fold", "width": 14.0, "height": 20.0, @@ -12798,7 +13002,7 @@ "children": [ { "type": "icon_font", - "id": "n751", + "id": "n764", "name": "chevron-down", "iconFontName": "chevron-down", "width": 14.0, @@ -12814,7 +13018,7 @@ }, { "type": "frame", - "id": "n752", + "id": "n765", "name": "Line", "width": "fill_container", "height": 20.0, @@ -12825,7 +13029,7 @@ "children": [ { "type": "text", - "id": "n753", + "id": "n766", "name": "
", "width": "fit_content", "height": "fit_content", @@ -12844,7 +13048,7 @@ }, { "type": "frame", - "id": "n754", + "id": "n767", "name": "Classes", "width": "fit_content", "height": 20.0, @@ -12875,7 +13079,7 @@ "children": [ { "type": "text", - "id": "n755", + "id": "n768", "name": "样式 5 个类", "width": "fit_content", "height": "fit_content", @@ -12900,7 +13104,7 @@ }, { "type": "frame", - "id": "n756", + "id": "n769", "name": "Sub", "width": "fill_container", "height": "fit_content", @@ -12917,7 +13121,7 @@ "children": [ { "type": "rectangle", - "id": "n757", + "id": "n770", "name": "Guide", "width": 1.0, "height": "fill_container", @@ -12931,7 +13135,7 @@ }, { "type": "frame", - "id": "n758", + "id": "n771", "name": "Kids", "width": "fill_container", "height": "fit_content", @@ -12941,7 +13145,7 @@ "children": [ { "type": "frame", - "id": "n759", + "id": "n772", "name": "Outline", "width": "fill_container", "height": "fit_content", @@ -12951,7 +13155,7 @@ "children": [ { "type": "frame", - "id": "n760", + "id": "n773", "name": "Item", "width": "fill_container", "height": "fit_content", @@ -12962,7 +13166,7 @@ "children": [ { "type": "frame", - "id": "n761", + "id": "n774", "name": "Fold", "width": 14.0, "height": 20.0, @@ -12975,7 +13179,7 @@ }, { "type": "frame", - "id": "n762", + "id": "n775", "name": "Lines", "width": "fill_container", "height": "fit_content", @@ -12985,7 +13189,7 @@ "children": [ { "type": "frame", - "id": "n763", + "id": "n776", "name": "Line", "width": "fill_container", "height": "fit_content", @@ -13002,7 +13206,7 @@ "children": [ { "type": "text", - "id": "n764", + "id": "n777", "name": "", "width": "fit_content", "height": "fit_content", @@ -13021,7 +13225,7 @@ }, { "type": "text", - "id": "n765", + "id": "n778", "name": "activeTab=activeTab", "width": "fit_content", "height": "fit_content", @@ -13054,7 +13258,7 @@ }, { "type": "text", - "id": "n766", + "id": "n779", "name": "onTabChange=setActiveTab", "width": "fit_content", "height": "fit_content", @@ -13089,7 +13293,7 @@ }, { "type": "frame", - "id": "n767", + "id": "n780", "name": "Line", "width": "fill_container", "height": "fit_content", @@ -13106,7 +13310,7 @@ "children": [ { "type": "text", - "id": "n768", + "id": "n781", "name": "passwordView=passwordView", "width": "fit_content", "height": "fit_content", @@ -13139,7 +13343,7 @@ }, { "type": "text", - "id": "n769", + "id": "n782", "name": "onPasswordView=setPasswordView", "width": "fit_content", "height": "fit_content", @@ -13174,7 +13378,7 @@ }, { "type": "frame", - "id": "n770", + "id": "n783", "name": "Line", "width": "fill_container", "height": "fit_content", @@ -13191,7 +13395,7 @@ "children": [ { "type": "text", - "id": "n771", + "id": "n784", "name": "onSuccess=() => router.replace(如果 from 并", "width": "fit_content", "height": "fit_content", @@ -13329,7 +13533,7 @@ }, { "type": "frame", - "id": "n772", + "id": "n785", "name": "Tools", "width": "fit_content", "height": 20.0, @@ -13340,7 +13544,7 @@ "children": [ { "type": "frame", - "id": "n773", + "id": "n786", "name": "sparkles", "width": 22.0, "height": 20.0, @@ -13353,7 +13557,7 @@ "children": [ { "type": "icon_font", - "id": "n774", + "id": "n787", "name": "sparkles", "iconFontName": "sparkles", "width": 14.0, @@ -13369,7 +13573,7 @@ }, { "type": "frame", - "id": "n775", + "id": "n788", "name": "pencil", "width": 22.0, "height": 20.0, @@ -13382,7 +13586,7 @@ "children": [ { "type": "icon_font", - "id": "n776", + "id": "n789", "name": "pencil", "iconFontName": "pencil", "width": 14.0, @@ -13410,7 +13614,7 @@ }, { "type": "frame", - "id": "n777", + "id": "n790", "name": "Lines 35–37", "width": "fill_container", "height": "fit_content", @@ -13421,7 +13625,7 @@ "children": [ { "type": "frame", - "id": "n778", + "id": "n791", "name": "Code", "width": 600.0, "height": "fill_container", @@ -13437,7 +13641,7 @@ "children": [ { "type": "frame", - "id": "n779", + "id": "n792", "name": "Line 35", "width": "fill_container", "height": 20.0, @@ -13448,7 +13652,7 @@ "children": [ { "type": "frame", - "id": "n780", + "id": "n793", "name": "Number", "width": 44.0, "height": 20.0, @@ -13460,7 +13664,7 @@ "children": [ { "type": "text", - "id": "n781", + "id": "n794", "name": "35", "width": "fit_content", "height": "fit_content", @@ -13481,7 +13685,7 @@ }, { "type": "frame", - "id": "n782", + "id": "n795", "name": "Margin", "width": 26.0, "height": 20.0, @@ -13489,7 +13693,7 @@ }, { "type": "text", - "id": "n783", + "id": "n796", "name": "};", "width": "fit_content", "height": "fit_content", @@ -13519,7 +13723,7 @@ }, { "type": "frame", - "id": "n784", + "id": "n797", "name": "Line 36", "width": "fill_container", "height": 20.0, @@ -13530,7 +13734,7 @@ "children": [ { "type": "frame", - "id": "n785", + "id": "n798", "name": "Number", "width": 44.0, "height": 20.0, @@ -13542,7 +13746,7 @@ "children": [ { "type": "text", - "id": "n786", + "id": "n799", "name": "36", "width": "fit_content", "height": "fit_content", @@ -13563,7 +13767,7 @@ }, { "type": "frame", - "id": "n787", + "id": "n800", "name": "Margin", "width": 26.0, "height": 20.0, @@ -13573,7 +13777,7 @@ }, { "type": "frame", - "id": "n788", + "id": "n801", "name": "Line 37", "width": "fill_container", "height": 20.0, @@ -13584,7 +13788,7 @@ "children": [ { "type": "frame", - "id": "n789", + "id": "n802", "name": "Number", "width": 44.0, "height": 20.0, @@ -13596,7 +13800,7 @@ "children": [ { "type": "text", - "id": "n790", + "id": "n803", "name": "37", "width": "fit_content", "height": "fit_content", @@ -13617,7 +13821,7 @@ }, { "type": "frame", - "id": "n791", + "id": "n804", "name": "Margin", "width": 26.0, "height": 20.0, @@ -13625,7 +13829,7 @@ }, { "type": "text", - "id": "n792", + "id": "n805", "name": "export default DesktopLoginPage;", "width": "fit_content", "height": "fit_content", @@ -13673,7 +13877,7 @@ }, { "type": "rectangle", - "id": "n793", + "id": "n806", "name": "Sash", "width": 1.0, "height": "fill_container", @@ -13687,7 +13891,7 @@ }, { "type": "frame", - "id": "n794", + "id": "n807", "name": "Preview", "width": "fill_container", "height": "fill_container", @@ -13703,7 +13907,7 @@ "children": [ { "type": "frame", - "id": "n795", + "id": "n808", "name": "Level", "width": "fill_container", "height": "fill_container", @@ -13719,7 +13923,7 @@ }, { "type": "frame", - "id": "n796", + "id": "n809", "name": "End", "width": "fill_container", "height": 28.0, @@ -13730,7 +13934,7 @@ "children": [ { "type": "frame", - "id": "n797", + "id": "n810", "name": "Code", "width": 600.0, "height": 28.0, @@ -13738,7 +13942,7 @@ }, { "type": "rectangle", - "id": "n798", + "id": "n811", "name": "Sash", "width": 1.0, "height": "fill_container", @@ -13758,7 +13962,7 @@ }, { "type": "frame", - "id": "n799", + "id": "n812", "name": "Status", "width": "fill_container", "height": 26.0, @@ -13780,7 +13984,7 @@ "children": [ { "type": "frame", - "id": "n800", + "id": "n813", "name": "Branch", "width": "fit_content", "height": "fit_content", @@ -13791,7 +13995,7 @@ "children": [ { "type": "icon_font", - "id": "n801", + "id": "n814", "name": "git-branch", "iconFontName": "git-branch", "width": 13.0, @@ -13805,7 +14009,7 @@ }, { "type": "text", - "id": "n802", + "id": "n815", "name": "master", "width": "fit_content", "height": "fit_content", @@ -13826,7 +14030,7 @@ }, { "type": "frame", - "id": "n803", + "id": "n816", "name": "Right", "width": "fit_content", "height": "fit_content", @@ -13837,7 +14041,7 @@ "children": [ { "type": "text", - "id": "n804", + "id": "n817", "name": "代码阅读", "width": "fit_content", "height": "fit_content", @@ -13856,7 +14060,7 @@ }, { "type": "text", - "id": "n805", + "id": "n818", "name": "TypeScript JSX", "width": "fit_content", "height": "fit_content", @@ -13881,7 +14085,7 @@ }, { "type": "frame", - "id": "n806", + "id": "n819", "name": "Prototype / React 状态 · 其他写法", "x": 1780.0, "y": 0.0, @@ -13899,7 +14103,7 @@ "children": [ { "type": "frame", - "id": "n807", + "id": "n820", "name": "Title bar", "width": "fill_container", "height": 36.0, @@ -13915,7 +14119,7 @@ "children": [ { "type": "frame", - "id": "n808", + "id": "n821", "name": "Lights", "width": "fit_content", "height": "fit_content", @@ -13926,7 +14130,7 @@ "children": [ { "type": "ellipse", - "id": "n809", + "id": "n822", "width": 12.0, "height": 12.0, "fill": [ @@ -13938,7 +14142,7 @@ }, { "type": "ellipse", - "id": "n810", + "id": "n823", "width": 12.0, "height": 12.0, "fill": [ @@ -13950,7 +14154,7 @@ }, { "type": "ellipse", - "id": "n811", + "id": "n824", "width": 12.0, "height": 12.0, "fill": [ @@ -13964,7 +14168,7 @@ }, { "type": "text", - "id": "n812", + "id": "n825", "name": "web — examples.tsx", "width": "fit_content", "height": "fit_content", @@ -13983,7 +14187,7 @@ }, { "type": "frame", - "id": "n813", + "id": "n826", "name": "Balance", "width": 52.0, "height": 12.0, @@ -13993,7 +14197,7 @@ }, { "type": "frame", - "id": "n814", + "id": "n827", "name": "Body", "width": "fill_container", "height": "fit_content", @@ -14010,7 +14214,7 @@ "children": [ { "type": "frame", - "id": "n815", + "id": "n828", "name": "Activity bar", "width": 48.0, "height": "fit_content", @@ -14026,7 +14230,7 @@ "children": [ { "type": "frame", - "id": "n816", + "id": "n829", "name": "Item / files", "width": 48.0, "height": 42.0, @@ -14038,7 +14242,7 @@ "children": [ { "type": "icon_font", - "id": "n817", + "id": "n830", "name": "files", "iconFontName": "files", "width": 22.0, @@ -14054,7 +14258,7 @@ }, { "type": "frame", - "id": "n818", + "id": "n831", "name": "Item / search", "width": 48.0, "height": 42.0, @@ -14066,7 +14270,7 @@ "children": [ { "type": "icon_font", - "id": "n819", + "id": "n832", "name": "search", "iconFontName": "search", "width": 22.0, @@ -14082,7 +14286,7 @@ }, { "type": "frame", - "id": "n820", + "id": "n833", "name": "Item / git-branch", "width": 48.0, "height": 42.0, @@ -14094,7 +14298,7 @@ "children": [ { "type": "icon_font", - "id": "n821", + "id": "n834", "name": "git-branch", "iconFontName": "git-branch", "width": 22.0, @@ -14110,7 +14314,7 @@ }, { "type": "frame", - "id": "n822", + "id": "n835", "name": "Item / play", "width": 48.0, "height": 42.0, @@ -14122,7 +14326,7 @@ "children": [ { "type": "icon_font", - "id": "n823", + "id": "n836", "name": "play", "iconFontName": "play", "width": 22.0, @@ -14138,7 +14342,7 @@ }, { "type": "frame", - "id": "n824", + "id": "n837", "name": "Item / monitor", "width": 48.0, "height": 42.0, @@ -14150,7 +14354,7 @@ "children": [ { "type": "icon_font", - "id": "n825", + "id": "n838", "name": "monitor", "iconFontName": "monitor", "width": 22.0, @@ -14166,7 +14370,7 @@ }, { "type": "frame", - "id": "n826", + "id": "n839", "name": "Item / blocks", "width": 48.0, "height": 42.0, @@ -14178,7 +14382,7 @@ "children": [ { "type": "icon_font", - "id": "n827", + "id": "n840", "name": "blocks", "iconFontName": "blocks", "width": 22.0, @@ -14194,7 +14398,7 @@ }, { "type": "frame", - "id": "n828", + "id": "n841", "name": "Item / rocket", "width": 48.0, "height": 42.0, @@ -14206,7 +14410,7 @@ "children": [ { "type": "icon_font", - "id": "n829", + "id": "n842", "name": "rocket", "iconFontName": "rocket", "width": 22.0, @@ -14222,7 +14426,7 @@ }, { "type": "frame", - "id": "n830", + "id": "n843", "name": "Item / book-open-text", "width": 48.0, "height": 42.0, @@ -14234,7 +14438,7 @@ "children": [ { "type": "rectangle", - "id": "n831", + "id": "n844", "name": "Active bar", "width": 2.0, "height": 42.0, @@ -14248,7 +14452,7 @@ }, { "type": "icon_font", - "id": "n832", + "id": "n845", "name": "book-open-text", "iconFontName": "book-open-text", "width": 22.0, @@ -14266,7 +14470,7 @@ }, { "type": "frame", - "id": "n833", + "id": "n846", "name": "Sidebar", "width": 250.0, "height": "fit_content", @@ -14282,7 +14486,7 @@ "children": [ { "type": "frame", - "id": "n834", + "id": "n847", "name": "Header", "width": "fill_container", "height": 34.0, @@ -14300,7 +14504,7 @@ "children": [ { "type": "text", - "id": "n835", + "id": "n848", "name": "代码阅读", "width": "fit_content", "height": "fit_content", @@ -14319,7 +14523,7 @@ }, { "type": "frame", - "id": "n836", + "id": "n849", "name": "Actions", "width": "fit_content", "height": "fit_content", @@ -14330,7 +14534,7 @@ "children": [ { "type": "icon_font", - "id": "n837", + "id": "n850", "name": "git-pull-request", "iconFontName": "git-pull-request", "width": 14.0, @@ -14344,7 +14548,7 @@ }, { "type": "icon_font", - "id": "n838", + "id": "n851", "name": "file-plus", "iconFontName": "file-plus", "width": 14.0, @@ -14358,7 +14562,7 @@ }, { "type": "icon_font", - "id": "n839", + "id": "n852", "name": "refresh-cw", "iconFontName": "refresh-cw", "width": 14.0, @@ -14376,7 +14580,7 @@ }, { "type": "frame", - "id": "n840", + "id": "n853", "name": "Tree", "width": "fill_container", "height": "fit_content", @@ -14392,7 +14596,7 @@ "children": [ { "type": "frame", - "id": "n841", + "id": "n854", "name": "src", "width": "fill_container", "height": 26.0, @@ -14409,7 +14613,7 @@ "children": [ { "type": "icon_font", - "id": "n842", + "id": "n855", "name": "chevron-down", "iconFontName": "chevron-down", "width": 14.0, @@ -14423,7 +14627,7 @@ }, { "type": "icon_font", - "id": "n843", + "id": "n856", "name": "folder", "iconFontName": "folder", "width": 15.0, @@ -14437,7 +14641,7 @@ }, { "type": "text", - "id": "n844", + "id": "n857", "name": "src", "width": "fit_content", "height": "fit_content", @@ -14458,7 +14662,7 @@ }, { "type": "frame", - "id": "n845", + "id": "n858", "name": "examples.tsx", "width": "fill_container", "height": 26.0, @@ -14481,7 +14685,7 @@ "children": [ { "type": "frame", - "id": "n846", + "id": "n859", "name": "Twisty", "width": 14.0, "height": 14.0, @@ -14489,7 +14693,7 @@ }, { "type": "icon_font", - "id": "n847", + "id": "n860", "name": "atom", "iconFontName": "atom", "width": 14.0, @@ -14503,7 +14707,7 @@ }, { "type": "text", - "id": "n848", + "id": "n861", "name": "examples.tsx", "width": "fit_content", "height": "fit_content", @@ -14528,7 +14732,7 @@ }, { "type": "frame", - "id": "n849", + "id": "n862", "name": "Editor", "width": "fill_container", "height": "fit_content", @@ -14544,7 +14748,7 @@ "children": [ { "type": "frame", - "id": "n850", + "id": "n863", "name": "Group heads", "width": "fill_container", "height": "fit_content", @@ -14555,223 +14759,13 @@ "children": [ { "type": "frame", - "id": "n851", + "id": "n864", "name": "Editor group 1", "width": 600.0, "height": "fit_content", "layout": "vertical", "gap": 0.0, "clipContent": false, - "children": [ - { - "type": "frame", - "id": "n852", - "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": "n853", - "name": "Tab", - "width": 140.0, - "height": "fill_container", - "layout": "vertical", - "gap": 0.0, - "clipContent": false, - "fill": [ - { - "type": "solid", - "color": "#1f1f1f" - } - ], - "children": [ - { - "type": "rectangle", - "id": "n854", - "name": "Active", - "width": "fill_container", - "height": 2.0, - "fill": [ - { - "type": "solid", - "color": "#1f1f1f" - } - ], - "children": [] - }, - { - "type": "frame", - "id": "n855", - "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": "n856", - "name": "atom", - "iconFontName": "atom", - "width": 14.0, - "height": 14.0, - "fill": [ - { - "type": "solid", - "color": "#519aba" - } - ] - }, - { - "type": "text", - "id": "n857", - "name": "examples.tsx", - "width": "fit_content", - "height": "fit_content", - "content": "examples.tsx", - "fontFamily": "PingFang SC", - "fontSize": 13.0, - "fontWeight": 400, - "lineHeight": 1.5384615384615383, - "textGrowth": "auto", - "fill": [ - { - "type": "solid", - "color": "#cccccc" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "n858", - "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": "n859", - "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": "n860", - "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": "n861", - "name": "examples.tsx", - "width": "fit_content", - "height": "fit_content", - "content": "examples.tsx", - "fontFamily": "PingFang SC", - "fontSize": 12.0, - "fontWeight": 400, - "lineHeight": 1.6666666666666667, - "textGrowth": "auto", - "fill": [ - { - "type": "solid", - "color": "#cccccc" - } - ] - } - ] - }, - { - "type": "frame", - "id": "n862", - "name": "Filter room", - "width": "fill_container", - "height": 36.0, - "children": [] - } - ] - }, - { - "type": "rectangle", - "id": "n863", - "name": "Sash", - "width": 1.0, - "height": "fill_container", - "fill": [ - { - "type": "solid", - "color": "#2b2b2b" - } - ], - "children": [] - }, - { - "type": "frame", - "id": "n864", - "name": "Editor group 2", - "width": "fill_container", - "height": "fit_content", - "layout": "vertical", - "gap": 0.0, - "clipContent": false, "children": [ { "type": "frame", @@ -14816,7 +14810,7 @@ "fill": [ { "type": "solid", - "color": "#0078d4" + "color": "#1f1f1f" } ], "children": [] @@ -14862,6 +14856,216 @@ "fontWeight": 400, "lineHeight": 1.5384615384615383, "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "n871", + "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": "n872", + "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": "n873", + "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": "n874", + "name": "examples.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "examples.tsx", + "fontFamily": "PingFang SC", + "fontSize": 12.0, + "fontWeight": 400, + "lineHeight": 1.6666666666666667, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#cccccc" + } + ] + } + ] + }, + { + "type": "frame", + "id": "n875", + "name": "Filter room", + "width": "fill_container", + "height": 36.0, + "children": [] + } + ] + }, + { + "type": "rectangle", + "id": "n876", + "name": "Sash", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#2b2b2b" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n877", + "name": "Editor group 2", + "width": "fill_container", + "height": "fit_content", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n878", + "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": "n879", + "name": "Tab", + "width": 140.0, + "height": "fill_container", + "layout": "vertical", + "gap": 0.0, + "clipContent": false, + "fill": [ + { + "type": "solid", + "color": "#1f1f1f" + } + ], + "children": [ + { + "type": "rectangle", + "id": "n880", + "name": "Active", + "width": "fill_container", + "height": 2.0, + "fill": [ + { + "type": "solid", + "color": "#0078d4" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n881", + "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": "n882", + "name": "atom", + "iconFontName": "atom", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#519aba" + } + ] + }, + { + "type": "text", + "id": "n883", + "name": "examples.tsx", + "width": "fit_content", + "height": "fit_content", + "content": "examples.tsx", + "fontFamily": "PingFang SC", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", "fill": [ { "type": "solid", @@ -14875,7 +15079,7 @@ }, { "type": "frame", - "id": "n871", + "id": "n884", "name": "Mode", "width": "fit_content", "height": "fit_content", @@ -14906,7 +15110,7 @@ "children": [ { "type": "frame", - "id": "n872", + "id": "n885", "name": "Seg / 编辑", "width": "fit_content", "height": "fit_content", @@ -14922,7 +15126,7 @@ "children": [ { "type": "icon_font", - "id": "n873", + "id": "n886", "name": "pencil", "iconFontName": "pencil", "width": 13.0, @@ -14936,7 +15140,7 @@ }, { "type": "text", - "id": "n874", + "id": "n887", "name": "编辑", "width": "fit_content", "height": "fit_content", @@ -14957,7 +15161,7 @@ }, { "type": "frame", - "id": "n875", + "id": "n888", "name": "Seg / 预览", "width": "fit_content", "height": "fit_content", @@ -14979,7 +15183,7 @@ "children": [ { "type": "icon_font", - "id": "n876", + "id": "n889", "name": "eye", "iconFontName": "eye", "width": 13.0, @@ -14993,7 +15197,7 @@ }, { "type": "text", - "id": "n877", + "id": "n890", "name": "预览", "width": "fit_content", "height": "fit_content", @@ -15016,7 +15220,7 @@ }, { "type": "frame", - "id": "n878", + "id": "n891", "name": "Pad", "width": 8.0, "height": 8.0, @@ -15026,7 +15230,7 @@ }, { "type": "frame", - "id": "n879", + "id": "n892", "name": "Breadcrumb", "width": "fill_container", "height": "fit_content", @@ -15041,7 +15245,7 @@ "children": [ { "type": "text", - "id": "n880", + "id": "n893", "name": "src", "width": "fit_content", "height": "fit_content", @@ -15060,7 +15264,7 @@ }, { "type": "text", - "id": "n881", + "id": "n894", "name": "/", "width": "fit_content", "height": "fit_content", @@ -15079,7 +15283,7 @@ }, { "type": "text", - "id": "n882", + "id": "n895", "name": "examples.tsx", "width": "fit_content", "height": "fit_content", @@ -15100,7 +15304,7 @@ }, { "type": "frame", - "id": "n883", + "id": "n896", "name": "Filter", "width": "fill_container", "height": 36.0, @@ -15115,7 +15319,7 @@ "children": [ { "type": "text", - "id": "n884", + "id": "n897", "name": "筛选", "width": "fit_content", "height": "fit_content", @@ -15134,7 +15338,7 @@ }, { "type": "frame", - "id": "n885", + "id": "n898", "name": "Chip / 种类", "width": "fit_content", "height": 24.0, @@ -15156,7 +15360,7 @@ "children": [ { "type": "text", - "id": "n886", + "id": "n899", "name": "种类", "width": "fit_content", "height": "fit_content", @@ -15175,7 +15379,7 @@ }, { "type": "icon_font", - "id": "n887", + "id": "n900", "name": "chevron-down", "iconFontName": "chevron-down", "width": 12.0, @@ -15191,7 +15395,7 @@ }, { "type": "frame", - "id": "n888", + "id": "n901", "name": "Chip / 访问级别", "width": "fit_content", "height": 24.0, @@ -15213,7 +15417,7 @@ "children": [ { "type": "text", - "id": "n889", + "id": "n902", "name": "访问级别", "width": "fit_content", "height": "fit_content", @@ -15232,7 +15436,7 @@ }, { "type": "icon_font", - "id": "n890", + "id": "n903", "name": "chevron-down", "iconFontName": "chevron-down", "width": 12.0, @@ -15248,7 +15452,7 @@ }, { "type": "frame", - "id": "n891", + "id": "n904", "name": "Spacer", "width": "fill_container", "height": 8.0, @@ -15256,7 +15460,7 @@ }, { "type": "text", - "id": "n892", + "id": "n905", "name": "3 块", "width": "fit_content", "height": "fit_content", @@ -15281,7 +15485,7 @@ }, { "type": "frame", - "id": "n893", + "id": "n906", "name": "Lines 1–1", "width": "fill_container", "height": "fit_content", @@ -15292,7 +15496,7 @@ "children": [ { "type": "frame", - "id": "n894", + "id": "n907", "name": "Code", "width": 600.0, "height": "fill_container", @@ -15308,7 +15512,7 @@ "children": [ { "type": "frame", - "id": "n895", + "id": "n908", "name": "Line 1", "width": "fill_container", "height": 20.0, @@ -15319,7 +15523,7 @@ "children": [ { "type": "frame", - "id": "n896", + "id": "n909", "name": "Number", "width": 44.0, "height": 20.0, @@ -15331,7 +15535,7 @@ "children": [ { "type": "text", - "id": "n897", + "id": "n910", "name": "1", "width": "fit_content", "height": "fit_content", @@ -15352,7 +15556,7 @@ }, { "type": "frame", - "id": "n898", + "id": "n911", "name": "Margin", "width": 26.0, "height": 20.0, @@ -15360,7 +15564,7 @@ }, { "type": "text", - "id": "n899", + "id": "n912", "name": "const [open, setOpen] = useState(false)", "width": "fit_content", "height": "fit_content", @@ -15432,7 +15636,7 @@ }, { "type": "rectangle", - "id": "n900", + "id": "n913", "name": "Sash", "width": 1.0, "height": "fill_container", @@ -15446,7 +15650,7 @@ }, { "type": "frame", - "id": "n901", + "id": "n914", "name": "Preview", "width": "fill_container", "height": "fill_container", @@ -15462,7 +15666,7 @@ "children": [ { "type": "frame", - "id": "n902", + "id": "n915", "name": "Level", "width": "fill_container", "height": "fill_container", @@ -15473,7 +15677,7 @@ "children": [ { "type": "frame", - "id": "n903", + "id": "n916", "name": "Cards", "width": "fill_container", "height": "fit_content", @@ -15489,7 +15693,7 @@ "children": [ { "type": "frame", - "id": "n904", + "id": "n917", "name": "状态 / open", "width": "fill_container", "height": "fit_content", @@ -15522,7 +15726,7 @@ "children": [ { "type": "frame", - "id": "n905", + "id": "n918", "name": "Fold", "width": 14.0, "height": 20.0, @@ -15535,7 +15739,7 @@ }, { "type": "frame", - "id": "n906", + "id": "n919", "name": "Concepts", "width": 42.0, "height": 20.0, @@ -15546,7 +15750,7 @@ "children": [ { "type": "frame", - "id": "n907", + "id": "n920", "name": "Concept / 变量", "width": 20.0, "height": 20.0, @@ -15558,7 +15762,7 @@ "children": [ { "type": "icon_font", - "id": "n908", + "id": "n921", "name": "variable", "iconFontName": "variable", "width": 16.0, @@ -15574,7 +15778,7 @@ }, { "type": "frame", - "id": "n909", + "id": "n922", "name": "Concept / React 状态", "width": 20.0, "height": 20.0, @@ -15586,7 +15790,7 @@ "children": [ { "type": "icon_font", - "id": "n910", + "id": "n923", "name": "toggle-right", "iconFontName": "toggle-right", "width": 16.0, @@ -15604,7 +15808,7 @@ }, { "type": "frame", - "id": "n911", + "id": "n924", "name": "Content", "width": "fill_container", "height": "fit_content", @@ -15614,7 +15818,7 @@ "children": [ { "type": "frame", - "id": "n912", + "id": "n925", "name": "Prop / 名称", "width": "fill_container", "height": "fit_content", @@ -15625,7 +15829,7 @@ "children": [ { "type": "frame", - "id": "n913", + "id": "n926", "name": "Key", "width": 76.0, "height": 20.0, @@ -15636,7 +15840,7 @@ "children": [ { "type": "icon_font", - "id": "n914", + "id": "n927", "name": "chevron-down", "iconFontName": "chevron-down", "width": 14.0, @@ -15650,7 +15854,7 @@ }, { "type": "text", - "id": "n915", + "id": "n928", "name": "名称", "width": "fit_content", "height": "fit_content", @@ -15671,7 +15875,7 @@ }, { "type": "frame", - "id": "n916", + "id": "n929", "name": "Value", "width": "fill_container", "height": "fit_content", @@ -15681,7 +15885,7 @@ "children": [ { "type": "frame", - "id": "n917", + "id": "n930", "name": "Destructure", "width": "fit_content", "height": 20.0, @@ -15692,7 +15896,7 @@ "children": [ { "type": "text", - "id": "n918", + "id": "n931", "name": "[open, setOpen]", "width": "fit_content", "height": "fit_content", @@ -15734,7 +15938,7 @@ }, { "type": "text", - "id": "n919", + "id": "n932", "name": "数组解构", "width": "fit_content", "height": "fit_content", @@ -15759,7 +15963,7 @@ }, { "type": "frame", - "id": "n920", + "id": "n933", "name": "Table wrap", "width": "fill_container", "height": "fit_content", @@ -15775,7 +15979,7 @@ "children": [ { "type": "frame", - "id": "n921", + "id": "n934", "name": "Table", "width": "fill_container", "height": "fit_content", @@ -15795,7 +15999,7 @@ "children": [ { "type": "frame", - "id": "n922", + "id": "n935", "name": "Header", "width": "fill_container", "height": "fit_content", @@ -15812,7 +16016,7 @@ "children": [ { "type": "frame", - "id": "n923", + "id": "n936", "name": "第几项", "width": 56.0, "height": "fit_content", @@ -15826,7 +16030,7 @@ "children": [ { "type": "text", - "id": "n924", + "id": "n937", "name": "第几项", "width": "fit_content", "height": "fit_content", @@ -15845,215 +16049,6 @@ } ] }, - { - "type": "rectangle", - "id": "n925", - "name": "Sep", - "width": 1.0, - "height": "fill_container", - "fill": [ - { - "type": "solid", - "color": "#3c3c3c" - } - ], - "children": [] - }, - { - "type": "frame", - "id": "n926", - "name": "名称", - "width": 74.0, - "height": "fit_content", - "layout": "vertical", - "gap": 3.0, - "padding": [ - 2.0, - 8.0 - ], - "clipContent": false, - "children": [ - { - "type": "text", - "id": "n927", - "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": "n928", - "name": "Sep", - "width": 1.0, - "height": "fill_container", - "fill": [ - { - "type": "solid", - "color": "#3c3c3c" - } - ], - "children": [] - }, - { - "type": "frame", - "id": "n929", - "name": "是什么", - "width": 448.0, - "height": "fit_content", - "layout": "vertical", - "gap": 3.0, - "padding": [ - 2.0, - 8.0 - ], - "clipContent": false, - "children": [ - { - "type": "text", - "id": "n930", - "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": "n931", - "name": "Divider", - "width": "fill_container", - "height": 1.0, - "fill": [ - { - "type": "solid", - "color": "#3c3c3c" - } - ], - "children": [] - }, - { - "type": "frame", - "id": "n932", - "name": "Row", - "width": "fill_container", - "height": "fit_content", - "layout": "horizontal", - "gap": 0.0, - "alignItems": "start", - "clipContent": false, - "children": [ - { - "type": "frame", - "id": "n933", - "name": "第几项", - "width": 56.0, - "height": "fit_content", - "layout": "vertical", - "gap": 3.0, - "padding": [ - 2.0, - 8.0 - ], - "clipContent": false, - "children": [ - { - "type": "text", - "id": "n934", - "name": "1", - "width": 12.0, - "height": "fit_content", - "content": "1", - "fontFamily": "PingFang SC", - "fontSize": 12.5, - "fontWeight": 400, - "lineHeight": 1.6, - "textGrowth": "fixed-width", - "fill": [ - { - "type": "solid", - "color": "#9d9d9d" - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "n935", - "name": "Sep", - "width": 1.0, - "height": "fill_container", - "fill": [ - { - "type": "solid", - "color": "#3c3c3c" - } - ], - "children": [] - }, - { - "type": "frame", - "id": "n936", - "name": "名称", - "width": 74.0, - "height": "fit_content", - "layout": "vertical", - "gap": 3.0, - "padding": [ - 2.0, - 8.0 - ], - "clipContent": false, - "children": [ - { - "type": "text", - "id": "n937", - "name": "open", - "width": "fit_content", - "height": "fit_content", - "content": "open", - "fontFamily": "Menlo", - "fontSize": 12.5, - "fontWeight": 400, - "lineHeight": 1.6, - "textGrowth": "auto", - "fill": [ - { - "type": "solid", - "color": "#9cdcfe" - } - ] - } - ] - }, { "type": "rectangle", "id": "n938", @@ -16071,117 +16066,6 @@ { "type": "frame", "id": "n939", - "name": "是什么", - "width": 448.0, - "height": "fit_content", - "layout": "vertical", - "gap": 3.0, - "padding": [ - 2.0, - 8.0 - ], - "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": "#cccccc" - } - ] - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "n941", - "name": "Divider", - "width": "fill_container", - "height": 1.0, - "fill": [ - { - "type": "solid", - "color": "#3c3c3c" - } - ], - "children": [] - }, - { - "type": "frame", - "id": "n942", - "name": "Row", - "width": "fill_container", - "height": "fit_content", - "layout": "horizontal", - "gap": 0.0, - "alignItems": "start", - "clipContent": false, - "children": [ - { - "type": "frame", - "id": "n943", - "name": "第几项", - "width": 56.0, - "height": "fit_content", - "layout": "vertical", - "gap": 3.0, - "padding": [ - 2.0, - 8.0 - ], - "clipContent": false, - "children": [ - { - "type": "text", - "id": "n944", - "name": "2", - "width": 12.0, - "height": "fit_content", - "content": "2", - "fontFamily": "PingFang SC", - "fontSize": 12.5, - "fontWeight": 400, - "lineHeight": 1.6, - "textGrowth": "fixed-width", - "fill": [ - { - "type": "solid", - "color": "#9d9d9d" - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "n945", - "name": "Sep", - "width": 1.0, - "height": "fill_container", - "fill": [ - { - "type": "solid", - "color": "#3c3c3c" - } - ], - "children": [] - }, - { - "type": "frame", - "id": "n946", "name": "名称", "width": 74.0, "height": "fit_content", @@ -16195,20 +16079,131 @@ "children": [ { "type": "text", - "id": "n947", - "name": "setOpen", + "id": "n940", + "name": "名称", "width": "fit_content", "height": "fit_content", - "content": "setOpen", - "fontFamily": "Menlo", - "fontSize": 12.5, + "content": "名称", + "fontFamily": "PingFang SC", + "fontSize": 12.0, "fontWeight": 400, - "lineHeight": 1.6, + "lineHeight": 1.6666666666666667, "textGrowth": "auto", "fill": [ { "type": "solid", - "color": "#dcdcaa" + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n941", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n942", + "name": "是什么", + "width": 472.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n943", + "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": "n944", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n945", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n946", + "name": "第几项", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n947", + "name": "1", + "width": 12.0, + "height": "fit_content", + "content": "1", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" } ] } @@ -16231,8 +16226,8 @@ { "type": "frame", "id": "n949", - "name": "是什么", - "width": 448.0, + "name": "名称", + "width": 74.0, "height": "fit_content", "layout": "vertical", "gap": 3.0, @@ -16245,11 +16240,11 @@ { "type": "text", "id": "n950", - "name": "修改函数", + "name": "open", "width": "fit_content", "height": "fit_content", - "content": "修改函数", - "fontFamily": "PingFang SC", + "content": "open", + "fontFamily": "Menlo", "fontSize": 12.5, "fontWeight": 400, "lineHeight": 1.6, @@ -16257,7 +16252,300 @@ "fill": [ { "type": "solid", - "color": "#cccccc" + "color": "#9cdcfe" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n951", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n952", + "name": "是什么", + "width": 472.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n953", + "name": "What", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n954", + "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": "n955", + "name": "git-branch / 谁用了这个状态", + "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": "n956", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n957", + "name": "Divider", + "width": "fill_container", + "height": 1.0, + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n958", + "name": "Row", + "width": "fill_container", + "height": "fit_content", + "layout": "horizontal", + "gap": 0.0, + "alignItems": "start", + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n959", + "name": "第几项", + "width": 56.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n960", + "name": "2", + "width": 12.0, + "height": "fit_content", + "content": "2", + "fontFamily": "PingFang SC", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "fixed-width", + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n961", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n962", + "name": "名称", + "width": 74.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n963", + "name": "setOpen", + "width": "fit_content", + "height": "fit_content", + "content": "setOpen", + "fontFamily": "Menlo", + "fontSize": 12.5, + "fontWeight": 400, + "lineHeight": 1.6, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "n964", + "name": "Sep", + "width": 1.0, + "height": "fill_container", + "fill": [ + { + "type": "solid", + "color": "#3c3c3c" + } + ], + "children": [] + }, + { + "type": "frame", + "id": "n965", + "name": "是什么", + "width": 472.0, + "height": "fit_content", + "layout": "vertical", + "gap": 3.0, + "padding": [ + 2.0, + 8.0 + ], + "clipContent": false, + "children": [ + { + "type": "frame", + "id": "n966", + "name": "What", + "width": "fit_content", + "height": 20.0, + "layout": "horizontal", + "gap": 6.0, + "alignItems": "center", + "clipContent": false, + "children": [ + { + "type": "text", + "id": "n967", + "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": "n968", + "name": "git-branch / 谁改了这个状态", + "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": "n969", + "name": "git-branch", + "iconFontName": "git-branch", + "width": 14.0, + "height": 14.0, + "fill": [ + { + "type": "solid", + "color": "#9d9d9d" + } + ] + } + ] } ] } @@ -16271,7 +16559,7 @@ }, { "type": "frame", - "id": "n951", + "id": "n970", "name": "Prop / 来自", "width": "fill_container", "height": "fit_content", @@ -16282,7 +16570,7 @@ "children": [ { "type": "frame", - "id": "n952", + "id": "n971", "name": "Key", "width": 76.0, "height": 20.0, @@ -16293,7 +16581,7 @@ "children": [ { "type": "text", - "id": "n953", + "id": "n972", "name": "来自", "width": "fit_content", "height": "fit_content", @@ -16313,21 +16601,33 @@ ] }, { - "type": "text", - "id": "n954", - "name": "useState", - "width": "fit_content", + "type": "frame", + "id": "n973", + "name": "Value", + "width": "fill_container", "height": "fit_content", - "content": "useState", - "fontFamily": "Menlo", - "fontSize": 13.0, - "fontWeight": 400, - "lineHeight": 1.5384615384615383, - "textGrowth": "auto", - "fill": [ + "layout": "vertical", + "gap": 2.0, + "clipContent": false, + "children": [ { - "type": "solid", - "color": "#dcdcaa" + "type": "text", + "id": "n974", + "name": "useState（悬停：React 内置钩子）", + "width": "fit_content", + "height": "fit_content", + "content": "useState", + "fontFamily": "Menlo", + "fontSize": 13.0, + "fontWeight": 400, + "lineHeight": 1.5384615384615383, + "textGrowth": "auto", + "fill": [ + { + "type": "solid", + "color": "#dcdcaa" + } + ] } ] } @@ -16335,7 +16635,7 @@ }, { "type": "frame", - "id": "n955", + "id": "n975", "name": "Prop / 状态类型", "width": "fill_container", "height": "fit_content", @@ -16346,7 +16646,7 @@ "children": [ { "type": "frame", - "id": "n956", + "id": "n976", "name": "Key", "width": 76.0, "height": 20.0, @@ -16357,7 +16657,7 @@ "children": [ { "type": "text", - "id": "n957", + "id": "n977", "name": "状态类型", "width": "fit_content", "height": "fit_content", @@ -16378,7 +16678,7 @@ }, { "type": "text", - "id": "n958", + "id": "n978", "name": "未标注", "width": "fit_content", "height": "fit_content", @@ -16399,7 +16699,7 @@ }, { "type": "frame", - "id": "n959", + "id": "n979", "name": "Prop / 默认值", "width": "fill_container", "height": "fit_content", @@ -16410,7 +16710,7 @@ "children": [ { "type": "frame", - "id": "n960", + "id": "n980", "name": "Key", "width": 76.0, "height": 20.0, @@ -16421,7 +16721,7 @@ "children": [ { "type": "text", - "id": "n961", + "id": "n981", "name": "默认值", "width": "fit_content", "height": "fit_content", @@ -16442,7 +16742,7 @@ }, { "type": "text", - "id": "n962", + "id": "n982", "name": "假", "width": "fit_content", "height": "fit_content", @@ -16465,7 +16765,7 @@ }, { "type": "frame", - "id": "n963", + "id": "n983", "name": "Tools", "width": "fit_content", "height": 20.0, @@ -16476,7 +16776,7 @@ "children": [ { "type": "frame", - "id": "n964", + "id": "n984", "name": "sparkles", "width": 22.0, "height": 20.0, @@ -16489,7 +16789,7 @@ "children": [ { "type": "icon_font", - "id": "n965", + "id": "n985", "name": "sparkles", "iconFontName": "sparkles", "width": 14.0, @@ -16505,7 +16805,7 @@ }, { "type": "frame", - "id": "n966", + "id": "n986", "name": "pencil", "width": 22.0, "height": 20.0, @@ -16518,7 +16818,7 @@ "children": [ { "type": "icon_font", - "id": "n967", + "id": "n987", "name": "pencil", "iconFontName": "pencil", "width": 14.0, @@ -16531,35 +16831,6 @@ ] } ] - }, - { - "type": "frame", - "id": "n968", - "name": "git-branch", - "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": "n969", - "name": "git-branch", - "iconFontName": "git-branch", - "width": 14.0, - "height": 14.0, - "fill": [ - { - "type": "solid", - "color": "#9d9d9d" - } - ] - } - ] } ] } @@ -16575,7 +16846,7 @@ }, { "type": "frame", - "id": "n970", + "id": "n988", "name": "Lines 2–2", "width": "fill_container", "height": "fit_content", @@ -16586,7 +16857,7 @@ "children": [ { "type": "frame", - "id": "n971", + "id": "n989", "name": "Code", "width": 600.0, "height": "fill_container", @@ -16602,7 +16873,7 @@ "children": [ { "type": "frame", - "id": "n972", + "id": "n990", "name": "Line 2", "width": "fill_container", "height": 20.0, @@ -16613,7 +16884,7 @@ "children": [ { "type": "frame", - "id": "n973", + "id": "n991", "name": "Number", "width": 44.0, "height": 20.0, @@ -16625,7 +16896,7 @@ "children": [ { "type": "text", - "id": "n974", + "id": "n992", "name": "2", "width": "fit_content", "height": "fit_content", @@ -16646,7 +16917,7 @@ }, { "type": "frame", - "id": "n975", + "id": "n993", "name": "Margin", "width": 26.0, "height": 20.0, @@ -16654,7 +16925,7 @@ }, { "type": "text", - "id": "n976", + "id": "n994", "name": "const [items, setItems] = useState