create-ssnode-cli 0.2.6 → 0.2.7

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

@@ -191,88 +191,6 @@
         flex-direction: row;
         align-items: center;
         height: 44px;
-
-        // 页签条:胶囊页签横向排列,超出滚动
-        .tabbar {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          gap: 8px;
-          width: 100%;
-          overflow-x: auto;
-          overflow-y: hidden;
-
-          // 隐藏滚动条美化
-          &::-webkit-scrollbar {
-            height: 4px;
-          }
-
-          &::-webkit-scrollbar-thumb {
-            background: #d0d7e2;
-            border-radius: 2px;
-          }
-        }
-
-        // 胶囊页签
-        .tab {
-          display: inline-flex;
-          align-items: center;
-          gap: 6px;
-          padding: 4px 12px;
-          border: 1px solid #d0d7e2;
-          border-radius: 999px;
-          color: #333840;
-          font-size: 13px;
-          line-height: 1.4;
-          white-space: nowrap;
-          cursor: pointer;
-          user-select: none;
-          background-color: transparent;
-          transition: color 0.2s, border-color 0.2s, background-color 0.2s;
-
-          &:hover {
-            border-color: #1667ff;
-            color: #1667ff;
-          }
-
-          // 激活态:主题蓝实底
-          &.tabActive {
-            background-color: #1667ff;
-            border-color: #1667ff;
-            color: #ffffff;
-
-            .tabClose {
-              color: rgba(255, 255, 255, 0.75);
-
-              &:hover {
-                color: #ffffff;
-                background-color: rgba(255, 255, 255, 0.2);
-              }
-            }
-          }
-
-          .tabTitle {
-            // Airtable: interactive 常规字号
-            font-size: 13px;
-          }
-
-          .tabClose {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-            font-size: 12px;
-            line-height: 1;
-            transition: color 0.2s, background-color 0.2s;
-
-            &:hover {
-              color: #1667ff;
-              background-color: rgba(22, 103, 255, 0.1);
-            }
-          }
-        }
       }
 
       .contentview {

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

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+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';
@@ -19,21 +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);
 
-/**
- * 页签项:一个已打开的后台页面
- */
-interface TabItem {
-  // 缓存/去重 key,取路由 fullPath
-  key: string;
-  // 页签标题(取菜单节点 name)
-  title: string;
-  // 跳转路径
-  path: string;
-}
-
 export default function BackgroundLayout() {
   //
   const location = useLocation();
@@ -53,15 +43,24 @@ export default function BackgroundLayout() {
     openKeys: []
   });
 
-  // 已打开页签
-  const [tabs, setTabs] = useState<TabItem[]>([]);
-
   // KeepAlive 缓存句柄:关闭页签时销毁对应缓存
   const aliveRef = useKeepAliveRef();
 
   // 当前页面内容(包进 KeepAlive 前的 Outlet)
   const outlet = useOutlet();
 
+  // 多页签状态与操作(tabs 数据 + 关闭/刷新/拖拽等),缓存销毁全走 aliveRef —— 见 usePageTabs
+  const {
+    tabs,
+    activeKey,
+    activeTab,
+    closeTab,
+    closeOthers,
+    closeAll,
+    refreshTab,
+    moveTab
+  } = usePageTabs(aliveRef);
+
   /**
    * 渲染菜单图标
    * route.icon / route.selectIcon 在配置中以字符串路径形式声明(指向 public/files 下 svg)。
@@ -106,65 +105,6 @@ export default function BackgroundLayout() {
     setMenus(bgLayoutRoute?.children || []);
   }, []);
 
-  /**
-   * 在菜单树中查找当前路径对应的节点链(不含布局包裹层),
-   * 取最深层节点的 name 作为页签标题;未命中返回 null(如 404,不建页签)。
-   */
-  const currentTab = 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);
-    const routes = findMenuPath(menus, location.pathname);
-    if (!routes?.length) return null;
-    const target = routes[routes.length - 1];
-    return { key: target.fullPath, title: target.name, path: target.fullPath };
-  }, [menus, location.pathname]);
-
-  // 路由变化 → 同步页签:新页面追加页签,已有页面仅激活
-  useEffect(() => {
-    if (!currentTab) return;
-    setTabs((prev) => {
-      const exists = prev.some((tab) => tab.key === currentTab.key);
-      return exists ? prev : [...prev, currentTab];
-    });
-  }, [currentTab]);
-
-  /**
-   * 关闭页签:当前激活页签被关时跳相邻页签,全部关完回落默认页;
-   * 同时销毁 KeepAlive 缓存,释放内存。
-   */
-  const handleCloseTab = useCallback(
-    (tabKey: string) => {
-      setTabs((prev) => {
-        const idx = prev.findIndex((tab) => tab.key === tabKey);
-        if (idx < 0) return prev;
-        const next = prev.filter((tab) => tab.key !== tabKey);
-        if (tabKey === location.pathname) {
-          // 优先左侧页签,没有则右侧,再没有回落默认页
-          const neighbor = next[idx - 1] || next[idx] || null;
-          navigate(neighbor ? neighbor.path : '/page-data');
-        }
-        return next;
-      });
-      aliveRef.current?.destroy(tabKey);
-    },
-    [location.pathname, navigate, aliveRef]
-  );
-
   /**
    * 渲染菜单Items
    */
