one-design-next 0.0.88 → 0.0.90

package/dist/_genui-inline-ref.d.ts

@@ -1,10 +1,10 @@
 /**
  * 内联引用 chip 的品类 icon。
  *
- * chip 视觉锚点按「类型」而非条目：skill 一律跟 Composer 技能按钮同源，
- * 不使用 SkillItem.icon（那只服务技能菜单辨识）。
+ * chip 视觉锚点按「类型」而非条目：skill 一律跟 Composer 与 SkillTab 的
+ * 技能入口同源，不使用 SkillItem.icon（那只服务技能菜单辨识）。
  */
-export declare const SKILL_CATEGORY_ICON = "wand-sparkles";
+export declare const SKILL_CATEGORY_ICON = "astroid";
 /** skill / 未标明的 invocation 通道 → 技能品类 icon；其它 kind 回退 data.icon */
 export declare function resolveInvocationCategoryIcon(kind?: string, fallback?: string): string | undefined;
 /** mention 按 kind 给品类 icon；未知 kind 回退 data.icon */

package/dist/_genui-inline-ref.js

@@ -1,10 +1,10 @@
 /**
  * 内联引用 chip 的品类 icon。
  *
- * chip 视觉锚点按「类型」而非条目：skill 一律跟 Composer 技能按钮同源，
- * 不使用 SkillItem.icon（那只服务技能菜单辨识）。
+ * chip 视觉锚点按「类型」而非条目：skill 一律跟 Composer 与 SkillTab 的
+ * 技能入口同源，不使用 SkillItem.icon（那只服务技能菜单辨识）。
  */
