#938 ChatPage UX 打磨 (移动端响应式 + 暗态增强 + 代码块复制按钮)

2026-08-09 21:40:44 +08:00
1 parent 84d89ab95a
commit 0820d408eb
@@ -1784,3 +1784,143 @@ html.dark .ai-sending-timeout {
@keyframes aiPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
 .ai-process-error { background: rgba(255,0,0,0.05); border-left: 2px solid #e74c3c; }
 .ai-process-running { border-left: 2px solid #3498db; }
+
+/* 2026-07-29: 增强列表/卡片样式 */
+.markdown-body ul.md-ul {
+  list-style: none;
+  padding-left: 0;
+  margin: 12px 0;
+}
+.markdown-body ul.md-ul li.md-li {
+  position: relative;
+  padding: 8px 12px 8px 28px;
+  margin: 4px 0;
+  border-left: 3px solid var(--color-accent, #5B5FED);
+  background: linear-gradient(90deg, rgba(91,95,237,0.04), transparent);
+  border-radius: 0 8px 8px 0;
+  line-height: 1.7;
+  transition: all 0.2s ease;
+}
+.markdown-body ul.md-ul li.md-li:hover {
+  background: linear-gradient(90deg, rgba(91,95,237,0.10), transparent);
+  border-left-color: var(--color-accent-active, #4A4ECC);
+}
+.markdown-body ul.md-ul li.md-li::before {
+  content: "▸";
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-accent, #5B5FED);
+  font-weight: bold;
+}
+.markdown-body ul.md-ul li.md-li ul.md-ul {
+  margin: 8px 0 4px 8px;
+  padding-left: 0;
+}
+.markdown-body ul.md-ul li.md-li ul.md-ul li.md-li {
+  padding: 4px 8px 4px 20px;
+  border-left-width: 2px;
+  font-size: 0.95em;
+}
+.markdown-body ol {
+  padding-left: 24px;
+  margin: 12px 0;
+}
+.markdown-body ol > li {
+  padding: 4px 0 4px 4px;
+  margin: 4px 0;
+  line-height: 1.7;
+}
+// ChatPage 移动端响应式 + 暗态增强 — #938
+// 添加到 ChatPage.css 末尾(项目已有 :root CSS var 系统)
+
+/* ===== 移动端响应式(< 768px) ===== */
+@media (max-width: 768px) {
+  /* 聊天列表改单列 */
+  .chat-layout {
+    flex-direction: column !important;
+  }
+  .chat-sidebar {
+    width: 100% !important;
+    max-height: 35vh;
+    overflow-y: auto;
+  }
+  .chat-main {
+    flex: 1 !important;
+    width: 100% !important;
+  }
+  /* Composer 全宽 */
+  .chat-composer {
+    padding: 8px 12px !important;
+  }
+  /* 消息气泡减少 padding */
+  .markdown-body {
+    padding: 8px 10px !important;
+  }
+  /* 隐藏次要工具栏(等) */
+  .chat-toolbar-secondary {
+    display: none !important;
+  }
+}
+
+/* ===== 平板(768-1024) ===== */
+@media (min-width: 768px) and (max-width: 1024px) {
+  .chat-sidebar {
+    width: 240px !important;
+  }
+}
+
+/* ===== 暗态增强(虽然 :root + .dark 已支持,但部分 inline color 需降级) ===== */
+.dark .markdown-body {
+  background-color: var(--color-surface-elevated);
+  color: var(--color-text);
+  border-color: var(--color-border);
+}
+.dark .md-code-block {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-color: var(--color-border);
+}
+
+/* ===== 富文本增强:代码块复制按钮 ===== */
+.md-code-block-wrapper {
+  position: relative;
+}
+.md-code-copy-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  padding: 2px 10px;
+  font-size: 11px;
+  border-radius: 4px;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 200ms;
+}
+.md-code-block-wrapper:hover .md-code-copy-btn {
+  opacity: 1;
+}
+.md-code-copy-btn:hover {
+  background: var(--color-primary);
+  color: #fff;
+}
+
+/* ===== 移动端表格响应式 ===== */
+.markdown-body table {
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* ===== prefers-reduced-motion 降级 ===== */
+@media (prefers-reduced-motion: reduce) {
+  .md-code-copy-btn,
+  .chat-sidebar,
+  .chat-composer {
+    transition: none !important;
+  }
+}