如何使用chatgpt提升前端开发效率?

如题，本文将介绍几种我在前端开发过程中用到chatgpt来提高作业功率和减少重复作业的使用场景，因为篇幅约束部分代码仅展现片段以供参阅

1.CSS3动画生成器

Q:帮我生成一段css3动画,一个div,这是他的方位改变[[0,0],[0,100],[200,100],[300,300]],他由粉色变为蓝色,而且旋转30度后消失

A:

.animated-div { width: 100px; height: 100px; background-color: pink; position: absolute; top: 0; left: 0; animation: moveAndRotate 4s ease-in-out; } @keyframes moveAndRotate { 0% { top: 0; left: 0; background-color: pink; transform: rotate(0deg); } 25% { top: 100px; left: 0; background-color: pink; transform: rotate(0deg); } 50% { top: 100px; left: 200px; background-color: blue; transform: rotate(0deg); } 75% { top: 300px; left: 200px; background-color: blue; transform: rotate(30deg); } 100% { top: 300px; left: 200px; background-color: blue; transform: rotate(30deg); opacity: 0; } }

作用:

2.clip-path生成器

Q:请使用css的clip-path属性帮我生成一个五角星

A:

.star {
  width: 100px;
  height: 100px;
  background-color: gold;
  clip-path: polygon(
    50% 0%,
    63% 38%,
    100% 38%,
    69% 59%,
    82% 100%,
    50% 75%,
    18% 100%,
    31% 59%,
    0% 38%,
    37% 38%
  );
}

<div class="star"></div>

作用:

3.简易图表生成器

Q:用js帮我画一个柱线图来展现一周七天的访问量和趋势

A:

<canvas id="chartCanvas" width="600" height="400"></canvas>

const data = [
  { day: 'Monday', visits: 120 },
  { day: 'Tuesday', visits: 200 },
  { day: 'Wednesday', visits: 150 },
  { day: 'Thursday', visits: 300 },
  { day: 'Friday', visits: 180 },
  { day: 'Saturday', visits: 280 },
  { day: 'Sunday', visits: 220 },
];
const canvas = document.getElementById('chartCanvas');
const ctx = canvas.getContext('2d');
// 绘制坐标轴
ctx.beginPath();
ctx.moveTo(50, 350);
ctx.lineTo(550, 350);
ctx.moveTo(50, 50);
ctx.lineTo(50, 350);
ctx.stroke();
// 绘制柱状图
const barWidth = 50;
const barSpacing = 30;
const maxVisits = Math.max(...data.map((item) => item.visits));
data.forEach((item, index) => {
  const x = 50 + index * (barWidth + barSpacing);
  const barHeight = (item.visits / maxVisits) * 250;
  const y = 350 - barHeight;
  ctx.fillStyle = 'rgba(255, 204, 0, 0.7)';
  ctx.fillRect(x, y, barWidth, barHeight);
});
// 绘制折线图
ctx.beginPath();
ctx.moveTo(50, 350 - (data[0].visits / maxVisits) * 250);
data.forEach((item, index) => {
  const x = 50 + index * (barWidth + barSpacing);
  const y = 350 - (item.visits / maxVisits) * 250;
  ctx.lineTo(x + barWidth / 2, y);
});
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.stroke();

作用:

4.突变色生成器

Q:帮我生成一个高雅的青蓝紫css突变款式

A:

.element {
  background: linear-gradient(to bottom right, #22c1c3, #0072ff, #9c36b5);
}

作用:

5.组件props生成器

Q:这是我的ts组件,请帮我生成他的ts参数接口并加以注释

...
 const LoadMore = ...
...

A:

// LoadMore组件的参数接口定义 
interface LoadMoreProps { 
  className?: string; // 组件的自定义类名 
  style?: React.CSSProperties; // 组件的自定义款式 
  distance?: number; // 触发加载更多的距离，默认为100 
  loadMore?: () => void; // 加载更多的回调函数 
  scrollTop?: number | null | undefined; // 滚动条的方位 
}

6.格局转换器

Q:将#4d58dc转换为rgb格局 略

Q:将xxx的url进行decode 略

Q:请将以下数据转换为ts的enum

export const INDICATORLIST = [ { name: '全部企业', }, { name: '新增企业', }, { name: '刊出企业', }, { name: '迁出企业', }, { name: '国家高新', }, { name: '瞪羚企业', }, { name: '雏鹰企业', }, { name: '专精特新小伟人', }, ];

A:

export enum Indicator {
  AllCompanies = '全部企业',
  NewCompanies = '新增企业',
  CancelledCompanies = '刊出企业',
  MovedOutCompanies = '迁出企业',
  NationalHighTechCompanies = '国家高新',
  GazelleCompanies = '瞪羚企业',
  UnicornCompanies = '雏鹰企业',
  SpecializedNewGiantCompanies = '专精特新小伟人',
}

7.echarts配置生成器

Q:帮我生成一份echarts的堆叠柱状折线图config，横坐标为一年12个月,每根柱子代表当月消费金额，由饮食、出行、文娱三部分组成，用折线代表消费趋势

A:

const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
    },
  },
  legend: {
    data: ['饮食', '出行', '文娱', '消费趋势'],
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  },
  yAxis: [
    {
      type: 'value',
      name: '金额',
    },
    {
      type: 'value',
      name: '趋势',
    },
  ],
  series: [
    {
      name: '饮食',
      type: 'bar',
      stack: '总消费',
      data: [100, 120, 80, 90, 150, 130, 110, 100, 120, 140, 160, 180],
    },
    {
      name: '出行',
      type: 'bar',
      stack: '总消费',
      data: [50, 70, 60, 80, 90, 70, 80, 90, 100, 80, 70, 60],
    },
    {
      name: '文娱',
      type: 'bar',
      stack: '总消费',
      data: [80, 60, 70, 50, 40, 70, 60, 50, 60, 50, 40, 30],
    },
    {
      name: '消费趋势',
      type: 'line',
      yAxisIndex: 1,
      data: [230, 250, 210, 220, 280, 270, 250, 240, 280, 270, 260, 260],
    },
  ],
};
export default option;

作用：

8.css类名生成器

Q:这是我的一个描述企业的卡片,帮我补全各个元素的className,使用css module

...
<div > <img src={data?.logo ? data.logo : emptyEnterprise} /> </div> <div > {data?.address || '_'} </div> <Row gutter={[8, 8]}> <Col span={6}> <div > <span > 品牌 </span> <span>{data?.brand || '_'}</span>
...

A:

...
<div className={styles.card}>
  <div className={styles.logo}>
    <img src={data?.logo ? data.logo : emptyEnterprise} />
  </div>
  <div className={styles.address}>
    {data?.address || '_'}
  </div>
  <Row gutter={[8, 8]}>
    <Col span={6}>
      <div className={styles.info}>
        <span className={styles.label}>品牌</span>
        <span>{data?.brand || '_'}</span>
      </div>
    </Col>
  </Row>
</div>
...

9.antd表格生成器

Q: 请使用antd帮我生成一个表格,表头为企业名称、注册资本、参保人数、建立时刻，参保人数支撑表头挑选，挑选项为0-10人、10-100人，100人以上,表格支撑分页，帮我mock20条数据

A:

...
const dataSource = Array.from({ length: 20 }).map((_, index) => ({
  key: index.toString(),
  companyName: `企业名称 ${index + 1}`,
  registeredCapital: Math.floor(Math.random() * 100) + 1,
  insuredPeople: Math.floor(Math.random() * 1000) + 1,
  establishmentDate: `2023-04-${index + 1}`,
}));
// 参保人数的挑选选项
const insuredOptions = [
  { label: '0-10人', value: '0-10' },
  { label: '10-100人', value: '10-100' },
  { label: '100人以上', value: '100+' },
];
const columns = [
  {
    title: '企业名称',
    dataIndex: 'companyName',
    key: 'companyName',
  },
  {
    title: '注册资本',
    dataIndex: 'registeredCapital',
    key: 'registeredCapital',
  },
  {
    title: "参保人数",
    ...
];
const TableExample = () => {
  return <Table dataSource={dataSource} columns={columns} pagination />;
};
export default TableExample;

作用:

10.antd表单生成器

Q:请使用antd帮我生成一个表单，企业名称的输入框，注册资本的select 选项为100万，200万，300万，建立时刻的时刻选择器,提交按钮，企业logo的图片上传,重置按钮

A:

...
const FormExample = () => {
  const onFinish = (values) => {
    console.log('Form values:', values);
  };
  const onReset = () => {
    form.resetFields();
  };
  const normFile = (e) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };
  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
  };
  const [form] = Form.useForm();
  return (
    <Form {...formItemLayout} form={form} onFinish={onFinish}>
      <Form.Item name="companyName" label="企业名称">
        <Input />
      </Form.Item>
     ...
    </Form>
  );
};
...

作用:

11.彩蛋

以上便是本篇文章的全部内容,引证的例子都很简单，主要目的是抛砖引玉，假如你有更好更具功率的使用场景，欢迎在谈论区与大家深化♂沟通