const reference = {
  top: xx, // 按鈕距離瀏覽器頂部的距離
  left: xx， // 按鈕距離瀏覽器左邊的距離
  width: xx， // 按鈕的寬：沒有padding
  height：xx，// 按鈕的高：沒有padding
  ...等等其他屬性
}

{
    position: 'absolute',
    top: reference.top + window.pageYOffset // 豎直方向滾動距離 + reference.height
    left: reference.left + window.pageXOffset // 橫向滾動距離 
}

computePosition(要掛載的dom節點，下拉框組件，參數...)

import {computePosition, offset} from '@floating-ui/dom';
// referenceEl： 要掛載的dom節點
// floatingEl：下拉框組件（或者說想要掛載到上面referenceEl的dom元素）
computePosition(referenceEl, floatingEl, {
  middleware: [offset(10)],
});

import {computePosition, flip} from '@floating-ui/dom';
computePosition(referenceEl, floatingEl, {
  middleware: [flip()],
});

let {x, y} = 求出紅色框里的下拉框絕對定位的x坐標和y坐標
// 記錄原始placement
  let statefulPlacement = placement;
  // 所有中間件導出的值都掛載到下面的對象上
  let middlewareData: MiddlewareData = {};
  // 數據經過middleware的處理
  // middleware是一個數組，存放所有中間件，就是我們上面說的處理每一個復雜度的對象
  for (let i = 0; i < middleware.length; i++) {
   // name是中間件的名字，fn是處理復雜度的邏輯
    const {name, fn} = middleware[i];
   // 通過把最前面計算的x，y經過fn的處理，得到了新的x,y的值
   // data是指返回的數據，想讓后面的中間件也能訪問到的數據
    /**
     * 每個middleware需要返回
     * x 新的x坐標
     * y 新的y坐標
     * data 
     * reset
     */
    const {
      x: nextX,
      y: nextY,
      data,
      reset,
    } = await fn({
      /**
       * 每個middleware收到的參數
       * x 目前的x坐標
       * y 目前的y坐標
       * initialPlacement 最初傳入的placement
       * placement 
       * middlewareData middleware返回的額外數據
       */
      x,
      y,
      initialPlacement: placement,
      placement: statefulPlacement,
      strategy,
      middlewareData,
      rects,
      platform,
      elements: {reference, floating},
    });
    x = nextX ?? x;
    y = nextY ?? y;
    // 每次處理后的數據想要讓后面的中間件訪問，就需要掛載到middlewareData對象
    // 這個對象非常好啊，用name隔離了作用域
    middlewareData = {
      ...middlewareData,
      [name]: {
        ...middlewareData[name],
        ...data,
      },
    };
   rest的處理邏輯。。。省略，不是很重要

export const offset = (value: Options = 0): Middleware => ({
  name: 'offset', // 中間件名字
  options: value,  // 傳給中間件的值
  async fn(middlewareArguments) { // 中間件處理函數
    const {x, y} = middlewareArguments;
    const diffCoords = await convertValueToCoords(middlewareArguments, value);
    return {
      x: x + diffCoords.x,
      y: y + diffCoords.y,
      data: diffCoords,
    };
  },
});