aristotle

背景

项目中的页面(主要是后台系统)功能大多类似，每次新增的时候，会写很多相似的代码。所以利用一个可配置的模板来生成文件代码是一个可以提高效率的方式。在网上找了下现有的vscode插件，发现都比较轻量(如Simple React Snippets)，所以就自己写了一个偏定制化的配置。

Snippets

index.tsx

在文件中输入 index.tsx即可生成以下内容

import { useRef, useState } from 'react';
import ListContent from '@kant/list-content';
import { TableQueryActions } from '@kant/hooks/lib/useTableQuery';
import api from '@/services';
import { searchFields, tableFields } from './fields';

enum AUTH_CODE {
  XX = 'xx',
}
const Page: AuthComponent = () => {
  const listContentRef = useRef<TableQueryActions>(null);
  const [tableDataProps, setTableDataProps] = useState({
    data: [],
    total: 0,
  });

  const fetchData = async (params) => {
    const { records: data, total } = await api.getDidPages({
      ...params,
      sort: ['modifyTime__DESC'],
    });
    setTableDataProps({ data, total });
  };

  const listContentProps = {
    formProps: {
      fields: searchFields,
    },
    tableProps: {
      fields: tableFields,
      rowKey: 'id',
      nextFields: [
        {
          key: 'action',
          props: (_, record) => {
            return {
              options: [
                {
                  name: 'xx',
                  onClick() {},
                  code: AUTH_CODE.xx,
                },
              ],
            };
          },
        },
      ],
      ...tableDataProps,
    },
    fetchData,
    ref: listContentRef,
  };

  return (
    <>
      <ListContent {...listContentProps} />
    </>
  );
};

Page.authConfig = {
  name: 'xx',
  actions: [{ name: 'xx', code: AUTH_CODE.xx }],
};

export default Page;

field.tsx

在文件中输入 field.tsx即可生成以下内容

export const searchFields = [
  {
    name: 'campaignID',
    key: 'campaignId',
  },
];
export const tableFields = [
  {
    name: 'campaignID',
    key: 'campaignId',
    width: 200,
  },
  {
    name: '操作',
    key: 'action',
    type: 'action',
    width: 120,
    fixed: 'right' as FixedPosition,
  },
];