📝 docs(vscode): 提交调用树弹框原型
This commit is contained in:
cruldra committed
1 parent
b463706d1f
commit
6e8be1447a
7 files changed
+9852
No files matched your search
+771
@@ -0,0 +1,771 @@
|
||||
// 调用树原型。颜色：代码阅读暗色种类色（codeReader.css）叠在 VS Code Dark Modern 的编辑器底上。
|
||||
// 要确认的事：点函数或类卡片右上角，调用树用弹框盖在预览上，预览不换掉。通向当前块的路径亮着；多棵树在弹框里切换。
|
||||
|
||||
const UI = "Noto Sans SC";
|
||||
const MONO = "Menlo";
|
||||
|
||||
const C = {
|
||||
bg: "#1F1F1F",
|
||||
side: "#181818",
|
||||
fg: "#CCCCCC",
|
||||
muted: "#9D9D9D",
|
||||
dim: "#6E6E6E",
|
||||
line: "#2B2B2B",
|
||||
guide: "#3C3C3C",
|
||||
tab: "#181818",
|
||||
selected: "#04395E",
|
||||
chip: "#313131",
|
||||
chipLine: "#3C3C3C",
|
||||
focus: "#007FD4",
|
||||
badge: "#0078D4",
|
||||
white: "#FFFFFF",
|
||||
ink: "#1F1F1F",
|
||||
};
|
||||
|
||||
// 函数种类 #DCDCAA、类种类 #4EC9B0，按阅读器卡片的 7% 底、35% 边，当前块加到 14% 底、实色边。
|
||||
const FN = { bg: "#2C2C29", bd: "#616150", hot: "#3A3A32", ink: "#DCDCAA" };
|
||||
const CLS = { bg: "#222B29", bd: "#305A52", hot: "#263733", ink: "#4EC9B0" };
|
||||
|
||||
const solid = (color) => [{ type: "solid", color }];
|
||||
|
||||
const TREES = [
|
||||
{ label: "读取用户资料", count: 2 },
|
||||
{ label: "导出通讯录", count: 1 },
|
||||
{ label: "夜间对账", count: 1 },
|
||||
];
|
||||
|
||||
const PHONE = {
|
||||
name: "GET /users/me",
|
||||
icon: "route",
|
||||
desc: "入口",
|
||||
loc: "routes/user.py",
|
||||
on: true,
|
||||
children: [
|
||||
{
|
||||
name: "get_profile",
|
||||
icon: "braces",
|
||||
desc: "读取当前用户",
|
||||
loc: "services/user.py",
|
||||
on: true,
|
||||
children: [
|
||||
{
|
||||
name: "serialize_user",
|
||||
icon: "braces",
|
||||
desc: "写成接口响应",
|
||||
loc: "services/user.py",
|
||||
on: true,
|
||||
children: [
|
||||
{
|
||||
name: "mask_phone",
|
||||
icon: "braces",
|
||||
desc: "手机号打星",
|
||||
loc: "utils/phone.py:28",
|
||||
on: true,
|
||||
current: true,
|
||||
},
|
||||
{ folded: "另外 1 处调用" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "load_user",
|
||||
icon: "braces",
|
||||
desc: "从库里取出用户",
|
||||
loc: "services/user.py",
|
||||
on: true,
|
||||
children: [
|
||||
{
|
||||
name: "mask_phone",
|
||||
icon: "braces",
|
||||
desc: "手机号打星",
|
||||
loc: "utils/phone.py:28",
|
||||
on: true,
|
||||
current: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{ folded: "另外 2 处调用" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const ORDER = {
|
||||
name: "POST /orders",
|
||||
icon: "route",
|
||||
desc: "入口",
|
||||
loc: "routes/order.py",
|
||||
on: true,
|
||||
children: [
|
||||
{
|
||||
name: "create_order",
|
||||
icon: "braces",
|
||||
desc: "创建一笔订单",
|
||||
loc: "billing/order.py",
|
||||
on: true,
|
||||
children: [
|
||||
{
|
||||
name: "新建 OrderService",
|
||||
icon: "box",
|
||||
desc: "进入这个类",
|
||||
loc: "billing/order.py:40",
|
||||
on: true,
|
||||
children: [
|
||||
{
|
||||
name: "OrderService",
|
||||
icon: "box",
|
||||
desc: "订单结算",
|
||||
loc: "billing/order.py:14",
|
||||
on: true,
|
||||
current: true,
|
||||
children: [{ folded: "4 个方法不在这条路径上" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const SINGLE = {
|
||||
name: "夜间对账",
|
||||
icon: "route",
|
||||
desc: "入口",
|
||||
loc: "jobs/audit.py",
|
||||
on: true,
|
||||
children: [
|
||||
{
|
||||
name: "run_audit",
|
||||
icon: "braces",
|
||||
desc: "跑一遍对账",
|
||||
loc: "jobs/audit.py",
|
||||
on: true,
|
||||
children: [
|
||||
{
|
||||
name: "mask_phone",
|
||||
icon: "braces",
|
||||
desc: "手机号打星",
|
||||
loc: "utils/phone.py:28",
|
||||
on: true,
|
||||
current: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function text(parent, content, opts) {
|
||||
return I(parent, Object.assign({
|
||||
type: "text",
|
||||
content,
|
||||
fontFamily: UI,
|
||||
fontSize: 13,
|
||||
fontWeight: 400,
|
||||
fill: solid(C.fg),
|
||||
textGrowth: "auto",
|
||||
lineHeight: 1.3,
|
||||
}, opts));
|
||||
}
|
||||
|
||||
function icon(parent, name, color) {
|
||||
return I(parent, {
|
||||
type: "icon_font",
|
||||
iconFontName: name,
|
||||
width: 14,
|
||||
height: 14,
|
||||
fill: solid(color),
|
||||
});
|
||||
}
|
||||
|
||||
function tool(parent, name, badge, on) {
|
||||
const props = {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
width: "fit_content",
|
||||
height: 20,
|
||||
padding: [0, 4],
|
||||
gap: 1,
|
||||
alignItems: "center",
|
||||
cornerRadius: 4,
|
||||
};
|
||||
if (on) props.fill = solid(C.selected);
|
||||
const btn = I(parent, props);
|
||||
icon(btn, name, on ? C.white : C.muted);
|
||||
if (badge) {
|
||||
const mark = I(btn, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
width: 14,
|
||||
height: 14,
|
||||
cornerRadius: 7,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fill: solid(C.badge),
|
||||
});
|
||||
text(mark, badge, { fontSize: 9, fontWeight: 700, fill: solid(C.white) });
|
||||
}
|
||||
return btn;
|
||||
}
|
||||
|
||||
function nodeRow(parent, node, depth, tone) {
|
||||
const row = I(parent, {
|
||||
type: "frame",
|
||||
name: node.folded || node.name,
|
||||
layout: "horizontal",
|
||||
width: "fill_container",
|
||||
height: "fit_content",
|
||||
padding: [0, 0, 0, depth * 22],
|
||||
gap: 8,
|
||||
alignItems: "center",
|
||||
});
|
||||
I(row, {
|
||||
type: "rectangle",
|
||||
width: 2,
|
||||
height: node.folded ? 16 : 44,
|
||||
cornerRadius: 1,
|
||||
fill: solid(node.on ? tone.ink : C.guide),
|
||||
});
|
||||
if (node.folded) {
|
||||
text(row, node.folded, { fontSize: 12, fill: solid(C.dim) });
|
||||
return;
|
||||
}
|
||||
const card = I(row, {
|
||||
type: "frame",
|
||||
layout: "vertical",
|
||||
width: "fill_container",
|
||||
height: "fit_content",
|
||||
padding: [7, 10],
|
||||
gap: 2,
|
||||
cornerRadius: 8,
|
||||
fill: solid(node.current ? tone.hot : tone.bg),
|
||||
stroke: {
|
||||
thickness: 1,
|
||||
align: "inside",
|
||||
fill: solid(node.current ? tone.ink : tone.bd),
|
||||
},
|
||||
});
|
||||
const top = I(card, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
width: "fill_container",
|
||||
height: "fit_content",
|
||||
gap: 8,
|
||||
alignItems: "center",
|
||||
});
|
||||
icon(top, node.icon, tone.ink);
|
||||
text(top, node.name, { fontFamily: MONO, fontSize: 13, fontWeight: 600, fill: solid(tone.ink) });
|
||||
I(top, { type: "frame", width: "fill_container", height: 1 });
|
||||
if (node.current) {
|
||||
const pill = I(top, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
height: 18,
|
||||
padding: [0, 6],
|
||||
cornerRadius: 9,
|
||||
alignItems: "center",
|
||||
fill: solid(tone.ink),
|
||||
});
|
||||
text(pill, "当前", { fontSize: 11, fontWeight: 600, fill: solid(C.ink) });
|
||||
}
|
||||
const sub = I(card, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
width: "fill_container",
|
||||
height: "fit_content",
|
||||
gap: 8,
|
||||
alignItems: "center",
|
||||
});
|
||||
text(sub, node.desc, { fontSize: 12, fill: solid(C.muted) });
|
||||
text(sub, node.loc, { fontFamily: MONO, fontSize: 11, fill: solid(C.dim) });
|
||||
}
|
||||
|
||||
function walk(parent, node, depth, tone) {
|
||||
nodeRow(parent, node, depth, tone);
|
||||
for (const child of node.children || []) walk(parent, child, depth + 1, tone);
|
||||
}
|
||||
|
||||
function editor(parent, spec) {
|
||||
const shell = I(parent, {
|
||||
type: "frame",
|
||||
x: spec.x,
|
||||
y: spec.y,
|
||||
layout: "horizontal",
|
||||
width: spec.width,
|
||||
height: spec.height,
|
||||
fill: solid(C.bg),
|
||||
clipContent: true,
|
||||
});
|
||||
if (spec.sideWidth) {
|
||||
const side = I(shell, {
|
||||
type: "frame",
|
||||
layout: "vertical",
|
||||
width: spec.sideWidth,
|
||||
height: "fill_container",
|
||||
fill: solid(C.side),
|
||||
});
|
||||
const sideHead = I(side, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
width: "fill_container",
|
||||
height: 35,
|
||||
padding: [0, 12],
|
||||
alignItems: "center",
|
||||
});
|
||||
text(sideHead, "资源管理器", { fontSize: 11, fill: solid(C.muted) });
|
||||
for (const file of spec.files) fileRow(side, file.label, file.depth, file.on);
|
||||
}
|
||||
const main = I(shell, {
|
||||
type: "frame",
|
||||
layout: "vertical",
|
||||
width: "fill_container",
|
||||
height: "fill_container",
|
||||
fill: solid(C.bg),
|
||||
});
|
||||
const tabs = I(main, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
width: "fill_container",
|
||||
height: 35,
|
||||
padding: [0, 0, 0, 8],
|
||||
alignItems: "end",
|
||||
fill: solid(C.tab),
|
||||
});
|
||||
const tab = I(tabs, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
height: 35,
|
||||
padding: [0, 12],
|
||||
gap: 8,
|
||||
alignItems: "center",
|
||||
fill: solid(C.bg),
|
||||
});
|
||||
text(tab, spec.tab, { fontSize: 13 });
|
||||
icon(tab, "x", C.dim);
|
||||
I(main, { type: "rectangle", width: "fill_container", height: 1, fill: solid(C.line) });
|
||||
const page = I(main, {
|
||||
type: "frame",
|
||||
layout: "vertical",
|
||||
width: "fill_container",
|
||||
height: "fit_content",
|
||||
padding: 16,
|
||||
gap: 8,
|
||||
});
|
||||
for (const card of spec.cards) readerCard(page, card);
|
||||
}
|
||||
|
||||
function dialogBody(dialog, spec) {
|
||||
const bar = I(dialog, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
width: "fill_container",
|
||||
height: 44,
|
||||
padding: [0, 14],
|
||||
gap: 8,
|
||||
alignItems: "center",
|
||||
fill: solid("#2D2D2D"),
|
||||
});
|
||||
text(bar, "调用树", { fontSize: 13, fontWeight: 600 });
|
||||
text(bar, spec.symbol, { fontFamily: MONO, fontSize: 13, fontWeight: 600, fill: solid(spec.tone.ink) });
|
||||
text(bar, spec.where, { fontFamily: MONO, fontSize: 11, fill: solid(C.dim) });
|
||||
I(bar, { type: "frame", width: "fill_container", height: 1 });
|
||||
icon(bar, "x", C.muted);
|
||||
I(dialog, { type: "rectangle", width: "fill_container", height: 1, fill: solid(C.line) });
|
||||
if (spec.chips) {
|
||||
const chips = I(dialog, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
width: "fill_container",
|
||||
height: "fit_content",
|
||||
padding: [12, 16, 4, 16],
|
||||
gap: 8,
|
||||
alignItems: "center",
|
||||
});
|
||||
for (const chip of spec.chips) {
|
||||
const box = I(chips, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
height: 28,
|
||||
padding: [0, 10],
|
||||
gap: 6,
|
||||
alignItems: "center",
|
||||
cornerRadius: 6,
|
||||
fill: solid(chip.on ? C.selected : C.chip),
|
||||
stroke: { thickness: 1, align: "inside", fill: solid(chip.on ? C.focus : C.chipLine) },
|
||||
});
|
||||
text(box, chip.label, { fontSize: 12, fontWeight: chip.on ? 600 : 400, fill: solid(chip.on ? C.white : C.fg) });
|
||||
text(box, chip.count + " 处", { fontSize: 11, fill: solid(chip.on ? "#9CDCFF" : C.dim) });
|
||||
}
|
||||
}
|
||||
const body = I(dialog, {
|
||||
type: "frame",
|
||||
layout: "vertical",
|
||||
width: "fill_container",
|
||||
height: "fit_content",
|
||||
padding: [12, 16, 20, 16],
|
||||
gap: 6,
|
||||
});
|
||||
walk(body, spec.tree, 0, spec.tone);
|
||||
}
|
||||
|
||||
function treeBoard(spec) {
|
||||
const editorW = spec.width - spec.sideWidth;
|
||||
const stageH = spec.height - 36;
|
||||
const root = I(null, {
|
||||
type: "frame",
|
||||
name: spec.name,
|
||||
x: spec.x,
|
||||
y: 0,
|
||||
layout: "horizontal",
|
||||
width: spec.width,
|
||||
height: spec.height,
|
||||
fill: solid(C.bg),
|
||||
clipContent: true,
|
||||
});
|
||||
if (spec.sideWidth) {
|
||||
const side = I(root, {
|
||||
type: "frame",
|
||||
layout: "vertical",
|
||||
width: spec.sideWidth,
|
||||
height: "fill_container",
|
||||
fill: solid(C.side),
|
||||
});
|
||||
const sideHead = I(side, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
width: "fill_container",
|
||||
height: 35,
|
||||
padding: [0, 12],
|
||||
alignItems: "center",
|
||||
});
|
||||
text(sideHead, "资源管理器", { fontSize: 11, fill: solid(C.muted) });
|
||||
for (const file of spec.files) fileRow(side, file.label, file.depth, file.on);
|
||||
}
|
||||
const main = I(root, {
|
||||
type: "frame",
|
||||
layout: "vertical",
|
||||
width: "fill_container",
|
||||
height: "fill_container",
|
||||
fill: solid(C.bg),
|
||||
});
|
||||
const tabs = I(main, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
width: "fill_container",
|
||||
height: 35,
|
||||
padding: [0, 0, 0, 8],
|
||||
alignItems: "end",
|
||||
fill: solid(C.tab),
|
||||
});
|
||||
const tab = I(tabs, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
height: 35,
|
||||
padding: [0, 12],
|
||||
gap: 8,
|
||||
alignItems: "center",
|
||||
fill: solid(C.bg),
|
||||
});
|
||||
text(tab, spec.tab, { fontSize: 13 });
|
||||
icon(tab, "x", C.dim);
|
||||
I(main, { type: "rectangle", width: "fill_container", height: 1, fill: solid(C.line) });
|
||||
const stage = I(main, {
|
||||
type: "frame",
|
||||
layout: "none",
|
||||
width: "fill_container",
|
||||
height: stageH,
|
||||
fill: solid(C.bg),
|
||||
});
|
||||
const dialog = I(stage, {
|
||||
type: "frame",
|
||||
name: "弹框",
|
||||
x: spec.dialogX,
|
||||
y: spec.dialogY,
|
||||
layout: "vertical",
|
||||
width: spec.dialogW,
|
||||
height: "fit_content",
|
||||
cornerRadius: 8,
|
||||
clipContent: true,
|
||||
fill: solid("#252526"),
|
||||
stroke: { thickness: 1, align: "inside", fill: solid("#454545") },
|
||||
effects: [{ type: "shadow", offsetX: 0, offsetY: 16, blur: 40, color: "rgba(0,0,0,0.5)" }],
|
||||
});
|
||||
dialogBody(dialog, spec);
|
||||
I(stage, {
|
||||
type: "rectangle",
|
||||
name: "遮罩",
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: editorW,
|
||||
height: stageH,
|
||||
fill: solid("#000000"),
|
||||
opacity: 0.55,
|
||||
});
|
||||
const page = I(stage, {
|
||||
type: "frame",
|
||||
x: 16,
|
||||
y: 16,
|
||||
layout: "vertical",
|
||||
width: editorW - 32,
|
||||
height: "fit_content",
|
||||
gap: 8,
|
||||
});
|
||||
for (const card of spec.cards) readerCard(page, card);
|
||||
return root;
|
||||
}
|
||||
|
||||
function readerCard(parent, spec) {
|
||||
const card = I(parent, {
|
||||
type: "frame",
|
||||
name: spec.symbol,
|
||||
layout: "horizontal",
|
||||
width: "fill_container",
|
||||
height: "fit_content",
|
||||
padding: [8, 10, 8, 8],
|
||||
gap: 8,
|
||||
alignItems: "start",
|
||||
cornerRadius: 8,
|
||||
fill: solid(spec.tone.bg),
|
||||
stroke: { thickness: 1, align: "inside", fill: solid(spec.tone.bd) },
|
||||
});
|
||||
icon(card, "chevron-down", C.muted);
|
||||
icon(card, spec.icon, spec.tone.ink);
|
||||
const body = I(card, {
|
||||
type: "frame",
|
||||
layout: "vertical",
|
||||
width: "fill_container",
|
||||
height: "fit_content",
|
||||
gap: 4,
|
||||
});
|
||||
text(body, spec.symbol, { fontFamily: MONO, fontSize: 13, fontWeight: 600, fill: solid(spec.tone.ink) });
|
||||
text(body, spec.desc, { fontSize: 13, fill: solid(C.fg) });
|
||||
text(body, spec.loc, { fontFamily: MONO, fontSize: 11, fill: solid(C.dim) });
|
||||
const tools = I(card, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
width: "fit_content",
|
||||
height: 20,
|
||||
gap: 2,
|
||||
alignItems: "center",
|
||||
});
|
||||
tool(tools, "message-square-text");
|
||||
tool(tools, "sparkles");
|
||||
tool(tools, "pencil");
|
||||
tool(tools, "git-branch", spec.badge, spec.open);
|
||||
}
|
||||
|
||||
function fileRow(parent, label, depth, on) {
|
||||
const row = I(parent, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
width: "fill_container",
|
||||
height: 26,
|
||||
padding: [0, 8, 0, 8 + depth * 14],
|
||||
gap: 6,
|
||||
alignItems: "center",
|
||||
fill: solid(on ? C.selected : C.side),
|
||||
});
|
||||
text(row, label, { fontSize: 13, fill: solid(on ? C.white : C.fg) });
|
||||
}
|
||||
|
||||
function readerBoard() {
|
||||
const root = I(null, {
|
||||
type: "frame",
|
||||
name: "代码阅读 · 卡片入口",
|
||||
x: 0,
|
||||
y: 0,
|
||||
layout: "horizontal",
|
||||
width: 1040,
|
||||
height: 220,
|
||||
fill: solid(C.bg),
|
||||
clipContent: true,
|
||||
});
|
||||
const side = I(root, {
|
||||
type: "frame",
|
||||
layout: "vertical",
|
||||
width: 220,
|
||||
height: "fill_container",
|
||||
fill: solid(C.side),
|
||||
});
|
||||
const sideHead = I(side, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
width: "fill_container",
|
||||
height: 35,
|
||||
padding: [0, 12],
|
||||
alignItems: "center",
|
||||
});
|
||||
text(sideHead, "资源管理器", { fontSize: 11, fill: solid(C.muted) });
|
||||
fileRow(side, "superwork", 0, false);
|
||||
fileRow(side, "routes", 1, false);
|
||||
fileRow(side, "services", 1, false);
|
||||
fileRow(side, "utils", 1, false);
|
||||
fileRow(side, "phone.py", 2, true);
|
||||
|
||||
const main = I(root, {
|
||||
type: "frame",
|
||||
layout: "vertical",
|
||||
width: "fill_container",
|
||||
height: "fit_content",
|
||||
fill: solid(C.bg),
|
||||
});
|
||||
const tabs = I(main, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
width: "fill_container",
|
||||
height: 35,
|
||||
padding: [0, 0, 0, 8],
|
||||
alignItems: "end",
|
||||
fill: solid(C.tab),
|
||||
});
|
||||
const tab = I(tabs, {
|
||||
type: "frame",
|
||||
layout: "horizontal",
|
||||
height: 35,
|
||||
padding: [0, 12],
|
||||
gap: 8,
|
||||
alignItems: "center",
|
||||
fill: solid(C.bg),
|
||||
});
|
||||
text(tab, "phone.py", { fontSize: 13 });
|
||||
icon(tab, "x", C.dim);
|
||||
I(main, { type: "rectangle", width: "fill_container", height: 1, fill: solid(C.line) });
|
||||
const page = I(main, {
|
||||
type: "frame",
|
||||
layout: "vertical",
|
||||
width: "fill_container",
|
||||
height: "fit_content",
|
||||
padding: 16,
|
||||
gap: 8,
|
||||
});
|
||||
readerCard(page, {
|
||||
symbol: "mask_phone",
|
||||
icon: "braces",
|
||||
desc: "把手机号中间四位换成星号",
|
||||
loc: "utils/phone.py:28",
|
||||
tone: FN,
|
||||
badge: "3",
|
||||
});
|
||||
readerCard(page, {
|
||||
symbol: "mask_email",
|
||||
icon: "braces",
|
||||
desc: "把邮箱用户名打成星号",
|
||||
loc: "utils/phone.py:41",
|
||||
tone: FN,
|
||||
badge: "1",
|
||||
});
|
||||
return root;
|
||||
}
|
||||
|
||||
const PHONE_FILES = [
|
||||
{ label: "superwork", depth: 0 },
|
||||
{ label: "routes", depth: 1 },
|
||||
{ label: "services", depth: 1 },
|
||||
{ label: "utils", depth: 1 },
|
||||
{ label: "phone.py", depth: 2, on: true },
|
||||
];
|
||||
const PHONE_CARDS = [
|
||||
{
|
||||
symbol: "mask_phone",
|
||||
icon: "braces",
|
||||
desc: "把手机号中间四位换成星号",
|
||||
loc: "utils/phone.py:28",
|
||||
tone: FN,
|
||||
badge: "3",
|
||||
open: true,
|
||||
},
|
||||
{
|
||||
symbol: "mask_email",
|
||||
icon: "braces",
|
||||
desc: "把邮箱用户名打成星号",
|
||||
loc: "utils/phone.py:41",
|
||||
tone: FN,
|
||||
badge: "1",
|
||||
},
|
||||
];
|
||||
|
||||
readerBoard();
|
||||
treeBoard({
|
||||
name: "调用树 · 弹框，多棵",
|
||||
x: 1120,
|
||||
width: 1040,
|
||||
height: 720,
|
||||
sideWidth: 220,
|
||||
dialogX: 28,
|
||||
dialogY: 28,
|
||||
dialogW: 764,
|
||||
tab: "phone.py",
|
||||
files: PHONE_FILES,
|
||||
cards: PHONE_CARDS,
|
||||
symbol: "mask_phone",
|
||||
where: "utils/phone.py:28",
|
||||
tone: FN,
|
||||
chips: TREES.map((tree, index) => Object.assign({ on: index === 0 }, tree)),
|
||||
tree: PHONE,
|
||||
});
|
||||
treeBoard({
|
||||
name: "调用树 · 弹框，类",
|
||||
x: 2240,
|
||||
width: 1040,
|
||||
height: 640,
|
||||
sideWidth: 220,
|
||||
dialogX: 28,
|
||||
dialogY: 28,
|
||||
dialogW: 764,
|
||||
tab: "order.py",
|
||||
files: [
|
||||
{ label: "superwork", depth: 0 },
|
||||
{ label: "billing", depth: 1 },
|
||||
{ label: "order.py", depth: 2, on: true },
|
||||
],
|
||||
cards: [{
|
||||
symbol: "OrderService",
|
||||
icon: "box",
|
||||
desc: "订单结算",
|
||||
loc: "billing/order.py:14",
|
||||
tone: CLS,
|
||||
badge: "2",
|
||||
open: true,
|
||||
}],
|
||||
symbol: "OrderService",
|
||||
where: "billing/order.py:14",
|
||||
tone: CLS,
|
||||
chips: [
|
||||
{ label: "创建订单", count: 1, on: true },
|
||||
{ label: "补开发票", count: 1, on: false },
|
||||
],
|
||||
tree: ORDER,
|
||||
});
|
||||
treeBoard({
|
||||
name: "调用树 · 弹框，只有一棵",
|
||||
x: 3360,
|
||||
width: 1040,
|
||||
height: 560,
|
||||
sideWidth: 220,
|
||||
dialogX: 28,
|
||||
dialogY: 28,
|
||||
dialogW: 764,
|
||||
tab: "phone.py",
|
||||
files: PHONE_FILES,
|
||||
cards: PHONE_CARDS,
|
||||
symbol: "mask_phone",
|
||||
where: "utils/phone.py:28",
|
||||
tone: FN,
|
||||
tree: SINGLE,
|
||||
});
|
||||
treeBoard({
|
||||
name: "调用树 · 弹框，窄窗口",
|
||||
x: 4480,
|
||||
width: 640,
|
||||
height: 720,
|
||||
sideWidth: 0,
|
||||
dialogX: 20,
|
||||
dialogY: 20,
|
||||
dialogW: 600,
|
||||
tab: "phone.py",
|
||||
files: [],
|
||||
cards: PHONE_CARDS,
|
||||
symbol: "mask_phone",
|
||||
where: "utils/phone.py:28",
|
||||
tone: FN,
|
||||
chips: TREES.map((tree, index) => Object.assign({ on: index === 0 }, tree)),
|
||||
tree: PHONE,
|
||||
});
|
||||
File diff suppressed because it is too large.
Load diff
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Reference in new issue
Block a user