@pnt-team/pnt-component-frontend 0.0.132 → 0.0.133

package/lib/cjs/components/PntTable/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * PntTable — 统一表格组件
+ *
+ * 封装 tdesign-react Table，落地产品规范 12 章 47 条规则：
+ *   排序三态循环、筛选草稿/生效分离、多选三态+翻页清空、分页越界校验、
+ *   请求顺序控制、7 种状态管理、蓝紫双主题、同字段 sort+headerFilter 互斥。
+ *
+ * 零业务侵入：业务项目通过 fetcher 注入数据源，不依赖组件库内部 API。
+ */
+/// <reference types="react" />
+import './index.scss';
+import type { PntTableProps, PntTableRef } from './types';
+export declare const PntTable: import("react").ForwardRefExoticComponent<PntTableProps & import("react").RefAttributes<PntTableRef>>;
+export default PntTable;

package/lib/cjs/components/PntTable/index.js

@@ -0,0 +1,359 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PntTable/index.tsx
+var PntTable_exports = {};
+__export(PntTable_exports, {
+  PntTable: () => PntTable,
+  default: () => PntTable_default
+});
+module.exports = __toCommonJS(PntTable_exports);
+var import_react = require("react");
+var import_tdesign_react = require("tdesign-react");
+var import_index = require("./index.scss");
+var import_useTableCore = require("./useTableCore");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50];
+function getDefaultAlign(type) {
+  switch (type) {
+    case "number":
+    case "money":
+    case "percent":
+      return "right";
+    default:
+      return "left";
+  }
+}
+function mapPntColumns(pntCols) {
+  return pntCols.map((col) => {
+    var _a, _b, _c, _d, _e;
+    const mapped = {
+      colKey: col.key,
+      title: col.title,
+      width: col.width,
+      fixed: col.fixed,
+      align: (_a = col.align) != null ? _a : getDefaultAlign(col.type),
+      ellipsis: col.ellipsis === false ? void 0 : (_b = col.ellipsis) != null ? _b : true
+    };
+    if (col.sort) {
+      mapped.sorter = true;
+    }
+    if (col.headerFilter) {
+      if (col.headerFilter.mode === "custom") {
+        mapped.filter = {
+          type: "custom",
+          component: col.headerFilter.component,
+          ...(_c = col.headerFilter.extra) != null ? _c : {}
+        };
+      } else if ((_d = col.headerFilter.options) == null ? void 0 : _d.length) {
+        mapped.filter = {
+          type: col.headerFilter.mode === "multiple" ? "multiple" : "single",
+          list: col.headerFilter.options,
+          ...(_e = col.headerFilter.extra) != null ? _e : {}
+        };
+      }
+    }
+    if (col.cell) {
+      mapped.cell = ({ row, rowIndex }) => col.cell(row, rowIndex);
+    }
+    if (col.help && typeof mapped.title === "string") {
+      mapped.title = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "pnt-table-col-title", children: [
+        mapped.title,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pnt-table-help-icon", title: col.help, children: "ⓘ" })
+      ] });
+    }
+    return mapped;
+  });
+}
+var PntTable = (0, import_react.forwardRef)((props, ref) => {
+  var _a;
+  const {
+    tableId,
+    theme = "business",
+    rowKey,
+    columns,
+    dataMode,
+    fetcher,
+    data,
+    total: clientTotal,
+    selectable = false,
+    currentPageOnly = true,
+    pageable = true,
+    initialPage = 1,
+    pageSize: initialPageSize = 10,
+    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+    empty,
+    emptyText = "暂无数据",
+    emptyWithFilterHint = "调整条件或重置查询",
+    bordered = false,
+    size = "medium",
+    loading: controlledLoading,
+    bodyMaxHeight,
+    businessId,
+    env,
+    timezone,
+    onQueryChange,
+    onSelectionChange,
+    className,
+    style,
+    rowClassName
+  } = props;
+  const selectConfig = (0, import_react.useMemo)(() => {
+    if (!selectable)
+      return null;
+    if (typeof selectable === "object")
+      return selectable;
+    return {};
+  }, [selectable]);
+  const isSelectable = !!selectConfig;
+  const effectiveCurrentPageOnly = (_a = selectConfig == null ? void 0 : selectConfig.currentPageOnly) != null ? _a : currentPageOnly;
+  const controlledSelectedRowKeys = selectConfig == null ? void 0 : selectConfig.selectedRowKeys;
+  const disabledRowKeysFn = selectConfig == null ? void 0 : selectConfig.disabledRowKeysFn;
+  const [internalSelectedRowKeys, setInternalSelectedRowKeys] = (0, import_react.useState)(() => controlledSelectedRowKeys != null ? controlledSelectedRowKeys : []);
+  (0, import_react.useEffect)(() => {
+    if (controlledSelectedRowKeys !== void 0) {
+      setInternalSelectedRowKeys(controlledSelectedRowKeys);
+    }
+  }, [controlledSelectedRowKeys]);
+  const core = (0, import_useTableCore.useTableCore)({
+    tableId,
+    rowKey,
+    columns,
+    dataMode,
+    fetcher,
+    data,
+    total: clientTotal,
+    initialPage,
+    pageSize: initialPageSize,
+    pageSizeOptions,
+    businessId,
+    env,
+    timezone,
+    onQueryChange,
+    onSelectionChange,
+    selectable: isSelectable,
+    currentPageOnly: effectiveCurrentPageOnly
+  });
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      refresh: () => core.refresh(),
+      reset: () => {
+        core.resetFilters();
+        core.setPage(1);
+      },
+      getQuerySnapshot: () => ({
+        sort: core.sort,
+        filters: core.appliedFilters,
+        page: core.page,
+        pageSize: core.pageSize,
+        total: core.total
+      })
+    })
+  );
+  const conflicts = (0, import_react.useMemo)(() => (0, import_useTableCore.validateColumnConflicts)(columns), [columns]);
+  (0, import_react.useEffect)(() => {
+    if (conflicts.length > 0) {
+      conflicts.forEach((c) => console.error(c));
+    }
+  }, [conflicts]);
+  const tdesignCols = (0, import_react.useMemo)(() => {
+    const mapped = mapPntColumns(columns);
+    if (isSelectable) {
+      mapped.unshift({
+        colKey: "pnt-row-select",
+        type: "multiple",
+        width: 64,
+        checkProps: disabledRowKeysFn ? ({ row }) => ({ disabled: disabledRowKeysFn(row) }) : void 0
+      });
+    }
+    return mapped;
+  }, [columns, isSelectable, disabledRowKeysFn]);
+  const defaultSortInfo = (0, import_react.useMemo)(() => {
+    if (!core.sort)
+      return void 0;
+    return {
+      sortBy: core.sort.field,
+      descending: core.sort.direction === "desc"
+    };
+  }, [core.sort]);
+  const filterValue = (0, import_react.useMemo)(() => {
+    const fv = {};
+    Object.entries(core.appliedFilters).forEach(([k, v]) => {
+      fv[k] = v;
+    });
+    return Object.keys(fv).length > 0 ? fv : void 0;
+  }, [core.appliedFilters]);
+  const handleSortChange = (0, import_react.useCallback)(
+    (sort) => {
+      const info = Array.isArray(sort) ? sort[0] : sort;
+      if (!info)
+        return;
+      const field = info.sortBy;
+      const currentDir = info.descending ? "desc" : "asc";
+      core.toggleSort(field);
+    },
+    [core]
+  );
+  const handleFilterChange = (0, import_react.useCallback)(
+    (filterVal) => {
+      core.applyFilters(filterVal);
+    },
+    [core]
+  );
+  const pagination = (0, import_react.useMemo)(() => {
+    if (!pageable)
+      return void 0;
+    return {
+      total: core.total,
+      current: core.page,
+      pageSize: core.pageSize,
+      pageSizeOptions,
+      showJumper: true,
+      showPageSize: true,
+      onChange: (pageInfo) => {
+        const { current, pageSize: size2 } = pageInfo;
+        if (current !== core.page)
+          core.setPage(current);
+        if (size2 !== core.pageSize)
+          core.setPageSize(size2);
+      }
+    };
+  }, [
+    pageable,
+    core.total,
+    core.page,
+    core.pageSize,
+    pageSizeOptions,
+    core.setPage,
+    core.setPageSize
+  ]);
+  const isLoading = typeof controlledLoading === "boolean" ? controlledLoading : core.status === "loading" || core.status === "refreshing";
+  const emptyContent = (0, import_react.useMemo)(() => {
+    if (core.status === "error") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pnt-table-empty", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pnt-table-empty-icon", children: "⚠️" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pnt-table-empty-desc", children: core.error || "加载失败" })
+      ] });
+    }
+    if (core.status === "no-permission") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pnt-table-empty", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pnt-table-empty-icon", children: "🔒" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pnt-table-empty-desc", children: "无权限查看" })
+      ] });
+    }
+    if (core.status === "empty-with-filter") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pnt-table-empty", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pnt-table-empty-icon", children: "📭" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pnt-table-empty-desc", children: emptyText }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pnt-table-empty-hint", children: emptyWithFilterHint })
+      ] });
+    }
+    if (core.status === "empty") {
+      if (empty)
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: empty });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pnt-table-empty", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pnt-table-empty-icon", children: "📭" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pnt-table-empty-desc", children: emptyText })
+      ] });
+    }
+    return void 0;
+  }, [core.status, core.error, empty, emptyText, emptyWithFilterHint]);
+  const handleSelectChange = (0, import_react.useCallback)(
+    (selectedRowKeys) => {
+      if (!isSelectable)
+        return;
+      const currentPageKeys = core.data.map((r) => String(r[rowKey]));
+      const disabledKeys = disabledRowKeysFn ? core.data.filter(disabledRowKeysFn).map((r) => String(r[rowKey])) : [];
+      const disabledSet = new Set(disabledKeys);
+      let keys = selectedRowKeys.map(String).filter((k) => !disabledSet.has(k));
+      if (effectiveCurrentPageOnly) {
+        keys = keys.filter((k) => currentPageKeys.includes(k));
+      }
+      if (controlledSelectedRowKeys === void 0) {
+        setInternalSelectedRowKeys(keys);
+      }
+      const selectedRows = keys.map(
+        (k) => {
+          var _a2;
+          return (_a2 = core.data.find((r) => String(r[rowKey]) === k)) != null ? _a2 : { [rowKey]: k };
+        }
+      );
+      onSelectionChange == null ? void 0 : onSelectionChange(selectedRows, {
+        tableId,
+        pageKeys: currentPageKeys,
+        disabledKeys,
+        trigger: "select"
+      });
+    },
+    [
+      isSelectable,
+      core.data,
+      rowKey,
+      disabledRowKeysFn,
+      effectiveCurrentPageOnly,
+      controlledSelectedRowKeys,
+      tableId,
+      onSelectionChange
+    ]
+  );
+  const scroll = (0, import_react.useMemo)(() => {
+    if (!bodyMaxHeight)
+      return void 0;
+    return { y: bodyMaxHeight };
+  }, [bodyMaxHeight]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-theme": theme,
+      className: `pnt-table ${className != null ? className : ""}`,
+      style,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tdesign_react.Table,
+        {
+          rowKey,
+          data: core.data,
+          columns: tdesignCols,
+          loading: isLoading,
+          hover: true,
+          stripe: false,
+          bordered,
+          verticalAlign: "middle",
+          size,
+          defaultSort: defaultSortInfo,
+          filterValue,
+          loadingProps: { text: "加载中…" },
+          pagination,
+          scroll,
+          empty: emptyContent,
+          selectedRowKeys: isSelectable ? controlledSelectedRowKeys != null ? controlledSelectedRowKeys : internalSelectedRowKeys : void 0,
+          onSortChange: handleSortChange,
+          onFilterChange: handleFilterChange,
+          onSelectChange: handleSelectChange,
+          rowClassName
+        }
+      )
+    }
+  );
+});
+PntTable.displayName = "PntTable";
+var PntTable_default = PntTable;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PntTable
+});

