#938 ChatPage UX 打磨 (移动端响应式 + 暗态增强 + 代码块复制按钮)
This commit is contained in:
SeniorDev committed
1 parent
84d89ab95a
commit
0820d408eb
2 files changed
+228
No files matched your search
@@ -0,0 +1,88 @@
|
||||
// ChatPage 移动端壳 + 复制按钮 hook — #938
|
||||
// 不直接改 ChatPage 主体,提供增强 hooks 与组件,可选挂载
|
||||
|
||||
import React, { useState, useCallback } from 'react';
|
||||
|
||||
/**
|
||||
* useCopyToClipboard — 复制文本到剪贴板(带回退方案)
|
||||
*/
|
||||
export function useCopyToClipboard(): [boolean, (text: string) => Promise<void>] {
|
||||
const [ok, setOk] = useState(false);
|
||||
const copy = useCallback(async (text: string) => {
|
||||
try {
|
||||
if (navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
} else {
|
||||
// Fallback for older browsers / non-secure context
|
||||
const ta = document.createElement('textarea');
|
||||
ta.value = text;
|
||||
ta.style.position = 'fixed';
|
||||
ta.style.opacity = '0';
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(ta);
|
||||
}
|
||||
setOk(true);
|
||||
setTimeout(() => setOk(false), 1500);
|
||||
} catch (e) {
|
||||
setOk(false);
|
||||
}
|
||||
}, []);
|
||||
return [ok, copy];
|
||||
}
|
||||
|
||||
/**
|
||||
* CopyButton — 通用复制按钮(挂载到代码块)
|
||||
*/
|
||||
export const CopyButton: React.FC<{ text: string; label?: string }> = ({ text, label = '复制' }) => {
|
||||
const [copied, copy] = useCopyToClipboard();
|
||||
return (
|
||||
<button
|
||||
className="md-code-copy-btn"
|
||||
onClick={(e) => { e.preventDefault(); copy(text); }}
|
||||
title={copied ? '已复制' : label}
|
||||
aria-label={copied ? 'Copied' : 'Copy code'}
|
||||
type="button"
|
||||
>
|
||||
{copied ? '✓' : label}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* useIsMobile — 简单响应式 hook(< 768px)
|
||||
*/
|
||||
export function useIsMobile(breakpoint = 768): boolean {
|
||||
const [isMobile, setIsMobile] = useState(
|
||||
typeof window !== 'undefined' ? window.innerWidth < breakpoint : false
|
||||
);
|
||||
React.useEffect(() => {
|
||||
if (typeof window === 'undefined') return;
|
||||
const onResize = () => setIsMobile(window.innerWidth < breakpoint);
|
||||
window.addEventListener('resize', onResize, { passive: true });
|
||||
return () => window.removeEventListener('resize', onResize);
|
||||
}, [breakpoint]);
|
||||
return isMobile;
|
||||
}
|
||||
|
||||
/**
|
||||
* CodeBlockWithCopy — 包裹 code 块自动注入复制按钮
|
||||
* 用法:<CodeBlockWithCopy lang="python">{`print("hi")`}</CodeBlockWithCopy>
|
||||
*/
|
||||
export const CodeBlockWithCopy: React.FC<{
|
||||
lang?: string;
|
||||
children: React.ReactNode;
|
||||
}> = ({ lang, children }) => {
|
||||
const text = typeof children === 'string' ? children : String(children || '');
|
||||
return (
|
||||
<div className="md-code-block-wrapper">
|
||||
<pre className="md-code-block" data-lang={lang}>
|
||||
<code>{children}</code>
|
||||
</pre>
|
||||
<CopyButton text={text} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default { CopyButton, CodeBlockWithCopy, useCopyToClipboard, useIsMobile };
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user