0

cnpm start 后是这样子

image.png

没错，就是官网的样子，url路径即是文件夹路径，我之前都是复制页面上特殊的文字去找文件...

网页中的信息来自这个md文档，github显示的也是它

import { Helmet } from 'react-helmet-async';
import { FormattedMessage, injectIntl } from 'react-intl'; //多语言
import classNames from 'classnames';//处理类名

site\theme\template\Content\ComponentDoc.jsx，这个文件用来组织文档内容在网页上的呈现方式

这段代码是改变<title>、<meta>标签的，为了SEO

这段代码生成右侧目录

1

上面这部分以及方向性图标、提示建议性图标 等对应md中的

image.png

fields.ts

以数组形式承载 图标名称

 arr.indexOf(n) === i

数组去重

注意 下面的代码

export type Categories = typeof categories;
export type CategoriesKeys = keyof Categories;

Category.tsx

绘制方向性图标 、提示建议性图标 等

难怪我搜索不到

    'app.docs.components.icon.category.suggestion': '提示建议性图标',

justCopied 是用来控制样式的

这段代码 服务于 复制图标的效果

在 CopyableIcon.tsx 中

import CopyToClipboard from 'react-copy-to-clipboard';

注意React.createElement(allIcons[name])

import * as AntdIcons from '@ant-design/icons';
const allIcons: {
  [key: string]: any;
} = AntdIcons;

直接 {allIcons[name]} 是不行的
这个组件用了Hooks

const CopyableIcon: React.FC<CopyableIconProps> = ({

而React.FC的定义文件是

    type FC<P = {}> = FunctionComponent<P>;

    interface FunctionComponent<P = {}> {
        (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P>;
        contextTypes?: ValidationMap<any>;
        defaultProps?: Partial<P>;
        displayName?: string;
    }

我看了半天，才想到可以

CopyableIcon.defaultProps

index.tsx 中将上面的资源整合在一起

autoFocus={true} 导致点击"展开全部代码"滚动条会回到顶部

我在github上提了一个issue，因为这个问题足够清晰，感兴趣的小伙伴可以关注下大佬们如何解决问题，方便以后参与到开源社区的维护，Icon 图表-代码演示-点击"展开全部代码"滚动条会回到顶部

3

IconPicSearcher.tsx 就是那个搜索框
当您使用截图搜索时，会动态加载一个脚本

 loadModel = () => {
    const script = document.createElement('script');
    script.onload = async () => {
      await window.antdIconClassifier.load();
      this.setState({ modelLoaded: true });
      document.addEventListener('paste', this.onPaste);
    };
    script.src = 'https://cdn.jsdelivr.net/gh/lewis617/antd-icon-classifier@0.0/dist/main.js';
    document.head.appendChild(script);
  };

还可以看到customRequest 的用法示例

  uploadFile = (file: File) => {
    this.setState(() => ({ loading: true }));
    const reader: FileReader = new FileReader();
    reader.onload = () => {
      this.toImage(reader.result).then(this.predict);
      this.setState(() => ({
        fileList: [{ uid: 1, name: file.name, status: 'done', url: reader.result }],
      }));
    };
    reader.readAsDataURL(file);
  };

用Promise 避免传递回调函数 让实现更优雅，同时也是异步获取图片的示例代码

  toImage = (url: any) => {
    return new Promise(resolve => {
      const img = new Image();
      img.setAttribute('crossOrigin', 'anonymous');
      img.src = url;
      img.onload = function onload() {
        resolve(img);
      };
    });
  };

处理黏贴行为的示例代码

  onPaste = (event: ClipboardEvent) => {
    const items = event.clipboardData && event.clipboardData.items;
    let file = null;
    if (items && items.length) {
      for (let i = 0; i < items.length; i += 1) {
        if (items[i].type.indexOf('image') !== -1) {
          file = items[i].getAsFile();
          break;
        }
      }
    }
    if (file) this.uploadFile(file);
  };

TS 扩展window

declare global {
  interface Window {
    antdIconClassifier: AntdIconClassifier;
  }
}

如何正确的使用Spin

image.png

4

"代码演示" 部分在ComponentDoc.jsx

对应文件夹

也是通过md方式呈现的
ComponentDoc.jsx 展开折叠代码

API、FAQ这些还是在index.zh-CN.md
表格

逻辑简单的直接写在md 中

完

我一直以为是叫antd ，知道今天才知道是叫ant，难怪之前在覆盖样式的时候第一次都不行...

在windows上跑起来antd遇到了很多困难，强烈建议使用cnpm

**如果包都安装完最后报的错先不理会，直接试一试cnpm run start能不能跑起来
这个过程还会报ess相关的错误，过程十分缓慢，甚至浏览器都提示网站无法连接...，只要脚本没退出就请耐心等待。

这些问题可能是前面一连串原因引起的，但是我根据报错信息提示的去解决，依然没用...