-export var SKILL_CATEGORY_ICON = 'wand-sparkles';
+export var SKILL_CATEGORY_ICON = 'astroid';
 
 /** skill / 未标明的 invocation 通道 → 技能品类 icon；其它 kind 回退 data.icon */
 export function resolveInvocationCategoryIcon(kind, fallback) {

package/dist/index.d.ts

@@ -70,6 +70,7 @@ export { default as Mention, type MentionProps } from './mention';
 export { default as MessageImage, type MessageImageItem, type MessageImageProps, } from './message-image';
 export { default as PreviewPanel, type PreviewPanelActionTooltips, type PreviewPanelArtifact, type PreviewPanelProps, } from './preview-panel';
 export { default as Provenance, type ProvenanceProps, type ProvenanceType, } from './provenance';
+export { default as SkillCard, SkillCardIcon, SkillCardMedia, skillCardSwitchStyle, type SkillCardButton, type SkillCardControl, type SkillCardIconProps, type SkillCardIconSize, type SkillCardIconTone, type SkillCardMediaProps, type SkillCardOperation, type SkillCardOperationType, type SkillCardProps, type SkillCardStatusLabel, type SkillCardStatusType, type SkillCardTag, type SkillCardTagType, } from './skill-card';
 export { default as SkillSlot, type SkillSlotHandle, type SkillSlotProps, } from './skill-slot';
 export { default as Sources, type SourcesProps } from './sources';
 export { default as StreamPulse, type StreamPulseProps } from './stream-pulse';

package/dist/index.js

@@ -75,6 +75,7 @@ export { default as Mention } from "./mention";
 export { default as MessageImage } from "./message-image";
 export { default as PreviewPanel } from "./preview-panel";
 export { default as Provenance } from "./provenance";
+export { default as SkillCard, SkillCardIcon, SkillCardMedia, skillCardSwitchStyle } from "./skill-card";
 export { default as SkillSlot } from "./skill-slot";
 export { default as Sources } from "./sources";
 export { default as StreamPulse } from "./stream-pulse";

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

@@ -0,0 +1,35 @@
+/**
+ * iframe 导航守卫：
+ *
+ * PreviewPanel 渲染 text/html 时使用 sandbox="allow-scripts" 的 iframe，
+ * 内部链接默认被沙箱拦截（既不响应点击，也不能逃逸到顶层）。
+ * 通过 `allowedNavigateDomains` 白名单放行特定域名：命中白名单的链接
+ * 在点击时以新窗口打开，其余链接继续拦截。
+ *
+ * 注意：开启白名单后 sandbox 必须追加 allow-popups / allow-popups-to-escape-sandbox
+ * （否则 window.open 被沙箱阻止），因此守卫脚本同时监听 click 与 auxclick
+ * （中键点击不触发 click，需单独拦截，否则可绕过白名单直接弹窗）。
+ */
+/**
+ * 判断 hostname 是否命中白名单。
+ * 支持精确匹配与子域名匹配（如白名单 `example.com` 可放行 `www.example.com`），
+ * 忽略大小写；返回 true 表示“允许跳转”。
+ */
+export declare function isDomainAllowed(hostname: string | null | undefined, allowedDomains: readonly string[] | undefined): boolean;
+/**
+ * 将导航守卫脚本注入 HTML，返回新的 srcDoc 字符串。
+ *
+ * 脚本逻辑（依赖 sandbox 已放行 allow-scripts / allow-popups /
+ * allow-popups-to-escape-sandbox）：
+ * - 锚点（`#xxx`）或非链接元素：不拦截，保留默认行为；
+ * - href 无法解析，或协议非 http/https（如 javascript:、data:）：拦截；
+ * - hostname 命中白名单：以新窗口打开（_blank + noopener）；
+ * - 其余链接：拦截（防止 iframe 被导航走 / 逃逸到顶层）；
+ * - click 与 auxclick（中键）都拦截，避免中键绕过白名单直接弹窗。
+ *
+ * 白名单通过 `window.__ODN_NAV_GUARD_ALLOWED__` 注入，便于校验脚本与数据解耦；
+ * 注入前将 `<` 转义为 `\u003c`，防止白名单含 `</script>` 时提前闭合脚本标签。
+ */
+export declare function injectNavGuardScript(html: string, allowedDomains: readonly string[]): string;
+/** 将 html 增强为“可白名单放行导航”的 srcDoc；未传白名单时原样返回。 */
+export declare function withNavGuard(html: string, allowedDomains: readonly string[] | undefined): string;

package/dist/preview-panel/iframeNavGuard.js

@@ -0,0 +1,67 @@
+/* cspell:words noopener */
+/**
+ * iframe 导航守卫：
+ *
+ * PreviewPanel 渲染 text/html 时使用 sandbox="allow-scripts" 的 iframe，
+ * 内部链接默认被沙箱拦截（既不响应点击，也不能逃逸到顶层）。
+ * 通过 `allowedNavigateDomains` 白名单放行特定域名：命中白名单的链接
+ * 在点击时以新窗口打开，其余链接继续拦截。
+ *
+ * 注意：开启白名单后 sandbox 必须追加 allow-popups / allow-popups-to-escape-sandbox
+ * （否则 window.open 被沙箱阻止），因此守卫脚本同时监听 click 与 auxclick
+ * （中键点击不触发 click，需单独拦截，否则可绕过白名单直接弹窗）。
+ */
+
+/**
+ * 判断 hostname 是否命中白名单。
+ * 支持精确匹配与子域名匹配（如白名单 `example.com` 可放行 `www.example.com`），
+ * 忽略大小写；返回 true 表示“允许跳转”。
+ */
+export function isDomainAllowed(hostname, allowedDomains) {
+  if (!hostname || !allowedDomains || allowedDomains.length === 0) {
+    return false;
+  }
+  var normalized = hostname.toLowerCase();
+  return allowedDomains.some(function (domain) {
+    if (!domain || typeof domain !== 'string') return false;
+    var allowed = domain.trim().toLowerCase();
+    if (!allowed) return false;
+    return normalized === allowed || normalized.endsWith(".".concat(allowed));
+  });
+}
+
+/**
+ * 将导航守卫脚本注入 HTML，返回新的 srcDoc 字符串。
+ *
+ * 脚本逻辑（依赖 sandbox 已放行 allow-scripts / allow-popups /
+ * allow-popups-to-escape-sandbox）：
+ * - 锚点（`#xxx`）或非链接元素：不拦截，保留默认行为；
+ * - href 无法解析，或协议非 http/https（如 javascript:、data:）：拦截；
+ * - hostname 命中白名单：以新窗口打开（_blank + noopener）；
+ * - 其余链接：拦截（防止 iframe 被导航走 / 逃逸到顶层）；
+ * - click 与 auxclick（中键）都拦截，避免中键绕过白名单直接弹窗。
+ *
+ * 白名单通过 `window.__ODN_NAV_GUARD_ALLOWED__` 注入，便于校验脚本与数据解耦；
+ * 注入前将 `<` 转义为 `\u003c`，防止白名单含 `</script>` 时提前闭合脚本标签。
+ */
+export function injectNavGuardScript(html, allowedDomains) {
+  // JSON.stringify 不转义 <，这里显式转义，避免白名单内出现 </script> 闭合脚本
+  var serializedDomains = JSON.stringify(allowedDomains).replace(/</g, "\\u003c");
+  var navGuardScript = "\n<script>\nwindow.__ODN_NAV_GUARD_ALLOWED__ = ".concat(serializedDomains, ";\n(function () {\n  var allowed = window.__ODN_NAV_GUARD_ALLOWED__ || [];\n  function hostnameAllowed(hostname) {\n    if (!hostname || allowed.length === 0) return false;\n    hostname = hostname.toLowerCase();\n    return allowed.some(function (domain) {\n      if (!domain) return false;\n      domain = domain.toLowerCase();\n      return hostname === domain || hostname.slice(-(domain.length + 1)) === '.' + domain;\n    });\n  }\n  function isSafeHttp(url) {\n    return url.protocol === 'http:' || url.protocol === 'https:';\n  }\n  function intercept(event) {\n    var target = event.target;\n    if (!target || target.nodeType !== 1) return;\n    var anchor = target.closest && target.closest('a[href]');\n    if (!anchor) return;\n    var href = anchor.getAttribute('href') || '';\n    if (href.charAt(0) === '#') return;\n    if (href.indexOf('javascript:') === 0 || href.indexOf('data:') === 0) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    var url;\n    try {\n      url = new URL(href, window.location.href);\n    } catch (e) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    if (!isSafeHttp(url)) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    if (hostnameAllowed(url.hostname)) {\n      event.preventDefault();\n      event.stopPropagation();\n      window.open(url.href, '_blank', 'noopener');\n      return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n  }\n  if (document.addEventListener) {\n    document.addEventListener('click', intercept, true);\n    document.addEventListener('auxclick', intercept, true);\n  }\n})();\n</script>");
+  var lower = html.toLowerCase();
+  if (lower.includes('</body>')) {
+    return html.replace(/<\/body>/i, "".concat(navGuardScript, "</body>"));
+  }
+  if (lower.includes('</head>')) {
+    return html.replace(/<\/head>/i, "".concat(navGuardScript, "</head>"));
+  }
+  return "".concat(html).concat(navGuardScript);
+}
+
+/** 将 html 增强为“可白名单放行导航”的 srcDoc；未传白名单时原样返回。 */
+export function withNavGuard(html, allowedDomains) {
+  if (!allowedDomains || allowedDomains.length === 0) {
+    return html;
+  }
+  return injectNavGuardScript(html, allowedDomains);
+}

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

@@ -78,8 +78,18 @@ export interface PreviewPanelProps {
      * 未传则不渲染 Tooltip（向后兼容）。
      */
     actionTooltips?: PreviewPanelActionTooltips;
+    /**
+     * HTML 预览（`text/html`）时允许跳转的域名白名单。
+     *
+     * iframe 默认 `sandbox="allow-scripts"`，内部链接一律被沙箱拦截；
+     * 传入本配置后，命中白名单的链接在点击时会以新窗口打开，其余链接保持拦截。
+     * 支持精确匹配与子域名匹配（如 `example.com` 可放行 `www.example.com`），
+     * 忽略大小写；协议仅放行 `http:` / `https:`，`javascript:` 等始终拦截。
+     * 未传时保持原行为不变。
+     */
+    allowedNavigateDomains?: string[];
 }
-export declare function PreviewPanel({ tabs, activeTabId, onTabChange, onTabClose, onCloseAll, artifacts, onArtifactOpen, onDownload, onOpenInBrowser, onShare, fullscreen, onFullscreenChange, open, emptyTitle, emptyDescription, widthMode, actionTooltips, }: PreviewPanelProps): import("react").JSX.Element;
+export declare function PreviewPanel({ tabs, activeTabId, onTabChange, onTabClose, onCloseAll, artifacts, onArtifactOpen, onDownload, onOpenInBrowser, onShare, fullscreen, onFullscreenChange, open, emptyTitle, emptyDescription, widthMode, actionTooltips, allowedNavigateDomains, }: PreviewPanelProps): import("react").JSX.Element;
 export declare namespace PreviewPanel {
     var displayName: string;
 }

package/dist/preview-panel/index.js

@@ -12,6 +12,7 @@ import Popover from "../popover";
 import StreamText from "../stream-text";
 import Tooltip from "../tooltip";
 import { CsvPreviewTable } from "./CsvPreviewTable";
+import { withNavGuard } from "./iframeNavGuard";
 import { isCsvTab, parseCsv } from "./parseCsv";
 import "./style";
 
@@ -91,7 +92,8 @@ export function PreviewPanel(_ref2) {
     emptyDescription = _ref2$emptyDescriptio === void 0 ? '对话生成的附件会显示在这里' : _ref2$emptyDescriptio,
     _ref2$widthMode = _ref2.widthMode,
     widthMode = _ref2$widthMode === void 0 ? 'half' : _ref2$widthMode,
-    actionTooltips = _ref2.actionTooltips;
+    actionTooltips = _ref2.actionTooltips,
+    allowedNavigateDomains = _ref2.allowedNavigateDomains;
   var activeTab = (_ref3 = (_tabs$find = tabs.find(function (t) {
     return t.id === activeTabId;
   })) !== null && _tabs$find !== void 0 ? _tabs$find : tabs[0]) !== null && _ref3 !== void 0 ? _ref3 : null;
@@ -187,6 +189,10 @@ export function PreviewPanel(_ref2) {
     if (!activeTab || !isCsvTab(activeTab.type, activeTab.name)) return null;
     return parseCsv(activeTab.content);
   }, [activeTab]);
+  var hasNavGuard = !!allowedNavigateDomains && allowedNavigateDomains.length > 0;
+  var htmlSrcDoc = useMemo(function () {
+    return (activeTab === null || activeTab === void 0 ? void 0 : activeTab.type) === 'text/html' ? withNavGuard(activeTab.content, allowedNavigateDomains) : undefined;
+  }, [activeTab, allowedNavigateDomains]);
   var handleOpenInBrowser = function handleOpenInBrowser() {
     if (!activeTab) return;
     if (onOpenInBrowser) {
@@ -447,9 +453,10 @@ export function PreviewPanel(_ref2) {
     "data-odn-preview-panel-scroll": true,
     onScroll: handlePreviewScroll
   }, activeTab.type === 'text/html' ? /*#__PURE__*/React.createElement("iframe", {
-    srcDoc: activeTab.content,
-    sandbox: "allow-scripts",
+    srcDoc: htmlSrcDoc,
+    sandbox: hasNavGuard ? 'allow-scripts allow-popups allow-popups-to-escape-sandbox' : 'allow-scripts',
     "data-odn-preview-panel-iframe": true,
+    "data-odn-preview-panel-iframe-nav-guard": hasNavGuard || undefined,
     title: activeTab.name
   }) : isMarkdownTab(activeTab) ? /*#__PURE__*/React.createElement("div", {
     "data-odn-preview-panel-markdown": true

package/dist/skill-card/index.d.ts

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { type IconName } from '../icon';
+import './style';
+export type SkillCardTagType = 'normal' | 'brand' | 'hot';
+export type SkillCardStatusType = 'info' | 'error';
+export type SkillCardOperationType = 'normal' | 'error';
+export type SkillCardIconSize = 'card' | 'detail';
+export type SkillCardIconTone = 'tinted' | 'plain';
+export interface SkillCardTag {
+    type: SkillCardTagType;
+    label: string;
+}
+export interface SkillCardStatusLabel {
+    type: SkillCardStatusType;
+    label: string;
+}
+export interface SkillCardOperation {
+    type: SkillCardOperationType;
+    label: string;
+    icon?: IconName;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export interface SkillCardButton {
+    icon?: IconName;
+    label?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+/** 官方市场的添加态与已拥有技能的启停态不能混用。 */
+export type SkillCardControl = {
+    type: 'add';
+    added: boolean;
+    /** 添加/移除请求中的受控加载态。 */
+    loading?: boolean;
+    onChange?: (added: boolean) => void;
+} | {
+    type: 'toggle';
+    checked: boolean;
+    onChange?: (checked: boolean) => void;
+};
+export interface SkillCardIconProps {
+    /** 图标内容由业务选择；推荐传入 Lucide 图标。 */
+    children: React.ReactNode;
+    /** `card` = 48px，`detail` = 80px。 */
+    size?: SkillCardIconSize;
+    /** `tinted` 用于卡片，`plain` 用于详情页等白底场景。 */
+    tone?: SkillCardIconTone;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface SkillCardMediaProps {
+    /** 头像 URL；为空或加载失败时回退到 `icon`。 */
+    avatarUrl?: string;
+    /** 业务侧选择的 Lucide 图标，同时作为头像加载失败的回退。 */
+    icon: React.ReactNode;
+    alt?: string;
+    size?: SkillCardIconSize;
+    tone?: SkillCardIconTone;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/** Skill 图标的统一视觉容器。 */
+export declare function SkillCardIcon({ children, size, tone, className, style, }: SkillCardIconProps): React.JSX.Element;
+/** 展示头像或 Lucide 图标，并在头像失效时回退到图标。 */
+export declare function SkillCardMedia({ avatarUrl, icon, alt, size, tone, className, style, }: SkillCardMediaProps): React.JSX.Element;
+/** SkillCard 内的 Switch 视觉 token，详情页可复用同一规格。 */
+export declare const skillCardSwitchStyle: React.CSSProperties;
+export interface SkillCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onClick'> {
+    /** 技能中文展示名。 */
+    name: string;
+    /** 业务侧的英文技能标识；空间不足时优先省略。 */
+    nameEn?: string;
+    /** 一句话技能描述。 */
+    description: string;
+    /** 业务侧选择的 Lucide 图标。 */
+    icon: React.ReactNode;
+    /** 由业务决定是否传入；为空或失败时展示 icon。 */
+    avatarUrl?: string;
+    /** 已按展示顺序映射好的来源、热度、场景、版本等标签。 */
+    tags?: SkillCardTag[];
+    /** 审核等状态优先于所有操作；传入后隐藏控制、菜单与按钮。 */
+    statusLabel?: SkillCardStatusLabel;
+    /** 标准化的更多操作菜单；业务侧决定权限、顺序与回调。 */
+    operations?: SkillCardOperation[];
+    /** Hover 后的主操作，例如「去试试」。 */
+    button?: SkillCardButton;
+    /** 官方添加态或我的技能启停态，保持受控。 */
+    control?: SkillCardControl;
+    /** 点击卡片内容区。组件不负责打开详情。 */
+    onOpen?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 技能市场的展示卡片。
+ *
+ * 组件处理布局、状态优先级、Hover 动效和标准化 Action；数据筛选、
+ * 权限、详情路由及实际的添加、启停、试用行为均交由业务侧回调实现。
+ */
+export declare function SkillCard({ name, nameEn, description, icon, avatarUrl, tags, statusLabel, operations, button, control, onOpen, className, style, ...rest }: SkillCardProps): React.JSX.Element;
+export declare namespace SkillCard {
+    var displayName: string;
+}
+export default SkillCard;

package/dist/skill-card/index.js

@@ -0,0 +1,320 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["name", "nameEn", "description", "icon", "avatarUrl", "tags", "statusLabel", "operations", "button", "control", "onOpen", "className", "style"];
+import clsx from 'clsx';
+import * as React from 'react';
+import Button from "../button";
+import Card from "../card";
+import Dropdown from "../dropdown";
+import Icon from "../icon";
+import Switch from "../switch";
+import Tooltip from "../tooltip";
+import "./style";
+
+/** 官方市场的添加态与已拥有技能的启停态不能混用。 */
+
+/** Skill 图标的统一视觉容器。 */
+export function SkillCardIcon(_ref) {
+  var children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'card' : _ref$size,
+    _ref$tone = _ref.tone,
+    tone = _ref$tone === void 0 ? 'tinted' : _ref$tone,
+    className = _ref.className,
+    style = _ref.style;
+  return /*#__PURE__*/React.createElement("span", {
+    "data-odn-skill-card-media": "icon",
+    "data-odn-skill-card-icon-box": true,
+    "data-odn-skill-card-icon-size": size,
+    "data-odn-skill-card-icon-tone": tone,
+    className: clsx(className),
+    style: style
+  }, children);
+}
+
+/** 展示头像或 Lucide 图标，并在头像失效时回退到图标。 */
+export function SkillCardMedia(_ref2) {
+  var avatarUrl = _ref2.avatarUrl,
+    icon = _ref2.icon,
+    _ref2$alt = _ref2.alt,
+    alt = _ref2$alt === void 0 ? '' : _ref2$alt,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'card' : _ref2$size,
+    _ref2$tone = _ref2.tone,
+    tone = _ref2$tone === void 0 ? 'tinted' : _ref2$tone,
+    className = _ref2.className,
+    style = _ref2.style;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    avatarFailed = _React$useState2[0],
+    setAvatarFailed = _React$useState2[1];
+  var shouldShowAvatar = !!avatarUrl && !avatarFailed;
+  React.useEffect(function () {
+    return setAvatarFailed(false);
+  }, [avatarUrl]);
+  if (!shouldShowAvatar) {
+    return /*#__PURE__*/React.createElement(SkillCardIcon, {
+      size: size,
+      tone: tone,
+      className: className,
+      style: style
+    }, icon);
+  }
+  return /*#__PURE__*/React.createElement("img", {
+    "data-odn-skill-card-media": "avatar",
+    "data-odn-skill-card-icon-box": true,
+    "data-odn-skill-card-icon-size": size,
+    "data-odn-skill-card-icon-tone": tone,
+    className: clsx(className),
+    style: style,
+    src: avatarUrl,
+    alt: alt,
+    onError: function onError() {
+      return setAvatarFailed(true);
+    }
+  });
+}
+
+/** SkillCard 内的 Switch 视觉 token，详情页可复用同一规格。 */
+export var skillCardSwitchStyle = {
+  '--odn-switch-track-bg': 'rgba(74, 97, 143, 0.1)',
+  '--odn-switch-track-bg-hover': 'rgba(74, 97, 143, 0.14)',
+  '--odn-switch-track-bg-active': 'rgba(74, 97, 143, 0.18)',
+  '--odn-switch-track-bg-checked': '#2694FD',
+  '--odn-switch-track-bg-checked-hover': '#2694FD',
+  '--odn-switch-track-bg-checked-active': '#2694FD'
+};
+var TAG_GAP = 6;
+var MIN_TRUNCATABLE_TAG_WIDTH = 36;
+
+/** 来源优先；末项不足两字时收纳为 +N，避免难以辨识的单字截断。 */
+function SkillCardTagList(_ref3) {
+  var tags = _ref3.tags;
+  var groupRef = React.useRef(null);
+  var measureRefs = React.useRef([]);
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    collapsedCount = _React$useState4[0],
+    setCollapsedCount = _React$useState4[1];
+  var recalculate = React.useCallback(function () {
+    var _measureRefs$current$;
+    var group = groupRef.current;
+    if (!group || group.clientWidth <= 0 || tags.length < 2) return;
+    var sourceWidth = (_measureRefs$current$ = measureRefs.current[0]) === null || _measureRefs$current$ === void 0 ? void 0 : _measureRefs$current$.getBoundingClientRect().width;
+    if (!sourceWidth) return;
+    var remainingWidth = group.clientWidth - sourceWidth;
+    var nextCollapsedCount = 0;
+    for (var index = 1; index < tags.length; index += 1) {
+      var _measureRefs$current$2;
+      var tagWidth = (_measureRefs$current$2 = measureRefs.current[index]) === null || _measureRefs$current$2 === void 0 ? void 0 : _measureRefs$current$2.getBoundingClientRect().width;
+      if (!tagWidth) return;
+      remainingWidth -= TAG_GAP;
+      var isLastTag = index === tags.length - 1;
+      if (isLastTag) {
+        if (remainingWidth < MIN_TRUNCATABLE_TAG_WIDTH) {
+          nextCollapsedCount = tags.length - index;
+        }
+        break;
+      }
+      if (remainingWidth < tagWidth) {
+        nextCollapsedCount = tags.length - index;
+        break;
+      }
+      remainingWidth -= tagWidth;
+    }
+    setCollapsedCount(function (current) {
+      return current === nextCollapsedCount ? current : nextCollapsedCount;
+    });
+  }, [tags]);
+  React.useLayoutEffect(function () {
+    recalculate();
+    var group = groupRef.current;
+    if (!group || typeof ResizeObserver === 'undefined') return;
+    var observer = new ResizeObserver(recalculate);
+    observer.observe(group);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [recalculate]);
+  var visibleCount = tags.length - collapsedCount;
+  return /*#__PURE__*/React.createElement("span", {
+    ref: groupRef,
+    "data-odn-skill-card-label-group": true
+  }, tags.slice(0, visibleCount).map(function (tag, index) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: "".concat(tag.type, "-").concat(tag.label, "-").concat(index),
+      "data-odn-skill-card-tag": tag.type,
+      "data-odn-skill-card-tag-last": collapsedCount === 0 && index === tags.length - 1 || undefined
+    }, tag.type === 'hot' ? /*#__PURE__*/React.createElement(Icon, {
+      name: "hot-filled",
+      size: 14
+    }) : null, /*#__PURE__*/React.createElement("span", {
+      "data-odn-skill-card-tag-label": true
+    }, tag.label));
+  }), collapsedCount > 0 ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-skill-card-tag": "normal",
+    "data-odn-skill-card-tag-summary": true
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-skill-card-tag-label": true
+  }, "+", collapsedCount)) : null, /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": true,
+    "data-odn-skill-card-tag-measurer": true
+  }, tags.map(function (tag, index) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: "".concat(tag.type, "-").concat(tag.label, "-").concat(index),
+      ref: function ref(element) {
+        measureRefs.current[index] = element;
+      },
+      "data-odn-skill-card-tag": tag.type
+    }, tag.type === 'hot' ? /*#__PURE__*/React.createElement(Icon, {
+      name: "hot-filled",
+      size: 14
+    }) : null, /*#__PURE__*/React.createElement("span", {
+      "data-odn-skill-card-tag-label": true
+    }, tag.label));
+  })));
+}
+
+/**
+ * 技能市场的展示卡片。
+ *
+ * 组件处理布局、状态优先级、Hover 动效和标准化 Action；数据筛选、
+ * 权限、详情路由及实际的添加、启停、试用行为均交由业务侧回调实现。
+ */
+export function SkillCard(_ref4) {
+  var _control$type, _statusLabel$type;
+  var name = _ref4.name,
+    nameEn = _ref4.nameEn,
+    description = _ref4.description,
+    icon = _ref4.icon,
+    avatarUrl = _ref4.avatarUrl,
+    _ref4$tags = _ref4.tags,
+    tags = _ref4$tags === void 0 ? [] : _ref4$tags,
+    statusLabel = _ref4.statusLabel,
+    _ref4$operations = _ref4.operations,
+    operations = _ref4$operations === void 0 ? [] : _ref4$operations,
+    button = _ref4.button,
+    control = _ref4.control,
+    onOpen = _ref4.onOpen,
+    className = _ref4.className,
+    style = _ref4.style,
+    rest = _objectWithoutProperties(_ref4, _excluded);
+  var isAddControl = (control === null || control === void 0 ? void 0 : control.type) === 'add';
+  var isToggleControl = (control === null || control === void 0 ? void 0 : control.type) === 'toggle';
+  var hasButton = !!button && !!(button.label || button.icon);
+  var canShowHoverActions = !statusLabel && (operations.length > 0 || hasButton) && (!isAddControl || control.added);
+  var hasActionGroup = !statusLabel && (!!control || canShowHoverActions);
+  /** 审核态也需要 Hover 动效；仅状态标签保持占位，不展示 ActionGroup。 */
+  var isHoverable = !!statusLabel || !!onOpen || hasActionGroup;
+  var operationMenu = operations.flatMap(function (operation, index) {
+    var _operations;
+    return [].concat(_toConsumableArray(operation.type === 'error' && index > 0 && ((_operations = operations[index - 1]) === null || _operations === void 0 ? void 0 : _operations.type) !== 'error' ? [{
+      type: 'separator'
+    }] : []), [{
+      label: /*#__PURE__*/React.createElement("span", {
+        className: clsx('flex items-center gap-2', operation.type === 'error' && 'text-red-6')
+      }, operation.icon ? /*#__PURE__*/React.createElement(Icon, {
+        name: operation.icon,
+        size: 16
+      }) : null, operation.label),
+      value: String(index),
+      disabled: operation.disabled
+    }]);
+  });
+  return /*#__PURE__*/React.createElement(Card, _extends({
+    elevation: 0,
+    "data-odn-skill-card": true,
+    "data-odn-skill-card-control": (_control$type = control === null || control === void 0 ? void 0 : control.type) !== null && _control$type !== void 0 ? _control$type : 'none',
+    "data-odn-skill-card-added": isAddControl ? String(control.added) : undefined,
+    "data-odn-skill-card-status": (_statusLabel$type = statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.type) !== null && _statusLabel$type !== void 0 ? _statusLabel$type : 'default',
+    "data-odn-skill-card-hoverable": isHoverable || undefined,
+    className: clsx(className),
+    style: style
+  }, rest), onOpen ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "data-odn-skill-card-open": true,
+    "aria-label": "\u6253\u5F00".concat(name, "\u8BE6\u60C5"),
+    onClick: onOpen
+  }) : null, /*#__PURE__*/React.createElement("span", {
+    "data-odn-skill-card-glow": true,
+    "aria-hidden": true
+  }), /*#__PURE__*/React.createElement("span", {
+    "data-odn-skill-card-icon": true,
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement(SkillCardMedia, {
+    avatarUrl: avatarUrl,
+    icon: icon,
+    alt: "".concat(name, "\u5934\u50CF")
+  })), /*#__PURE__*/React.createElement("span", {
+    "data-odn-skill-card-copy": true
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-skill-card-name-group": true
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-skill-card-name": true
+  }, name), nameEn ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-skill-card-alias": true
+  }, nameEn) : null), tags.length > 0 ? /*#__PURE__*/React.createElement(SkillCardTagList, {
+    tags: tags
+  }) : null), /*#__PURE__*/React.createElement("p", {
+    "data-odn-skill-card-description": true
+  }, description), statusLabel ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-skill-card-status-badge": statusLabel.type
+  }, statusLabel.label) : hasActionGroup ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-skill-card-action-group": true
+  }, isAddControl ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-skill-card-default-action": true
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    popup: control.added ? '移除已添加技能' : '添加技能',
+    placement: "top"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    size: "small",
+    intent: "normal",
+    icon: control.added ? 'check' : 'plus',
+    loading: control.loading,
+    "data-odn-skill-card-added-action": control.added || undefined,
+    "aria-label": control.added ? '移除已添加技能' : '添加技能',
+    disabled: !control.onChange || control.loading,
+    onClick: function onClick() {
+      var _control$onChange;
+      return (_control$onChange = control.onChange) === null || _control$onChange === void 0 ? void 0 : _control$onChange.call(control, !control.added);
+    }
+  }))) : null, canShowHoverActions ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-skill-card-hover-actions": true
+  }, operations.length > 0 ? /*#__PURE__*/React.createElement(Dropdown, {
+    popupClassName: "odn-skill-card-menu",
+    menu: operationMenu,
+    onSelect: function onSelect(value) {
+      var _operations$Number, _operations$Number$on;
+      return (_operations$Number = operations[Number(value)]) === null || _operations$Number === void 0 || (_operations$Number$on = _operations$Number.onClick) === null || _operations$Number$on === void 0 ? void 0 : _operations$Number$on.call(_operations$Number);
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-skill-card-operation-trigger": true
+  }, /*#__PURE__*/React.createElement(Button, {
+    light: true,
+    size: "small",
+    icon: "ellipsis",
+    "aria-label": "\u66F4\u591A\u64CD\u4F5C"
+  }))) : null, hasButton && button ? /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    size: "small",
+    intent: "normal",
+    icon: button.icon,
+    disabled: button.disabled || !button.onClick,
+    "data-odn-skill-card-try": true,
+    onClick: button.onClick
+  }, button.label) : null) : null, isToggleControl ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-skill-card-switch": true
+  }, /*#__PURE__*/React.createElement(Switch, {
+    size: "medium",
+    style: skillCardSwitchStyle,
+    checked: control.checked,
+    disabled: !control.onChange,
+    "aria-label": control.checked ? "\u505C\u7528".concat(name) : "\u542F\u7528".concat(name),
+    onChange: control.onChange
+  })) : null) : null);
+}
+SkillCard.displayName = 'SkillCard';
+export default SkillCard;

