one-design-next 0.0.61 → 0.0.63

package/dist/preview-panel/CsvPreviewTable.js

@@ -0,0 +1,49 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { PREVIEW_CSV_MAX_ROWS } from "./parseCsv";
+/** 预览用只读表格；列数按首行对齐，短行补空、长行多出的列仍展示。 */
+export function CsvPreviewTable(_ref) {
+  var data = _ref.data;
+  var headers = data.headers,
+    rows = data.rows,
+    truncated = data.truncated,
+    totalDataRows = data.totalDataRows;
+  var colCount = Math.max.apply(Math, [headers.length].concat(_toConsumableArray(rows.map(function (r) {
+    return r.length;
+  })), [1]));
+  var displayHeaders = headers.length > 0 ? Array.from({
+    length: colCount
+  }, function (_, i) {
+    var _headers$i;
+    return (_headers$i = headers[i]) !== null && _headers$i !== void 0 ? _headers$i : "\u5217 ".concat(i + 1);
+  }) : Array.from({
+    length: colCount
+  }, function (_, i) {
+    return "\u5217 ".concat(i + 1);
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-preview-panel-csv": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-preview-panel-csv-scroll": true
+  }, /*#__PURE__*/React.createElement("table", {
+    "data-odn-preview-panel-csv-table": true
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, displayHeaders.map(function (h, i) {
+    return /*#__PURE__*/React.createElement("th", {
+      key: "h-".concat(i),
+      scope: "col"
+    }, h || ' ');
+  }))), /*#__PURE__*/React.createElement("tbody", null, rows.map(function (row, ri) {
+    return /*#__PURE__*/React.createElement("tr", {
+      key: "r-".concat(ri)
+    }, Array.from({
+      length: colCount
+    }, function (_, ci) {
+      var _row$ci;
+      return /*#__PURE__*/React.createElement("td", {
+        key: "c-".concat(ri, "-").concat(ci)
+      }, (_row$ci = row[ci]) !== null && _row$ci !== void 0 ? _row$ci : '');
+    }));
+  })))), truncated && /*#__PURE__*/React.createElement("div", {
+    "data-odn-preview-panel-csv-truncated": true,
+    role: "status"
+  }, "\u4EC5\u9884\u89C8\u524D ".concat(PREVIEW_CSV_MAX_ROWS, " \u884C\uFF08\u5171 ").concat(totalDataRows, " \u884C\uFF09")));
+}

package/dist/preview-panel/index.js

@@ -1,12 +1,15 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["tooltip"];
-import { useRef } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import Button from "../button";
 import Icon from "../icon";
 import Tooltip from "../tooltip";
 import StreamText from "../stream-text";
 import { OdnOverlayVerticalScrollbar, useOverlayScrollbarReveal } from "../overlay-vertical-scrollbar";
