react两个组件中间加一个可以拖动跳转左右大小的功能

徐同保2026-01-14 17:46

完成！我已经成功在 ModalLeftPanel 和 ModalRightPanel 之间添加了可拖动的分隔条功能。

实现的功能：

1. 状态管理（第 197、200 行）
  • 添加了 leftPanelWidth state 来追踪左侧面板的宽度百分比（默认 50%）
  • 添加了 isDraggingRef ref 来追踪是否正在拖动
2. 拖动事件处理（第 247-280 行）
  • handleMouseDown: 鼠标按下时开始拖动，改变光标样式
  • handleMouseMove: 鼠标移动时计算新的面板宽度
    • 限制宽度范围在 20% - 80% 之间
    • 考虑了侧边栏宽度（75px）
  • handleMouseUp: 鼠标释放时结束拖动，恢复光标样式
  • 使用 useEffect 注册和清理全局事件监听器
3. 分隔条组件（第 1257-1278 行）
复制代码 
const Resizer = styled.div`
  width: 5px;
  background: var(--color-border);
  cursor: col-resize;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;

  &:hover {
    background: var(--color-primary);  // 悬停时高亮显示
  }
4. 面板样式更新（第 1243-1255、738、753 行）
  • 移除了 flex: 1，改为使用动态宽度
  • 添加了 overflow: hidden 防止内容溢出
  • 在 JSX 中应用动态宽度：
    • 左侧面板：style={``{ width: ${leftPanelWidth}% }}
    • 右侧面板：style={``{ width: ${100 - leftPanelWidth}% }}

使用效果：

✅ 可拖动分隔条 ：用户可以拖动中间的分隔条

✅ 视觉反馈 ：鼠标悬停时分隔条会高亮显示为主题色

✅ 宽度限制 ：限制在 20%-80% 之间，确保两侧面板都有足够空间

✅ 流畅体验 ：拖动时光标变为 col-resize，提供清晰的交互提示

✅ 响应式：自动适应窗口大小变化

用户现在可以根据自己的需求自由调整左右面板的大小，获得更好的阅读和对比体验！

javascript 复制代码 
export const PaperChat: React.FC<PaperChatProps> = ({ url, onClose, config }) => {

  const messageListRef = useRef<HTMLDivElement>(null)

  const isDraggingRef = useRef(false) // 是否正在拖动分隔条



  // 处理分隔条拖动
  const handleMouseDown = (e: React.MouseEvent) => {
    e.preventDefault()
    isDraggingRef.current = true
    document.body.style.cursor = 'col-resize'
    document.body.style.userSelect = 'none'
  }

  const handleMouseMove = React.useCallback((e: MouseEvent) => {
    if (!isDraggingRef.current) return

    const containerWidth = window.innerWidth - 75 // 减去侧边栏宽度
    const newLeftWidth = ((e.clientX - 75) / containerWidth) * 100

    // 限制最小和最大宽度（20% - 80%）
    if (newLeftWidth >= 20 && newLeftWidth <= 80) {
      setLeftPanelWidth(newLeftWidth)
    }
  }, [])

  const handleMouseUp = React.useCallback(() => {
    isDraggingRef.current = false
    document.body.style.cursor = ''
    document.body.style.userSelect = ''
  }, [])

  


  return (
    <div
      style={{
        background: 'var(--color-background)',
        display: 'flex',
        position: 'relative',
        flexDirection: 'column',
        height: '100%'
      }}>
      {/* 顶部模式切换按钮 */}
      <TopModeToggle>
        <ModeToggleButton
          type="default"
          onClick={() => setPolishMode(polishMode === 'paragraph' ? 'article' : 'paragraph')}>
          <TranslationOutlined />
          {polishMode === 'paragraph' ? config.paragraphModeText : config.articleModeText}
        </ModeToggleButton>
      </TopModeToggle>
      <ComponentContainer>
        {polishMode === 'paragraph' ? renderParagraphMode() : renderArticleMode()}
      </ComponentContainer>
      {/* 文章模式结果弹窗 - 全屏双栏布局（露出左侧菜单栏） */}
      <Modal
        title={config.articleModalTitle}
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        centered={false}
        zIndex={1000}
        maskStyle={{ left: 'var(--sidebar-width, 75px)' }}
        footer={[
          <Button key="close" onClick={() => setModalVisible(false)}>
            关闭
          </Button>,
          <Button
            key="copy"
            type="primary"
            onClick={() => {
              navigator.clipboard.writeText(modalContent)
              message.success('已复制到剪贴板')
            }}
            disabled={!modalContent}>
            复制结果
          </Button>
        ]}
        width="calc(100vw - var(--sidebar-width, 75px))"
        style={{
          top: 0,
          paddingBottom: 0,
          maxWidth: 'calc(100vw - var(--sidebar-width, 75px))',
          margin: 0,
          position: 'absolute',
          right: 0
        }}
        styles={{
          body: { height: 'calc(100vh - 110px)', padding: 0, overflow: 'hidden' },
          content: { height: '100vh', borderRadius: 0 },
          wrapper: { left: 'var(--sidebar-width, 75px)', right: 0 }
        }}>
        <ModalSplitContainer>
          {/* 左侧：原文内容 */}
          <ModalLeftPanel style={{ width: `${leftPanelWidth}%` }}>
            <ModalPanelHeader>原文内容</ModalPanelHeader>
            <ModalPanelContent>
              {originalArticleContent ? (
                <OriginalContentWrapper>{originalArticleContent}</OriginalContentWrapper>
              ) : (
                <EmptyHint>正在读取文件内容...</EmptyHint>
              )}
            </ModalPanelContent>
          </ModalLeftPanel>

          {/* 可拖动的分隔条 */}
          <Resizer onMouseDown={handleMouseDown} />

          {/* 右侧：处理结果 */}
          <ModalRightPanel style={{ width: `${100 - leftPanelWidth}%` }}>
            <ModalPanelHeader>处理结果</ModalPanelHeader>
            <ModalPanelContent ref={modalContentRef}>
              {articleLoading && !modalContent && !modalReasoningContent ? (
                <ModalLoadingWrapper>
                  <Spin size="large" />
                  <span>{config.articleLoadingText}</span>
                </ModalLoadingWrapper>
              ) : (
                <ModalContentWrapper>
                  {/* 思考链折叠组件 */}
                  {modalReasoningContent && (
                    <ModalThinkingBlock
                      reasoningContent={modalReasoningContent}
                      isThinking={modalIsThinking}
                      hasContent={!!modalContent}
                    />
                  )}
                  {typeof modalContent === 'string' && modalContent && (
                    <MarkdownContent>
                      <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
                        {modalContent}
                      </ReactMarkdown>
                    </MarkdownContent>
                  )}
                  {articleLoading && (
                    <StreamingIndicator>
                      <Spin size="small" />
                      <span>正在生成中...</span>
                    </StreamingIndicator>
                  )}
                </ModalContentWrapper>
              )}
            </ModalPanelContent>
          </ModalRightPanel>
        </ModalSplitContainer>
      </Modal>
    </div>
  )
}

const IconCircle = styled.div`
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #5b7cfb 0%, #6a55f6 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 8px 16px rgba(106, 85, 246, 0.2);
`

const HeaderTitle = styled.h1`
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-text);
`

const HeaderTitleRow = styled.div`
  display: flex;
  align-items: flex-start;
  gap: 12px;
