dsh-github-flow 0.5.0 → 0.6.0

package/lib/ui/styles.js

@@ -217,6 +217,31 @@ body[data-ds-dark-theme] .dsh-github-card-subtext {
   color: var(--dsw-alias-label-tertiary, #888);
 }
 
+/* fork 血缘行：说明「这是谁的上游」，上游名可点击 */
+.dsh-github-fork-line {
+  font-size: 12px;
+  margin-top: 4px;
+  color: var(--dsw-alias-label-secondary, #656d76);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+body[data-ds-dark-theme] .dsh-github-fork-line {
+  color: var(--dsw-alias-label-secondary, #bbb);
+}
+.dsh-github-fork-line a {
+  color: var(--dsw-alias-link, #0969da);
+  text-decoration: none;
+  font-weight: 600;
+}
+.dsh-github-fork-line a:hover {
+  text-decoration: underline;
+}
+body[data-ds-dark-theme] .dsh-github-fork-line a {
+  color: #58a6ff;
+}
+
 /* 7. 徽章（Badges） */
 .dsh-github-badge {
   display: inline-flex;
@@ -242,6 +267,22 @@ body[data-ds-dark-theme] .dsh-github-card-subtext {
   color: #9a6700;
   border: 1px solid rgba(154, 103, 0, 0.2);
 }
+
+/*
+ * 只读徽章：与 yellow 同色系但描边更明显，因为「你改不了」是需要被看见的约束。
+ * 独立类而非复用 yellow，是为了将来调整只读语义的视觉强度时不牵动其他黄色徽章。
+ */
+.dsh-badge-readonly {
+  background: rgba(154, 103, 0, 0.12);
+  color: #9a6700;
+  border: 1px solid rgba(154, 103, 0, 0.35);
+  font-weight: 600;
+}
+body[data-ds-dark-theme] .dsh-badge-readonly {
+  background: rgba(210, 153, 34, 0.18);
+  color: #d29922;
+  border-color: rgba(210, 153, 34, 0.4);
+}
 .dsh-badge-blue {
   background: rgba(9, 105, 218, 0.12);
   color: #0969da;
@@ -1528,6 +1569,925 @@ body[data-ds-dark-theme] .dsh-github-btn-sm.active {
   color: #f0b72f !important;
   border-color: #d29922 !important;
 }
+
+/* 19. 关联仓库切换器 (RepoSelectorDropdown) */
+.dsh-github-repo-switch-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 1px 7px;
+  font-size: 11px;
+  font-weight: 500;
+  border-radius: 12px;
+  border: 1px solid rgba(130, 80, 223, 0.35);
+  background: rgba(130, 80, 223, 0.1);
+  color: #8250df;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+  line-height: 16px;
+}
+.dsh-github-repo-switch-trigger:hover {
+  background: rgba(130, 80, 223, 0.2);
+  border-color: rgba(130, 80, 223, 0.6);
+}
+body[data-ds-dark-theme] .dsh-github-repo-switch-trigger {
+  border-color: rgba(163, 113, 247, 0.4);
+  background: rgba(163, 113, 247, 0.15);
+  color: #a371f7;
+}
+body[data-ds-dark-theme] .dsh-github-repo-switch-trigger:hover {
+  background: rgba(163, 113, 247, 0.25);
+  border-color: #a371f7;
+}
+
+.dsh-github-repo-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 5px;
+  width: 320px;
+  max-height: 380px;
+  background: var(--dsw-alias-bg-base, #ffffff);
+  border: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+body[data-ds-dark-theme] .dsh-github-repo-dropdown {
+  background: var(--dsw-alias-bg-layer-2, #1e1e22);
+  border-color: var(--dsw-alias-border-l1, #30363d);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
+}
+
+.dsh-github-repo-dropdown-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  background: var(--dsw-alias-bg-layer-1, #f6f8fa);
+  border-bottom: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  color: var(--dsw-alias-label-secondary, #57606a);
+}
+body[data-ds-dark-theme] .dsh-github-repo-dropdown-header {
+  background: var(--dsw-alias-bg-layer-1, #16161a);
+  border-bottom-color: var(--dsw-alias-border-l1, #30363d);
+  color: var(--dsw-alias-label-secondary, #8b949e);
+}
+
+.dsh-github-repo-dropdown-list {
+  overflow-y: auto;
+  max-height: 260px;
+  padding: 4px 0;
+}
+
+.dsh-github-repo-item {
+  padding: 7px 12px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.12s ease;
+  color: var(--dsw-alias-label-primary, #1f2328);
+}
+.dsh-github-repo-item:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05));
+}
+body[data-ds-dark-theme] .dsh-github-repo-item {
+  color: var(--dsw-alias-label-primary, #f0f6fc);
+}
+body[data-ds-dark-theme] .dsh-github-repo-item:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, 0.06));
+}
+.dsh-github-repo-item.selected {
+  background: rgba(9, 105, 218, 0.08);
+}
+body[data-ds-dark-theme] .dsh-github-repo-item.selected {
+  background: rgba(56, 139, 253, 0.15);
+}
+
+.dsh-github-repo-dropdown-footer {
+  padding: 6px 10px;
+  font-size: 10px;
+  background: var(--dsw-alias-bg-layer-1, #f6f8fa);
+  border-top: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  color: var(--dsw-alias-label-tertiary, #656d76);
+  line-height: 1.4;
+}
+body[data-ds-dark-theme] .dsh-github-repo-dropdown-footer {
+  background: var(--dsw-alias-bg-layer-1, #16161a);
+  border-top-color: var(--dsw-alias-border-l1, #30363d);
+  color: var(--dsw-alias-label-tertiary, #8b949e);
+}
+
+.dsh-github-switch-quicklink {
+  font-size: 11px;
+  cursor: pointer;
+  color: var(--dsw-alias-link, #0969da);
+  text-decoration: none;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  margin-left: 6px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: rgba(9, 105, 218, 0.08);
+  border: 1px solid rgba(9, 105, 218, 0.2);
+}
+.dsh-github-switch-quicklink:hover {
+  text-decoration: none;
+  background: rgba(9, 105, 218, 0.16);
+  border-color: rgba(9, 105, 218, 0.4);
+}
+body[data-ds-dark-theme] .dsh-github-switch-quicklink {
+  color: #58a6ff;
+  background: rgba(56, 139, 253, 0.15);
+  border-color: rgba(56, 139, 253, 0.3);
+}
+body[data-ds-dark-theme] .dsh-github-switch-quicklink:hover {
+  background: rgba(56, 139, 253, 0.25);
+  border-color: rgba(56, 139, 253, 0.5);
+}
+
+/* 20. PR 在线详情与代码审阅工作台 (PrDetailModal) */
+.dsh-github-pr-modal-dialog {
+  width: 95% !important;
+  max-width: 1040px !important;
+  height: 88vh !important;
+  max-height: 88vh !important;
+  display: flex !important;
+  flex-direction: column !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+}
+
+.dsh-github-pr-modal-header {
+  padding: 12px 16px !important;
+  border-bottom: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  background: var(--dsw-alias-bg-layer-1, #f6f8fa);
+  flex-shrink: 0;
+}
+body[data-ds-dark-theme] .dsh-github-pr-modal-header {
+  border-bottom-color: var(--dsw-alias-border-l1, #30363d);
+  background: var(--dsw-alias-bg-layer-1, #16161a);
+}
+
+.dsh-github-pr-modal-tabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 16px;
+  background: var(--dsw-alias-bg-base, #ffffff);
+  border-bottom: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  flex-shrink: 0;
+}
+body[data-ds-dark-theme] .dsh-github-pr-modal-tabs {
+  background: var(--dsw-alias-bg-layer-2, #1e1e22);
+  border-bottom-color: var(--dsw-alias-border-l1, #30363d);
+}
+
+.dsh-github-pr-tab-btn {
+  padding: 5px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #656d76);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.dsh-github-pr-tab-btn:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05));
+  color: var(--dsw-alias-label-primary, #1f2328);
+}
+.dsh-github-pr-tab-btn.active {
+  background: var(--dsw-alias-interactive-bg-active, rgba(9, 105, 218, 0.1));
+  color: var(--dsw-alias-link, #0969da);
+  font-weight: 600;
+  border-color: rgba(9, 105, 218, 0.25);
+}
+body[data-ds-dark-theme] .dsh-github-pr-tab-btn {
+  color: var(--dsw-alias-label-secondary, #8b949e);
+}
+body[data-ds-dark-theme] .dsh-github-pr-tab-btn:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: #f0f6fc;
+}
+body[data-ds-dark-theme] .dsh-github-pr-tab-btn.active {
+  background: rgba(56, 139, 253, 0.15);
+  color: #58a6ff;
+  border-color: rgba(56, 139, 253, 0.4);
+}
+
+.dsh-github-pr-conversation-pane {
+  padding: 16px !important;
+  overflow-y: auto !important;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  /* 滚到边界时不把滚动传给弹窗外层，避免整页跟着滚 */
+  overscroll-behavior: contain;
+}
+
+.dsh-github-pr-checks-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: var(--dsw-alias-bg-module-platform, #f6f8fa);
+  border: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  border-radius: 6px;
+  font-size: 11px;
+}
+body[data-ds-dark-theme] .dsh-github-pr-checks-bar {
+  background: var(--dsw-alias-bg-layer-1, #16161a);
+  border-color: var(--dsw-alias-border-l1, #30363d);
+}
+
+.dsh-github-pr-body-card {
+  border: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-base, #ffffff);
+  overflow: hidden;
+  /*
+   * flex: 0 0 auto 是滚动能否工作的关键。
+   * 父容器 .dsh-github-pr-conversation-pane 是 flex-direction: column，
+   * flex 子项默认 flex-shrink: 1 —— 内容变长时会被「压缩」而不是撑开父容器，
+   * 父容器的 overflow-y: auto 于是永远不触发，长内容被直接裁掉。
+   * 禁止收缩后卡片高度由内容决定，父容器才能真正滚动。
+   */
+  flex: 0 0 auto;
+}
+body[data-ds-dark-theme] .dsh-github-pr-body-card {
+  border-color: var(--dsw-alias-border-l1, #30363d);
+  background: var(--dsw-alias-bg-layer-2, #1e1e22);
+}
+
+.dsh-github-pr-comment-card {
+  border: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-base, #ffffff);
+  overflow: hidden;
+  margin-bottom: 10px;
+  /* 同 body-card：禁止收缩，否则父容器滚不动（见上方注释） */
+  flex: 0 0 auto;
+}
+body[data-ds-dark-theme] .dsh-github-pr-comment-card {
+  border-color: var(--dsw-alias-border-l1, #30363d);
+  background: var(--dsw-alias-bg-layer-2, #1e1e22);
+}
+
+.dsh-github-pr-comment-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 12px;
+  background: var(--dsw-alias-bg-module-platform, #f6f8fa);
+  border-bottom: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  font-size: 11px;
+}
+body[data-ds-dark-theme] .dsh-github-pr-comment-header {
+  background: var(--dsw-alias-bg-layer-1, #16161a);
+  border-bottom-color: var(--dsw-alias-border-l1, #30363d);
+}
+
+.dsh-github-pr-files-pane {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.dsh-github-pr-file-list {
+  width: 280px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  background: var(--dsw-alias-bg-layer-1, #f6f8fa);
+  overflow-y: auto;
+  padding: 6px 0;
+}
+body[data-ds-dark-theme] .dsh-github-pr-file-list {
+  border-right-color: var(--dsw-alias-border-l1, #30363d);
+  background: var(--dsw-alias-bg-layer-1, #16161a);
+}
+
+/*
+ * 拖拽分隔条。宽度 6px 而非常见的 1px：细条几乎点不中，
+ * 是分栏拖拽最常见的可用性缺陷。
+ */
+.dsh-github-pr-splitter {
+  position: relative;
+  flex-shrink: 0;
+  width: 6px;
+  cursor: col-resize;
+  background: var(--dsw-alias-border-l2, #e1e4e8);
+  transition: background 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dsh-github-pr-splitter:hover {
+  background: var(--dsw-alias-link, #0969da);
+}
+body[data-ds-dark-theme] .dsh-github-pr-splitter {
+  background: var(--dsw-alias-border-l1, #30363d);
+}
+body[data-ds-dark-theme] .dsh-github-pr-splitter:hover {
+  background: #58a6ff;
+}
+
+/* 折叠按钮贴在分隔条中部，始终可见——折叠后这是唯一的视觉恢复提示 */
+.dsh-github-pr-splitter-toggle {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--dsw-alias-border-l2, #d0d7de);
+  border-radius: 3px;
+  background: var(--dsw-alias-bg-base, #ffffff);
+  color: var(--dsw-alias-label-secondary, #656d76);
+  font-size: 8px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+.dsh-github-pr-splitter-toggle:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.06));
+  color: var(--dsw-alias-label-primary, #1f2328);
+}
+body[data-ds-dark-theme] .dsh-github-pr-splitter-toggle {
+  border-color: var(--dsw-alias-border-l1, #30363d);
+  background: var(--dsw-alias-bg-layer-2, #1e1e22);
+  color: var(--dsw-alias-label-secondary, #8b949e);
+}
+body[data-ds-dark-theme] .dsh-github-pr-splitter-toggle:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #f0f6fc;
+}
+
+/*
+ * PR 卡片标题行：标题在左、跳转按钮钉在最右，且严格保持同一行。
+ *
+ * 为什么需要这个容器：.dsh-github-item 本身是 flex-direction: column，
+ * 若把按钮直接放进去，它会独占一整行、只剩一个孤零零的 ↗ 字符，
+ * 既丑也让用户看不出这是可点的入口。包进横向 flex 行即可解决。
+ */
+.dsh-github-pr-title-row {
+  display: flex;
+  align-items: center; /* 标题已强制单行，居中对齐即「同一行」 */
+  gap: 10px;
+  width: 100%;
+  min-width: 0;
+}
+.dsh-github-pr-title-row .dsh-github-item-title {
+  /*
+   * flex: 0 1 auto —— 标题按自身内容宽度占据，可收缩（shrink 1）但不撑满（grow 0）。
+   *
+   * 为什么不是 flex: 1 1 0%：
+   * 标题行里现在还有状态徽章（MERGED/CLOSED）跟在标题右侧。
+   * 若标题 grow 撑满全部剩余空间，徽章会被顶到最右边紧贴「GitHub ↗」按钮，
+   * 看起来像两个右边控件挤在一起，而不是「标题 → 状态 → 按钮」的阅读顺序。
+   * 改成不撑满后，徽章自然紧跟在标题文字之后；
+   * 「按钮贴最右」由按钮自身的 margin-left: auto 保证，与此处无关。
+   */
+  flex: 0 1 auto;
+  /*
+   * min-width: 0 是关键。flex 子项默认 min-width: auto，
+   * PR 标题经常很长，会撑破容器把右侧徽章与按钮顶出可视区——
+   * 没有这一行，text-overflow: ellipsis 根本不会生效。
+   */
+  min-width: 0;
+  /*
+   * white-space: nowrap + ellipsis：标题只占一行。
+   * 若允许换行，标题变成两三行后徽章与按钮会浮在首行右侧，
+   * 视觉上与文字末行错位——用户看到的就是「按钮跑到上面去了」。
+   * 完整标题通过 title 属性悬浮查看，这也是 GitHub 自身的做法。
+   */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* 标题与按钮之间靠 flex 分配留白，不额外加 margin */
+  text-decoration: none;
+}
+
+/*
+ * 「GitHub ↗」跳转按钮。
+ *
+ * 视觉规格按截图反馈重做：原先是 font-size 11px / padding 2px 8px，
+ * 在深色背景上又矮又小、与 13px 标题不匹配，看起来像贴在文字上的标签。
+ * 现在放大到与标题同一视觉量级，并给出明确的悬浮反馈。
+ */
+.dsh-github-pr-gh-btn {
+  flex-shrink: 0; /* 永不压缩，宁可让标题省略 */
+  /*
+   * margin-left: auto 是双保险：即使标题因某种原因没吃满 flex 空间
+   * （如父容器宽度异常、flex-basis 被覆盖），按钮仍会被推到最右侧，
+   * 而不是紧贴在标题文字屁股后面。
+   */
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  padding: 3px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--dsw-alias-border-l2, #d0d7de);
+  background: var(--dsw-alias-bg-module-platform, #f6f8fa);
+  color: var(--dsw-alias-label-secondary, #57606a);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: all 0.15s ease;
+}
+.dsh-github-pr-gh-btn:hover {
+  color: var(--dsw-alias-link, #0969da);
+  border-color: var(--dsw-alias-link, #0969da);
+  background: var(--dsw-alias-interactive-bg-hover, #eaeef2);
+}
+body[data-ds-dark-theme] .dsh-github-pr-gh-btn {
+  border-color: var(--dsw-alias-border-l1, #30363d);
+  background: var(--dsw-alias-bg-layer-2, #1e1e22);
+  color: var(--dsw-alias-label-secondary, #8b949e);
+}
+body[data-ds-dark-theme] .dsh-github-pr-gh-btn:hover {
+  color: #58a6ff;
+  border-color: #58a6ff;
+  background: rgba(56, 139, 253, 0.15);
+}
+
+.dsh-github-pr-file-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 12px;
+  font-size: 11px;
+  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
+  cursor: pointer;
+  color: var(--dsw-alias-label-primary, #1f2328);
+  transition: background 0.12s ease;
+}
+.dsh-github-pr-file-item:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05));
+}
+.dsh-github-pr-file-item.selected {
+  background: rgba(9, 105, 218, 0.1);
+  color: var(--dsw-alias-link, #0969da);
+  font-weight: 600;
+}
+body[data-ds-dark-theme] .dsh-github-pr-file-item {
+  color: var(--dsw-alias-label-primary, #f0f6fc);
+}
+body[data-ds-dark-theme] .dsh-github-pr-file-item:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+body[data-ds-dark-theme] .dsh-github-pr-file-item.selected {
+  background: rgba(56, 139, 253, 0.18);
+  color: #58a6ff;
+}
+
+.dsh-github-pr-diff-viewer {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--dsw-alias-bg-base, #ffffff);
+}
+body[data-ds-dark-theme] .dsh-github-pr-diff-viewer {
+  background: var(--dsw-alias-bg-layer-2, #1e1e22);
+}
+
+.dsh-github-pr-diff-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  background: var(--dsw-alias-bg-module-platform, #f6f8fa);
+  flex-shrink: 0;
+}
+body[data-ds-dark-theme] .dsh-github-pr-diff-toolbar {
+  border-bottom-color: var(--dsw-alias-border-l1, #30363d);
+  background: var(--dsw-alias-bg-layer-1, #16161a);
+}
+
+/* 行级审查评论：与对话区评论视觉区分（左侧紫色描边，暗示「挂在代码上」） */
+.dsh-github-pr-line-comments {
+  border-top: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  padding: 10px 12px 14px;
+  background: var(--dsw-alias-bg-layer-1, #f6f8fa);
+}
+body[data-ds-dark-theme] .dsh-github-pr-line-comments {
+  border-top-color: var(--dsw-alias-border-l1, #30363d);
+  background: var(--dsw-alias-bg-layer-1, #16161a);
+}
+.dsh-github-pr-line-comments-title {
+  font-size: 11px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--dsw-alias-label-secondary, #656d76);
+}
+body[data-ds-dark-theme] .dsh-github-pr-line-comments-title {
+  color: var(--dsw-alias-label-secondary, #8b949e);
+}
+.dsh-github-pr-line-comment-item {
+  border-left: 3px solid rgba(130, 80, 223, 0.5);
+  border-radius: 4px;
+  background: var(--dsw-alias-bg-base, #ffffff);
+  padding: 8px 10px;
+  margin-bottom: 8px;
+}
+body[data-ds-dark-theme] .dsh-github-pr-line-comment-item {
+  background: var(--dsw-alias-bg-layer-2, #1e1e22);
+  border-left-color: rgba(163, 113, 247, 0.6);
+}
+.dsh-github-pr-line-comment-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  font-size: 11px;
+  margin-bottom: 5px;
+}
+.dsh-github-pr-line-comment-body {
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--dsw-alias-label-primary, #1f2328);
+}
+body[data-ds-dark-theme] .dsh-github-pr-line-comment-body {
+  color: var(--dsw-alias-label-primary, #f0f6fc);
+}
+
+/* 21. PR 弹窗内的 Markdown 排版 (markdown-lite) */
+.dsh-github-md-body {
+  padding: 12px;
+  font-size: 12px;
+  line-height: 1.7;
+  word-break: break-word;
+  color: var(--dsw-alias-label-primary, #1f2328);
+}
+body[data-ds-dark-theme] .dsh-github-md-body {
+  color: var(--dsw-alias-label-primary, #f0f6fc);
+}
+
+/* 标题：GitHub 的层级差距比浏览器默认小，避免 h3 过大撑破卡片 */
+.dsh-github-md-body .dsh-github-md-heading {
+  margin: 14px 0 8px 0;
+  font-weight: 600;
+  line-height: 1.4;
+}
+.dsh-github-md-body h1.dsh-github-md-heading { font-size: 17px; }
+.dsh-github-md-body h2.dsh-github-md-heading { font-size: 15px; }
+.dsh-github-md-body h3.dsh-github-md-heading { font-size: 14px; }
+.dsh-github-md-body h4.dsh-github-md-heading { font-size: 13px; }
+.dsh-github-md-body h5.dsh-github-md-heading,
+.dsh-github-md-body h6.dsh-github-md-heading { font-size: 12px; opacity: 0.9; }
+.dsh-github-md-body > .dsh-github-md-heading:first-child {
+  margin-top: 0;
+}
+
+.dsh-github-md-body .dsh-github-md-p {
+  margin: 0 0 10px 0;
+}
+.dsh-github-md-body .dsh-github-md-p:last-child {
+  margin-bottom: 0;
+}
+
+/* 行内代码：用边框 + 底色与正文区分，比单纯改字体更易辨识 */
+.dsh-github-md-body .dsh-github-md-inline-code {
+  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
+  font-size: 0.92em;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--dsw-alias-bg-subtle, rgba(0, 0, 0, 0.06));
+  border: 1px solid var(--dsw-alias-border-subtle, rgba(0, 0, 0, 0.08));
+  word-break: break-all;
+}
+body[data-ds-dark-theme] .dsh-github-md-body .dsh-github-md-inline-code {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+/* 围栏代码块：横向可滚，绝不换行——换行会毁掉缩进语义 */
+.dsh-github-md-body .dsh-github-md-pre {
+  margin: 10px 0;
+  padding: 10px 12px;
+  border-radius: 6px;
+  overflow-x: auto;
+  max-height: 420px;
+  background: var(--dsw-alias-bg-subtle, rgba(0, 0, 0, 0.04));
+  border: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+}
+body[data-ds-dark-theme] .dsh-github-md-body .dsh-github-md-pre {
+  background: rgba(0, 0, 0, 0.3);
+  border-color: var(--dsw-alias-border-l1, #30363d);
+}
+.dsh-github-md-body .dsh-github-md-pre code {
+  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
+  font-size: 11px;
+  line-height: 1.55;
+  white-space: pre;
+  display: block;
+}
+
+.dsh-github-md-body .dsh-github-md-list {
+  margin: 8px 0;
+  padding-left: 22px;
+}
+.dsh-github-md-body .dsh-github-md-list li {
+  margin: 4px 0;
+}
+.dsh-github-md-body .dsh-github-md-task {
+  list-style: none;
+  margin-left: -18px;
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+}
+.dsh-github-md-body .dsh-github-md-checkbox {
+  flex-shrink: 0;
+  opacity: 0.8;
+}
+
+.dsh-github-md-body .dsh-github-md-quote {
+  margin: 10px 0;
+  padding: 6px 12px;
+  border-left: 3px solid var(--dsw-alias-border-l3, #d0d7de);
+  color: var(--dsw-alias-label-secondary, #656d76);
+  background: var(--dsw-alias-bg-subtle, rgba(0, 0, 0, 0.02));
+  border-radius: 0 4px 4px 0;
+}
+
+.dsh-github-md-body .dsh-github-md-hr {
+  margin: 14px 0;
+  border: none;
+  border-top: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+}
+body[data-ds-dark-theme] .dsh-github-md-body .dsh-github-md-hr {
+  border-top-color: var(--dsw-alias-border-l1, #30363d);
+}
+
+.dsh-github-md-body .dsh-github-md-link {
+  color: var(--dsw-alias-link, #0969da);
+  text-decoration: none;
+}
+.dsh-github-md-body .dsh-github-md-link:hover {
+  text-decoration: underline;
+}
+body[data-ds-dark-theme] .dsh-github-md-body .dsh-github-md-link {
+  color: #58a6ff;
+}
+
+/* 折叠/展开按钮：低调的文本按钮，不抢正文视觉 */
+.dsh-github-md-expand-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0 0 4px 12px;
+  padding: 3px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  border-radius: 5px;
+  border: 1px solid var(--dsw-alias-border-l2, #d0d7de);
+  background: var(--dsw-alias-bg-module-platform, #f6f8fa);
+  color: var(--dsw-alias-label-secondary, #57606a);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.dsh-github-md-expand-btn:hover {
+  color: var(--dsw-alias-link, #0969da);
+  border-color: var(--dsw-alias-link, #0969da);
+}
+body[data-ds-dark-theme] .dsh-github-md-expand-btn {
+  border-color: var(--dsw-alias-border-l1, #30363d);
+  background: var(--dsw-alias-bg-layer-2, #1e1e22);
+  color: var(--dsw-alias-label-secondary, #8b949e);
+}
+body[data-ds-dark-theme] .dsh-github-md-expand-btn:hover {
+  color: #58a6ff;
+  border-color: #58a6ff;
+}
+
+/* 22. Issue 在线查看弹窗 (IssueDetailModal)
+ *
+ * 为什么是单列而不是 PR 那样的双栏：Issue 没有 diff 载荷，没有需要并排
+ * 对照的第二个信息源。把宽度全部让给 Markdown 正文，行宽更接近 80 字符的
+ * 可读区间，长讨论读起来比挤在左半边舒服得多。
+ */
+.dsh-github-issue-modal-dialog {
+  width: 92% !important;
+  max-width: 880px !important;
+  height: 84vh !important;
+  max-height: 84vh !important;
+  display: flex !important;
+  flex-direction: column !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+}
+
+.dsh-github-issue-modal-header {
+  padding: 12px 16px !important;
+  border-bottom: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  background: var(--dsw-alias-bg-layer-1, #f6f8fa);
+  flex-shrink: 0;
+}
+body[data-ds-dark-theme] .dsh-github-issue-modal-header {
+  border-bottom-color: var(--dsw-alias-border-l1, #30363d);
+  background: var(--dsw-alias-bg-layer-1, #16161a);
+}
+
+.dsh-github-issue-conversation-pane {
+  padding: 16px !important;
+  overflow-y: auto !important;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  /* 滚到边界不把滚动传给弹窗外层，避免整页跟着滚 */
+  overscroll-behavior: contain;
+}
+
+/* 元数据条：标签/指派人/里程碑/关联 PR 全部以胶囊呈现，一行不够自然换行 */
+.dsh-github-issue-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+}
+.dsh-github-issue-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--dsw-alias-border-l2, #d0d7de);
+  background: var(--dsw-alias-bg-module-platform, #f6f8fa);
+  color: var(--dsw-alias-label-secondary, #57606a);
+  font-size: 11px;
+  line-height: 18px;
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* 标签胶囊自身带 label 色（行内 background/borderColor 覆盖），
+ * 这里的类只用于色点与文字对其，不设背景以免行内样式失效时变成灰块 */
+.dsh-github-issue-label-chip {
+  color: var(--dsw-alias-label-primary, #1f2328);
+}
+/* 逾期里程碑：用错误色描边提示「这条已经过期了」，否则和正常 milestone 长得一样 */
+.dsh-github-issue-chip-overdue {
+  border-color: rgba(207, 34, 46, 0.5);
+  color: var(--dsw-alias-state-error-primary, #cf222e);
+}
+body[data-ds-dark-theme] .dsh-github-issue-chip-overdue {
+  border-color: rgba(248, 81, 73, 0.5);
+  color: #f85149;
+}
+.dsh-github-issue-label-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+/* 可点击的胶囊（图片清单开关、关联 PR 外链）必须有 hover 反馈，否则看不出可点 */
+.dsh-github-issue-chip-btn,
+.dsh-github-issue-chip-link {
+  cursor: pointer;
+  text-decoration: none;
+  font-family: inherit;
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+.dsh-github-issue-chip-btn:hover,
+.dsh-github-issue-chip-link:hover {
+  color: var(--dsw-alias-link, #0969da);
+  border-color: var(--dsw-alias-link, #0969da);
+}
+body[data-ds-dark-theme] .dsh-github-issue-chip {
+  border-color: var(--dsw-alias-border-l1, #30363d);
+  background: var(--dsw-alias-bg-layer-2, #1e1e22);
+  color: var(--dsw-alias-label-secondary, #8b949e);
+}
+body[data-ds-dark-theme] .dsh-github-issue-label-chip {
+  color: var(--dsw-alias-label-primary, #f0f6fc);
+}
+body[data-ds-dark-theme] .dsh-github-issue-chip-btn:hover,
+body[data-ds-dark-theme] .dsh-github-issue-chip-link:hover {
+  color: #58a6ff;
+  border-color: #58a6ff;
+}
+
+/* 图片清单：展开后逐行列出外链，不与正文混排 */
+.dsh-github-issue-image-badge {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 100%;
+}
+.dsh-github-issue-image-links {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  border: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  background: var(--dsw-alias-bg-base, #ffffff);
+}
+body[data-ds-dark-theme] .dsh-github-issue-image-links {
+  border-color: var(--dsw-alias-border-l1, #30363d);
+  background: var(--dsw-alias-bg-layer-2, #1e1e22);
+}
+.dsh-github-issue-image-link {
+  font-size: 11px;
+  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
+  color: var(--dsw-alias-link, #0969da);
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dsh-github-issue-image-link:hover {
+  text-decoration: underline;
+}
+
+/* 正文与评论卡片：同 PR 弹窗，flex: 0 0 auto 是滚动能否工作的前提 */
+.dsh-github-issue-body-card,
+.dsh-github-issue-comment-card {
+  border: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-base, #ffffff);
+  overflow: hidden;
+  /* 禁止收缩：父容器是 column flex，默认 flex-shrink:1 会压缩卡片
+   * 而不是撑开父容器，导致 overflow-y:auto 永不触发（长 Issue 滚不动） */
+  flex: 0 0 auto;
+}
+.dsh-github-issue-comment-card {
+  margin-bottom: 10px;
+}
+body[data-ds-dark-theme] .dsh-github-issue-body-card,
+body[data-ds-dark-theme] .dsh-github-issue-comment-card {
+  border-color: var(--dsw-alias-border-l1, #30363d);
+  background: var(--dsw-alias-bg-layer-2, #1e1e22);
+}
+
+.dsh-github-issue-comment-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  background: var(--dsw-alias-bg-module-platform, #f6f8fa);
+  border-bottom: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  font-size: 11px;
+}
+body[data-ds-dark-theme] .dsh-github-issue-comment-header {
+  background: var(--dsw-alias-bg-layer-1, #16161a);
+  border-bottom-color: var(--dsw-alias-border-l1, #30363d);
+}
+
+/* 正文容器不加 padding：CollapsibleBody 内部的 .dsh-github-md-body 已有 12px，
+ * 双层叠加会让正文比评论缩进更深，视觉上误读成引用块 */
+.dsh-github-issue-body-content {
+  padding: 0;
+}
+
+.dsh-github-issue-timeline-title {
+  margin: 4px 0 0 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary, #1f2328);
+  flex: 0 0 auto;
+}
+body[data-ds-dark-theme] .dsh-github-issue-timeline-title {
+  color: var(--dsw-alias-label-primary, #f0f6fc);
+}
+
+.dsh-github-issue-empty-timeline {
+  padding: 16px 0;
+  text-align: center;
+  font-size: 12px;
+  opacity: 0.6;
+  flex: 0 0 auto;
+}
 `;
 export function injectStyles() {
     var styleId = "dsh-plugin-github-styles";