one-design-next 0.0.77 → 0.0.80

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

@@ -41,15 +41,14 @@
 
 /*
  * Header Icon 对齐导航栏：Lucide 24 画布在 16px 下 stroke 1.8（观感约 1.2px），色 black-11。
+ * Tab 类型 Icon 用 ArtifactFileIcon（位图），不套描边色。
  */
 [data-odn-preview-panel-header] [data-odn-button-icon],
-[data-odn-preview-panel-header] [data-odn-preview-panel-tab-icon],
 [data-odn-preview-panel-header] [data-odn-preview-panel-tab-close] [data-odn-icon] {
   color: var(--odn-color-black-11);
 }
 
 [data-odn-preview-panel-header] [data-odn-button-icon] *,
-[data-odn-preview-panel-header] [data-odn-preview-panel-tab-icon] *,
 [data-odn-preview-panel-header] [data-odn-preview-panel-tab-close] [data-odn-icon] * {
   stroke-width: 1.8;
 }
@@ -58,7 +57,8 @@
   flex: 1;
   display: flex;
   align-items: center;
-  gap: 2px;
+  /* 全部产物按钮 ↔ 预览标签（及翻页按钮） */
+  gap: 8px;
   min-width: 0;
 }
 
@@ -75,44 +75,26 @@
   overflow-x: hidden;
 }
 
+/* 列表项：Artifact Small 自带 hover；激活态叠一层浅底 */
 [data-odn-preview-panel-tabs-menu-item] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
   width: 100%;
-  min-height: 32px;
   margin: 0;
-  padding: 6px 10px;
-  border: none;
-  border-radius: var(--odn-border-radius);
-  background: transparent;
-  color: var(--odn-color-black-12);
-  font-size: var(--odn-font-size-text-mn);
-  line-height: 20px;
-  text-align: left;
-  cursor: pointer;
+  border-radius: 8px;
   box-sizing: border-box;
 }
 
