one-design-next 0.0.76 → 0.0.78

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/package.json

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