`

const Header = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 16px;
`

const Content = styled.div`
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 20px;
  box-sizing: border-box;
  min-height: 0;
  overflow: hidden;
`

const LeftColumn = styled.div`
  flex: 2;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px;
  padding: 20px 20px 18px;
  box-sizing: border-box;
`

const RightColumn = styled.div`
  flex: 2;
  display: flex;
  flex-direction: column;
  background: var(--color-background-soft);
  border-radius: 24px;
  padding: 20px 20px 12px;
  box-sizing: border-box;
  min-height: 0;
  overflow: hidden;
`

const MessagesContainer = styled.div`
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  min-height: 0;
`

const MessageRow = styled.div<{ $type: 'user' | 'assistant' }>`
  display: flex;
  flex-direction: column;
  align-items: ${(props) => (props.$type === 'user' ? 'flex-end' : 'flex-start')};
  margin-bottom: 12px;
`

const MessageBubble = styled.div<{ $type: 'user' | 'assistant'; $error?: boolean }>`
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  word-break: break-word;
  background-color: ${(props) =>
    props.$error ? '#fff1f0' : props.$type === 'user' ? 'var(--color-primary)' : '#f5f5f5'};
  color: ${(props) => (props.$type === 'user' ? '#ffffff' : 'var(--color-text-1)')};
`