-[data-odn-preview-panel-tabs-menu-item]:hover {
-  background-color: var(--odn-color-black-1);
+[data-odn-preview-panel-tabs-menu-item] [data-odn-artifact-small-wrap] {
+  max-width: none;
+  width: 100%;
 }
 
+/* 选中态对齐 Navi：rgba(74, 97, 143, 0.08)；Small 文件名保留加粗 */
 [data-odn-preview-panel-tabs-menu-item][data-odn-preview-panel-tabs-menu-item-active] {
-  background-color: var(--odn-color-black-2);
-}
-
-[data-odn-preview-panel-tabs-menu-item-icon] {
-  flex-shrink: 0;
-  color: var(--odn-color-black-10);
+  background-color: rgba(74, 97, 143, 0.08);
 }
 
-[data-odn-preview-panel-tabs-menu-item-name] {
-  min-width: 0;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+[data-odn-preview-panel-tabs-menu-item][data-odn-preview-panel-tabs-menu-item-active] [data-odn-artifact-title] {
+  font-weight: 500;
 }
 
 [data-odn-preview-panel-tabs] {
@@ -135,65 +117,141 @@
   flex-shrink: 0;
 }
 
+/*
+ * Tab 视觉对齐 Artifact Small；hover 不增宽：
+ * Icon 渐隐 → 文字左移占用 Icon 位 → 右侧腾出关闭 Icon。
+ */
 [data-odn-preview-panel-tab] {
-  display: flex;
+  --odn-preview-panel-tab-padding-x: 12px;
+  --odn-preview-panel-tab-gap: 8px;
+  --odn-preview-panel-tab-icon-width: 14px;
+  --odn-preview-panel-tab-close-size: 16px;
+  --odn-preview-panel-tab-hover-duration: 0.3s;
+  --odn-preview-panel-tab-hover-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --odn-preview-panel-tab-hover-shift: calc(
+    var(--odn-preview-panel-tab-icon-width) + var(--odn-preview-panel-tab-gap)
+  );
+  position: relative;
+  display: inline-flex;
   align-items: center;
-  gap: 6px;
-  height: 32px;
-  padding: 0 var(--odn-control-padding-horizontal);
-  border-radius: var(--odn-border-radius);
+  gap: var(--odn-preview-panel-tab-gap);
+  max-width: 280px;
+  height: 36px;
+  min-height: 0;
+  margin: 0;
+  padding: 0 var(--odn-preview-panel-tab-padding-x);
   border: none;
+  border-radius: 8px;
   background: transparent;
-  font-size: var(--odn-font-size-text-mn);
+  color: var(--odn-color-black-12);
+  font-size: var(--odn-font-size-text-sm);
+  /* 文件名行高用全局 default（与 Artifact Small / Card 一致） */
+  line-height: var(--odn-line-height);
+  font-weight: 400;
   white-space: nowrap;
   flex-shrink: 0;
-  color: var(--odn-color-black-10);
+  box-sizing: border-box;
+  overflow: hidden;
   cursor: pointer;
-  transition: background-color 0.15s, color 0.15s;
+  transition: background-color 0.15s ease;
 }
 
+/* hover / active 对齐 Navi（HoverFill 默认 + 选中蓝灰底） */
 [data-odn-preview-panel-tab]:hover {
-  background-color: var(--odn-color-black-1);
-  color: var(--odn-color-black-12);
+  background-color: rgba(33, 34, 38, 0.05);
 }
 
 [data-odn-preview-panel-tab][data-odn-preview-panel-tab-active] {
-  background-color: var(--odn-color-black-2);
-  color: var(--odn-color-black-12);
+  background-color: rgba(74, 97, 143, 0.08);
+  font-weight: 500;
+}
+
+[data-odn-preview-panel-tab][data-odn-preview-panel-tab-active]:hover {
+  background-color: rgba(33, 34, 38, 0.05);
 }
 
 [data-odn-preview-panel-tab-icon] {
+  display: inline-flex;
   flex-shrink: 0;
+  width: var(--odn-preview-panel-tab-icon-width);
+  height: 16px;
+  line-height: 0;
+  opacity: 1;
+  transform: scale(1);
+  transform-origin: center center;
+  transition: opacity var(--odn-preview-panel-tab-hover-duration) var(--odn-preview-panel-tab-hover-ease), transform var(--odn-preview-panel-tab-hover-duration) var(--odn-preview-panel-tab-hover-ease);
 }
 
 [data-odn-preview-panel-tab-name] {
-  max-width: 120px;
+  display: flex;
+  align-items: baseline;
+  min-width: 0;
+  max-width: 180px;
+  flex: 1;
+  overflow: hidden;
+  line-height: var(--odn-line-height);
+  transform: translateX(0);
+  will-change: transform;
+  transition: transform var(--odn-preview-panel-tab-hover-duration) var(--odn-preview-panel-tab-hover-ease);
+}
+
+[data-odn-preview-panel-tab-name-head] {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-odn-preview-panel-tab-name-tail],
+[data-odn-preview-panel-tab-name-ext] {
+  flex-shrink: 0;
 }
 
+/* 关闭：绝对定位不占流宽；hover 时由文字左移腾出右侧空间 */
 [data-odn-preview-panel-tab-close] {
-  display: flex;
+  position: absolute;
+  right: var(--odn-preview-panel-tab-padding-x);
+  top: 50%;
+  z-index: 2;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: var(--odn-preview-panel-tab-close-size);
+  height: var(--odn-preview-panel-tab-close-size);
+  margin: 0;
   padding: 0;
   border: none;
   border-radius: 3px;
   background: transparent;
-  color: inherit;
+  color: var(--odn-color-black-10);
   opacity: 0;
+  transform: translate(4px, -50%);
   cursor: pointer;
-  transition: opacity 0.15s, background-color 0.15s;
+  pointer-events: none;
+  transition: opacity var(--odn-preview-panel-tab-hover-duration) var(--odn-preview-panel-tab-hover-ease), transform var(--odn-preview-panel-tab-hover-duration) var(--odn-preview-panel-tab-hover-ease), background-color 0.15s ease;
 }
 
-[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-icon],
+[data-odn-preview-panel-tab]:focus-within [data-odn-preview-panel-tab-icon] {
+  opacity: 0;
+  transform: scale(0.73);
+}
+
+[data-odn-preview-panel-tab]:hover [data-odn-preview-panel-tab-name],
+[data-odn-preview-panel-tab]:focus-within [data-odn-preview-panel-tab-name] {
+  transform: translateX(calc(-1 * var(--odn-preview-panel-tab-hover-shift)));
 }
 
-[data-odn-preview-panel-tab]:hover [data-odn-preview-panel-tab-close] {
+[data-odn-preview-panel-tab]:hover [data-odn-preview-panel-tab-close],
+[data-odn-preview-panel-tab]:focus-within [data-odn-preview-panel-tab-close] {
   opacity: 1;
+  transform: translate(0, -50%);
+  pointer-events: auto;
+}
+
+[data-odn-preview-panel-tab-close]:hover {
+  background-color: var(--odn-color-black-3);
+  color: var(--odn-color-black-12);
 }
 
 /* header 右侧操作区：文件操作 | 面板操作。

package/dist/user-bubble/style/index.css

@@ -27,7 +27,7 @@
   margin: 0;
 }
 [data-odn-user-bubble-text] {
-  /* 气泡内 inline ref 跟随正文 inherit，避免与 Composer 默认 14/24 脱节 */
+  /* 气泡内跟随正文，chip 是 inline 文字而非独立行盒 */
 }
 [data-odn-user-bubble-text] [data-odn-invocation],
 [data-odn-user-bubble-text] [data-odn-mention] {

package/dist/virtual-list/index.d.ts

@@ -1,5 +1,7 @@
+import type { ListRef } from 'rc-virtual-list';
 import * as React from 'react';
 import './style';
+export type VirtualListRef = ListRef;
 export interface VirtualListProps<T = unknown> extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     /**
      * @description 列表项的渲染函数
@@ -94,5 +96,7 @@ export interface VirtualListProps<T = unknown> extends Omit<React.HTMLAttributes
 /**
  * VirtualList 虚拟列表
  */
-declare const VirtualList: <T = unknown>({ component, className, styles, showScrollBar, ...otherProps }: VirtualListProps<T>) => React.ReactElement;
+declare const VirtualList: <T = unknown>(props: VirtualListProps<T> & {
+    ref?: React.Ref<ListRef>;
+}) => React.ReactElement;
 export default VirtualList;

package/dist/virtual-list/index.js

@@ -8,7 +8,7 @@ import "./style";
 /**
  * VirtualList 虚拟列表
  */
-var VirtualList = function VirtualList(_ref) {
+var VirtualList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$component = _ref.component,
     component = _ref$component === void 0 ? 'div' : _ref$component,
     className = _ref.className,
@@ -18,18 +18,16 @@ var VirtualList = function VirtualList(_ref) {
     otherProps = _objectWithoutProperties(_ref, _excluded);
   var defaultStyles = {
     verticalScrollBar: {
-      width: '6px'
+      width: 'var(--odn-virtual-list-scrollbar-thickness, 10px)'
     },
     verticalScrollBarThumb: {
-      right: 2,
-      backgroundColor: 'var(--odn-color-border)'
+      backgroundColor: 'transparent'
     },
     horizontalScrollBar: {
-      height: '6px'
+      height: 'var(--odn-virtual-list-scrollbar-thickness, 10px)'
     },
     horizontalScrollBarThumb: {
-      bottom: 2,
-      backgroundColor: 'var(--odn-color-border)'
+      backgroundColor: 'transparent'
     }
   };
   var mergedStyles = _objectSpread(_objectSpread(_objectSpread({}, defaultStyles), styles), {}, {
@@ -39,6 +37,7 @@ var VirtualList = function VirtualList(_ref) {
     horizontalScrollBarThumb: _objectSpread(_objectSpread({}, defaultStyles.horizontalScrollBarThumb), styles === null || styles === void 0 ? void 0 : styles.horizontalScrollBarThumb)
   });
   return /*#__PURE__*/React.createElement(RcVirtualList, _extends({
+    ref: ref,
     "data-odn-virtual-list": true,
     prefixCls: "odn-virtual-list",
     component: component,
@@ -46,5 +45,5 @@ var VirtualList = function VirtualList(_ref) {
     styles: mergedStyles,
     showScrollBar: showScrollBar
   }, otherProps));
-};
+});
 export default VirtualList;

package/dist/virtual-list/style/index.css

@@ -1,7 +1,61 @@
 html {
   --odn-virtual-list-background-color: transparent;
+  --odn-virtual-list-scrollbar-thickness: 10px;
+  --odn-virtual-list-scrollbar-side-padding: 1px;
+  --odn-virtual-list-scrollbar-side-hover-padding: 1px;
+  --odn-virtual-list-scrollbar-color: var(--odn-color-border);
+  --odn-virtual-list-scrollbar-hover-color: var(--odn-color-border);
+  --odn-virtual-list-scrollbar-hover-cursor: default;
+  --odn-virtual-list-scrollbar-radius: 9999px;
 }
 
 [data-odn-virtual-list] {
   background-color: var(--odn-virtual-list-background-color);
+}
+
+.odn-virtual-list-scrollbar {
+  touch-action: none;
+  user-select: none;
+}
+.odn-virtual-list-scrollbar:hover {
+  cursor: var(--odn-virtual-list-scrollbar-hover-cursor);
+}
+.odn-virtual-list-scrollbar:hover .odn-virtual-list-scrollbar-thumb {
+  background-color: var(--odn-virtual-list-scrollbar-hover-color) !important;
+}
+
+.odn-virtual-list-scrollbar-vertical {
+  width: var(--odn-virtual-list-scrollbar-thickness) !important;
+}
+.odn-virtual-list-scrollbar-vertical .odn-virtual-list-scrollbar-thumb {
+  width: auto !important;
+  left: var(--odn-virtual-list-scrollbar-side-padding);
+  right: var(--odn-virtual-list-scrollbar-side-padding);
+  transition: left 0.1s, right 0.1s, background-color 0.15s;
+}
+.odn-virtual-list-scrollbar-vertical:hover .odn-virtual-list-scrollbar-thumb {
+  left: var(--odn-virtual-list-scrollbar-side-hover-padding);
+  right: var(--odn-virtual-list-scrollbar-side-hover-padding);
+}
+
+.odn-virtual-list-scrollbar-horizontal {
+  height: var(--odn-virtual-list-scrollbar-thickness) !important;
+}
+.odn-virtual-list-scrollbar-horizontal .odn-virtual-list-scrollbar-thumb {
+  height: auto !important;
+  top: var(--odn-virtual-list-scrollbar-side-padding);
+  bottom: var(--odn-virtual-list-scrollbar-side-padding);
+  transition: top 0.1s, bottom 0.1s, background-color 0.15s;
+}
+.odn-virtual-list-scrollbar-horizontal:hover .odn-virtual-list-scrollbar-thumb {
+  top: var(--odn-virtual-list-scrollbar-side-hover-padding);
+  bottom: var(--odn-virtual-list-scrollbar-side-hover-padding);
+}
+
+.odn-virtual-list-scrollbar-thumb {
+  background-color: var(--odn-virtual-list-scrollbar-color) !important;
+  border-radius: var(--odn-virtual-list-scrollbar-radius) !important;
+}
+.odn-virtual-list-scrollbar-thumb.odn-virtual-list-scrollbar-thumb-moving {
+  background-color: var(--odn-virtual-list-scrollbar-hover-color) !important;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.77",
+  "version": "0.0.80",
   "description": "One Design Next from TAD@tencent.com",
   "license": "MIT",
   "type": "module",