create-ssnode-cli 0.2.5 → 0.2.7

package/templates/web/scripts/rollback.cjs

@@ -1,13 +1,17 @@
 /**
  * description 一键回退脚本 (安全加固版)
- * v1.2
- * 执行命令：node rollback.js --env deploy
+ * v1.3
+ * 执行命令：npm run rollback
  * v1.2: 支持秘钥登录（privateKeyPath / passphrase）
+ * v1.3: 交互化——多服务器目标菜单选择(key(host));服务器有 <dist>_releases 版本归档且
+ *       可交互时,罗列全部版本(新→旧)由用户选择回退目标;无归档(旧服务器)或 CI 非交互时
+ *       回落 dist_bak 备份链逻辑
  */
 const shelljs = require('shelljs');
 const fs = require('fs');
 const os = require('os');
 const { NodeSSH } = require('node-ssh');
+const { selectEnvKey, selectRollbackVersion, confirm, closeInteractive } = require('./lib/interactive.cjs');
 const serverConfig = require('./server.config.json');
 
 class DynamicOutput {
@@ -82,67 +86,131 @@ function buildSSHConfig(config) {
   return sshConfig;
 }
 
-// 初始化环境配置
+// 初始化环境配置(--env <key> 显式选目标;未传时 TTY 下交互选,非 TTY(CI)静默用 deploy 保持旧行为。
+// key 拼错/不存在时 fail-fast,静默回落 deploy 会发错机器)
 const findEnvIndex = process.argv.indexOf('--env');
-let enviromentConfig = serverConfig.deploy;
+let enviromentConfig;
 if (findEnvIndex !== -1) {
   const configKey = process.argv[findEnvIndex + 1];
-  enviromentConfig = serverConfig[configKey] || serverConfig.deploy;
+  if (!configKey) {
+    shelljs.echo('❌ --env 缺少值: --env <目标名>(server.config.json 里的 key)');
+    process.exit(1);
+  }
+  if (!serverConfig[configKey]) {
+    shelljs.echo(`❌ --env ${configKey} 在 server.config.json 中不存在(可用: ${Object.keys(serverConfig).join(', ')})`);
+    process.exit(1);
+  }
+  enviromentConfig = serverConfig[configKey];
 }
 
 async function main() {
   const startTime = Date.now();
   try {
+    // 未显式 --env:TTY 交互选目标(菜单 `key(host)`),非 TTY 静默回落 deploy(CI 兼容)
+    if (!enviromentConfig) {
+      const envKey = process.stdin.isTTY
+        ? await selectEnvKey(serverConfig)
+        : (Object.keys(serverConfig).length === 1 ? Object.keys(serverConfig)[0] : 'deploy');
+      enviromentConfig = serverConfig[envKey];
+      output.final(`🎯 回滚目标: ${envKey}(${enviromentConfig.host})`);
+    }
+
     output.update('🚀 正在建立安全连接...');
     await ssh.connect(buildSSHConfig(enviromentConfig));
 
     const remotePath = enviromentConfig.serverWebPath;
+    const serverWebDist = enviromentConfig.serverWebDist || 'dist';
+    const releasesDir = `${serverWebDist}_releases`;
     output.update('🔍 正在检索历史备份版本...');
 
-    // 检查是否存在一级备份目录和二级备份压缩包
-    const [checkBakDir, checkLastBakFile] = await Promise.all([
-      ssh.execCommand('ls -d dist_bak', { cwd: remotePath }),
-      ssh.execCommand('ls dist_last_bak.tar.gz', { cwd: remotePath })
-    ]);
-
-    const hasBakDir = checkBakDir.code === 0;
-    const hasLastBakFile = checkLastBakFile.code === 0;
+    // 新版发布归档(<dist>_releases,由 publish v1.7+ 每次发布创建),按 mtime 新→旧
+    const lsReleases = await ssh.execCommand(`ls -1t ${releasesDir}/*.tar.gz`, { cwd: remotePath });
+    const releases = (lsReleases.code === 0 ? lsReleases.stdout : '')
+      .split('\n')
+      .map((s) => s.trim())
+      .filter(Boolean)
+      .map((p) => {
+        const name = p.split('/').pop();
+        const m = name.match(/^v(.+)_(\d{14})\.tar\.gz$/);
+        const ts = m ? m[2] : '';
+        return {
+          name,
+          version: m ? m[1] : name.replace(/\.tar\.gz$/, ''),
+          time: ts
+            ? `${ts.slice(0, 4)}-${ts.slice(4, 6)}-${ts.slice(6, 8)} ${ts.slice(8, 10)}:${ts.slice(10, 12)}:${ts.slice(12, 14)}`
+            : ''
+        };
+      });
 
     let rollbackCmds = [];
     let successMsg = '';
 
-    if (hasBakDir) {
-      // 场景 A: 正常回退至上一版本
-      output.update('🔄 发现可用历史版本，正在执行回退并重组备份链...');
-      rollbackCmds = [
-        'rm -rf dist_rollback_bak', // 清理旧的回退现场记录
-        'mv dist dist_rollback_bak', // 保护当前出故障的版本
-        'mv dist_bak dist' // 核心回退操作
-      ];
-
-      // 关键补充逻辑：如果二级备份存在，则将其解压填补到一级备份的空位
-      if (hasLastBakFile) {
-        rollbackCmds.push(
-          'tar zxvf dist_last_bak.tar.gz', // 这会解压出 dist_bak 文件夹
-          'rm -rf dist_last_bak.tar.gz' // 可选：删除已使用的旧压缩包，或保留
-        );
+    if (releases.length && process.stdin.isTTY) {
+      // 场景 A(交互):罗列全部归档版本,用户选择回退目标
+      const chosen = await selectRollbackVersion(releases);
+      if (!(await confirm(`⚠️  确认将 ${serverWebDist} 回退到版本 ${chosen.version}?`))) {
+        output.final('已取消回退。');
+        return;
       }
-      successMsg = '已成功回退至上一个稳定版本，并自动同步备份链';
-    } else if (hasLastBakFile) {
-      // 场景 B: 一级备份丢失，直接从二级压缩包恢复
-      output.update('📦 发现存档版本，正在紧急恢复...');
+      output.update(`🔄 正在回退至版本 ${chosen.version}...`);
       rollbackCmds = [
-        'rm -rf dist_rollback_bak',
-        'mv dist dist_rollback_bak',
-        'tar zxvf dist_last_bak.tar.gz',
-        'mv dist_bak dist'
+        `rm -rf ${serverWebDist}_rollback_bak`, // 清理旧的回退现场记录
+        `mv ${serverWebDist} ${serverWebDist}_rollback_bak`, // 保护当前出故障的版本
+        `tar zxf ${releasesDir}/${chosen.name}` // 归档内含 ${serverWebDist}/ 前缀,解包即复原
       ];
-      successMsg = '已成功从存档文件恢复至较早的历史版本';
+      successMsg = `已成功回退至版本 ${chosen.version}`;
     } else {
-      // 无可回退历史(dist_bak 与 dist_last_bak.tar.gz 均不存在)不算失败:
-      // 联调/初部署后常见。仅输出说明并正常退出(exit 0),让根编排继续后续服务(backend)回滚。
-      output.final('ℹ️ 未发现可回退的历史备份(dist_bak 与 dist_last_bak.tar.gz 均不存在),跳过 web 回滚。');
-      return;
+      // 场景 B(旧服务器仅有 dist_bak 备份链,或 CI 非交互):沿用原备份链回退逻辑。
+      // 新版 publish 仍双写 dist_bak 链,故该路径对新部署也有效。
+      const [checkBakDir, checkLastBakFile] = await Promise.all([
+        ssh.execCommand(`ls -d ${serverWebDist}_bak`, { cwd: remotePath }),
+        ssh.execCommand(`ls ${serverWebDist}_last_bak.tar.gz`, { cwd: remotePath })
+      ]);
+
+      const hasBakDir = checkBakDir.code === 0;
+      const hasLastBakFile = checkLastBakFile.code === 0;
+
+      if (hasBakDir) {
+        // B-1: 正常回退至上一版本
+        output.update('🔄 发现可用历史版本，正在执行回退并重组备份链...');
+        rollbackCmds = [
+          `rm -rf ${serverWebDist}_rollback_bak`, // 清理旧的回退现场记录
+          `mv ${serverWebDist} ${serverWebDist}_rollback_bak`, // 保护当前出故障的版本
+          `mv ${serverWebDist}_bak ${serverWebDist}` // 核心回退操作
+        ];
+
+        // 关键补充逻辑：如果二级备份存在，则将其解压填补到一级备份的空位
+        if (hasLastBakFile) {
+          rollbackCmds.push(
+            `tar zxvf ${serverWebDist}_last_bak.tar.gz`, // 这会解压出 <dist>_bak 文件夹
+            `rm -rf ${serverWebDist}_last_bak.tar.gz` // 可选：删除已使用的旧压缩包，或保留
+          );
+        }
+        successMsg = '已成功回退至上一个稳定版本，并自动同步备份链';
+      } else if (hasLastBakFile) {
+        // B-2: 一级备份丢失，直接从二级压缩包恢复
+        output.update('📦 发现存档版本，正在紧急恢复...');
+        rollbackCmds = [
+          `rm -rf ${serverWebDist}_rollback_bak`,
+          `mv ${serverWebDist} ${serverWebDist}_rollback_bak`,
+          `tar zxvf ${serverWebDist}_last_bak.tar.gz`,
+          `mv ${serverWebDist}_bak ${serverWebDist}`
+        ];
+        successMsg = '已成功从存档文件恢复至较早的历史版本';
+      } else {
+        // 无可回退历史(备份链与版本归档均不存在)不算失败:
+        // 联调/初部署后常见。仅输出说明并正常退出(exit 0),让根编排继续后续服务(backend)回滚。
+        output.final(`ℹ️ 未发现可回退的历史备份(${serverWebDist}_bak、${serverWebDist}_last_bak.tar.gz 与 ${releasesDir} 均不存在),跳过 web 回滚。`);
+        return;
+      }
+
+      // 非归档路径是盲回退(仅上一版),交互下执行前确认一次
+      if (process.stdin.isTTY) {
+        if (!(await confirm('⚠️  沿用备份链回退到上一版本,确认执行?'))) {
+          output.final('已取消回退。');
+          return;
+        }
+      }
     }
 
     // 按顺序执行指令
@@ -161,6 +229,7 @@ async function main() {
     output.final(`❌ 回退失败: ${error.message}`);
     process.exit(1);
   } finally {
+    closeInteractive(); // 释放 readline 的 stdin 句柄,进程才能自然退出
     ssh.dispose();
   }
 }

package/templates/web/scripts/server.config.example.json

@@ -12,6 +12,7 @@
     "serverWebPath": "前端部署目录",
     "serverWebDist": "dist",
     "preview": "预览环境地址",
+    "keepVersions": 3,
     "splitIncludes": [
       "static"
     ],
@@ -32,5 +33,21 @@
     "preview": "预览环境地址",
     "splitIncludes": [],
     "splitUpload": true
+  },
+  "machine-b": {
+    "host": "服务器IP",
+    "port": 22,
+    "username": "服务器账号",
+    "authMode": "password || privateKey",
+    "password": "服务器密码",
+    "privateKey": {
+      "privateKeyPath": "秘钥地址",
+      "passphrase": "秘钥密码"
+    },
+    "serverWebPath": "前端部署目录",
+    "serverWebDist": "dist",
+    "preview": "预览环境地址",
+    "splitIncludes": [],
+    "splitUpload": false
   }
 }

package/templates/web/src/layouts/Background.module.less

@@ -191,10 +191,6 @@
         flex-direction: row;
         align-items: center;
         height: 44px;
-
-        .breadcrumb {
-          color: #333840;
-        }
       }
 
       .contentview {

package/templates/web/src/layouts/Background.tsx

@@ -1,6 +1,7 @@
-import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
-import { Outlet, useLocation, useNavigate } from 'react-router-dom';
-import { Menu, Avatar, Breadcrumb, ConfigProvider, Dropdown } from 'antd';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
+import { useLocation, useNavigate, useOutlet } from 'react-router-dom';
+import { Menu, Avatar, ConfigProvider, Dropdown } from 'antd';
+import { useKeepAliveRef, KeepAlive } from 'keepalive-for-react';
 import {
   DownOutlined,
   UserOutlined,
@@ -9,7 +10,6 @@ import {
   MenuUnfoldOutlined,
   DesktopOutlined
 } from '@ant-design/icons';
-import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
 import zhCn from 'dayjs/locale/zh-cn';
 import ZhCN from 'antd/locale/zh_CN';
@@ -19,32 +19,11 @@ import ProjectConfig from '../../config/project.config';
 import api from '@/services/api';
 import { RouteConfigItem } from '@/types';
 import { airtableTheme } from '@/styles/theme';
+import PageTabs from './components/PageTabs';
+import usePageTabs from './components/PageTabs/usePageTabs';
 
 dayjs.locale(zhCn);
 
-/**
- * 面包屑
- * @param {*} route
- * @param {*} params
- * @returns
- */
-function BreadcrumbRoute({ route }) {
-  const { title = '', path = '' } = route;
-  return (
-    <a href={path} key={path} style={{ color: 'unset' }}>
-      {title}
-    </a>
-  );
-}
-
-BreadcrumbRoute.propTypes = {
-  route: PropTypes.object
-};
-
-BreadcrumbRoute.defaultProps = {
-  route: null
-};
-
 export default function BackgroundLayout() {
   //
   const location = useLocation();
@@ -56,22 +35,31 @@ export default function BackgroundLayout() {
   const [collapsed, setCollapsed] = useState(false);
 
   // 滑块菜单配置
-  const [sliderMenuConfig, setSliderMenuConfig] = useState({
+  const [sliderMenuConfig, setSliderMenuConfig] = useState<{
+    selectKeys: string[];
+    openKeys: string[];
+  }>({
     selectKeys: [],
     openKeys: []
   });
 
-  /**
-   * 面包屑
-   */
-  const BreadcrumbRenderItem = useCallback(
-    (route) => (
-      <a key={route.path} href={route.path} style={{ color: 'unset', fontSize: 16 }}>
-        {route.title}
-      </a>
-    ),
-    []
-  );
+  // KeepAlive 缓存句柄:关闭页签时销毁对应缓存
+  const aliveRef = useKeepAliveRef();
+
+  // 当前页面内容(包进 KeepAlive 前的 Outlet)
+  const outlet = useOutlet();
+
+  // 多页签状态与操作(tabs 数据 + 关闭/刷新/拖拽等),缓存销毁全走 aliveRef —— 见 usePageTabs
+  const {
+    tabs,
+    activeKey,
+    activeTab,
+    closeTab,
+    closeOthers,
+    closeAll,
+    refreshTab,
+    moveTab
+  } = usePageTabs(aliveRef);
 
   /**
    * 渲染菜单图标
@@ -117,32 +105,6 @@ export default function BackgroundLayout() {
     setMenus(bgLayoutRoute?.children || []);
   }, []);
 
-  /**
-   * 面包屑层级与左侧菜单保持一致:
-   * 在菜单树(menus)中找到当前路径对应的节点链,作为面包屑。
-   * 这样面包屑只展示菜单里真正可见的层级,不会掺入布局包裹层(系统/AuthLayout/Background)。
-   */
-  const breadcrumbRoutes = useMemo(() => {
-    const findMenuPath = (
-      items: RouteConfigItem[],
-      targetPath: string,
-      acc: RouteConfigItem[] = []
-    ): RouteConfigItem[] | null =>
-      items
-        .filter((it) => it.name && !it.hideInMenu)
-        .reduce<RouteConfigItem[] | null>((found, it) => {
-          if (found) return found;
-          const cur = [...acc, it];
-          if (it.fullPath === targetPath) return cur;
-          if (it.children?.length) {
-            const r = findMenuPath(it.children, targetPath, cur);
-            if (r) return r;
-          }
-          return null;
-        }, null);
-    return findMenuPath(menus, location.pathname) || [];
-  }, [menus, location.pathname]);
-
   /**
    * 渲染菜单Items
    */
@@ -256,19 +218,31 @@ export default function BackgroundLayout() {
               </div>
             </div>
             <div className={styles.right}>
+              {/* 页签条:取代面包屑,已打开页面切换保留状态(KeepAlive 缓存) */}
               <div className={styles.route}>
-                <Breadcrumb
-                  items={breadcrumbRoutes.map((item) => ({
-                    key: item.name,
-                    title: item.name,
-                    path: item.fullPath
-                  }))}
-                  className={styles.breadcrumb}
-                  itemRender={BreadcrumbRenderItem}
+                <PageTabs
+                  tabs={tabs}
+                  activeKey={activeKey}
+                  onTabClick={activeTab}
+                  onTabClose={closeTab}
+                  onCloseOthers={closeOthers}
+                  onCloseAll={closeAll}
+                  onRefresh={refreshTab}
+                  onTabReorder={moveTab}
                 />
               </div>
               <div className={styles.contentview}>
-                <Outlet />
+                {/*
+                  KeepAlive 缓存页面组件,切页签不丢状态。三条约束:
+                  1. React 18 必须锁 keepalive-for-react@4.x(5.x+ 面向 React 19.2+);
+                  2. 项目勿开启 React.StrictMode,与 KeepAlive 开发模式不兼容;
+                  3. v4 缓存页失活后 effect 仍会执行,后台页不要写裸 setInterval 轮询,
+                     需要感知失活时用 useKeepAliveContext().active 控制。
+                  缓存 key 取 pathname(不含 search):同页不同查询参数共享一份缓存,与页签语义一致。
+                */}
+                <KeepAlive activeCacheKey={location.pathname} max={20} aliveRef={aliveRef}>
+                  {outlet}
+                </KeepAlive>
               </div>
             </div>
           </div>

package/templates/web/src/layouts/components/PageTabs/SortableTab.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { Dropdown } from 'antd';
+import { CloseOutlined, ReloadOutlined, MinusCircleOutlined } from '@ant-design/icons';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import type { PageTabItem } from './usePageTabs';
+import styles from './index.module.less';
+
+/**
+ * 可拖拽单签(PageTabs 内部子组件,非公共组件),整签可拖。
+ *
+ * 结构分两层,有且只有一个理由:激活签要被 antd Dropdown 包裹做右键批量菜单,
+ * 而 rc-trigger 会 cloneElement 覆写 child 的 ref —— sortable 的测量 ref(setNodeRef)
+ * 只能挂在外层把手层,让 Dropdown 的 child 保持 ref-free:
+ * - 外层把手层:setNodeRef + 让位 transform + dnd attributes/listeners
+ * - 内层 .tab:原样保留全部既有交互(点击/Enter 跳转、关闭按钮、hover、无障碍焦点)
+ *
+ * dnd listeners 挂外层、事件由内层冒泡触发;点击与拖拽靠 4px 位移阈值区分
+ * (PointerSensor 配置在 index.tsx)。attributes 自带的 role/tabIndex 摘除,
+ * 保持内层 .tab 是唯一 tab stop(不产生双焦点位)。
+ */
+interface SortableTabProps {
+  tab: PageTabItem;
+  /** 挂 data-tab-key 供容器层 scrollIntoView 锚定激活签 */
+  dataTabKey: string;
+  isActive: boolean;
+  onTabClick: (tab: PageTabItem) => void;
+  onTabClose: (tab: PageTabItem) => void;
+  onRefresh: () => void;
+  onCloseOthers: () => void;
+  onCloseAll: () => void;
+}
+
+export default function SortableTab({
+  tab,
+  dataTabKey,
+  isActive,
+  onTabClick,
+  onTabClose,
+  onRefresh,
+  onCloseOthers,
+  onCloseAll
+}: SortableTabProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: tab.key
+  });
+
+  // attributes 的 role/tabIndex 摘除(见头部注释),保留 aria-roledescription 等播报属性;
+  // delete 不产生未用变量(@typescript-eslint/no-unused-vars 无 argsIgnorePattern 兜底)
+  const dragAttributes = { ...attributes };
+  delete dragAttributes.role;
+  delete dragAttributes.tabIndex;
+  // 右键留给 Dropdown 批量菜单、中键留给浏览器:仅主键进拖拽传感器
+  const dragListeners: typeof listeners = {
+    ...listeners,
+    onPointerDown: (event: React.PointerEvent) => {
+      if (event.button !== 0) return;
+      listeners?.onPointerDown?.(event);
+    }
+  };
+
+  // 批量菜单(刷新/关闭其他/全部)只对激活页签有意义,非激活页签不弹空菜单
+  const menuItems = [
+    {
+      key: 'refresh',
+      label: '刷新当前页签',
+      icon: <ReloadOutlined />,
+      onClick: onRefresh
+    },
+    {
+      key: 'closeOthers',
+      label: '关闭其他页签',
+      icon: <MinusCircleOutlined />,
+      onClick: onCloseOthers
+    },
+    {
+      key: 'closeAll',
+      label: '关闭全部页签',
+      icon: <CloseOutlined />,
+      onClick: onCloseAll
+    }
+  ];
+
+  // 让位平移挂外层(transform 与 transition 同属 sortable 节点);拖起态叠加 1.05 放大
+  // 与描边阴影(视觉「拎起来了」),transition 在拖起中置空保证实时跟手,落位/复位才走过渡
+  const dragTransform = isDragging
+    ? `${CSS.Translate.toString(transform)} scale(1.05)`
+    : CSS.Translate.toString(transform);
+  const tabNode = (
+    <div
+      data-tab-key={dataTabKey}
+      className={`${styles.tab} ${isActive ? styles.active : ''} ${isDragging ? styles.dragging : ''
+      }`}
+      role="button"
+      tabIndex={0}
+      title={tab.title}
+      onClick={() => onTabClick(tab)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') onTabClick(tab);
+      }}
+    >
+      <span className={styles.tabTitle}>{tab.title}</span>
+      <CloseOutlined
+        className={styles.closeIcon}
+        onClick={(e) => {
+          e.stopPropagation();
+          onTabClose(tab);
+        }}
+      />
+    </div>
+  );
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: dragTransform,
+        transition: isDragging ? undefined : transition
+      }}
+      className={`${styles.sortableWrap} ${isDragging ? styles.wrapDragging : ''}`}
+      {...dragAttributes}
+      {...dragListeners}
+    >
+      {isActive ? (
+        <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']}>
+          {tabNode}
+        </Dropdown>
+      ) : (
+        tabNode
+      )}
+    </div>
+  );
+}

package/templates/web/src/layouts/components/PageTabs/index.module.less

@@ -0,0 +1,105 @@
+// 多页签条(《后台多页签KeepAlive方案》§3.3):视觉令牌源 docs/design.style.md
+// 白底胶囊无描边、选中主色底 #009393 反白
+// 2026-10-29 拖拽调序:整签可拖(cursor grab)、让位动画、拖起态主色描边+投影
+.pageTabs {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 100%;
+  // 页签多时横向滚动,隐藏滚动条(sidebar 同款口径)
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  &::-webkit-scrollbar {
+    height: 0;
+  }
+}
+
+// 拖拽把手包装层:activator 与 sortable 节点同体(整签可拖),自身不占额外语义
+.sortableWrap {
+  display: flex;
+  flex-shrink: 0;
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.tab {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 15px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 999px;
+  background-color: #ffffff;
+  color: #666666;
+  font-size: 14px;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  min-width: 80px;
+
+  &:hover {
+    color: #009393;
+  }
+
+  .tabTitle {
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .closeIcon {
+    // 常显:非选中页签也可直接关闭
+    font-size: 11px;
+
+    &:hover {
+      color: #ff3234;
+    }
+  }
+}
+
+// 选中页签:主色实心胶囊反白(含关闭按钮)
+.active {
+  background-color: black;
+  color: #ffffff;
+  font-weight: 600;
+
+  &:hover {
+    color: #ffffff;
+  }
+
+  .closeIcon {
+    visibility: visible;
+    color: #ffffff;
+
+    &:hover {
+      color: #ffffff;
+    }
+  }
+}
+
+// 拖起中的签:主色 1px 描边 + 投影(design.style.md:1px 描边口径),保持原底色/选中色。
+// 放大效果由 SortableTab 内联 transform 拼进 dnd-kit 平移(两处 CSS transform 会互相
+// 抵掉,故这里不写 transform,只管描边阴影与层级)
+.dragging {
+  border: 1px solid #009393;
+  box-shadow: 0 4px 12px rgba(0, 147, 147, 0.25);
+}
+
+// 拖起中的把手层:浮于其余签之上(跨多签拖拽不被压住)
+.wrapDragging {
+  z-index: 10;
+  position: relative;
+  cursor: grabbing;
+}