chore: update

Author: Saber2pr

Ant-Design组件/Menu组件样式选择器.md

@@ -0,0 +1,35 @@
+```css
+.ant-menu {
+  // 一级菜单
+  > .ant-menu-item {
+    // 一级菜单hover样式
+    &-active {
+    }
+    // 一级菜单selected样式
+    &.ant-menu-item-selected {
+    }
+  }
+  // 子菜单
+  .ant-menu-submenu {
+    // 子菜单标题
+    &-title {
+    }
+    &-active {
+      // 子菜单标题hover样式
+      .ant-menu-submenu-title {
+      }
+    }
+    .ant-menu-sub {
+      // 二级菜单
+      > .ant-menu-item {
+        // 二级菜单hover样式
+        &-active {
+        }
+        // 二级菜单selected样式
+        &.ant-menu-item-selected {
+        }
+      }
+    }
+  }
+}
+```

Ant-Design组件/Modal遮罩双层滚动问题.md

@@ -0,0 +1,11 @@
+Modal在弹出后，如果其内容需要滚动，会与文档的滚动发生冲突，也称为滚动穿透问题。所以在Modal弹出后，需要将文档顶层的scroll隐藏，Modal关闭时恢复。即：
+
+```js
+// 隐藏顶层scroll
+document.documentElement.style.overflow = 'hidden'
+// 恢复顶层scroll
+document.documentElement.style.overflow = 'auto'
+```
+> 或者body.style.overflow = 'hidden'
+
+Antd Modal默认会做以上事情。

Ant-Design组件/TableTransfer.md

@@ -0,0 +1,73 @@
+```tsx
+import { Table, Transfer, TransferProps } from 'antd';
+import { ColumnsType } from 'antd/lib/table';
+import { TableRowSelection, TablePaginationConfig } from 'antd/lib/table/interface';
+import difference from 'lodash/difference';
+import React from 'react';
+
+interface TableTransferProps<T> extends TransferProps<T> {
+  leftColumns: ColumnsType<T>;
+  leftPagination?: TablePaginationConfig;
+
+  rightColumns: ColumnsType<T>;
+  rightPagination?: TablePaginationConfig;
+}
+
+export function TableTransfer<T>({
+  leftColumns,
+  rightColumns,
+  leftPagination,
+  rightPagination,
+  ...restProps
+}: TableTransferProps<T>) {
+  return (
+    <Transfer {...restProps}>
+      {({
+        direction,
+        filteredItems,
+        onItemSelectAll,
+        onItemSelect,
+        selectedKeys: listSelectedKeys,
+        disabled: listDisabled,
+      }) => {
+        const columns = direction === 'left' ? leftColumns : rightColumns;
+        const pagination = direction === 'left' ? leftPagination : rightPagination;
+
+        const rowSelection: TableRowSelection<any> = {
+          getCheckboxProps: (item) => ({ disabled: listDisabled || item.disabled }),
+          onSelectAll(selected, selectedRows) {
+            const treeSelectedKeys = selectedRows
+              .filter((item) => !item.disabled)
+              .map(({ key }) => key);
+            const diffKeys = selected
+              ? difference(treeSelectedKeys, listSelectedKeys)
+              : difference(listSelectedKeys, treeSelectedKeys);
+            onItemSelectAll(diffKeys, selected);
+          },
+          onSelect({ key }, selected) {
+            onItemSelect(key, selected);
+          },
+          selectedRowKeys: listSelectedKeys,
+        };
+
+        return (
+          <Table
+            rowSelection={rowSelection}
+            columns={columns}
+            dataSource={filteredItems}
+            pagination={pagination}
+            size="small"
+            style={{ pointerEvents: listDisabled ? 'none' : null }}
+            onRow={({ key, disabled: itemDisabled }) => ({
+              onClick: () => {
+                if (itemDisabled || listDisabled) return;
+                onItemSelect(key, !listSelectedKeys.includes(key));
+              },
+            })}
+          />
+        );
+      }}
+    </Transfer>
+  );
+}
+```

Ant-Design组件/antd中的一些坑的细节(持续更新).md

