dsh-x-core 0.1.21 → 0.1.23

package/public/launcher.css

@@ -13,6 +13,19 @@
   --control-font-size: 13px;
   --control-radius: 9px;
   --control-padding: 12px;
+  /* 顶栏两种形态共用这一组尺寸：
+     - 默认（浏览器里、外壳没开标签页）：36px 控件 + 18px 上下留白，就是原来那条高顶栏；
+     - .internal-tabs.has-tabs（内部标签页）：控件 30px、留白 5px，整条 40px，像浏览器标签栏那样扁。
+     internal-tabs.js 把 header 的真实高度报给外壳（'layout'），dsh 页面的顶边跟着走，
+     所以两种形态切换时不会盖住页面内容。
+     标签条那层底色（--chrome-strip）只在标签页形态用：比页面底色深一档，选中的标签才显得
+     是从页面里长出来的（标签用 --card 填，和下面内容同一块面）。 */
+  --topbar-control: 36px;
+  --topbar-radius: 12px;
+  --chrome-strip: #dde5f4;
+  /* 设置页左侧导航的底色：用中性浅灰，不再往蓝里走 —— 偏蓝的底色会跟顶栏那条标签条
+     （--chrome-strip）撞成一片，也太压。灰一档既和白色卡片分得开，也不跟主题色抢。 */
+  --settings-nav-bg: #eef1f7;
   /* 开关的轨道与圆钮：两档的 .toggle 和更新提醒的三档开关共用，暗色主题只改这里 */
   --switch-off: #cfdcf3;
   --switch-on: var(--accent);
@@ -28,6 +41,18 @@ body {
   font: 15px/1.5 "Segoe UI", ui-sans-serif, system-ui, sans-serif;
   display: grid;
   grid-template-rows: auto 1fr;
+  /* 隐式列写死 minmax(0, 1fr)：默认的 auto 会按内容的「最大宽度」把整列撑开，
+     标签条一宽（标签 + 两头按钮超过窗口）整条就跟着变宽，刷新/齿轮/窗口按钮被顶出窗口。 */
+  grid-template-columns: minmax(0, 1fr);
+  /* 桌面窗口：界面文字默认不可选，拖动页面时不会把导航、卡片、按钮选中。 */
+  -webkit-user-select: none;
+  user-select: none;
+}
+/* 该能复制的地方照旧：输入框、日志、代码/错误详情。 */
+input, textarea, select, option, pre, code, kbd, samp,
+#log, .launch-log-text, .notice-detail, .rc-details-pre {
+  -webkit-user-select: text;
+  user-select: text;
 }
 /* 高清角色独立成层，仅动画 transform / opacity，保留文字区域的对比度。 */
 .backdrop {
@@ -109,6 +134,8 @@ header {
 }
 .brand { font-weight: 700; letter-spacing: 0.04em; font-size: 20px; line-height: 1; color: var(--accent); }
 .brand-home { display: inline-flex; align-items: baseline; gap: 10px; border: 0; padding: 6px 8px; margin: -6px -8px; background: transparent; font: inherit; cursor: pointer; }
+/* 「回主页」图标只在内部标签页里出现（.internal-tabs.has-tabs 底下的规则），其余形态仍是文字 logo */
+.brand-icon { display: none; }
 .brand-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 3px; }
 .brand-block { display: flex; align-items: baseline; gap: 10px; }
 .app-ver { color: var(--muted); font-size: 12px; }
@@ -149,30 +176,29 @@ header {
   border-color: #b9ccf0;
   box-shadow: 0 3px 10px rgba(59, 111, 224, 0.18);
 }
-/* 设置入口：主页右上角的齿轮，点开就是设置页（原来那排 tab 已经并进去） */
+/* 设置入口：主页右上角的齿轮（原来那排 tab 已经并进去）。外观和内部标签页那排按钮是同一套：
+   静止只有图标（无底色、无描边、无投影），悬停才浮出底色——两种顶栏形态不再各画一种按钮。
+   尺寸/圆角跟 --topbar-control / --topbar-radius 走，所以开标签时自动缩成 30px 的扁按钮。 */
 .gear-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
+  flex-shrink: 0;
+  width: var(--topbar-control);
+  height: var(--topbar-control);
   padding: 0;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  background: var(--accent-soft);
-  color: var(--accent);
+  border: 0;
+  border-radius: var(--topbar-radius);
+  background: transparent;
+  color: var(--muted);
   cursor: pointer;
-  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
+  transition: background 160ms ease, color 160ms ease;
 }
-.gear-btn svg { width: 17px; height: 17px; transition: transform 280ms cubic-bezier(.2, .8, .2, 1); }
+.gear-btn svg { width: 16px; height: 16px; transition: transform 280ms cubic-bezier(.2, .8, .2, 1); }
 .gear-btn.active svg { transform: rotate(45deg); }
-.gear-btn:hover {
-  transform: translateY(-1px);
-  border-color: #b9ccf0;
-  box-shadow: 0 3px 10px rgba(59, 111, 224, 0.18);
-}
+.gear-btn:hover { background: var(--accent-soft); color: var(--accent); }
 /* 已经在设置面板时齿轮压成实心，表示"就在这儿" */