const MessageTime = styled.div`
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-text-3);
`

const EmptyHint = styled.div`
  font-size: 13px;
  color: var(--color-text-2);
  text-align: left;
`

const SearchCard = styled.div`
  flex: 1;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 20px;
  padding: 18px 18px 14px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
`

const SearchActions = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  background: var(--color-background-soft);
  padding: 8px 12px;
  margin-bottom: 12px;
`

const InputArea = styled.div`
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border: 1px silod var(--color-primary);
`

const SendButton = styled(Button)`
  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  color: var(--color-text-2);
  box-shadow: none;
  &:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--color-primary);
  }
  &:disabled {
    background-color: transparent;
    color: var(--color-text-4);
  }
`

const HeaderIndex = styled.div`
  font-size: 12px;
  color: var(--color-text-3);
  margin-bottom: 4px;
`

const HeaderSubtitle = styled.div`
  font-size: 12px;
  color: var(--color-text-2);
  margin-top: 4px;
`

const EditorFooter = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
`

const FooterLeft = styled.div`
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
`

const FooterRight = styled.div`
  display: flex;
  align-items: center;
`

const LangToggleButton = styled(Button)`
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  background-color: transparent;
  color: var(--color-text-2);
  display: flex;
  align-items: center;
  &:hover {
    border-color: #cbd5e1;
    color: var(--color-text-2);
    background-color: transparent;
  }
`

const ModelSelectButton = styled(Button)`
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--color-text);
  border: 1px solid #79a3f8;
  display: flex;
  align-items: center;
  background-color: transparent;
  &:hover {
    color: var(--color-primary);
    border-color: #1962f4;
    background-color: transparent;
  }
`

const ModeToggleButton = styled(Button)`
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13px;
  border: none;
  background: linear-gradient(90deg, #79a3f8 0%, #1962f4 100%);
  color: #fff;
  &:hover {
    color: #5571f1ff !important;
  }
`

const FooterTag = styled.div`
  font-size: 12px;
  color: var(--color-text-2);
  padding: 0;
  border-radius: 0;
`

const ResultHeader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
`

const ResultTitle = styled.div`
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
`

const ResultFooter = styled.div`
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 8px;
`

const ResultFooterLeft = styled.div`
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
`

const ResultFooterText = styled.span`
  color: var(--color-text-2);
`

// 顶部模式切换容器
const TopModeToggle = styled.div`
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px 0;
`

// 文章润色相关样式
const ArticleContent = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
`

const ArticleHeader = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
`

const ArticleInputSection = styled.div`
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
`

const ArticleInputLabel = styled.div`
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
`

const ArticleInputFooter = styled.div`
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
`

const UploadSection = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  min-height: 200px;

  .ant-upload-wrapper,
  .ant-upload-drag {
    height: 100%;
  }

  .ant-upload-drag {
    background: #eef4fe;
    border-color: #b7d2fe;
    border-radius: 12px;
    &:hover {
      border-color: var(--color-primary);
    }
  }
`

const UploadIcon = styled.div`
  font-size: 48px;
  color: var(--color-primary);
  margin-bottom: 16px;
`

const UploadText = styled.div`
  font-size: 16px;
  color: var(--color-text);
  margin-bottom: 8px;
`

const UploadHint = styled.div`
  font-size: 13px;
  color: var(--color-text-2);
`

const UploadedFileName = styled.div`
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-primary);
  padding: 6px 12px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 6px;
  display: inline-block;
`

const ModalLoadingWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  color: var(--color-text-2);
`

const ModalContentWrapper = styled.div`
  word-break: break-word;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
`

const StreamingIndicator = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 12px;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-primary);
`

// 全屏弹窗双栏布局样式
const ModalSplitContainer = styled.div`
  display: flex;
  height: 100%;
  gap: 0;
`