package/dist/skill-card/style/index.css

@@ -0,0 +1,430 @@
+@charset "UTF-8";
+html {
+  --odn-skill-card-height: 144px;
+  --odn-skill-card-padding: 20px;
+  --odn-skill-card-action-gap: 8px;
+  --odn-skill-card-hover-duration: 0.3s;
+  --odn-skill-card-hover-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --odn-skill-card-text: rgba(0, 0, 0, 0.95);
+  --odn-skill-card-secondary: rgba(51, 55, 61, 0.58);
+  --odn-skill-card-source: #296bef;
+  --odn-skill-card-source-bg: rgba(41, 107, 239, 0.1);
+  --odn-skill-card-soft-bg: rgba(74, 97, 143, 0.08);
+  --odn-skill-card-border: rgba(74, 97, 143, 0.08);
+}
+
+[data-odn-skill-card] {
+  --odn-card-radius: 16px;
+  box-sizing: border-box;
+  position: relative;
+  isolation: isolate;
+  width: 100%;
+  min-width: 0;
+  height: var(--odn-skill-card-height);
+  overflow: hidden;
+  border: 1px solid var(--odn-skill-card-border);
+  border-radius: 16px;
+  background: var(--odn-color-bg-elevated);
+  color: var(--odn-skill-card-text);
+  text-align: left;
+  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
+}
+
+[data-odn-skill-card][data-odn-skill-card-hoverable=true]:hover {
+  border-color: var(--odn-color-black-6);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+[data-odn-skill-card-open] {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+[data-odn-skill-card-open]:focus {
+  outline: none;
+}
+
+[data-odn-skill-card-open]:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--odn-color-primary) 55%, transparent);
+  outline-offset: -2px;
+}
+
+[data-odn-skill-card-glow] {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--odn-skill-card-hover-duration) var(--odn-skill-card-hover-ease);
+}
+
+[data-odn-skill-card-glow]::after {
+  content: "";
+  position: absolute;
+  left: -65px;
+  top: -30px;
+  width: 230px;
+  height: 130px;
+  transform: rotate(-8.4deg);
+  background-image: radial-gradient(ellipse at center, rgb(38, 148, 253), transparent 60%);
+}
+
+[data-odn-skill-card][data-odn-skill-card-hoverable=true]:hover [data-odn-skill-card-glow] {
+  opacity: 0.12;
+}
+
+[data-odn-skill-card-icon] {
+  position: absolute;
+  left: var(--odn-skill-card-padding);
+  top: var(--odn-skill-card-padding);
+  z-index: 10;
+  display: inline-flex;
+  pointer-events: none;
+  transform: scale(1);
+  transform-origin: center;
+  opacity: 1;
+  will-change: transform;
+  transition: transform var(--odn-skill-card-hover-duration) var(--odn-skill-card-hover-ease), opacity var(--odn-skill-card-hover-duration) var(--odn-skill-card-hover-ease);
+}
+
+[data-odn-skill-card][data-odn-skill-card-hoverable=true]:hover [data-odn-skill-card-icon] {
+  transform: scale(0.73);
+  opacity: 0;
+}
+
+[data-odn-skill-card-icon-box] {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 1px solid var(--odn-color-black-1);
+  border-radius: 8px;
+  color: rgb(38, 148, 253);
+  object-fit: cover;
+}
+
+[data-odn-skill-card-icon-box][data-odn-skill-card-icon-size=card] {
+  width: 48px;
+  height: 48px;
+}
+
+[data-odn-skill-card-icon-box][data-odn-skill-card-icon-size=detail] {
+  width: 80px;
+  height: 80px;
+}
+
+[data-odn-skill-card-icon-box][data-odn-skill-card-icon-tone=tinted] {
+  background: var(--odn-color-blue-1, #f2f7ff);
+}
+
+[data-odn-skill-card-icon-box][data-odn-skill-card-icon-tone=plain] {
+  background: var(--odn-color-bg-elevated);
+}
+
+[data-odn-skill-card-copy] {
+  position: absolute;
+  top: var(--odn-skill-card-padding);
+  right: 70px;
+  left: 80px;
+  z-index: 20;
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  pointer-events: none;
+  transform: translateX(0);
+  will-change: left, right, transform;
+  transition: left var(--odn-skill-card-hover-duration) var(--odn-skill-card-hover-ease), right var(--odn-skill-card-hover-duration) var(--odn-skill-card-hover-ease), transform var(--odn-skill-card-hover-duration) var(--odn-skill-card-hover-ease);
+}
+
+[data-odn-skill-card][data-odn-skill-card-control=add] [data-odn-skill-card-copy] {
+  right: 62px;
+}
+
+[data-odn-skill-card][data-odn-skill-card-status=info] [data-odn-skill-card-copy],
+[data-odn-skill-card][data-odn-skill-card-status=error] [data-odn-skill-card-copy] {
+  right: 92px;
+}
+
+[data-odn-skill-card][data-odn-skill-card-hoverable=true]:hover [data-odn-skill-card-copy] {
+  transform: translateX(-60px);
+}
+
+/* 审核态右上不切换操作，但左侧图标让位后 nameEn 需要获得真实可用宽度。 */
+[data-odn-skill-card][data-odn-skill-card-hoverable=true][data-odn-skill-card-status=info]:hover [data-odn-skill-card-copy],
+[data-odn-skill-card][data-odn-skill-card-hoverable=true][data-odn-skill-card-status=error]:hover [data-odn-skill-card-copy] {
+  left: var(--odn-skill-card-padding);
+  transform: translateX(0);
+}
+
+[data-odn-skill-card][data-odn-skill-card-hoverable=true][data-odn-skill-card-status=default][data-odn-skill-card-control=toggle]:hover [data-odn-skill-card-copy] {
+  right: 116px;
+}
+
+[data-odn-skill-card][data-odn-skill-card-hoverable=true][data-odn-skill-card-status=default][data-odn-skill-card-control=add][data-odn-skill-card-added=true]:hover [data-odn-skill-card-copy] {
+  right: 70px;
+}
+
+[data-odn-skill-card][data-odn-skill-card-hoverable=true][data-odn-skill-card-status=default][data-odn-skill-card-control=add][data-odn-skill-card-added=false]:hover [data-odn-skill-card-copy] {
+  right: 2px;
+}
+
+[data-odn-skill-card-name-group] {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 8px;
+}
+
+[data-odn-skill-card-name] {
+  min-width: 0;
+  max-width: calc(100% - 8px);
+  flex: 0 1 auto;
+  overflow: hidden;
+  color: var(--odn-skill-card-text);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-odn-skill-card-alias] {
+  min-width: 0;
+  flex: 1 1 0;
+  overflow: hidden;
+  color: var(--odn-skill-card-secondary);
+  font-size: 14px;
+  line-height: 22px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-odn-skill-card-label-group] {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+[data-odn-skill-card-tag] {
+  display: inline-flex;
+  box-sizing: border-box;
+  height: 22px;
+  flex-shrink: 0;
+  align-items: center;
+  border-radius: 4px;
+  padding: 0 6px;
+  font-size: 12px;
+  line-height: 22px;
+}
+
+[data-odn-skill-card-tag-label] {
+  min-width: 0;
+  white-space: nowrap;
+}
+
+[data-odn-skill-card-tag-last=true] {
+  min-width: 24px;
+  flex: 0 1 auto;
+  overflow: hidden;
+}
+
+[data-odn-skill-card-tag-last=true] [data-odn-skill-card-tag-label] {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-odn-skill-card-tag-measurer] {
+  position: absolute;
+  top: 0;
+  left: -9999px;
+  display: flex;
+  visibility: hidden;
+  white-space: nowrap;
+}
+
+[data-odn-skill-card-tag-measurer] [data-odn-skill-card-tag] {
+  flex: none;
+}
+
+[data-odn-skill-card-tag=brand] {
+  max-width: 84px;
+  overflow: hidden;
+  color: var(--odn-skill-card-source);
+  background: var(--odn-skill-card-source-bg);
+  font-weight: 500;
+}
+
+[data-odn-skill-card-tag=brand] [data-odn-skill-card-tag-label] {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-odn-skill-card-tag=hot] {
+  gap: 4px;
+  color: var(--odn-color-orange-6);
+  background: var(--odn-color-orange-1);
+  font-weight: 500;
+}
+
+[data-odn-skill-card-tag=normal] {
+  color: var(--odn-skill-card-secondary);
+  background: var(--odn-skill-card-soft-bg);
+}
+
+[data-odn-skill-card-description] {
+  position: absolute;
+  top: 80px;
+  right: var(--odn-skill-card-padding);
+  left: var(--odn-skill-card-padding);
+  z-index: 20;
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  color: var(--odn-skill-card-secondary);
+  font-size: 14px;
+  line-height: 22px;
+  pointer-events: none;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+[data-odn-skill-card-status-badge] {
+  position: absolute;
+  top: var(--odn-skill-card-padding);
+  right: var(--odn-skill-card-padding);
+  z-index: 30;
+  display: inline-flex;
+  box-sizing: border-box;
+  height: 22px;
+  align-items: center;
+  border-radius: 4px;
+  padding: 0 8px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 22px;
+}
+
+[data-odn-skill-card-status-badge=info] {
+  color: var(--odn-color-blue-6);
+  background: var(--odn-color-blue-1);
+}
+
+[data-odn-skill-card-status-badge=error] {
+  color: var(--odn-color-red-6);
+  background: var(--odn-color-red-1);
+}
+
+[data-odn-skill-card-action-group] {
+  position: absolute;
+  top: var(--odn-skill-card-padding);
+  right: var(--odn-skill-card-padding);
+  z-index: 30;
+  width: 144px;
+  height: 30px;
+}
+
+[data-odn-skill-card][data-odn-skill-card-control=add] [data-odn-skill-card-action-group],
+[data-odn-skill-card][data-odn-skill-card-control=none] [data-odn-skill-card-action-group] {
+  width: 98px;
+}
+
+[data-odn-skill-card-default-action] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  transition: opacity var(--odn-skill-card-hover-duration) ease-out, transform var(--odn-skill-card-hover-duration) ease-out;
+}
+
+[data-odn-skill-card-default-action] [data-odn-button] {
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
+  padding: 0;
+}
+
+/* 已添加仅保留绿色对勾；未添加仍使用带描边的“+”按钮。 */
+[data-odn-skill-card-default-action] [data-odn-button][data-odn-skill-card-added-action=true],
+[data-odn-skill-card-default-action] [data-odn-button][data-odn-skill-card-added-action=true]:hover {
+  color: var(--odn-color-green-6);
+  background: var(--odn-color-green-1);
+  border-color: transparent;
+}
+
+[data-odn-skill-card-hover-actions] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  height: 30px;
+  align-items: center;
+  gap: var(--odn-skill-card-action-gap);
+  pointer-events: none;
+  opacity: 0;
+  transform: translateX(4px);
+  transition: opacity var(--odn-skill-card-hover-duration) var(--odn-skill-card-hover-ease), transform var(--odn-skill-card-hover-duration) var(--odn-skill-card-hover-ease);
+}
+
+[data-odn-skill-card][data-odn-skill-card-control=toggle] [data-odn-skill-card-hover-actions] {
+  right: 46px;
+}
+
+/* 已添加 check 保持同一元素：默认居右，Hover 时位移到「去试试」左侧。 */
+[data-odn-skill-card][data-odn-skill-card-control=add][data-odn-skill-card-added=true] [data-odn-skill-card-default-action] {
+  right: 0;
+  left: auto;
+  width: 30px;
+  justify-content: center;
+}
+
+[data-odn-skill-card][data-odn-skill-card-control=add][data-odn-skill-card-added=true]:hover [data-odn-skill-card-default-action] {
+  transform: translateX(-68px);
+}
+
+[data-odn-skill-card][data-odn-skill-card-hoverable=true]:hover [data-odn-skill-card-hover-actions] {
+  pointer-events: auto;
+  opacity: 1;
+  transform: translateX(0);
+}
+
+[data-odn-skill-card][data-odn-skill-card-control=add][data-odn-skill-card-added=true]:hover [data-odn-skill-card-hover-actions] {
+  right: 0;
+}
+
+[data-odn-skill-card-try] {
+  width: 60px;
+  min-width: 60px;
+}
+
+[data-odn-skill-card-hover-actions] [data-odn-button][aria-label=更多操作] {
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
+  padding: 0;
+}
+
+[data-odn-dropdown-content].odn-skill-card-menu {
+  min-width: 120px;
+  padding: 4px 0;
+}
+
+[data-odn-skill-card-switch] {
+  position: absolute;
+  top: 5px;
+  right: 0;
+}

package/dist/skill-card/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/skill-card/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/package.json

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