archive/yaklang-chrome-extension
1
0
Fork 0
mirror of https://github.com/yaklang/yaklang-chrome-extension.git synced 2026-09-25 04:31:52 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(browser): refine workbench navigation and authorization

Browse Source
This commit is contained in:
go0p
2026-09-03 17:23:19 +08:00
parent 8e84735ecf
commit f028cff33b
11 changed files with 239 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/browser-transform/browser-transform-workspace.css
+26 -7
View File
@@ -255,24 +255,28 @@
.transform-flow-stage.is-extension { --owner-color: var(--primary); }
.transform-flow-stage.is-page { --owner-color: #2563eb; }
.transform-flow-stage.is-yak { --owner-color: #6b7280; }
.transform-flow-stage > summary { min-width: 0; min-height: 92px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; list-style: none; cursor: pointer; }
.transform-flow-stage > summary { min-width: 0; min-height: 78px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; border-radius: var(--radius-md); list-style: none; cursor: pointer; transition: background-color .14s ease, box-shadow .14s ease; }
.transform-flow-stage > summary::-webkit-details-marker { display: none; }
.transform-flow-stage__rail { min-height: 92px; display: grid; grid-template-rows: 30px minmax(0, 1fr); justify-items: center; padding-top: 16px; }
.transform-flow-stage > summary:hover { background: color-mix(in srgb, var(--owner-color) 4%, transparent); }
.transform-flow-stage[open] > summary { background: color-mix(in srgb, var(--owner-color) 7%, var(--surface)); box-shadow: inset 3px 0 0 var(--owner-color); }
.transform-flow-stage__rail { min-height: 78px; display: grid; grid-template-rows: 30px minmax(0, 1fr); justify-items: center; padding-top: 13px; }
.transform-flow-stage__rail > i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--owner-color) 30%, var(--border)); border-radius: 50%; background: color-mix(in srgb, var(--owner-color) 8%, var(--surface)); color: var(--owner-color); font-style: normal; }
.transform-flow-stage__rail > b { width: 1px; min-height: 38px; background: color-mix(in srgb, var(--owner-color) 28%, var(--border)); }
.transform-flow-stage__main { min-width: 0; padding: 15px 0 13px; border-bottom: 1px solid var(--border); }
.transform-flow-stage__main { min-width: 0; padding: 12px 0 11px; border-bottom: 1px solid var(--border); }
.transform-flow-stage__meta { display: flex; align-items: center; gap: 7px; }
.transform-flow-stage__meta > em { color: var(--owner-color); font-size: 10px; font-style: normal; font-weight: 700; }
.transform-flow-stage__meta > i { padding: 1px 5px; border-radius: 999px; background: var(--surface-subtle); color: var(--muted); font-size: 9px; font-style: normal; }
.transform-flow-stage__meta > em { color: var(--owner-color); font-size: var(--text-xs); font-style: normal; font-weight: 700; }
.transform-flow-stage__meta > i { padding: 1px 5px; border-radius: 999px; background: var(--surface-subtle); color: var(--muted); font-size: var(--text-xs); font-style: normal; }
.transform-flow-stage__meta > i.is-observed { background: var(--success-soft); color: var(--success); }
.transform-flow-stage__meta > i.is-supported { background: var(--warning-soft); color: var(--warning); }
.transform-flow-stage__main > strong { display: block; margin-top: 5px; font-size: var(--text-sm); }
.transform-flow-stage__main > small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.transform-flow-stage__status { min-width: 54px; padding: 15px 0 0 8px; display: flex; align-items: flex-start; justify-content: flex-end; gap: 4px; color: var(--muted); font-size: 10px; }
.transform-flow-stage__status { min-width: 70px; padding: 13px 10px 0 8px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: var(--muted); font-size: var(--text-xs); }
.transform-flow-stage__status > svg { color: var(--success); }
.transform-flow-stage__status time { font-variant-numeric: tabular-nums; }
.transform-flow-stage[open] .transform-flow-stage__status > span { color: var(--foreground); }
.transform-flow-stage__details { margin: -6px 0 10px 45px; padding: 0 0 14px; display: grid; gap: 10px; border-bottom: 1px solid var(--border); }
.transform-flow-stage__status > .transform-flow-stage__chevron { color: var(--muted); transition: transform .16s ease; }
.transform-flow-stage[open] .transform-flow-stage__chevron { transform: rotate(180deg); }
.transform-flow-stage__details { margin: 4px 10px 14px 45px; padding: 13px 14px; display: grid; gap: 11px; border: 1px solid color-mix(in srgb, var(--owner-color) 16%, var(--border)); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 4px 14px rgb(15 23 42 / 4%); }
.transform-flow-network { margin: 0; padding: 8px 10px; display: grid; gap: 5px; background: var(--surface-subtle); }
.transform-flow-network > div { min-width: 0; display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; font-size: var(--text-xs); }
.transform-flow-network dt { color: var(--muted); }
@@ -305,6 +309,18 @@
.transform-flow-runtime li strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transform-flow-runtime li code { color: var(--muted); }
.transform-flow-runtime li time { color: var(--success); text-align: right; font-variant-numeric: tabular-nums; }
.transform-flow-steps { min-width: 0; display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; }
.transform-flow-steps > span { color: var(--muted); font-size: var(--text-xs); font-weight: 650; }
.transform-flow-steps ol { min-width: 0; margin: 0; padding: 0; display: grid; gap: 2px; list-style: none; }
.transform-flow-steps li { min-width: 0; min-height: 42px; padding: 6px 8px; display: grid; grid-template-columns: 20px minmax(130px, .8fr) minmax(160px, 1fr); align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.transform-flow-steps li:last-child { border-bottom: 0; }
.transform-flow-steps li > i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--owner-color) 9%, var(--surface)); color: var(--owner-color); font-size: var(--text-xs); font-style: normal; font-weight: 700; }
.transform-flow-steps li > span { min-width: 0; }
.transform-flow-steps li strong,
.transform-flow-steps li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transform-flow-steps li strong { font-size: var(--text-xs); }
.transform-flow-steps li small { margin-top: 2px; color: var(--muted); font-size: var(--text-xs); }
.transform-flow-steps li > code { min-width: 0; overflow: hidden; color: var(--muted-strong); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.transform-flow-changes { margin: 14px 0 0 45px; border-top: 2px solid var(--foreground); }
.transform-flow-changes > header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border); }
.transform-flow-changes > header strong,
@@ -438,6 +454,9 @@
.transform-data-flow { padding-inline: 12px; }
.transform-data-flow__head { flex-direction: column; }
.transform-flow-paths { grid-template-columns: minmax(0, 1fr); }
.transform-flow-steps { grid-template-columns: minmax(0, 1fr); }
.transform-flow-steps li { grid-template-columns: 20px minmax(0, 1fr); }
.transform-flow-steps li > code { grid-column: 2; }
.transform-flow-stage__details,
.transform-flow-changes { margin-left: 34px; }
.transform-flow-empty { grid-template-columns: 30px minmax(0, 1fr); }