@@ -0,0 +1,25 @@
+1. DatePicker 有两个属性控制其“外貌”，一个是 picker，一个是 mode。如果想动态改变 DatePicker 类型需要同时改变 picker 和 mode。
+
+2. Popover、Select、AutoComplete 等有弹出层的组件，弹出层 Portal 默认是挂到 body 下的，所以写 css 嵌套的时候匹配不到，而且在上层 Layout 容器为 fixed 定位时，滚动时弹出层会脱离弹出时的锚点。为了解决这些问题，它们都有一个 getPopupContainer 方法用来指定挂到那个 dom 节点下(配合 useRef)。一般都会用到的。
+
+3. Table 组件的 dataSource 是需要 key 的，但不需要手动遍历一遍添加 key 属性，使用 rowKey 即可。
+
+4. Modal 组件 visible 为 false 时默认是不销毁子元素的(可以理解为默认是 keep-alive 的)，如果 Model 内组件中用了定时器(比如 react-use 的 useInterval)，你会发现当 Model 消失时，定时器还在跑，useEffect 没有执行 clean subscription。Modal 提供了一个属性用来控制隐藏时是否销毁组件(建议设置为 true)：destroyOnClose，默认 false。
+
+5. antd 中想要拿到非受控的 Input 组件的 value 只有一个办法，就是使用 Form Field，在外面包一层 Form>Form.Item 组件，然后使用 form.getFieldValue 获取相应字段的值。Input 组件没有 forwardRef。
+
+6. Table 组件的 columns 最后一项的 width 最好不要指定，所有的 column.width 加起来不要正好等于容器宽度，否则在某些浏览器上会出现谜之抖动。
+
+7. Menu 中使用 SubMenu，SubMenu 的 Item 默认有一个内联的 padding-left: 48px;，这个是根据 level 和 inlineIndent 计算而来的，inlineIndent 默认为 24px，SubMenu 下的 Item 的 level（层级）为 2，所以 24\*2=48。这两个属性只有设置在 Menu 组件上才生效！SubMenu 和 Menu.Item 上设置是不起作用的！
+
+8. 如果你的项目大量的去覆盖 antd 的默认样式，一定会遇到严重的 CSS Layout Shift 问题！很大一部分原因是因为 antd 组件有些样式本应该通过 props 设置，而你非要使用 css 去设置，写了很复杂的选择器甚至 important 去提高权重，加上 antd 组件几乎都自带 transition，css 文件请求与 dom 渲染之间存在时差，导致页面渲染过程惨不忍睹！所以能通过 props 去设置的样式一定不要去覆盖 css，如果需要可以将 antd 组件自带的 transition 设为 none！特别是你需要自定义其大小、样式、位置时！
+
+9. 覆盖 antd 样式会导致 cls 问题，如果需要定制 antd 风格样式时，建议使用 less modifyVars，在预处理阶段就设置好样式，相关变量参考:
+
+[github.com/ant-design](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less)
+
+10. Form.Item 下的默认值(defaultValue)是无法通过 setState 改变的！可以用 useEffect 来检测依赖变化同时 form.resetFields。如果是在 Modal 中使用，Modal 需设置 forceRender。
+
+11. Form.Item 可以包装组件，并自动提交表单值。可以被 Form.Item 包装的组件必须在 props 提供 value 和 onChange 即使组件受控，组件 onChange 传入的值会被提交到表单。
+
+12. Upload 组件提交文件上传时，建议让后端开 cors 直接发，不要自己写代理特别是 nodejs 代理，nodejs 在文件中转这里非常非常坑！！

Ant-Design组件/antd按需加载.md

@@ -0,0 +1,29 @@
+按需加载适用于 ssr，因为 ssr 没有打包，是天然的代码分割。如果是 csr 那么需要 webpack 动态 import。
+
+antd 官方提供了 babel-plugin-import 插件用于自动导入样式以及按需加载。
+
+按需加载其实是按需导入，是 webpack 打包原理所决定的，webpack 按照 import 路径来打包，所以只要 import 的路径足够细粒度就等于实现了按需加载。
+
+例如：
+
+1. 如果没有使用 babel-plugin-import 插件想要实现按需加载：
+
+```ts
+// 举例，不代表真实路径
+import { Button } from "antd/lib/button";
+import "antd/lib/button/style.less";
+```
+
+需要把路径写得很细。
+
+2. 如果使用了 babel-plugin-import 插件：
+
+只需要
+
+```ts
+import { Button } from "antd";
+```
+
+一行即可实现自动导入对应样式和代码。
+
+> 原理即是自动补全路径

Ant-Design组件/form中使用checkbox.md

@@ -0,0 +1,22 @@
+checkbox多选组件如果需要在表单中使用，官方推荐是使用Checkbox Group。checkbox不能响应Form.Item的value和onChange，需要手动绑定：
+
+```tsx
+const FormCheckbox = ({
+  children,
+  value,
+  onChange,
+}: {
+  children: ReactNode
+  value?: boolean
+  onChange?: (value: boolean) => void
+}) => {
+  return (
+    <Checkbox
+      checked={value}
+      onChange={event => onChange(event?.target?.checked)}
+    >
+      {children}
+    </Checkbox>
+  )
+}
+```

Ant-Design组件/form表单验证.md