+import { CsvPreviewTable } from "./CsvPreviewTable";
+import { isCsvTab, parseCsv } from "./parseCsv";
 import "./style";
 /** 内部辅助：有 tooltip 文案时包裹 Tooltip，否则仅渲染按钮 */
 function ActionButton(_ref) {
@@ -48,14 +51,84 @@ export function PreviewPanel(_ref2) {
   var isOpen = open !== null && open !== void 0 ? open : tabs.length > 0;
   var isEmpty = tabs.length === 0;
   var previewScrollRef = useRef(null);
+  var tabsScrollRef = useRef(null);
+  var _useState = useState({
+      canLeft: false,
+      canRight: false
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    tabScroll = _useState2[0],
+    setTabScroll = _useState2[1];
   var _useOverlayScrollbarR = useOverlayScrollbarReveal(),
     previewScrollbarReveal = _useOverlayScrollbarR.reveal,
     handlePreviewScroll = _useOverlayScrollbarR.onScroll;
+  var updateTabScrollState = function updateTabScrollState() {
+    var el = tabsScrollRef.current;
+    if (!el) {
+      setTabScroll({
+        canLeft: false,
+        canRight: false
+      });
+      return;
+    }
+    var max = el.scrollWidth - el.clientWidth;
+    var left = el.scrollLeft;
+    // 亚像素容差，避免 Win/高分屏来回抖
+    setTabScroll({
+      canLeft: left > 1,
+      canRight: max - left > 1
+    });
+  };
+  var scrollTabsBy = function scrollTabsBy(direction) {
+    var el = tabsScrollRef.current;
+    if (!el) return;
+    var step = Math.max(120, Math.floor(el.clientWidth * 0.7));
+    el.scrollBy({
+      left: direction * step,
+      behavior: 'smooth'
+    });
+  };
+  useLayoutEffect(function () {
+    updateTabScrollState();
+  }, [tabs, isOpen, activeTab === null || activeTab === void 0 ? void 0 : activeTab.id]);
+  useEffect(function () {
+    var el = tabsScrollRef.current;
+    if (!el) return;
+    var onScroll = function onScroll() {
+      return updateTabScrollState();
+    };
+    el.addEventListener('scroll', onScroll, {
+      passive: true
+    });
+    var ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(function () {
+      return updateTabScrollState();
+    }) : null;
+    ro === null || ro === void 0 || ro.observe(el);
+    return function () {
+      el.removeEventListener('scroll', onScroll);
+      ro === null || ro === void 0 || ro.disconnect();
+    };
+  }, [isOpen, tabs.length]);
+  useEffect(function () {
+    var root = tabsScrollRef.current;
+    if (!root || !activeTab) return;
+    var activeEl = root.querySelector('[data-odn-preview-panel-tab-active]');
+    activeEl === null || activeEl === void 0 || activeEl.scrollIntoView({
+      inline: 'nearest',
+      block: 'nearest',
+      behavior: 'smooth'
+    });
+  }, [activeTab === null || activeTab === void 0 ? void 0 : activeTab.id, tabs.length]);
+  var showTabScrollButtons = tabScroll.canLeft || tabScroll.canRight;
   var isMarkdownTab = function isMarkdownTab(tab) {
     var type = tab.type.toLowerCase();
     var name = tab.name.toLowerCase();
     return type === 'text/markdown' || type === 'text/x-markdown' || type === 'application/markdown' || type === 'application/x-markdown' || name.endsWith('.md') || name.endsWith('.markdown');
   };
+  var csvPreview = useMemo(function () {
+    if (!activeTab || !isCsvTab(activeTab.type, activeTab.name)) return null;
+    return parseCsv(activeTab.content);
+  }, [activeTab]);
   var handleOpenInBrowser = function handleOpenInBrowser() {
     if (!activeTab) return;
     if (onOpenInBrowser) {
@@ -79,6 +152,20 @@ export function PreviewPanel(_ref2) {
   }, isOpen && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     "data-odn-preview-panel-header": true
   }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-preview-panel-tabs-rail": true
+  }, showTabScrollButtons && /*#__PURE__*/React.createElement(Button, {
+    light: true,
+    size: "medium",
+    icon: "chevron-left",
+    disabled: !tabScroll.canLeft,
+    onClick: function onClick() {
+      return scrollTabsBy(-1);
+    },
+    "data-odn-preview-panel-tabs-prev": true,
+    title: "\u5411\u5DE6\u67E5\u770B\u6807\u7B7E",
+    "aria-label": "\u5411\u5DE6\u67E5\u770B\u6807\u7B7E"
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: tabsScrollRef,
     "data-odn-preview-panel-tabs": true,
     role: "tablist",
     "aria-label": "\u9884\u89C8\u6807\u7B7E"
@@ -121,6 +208,17 @@ export function PreviewPanel(_ref2) {
       name: "x",
       size: 12
     })));
+  })), showTabScrollButtons && /*#__PURE__*/React.createElement(Button, {
+    light: true,
+    size: "medium",
+    icon: "chevron-right",
+    disabled: !tabScroll.canRight,
+    onClick: function onClick() {
+      return scrollTabsBy(1);
+    },
+    "data-odn-preview-panel-tabs-next": true,
+    title: "\u5411\u53F3\u67E5\u770B\u6807\u7B7E",
+    "aria-label": "\u5411\u53F3\u67E5\u770B\u6807\u7B7E"
   })), /*#__PURE__*/React.createElement("div", {
     "data-odn-preview-panel-actions": true
   }, /*#__PURE__*/React.createElement(ActionButton, {
@@ -182,7 +280,9 @@ export function PreviewPanel(_ref2) {
     "data-odn-preview-panel-markdown": true
   }, /*#__PURE__*/React.createElement(StreamText, {
     content: activeTab.content
-  })) : /*#__PURE__*/React.createElement("pre", {
+  })) : csvPreview ? /*#__PURE__*/React.createElement(CsvPreviewTable, {
+    data: csvPreview
+  }) : /*#__PURE__*/React.createElement("pre", {
     "data-odn-preview-panel-pre": true
   }, activeTab.content)), /*#__PURE__*/React.createElement(OdnOverlayVerticalScrollbar, {
     containerRef: previewScrollRef,

package/dist/preview-panel/parseCsv.d.ts

@@ -0,0 +1,16 @@
+/** PreviewPanel 内 CSV 预览用的轻量解析，不引入 papaparse 等依赖。 */
+export declare const PREVIEW_CSV_MAX_ROWS = 500;
+export interface ParsedCsv {
+    /** 表头；无表头时为空数组，此时 rows 含全部行 */
+    headers: string[];
+    rows: string[][];
+    /** 是否因超过 PREVIEW_CSV_MAX_ROWS 被截断（不含表头） */
+    truncated: boolean;
+    totalDataRows: number;
+}
+/**
+ * 按 RFC 4180 常见子集解析：逗号分隔、双引号转义、CRLF/LF。
+ * 空输入返回 null（由调用方回退到纯文本）。
+ */
+export declare function parseCsv(text: string, maxRows?: number): ParsedCsv | null;
+export declare function isCsvTab(type: string, name: string): boolean;

package/dist/preview-panel/parseCsv.js

@@ -0,0 +1,103 @@
+import _toArray from "@babel/runtime/helpers/esm/toArray";
+/** PreviewPanel 内 CSV 预览用的轻量解析，不引入 papaparse 等依赖。 */
+
+export var PREVIEW_CSV_MAX_ROWS = 500;
+function parseCsvMatrix(text) {
+  var rows = [];
+  var row = [];
+  var field = '';
+  var inQuotes = false;
+  for (var i = 0; i < text.length; i += 1) {
+    var ch = text[i];
+    var next = text[i + 1];
+    if (inQuotes) {
+      if (ch === '"') {
+        if (next === '"') {
+          field += '"';
+          i += 1;
+        } else {
+          inQuotes = false;
+        }
+      } else {
+        field += ch;
+      }
+      continue;
+    }
+    if (ch === '"') {
+      inQuotes = true;
+      continue;
+    }
+    if (ch === ',') {
+      row.push(field);
+      field = '';
+      continue;
+    }
+    if (ch === '\n') {
+      row.push(field);
+      rows.push(row);
+      row = [];
+      field = '';
+      continue;
+    }
+    if (ch === '\r') {
+      if (next === '\n') continue;
+      row.push(field);
+      rows.push(row);
+      row = [];
+      field = '';
+      continue;
+    }
+    field += ch;
+  }
+
+  // 文件末尾无换行时收尾；全空则忽略
+  if (field.length > 0 || row.length > 0) {
+    row.push(field);
+    rows.push(row);
+  }
+
+  // 去掉末尾全空行（常见于编辑器保存）
+  while (rows.length > 0 && rows[rows.length - 1].every(function (c) {
+    return c === '';
+  })) {
+    rows.pop();
+  }
+  return rows;
+}
+
+/**
+ * 按 RFC 4180 常见子集解析：逗号分隔、双引号转义、CRLF/LF。
+ * 空输入返回 null（由调用方回退到纯文本）。
+ */
+export function parseCsv(text) {
+  var maxRows = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : PREVIEW_CSV_MAX_ROWS;
+  var source = text.replace(/^\uFEFF/, '');
+  if (!source.trim()) return null;
+  var matrix = parseCsvMatrix(source);
+  if (matrix.length === 0) return null;
+  var _matrix = _toArray(matrix),
+    headerRow = _matrix[0],
+    body = _matrix.slice(1);
+  // 单行：当作无表头的数据行
+  if (body.length === 0) {
+    return {
+      headers: [],
+      rows: [headerRow],
+      truncated: false,
+      totalDataRows: 1
+    };
+  }
+  var totalDataRows = body.length;
+  var truncated = totalDataRows > maxRows;
+  return {
+    headers: headerRow,
+    rows: truncated ? body.slice(0, maxRows) : body,
+    truncated: truncated,
+    totalDataRows: totalDataRows
+  };
+}
+export function isCsvTab(type, name) {
+  var t = type.toLowerCase();
+  var n = name.toLowerCase();
+  return t === 'text/csv' || t === 'application/csv' || t === 'text/comma-separated-values' || n.endsWith('.csv');
+}

package/dist/preview-panel/style/index.css

@@ -32,6 +32,14 @@
   box-sizing: border-box;
 }
 
+[data-odn-preview-panel-tabs-rail] {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
+
 [data-odn-preview-panel-tabs] {
   flex: 1;
   display: flex;
@@ -40,12 +48,18 @@
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
+  /* 主要靠左右按钮翻页；保留 overflow 以兼容触控板，但隐藏滚动条避免「可滑却看不见」 */
 }
 
 [data-odn-preview-panel-tabs]::-webkit-scrollbar {
   display: none;
 }
 
+[data-odn-preview-panel-tabs-prev],
+[data-odn-preview-panel-tabs-next] {
+  flex-shrink: 0;
+}
+
 [data-odn-preview-panel-tab] {
   display: flex;
   align-items: center;
@@ -99,14 +113,14 @@
   transition: opacity 0.15s, background-color 0.15s;
 }
 
-[data-odn-preview-panel-tab]:hover [data-odn-preview-panel-tab-close] {
-  opacity: 1;
-}
-
 [data-odn-preview-panel-tab-close]:hover {
   background-color: var(--odn-color-black-3);
 }
 
+[data-odn-preview-panel-tab]:hover [data-odn-preview-panel-tab-close] {
+  opacity: 1;
+}
+
 /* header 右侧操作区：下载按钮 + 分割线 + 收起按钮。
  * 使用 flex 居中，分割线通过伪元素/span 实现 1px 浅色竖线；
  * 所有按钮改用 <Button light />，样式由 token 控制，这里只保证布局。
@@ -183,8 +197,7 @@
   position: absolute;
   inset: 0;
   box-sizing: border-box;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
@@ -215,11 +228,11 @@
   padding: 20px;
   font-size: var(--odn-font-size-text-mn);
   line-height: var(--odn-font-leading-text-mn);
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
   color: var(--odn-color-black-10);
   background-color: var(--odn-color-solid-black-1);
   white-space: pre-wrap;
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 [data-odn-preview-panel-markdown] {
@@ -231,4 +244,59 @@
 
 [data-odn-preview-panel-markdown] [data-odn-stream-text] {
   max-width: none;
+}
+
+[data-odn-preview-panel-csv] {
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 16px 16px;
+}
+
+[data-odn-preview-panel-csv-scroll] {
+  min-width: 0;
+  overflow-x: auto;
+  border: 1px solid var(--odn-color-black-4);
+  border-radius: var(--odn-border-radius, 6px);
+}
+
+[data-odn-preview-panel-csv-table] {
+  width: max-content;
+  min-width: 100%;
+  border-collapse: collapse;
+  font-size: var(--odn-font-size-text-mn, 12px);
+  line-height: var(--odn-font-leading-text-mn, 1.5);
+  color: var(--odn-color-black-12);
+}
+
+[data-odn-preview-panel-csv-table] th,
+[data-odn-preview-panel-csv-table] td {
+  padding: 8px 12px;
+  text-align: left;
+  white-space: nowrap;
+  max-width: 280px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-bottom: 1px solid var(--odn-color-black-3);
+  vertical-align: top;
+}
+
+[data-odn-preview-panel-csv-table] th {
+  background-color: var(--odn-color-solid-black-1, #f7f7f8);
+  color: var(--odn-color-black-10);
+  font-weight: 500;
+  border-bottom-color: var(--odn-color-black-4);
+}
+
+[data-odn-preview-panel-csv-table] tbody tr:last-child td {
+  border-bottom: none;
+}
+
+[data-odn-preview-panel-csv-truncated] {
+  flex-shrink: 0;
+  font-size: var(--odn-font-size-text-mn, 12px);
+  color: var(--odn-color-black-8);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.61",
+  "version": "0.0.63",
   "description": "One Design Next from TAD@tencent.com",
   "packageManager": "pnpm@11.8.0",
   "module": "dist/index.js",
@@ -9,6 +9,7 @@
   "scripts": {
     "start": "npm run dev",
     "dev": "npm run build:variables && npm run build:benchmark && npm run build:feedback && dumi dev",
+    "dev:recover": "bash scripts/after-git-switch.sh && npm run dev",
     "build": "father build && npm run build:styles",
     "build:skills": "bash skills/build.sh",
     "build:watch": "father dev",
@@ -59,7 +60,7 @@
     "*.{md,json}": [
       "prettier --write --no-error-on-unmatched-pattern"
     ],
-    "*.{css,scss}": [
+    "{components,test}/**/*.{css,scss}": [
       "stylelint --fix",
       "prettier --write"
     ],
@@ -114,7 +115,7 @@
     "dumi": "latest",
     "echarts": "^6.1.0",
     "echarts-for-react": "^3.0.6",
-    "eslint": "^9.32.0",
+    "eslint": "^8.57.1",
     "father": "^4.1.0",
     "fs-extra": "^11.3.5",
     "github-slugger": "^2.0.0",