GeoServer在Tauri中无感启动与使用


:::danger{title="吃力不讨好的事情"}
PC端加载至少1G的tif文件到地图中展示  
~~离谱~~  
~~切片都不帮个忙~~  
~~这不难为老实人么~~
:::

![tauri+geoserver](https://github.com/Quietly-20201113/PictureSpace/blob/main/tauri/geoserver-tauri.png?raw=true)



****

#### 甲、环境`Tauri`跨端程序
前端
- [✅] 得升级`@tauri-apps/cli`到`>=2.0.0-beta.0`
- [✅] - `@tauri-apps/api` `>=2.0.0-beta.0`

rust
- [✅] 得升级`tauri-build`到`2.0.0-beta.10`
- [✅] - `tauri` `2.0.0-beta.13`

****

#### 乙、下载最新的`Geoserver`二进制文件

> 一定🏳️  
> 一定🏳️  
> 一定🏳️  
> 下载二进制文件`Platform Independent Binary`

[Geoserver Platform Independent Binary](https://geoserver.org/release/stable/)

****

#### 丙、 下载最低`17`版本的java
> 一定🏳️  
> 一定🏳️  
> 一定🏳️  
> 下载免安装解压即用的

[java_17 zip](https://www.oracle.com/java/technologies/downloads/#java17)

****

#### 丁、 设置`Tauri` 打包文件
> `tauri.conf.json`

```json
 "resources": [
      "./resources/geoserver-main-latest-bin"
 ]
```

文件`geoserver-main-latest-bin`中需要包含下载解压的`java_17`
最终项目结构是
>-`src-tauri/resources/geoserver-main-latest-bin`  
> --bin  
> --data_dir  
> --etc  
> --jdk_17  
> --lib  
> --license  
> --licenses  
> --log  
> --modules  
> --resources  
> --webapps  
> --start.ini  
> --start.jar  
> --VERSION.txt

****

#### 戍、`rust`执行终端命令唤起`geoserver`

##### 1) 使用`std::env::current_dir`判断文件是否存在
```rust
    let binding = env::current_dir().unwrap().join("resources/geoserver-main-latest-bin");
    let flag = is_path_exists(binding.to_str().unwrap());
```
##### 2) 使用`std::process::Command`执行终端命令
```rust
    //CREATE_NO_WINDOW 叮嘱此变量是设置终端命令执行时不创建终端窗口(仅限window)
    let binding = env::current_dir().unwrap().join("resources/geoserver-main-latest-bin");
    let java_path = binding.join(r"jdk_17/bin/java.exe");
    let jar_path = binding.join(r".\start.jar");
    const CREATE_NO_WINDOW: u32 = 0x08000000;
    let  command  = Command::new(java_path)
        .arg("-jar")
        .arg(jar_path)
        .current_dir(binding)
        .creation_flags(CREATE_NO_WINDOW)
        .spawn();
```
##### 3) 使用`std::net::UdpSocket::bind`获取当前设备`IP`
```rust
fn get_local_ip() -> Option<IpAddr> {
    let socket = match std::net::UdpSocket::bind("0.0.0.0:0") {
        Ok(socket) => socket,
        Err(_) => return None,
    };

    match socket.connect("8.8.8.8:80") {
        Ok(()) => (),
        Err(_) => return None,
    }

    socket.local_addr().ok().map(|addr| addr.ip())
}

fn is_port_available(ip: IpAddr, port: u16) -> bool {
    let addr = SocketAddr::new(ip, port);
    TcpStream::connect(addr).is_ok()
}

#[tauri::command]
pub async fn get_localhost_ip() -> Result<CustomResult> {
    if let Some(ip) = get_local_ip() {
        println!("Local IP address: {}", ip);

        let port = 28080;
        if is_port_available(ip, port) {
            return Ok(CustomResult::new(true, 200, "Success", Some(json!({
                "ip": ip,
                "port": port
            }))));
        } else {
            return Err(CustomResult::new(false, 500, &format!("Port {} is not available", port), None));
        }
    } else {
        return Err(CustomResult::new(false, 500, "Failed to get local IP address", None));
    }
}
```
`CustomResult`是我自定义的内容返回格式,请自行处理
****
#### 己、唤起服务
> 不在项目启动时唤起,单独开启子进程会阻塞主进程  
> 在前端初始化时在进行`IPC`通信唤起  
> 设置打开`Geoserver`时单独唤起一个`webview`

```ts
import { invokeGeoServerExist, invokeGeoServerStart, invokeGetLocalhostIp } from "@/ipc-apps/invoke.geoserver";
import { ResultMeta } from "@/types/result";
import { useEffect, useState } from "react";
import { WebviewWindow  } from '@tauri-apps/api/webviewWindow';

export const useGeoServerClient = () => {
    const [isExist, setExist] = useState<boolean>(false);

    const [isStart, setStart] = useState<boolean>(false);

    const [ipAddress, setIpAddress] = useState<{
        address: string,
        msg: string
    }>({
        address: '',
        msg: 'GeoServer服务未启动'
    })

    const queryGeoServer = async () => {
        invokeGeoServerExist().then((res: ResultMeta) => {
            console.log('是否存在 = ',res.success);
            if(res.success){
                setExist(true);
                invokeGeoServerStart().then((res: ResultMeta) => {
                    console.info('geoserver启动成功');
                    // res.success && setStart(true);
                })
            }
        })
    }
    const geoserverUrl = (_isStart: boolean, uri: string) => {
        if(!_isStart)return;
        const webview = new WebviewWindow("geoserver-window", {
            url: `${uri}/geoserver/index.html`,
            x: 0,
            y: 0,
            width: 1440,
            height: 1080,
            title: "GeoServer自启服务",
          });
        webview.once('tauri://created', function () {
        // webview 窗口成功创建
        console.log('成功');
        
        });

        webview.once('tauri://error', function (e) {
        // 创建窗口时出现错误
        console.log('错误, ', e);
        
        });
    }

    useEffect(() => {
        console.log("是否启动 = ", isExist);
        
        if(isExist){
            const _timer = setInterval(() => {
                invokeGetLocalhostIp().then(res => {
                    console.log('res =', res);
                    
                    if(res.success){
                        setStart(true)
                        const { 
                            ip, port
                        } = res.payload;
                        setIpAddress({
                            address: `http://${ip}:${port}`,
                            msg: 'GeoServer服务已启动'
                        })
                        clearInterval(_timer)
                    }else{
                        setIpAddress({
                            address: "",
                            msg: res.msg
                        })
                    }
                })
            }, 1000)
        }
    }, [isExist])



    return {
        isStart,
        ipAddress,
        isExist,
        queryGeoServer,
        geoserverUrl
    }
}
```
****
#### 庚、得设置允许`http`使用
> tauri.conf.json  
```json
"security": {
      "csp": null
    },