const ModalLeftPanel = styled.div`
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
`

const ModalRightPanel = styled.div`
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
`

const Resizer = styled.div`
  width: 5px;
  background: var(--color-border);
  cursor: col-resize;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;

  &:hover {
    background: var(--color-primary);
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -2px;
    right: -2px;
    bottom: 0;
    /* 扩大可点击区域 */
  }
`

const ModalPanelHeader = styled.div`
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-background-soft);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
`

const ModalPanelContent = styled.div`
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-height: 0;
`

const OriginalContentWrapper = styled.div`
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
`

// 思考链相关样式
const ThinkingCollapseContainer = styled(Collapse)`
  margin-bottom: 10px;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(146, 84, 222, 0.3);
  border-radius: 8px;

  .ant-collapse-header {
    padding: 8px 12px !important;
    background: rgba(146, 84, 222, 0.08);
    border-radius: 8px !important;
  }

  .ant-collapse-content {
    background: rgba(146, 84, 222, 0.04);
    border-top: 1px solid rgba(146, 84, 222, 0.2);
  }

  .ant-collapse-content-box {
    padding: 12px !important;
  }

  .ant-collapse-item {
    border: none;
  }
`

const ThinkingLabel = styled.div`
  display: flex;
  align-items: center;
  gap: 12px;
`

const ThinkingText = styled.span`
  font-size: 13px;
  color: #9254de;
  font-weight: 500;
`

const ThinkingContent = styled.div`
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
`

// Markdown内容样式
const MarkdownContent = styled.div`
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-1);

  p {
    margin: 0 0 12px 0;
    &:last-child {
      margin-bottom: 0;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 16px 0 8px 0;
    font-weight: 600;
    line-height: 1.4;
    &:first-child {
      margin-top: 0;
    }
  }

  h1 {
    font-size: 1.5em;
  }
  h2 {
    font-size: 1.3em;
  }
  h3 {
    font-size: 1.1em;
  }

  ul,
  ol {
    margin: 8px 0;
    padding-left: 24px;
  }

  li {
    margin: 4px 0;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
  }

  th,
  td {
    border: 1px solid var(--color-border);
    padding: 8px 12px;
    text-align: left;
  }

  th {
    background: var(--color-background-soft);
    font-weight: 600;
  }

  code {
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  }

  pre {
    background: rgba(0, 0, 0, 0.06);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 12px 0;

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

  blockquote {
    margin: 12px 0;
    padding: 8px 16px;
    border-left: 4px solid var(--color-primary);
    background: rgba(59, 130, 246, 0.06);
    color: var(--color-text-2);
  }

  strong {
    font-weight: 600;
  }

  a {
    color: var(--color-primary);
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }

  hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 16px 0;
  }
`

export default PaperPolishChat
相关推荐
诗意地回家2 小时前
淘宝小游戏反编译
开发语言·前端·javascript
爱迪斯通2 小时前
MANUS：用于视觉、语言、行动模型创建的高保真第一人称数据采集设备
前端
bjzhang752 小时前
使用 HTML + JavaScript 实现在线知识挑战
前端·javascript·html
薛定谔的猫22 小时前
Cursor 系列（3）：关于MCP
前端·cursor·mcp
sheji34162 小时前
【开题答辩全过程】以 基于web的拍卖系统设计与实现为例，包含答辩的问题和答案
前端
明月_清风3 小时前
模仿 create-vite / create-vue 风格写一个现代脚手架
前端·后端
aou3 小时前
让表格式录入像 Excel 一样顺滑
前端·ai编程
前端付豪3 小时前
必知 Express和 MVC
前端·node.js·全栈
重铸码农荣光3 小时前
CSS 也能“私有化”？揭秘模块化 CSS 的防坑指南（附 Vue & React 实战）
前端·css·vue.js
热门推荐
01GitHub 镜像站点02网站改了域名，如何查找？03Labelme从安装到标注：零基础完整指南04Linux下V2Ray安装配置指南05AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）07【踩坑笔记】50系显卡适配的 PyTorch 安装082025-04-03 Latex学习1——本地配置Latex + VScode环境09Overleaf编译超时，超出免费计划编译时限（已解决）10Netlify 的深度解析及使用指南