zsjz-ai/ai-electron/frontend/src/codex/styles/codexTheme.less

/**
 * Codex 数据分析 —— 全局样式与设计 token
 *
 * 色彩一律取自项目既有 token（antd legacy 变量 + @cb-* 色板），不引入新色系；
 * 暗色由 vite-plugin-theme 重新编译 LESS 变量自动生效，
 * 因此这里只写变量引用，不写 html[data-theme] 覆盖。
 *
 * 布局骨架：顶部状态条 + 主区（唯一滚动容器在消息流上）+ 底部固定输入区，
 * 左侧会话栏、右侧产物栏。产物栏在窄屏收起。
 */

:root {
  /* ---------- 色（全部映射到项目 token） ---------- */
  --codex-bg: @component-background;
  --codex-bg-page: @content-bg;
  --codex-bg-subtle: @cb-vscode-input-background;
  --codex-bg-hover: @cb-vscode-list-hoverBackground;
  --codex-bg-active: @cb-vscode-list-activeSelectionBackground;
  --codex-border: @border-color-base;
  --codex-border-strong: @cb-border-color;
  --codex-text: @cb-text-primary;
  --codex-text-2: @cb-text-secondary;
  --codex-text-3: @text-color-help-dark;
  --codex-primary: @primary-color;
  --codex-primary-soft: fade(@primary-color, 8%);
  --codex-primary-softer: fade(@primary-color, 4%);
  --codex-success: @success-color;
  --codex-warning: @warning-color;
  --codex-error: @error-color;
  --codex-code-bg: @cb-vscode-input-background;

  /* ---------- 间距刻度（4/8/12/16/24/32） ---------- */
  --codex-sp-1: 4px;
  --codex-sp-2: 8px;
  --codex-sp-3: 12px;
  --codex-sp-4: 16px;
  --codex-sp-5: 24px;
  --codex-sp-6: 32px;

  /* ---------- 圆角 ---------- */
  --codex-radius-sm: 4px;
  --codex-radius: 8px;
  --codex-radius-lg: 12px;

  /* ---------- 阴影（克制，仅用于浮层） ---------- */
  --codex-shadow-sm: 0 1px 2px rgba(27, 31, 36, 0.06);
  --codex-shadow: 0 2px 8px rgba(27, 31, 36, 0.08);
  --codex-shadow-lg: 0 8px 24px rgba(27, 31, 36, 0.12);

  /* ---------- 层级 ---------- */
  --codex-z-sticky: 10;
  --codex-z-dropdown: 100;
  --codex-z-modal: 1000;

  /* ---------- 尺寸 ---------- */
  --codex-topbar-h: 52px;
  --codex-sidebar-w: 248px;
  --codex-aside-w: 360px;
  /* 消息流 / 输入区共用同一内容列宽，保证纵向对齐 */
  --codex-column-max: 880px;
}

/* ------------------------------------------------------------------ *
 * 页面外壳
 * ------------------------------------------------------------------ */

/* 整页卡片：只反冲布局内容容器的左右各 10px，留出灰底 gutter，
   与 AI 数据分析页（.ai-page）保持同一套对齐方式 */
.codex-page {
  display: flex;
  flex-direction: column;
  width: calc(100% + 20px);
  height: 100%;
  min-height: 0;
  margin: 0 -10px;
  background: var(--codex-bg);
  border: 1px solid var(--codex-border);
  border-radius: var(--codex-radius-lg);
  overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * 顶部状态条
 * ------------------------------------------------------------------ */

.codex-topbar {
  display: flex;
  align-items: center;
  gap: var(--codex-sp-3);
  flex: 0 0 auto;
  height: var(--codex-topbar-h);
  padding: 0 var(--codex-sp-3);
  background: var(--codex-bg);
  border-bottom: 1px solid var(--codex-border);

  &__title {
    display: flex;
    align-items: baseline;
    gap: var(--codex-sp-2);
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--codex-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__meta {
    font-size: 12px;
    font-weight: 400;
    color: var(--codex-text-2);
  }

  &__spacer {
    flex: 1 1 auto;
  }

  &__status {
    display: flex;
    align-items: center;
    gap: var(--codex-sp-2);
    flex: 0 0 auto;
  }

  &__actions {
    display: flex;
    align-items: center;
    gap: var(--codex-sp-2);
    flex: 0 0 auto;
  }
}

/* 运行时状态点 */
.codex-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--codex-text-3);

  &--idle {
    background: var(--codex-text-3);
  }

  &--ready {
    background: var(--codex-success);
  }

  &--busy {
    background: var(--codex-warning);
  }

  &--error {
    background: var(--codex-error);
  }
}

