cruldra/superwork
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📝 docs(code-reader): React 钩子卡片原型的作用图标按分类上色

Browse Source
This commit is contained in:
cruldra committed 2026-10-16 19:07:17 +11:00
1 parent 7570701bf4
commit 9fef9b36a9
4 files changed
+22 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/prototype/code-reader/openpencil/exports/react-hooks-custom.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 514 KiB

After

Width:  |  Height:  |  Size: 514 KiB

docs/prototype/code-reader/openpencil/exports/react-hooks-panel.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

docs/prototype/code-reader/openpencil/react-hooks.js
Vendored
+9 -8
View File
@@ -813,14 +813,15 @@ function hookCard(parent, w) {
const HOOK = { label: "钩子", color: "#b180d7", icon: "fishing-hook" };
const ORIGIN = { react: "#61dafb", library: "#e5c07b", own: "#89d185" };
// React 自带钩子的作用，同 React 类型定义里钩子的分组：卡片左边第二个图标，中性灰，悬停显示名字
// React 自带钩子的作用，同 React 类型定义里钩子的分组：卡片左边第二个图标，悬停显示名字。
// 颜色借 Dark Modern 的语法色，和钩子紫分得开：状态同变量、引用同常量、性能同数字、上下文同类型、并发同字符串
const ROLE = {
state: { label: "状态", icon: "toggle-right" },
effect: { label: "副作用", icon: "zap" },
ref: { label: "引用", icon: "anchor" },
perf: { label: "性能", icon: "sigma" },
context: { label: "上下文", icon: "share-2" },
concurrent: { label: "并发", icon: "hourglass" },
state: { label: "状态", icon: "toggle-right", color: "#9cdcfe" },
effect: { label: "副作用", icon: "zap", color: "#e5c07b" },
ref: { label: "引用", icon: "anchor", color: "#4fc1ff" },
perf: { label: "性能", icon: "sigma", color: "#b5cea8" },
context: { label: "上下文", icon: "share-2", color: "#4ec9b0" },
concurrent: { label: "并发", icon: "hourglass", color: "#ce9178" },
};
// 所有钩子卡片同一个标签列宽，最长的标签是上下文的「没有外层提供时」
@@ -879,7 +880,7 @@ function hookCall(parent, w, h) {
const tint = h.own ? ORIGIN.own : h.lib ? ORIGIN.library : ORIGIN.react;
const icons = [{ name: HOOK.icon, color: HOOK.color, tip: HOOK.label }];
if (h.role)
icons.push({ name: h.role.icon, color: C.desc, tip: h.roleTip || h.role.label, bubble: h.bubble });
icons.push({ name: h.role.icon, color: h.role.color, tip: h.roleTip || h.role.label, bubble: h.bubble });
const ctx = card(parent, HOOK, w, { name: h.name + " · " + h.target, fold: h.fold ? "closed" : null, labelW: HOOK_LABEL_W, tint, icons });
const line = row(ctx.content, "Prop / 钩子", { gap: 12, align: "start" });
const key = row(line, "Key", { width: ctx.labelW, height: 20 });
docs/prototype/code-reader/openpencil/react-hooks.op
+13 -13
View File
@@ -6931,7 +6931,7 @@
"fill": [
{
"type": "solid",
"color": "#9d9d9d"
"color": "#9cdcfe"
}
]
},
@@ -9213,7 +9213,7 @@
"fill": [
{
"type": "solid",
"color": "#9d9d9d"
"color": "#e5c07b"
}
]
}
@@ -15066,7 +15066,7 @@
"fill": [
{
"type": "solid",
"color": "#9d9d9d"
"color": "#4ec9b0"
}
]
}
@@ -17497,7 +17497,7 @@
"fill": [
{
"type": "solid",
"color": "#9d9d9d"
"color": "#9cdcfe"
}
]
}
@@ -19331,7 +19331,7 @@
"fill": [
{
"type": "solid",
"color": "#9d9d9d"
"color": "#9cdcfe"
}
]
}
@@ -21549,7 +21549,7 @@
"fill": [
{
"type": "solid",
"color": "#9d9d9d"
"color": "#ce9178"
}
]
}
@@ -22501,7 +22501,7 @@
"fill": [
{
"type": "solid",
"color": "#9d9d9d"
"color": "#4fc1ff"
}
]
}
@@ -24316,7 +24316,7 @@
"fill": [
{
"type": "solid",
"color": "#9d9d9d"
"color": "#4fc1ff"
}
]
}
@@ -26384,7 +26384,7 @@
"fill": [
{
"type": "solid",
"color": "#9d9d9d"
"color": "#b5cea8"
}
]
}
@@ -28168,7 +28168,7 @@
"fill": [
{
"type": "solid",
"color": "#9d9d9d"
"color": "#b5cea8"
}
]
}
@@ -30266,7 +30266,7 @@
"fill": [
{
"type": "solid",
"color": "#9d9d9d"
"color": "#e5c07b"
}
]
}
@@ -32072,7 +32072,7 @@
"fill": [
{
"type": "solid",
"color": "#9d9d9d"
"color": "#e5c07b"
}
]
}
@@ -33656,7 +33656,7 @@
"fill": [
{
"type": "solid",
"color": "#9d9d9d"
"color": "#e5c07b"
}
]
}