@@ -0,0 +1,117 @@
+示例：
+
+```tsx
+export const UrlPrefix = /^(https|http):\/\//
+
+export const UrlValidator: RuleRender = ({ getFieldValue }) => ({
+  validator(rule, value) {
+    if (!value || UrlPrefix.test(value)) {
+      return Promise.resolve()
+    }
+    return Promise.reject('请输入正确的链接！')
+  },
+})
+
+const App = () => {
+  const [form] = Form.useForm()
+  const onFinish = ({ href }: { href: string }) => {
+    console.log(href)
+  }
+  return (
+    <Form form={form} onFinish={onFinish}>
+      <Form.Item
+        label="链接"
+        name="href"
+        initialValue={'http://saber2pr.top/'}
+        rules={[{ required: true, message: '链接不能为空！' }, UrlValidator]}
+      >
+        <Input autoComplete="off" placeholder="请输入链接" />
+      </Form.Item>
+    </Form>
+  )
+}
+```
+
+复杂一点的，从接口获取数据校验混合正则校验：
+
+组件：
+
+```tsx
+
+export interface InputCodeProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  onBlur?: VoidFunction; // 注意这里的onBlur
+}
+
+export const InputCode: React.FC<InputCodeProps> = ({
+  value,
+  onChange,
+  onBlur,
+}) => {
+  return (
+    <Space>
+      <Input
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={onBlur} // 注意这里的onBlur
+      />
+     <span>...</span>
+    </Space>
+  );
+};
+```
+
+form表单:
+
+```tsx
+ <Form.Item
+  name="code"
+  validateTrigger={['onBlur', 'onChange']} // 注意这里的onBlur
+  rules={[
+    { required: true },
+    CodeValidator, CodeDedupValidator(query?.libraryCode)
+  ]}
+>
+  <InputCode/>
+</Form.Item>
+```
+
+验证器：
+
+```tsx
+export const CodeValidator: RuleRender = (form) => ({
+  validateTrigger: 'onChange', // 这里
+  async validator(rule, value) {
+    if (!value) {
+      return Promise.resolve();
+    }
+    if (!/[a-zA-Z0-9_]+$/.test(value)) {
+      return Promise.reject('组件标识只能包含字母数字');
+    }
+    return Promise.resolve();
+  },
+});
+
+export const CodeDedupValidator: (libraryCode: string) => RuleRender = (libraryCode: string) => (
+  form,
+) => ({
+  validateTrigger: 'onBlur', // 注意这里onBlur
+  async validator(rule, value) {
+    // 请求接口
+    const list = await queryBaseComponentList({
+      componentCode: value,
+      libraryCode,
+    });
+
+    // 根据接口返回做校验
+    const hasComp = getArray(list?.dataList)[0]?.code === value;
+    if (hasComp) {
+      return Promise.reject(`组件标识${value}已存在`);
+    }
+
+    return Promise.resolve();
+  },
+});
+
+```

Ant-Design组件/input样式重置.md

@@ -0,0 +1,9 @@
+antd 中的 Input 组件其实已经重置过样式了，但是还有一个地方需要重置一下。就是 chrome 默认会当 input 中填充值后让背景变色。
+
+重置方法：
+
+```css
+input {
+  box-shadow: inset 0 0 0 1000px #fff !important;
+}
+```

Ant-Design组件/table前端分页与后端分页.md

@@ -0,0 +1,26 @@
+antd 中的 Table 组件自带了分页器：
+
+```tsx
+<Table dataSource={dataSource} columns={columns} />
+```
+
+如果表格数据太多，Table 组件 pagination 分页器会自动按 10 行/页进行自动分页。
+
+但是通常情况下分页由后端实现，一次获取大量数据会给数据库带来压力。这种情况下就需要前端自定义/虚拟分页，先设置好分页总数，换页的时候调用后端接口重新装填 dataSource 并改变分页器当前页码。
+
+Table 组件提供了 pagination 属性用于控制分页器，将其转换为受控组件：
+
+```tsx
+<Table
+  dataSource={dataSource}
+  columns={columns}
+  pagination={{
+    pageSize: size,
+    total: totalElements,
+    current: pageIdx,
+    onChange: changePage
+  }}
+/>
+```
+
+后端分页查询需返回当前页数据(Array)和全部页数据总数(Number)。前端使用 total/pageSize 即可进行虚拟分页数设置。

Ant-Design组件/右键菜单.md

@@ -0,0 +1,13 @@
+item组件右键点击弹出菜单
+
+```tsx
+const menu = <Menu>
+  <Menu.Item onClick={() => onCollapseAll(node)}>
+    {i18n.format('collapseAll')}
+  </Menu.Item>
+</Menu>
+
+<Dropdown trigger={['contextMenu']} overlay={menu}>
+  <Item />
+</Dropdown>
+```