/* ------------------------------------------------------------------ *
 * 主区：会话栏 / 消息区 / 产物栏
 * ------------------------------------------------------------------ */

.codex-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.codex-sidebar {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--codex-sidebar-w);
  width: var(--codex-sidebar-w);
  min-height: 0;
  background: var(--codex-bg-subtle);
  border-right: 1px solid var(--codex-border);
}

.codex-aside {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--codex-aside-w);
  width: var(--codex-aside-w);
  min-height: 0;
  background: var(--codex-bg);
  border-left: 1px solid var(--codex-border);
}

/* 侧栏 / 产物栏的区块头 */
.codex-panel-head {
  display: flex;
  align-items: center;
  gap: var(--codex-sp-2);
  flex: 0 0 auto;
  height: 40px;
  padding: 0 var(--codex-sp-3);
  font-size: 12px;
  font-weight: 600;
  color: var(--codex-text-2);
  border-bottom: 1px solid var(--codex-border);
}

.codex-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--codex-sp-2);
  scrollbar-gutter: stable;
}

.codex-main {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* 唯一滚动容器 */
.codex-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* 内容列：消息流与输入区共用 */
.codex-column {
  width: 100%;
  max-width: var(--codex-column-max);
  margin: 0 auto;
  padding: 0 var(--codex-sp-4);
}

/* ------------------------------------------------------------------ *
 * 空态与占位
 * ------------------------------------------------------------------ */

.codex-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-top: var(--codex-sp-6);
  padding-bottom: var(--codex-sp-6);

  &__title {
    margin: 0 0 var(--codex-sp-2);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--codex-text);
  }

  &__desc {
    max-width: 620px;
    margin: 0 0 var(--codex-sp-5);
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--codex-text-2);
  }

  &__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--codex-border);
  }

  &__item {
    display: flex;
    align-items: flex-start;
    gap: var(--codex-sp-3);
    padding: var(--codex-sp-3) 0;
    border-bottom: 1px solid var(--codex-border);
  }

  &__index {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 600;
    color: var(--codex-primary);
    background: var(--codex-primary-soft);
    border-radius: 50%;
  }

  &__prompt {
    display: block;
    width: 100%;
    padding: 0;
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
    color: var(--codex-text-2);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 0.15s ease-out;

    &:hover:not(:disabled) {
      color: var(--codex-primary);
    }

    &:disabled {
      cursor: default;
      opacity: 0.7;
    }
  }
}

/* 侧栏 / 产物栏的空白占位文案 */
.codex-placeholder {
  padding: var(--codex-sp-4) var(--codex-sp-2);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--codex-text-3);
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * 底部输入区（固定，不随消息流滚动）
 * ------------------------------------------------------------------ */

.codex-composer {
  flex: 0 0 auto;
  border-top: 1px solid var(--codex-border);
  background: var(--codex-bg);
}

/* ------------------------------------------------------------------ *
 * 响应式：窄屏收起产物栏（会话栏保留，最小可用形态）
 * ------------------------------------------------------------------ */

@media (max-width: 1199px) {
  .codex-aside {
    display: none;
  }

  :root {
    --codex-sidebar-w: 208px;
  }
}

/* ------------------------------------------------------------------ *
 * 共享基元：块卡片 / 小按钮 / markdown 正文 / 全屏浮层
 *
 * 这些类被多个块组件复用，所以统一放全局（也顺带避开 teleport 到 body
 * 的浮层选不中 scoped 样式的问题）。
 * ------------------------------------------------------------------ */

.codex-card {
  margin: var(--codex-sp-3) 0;
  background: var(--codex-bg);
  border: 1px solid var(--codex-border);
  border-radius: var(--codex-radius);
  overflow: hidden;

  &__head {
    display: flex;
    align-items: center;
    gap: var(--codex-sp-2);
    flex: 0 0 auto;
    padding: 6px 8px 6px 12px;
    border-bottom: 1px solid var(--codex-border);
  }

  &__label {
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--codex-text-2);
  }

  &__meta {
    font-size: 12px;
    color: var(--codex-text-2);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__spacer {
    flex: 1 1 auto;
  }

  &__actions {
    display: flex;
    align-items: center;
    gap: var(--codex-sp-1);
    flex: 0 0 auto;
  }

  &__body {
    padding: var(--codex-sp-3);
  }

  &__body--flush {
    padding: 0;
  }
}

.codex-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  white-space: nowrap;
  color: var(--codex-text-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--codex-radius-sm);
  cursor: pointer;
  transition:
    color 0.15s ease-out,
    background 0.15s ease-out,
    border-color 0.15s ease-out;

  &:hover:not(:disabled),
  &.is-on {
    color: var(--codex-primary);
    background: var(--codex-primary-soft);
    border-color: fade(@primary-color, 35%);
  }

  &:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
}