package/lib/cjs/components/PntTable/index.scss

@@ -0,0 +1,315 @@
+/**
+ * PntTable 蓝紫双主题样式
+ *
+ * CSS 变量映射：一套样式两类主题
+ *   data-theme="business"  → 蓝主题（业务侧，默认）
+ *   data-theme="internal"  → 紫主题（内部平台）
+ *
+ * 规范来源：管理端组件规范 TBL-02.01 / TBL-02.02
+ */
+
+// ============================================================
+// CSS 变量（默认蓝主题）
+// ============================================================
+
+.pnt-table {
+  // 主题品牌色
+  --pnt-table-brand: #3f8cff;
+  --pnt-table-brand-hover: #2875e3;
+  --pnt-table-brand-active: #1f65cc;
+  --pnt-table-brand-soft: #eaf3ff;
+
+  // 语义色（不随主题变化）
+  --pnt-table-danger: #d54941;
+  --pnt-table-danger-soft: #fdecea;
+  --pnt-table-success: #2ba471;
+  --pnt-table-success-soft: #e3f6ee;
+  --pnt-table-warning: #e37318;
+  --pnt-table-warning-soft: #fef3e8;
+
+  // 中性色
+  --pnt-table-bg: #ffffff;
+  --pnt-table-bg-header: #f8fafd;
+  --pnt-table-bg-hover: #f8fafd;
+  --pnt-table-bg-selected: var(--pnt-table-brand-soft);
+  --pnt-table-border: #e5e8ef;
+  --pnt-table-text-primary: #1d2129;
+  --pnt-table-text-secondary: #4e5969;
+  --pnt-table-text-tertiary: #86909c;
+  --pnt-table-text-placeholder: #bbbfc4;
+
+  // 尺寸（TBL-02.04 / TBL-02.05）
+  --pnt-table-header-height: 48px;
+  --pnt-table-row-min-height: 48px;
+  --pnt-table-cell-padding-v: 12px;
+  --pnt-table-cell-padding-h: 16px;
+}
+
+// 紫主题覆盖
+.pnt-table[data-theme='internal'] {
+  --pnt-table-brand: #624beb;
+  --pnt-table-brand-hover: #503bd1;
+  --pnt-table-brand-active: #412eb5;
+  --pnt-table-brand-soft: #f0edff;
+}
+
+// ============================================================
+// 表头（TBL-03.01 / TBL-03.02 / TBL-03.03）
+// ============================================================
+
+.pnt-table .t-table__header {
+  background-color: var(--pnt-table-bg-header);
+  font-weight: 600;
+  color: var(--pnt-table-text-primary);
+  font-size: 14px;
+  line-height: var(--pnt-table-header-height);
+}
+
+.pnt-table .t-table__header th {
+  height: var(--pnt-table-header-height);
+  padding: 0 var(--pnt-table-cell-padding-h);
+  border-bottom: 1px solid var(--pnt-table-border);
+  border-right: none;
+  background-color: var(--pnt-table-bg-header);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// 表头单元格（左中右对齐）
+.pnt-table .t-table__header th.tdesign-table-td--left { text-align: left; }
+.pnt-table .t-table__header th.tdesign-table-td--center,
+.pnt-table .t-table__header th.tdesign-table-td--middle { text-align: center; }
+.pnt-table .t-table__header th.tdesign-table-td--right { text-align: right; }
+
+// ============================================================
+// 表体（TBL-03.03 / TBL-03.05 / TBL-03.06）
+// ============================================================
+
+.pnt-table .t-table__body td {
+  padding: var(--pnt-table-cell-padding-v) var(--pnt-table-cell-padding-h);
+  min-height: var(--pnt-table-row-min-height);
+  border-bottom: 1px solid var(--pnt-table-border);
+  font-size: 14px;
+  color: var(--pnt-table-text-primary);
+}
+
+// hover 态（TBL-02.03 / TBL-02.08）
+.pnt-table .t-table__body tr:hover > td {
+  background-color: var(--pnt-table-bg-hover);
+}
+
+// 选中态（TBL-02.09 / TBL-02.10）
+.pnt-table .t-table__body tr.is-selected > td {
+  background-color: var(--pnt-table-bg-selected);
+}
+// 选中后 hover 仍保持选中背景
+.pnt-table .t-table__body tr.is-selected:hover > td {
+  background-color: var(--pnt-table-bg-selected);
+}
+
+// 斑马纹：默认关闭（TBL-02.03 明确默认无）
+// 业务需要时显式传 stripe 开启，PntTable 默认 false
+
+// ============================================================
+// 对齐（TBL-03.06）
+// ============================================================
+
+.pnt-table .tdesign-table-td--left,
+.pnt-table .tdesign-table-td--start { text-align: left; }
+.pnt-table .tdesign-table-td--center,
+.pnt-table .tdesign-table-td--middle { text-align: center; }
+.pnt-table .tdesign-table-td--right,
+.pnt-table .tdesign-table-td--end { text-align: right; }
+
+// ============================================================
+// 列标题 + help icon
+// ============================================================
+
+.pnt-table-col-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+
+  .pnt-table-help-icon {
+    display: inline-flex;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--pnt-table-border);
+    color: var(--pnt-table-text-tertiary);
+    font-size: 10px;
+    line-height: 14px;
+    justify-content: center;
+    cursor: help;
+    flex-shrink: 0;
+
+    &:hover {
+      background: var(--pnt-table-brand);
+      color: #fff;
+    }
+  }
+}
+
+// ============================================================
+// 空态（TBL-09.03 / TBL-09.04）
+// ============================================================
+
+.pnt-table .t-table__empty,
+.pnt-table .t-empty {
+  padding: 48px 0;
+  color: var(--pnt-table-text-tertiary);
+  font-size: 14px;
+}
+
+.pnt-table-empty-with-filter {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  .pnt-table-empty-hint {
+    font-size: 12px;
+    color: var(--pnt-table-text-tertiary);
+  }
+}
+
+// ============================================================
+// 分页（TBL-07.01 / TBL-07.06）
+// ============================================================
+
+.pnt-table .t-pagination {
+  padding: 16px 0;
+  justify-content: flex-end;
+  gap: 12px;
+  font-size: 14px;
+  color: var(--pnt-table-text-secondary);
+
+  .t-pagination__btn {
+    border: none;
+    border-radius: 4px;
+    padding: 0 8px;
+    height: 32px;
+
+    &:hover:not(.is-disabled) {
+      color: var(--pnt-table-brand);
+    }
+
+    &.is-active {
+      background: var(--pnt-table-brand);
+      color: #fff;
+    }
+  }
+
+  .t-pagination__total {
+    margin-right: auto;
+  }
+
+  .t-pagination__size,
+  .t-pagination__jump {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}
+
+// ============================================================
+// 加载态（TBL-09.01 / TBL-09.02）
+// ============================================================
+
+.pnt-table .t-table__loading {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.6);
+  z-index: 1;
+
+  .t-table__loading-text {
+    color: var(--pnt-table-text-secondary);
+    font-size: 14px;
+  }
+}
+
+// 骨架（首次加载）
+.pnt-table .t-table__loading--skeleton {
+  .t-table__body tr td {
+    height: var(--pnt-table-row-min-height);
+  }
+}
+
+// ============================================================
+// 固定列（TBL-08.01 / TBL-08.02）
+// ============================================================
+
+.pnt-table .t-table__cell--fixed-left,
+.pnt-table .t-table__cell--fixed-right {
+  background-color: var(--pnt-table-bg);
+  box-shadow: none;
+
+  // 固定列阴影边界
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 8px;
+    pointer-events: none;
+  }
+}
+
+.pnt-table .t-table__cell--fixed-left::after {
+  right: -8px;
+  box-shadow: inset -8px 0 4px -4px rgba(0, 0, 0, 0.06);
+}
+
+.pnt-table .t-table__cell--fixed-right::after {
+  left: -8px;
+  box-shadow: inset 8px 0 4px -4px rgba(0, 0, 0, 0.06);
+}
+
+// 固定列跟随 hover/选中背景
+.pnt-table .t-table__body tr:hover > td.t-table__cell--fixed-left,
+.pnt-table .t-table__body tr:hover > td.t-table__cell--fixed-right {
+  background-color: var(--pnt-table-bg-hover);
+}
+
+.pnt-table .t-table__body tr.is-selected > td.t-table__cell--fixed-left,
+.pnt-table .t-table__body tr.is-selected > td.t-table__cell--fixed-right {
+  background-color: var(--pnt-table-bg-selected);
+}
+
+// ============================================================
+// 多选列（TBL-06.01 / TBL-06.02）
+// ============================================================
+
+.pnt-table .t-table__select {
+  width: 44px;
+  text-align: center;
+
+  .t-checkbox {
+    cursor: pointer;
+  }
+}
+
+// ============================================================
+// 滚动容器
+// ============================================================
+
+.pnt-table .t-table__body-wrapper::-webkit-scrollbar,
+.pnt-table .t-table__header-wrapper::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.pnt-table .t-table__body-wrapper::-webkit-scrollbar-thumb,
+.pnt-table .t-table__header-wrapper::-webkit-scrollbar-thumb {
+  background: #c9cdd4;
+  border-radius: 4px;
+
+  &:hover {
+    background: var(--pnt-table-brand);
+  }
+}
+
+.pnt-table .t-table__body-wrapper::-webkit-scrollbar-track,
+.pnt-table .t-table__header-wrapper::-webkit-scrollbar-track {
+  background: transparent;
+}