-.gear-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
+.gear-btn.active { background: var(--accent); color: #fff; }
 /* app 窗口模式：原生标题栏被去掉了，这排按钮顶上；浏览器里不显示 */
 .win-controls { display: none; align-items: center; gap: 2px; margin-left: 2px; }
 .app-window .win-controls { display: flex; }
@@ -187,6 +213,7 @@ header {
    拖动同样只能靠 app-region。类由 shell/preload.cjs 加，只在 Windows 的 Electron 里出现。 */
 .electron-window header { -webkit-app-region: drag; }
 .electron-window header :is(button, a, input, select, .select, .internal-tab) { -webkit-app-region: no-drag; }
+/* 窗口按钮：浏览器窗口右上角那种横向长条块，挨着排、没有描边，只有悬停底色。 */
 .win-btn {
   width: 34px;
   height: 30px;
@@ -206,51 +233,148 @@ header {
 .win-btn.close:hover { background: var(--danger); color: #fff; }
 /* 顶栏要用来拖窗口，文字别被拖选 */
 .app-window header { user-select: none; }
-/* 原生标签复用已有菜单栏：不再另加标题栏，配色与 Star、设置和窗口按钮保持同源。 */
-.internal-tabs header { gap: 20px; }
-.internal-tabs .brand-block, .internal-tabs .header-right { flex-shrink: 0; }
-.internal-tabs-area { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; }
+/* 标签条：浏览器那种紧挨着的一排扁标签——静止没有描边、没有投影，选中标签是一块实底色。 */
+/* 内部标签页（.internal-tabs.has-tabs，由 internal-tabs.js 按外壳状态挂到 <html> 上）就是浏览器标签栏形态：
+   齿轮、刷新、窗口按钮全部扁平（静止无底色、无描边、无投影，悬停才浮出底色）；文字 logo 让位给一个
+   「回主页」图标按钮。没开标签页时（浏览器里、或外壳一个标签都没开）整条退回上面的高顶栏，
+   两种形态由这一组变量切换。
+   标签条的尺寸照 Chromium（Edge 同源）的实测参数来，不再凭感觉调：
+   - chrome/browser/ui/tabs/tab_style.cc：上圆角 GetTopCornerRadius=10、底部外扩圆角
+     GetBottomCornerRadius=12、标准宽 kTabWidth=232、分隔线 2×20（左右各 2px 边距、半径 1）；
+   - chrome/browser/ui/layout_constants.cc：kTabHeight=34+1（与工具条的 1px 重叠）、
+     kTabStripPadding=6（条顶留白）、kTabVerticalPadding=6、kTabHorizontalPadding=8。
+   合起来：标签 35px + 顶留白 6px = 41px 一整条。 */
+.internal-tabs.has-tabs {
+  --topbar-control: 30px;
+  --topbar-radius: 8px;
+  /* 高度照 Edge 的窗口实测：标签 40px，顶上留 4px 的空（贴太死会像被窗口边缘切掉），
+     底边压在内容区上沿 —— 整条 44px。 */
+  --tab-height: 40px;
+  --tab-strip-padding: 4px;
+  --tab-radius: 10px;
+  --tab-flare: 12px;
+  --tab-width: 232px;
+  --tab-min-width: 56px;
+  --tab-separator: #cdd9ee;
+}
+/* 下边不留内边距：标签的底边要压在内容区上沿，才能跟下面的页面连成一片（见下面 .internal-tab-list 的注）。
+   选择器带上 html，是为了压过 theme.css 里暗色的 `html[data-color-scheme="dark"] header { background: transparent }`
+   ——两边同为 (0,1,1) 时后加载的那份会赢，标签条的底色就白设了。 */
+/* 标签形态的顶栏用栅格排：左（回主页）auto、中（标签条）minmax(0,1fr)、右（刷新/齿轮/窗口按钮）auto。
+   用 flex 时标签一宽就会把右边那组挤出窗口（它们直接不见了），栅格的中列可以被压缩，两头永远在原位。 */
+html.internal-tabs.has-tabs header {
+  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
+  padding: var(--tab-strip-padding) 10px 0; gap: 12px; background: var(--chrome-strip);
+}
+/* macOS 的红绿灯还在左上角，标签条不能压过去（这条要在 .mac-window 的 96px 之后才生效） */
+.internal-tabs.has-tabs.mac-window header { padding-left: 96px; }
+/* 两头的控件组：行高是标签的 40px（从条顶那 4px 留白之后起算），补一条和留白等宽的下外边距，
+   30px 的按钮就居中在整条 44px 里（上 7 / 下 7）。 */
+.internal-tabs.has-tabs .brand-block, .internal-tabs.has-tabs .header-right { flex-shrink: 0; margin-bottom: var(--tab-strip-padding); }
+.internal-tabs.has-tabs .brand, .internal-tabs.has-tabs .app-ver { display: none; }
+.internal-tabs.has-tabs .brand-home {
+  display: grid; place-items: center; width: var(--topbar-control); height: var(--topbar-control);
+  /* 左边这 7px 和上下的留白一样宽：顶栏的 padding-left 是 10px，按钮自己往左收 3px 补平（标签条位置不动）。 */
+  padding: 0; margin: 0 0 0 -3px; border-radius: var(--topbar-radius); background: transparent; color: var(--muted);
+  transition: background 160ms ease, color 160ms ease;
+}
+.internal-tabs.has-tabs .brand-home:hover { background: var(--accent-soft); color: var(--accent); }
+.internal-tabs.has-tabs .brand-icon { display: grid; place-items: center; }
+.internal-tabs.has-tabs .brand-icon svg { width: 16px; height: 16px; }
+.internal-tabs.has-tabs .self-update { padding: 5px 10px; border-radius: var(--topbar-radius); }
+.internal-tabs.has-tabs .win-controls { gap: 0; margin-left: 4px; }
+.internal-tabs.has-tabs .win-btn { width: 40px; height: var(--topbar-control); border-radius: 6px; }
+/* 标签要「长在页面顶上」：整条没有下内边距，标签高 35px（控件 30 + 顶上那 5px 内边距）正好
+   落到内容区上沿（外壳按 header 真实高度给 dsh 页面留位置，内容就从这条线开始）；两侧留出
+   --tab-flare 的空当，让首尾标签那对反向圆角不被 overflow 裁掉。
+   上沿和两头那排按钮对齐（都从顶栏的 5px 内边距起），所以标签比按钮高 5px——浏览器就是这样：
+   标签长得比工具按钮高，底边和下面那块页面连成一片（原来标签又往下让了 5px，上沿比按钮低，
+   看着是陷下去的）。
+   选中标签用页面底色填，看着就是页面向上的延伸——Edge / Chrome 那种和内容融合的样子。 */
+.internal-tabs.has-tabs .internal-tab-list { margin-top: 0; padding: 0 var(--tab-flare); }
+
+.internal-tabs-area { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; }
 .internal-tabs-area[hidden] { display: none; }
-.internal-tab-list { position: relative; isolation: isolate; display: flex; flex: 1; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+/* 标签之间不留缝（Edge / Chromium 的标签是紧挨着的，重叠的是底部那对外扩圆角区域），
+   相邻靠那条 2×20 的小竖线分开。 */
+.internal-tab-list { position: relative; isolation: isolate; display: flex; flex: 1; gap: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
 .internal-tab-list::-webkit-scrollbar { display: none; }
-.internal-tab-indicator {
-  position: absolute; top: 0; left: 0; height: 36px; border: 1px solid var(--line); border-radius: 12px;
-  background: var(--card); box-shadow: 0 3px 10px rgba(59, 111, 224, .09); opacity: 0; pointer-events: none;
-  will-change: transform;
-  transition: transform 260ms cubic-bezier(.2, 1.3, .32, 1), width 260ms cubic-bezier(.2, 1.3, .32, 1), opacity 160ms ease;
-}
-.internal-tab-indicator.visible { opacity: 1; }
-.internal-tab-indicator.instant { transition: none; }
 .internal-tab {
   position: relative;
-  display: flex; align-items: center; gap: 5px; flex: 0 1 172px; min-width: 104px; height: 36px;
-  padding: 0 7px 0 11px; border: 1px solid transparent; border-radius: 12px; color: var(--muted);
-  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
+  /* 宽度：平分标签条、最多 --tab-width（Chromium 的 kTabWidth=232）、最少 --tab-min-width；
+     用「flex-basis 0 + grow 1 + max-width」而不是定宽 + shrink —— 定宽时浏览器不一定会压缩，
+     标签一多就会把右边的刷新/齿轮/窗口按钮顶出窗口。 */
+  display: flex; align-items: center; gap: 4px; flex: 1 1 0; max-width: var(--tab-width); min-width: var(--tab-min-width); height: var(--tab-height);
+  /* 上面两角圆；下面两角是外扩圆角（::before/::after 常驻，底色 inherit，见下） */
+  padding: 0 3px 0 9px; border: 1px solid transparent; border-radius: var(--tab-radius) var(--tab-radius) 0 0; color: var(--muted);
+  /* 底色不做过场：悬停/选中要像浏览器那样立刻到位（过渡会让底色和圆角错开一帧） */
+  transition: color 120ms ease, box-shadow 160ms ease;
+}
+/* 选中/悬停的标签自己画底色和外扩圆角（Chromium 也是逐张标签画形状的，不是拿一块滑块垫在下面），
+   再把自己抬到邻居上面 —— 邻居的边缘被这两块圆角压住，就是浏览器那种「叠层」。
+   --tab-surface 是外壳采样到的页面底色：和下面那块页面同色，接缝才看不出来（采不到退回 --card）。 */
+.internal-tab:hover { background: var(--accent-soft); color: var(--accent); z-index: 1; }
+/* 选中标签的字色跟着采到的底色走（--tab-ink：亮底深字 / 暗底浅字），
+   否则暗色主题下遇到浅色页面给的白色标签，字就糊成一片了。 */
+.internal-tab.active { background: var(--tab-surface, var(--card)); color: var(--tab-ink, var(--accent)); z-index: 2; }
+/* 标签之间那条 2×20 的小竖线（Chromium 的 kSeparatorThickness/Height，左右各 2px 边距）：
+   挂在前一张标签的右边缘，第一个标签没有；悬停/选中、以及紧挨着选中标签的那条都让位。 */
+.internal-tab + .internal-tab {
+  background-image: linear-gradient(var(--tab-separator), var(--tab-separator));
+  background-repeat: no-repeat;
+  background-position: 2px center;
+  background-size: 2px 20px;
 }
-.internal-tab:hover { background: var(--accent-soft); color: var(--accent); }
-.internal-tab.active { background: transparent; color: var(--accent); }
+.internal-tab + .internal-tab:hover,
+.internal-tab + .internal-tab.active,
+.internal-tab:hover + .internal-tab,
+.internal-tab.active + .internal-tab { background-image: none; }
 .internal-tab button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
-.internal-tab-label { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 0; height: 100%; font-size: 13px !important; font-weight: 600 !important; }
+.internal-tab-label { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; padding: 0; height: 100%; font-size: 12px !important; font-weight: 500 !important; }
 .internal-tab-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.internal-tab-label svg { flex-shrink: 0; width: 15px; height: 15px; }
-.internal-tab-close { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; padding: 4px; border-radius: 7px; opacity: .5; transition: opacity 140ms ease, background 140ms ease; }
+.internal-tab-label svg { flex-shrink: 0; width: 13px; height: 13px; }
+.internal-tab-close { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; padding: 3px; border-radius: 5px; opacity: .5; transition: opacity 140ms ease, background 140ms ease; }
 .internal-tab:hover .internal-tab-close, .internal-tab.active .internal-tab-close { opacity: .8; }
-.internal-tab-close:hover { opacity: 1 !important; background: var(--accent-dim); }
-.internal-tab-close svg { width: 13px; height: 13px; }
-.internal-tab-reload { flex-shrink: 0; width: 32px; height: 32px; }
+.internal-tab-close:hover { opacity: 1 !important; background: color-mix(in srgb, currentColor 14%, transparent); }
+.internal-tab-close svg { width: 11px; height: 11px; }
+/* 刷新按钮与齿轮同尺寸（都吃 .gear-btn 的 --topbar-control），别在标签条里单独放大 */
+/* 标签条里的刷新按钮和两头那排控件一样高、一样居中：跟 .brand-block/.header-right 补同一条
+   下外边距，否则它贴在行顶、比右边的齿轮高 3px。 */
+.internal-tab-reload { flex-shrink: 0; margin-bottom: var(--tab-strip-padding, 0px); }
 .internal-tab.stopped .internal-tab-label { opacity: .6; }
 .internal-tab button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
 .internal-tab { touch-action: none; user-select: none; }
 .internal-tab-label { cursor: grab !important; }
 .internal-tab-list.dragging, .internal-tab-list.dragging * { cursor: grabbing !important; }
-.internal-tab.dragging { z-index: 2; background: var(--card); border-color: var(--line); box-shadow: 0 3px 10px rgba(59, 111, 224, .14); }
+/* 底部那对外扩圆角（Chromium 的 GetBottomCornerRadius=12）：标签底边两侧各补一小块，
+   把朝里的那个角裁成一个 1/4 圆，看着就是标签从下面那块页面里长出来。
+   用矢量路径裁剪（clip-path: path），不是在渐变里"画"出来的形状：抗锯齿和别的圆角一样，
+   图形也和浏览器画的一致。两块常驻、底色继承标签自己的填色 —— 悬停/选中只换颜色，
+   不会多出一层新图层，所以不会出现"底色先出来、圆角晚一帧"的跳变。
+   注：路径里的 12 就是 --tab-flare 的值，改那个变量时这里要一起改。 */
+.internal-tab::before,
+.internal-tab::after {
+  content: ""; position: absolute; bottom: -1px; width: var(--tab-flare); height: var(--tab-flare);
+  pointer-events: none; background-color: inherit;
+  clip-path: path("M12 0A12 12 0 0 1 0 12L12 12Z");
+}
+.internal-tab::before { left: calc(var(--tab-flare) * -1); }
+.internal-tab::after { right: calc(var(--tab-flare) * -1); transform: scaleX(-1); }
+/* 拖动中的标签要跟选中标签同一套形状：上两角圆 + 底部外扩圆角，只是多一层浮起来的阴影，并且压在最上面。
+   描边去掉：--card 比标签条底色亮得多，靠填色加阴影已经能看出是拎起来的那张。 */
+.internal-tab.dragging { z-index: 3; background: var(--card); border-color: transparent; box-shadow: 0 3px 10px rgba(59, 111, 224, .14); }
 /* 内容层接管前仍保留主页画面；交互和辅助阅读由 inert / aria-hidden 禁用，避免切换中露出空白。 */
 .internal-dsh-active main { pointer-events: none; }
+/* 内部标签页盖住内容区时装饰动画没有意义：rAF 循环由 mascot/water 自己停，这里管三条 CSS 动画。
+   标签页关闭（internal-dsh-active 摘掉）后动画从暂停处继续，不需要重排。 */
+.internal-dsh-active .backdrop-character,
+.internal-dsh-active .backdrop::before,
+.internal-dsh-active .backdrop::after { animation-play-state: paused; }
 @media (prefers-reduced-motion: reduce) {
-  .internal-tab-indicator, .internal-tab, .internal-tab-close { transition: none; }
+  .internal-tab, .internal-tab-close { transition: none; }
 }
 @media (max-width: 900px) {
-  .internal-tabs header { gap: 14px; }
+  .internal-tabs.has-tabs header { gap: 14px; }
 }
 main { min-height: 0; overflow: hidden; }
 /* 设置页外壳：左侧分组导航 + 右侧面板，四个面板都在这里切（顶栏那排 tab 已取消） */
@@ -267,8 +391,8 @@ main:not(.home) .shell {
   position: relative;
   flex: 0 0 216px;
   padding: 16px 14px 24px;
-  border-right: 1px solid var(--line);
-  background: #f8fbff;
+  /* 和右侧靠底色分开（--settings-nav-bg），不再画中间那条分隔线 */
+  background: var(--settings-nav-bg);
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: #c3d3ee transparent;
@@ -295,7 +419,6 @@ main:not(.home) .shell {
 /* 控制面板是主界面：回到它的时候把左侧导航收起来，它就是一张干净的主页 */
 main.home .settings-nav { display: none; }
 main:not(.home) .settings-nav { animation: nav-in 280ms cubic-bezier(.22, 1, .36, 1) both; }
-main:not(.home) .settings-nav { background: transparent; }
 @keyframes nav-in {
   from { opacity: 0; transform: translateX(-12px); }
   to { opacity: 1; transform: none; }
@@ -407,8 +530,7 @@ main.home .settings-body { padding-top: 34px; }
     flex-wrap: wrap;
     gap: 6px;
     padding: 10px 12px;
-    border-right: 0;
-    border-bottom: 1px solid var(--line);
+    /* 窄窗口导航变成顶上一条横排：同样靠底色分界，不画线 */
   }
   .nav-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
   .nav-group + .nav-group { margin-top: 0; }
@@ -550,6 +672,16 @@ html.reduce-motion .launch-status.is-working::before { animation: none; }
 .launch-modal-fields { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; margin: -2px; padding: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
 #launchDialog .home-field > label { font-size: 12px; letter-spacing: 0; }
 .toggle.launch-auto-launch { margin: 0; font-size: 12px; }
+/* 折叠里的自动启动开关：跟上面字段拉开一点，别贴着说明行 */
+.launch-isolation-advanced-fields .launch-auto-launch { margin-top: 2px; }
+/* 目录那一行：输入框 + 「选择…」图标按钮。按钮不许被输入框挤扁，窄屏上也要还在右边 */
+.launch-path-row { display: flex; align-items: center; gap: 8px; }
+.launch-path-row input { min-width: 0; flex: 1; }
+.launch-path-row .icon-btn { flex: 0 0 auto; }
+/* 项目目录的说明只在填了东西时才有意义，空着别占一行高度 */
+#launchWorkdirHint:empty { display: none; }
+/* 复制来源两行叠着放：目录 + Profile，选起来不用横着找 */
+#launchCopyAdvancedPanel .launch-isolation-advanced-fields { display: grid; gap: 8px; }
 /* 更新提醒跟版本下拉同一行：窄到放不下时整块换到下一行，两边的控件才对得齐。
    版本类型给固定宽度，把开关和档名装进一个有边框的控件盒——跟下拉同高同圆角，读起来是一个设置项，
    而不是飘在右上角的两粒零件；剩下的宽度都留给版本。 */
@@ -567,10 +699,16 @@ html.reduce-motion .launch-status.is-working::before { animation: none; }
 .launch-isolation { display: grid; gap: 8px; }
 .launch-isolation[hidden] { display: none; }
 .launch-isolation-title { color: var(--muted); font-size: 12px; font-weight: 500; }
-.launch-isolation-tabs { display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--accent-soft); }
-.launch-isolation-tab { flex: 1 1 0; padding: 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
+/* 三档用胶囊分段切：底槽固定在那一圈，当前档的浮块是底槽上的伪元素（data-active 决定滑到哪一档），
+   切档时浮块平移过去，比背景色硬切更像真的开关。tab 本身只改文字颜色，不再各自铺底，否则浮块会被盖住。 */
+.launch-isolation-tabs { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--accent-soft); }
+/* 浮块宽度 = 等分三份：底槽内宽 100% - 两侧 padding 8px - 两道 gap 4px，再除以 3 */
+.launch-isolation-tabs::after { content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 12px) / 3); border-radius: 9px; background: var(--card); box-shadow: 0 2px 8px rgba(22, 35, 61, .1); pointer-events: none; transition: transform 240ms cubic-bezier(.22, .61, .36, 1); }
+.launch-isolation-tabs[data-active="home"]::after { transform: translateX(calc(100% + 2px)); }
+.launch-isolation-tabs[data-active="custom"]::after { transform: translateX(calc(200% + 4px)); }
+.launch-isolation-tab { flex: 1 1 0; position: relative; z-index: 1; padding: 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: color 160ms ease; }
 .launch-isolation-tab:hover { color: var(--text); }
-.launch-isolation-tab[aria-selected="true"] { background: var(--card); color: var(--accent); font-weight: 600; box-shadow: 0 2px 8px rgba(22, 35, 61, .1); }
+.launch-isolation-tab[aria-selected="true"] { color: var(--accent); font-weight: 600; }
 .launch-isolation-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
 .launch-custom-fields { display: grid; gap: 14px; }
 .launch-custom-fields[hidden] { display: none; }
@@ -581,11 +719,33 @@ html.reduce-motion .launch-status.is-working::before { animation: none; }
 /* 换档时说明行淡入，文字别硬跳 */
 #launchIsolationHint.isolation-hint-in { animation: launch-isolation-hint-in 200ms cubic-bezier(.22,.61,.36,1) both; }
 @keyframes launch-isolation-hint-in { from { opacity: 0; transform: translateY(-2px); } }
-html.reduce-motion .launch-isolation-tab { transition: none; }
+/* ---- 前两档下面的折叠：默认收起 = 什么都不用填，展开再指定名字/目录 ---- */
+/* 做成一条浅色小横条（跟 tab 底槽同色），比虚线框安静，展开后才在里面长出一块表单；
+   开合由 setLaunchAdvanced 做高度动画，箭头同步转 180°，跟仓库其它折叠的箭头方向一致。 */
+.launch-isolation-advanced { border-radius: 12px; background: var(--accent-soft); overflow: hidden; transition: box-shadow 160ms ease; }
+.launch-isolation-advanced[hidden] { display: none; }
+.launch-isolation-advanced:hover { box-shadow: inset 0 0 0 1px var(--line); }
+.launch-isolation-advanced.is-open { box-shadow: none; }
+.launch-isolation-advanced-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 500; text-align: left; cursor: pointer; transition: color 160ms ease; }
+.launch-isolation-advanced-toggle:hover { color: var(--text); }
+.launch-isolation-advanced-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
+.launch-isolation-advanced-label { flex: 1; min-width: 0; }
+.launch-isolation-advanced-chevron { width: 14px; height: 14px; flex: 0 0 auto; transition: transform 220ms cubic-bezier(.22, .61, .36, 1); }
+.launch-isolation-advanced.is-open .launch-isolation-advanced-chevron { transform: rotate(180deg); }
+.launch-isolation-advanced-panel { overflow: hidden; }
+.launch-isolation-advanced-panel[hidden] { display: none; }
+.launch-isolation-advanced-fields { display: grid; gap: 10px; padding: 0 12px 10px; }
+/* 折叠里的目录下拉也是 createUiSelect 包出来的，而 .ui-select 默认只有 148px 宽（给设置页那种小行用），
+   放在这个网格里会缩成一小截；这里让它跟下面的输入框一样占满。 */
+.launch-isolation-advanced-fields .ui-select { width: 100%; }
+html.reduce-motion .launch-isolation-tabs::after,
+html.reduce-motion .launch-isolation-tab,
+html.reduce-motion .launch-isolation-advanced-chevron { transition: none; }
 html.reduce-motion .launch-custom-fields:not([hidden]),
 html.reduce-motion #launchIsolationHint.isolation-hint-in { animation: none; }
 @media (prefers-reduced-motion: reduce) {
-  .launch-isolation-tab { transition: none; }
+  .launch-isolation-tabs::after,
+  .launch-isolation-tab, .launch-isolation-advanced-chevron { transition: none; }
   .launch-custom-fields:not([hidden]), #launchIsolationHint.isolation-hint-in { animation: none; }
 }
 /* 开关的几何参数挂在包装层上：圆钮和 range 都要读，定义一处就不会两边对不上。
@@ -921,7 +1081,13 @@ section[data-category="advanced"] .set-group + .set-label + .set-group { margin-
 .set-row.stacked .set-control input[type=text], .set-row.stacked .set-control input[type=password] { flex: 1 1 auto; min-width: 0; }
 .set-control textarea { width: 100%; min-width: 0; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--text); font: 12px/1.7 ui-monospace, monospace; }
 .set-control textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.set-control .icon-btn { width: 36px; height: 36px; border-radius: 10px; }
+/* 设置行里的图标按钮：尺寸跟这一列的其它控件一样高（--control-height = 36），
+   图标放到 24px —— 通用 .icon-btn svg 是 20px，铅笔那种只占画布 3/4 的图形缩完只剩 15px，看着太小。 */
+.set-control .icon-btn { width: var(--control-height); height: var(--control-height); border-radius: 10px; }
+.set-control .icon-btn svg { width: 24px; height: 24px; }
+/* 设置页的危险操作（浏览器数据 → 清除全部）：红字红边，和其他 ghost 按钮同尺寸 */
+.set-control .ghost.danger { color: var(--danger); border-color: #f7ccd2; }
+.set-control .ghost.danger:hover:not(:disabled) { background: #fff1f2; }
 .set-row .hint { margin: 9px 0 0; }
 /* 整行可点的开关行：给个悬停反馈，别让人猜哪儿能点 */
 .toggle.set-row {
@@ -1034,19 +1200,6 @@ section[data-category="advanced"] .set-group + .set-label + .set-group { margin-
 .hint a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
 /* 提示行里的文字型按钮（恢复档的「还原」）与链接同款 */
 .hint button { padding: 0; border: 0; background: none; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
-/* 在跑的实例（多开）：一行一个。没有实例时整块收起来（见 paintInstances） */
-.instances { margin-top: 14px; border-top: 1px solid var(--line); }
-.instances[hidden] { display: none; }
-.instances-title { display: block; color: var(--muted); font-size: 12px; letter-spacing: 0.08em; margin: 11px 0 2px; }
-.instance-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
-.instance-row:last-child { border-bottom: 0; }
-.instance-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
-.instance-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
-.instance-name { color: var(--text); font-weight: 600; font-size: 14px; letter-spacing: 0; white-space: nowrap; }
-.instance-profile { color: var(--muted); font-weight: 500; font-size: 12.5px; white-space: nowrap; }
-.instance-state { flex: 0 0 auto; color: var(--muted); font-size: 11.5px; }
-.instance-url { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
-.instance-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
 #pane-settings .hint:empty { display: none; }
 #settingsHint:not(:empty) { padding: 5px 10px; background: rgba(255, 255, 255, 0.92); border-radius: 8px; }
 .progress {
@@ -1167,6 +1320,47 @@ section[data-category="advanced"] .set-group + .set-label + .set-group { margin-
   white-space: pre-wrap;
 }
 .log-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
+/* 启动项日志弹窗：两张卡片（耗时 / 原始日志） */
+#launchLogDialog .dialog-heading { margin-bottom: 12px; }
+.launch-log-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
+.launch-log-tools[hidden] { display: none; }
+.launch-log-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 0; color: var(--muted); font-size: 13px; }
+.launch-log-loading[hidden] { display: none; }
+.launch-log-loading .spin { display: block; width: 16px; height: 16px; }
+.launch-log-tools .hint { margin: 0; }
+.launch-log-tools .hint:empty { display: none; }
+.launch-log-meta { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: rgba(127, 127, 127, .1); color: var(--text); font-size: 12px; }
+.launch-log-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: rgba(127, 127, 127, .035); }
+.launch-log-card + .launch-log-card { margin-top: 12px; }
+.launch-log-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
+.launch-log-card-head h3 { margin: 0; color: var(--text); font-size: 13px; font-weight: 650; }
+.launch-log-card-head > span { color: var(--muted); font-size: 11.5px; }
+.launch-log-head-meta { display: inline-flex; align-items: baseline; gap: 4px; }
+.launch-log-head-meta #launchLogRss::before { content: '· '; opacity: .6; }
+.launch-log-actions { display: flex; gap: 6px; }
+.launch-log-card-head .ghost { padding: 3px 10px; font-size: 11.5px; }
+.launch-log-subhead { margin: 14px 0 6px; color: var(--muted); font-size: 11.5px; }
+.launch-log-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+.launch-log-legend span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(127, 127, 127, .07); color: var(--muted); font-size: 11.5px; }
+.launch-log-legend i { width: 7px; height: 7px; border-radius: 2px; }
+.launch-log-legend b { color: var(--text); font-weight: 600; }
+.launch-log-ledger { display: flex; height: 22px; border-radius: 8px; overflow: hidden; background: rgba(127, 127, 127, .08); }
+.launch-log-ledger > span { display: flex; min-width: 3px; align-items: center; justify-content: center; overflow: hidden; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
+.ledger-plugin { background: #4d6bfe; }
+.ledger-node { background: #6f7684; }
+.ledger-other { background: #b6bcc8; }
+.ledger-native { background: #d99a2b; }
+.ledger-rest { background: #dfe3ea; }
+.launch-log-ledger > .ledger-rest { color: #4a5160; }
+.launch-log-bars { display: flex; flex-direction: column; gap: 6px; }
+.launch-log-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 56px; gap: 10px; align-items: center; font-size: 12px; }
+.launch-log-bar-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
+.launch-log-bar-row .track { height: 7px; border-radius: 999px; background: rgba(127, 127, 127, .12); overflow: hidden; }
+.launch-log-bar-row .fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #9aa4b2, #c3c9d4); }
+.launch-log-bar-row.is-plugin .fill { background: linear-gradient(90deg, #4d6bfe, #7c93ff); }
+.launch-log-bar-row .value { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
+.launch-log-note { margin: 8px 0 0; }
+.launch-log-text { margin: 0; max-height: min(38vh, 380px); min-height: 150px; overflow: auto; padding: 12px; border-radius: 10px; background: #f7faff; color: #3f5478; font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
 .ghost {
   border: 1px solid #c7d8f7;
   background: #fff;
@@ -1390,7 +1584,6 @@ section[data-category="advanced"] .set-group + .set-label + .set-group { margin-
 #pluginPanel .plugin-overview-top .ghost { margin-top: 0; }
 .plugin-home-bar { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
 .plugin-home-bar .ui-select { flex: 0 1 280px; width: min(100%, 280px); min-width: 0; margin-left: auto; }
-.plugin-home-hint { margin: -8px 0 24px; overflow-wrap: anywhere; }
 #pluginHomesDialog .ask-card { --dialog-width: 520px; }
 #pluginHomesDialog .dialog-heading { margin-bottom: 12px; }
 .plugin-homes-list { display: grid; gap: 10px; min-width: 0; }
@@ -1416,7 +1609,6 @@ section[data-category="advanced"] .set-group + .set-label + .set-group { margin-
 #pluginHomesAdd.plugin-home-action { color: var(--text); background: var(--accent-soft); }
 #pluginHomesAdd.plugin-home-action:hover:not(:disabled) { background: var(--accent-dim); }
 #launchPluginsDialog .plugin-home-bar { display: none; }
-#launchPluginsDialog .plugin-home-hint { display: none; }
 @media (max-width: 480px) {
   #pluginPanel .plugin-overview-top .profile-add { margin-left: auto; }
   .plugin-overview-top .plugin-home-bar { order: 1; flex-basis: 100%; }
@@ -1480,6 +1672,14 @@ section[data-category="advanced"] .set-group + .set-label + .set-group { margin-
   to { opacity: 1; transform: none; }
 }
 .pack-more-meta { padding: 6px 10px 2px; border-top: 1px solid var(--line); margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
+/* Profile 备份与回退：列表限高滚动，每行时间 + 涉及文件 + 回退按钮 */
+.backup-list { display: grid; gap: 8px; max-height: min(46vh, 360px); overflow-y: auto; padding: 2px 0; }
+.backup-list .hint { margin: 4px 2px; }
+.backup-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
+.backup-row-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
+.backup-time { font-size: 13px; color: var(--text); }
+.backup-files { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
+.backup-row .ghost { flex: 0 0 auto; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12px; }
 .pack-source { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
 .pack-source input { flex: 1 1 auto; min-width: 0; }
 .pack-source .ghost { flex: 0 0 auto; }
@@ -1531,25 +1731,30 @@ section[data-category="advanced"] .set-group + .set-label + .set-group { margin-
   .pack-source { flex-wrap: wrap; }
   .pack-source input { flex: 1 1 100%; }
 }
-/* 细滚动条：默认亮灰条在浅色面板上太抢眼，统一成淡蓝灰 */
-.select-panel, .plugin-list, #log, .pane, .settings-nav { scrollbar-width: thin; scrollbar-color: #c3d3ee transparent; }    .select-panel::-webkit-scrollbar, .plugin-list::-webkit-scrollbar, #log::-webkit-scrollbar,
-.pane::-webkit-scrollbar, .settings-nav::-webkit-scrollbar {
+/* 细滚动条：默认亮灰条在浅色面板上太抢眼，统一成淡蓝灰；弹窗里的长表单（添加启动项的字段区、问句列表、备份列表）也收细，别让粗条压住圆角 */
+.select-panel, .plugin-list, #log, .pane, .settings-nav, .launch-modal-fields, .dialog-body, .ask-items, .backup-list { scrollbar-width: thin; scrollbar-color: #c3d3ee transparent; }
+.select-panel::-webkit-scrollbar, .plugin-list::-webkit-scrollbar, #log::-webkit-scrollbar,
+.pane::-webkit-scrollbar, .settings-nav::-webkit-scrollbar, .launch-modal-fields::-webkit-scrollbar,
+.dialog-body::-webkit-scrollbar, .ask-items::-webkit-scrollbar, .backup-list::-webkit-scrollbar {
   width: 8px;
   height: var(--control-height);
 }
 .select-panel::-webkit-scrollbar-track, .plugin-list::-webkit-scrollbar-track, #log::-webkit-scrollbar-track,
-.pane::-webkit-scrollbar-track, .settings-nav::-webkit-scrollbar-track {
+.pane::-webkit-scrollbar-track, .settings-nav::-webkit-scrollbar-track, .launch-modal-fields::-webkit-scrollbar-track,
+.dialog-body::-webkit-scrollbar-track, .ask-items::-webkit-scrollbar-track, .backup-list::-webkit-scrollbar-track {
   background: transparent;
 }
 .select-panel::-webkit-scrollbar-thumb, .plugin-list::-webkit-scrollbar-thumb, #log::-webkit-scrollbar-thumb,
-.pane::-webkit-scrollbar-thumb, .settings-nav::-webkit-scrollbar-thumb {
+.pane::-webkit-scrollbar-thumb, .settings-nav::-webkit-scrollbar-thumb, .launch-modal-fields::-webkit-scrollbar-thumb,
+.dialog-body::-webkit-scrollbar-thumb, .ask-items::-webkit-scrollbar-thumb, .backup-list::-webkit-scrollbar-thumb {
   background: #c3d3ee;
   border-radius: var(--control-radius);
   border: 2px solid transparent;
   background-clip: content-box;
 }
 .select-panel::-webkit-scrollbar-thumb:hover, .plugin-list::-webkit-scrollbar-thumb:hover, #log::-webkit-scrollbar-thumb:hover,
-.pane::-webkit-scrollbar-thumb:hover, .settings-nav::-webkit-scrollbar-thumb:hover {
+.pane::-webkit-scrollbar-thumb:hover, .settings-nav::-webkit-scrollbar-thumb:hover, .launch-modal-fields::-webkit-scrollbar-thumb:hover,
+.dialog-body::-webkit-scrollbar-thumb:hover, .ask-items::-webkit-scrollbar-thumb:hover, .backup-list::-webkit-scrollbar-thumb:hover {
   background: #a3bcea;
   background-clip: content-box;
 }
@@ -2169,27 +2374,9 @@ html.reduce-motion #launchIconTrigger, html.reduce-motion #launchDialog .launch-
 #skillInstallDialog .skill-source-tabs button[aria-pressed=true] { border-bottom-color: var(--accent); }
 
 @media (max-width: 560px) { .version-manage-info { align-items: flex-start; flex-direction: column; gap: 2px; } .version-manage-row .version-manage-info span { max-width: 100%; } }
-
-/* 启动实例的全屏加载层：点「启动」后立刻出现，实例就绪后随任务结束自动收起 */
-.boot-overlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(18, 20, 26, .52); backdrop-filter: blur(6px); }
-.boot-overlay[hidden] { display: none; }
-.boot-card { display: grid; justify-items: center; gap: 10px; min-width: 300px; padding: 30px 36px 26px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(0, 0, 0, .3); }
-.boot-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: boot-spin .9s linear infinite; }
-@keyframes boot-spin { to { transform: rotate(360deg); } }
-.boot-title { margin: 0; font-size: 14px; font-weight: 650; }
-.boot-phase { margin: 0; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
-.boot-bar { width: 190px; height: 3px; border-radius: 999px; background: var(--line); overflow: hidden; }
-.boot-bar span { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--accent); animation: boot-slide 1.2s ease-in-out infinite; }
-@keyframes boot-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }
-.boot-hint { margin: 0; font-size: 11.5px; color: var(--muted); }
-@media (prefers-reduced-motion: reduce) {
-  .boot-spinner { animation: none; }
-  .boot-bar span { animation: none; width: 100%; }
-}
-html[data-color-scheme="dark"] .boot-overlay { background: rgba(10, 11, 14, .62); }
-
-/* 更新弹窗右上角的关闭：下载在服务端进行，关掉弹窗不影响下载 */
-.ask-card { position: relative; }
-#ask .ask-title { padding-right: 36px; }
-.ask-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
-.ask-close:hover { background: var(--accent-soft); color: var(--text); }
+
+/* 更新弹窗右上角的关闭：下载在服务端进行，关掉弹窗不影响下载 */
+.ask-card { position: relative; }
+#ask .ask-title { padding-right: 36px; }
+.ask-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
+.ask-close:hover { background: var(--accent-soft); color: var(--text); }

package/public/mascot.js

@@ -94,7 +94,7 @@
     && !document.documentElement.classList.contains('reduce-motion')
     && !document.documentElement.classList.contains('big-fish-hidden')
     && !document.documentElement.classList.contains('launcher-idle')
-    && !document.body.classList.contains('subpage-open');
+    && !document.body.classList.contains('subpage-open') && !document.documentElement.classList.contains('internal-dsh-active');
   const refreshRect = () => { rect = host.getBoundingClientRect(); };
   new ResizeObserver(refreshRect).observe(host);
   window.addEventListener('resize', refreshRect);