@twigwhyse/react-layout

可复用的 React 布局组件库，用一致的 DOM 结构与类名约定，减少列表行、聊天区等常见界面在「空间不足 / 滚动跟随」上的重复实现。

安装

npm install @twigwhyse/react-layout

本包将 react 与 react-dom 作为 peerDependencies（建议 React 18+），请在应用中自行安装对应版本。

包含的组件

| 组件 | 解决什么问题 | | --- | --- | | FlexText | 单行（或可配置换行）的「前缀 + 主文案 + 装饰 + 后缀」横向布局：中间区可压缩，两侧固定；长文案支持省略、裁切或换行等展示方式，避免图标、操作按钮被挤出视区。 | | StickToBottomScroll | 固定高度可滚动区域在「聊天、日志、实时输出」等场景下，默认贴在底部；用户上滑阅读历史时不再打断；回到底部后再次跟随新内容；内容高度或容器高度变化时仍可按状态贴底。 |

更细的 API、类名约定与行为说明见 文档目录 docs/。

使用示例

import { FlexText, StickToBottomScroll } from '@twigwhyse/react-layout';

function Row() {
  return (
    <FlexText
      prefix="标签"
      text="中间主文案过长时中间省略"
      suffix="操作"
      textOverflow="ellipsis"
    />
  );
}

function LogPanel({ lines }: { lines: string[] }) {
  return (
    <StickToBottomScroll style={{ height: 200, overflowY: 'auto' }}>
      {lines.map((line) => (
        <div key={line}>{line}</div>
      ))}
    </StickToBottomScroll>
  );
}

（StickToBottomScroll 已设置纵向滚动相关样式；若外层另有布局约束，可按需叠加 style/className。）

本地开发与 Storybook

组件开发与交互用例在 Storybook 中维护：

npm run storybook

构建静态文档站点：

npm run build-storybook

许可证

MIT