@morlay/ui-conversation-manager 0.1.4 → 0.1.5

package/src/client/ConversationManagerPage.styles.ts

@@ -1,256 +0,0 @@
-import { styling, type CSSProps } from "@morlay/dsh-client-ui-primitives/client";
-
-const spin = styling.keyframes({
-  from: { transform: "rotate(0deg)" },
-  to: { transform: "rotate(360deg)" },
-});
-
-// 「对话管理」页面的样式表（官方 --dsw-* 变量 + 我们的 css-in-js 层）：页面根是纵向 flex 且**自己不滚**，
-// 页头（标题 / tab 条 / 导入 / 清理）与搜索行固定在顶部，只有 `scroll` 那层随内容滚；除滚动层外的项都
-// `flex: none`，否则内容变长时会被压到 min-content（官方 Input 的 32px 高会被压成一行文字高）。
-export const styles = {
-  page: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px",
-    boxSizing: "border-box",
-    width: "100%",
-    height: "100%",
-    padding: "24px 28px",
-    overflow: "hidden",
-    color: "var(--dsw-alias-label-primary)",
-  },
-  // 页面里唯一的滚动容器：提示 / 空态 / 列表 / 分页（或 usage 视图）都在它里面。
-  scroll: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px",
-    flex: "1 1 auto",
-    minHeight: "0",
-    overflowY: "auto",
-  },
-  header: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "12px",
-    flex: "none",
-  },
-  headerActions: {
-    display: "flex",
-    alignItems: "center",
-    gap: "8px",
-    flex: "none",
-  },
-  title: {
-    margin: "0",
-    fontSize: "16px",
-    lineHeight: "24px",
-    fontWeight: "500",
-  },
-  // 与官方会话头部的 tab 条同形（ConversationRoot.module.css 的 .tabs/.tab/.tabActive）：
-  // 时间范围与维度切换共用这一套，选中态是品牌蓝文字 + 2px 下划线。
-  tabs: {
-    position: "relative",
-    zIndex: "1",
-    display: "flex",
-    gap: "36px",
-    marginTop: "10px",
-    paddingLeft: "8px",
-    flex: "none",
-  },
-  tab: {
-    position: "relative",
-    padding: "0 0 9px",
-    border: "none",
-    background: "transparent",
-    fontSize: "13px",
-    lineHeight: "16px",
-    fontWeight: "500",
-    color: "var(--dsw-alias-label-tertiary)",
-    cursor: "pointer",
-    "&::after": {
-      content: "''",
-      position: "absolute",
-      right: "0",
-      bottom: "-1px",
-      left: "0",
-      height: "2px",
-      borderRadius: "2px",
-      background: "transparent",
-    },
-  },
-  tabActive: {
-    color: "var(--dsw-alias-state-business-primary)",
-    "&::after": {
-      background: "var(--dsw-alias-state-business-primary)",
-    },
-  },
-  usage: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px",
-    flex: "none",
-  },
-  // 一行用量：label 在上，下面是横向排布的单项（每个单项内部上下）。
-  usageRow: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "6px",
-    padding: "10px 12px",
-    border: "1px solid var(--dsw-alias-border-l1)",
-    borderRadius: "10px",
-    background: "var(--dsw-alias-bg-base)",
-    flex: "none",
-  },
-  usageRowLabel: {
-    overflow: "hidden",
-    fontSize: "12px",
-    lineHeight: "18px",
-    color: "var(--dsw-alias-label-tertiary)",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-  },
-  usageMetrics: {
-    display: "flex",
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: "6px 20px",
-  },
-  usageMetric: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "2px",
-  },
-  usageMetricLabel: {
-    fontSize: "12px",
-    lineHeight: "18px",
-    color: "var(--dsw-alias-label-tertiary)",
-  },
-  usageMetricValue: {
-    fontSize: "16px",
-    lineHeight: "24px",
-    fontWeight: "500",
-    fontVariantNumeric: "tabular-nums",
-  },
-  usageList: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "4px",
-    margin: "0",
-    padding: "0",
-    listStyle: "none",
-    flex: "none",
-  },
-  filters: {
-    display: "flex",
-    alignItems: "center",
-    gap: "16px",
-    flex: "none",
-  },
-  // 官方 Input 的 wrap 是 inline-flex：这里只补宽度，其余样式仍归官方。
-  search: {
-    width: "360px",
-    maxWidth: "100%",
-    flex: "none",
-  },
-  list: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "4px",
-    margin: "0",
-    padding: "0",
-    listStyle: "none",
-    flex: "none",
-  },
-  row: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "16px",
-    padding: "10px 12px",
-    border: "1px solid var(--dsw-alias-border-l1)",
-    borderRadius: "10px",
-    background: "var(--dsw-alias-bg-base)",
-    flex: "none",
-  },
-  identity: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "2px",
-    minWidth: "0",
-  },
-  titleLine: {
-    display: "flex",
-    alignItems: "center",
-    gap: "8px",
-    minWidth: "0",
-  },
-  rowTitle: {
-    overflow: "hidden",
-    fontSize: "13px",
-    lineHeight: "20px",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-  },
-  meta: {
-    fontSize: "12px",
-    lineHeight: "18px",
-    color: "var(--dsw-alias-label-tertiary)",
-  },
-  actions: {
-    display: "flex",
-    alignItems: "center",
-    gap: "8px",
-    flex: "none",
-  },
-  pagination: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    gap: "8px",
-    marginTop: "4px",
-    flex: "none",
-  },
-  paginationLabel: {
-    fontSize: "12px",
-    lineHeight: "18px",
-    color: "var(--dsw-alias-label-tertiary)",
-    fontVariantNumeric: "tabular-nums",
-  },
-  status: {
-    margin: "0",
-    fontSize: "13px",
-    lineHeight: "20px",
-    color: "var(--dsw-alias-label-tertiary)",
-    flex: "none",
-  },
-  failure: {
-    margin: "0",
-    fontSize: "13px",
-    lineHeight: "20px",
-    color: "var(--dsw-alias-label-error, var(--dsw-alias-label-primary))",
-    flex: "none",
-  },
-  blocking: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: "14px",
-    padding: "32px 40px",
-    color: "var(--dsw-alias-label-primary)",
-  },
-  spinner: {
-    width: "28px",
-    height: "28px",
-    border: "2px solid var(--dsw-alias-border-l2)",
-    borderTopColor: "var(--dsw-alias-label-primary)",
-    borderRadius: "50%",
-    animation: `${spin} 900ms linear infinite`,
-  },
-  blockingText: {
-    margin: "0",
-    fontSize: "13px",
-    lineHeight: "20px",
-  },
-} satisfies Record<string, CSSProps>;