```

将Geoserver服务打包到Tauri程序中使用

**使用mapbox-gl实现无人机测绘功能中的无人机航线生成**
![yunnan-lin](https://raw.githubusercontent.com/Quietly-20201113/PictureSpace/main/mapbox/yunnan-lin.png)
****
![mapbox-gl-gis](https://raw.githubusercontent.com/Quietly-20201113/PictureSpace/main/mapbox/mapbox-gl-gis.png)



:::note{title="自定义画线等功能"}
接上回[mapbox-gl-draw` 自定义按钮画线,画面,计算面积,计算长度](https://blog.ynsites.com/post/36)
:::

****
> 绘制多边形等功能不做赘述

****
**注释由AI生成,将就看**
#### 甲、 安装插件与准备
> `@mapbox/mapbox-gl`  
> `@mapbox/mapbox-gl-draw`  
> `uuid`  
> `@turf/turf`

##### mapbox-gl多边形绘制类型
```ts
  export interface FeaturesMeta {
    type: string;
    geometry:  GeometryMeta;
    properties: PropertiesMeta | any;
    id?:  string;
  }
```

****

#### 乙、 根据绘制的多边形进行缓冲区计算
> 提供缓冲区距离`米`为单位  

##### 1) 将`Draw`数据转换成`@turf/turf`数据
> `turf`API = [polygon](https://turfjs.org/docs/#polygon)

##### 2) 根据提供的缓冲区距离绘制多边形(平行扩建)
> `turf`API = [buffer](https://turfjs.org/docs/#buffer)

```ts
/**
 * 函数“usePolygonParallelExpansion”以多边形和缓冲距离作为输入，使用 Turf.js 创建缓冲多边形，为缓冲多边形分配唯一 ID，并返回缓冲多边形。
 * @param {FeaturesMeta} polygon - `polygon` 参数表示要并行扩展的多边形几何体。它应采用可以转换为 Turf.js 多边形对象的格式。
 * @param {number} buffer - `buffer` 参数是一个数字，表示您希望在 `usePolygonParallelExpansion`
 * 函数中扩展给定多边形的距离（以米为单位）。此距离将用于在多边形周围创建缓冲区。
 * @returns 函数“usePolygonParallelExpansion”返回通过将输入多边形扩展指定的缓冲距离（以米为单位）创建的缓冲多边形特征。
 */
export const usePolygonParallelExpansion = (polygon: FeaturesMeta, buffer: number) => {
    const turfPolygon = turf.polygon([polygon.geometry.coordinates[0]]);
    const bufferedPolygon = turf.buffer(turfPolygon, buffer, { units: 'meters' });
    bufferedPolygon.id = uuidv4()
    return bufferedPolygon;
}
```
****

#### 丙、计算多边形最大边界，中心位置，以及最大纬度
可使用自定义函数，也可使用truf自带函数`bbox`
```ts
  /**
     * 函数“calculatePolygonBounds”计算由纬度和经度数组定义的多边形的边界框和中心。
     * @param {any[]} latlngs - `calculatePolygonBounds` 函数中的 `latlngs`
     * 参数是一个纬度和经度坐标数组。数组中的每个元素代表多边形上的一个点。坐标可以采用不同的格式，可以是数组 `[longitude, latitude]`，也可以是对象 `{lat}`。
     * @returns 函数 `calculatePolygonBounds` 返回一个具有以下属性的对象：
     * - `center`：一个具有 `lat` 和 `lng` 的对象，表示多边形的中心点
     * - `latlngs`：一个表示多边形四个角的对象数组
     * - `northLat`：输入纬度中的最大纬度值
     */
    const calculatePolygonBounds = (latlngs: any[]) => {
        const lats = latlngs.map(latlng => latlng[1] || latlng.lat);
        const lngs = latlngs.map(latlng => latlng[0] || latlng.lng);
        const maxLat = Math.max(...lats);
        const minLat = Math.min(...lats);
        const maxLng = Math.max(...lngs);
        const minLng = Math.min(...lngs);

        return {
            center: { lat: (maxLat + minLat) / 2, lng: (maxLng + minLng) / 2 },
            latlngs: [
            { lat: maxLat, lng: minLng },
            { lat: maxLat, lng: maxLng },
            { lat: minLat, lng: maxLng },
            { lat: minLat, lng: minLng }
            ],
            northLat: maxLat
        };
    };
```
****

#### 丁、设置旋转的多边形(`航线旋转时用到`)
```ts
/**
 * 在 TypeScript 中，`rotatePolygon` 函数围绕指定中心点按给定角度旋转多边形。
 * @param {LatLng[] | Position[]} latlngs - `rotatePolygon` 函数中的 `latlngs` 参数是 `LatLng` 对象或 `Position`
 * 对象的数组。
 * @param  - `rotatePolygon` 函数采用以下参数：
 * @param {number} rotate - `rotatePolygon` 函数中的 `rotate` 参数表示多边形的旋转角度。此角度以度为单位指定，决定了多边形围绕其中心点的旋转量。
 * @param {boolean} [isFinally=false] - `rotatePolygon` 函数中的 `isFinally` 参数是一个布尔标志，指示最终输出是否应采用特定格式。如果
 * `isFinally` 设置为 `true`，则输出将是一个经度和纬度值数组 `[lng, lat]`。如果`
 * @returns `rotatePolygon` 函数根据输入的 `latlngs` 数组或 `Position` 数组、`center` 点、旋转角度 `rotate` 和布尔标志
 * `isFinally` 返回旋转坐标数组。该函数通过围绕指定的中心点旋转每个点来计算新坐标，然后如果 `isFinally` 为
 */
    const rotatePolygon = (latlngs: LatLng[] | Position[], { center }: { center: LatLng }, rotate: number,  isFinally: boolean = false) => {
        const res = [];
        const gis2pxCenter: Point = latlng2Px(center);
        for (let i = 0; i < latlngs.length; i++) {
            const gis2px = latlng2Px(latlngs[i]);
            const _transform = transform(gis2px.x, gis2px.y, gis2pxCenter.x, gis2pxCenter.y, rotate);
            let _item = px2Latlng(_transform);
            if (isFinally) {
                _item = [_item.lng, _item.lat];
            }
            res.push(_item);
        }
        return res;
    };
```

##### 1）`latlng2Px`
> `mapbox-gl`初始化`map`自带函数  
> `map.project`  

##### 2) `px2Latlng`
> `mapbox-gl`初始化`map`自带函数  
> `map.unproject`  

##### 3) 旋转时需要`坐标`与`页面xy`转换

```ts
/**
 * TypeScript 中的“transform”函数根据给定的旋转、平移和缩放参数对点执行二维变换。
 * @param {number} x - `x` 参数表示要转换的点的初始 x 坐标。
 * @param {number} y - `transform` 函数中的 `y` 参数表示要转换的点的初始 y 坐标。
 * @param {number} tx - `transform` 函数中的 `tx` 参数表示平移点的 x 坐标。它是应用变换（旋转和缩放）的点的 x 坐标。
 * @param {number} ty - `transform` 函数中的 `ty` 参数表示沿 y 轴的平移。它是点的 y 坐标垂直平移的量。
 * @param {number} deg - `transform` 函数中的 `deg` 参数表示旋转的角度（以度为单位）。
 * @param {number} [sx=1] - `transform` 函数中的 `sx` 参数表示沿 x 轴的缩放因子。它用于缩放被变换点的 x 坐标。默认情况下，如果没有为 `sx`
 * 提供值，则将其设置为 1，表示不沿 x 轴应用缩放
 * @param {number} [sy=1] - `transform` 函数中的 `sy` 参数表示 y 方向的缩放因子。它用于沿 y 轴缩放正在变换的对象。默认情况下，如果没有为 `sy`
 * 提供值，则将其设置为 1，表示在 y 方向上不应用缩放
 * @returns `transform` 函数在对输入位置 `(x, y)` 应用变换后，返回新位置 `[x', y']`。变换涉及围绕点 `(tx, ty)` 旋转 `deg` 度以及按 `sx`
 * 和 `sy` 缩放。
 */
    const transform = (x: number, y: number, tx: number, ty: number, deg: number, sx: number = 1, sy: number = 1): Position => {
        const rad = (Math.PI / 180) * deg;
        const cosRad = Math.cos(rad);
        const sinRad = Math.sin(rad);
        const dx = x - tx;
        const dy = y - ty;

        return [
            sx * (dx * cosRad - dy * sinRad) + tx,
            sy * (dx * sinRad + dy * cosRad) + ty,
        ];
    };
```

****
#### 戍、计算纬线`count`纬线数量,`step`纬度差
> `turf`API  
> `distance`[distance](https://turfjs.org/docs/#distance)  
> `point`[point](https://turfjs.org/docs/#point)  

```ts
/**
 * 函数“calculateLatLines”根据指定的间距计算给定边界内所需的纬线数量。
 * @param bounds - `bounds` 参数是调用 `calculatePolygonBounds` 函数的结果，该函数可能计算多边形的边界框并返回包含边界框角的经纬度坐标的对象。
 * @param {number} space - `calculateLatLines` 函数中的 `space`
 * 参数表示地图上纬线之间的理想间距。此值用于根据指定的间距计算给定边界框内需要多少条纬线。
 * @returns 函数 `calculateLatLines` 返回一个具有两个属性的对象：
 * 1. `count`：根据指定的间距，覆盖给定边界的西北点和西南点之间的距离所需的纬线数量。
 * 2. `step`：每条纬线之间的纬度差，通过将总纬度差除以纬度线数量计算得出。
 */
    const calculateLatLines = (bounds: ReturnType<typeof calculatePolygonBounds>, space: number) => {
        const nw: LatLng = bounds.latlngs[0];
        const sw: LatLng = bounds.latlngs[3];
        const distance = turf.distance(turf.point([nw.lng, nw.lat ]), turf.point([sw.lng, sw.lat]), { units: 'meters' });
        const latLineCount = Math.ceil(distance / space);
        const latDiff =  nw.lat - sw.lat;
        return {
            count: latLineCount,
            step: latDiff / latLineCount,
        };
    };
```
#### 己、计算纬线与多边形交接点
##### 1) 函数计算给定范围内的包装索引
```ts
/**
   * `wrapIndex` 函数计算给定范围内的包装索引。
   * @param {number} i - 参数`i`表示索引值，而参数`l`表示数组或列表的长度。
   * @param {number} l - `wrapIndex` 函数中的参数 `l` 表示您正在处理的数组或列表的长度。它用于确定数组索引的有效范围。
   */
    const wrapIndex = (i: number, l: number): number => ((i % l) + l) % l;
```

##### 2) 计算多边形交接点
```ts
/**
 * 该函数计算线段与水平线在指定 y 坐标处的交点。
 * @param {Position} p1 - 第一个点的坐标为 [x1, y1]
 * @param {Position} p2 - 您似乎正要提供有关 `calculateIntersectionPoint` 函数中 `p2` 参数的一些信息。我可以如何进一步帮助您？
 * @param {number} y - `calculateIntersectionPoint` 函数中的 `y` 参数表示要找到两个给定点 `p1` 和 `p2` 之间的交点的 y
 * 坐标值。该函数根据提供的 y 坐标和以下坐标计算交点的 x 坐标：
 * @returns 函数“calculateIntersectionPoint”返回一个包含两个数字“[number, number]”的数组（表示交点），如果不满足某些条件，则返回“false”。
 */
    const calculateIntersectionPoint = (p1: Position, p2: Position, y: number): [number, number] | false => {
        const deltaY = p1[1] - p2[1];
        if (deltaY === 0) return false; // 检查分母是否为0，避免除以0

        const deltaX = p1[0] - p2[0];
        const x = (y - p1[1]) * deltaX / deltaY + p1[0];

        // 检查x是否在p1[0]和p2[0]之间
        if ((x > p1[0] && x > p2[0]) || (x < p1[0] && x < p2[0])) return false;

        return [x, y];
    };
```

****

#### 庚、过程情况
> 不去除最大边界  
> 不去除缓冲边界  

![image.png](https://blog.ynsites.com/static/img/123b0f1c95eb2755d276d5c4192940fd.image.webp)
****

MapBox-Gl多边形航线规划,无人机测绘功能

mapbox-gl-draw` 自定义按钮画线,画面,计算面积,计算长度

本文记录个人开发中从搭建框架到开发业务等记录,记录开发过程中的想法与思维,方便后续进行迭代与反省
****


#### 一、vue3调用子组件函数
**对比与vue2,vue3调用子组件函数时注意事项**
> 子组件函数需要使用`defineExpose`进行函数暴露
```JavaScript
 //子组件
 import { defineExpose } from 'vue';
 const son = () => {};
 defineExpose({
     son,
 })
```
****
#### 二、将loading与request封装成hooks实例
(1)、提供loading指令变量  
(2)、提供封装好的request或者未封装的都可

```JavaScript
import { ref, reactive } from 'vue';

/**
 * 请求与dom的loading关联,非全局loading
 * @param {* 请求} service
 * @param {* 形参} option
 * @returns Object
 */
const useBHLoading = (service, option) => {
  const loading = ref(false);
  const res = reactive({});
  // eslint-disable-next-line no-underscore-dangle
  const request = async (url, arg) => {
    loading.value = true;
    return service(url, arg).then((_res) => {
      console.log('_res = ', _res);
      res.payload = _res.payload;
    }).catch((err) => {

    }).finally(() => {
      loading.value = false;
      // eslint-disable-next-line no-underscore-dangle
      // const _timer = setTimeout(() => {
      //   loading.value = false;
      //   clearTimeout(_timer);
      // }, 2000);
    });
  };

  return {
    loading,
    request,
    res,
  };
};

export default useBHLoading;

```

使用实例: 
```JavaScript
import useBHLoading from '@/hooks/requset-loading-hook';
import http from '@/utils/http/index';
// http.get为请求
const _useBHLoading = useBHLoading(http.get);
// loading 控制loading
//res 请求返回值
// requst 请求
const { loading, res, request } = _useBHLoading;
// 请求
await request(url, { isLoading: false });

```
```html
    <el-table v-YniiLoading="loading" :data="res.payload?.data" style="width: 100%" 
    </el-table>
```
****
#### 三、结合分页hooks使用
```JavaScript
import { reactive } from 'vue';

const useBHPagination = () => {
  const pagination = reactive({
    currentPage: 0,
    pageSize: 0,
    total: 0,
    pageSizes: [100, 200, 300, 400],
  });

  const sizeChange = (data) => {
    pagination.currentPage = data.page;
    pagination.pageSize = data.page_size;
    pagination.total = data.total;
  };

  const setPageSizes = (list) => {
    pagination.pageSizes = list || [100, 200, 300, 400];
  };

  return {
    pagination,
    sizeChange,
    setPageSizes,
  };
};

export default useBHPagination;

```
```JavaScript
import useBHPagination from '@/hooks/pagination-hooks';
const { pagination, sizeChange } = useBHPagination();

await request(props.url, { isLoading: false });
sizeChange(res.payload?.pagination);
```

```html
<el-pagination
    v-model:current-page="pagination.currentPage"
    v-model:page-size="pagination.pageSize"
    small="small"
    :hide-on-single-page="true"
    :page-sizes="pagination.pageSizes"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pagination.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    />
```

****
#### 四、自定义loading指令,替换原先图标改成自定义布局

(1)、首先提供一个花里胡哨布局的loading  
(2)、其次写个指令与dom进行关联操作的函数  
(3)、最后两者结合,导出去  
(4)、最最后`main`里面声明下指令  

##### 甲、制造轮毂-指令与dom
```JavaScript
import { createApp } from 'vue';
import { addClass, removeClass } from '@/utils/index';

const relativeCls = 'relative';

export default function createLikeDirective(Comp) {
  function append(el) {
    const { name } = Comp;
    const style = getComputedStyle(el);
    if (['absolute', 'fixed', 'relative'].indexOf(style.position) === -1) {
      addClass(el, relativeCls);
    }
    el.appendChild(el[name].instance.$el);
  }

  function remove(el) {
    const { name } = Comp;
    removeClass(el, relativeCls);
    el.removeChild(el[name].instance.$el);
  }
  return {
    mounted(el, binding) {
      const app = createApp(Comp);
      const instance = app.mount(document.createElement('div'));
      const { name } = Comp;
      if (!el[name]) {
        // eslint-disable-next-line no-param-reassign
        el[name] = {};
      }
      // eslint-disable-next-line no-param-reassign
      el[name].instance = instance;
      const title = binding.arg;
      if (typeof title !== 'undefined') {
        instance.setTitle(title);
      }

      if (binding.value) {
        append(el);
      }
    },
    updated(el, binding) {
      const title = binding.arg;
      const { name } = Comp;
      if (typeof title !== 'undefined') {
        el[name].instance.setTitle(title);
      }
      if (binding.value !== binding.oldValue) {
        // eslint-disable-next-line no-unused-expressions
        binding.value ? append(el) : remove(el);
      }
    },
  };
}

```
##### 乙、制造轮辋-dom操作与布局结合
```JavaScript
// loading花里胡哨布局
import Loading from '@/components/Loading/index.vue';
// dom操作
import createLikeDirective from '@/directive/create-like-directive';

const loadingDirective = createLikeDirective(Loading);

export default loadingDirective;

```

##### 丙、制造轮胎-搞一个花里胡哨的loading
```html
<template>
    <div class="ynii-loading-box flex items-center justify-center p-5">
        <div class="la-ball-atom">
        <div>
            <img class="logo select-none" src="../../assets/logo.png" alt="logo" />
        </div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    </div>
</template>
<style scoped>

.ynii-loading-box{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: var(--black-color-10);
  transform: translate3d(-50%, -50%, 0);
}

.logo{
  width: 100%;
  height: 100%;
}

.la-ball-atom, .la-ball-atom > div {
  position: relative;
  box-sizing: border-box;
}

.la-ball-atom {
  display: block;
  width: 100px;
  height: 100px;
  font-size: 0;
  color: var(--primary-color);
}

.la-ball-atom.la-dark {
  color: #333;
}

.la-ball-atom > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.la-ball-atom > div:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 60%;
  height: 60%;
  background: #fff;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  animation: ball-atom-shrink 4.5s infinite linear;
}

.la-ball-atom > div:not(:nth-child(1)) {
  position: absolute;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: none;
  animation: ball-atom-zindex 1.5s 0s infinite steps(2, end);
}

.la-ball-atom > div:not(:nth-child(1))::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin-top: -5px;
  margin-left: -5px;
  background: currentColor;
  border-radius: 50%;
  content: '';
  opacity: .75;
  animation: ball-atom-position 1.5s 0s infinite ease, ball-atom-size 1.5s 0s infinite ease;
}

.la-ball-atom > div:nth-child(2) {
  animation-delay: .75s;
}

.la-ball-atom > div:nth-child(2)::before {
  animation-delay: 0s, -1.125s;
}

.la-ball-atom > div:nth-child(3) {
  transform: rotate(120deg);
  animation-delay: -.25s;
}

.la-ball-atom > div:nth-child(3)::before {
  animation-delay: -1s, -.75s;
}

.la-ball-atom > div:nth-child(4) {
  transform: rotate(240deg);
  animation-delay: .25s;
}

.la-ball-atom > div:nth-child(4)::before {
  animation-delay: -.5s, -.125s;
}

.la-ball-atom.la-sm {
  width: 16px;
  height: 16px;
}

.la-ball-atom.la-sm > div:not(:nth-child(1))::before {
  width: 4px;
  height: 4px;
  margin-top: -2px;
  margin-left: -2px;
}

.la-ball-atom.la-2x {
  width: 64px;
  height: 64px;
}

.la-ball-atom.la-2x > div:not(:nth-child(1))::before {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
}

.la-ball-atom.la-3x {
  width: 96px;
  height: 96px;
}

.la-ball-atom.la-3x > div:not(:nth-child(1))::before {
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
}

/*
 * Animations
 */
@keyframes ball-atom-position {
  50% {
    top: 100%;
    left: 100%;
  }
}
@keyframes ball-atom-position {
  50% {
    top: 100%;
    left: 100%;
  }
}
@keyframes ball-atom-position {
  50% {
    top: 100%;
    left: 100%;
  }
}
@keyframes ball-atom-position {
  50% {
    top: 100%;
    left: 100%;
  }
}
@keyframes ball-atom-size {
  50% {
    transform: scale(.5, .5);
  }
}
@keyframes ball-atom-size {
  50% {
    transform: scale(.5, .5);
  }
}
@keyframes ball-atom-size {
  50% {
    transform: scale(.5, .5);
  }
}
@keyframes ball-atom-size {
  50% {
    transform: scale(.5, .5);
  }
}
@keyframes ball-atom-zindex {
  50% {
    z-index: 10;
  }
}
@keyframes ball-atom-zindex {
  50% {
    z-index: 10;
  }
}
@keyframes ball-atom-zindex {
  50% {
    z-index: 10;
  }
}
@keyframes ball-atom-zindex {
  50% {
    z-index: 10;
  }
}
@keyframes ball-atom-shrink {
  50% {
    transform: translate(-50%, -50%) scale(.8, .8);
  }
}
@keyframes ball-atom-shrink {
  50% {
    transform: translate(-50%, -50%) scale(.8, .8);
  }
}
@keyframes ball-atom-shrink {
  50% {
    transform: translate(-50%, -50%) scale(.8, .8);
  }
}
@keyframes ball-atom-shrink {
  50% {
    transform: translate(-50%, -50%) scale(.8, .8);
  }
}
</style>

```

##### 丁、组装出货-`main`里面声明

```JavaScript
import loadingDirective from '@/directive/loading';
app.directive('YniiLoading', loadingDirective);
```

##### 戍、这个就是造轮子
****
#### 五、记录一个在tabs中使用table时，`el-table__empty-text`上级在无限增高
1. `tabs`中嵌套`table`涵盖分页
2. 全程使用`flex`布局
3. `el-tab-pane`中设置样式`h-full`
4. 之后`el-table__empty-block`就开始无限极增高,源码js设置高度
5. 在代码段中没有复现出来

##### 解决方法(与原版本一模一样)
```css
.el-table__empty-block{
    height: 100% !important;
  }

  .el-scrollbar__view{
    height: 100%;
  }
```
****

vue3与element plus使用详记

**react + antd 多文件上传**
**批量上传**
**单次请求**
**自定义上传**

官方回答
> 2019 `目前还不支持多文件单次上传。`
> 2020/8 `我们不能更改它，因为这将是一个中断更改。`
> 2021/5 `onChange 可以实现。`(change实现多文件多次请求 且 上传中,上传失败,上传成功都会调用change)
> 



### 甲、思路
`beforeUpload`里面只会更新一次state，然后监听state调接口并重置单例状态

### 乙、关键代码
```react
  const fileState = useRef();
  // 存储files
  const [uploadFiles, setUploadFiles] = useState([]);
  const updateFiles = (function () {
    let fileList;
    return function (list, setState) {
      if (!fileList) {
        fileList = list;
        setState && setState(list);
      }
      return {
        fileList,
        reset() {
          fileList = false;
        }
      };
    };
  })();

  const beforeUpload = (_, fileList) => {
    fileState.current = updateFiles(fileList, setUploadFiles);
    return false;
  }
  const customRequest = () => {
    console.log("自定义上传", uploadFiles);
  };

  useEffect(() => {
    if (uploadFiles.length > 0) {
      customRequest();
      fileState.current.reset();
    }
  }, [uploadFiles]);
```

### 丙、实例传送
[codesandbox.io](https://codesandbox.io/s/cizd8w)