注意

1. prod 相比于 dev 少了 data-component-id={id}/ref={drop}
2. 要写组件开发规范
3. 了解所有 props 的参数：一定有 key/id/name/styles/author/children
4. page/Container 需要添加基础配置

组件开发

dev.tsx

import { CommonComponentProps } from '@/materials/interface'
import { memo } from 'react'
import styleLess from './index.module.less'

export default memo((props: CommonComponentProps) => {
  const { id, styles, ...otherProps } = props

  return (
    <div
      {...otherProps}
      className={styleLess['whale-input']}
      style={styles}
      data-component-id={id}
    >
      dev
    </div>
  )
})

prod.tsx

import { CommonComponentProps } from '@/materials/interface'
import { memo } from 'react'
import styleLess from './index.module.less'

export default memo((props: CommonComponentProps) => {
  const { styles, ...otherProps } = props

  return (
    <div {...otherProps} className={styleLess['whale-input']} style={styles}>
      prod
    </div>
  )
})

index.module.less

.whale-input {
}

config.ts

• 在需要设置忽略值的时候推荐这样：

import { ComponentConfig } from '@/materials/interface'
import dev from './dev'
import prod from './prod'

const defaultProps = {
  allowClear: false,
  showCount: false,
  disabled: false,
  status: 'default',
  size: 'middle',
  inputMode: 'Input',
  autoSize: false,
}

// 需要忽略的属性
const ignoredProps = {
  autoSize: [
    'inputMode === Input',
    'inputMode === Input.Search',
    'inputMode === Input.Password',
    'inputMode === Input.OTP',
  ],
}

export const InputConfig: ComponentConfig = {
  firstTitle: '基础组件',
  secondaryTitle: '数据录入',
  name: 'Input',
  defaultProps: defaultProps,
  ignoredProps: ignoredProps,
  desc: '输入框',
  component: {
    dev: dev,
    prod: prod,
  },
  setter: [
    {
      title: '输入框模式',
      propsList: [
        {
          name: 'inputMode',
          label: '输入框模式',
          type: 'select',
          options: [
            { label: '文本框', value: 'Input' },
            { label: '文本域', value: 'Input.TextArea' },
            { label: '搜索框', value: 'Input.Search' },
            { label: '密码框', value: 'Input.Password' },
            { label: '一次性密码框', value: 'Input.OTP' },
          ],
        },
      ],
    },
    {
      title: '输入框属性',
      propsList: [
        {
          name: 'autoSize',
          label: '自适应高度',
          type: 'switch',
          ignoreConfig: ignoredProps['autoSize'],
        },
      ],
    },
  ],
  events: [],
}

发布与使用说明

发布到NPM

# 登录到npm
npm login

# 发布包
npm publish

安装与使用

# 安装
npm install whaledev-materials

# 或使用yarn
yarn add whaledev-materials

在项目中使用

import { Button } from 'whaledev-materials';

function App() {
  return (
    <div>
      <Button id="btn1" name="测试按钮" />
    </div>
  );
}

故障排除

如果你在使用此库时遇到以下错误：

[plugin:vite:import-analysis] Failed to resolve entry for package "whaledev-materials". The package may have incorrect main/module/exports specified in its package.json.

请确保你使用的是最新版本的包（v0.0.9或更高）。老版本可能存在入口文件配置问题，我们已在最新版本中修复。

引入组件的正确方式

// 引入单个组件
import { Button } from 'whaledev-materials';

// 引入多个组件
import { Button, Container, Input } from 'whaledev-materials';

// 引入所有配置
import config from 'whaledev-materials';

开发环境下的使用

如果你在开发环境下使用此库，可以使用以下命令启动项目：

# 使用vite
vite --force # 强制清除缓存

# 使用webpack
npm start -- --no-cache # 清除缓存