/* 代码块（含 markdown 正文里的行内代码） */
.codex-pre {
  margin: 0;
  padding: var(--codex-sp-3);
  overflow: auto;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12px;
  line-height: 1.65;
  color: var(--codex-text);
  background: var(--codex-code-bg);
  white-space: pre;
  tab-size: 2;
}

/* 带行号的代码块：行号列固定宽度，正文横向滚动 */
.codex-pre--numbered {
  display: flex;
  padding: 0;

  .codex-pre__gutter {
    flex: 0 0 auto;
    padding: var(--codex-sp-3) 8px;
    text-align: right;
    color: var(--codex-text-3);
    background: var(--codex-bg-subtle);
    border-right: 1px solid var(--codex-border);
    user-select: none;
  }

  .codex-pre__code {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--codex-sp-3);
    overflow-x: auto;
  }
}

/* 自动换行：内容折行，行号列不会跟着错位（行号按逻辑行渲染） */
.codex-pre.is-wrapped .codex-pre__code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* markdown 正文（回复文本块 / report 块共用） */
.codex-md {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--codex-text);
  word-break: break-word;

  > :first-child {
    margin-top: 0;
  }

  > :last-child {
    margin-bottom: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    margin: var(--codex-sp-4) 0 var(--codex-sp-2);
    font-weight: 600;
    line-height: 1.4;
    color: var(--codex-text);
  }

  h1 {
    font-size: 19px;
  }

  h2 {
    font-size: 16px;
  }

  h3 {
    font-size: 14.5px;
  }

  h4,
  h5 {
    font-size: 13.5px;
  }

  p {
    margin: var(--codex-sp-2) 0;
  }

  ul,
  ol {
    margin: var(--codex-sp-2) 0;
    padding-left: 22px;
  }

  li {
    margin: 2px 0;
  }

  a {
    color: var(--codex-primary);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  hr {
    margin: var(--codex-sp-4) 0;
    border: 0;
    border-top: 1px solid var(--codex-border);
  }

  blockquote {
    margin: var(--codex-sp-2) 0;
    padding: var(--codex-sp-2) var(--codex-sp-3);
    color: var(--codex-text-2);
    background: var(--codex-bg-subtle);
    border-left: 3px solid var(--codex-border-strong);
    border-radius: 0 var(--codex-radius-sm) var(--codex-radius-sm) 0;
  }

  code {
    padding: 1px 5px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 12px;
    background: var(--codex-code-bg);
    border-radius: var(--codex-radius-sm);
  }

  pre {
    margin: var(--codex-sp-2) 0;
    padding: var(--codex-sp-3);
    overflow-x: auto;
    background: var(--codex-code-bg);
    border: 1px solid var(--codex-border);
    border-radius: var(--codex-radius-sm);

    code {
      padding: 0;
      background: none;
    }
  }

  table {
    width: 100%;
    margin: var(--codex-sp-2) 0;
    border-collapse: collapse;
    font-size: 12.5px;

    th,
    td {
      padding: 6px 10px;
      text-align: left;
      border: 1px solid var(--codex-border);
      word-break: break-all;
    }

    th {
      font-weight: 600;
      background: var(--codex-bg-subtle);
    }
  }

  img {
    max-width: 100%;
  }
}

/* 全屏查看：CSS 浮层（不用 Fullscreen API，客户端可能被嵌在 iframe 里） */
.codex-block-fullscreen {
  position: fixed;
  inset: 0;
  z-index: var(--codex-z-modal);
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--codex-bg);
  border: 0;
  border-radius: 0;
}

/* 加载骨架 */
.codex-skeleton {
  background: linear-gradient(
    90deg,
    var(--codex-bg-subtle) 25%,
    var(--codex-bg-hover) 37%,
    var(--codex-bg-subtle) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--codex-radius-sm);
  animation: codex-skeleton-loading 1.4s ease infinite;
}

@keyframes codex-skeleton-loading {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

/* 状态徽标 */
.codex-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  font-size: 11px;
  line-height: 18px;
  border-radius: 9px;
  border: 1px solid transparent;

  &--running {
    color: var(--codex-primary);
    background: var(--codex-primary-soft);
    border-color: fade(@primary-color, 30%);
  }

  &--done {
    color: var(--codex-success);
    background: fade(@success-color, 10%);
  }

  &--error {
    color: var(--codex-error);
    background: fade(@error-color, 10%);
  }

  &--interrupted {
    color: var(--codex-warning);
    background: fade(@warning-color, 12%);
  }

  &--muted {
    color: var(--codex-text-2);
    background: var(--codex-bg-subtle);
  }
}