前言

大家好，我是0籽。
對于我這個菜雞程序媛來說，這功能我得研究一天才能完成。查文檔，看別人的屎山代碼...

一開始，產品人員給我提這個優化需求時，我是拒絕的。
我：“這個功能比較復雜，一時半會寫不出來。”
產品人員：“你研究哈嘛”

然后...然后...1個小時就搞完了，驗收完畢。
不得不感慨，我沒那么討厭寫代碼啦！因為有了??ChatGPT??。

01. 最終效果呈現

1.png

2.png

02. 實現步驟

• 準備AI提示詞
• 發給ChatGPT
• 把ChatGPT回復的代碼，粘貼到編輯器運行看效果
• 如果有沒實現的細節，再補充提示詞修正代碼

03. AI提示詞

幫我寫段 React class 組件和 CSS 樣式代碼。要求：左邊菜單欄有3個菜單；當鼠標經過菜單欄右側線左右1厘米時，右側線出現可拖動樣式；并且按住鼠標拖動時，菜單欄寬度可拖動放大縮小。

04. ChatGPT回應

3.png

4.png

05. 源代碼

import React from 'react';
import './ResizableMenu.css';

class ResizableMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isHovered: false,
      isDragging: false,
      startX: 0,
      startWidth: 0,
    };
  }

  handleMouseEnter = () => {
    this.setState({ isHovered: true });
  };

  handleMouseLeave = () => {
    this.setState({ isHovered: false });
  };

  handleMouseDown = (e) => {
    this.setState({
      isDragging: true,
      startX: e.clientX,
      startWidth: this.refs.menu.offsetWidth,
    });

    document.addEventListener('mousemove', this.handleMouseMove);
    document.addEventListener('mouseup', this.handleMouseUp);
  };

  handleMouseMove = (e) => {
    if (this.state.isDragging) {
      const newWidth = this.state.startWidth + e.clientX - this.state.startX;
      this.refs.menu.style.width = `${newWidth}px`;
    }
  };

  handleMouseUp = () => {
    this.setState({ isDragging: false });
    document.removeEventListener('mousemove', this.handleMouseMove);
    document.removeEventListener('mouseup', this.handleMouseUp);
  };

  render() {
    return (
      <div className="resizable-menu">
        <div
          className="menu"
          ref="menu"
          onMouseEnter={this.handleMouseEnter}
          onMouseLeave={this.handleMouseLeave}
        >
          <div className="menu-item">菜單項1</div>
          <div className="menu-item">菜單項2</div>
          <div className="menu-item">菜單項3</div>
        </div>
        <div
          className={`separator ${this.state.isHovered ? 'draggable' : ''}`}
          onMouseDown={this.handleMouseDown}
        ></div>
      </div>
    );
  }
}

export default ResizableMenu;

.resizable-menu {
  display: flex;
  height: 100%;
}

.menu {
  flex: 0 0 auto;
  width: 200px;
  background-color: #f0f0f0;
  padding: 10px;
  transition: width 0.3s;
  overflow: hidden;
}

.menu-item {
  padding: 5px 0;
  cursor: pointer;
}

.separator {
  flex: 0 0 2px;
  background-color: #ccc;
  cursor: ew-resize;
}

.separator.draggable {
  background-color: #333;
}

最后

僅供參考，希望能幫到你們。