unita-techui-snippets

基于 unita + techui 常用的代码模板，可以快速生成页面，组件，路由等模块代码。

模板格式

{
  "unita-xxx": {
    "scope": "javascript,typescript,typescriptreact",
    "prefix": "unita-xxx",
    "body": ["console.log('模板代码')"],
    "description": ""
  }
}

现有模板

unita-page

import { PageContainer } from '@alipay/tech-ui';
// import './style.less';

export default () => {
  return (
    <PageContainer
      ghost
      header={{
        title: '标题',
      }}
    >
      {null}
    </PageContainer>
  );
};

unita-table

import { Button, Typography } from '@ali/unita/antd';
import { PlusOutlined } from '@ali/unita/icons';
import type { ProColumns } from '@alipay/tech-ui';
import { PageContainer, ProTable } from '@alipay/tech-ui';

const { Link } = Typography;

type TableListItem = Partial<{}>;

export default () => {
  const columns: ProColumns<TableListItem>[] = [
    {
      title: '名称',
      width: 180,
      ellipsis: true,
      dataIndex: 'name',
      formItemProps: {
        name: 'searchParam',
      },
      fieldProps: {
        placeholder: '请输入名称',
      },
    },
    {
      title: '操作',
      fixed: 'right',
      width: 180,
      key: 'option',
      valueType: 'option',
      render: (_text, record, _, action) => {
        return [
          <Link key="edit" onClick={() => {}}>
            编辑
          </Link>,
          <Link key="status" onClick={() => {}}>
            启用
          </Link>,
        ];
      },
    },
  ];

  return (
    <PageContainer
      ghost
      header={{
        title: '标题',
      }}
    >
      <ProTable<TableListItem>
        size="large"
        scroll={{ x: 'scroll' }}
        columns={columns}
        request={async (params) => {
          return {
            success: true,
          };
        }}
        options={false}
        rowKey="id"
        pagination={{
          defaultPageSize: 10,
          showQuickJumper: true,
        }}
        search={{
          defaultCollapsed: false,
        }}
        toolBarRender={(action) => [
          <Button type="primary" icon={<PlusOutlined />} onClick={() => {}}>
            添加
          </Button>,
        ]}
      />
    </PageContainer>
  );
};

unita-modal-form

import { Button, Form, Input } from '@ali/unita/antd';
import { PlusOutlined } from '@ali/unita/icons';
import { ModalForm, ProFormText } from '@alipay/tech-ui';

const FormItem = Form.Item;

interface Props {
  param: string;
}

const layoutConfig = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

export default (props: Props) => {
  return (
    <ModalForm
      width={800}
      layout="horizontal"
      {...layoutConfig}
      modalProps={{
        maskClosable: false,
        destroyOnClose: true,
      }}
      title="标题"
      trigger={
        <Button type="primary" icon={<PlusOutlined />}>
          添加
        </Button>
      }
      onFinish={async (values) => {
        return true;
      }}
    >
      <FormItem
        label="名称"
        name="name"
        rules={[{ required: true, message: '必填项' }]}
      >
        <Input />
      </FormItem>
      <ProFormText
        label="年龄"
        name="age"
        rules={[{ required: true, message: '必填项' }]}
      />
    </ModalForm>
  );
};

unita-drawer-form

import { Button, Form, Input } from '@ali/unita/antd';
import { PlusOutlined } from '@ali/unita/icons';
import { DrawerForm, ProFormText } from '@alipay/tech-ui';

const FormItem = Form.Item;

interface Props {
  param: string;
}

const layoutConfig = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

export default (props: Props) => {
  return (
    <DrawerForm
      width={800}
      layout="horizontal"
      {...layoutConfig}
      drawerProps={{
        maskClosable: false,
        destroyOnClose: true,
      }}
      title="标题"
      trigger={
        <Button type="primary" icon={<PlusOutlined />}>
          添加
        </Button>
      }
      onFinish={async (values) => {
        return true;
      }}
    >
      <FormItem
        label="名称"
        name="name"
        rules={[{ required: true, message: '必填项' }]}
      >
        <Input />
      </FormItem>
      <ProFormText
        label="年龄"
        name="age"
        rules={[{ required: true, message: '必填项' }]}
      />
    </DrawerForm>
  );
};

unita-proform-text

<ProFormText
  label="${1:名称}"
  name="${2:name}"
  fieldProps={{
    maxLength: 50,
  }}
  rules={[{ required: true, message: '请输入${1:名称}' }]}
  initialValue={null}
/>

unita-proform-textarea

<ProFormTextArea
  label="${1:名称}"
  name="${2:name}"
  fieldProps={{
    maxLength: 300,
    showCount: true,
  }}
  rules={[{ required: true, message: '请输入${1:名称}' }]}
  initialValue={null}
/>

unita-proform-select

<ProFormSelect
  label="${1:名称}"
  name="${2:name}"
  // mode="multiple"
  rules={[{ required: true, message: '请选择${1:名称}' }]}
  initialValue={null}
  valueEnum={{}}
  request={async () => {
    return [];
  }}
/>

unita-proform-digit

<ProFormDigit
  label="${1:名称}"
  name="${2:name}"
  initialValue={null}
  rules={[{ required: true, message: '请输入${1:名称}' }]}
  fieldProps={{ precision: 1 }}
  min={1}
  max={10}
/>

unita-proform-date

<ProFormDatePicker
  label="${1:名称}"
  name="${2:name}"
  rules={[{ required: true, message: '请选择${1:名称}' }]}
  initialValue={null}
  fieldProps={
    {
      // disabledDate: (date) => {
      //   return date.isBefore(Date.now(), 'day');
      // },
    }
  }
/>

unita-proform-daterange

<ProFormDateRangePicker
  label="${1:名称}"
  name="${2:name}"
  placeholder={['开始日期', '结束日期']}
  initialValue={[,]}
  rules={[{ required: true, message: '请选择${1:名称}' }]}
  fieldProps={{
    style: { width: '100%' },
    // disabledDate: (date) => {
    //   return date.isBefore(Date.now(), 'day');
    // },
  }}
/>

unita-proform-datetime

<ProFormDateTimePicker
  label="${1:名称}"
  name="${2:name}"
  rules={[{ required: true, message: '请选择${1:名称}' }]}
  initialValue={null}
  fieldProps={
    {
      // disabledDate: (date) => {
      //   return date.isBefore(Date.now(), 'day');
      // },
    }
  }
/>

unita-proform-datetimerange

<ProFormDateTimeRangePicker
  label="${1:名称}"
  name="${2:name}"
  placeholder={['开始时间', '结束时间']}
  initialValue={[,]}
  rules={[{ required: true, message: '请选择${1:名称}' }]}
  fieldProps={{
    style: { width: '100%' },
    // disabledDate: (date) => {
    //   return date.isBefore(Date.now(), 'day');
    // },
  }}
/>

unita-router

{
  name: "${1:name}",
  path: "${2:path}",
  component: "Component",
  layout: {
    hideMenu: true,
    hideNav: true,
    hideFooter: true,
  },
}

unita-service

export async function apiServiceName(params: {
  current?: number;
  pageSize?: number;
}) {
  return request<API.Result>('/api/path/name', {
    method: 'GET',
    params,
  });
}