Skip to main content

页面结构

页面固定部分​

ReactGO 的侧边栏和页面工作区顶部的标题栏是全局存在的，如非必要，不要试图去改变或删除它们。

固定区域

每个页面一个 main​

除去页面固定部分后，剩下的工作区域是你的战场，你应该把这块区域标记为 main，一般的写法是：

<Container as='main' role='main' maxWidth='md'>
  ...
</Container>

工作区

每个页面一个标题​

标题贯穿几个地方，包括浏览器的标签页、工作区标题栏中的标题，以及一些暂时没想到的地方， 要正确设置标题，应该使用下面的套路：

import { useSetRecoilState } from "recoil";
import titleState from "~/state/title";

export default function XXX() {
  const setTitle = useSetRecoilState(titleState);

  useEffect(() => { setTitle('这里是标题'); }, [setTitle]);

  return (
    ...
  )
}

父子页面​

业务中有许多针对某个实体进行增删查改的操作，对于这样的情况，ReactGO 的套路是使用表格作为主（父）页面（一个表格列出所有的实体）， 然后表格每条记录后面有一个菜单进入子页面（例如修改页面），这样父子页面关系就确定了， 在设计 url 时也应遵循此套路，可以参考 系统用户管理 页面。

子页面 ESC 快捷键​

对于很多用户，习惯按下 ESC 取消当前的操作，因此在子页面中，我们应该支持这个快捷键， 按下 ESC 时返回到父页面，下面是套路代码。

import { useNavigate } from 'react-router-dom';
import { useHotkeys } from 'react-hotkeys-hook';

export default function XXX() {
  const navigate = useNavigate();

  useHotkeys('esc', () => { navigate('..'); }, { enableOnTags: ["INPUT"] });

  ...
}