@@ -278,45 +218,18 @@ export default function BackgroundLayout() {
               </div>
             </div>
             <div className={styles.right}>
-              {/* 页签条(胶囊状):替换原面包屑位置,已打开页面切换保留状态 */}
+              {/* 页签条:取代面包屑,已打开页面切换保留状态(KeepAlive 缓存) */}
               <div className={styles.route}>
-                <div className={styles.tabbar}>
-                  {tabs.map((tab) => {
-                    const active = tab.key === location.pathname;
-                    return (
-                      <div
-                        key={tab.key}
-                        className={`${styles.tab} ${active ? styles.tabActive : ''}`}
-                        onClick={() => !active && navigate(tab.path)}
-                        role="button"
-                        tabIndex={0}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter' || e.key === ' ') navigate(tab.path);
-                        }}
-                      >
-                        <span className={styles.tabTitle}>{tab.title}</span>
-                        <span
-                          className={styles.tabClose}
-                          title="关闭页签"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            handleCloseTab(tab.key);
-                          }}
-                          role="button"
-                          tabIndex={0}
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                              e.stopPropagation();
-                              handleCloseTab(tab.key);
-                            }
-                          }}
-                        >
-                          ×
-                        </span>
-                      </div>
-                    );
-                  })}
-                </div>
+                <PageTabs
+                  tabs={tabs}
+                  activeKey={activeKey}
+                  onTabClick={activeTab}
+                  onTabClose={closeTab}
+                  onCloseOthers={closeOthers}
+                  onCloseAll={closeAll}
+                  onRefresh={refreshTab}
+                  onTabReorder={moveTab}
+                />
               </div>
               <div className={styles.contentview}>
                 {/*

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;
+}

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

@@ -0,0 +1,110 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  DndContext,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  closestCenter,
+  type DragEndEvent,
+  type Modifier
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  horizontalListSortingStrategy,
+  sortableKeyboardCoordinates
+} from '@dnd-kit/sortable';
+import type { PageTabItem } from './usePageTabs';
+import SortableTab from './SortableTab';
+import styles from './index.module.less';
+
+/**
+ * 多页签条(《后台多页签KeepAlive方案》§3.3/§3.5):取代面包屑的 TagsView。
+ * 纯展示组件:数据与操作全由 usePageTabs 持有,本组件只渲染与转发事件。
+ * 右键页签呼出批量菜单(关闭其他/全部/刷新当前);页签常显关闭按钮
+ * (含工作台,唯一禁关规则「最后一个页签」由 usePageTabs.closeTab 兜底)。
+ *
+ * 2026-10-29 拖拽调序(@dnd-kit):
+ * - PointerSensor distance 4px —— 点击/Enter 跳转与拖拽按位移阈值区分,不误触
+ * - KeyboardSensor + sortableKeyboardCoordinates —— Space 拾起/方向键移动/Esc 取消
+ * - closestCenter 横向胶囊签条落点判定;DndContext 内建 autoScroll 溢出时边缘自动滚
+ * - 激活签变化时滚入视口(新签 append 最右后,溢出场景取代原「置顶天然可见」)
+ */
+interface PageTabsProps {
+  tabs: PageTabItem[];
+  activeKey: string;
+  onTabClick: (tab: PageTabItem) => void;
+  onTabClose: (tab: PageTabItem) => void;
+  onCloseOthers: () => void;
+  onCloseAll: () => void;
+  onRefresh: () => void;
+  /** 拖拽调序:把 fromKey 挪到 overKey 当前所在位(使用方 = usePageTabs.moveTab) */
+  onTabReorder: (fromKey: string, overKey: string) => void;
+}
+
+/**
+ * 横向拖拽限制:把跟随位移的 y 钉死为 0(官方 restrictToHorizontalAxis 的就地复刻 ——
+ * core 6.3.1 的 npm 包未内置该 modifier,只有 Modifier 类型与 applyModifiers)。
+ * 只影响拖起后的跟手渲染,不影响落点判定(closestCenter 本就只看水平中心距)。
+ */
+const restrictToHorizontalAxis: Modifier = ({ transform }) => ({ ...transform, y: 0 });
+
+export default function PageTabs({
+  tabs,
+  activeKey,
+  onTabClick,
+  onTabClose,
+  onCloseOthers,
+  onCloseAll,
+  onRefresh,
+  onTabReorder
+}: PageTabsProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // 激活签(新开/切回)滚入视口:inline nearest 只在溢出方向补滚,已可见则不动
+  useEffect(() => {
+    containerRef.current
+      ?.querySelector<HTMLElement>(`[data-tab-key="${CSS.escape(activeKey)}"]`)
+      ?.scrollIntoView({ inline: 'nearest', behavior: 'smooth' });
+  }, [activeKey, tabs.length]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    // 键盘拾起/落键只用 Space:默认配置含 Enter,会与页签 Enter 跳转打架
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+      keyboardCodes: { start: ['Space'], end: ['Space'], cancel: ['Escape'] }
+    })
+  );
+
+  const handleDragEnd = ({ active, over }: DragEndEvent) => {
+    if (over && active.id !== over.id) onTabReorder(String(active.id), String(over.id));
+  };
+
+  return (
+    <div className={styles.pageTabs} ref={containerRef}>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        modifiers={[restrictToHorizontalAxis]}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext items={tabs.map((t) => t.key)} strategy={horizontalListSortingStrategy}>
+          {tabs.map((tab) => (
+            <SortableTab
+              key={tab.key}
+              dataTabKey={tab.key}
+              tab={tab}
+              isActive={tab.key === activeKey}
+              onTabClick={onTabClick}
+              onTabClose={onTabClose}
+              onRefresh={onRefresh}
+              onCloseOthers={onCloseOthers}
+              onCloseAll={onCloseAll}
+            />
+          ))}
+        </SortableContext>
+      </DndContext>
+    </div>
+  );
+}