option = {  grid: {    left: 0,    right: 0,    top: 0,    bottom: 0  },  series: [    {      name: '漏斗图',      type: 'funnel',      left: '0%',      top: 0,      bottom: 0,      width: '100%',      minSize: '0%',      maxSize: '100%',      gap: 5,      sort: 'ascending',      label: {        show: true,        position: 'inside'      },      itemStyle: {        borderColor: '#fff',        borderWidth: 1,        normal: {          color: function (params) {            var colorList = [              '#FF4C4C',              '#FF6383',              '#FF9933',              '#FFC635',              '#31DC72',              '#39E8DE',              '#91FFE7',              '#91FAB9',              '#8572FF',              '#4578FF'            ];            return colorList[params.dataIndex];          }        }      },      emphasis: {        label: {          fontSize: 20        }      },      data: [        { value: 60, name: '创新型中小企业' },        { value: 40, name: '专精特新中小企业' },        { value: 20, name: '专精特新"小巨人"企业' },        { value: 80, name: '科技型中小企业' },        { value: 100, name: '高新技术企业' }      ]    }  ]};

<svg t="1757488815348" class="icon" viewBox="0 0 1000 1000" version="1.1"  xmlns="http://www.w3.org/2000/svg" p-id="996" width="1000" height="1000">  <path d="M0,1000 L1000,1000 C550,1000 550,500 500,0 C450,500 450,1000 0,1000 z"    fill="currentColor" /></svg>

效果预览:

<template>  <view class="lottie-wrap">    <canvas class="lottie" id="canvas" type="2d"></canvas>  </view></template><script>  import lottie from 'lottie-miniprogram'  import {    mapGetters  } from 'vuex'  export default {    data() {      return {        animation: null      };    },    computed: {      ...mapGetters(['systemInfo']),    },    onLoad() {      uni.createSelectorQuery()        .in(this)        .select("#canvas")        .node((res) => {          const canvas = res.node          const context = canvas.getContext("2d")          canvas.width = 390 //this.systemInfo.windowWidth          canvas.height = 844 //this.systemInfo.windowHeight          //需要在任何 lottie 接口调用之前调用，传入 canvas 对象          lottie.setup(canvas)          //创建动画实例          let  animation = lottie.loadAnimation({            //是否循环播放            loop: false,            //是否自动播放            autoplay: true,            //path:这里替换成你要用的动画链接 在线的使用path,本地的使用animationData，通过require引入            path: "https://gist.githubusercontent.com/kiriss91/889556a50a1e60560003453f8933d60b/raw/7bacaec5eac9301618bf89df4fc5510c8ae65e36/Terminal-payment.json",            renderer: "canvas",            rendererSettings: {              context            }          })          animation.addEventListener("complete", () => {            console.log('complete');          //   todo 动画加载完开启下一步逻辑          })        }).exec()    },  }</script><style lang="scss">  .lottie-wrap {    width: 750rpx;    height: 100vh;    position: relative;  }  .lottie {    background-color: rgba(255, 255, 255, 1);    width: 100%;    height: 100%;    position: absolute;    left: 0px;    top: 0px;    display: block;    overflow: hidden;    transform: translate3d(0, 0, 0);    box-sizing: border-box;  }</style>

/*!/SDK/

git read-tree -mu HEAD

// git sparse-checkout set .

接口:https://api.tracker.gg/api/v1/apex/insights/distribution?platform=origin&field=RankScore

const data = {“data”:[{“tier”:“Rookie 4”,“count”:5530,“pct”:0.656520087377719,“highest”:250},{“tier”:“Rookie 3”,“count”:6804,“pct”:0.80776901890018,“highest”:500},{“tier”:“Rookie 2”,“count”:5505,“pct”:0.653552094215975,“highest”:750},{“tier”:“Rookie 1”,“count”:32464,“pct”:3.85411720011397,“highest”:1000},{“tier”:“Bronze 4”,“count”:34569,“pct”:4.1040222243328,“highest”:1500},{“tier”:“Bronze 3”,“count”:27006,“pct”:3.20614493304207,“highest”:2000},{“tier”:“Bronze 2”,“count”:22772,“pct”:2.70348561116915,“highest”:2500},{“tier”:“Bronze 1”,“count”:18032,“pct”:2.14075410770254,“highest”:3000},{“tier”:“Silver 4”,“count”:25872,“pct”:3.07151676322538,“highest”:3600},{“tier”:“Silver 3”,“count”:33664,“pct”:3.99658087187767,“highest”:4200},{“tier”:“Silver 2”,“count”:30023,“pct”:3.56432234780131,“highest”:4800},{“tier”:“Silver 1”,“count”:26165,“pct”:3.10630164308101,“highest”:5400},{“tier”:“Gold 4”,“count”:43040,“pct”:5.10969702725805,“highest”:6100},{“tier”:“Gold 3”,“count”:51393,“pct”:6.10136290245987,“highest”:6800},{“tier”:“Gold 2”,“count”:52056,“pct”:6.18007408110932,“highest”:7500},{“tier”:“Gold 1”,“count”:44157,“pct”:5.24230696172476,“highest”:8200},{“tier”:“Platinum 4”,“count”:72177,“pct”:8.56883369740716,“highest”:9000},{“tier”:“Platinum 3”,“count”:70910,“pct”:8.41841580396999,“highest”:9800},{“tier”:“Platinum 2”,“count”:42694,“pct”:5.06862000189952,“highest”:10600},{“tier”:“Platinum 1”,“count”:33299,“pct”:3.95324817171621,“highest”:11400},{“tier”:“Diamond 4”,“count”:71287,“pct”:8.46317314084909,“highest”:12300},{“tier”:“Diamond 3”,“count”:53679,“pct”:6.37275619716972,“highest”:13200},{“tier”:“Diamond 2”,“count”:15224,“pct”:1.80738911577548,“highest”:14100},{“tier”:“Diamond 1”,“count”:6785,“pct”:0.805513344097255,“highest”:15000},{“tier”:“Master”,“count”:16463,“pct”:1.9544828568715,“highest”:313143},{“tier”:“Predator”,“count”:750,“pct”:0.0890397948523127,“highest”:313143}]}

const totalCount = data.data.reduce((accumulator, currentValue) => {
return accumulator + currentValue.count;
}, 0);

console.log(“Total count:”, totalCount);

截至目前当前赛季赛段排位玩家总人数 845513 人(含脚本机器人)

// 判断点是否在多边形（外环/内洞）内function isPointInPolygon(point, polygon) {    const [outerRing, ...holes] = polygon; // 外环和内洞    const isInOuterRing = isPointInRing(point, outerRing);    if (!isInOuterRing) return false; // 点不在外环内，直接返回 false    // 判断点是否在内洞内    for (const hole of holes) {        if (isPointInRing(point, hole)) {            return false; // 点在内洞内，返回 false        }    }    return true; // 点在外环内且不在任何内洞内}// 判断点是否在一个环（简单多边形）内function isPointInRing(point, ring) {    const x = point.lng;    const y = point.lat;    let isInside = false;    for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {        const xi = ring[i][0], yi = ring[i][1];        const xj = ring[j][0], yj = ring[j][1];        const intersect =            yi > y !== yj > y &&            x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;        if (intersect) isInside = !isInside;    }    return isInside;}// 根据经纬度获取省份（支持 Polygon 类型）export function getProvinceByCoordinates(point) {    for (const feature of geoData.features) {        const { name } = feature.properties;        const coordinates = feature.geometry.coordinates;        // Geometry Type 是 Polygon        if (feature.geometry.type === "Polygon") {            if (isPointInPolygon(point, coordinates)) {                return name;            }        }        // Geometry Type 是 MultiPolygon        if (feature.geometry.type === "MultiPolygon") {            for (const polygon of coordinates) {                if (isPointInPolygon(point, polygon)) {                    return name;                }            }        }    }    return null;}// 示例数据（你的 GeoJSON 数据）const geoData = {  "type": "FeatureCollection",  "features": [    {      "type": "Feature",      "properties": {        "adcode": 110000,        "name": "北京市",        "center": [116.405285, 39.904989],        "centroid": [116.41995, 40.18994],        "childrenNum": 16,        "level": "province",        "parent": { "adcode": 100000 },        "subFeatureIndex": 0,        "acroutes": [100000],      },      "geometry": {        "type": "MultiPolygon",        "coordinates": [          [            [              [117.348611, 40.581141],              [117.389879, 40.561593],              [117.429915, 40.576141],              [117.412669, 40.605226],              [117.467487, 40.649738],              [117.467487, 40.649738],              [117.501364, 40.636569],              [117.514914, 40.660181],              [117.493973, 40.675161],              [117.408973, 40.686961],              [117.342451, 40.673799],              [117.319662, 40.657911],              [117.278394, 40.664267],              [117.208177, 40.694675],              [117.117018, 40.70012],              [117.11209, 40.707379],              [117.012308, 40.693767],              [116.964881, 40.709647],              [116.926692, 40.745022],              [116.924229, 40.773581],              [116.848468, 40.839264],              [116.81336, 40.848319],              [116.759773, 40.889954],              [116.713577, 40.909858],              [116.722201, 40.927495],              [116.677853, 40.970888],              [116.698795, 41.021477],              [116.688324, 41.044501],              [116.647672, 41.059394],              [116.615643, 41.053076],              [116.623034, 41.021026],              [116.598397, 40.974503],              [116.5676, 40.992574],              [116.519557, 40.98128],              [116.519557, 40.98128],              [116.455499, 40.980828],              [116.447492, 40.953715],              [116.477057, 40.899907],              [116.398216, 40.90624],              [116.370499, 40.94377],              [116.339702, 40.929303],              [116.334159, 40.90443],              [116.438253, 40.81934],              [116.46597, 40.774487],              [116.453651, 40.765876],              [116.316912, 40.772221],              [116.311369, 40.754996],              [116.273181, 40.762703],              [116.247311, 40.791707],              [116.22021, 40.744115],              [116.204812, 40.740035],              [116.171551, 40.695582],            ],          ],        ],      },    },    // 其他省份数据...  ],};// 测试点const point = { lat: 39.9, lng: 116.4 }; // 北京的经纬度const province = getProvinceByCoordinates(point, geoData);console.log(province); // 输出: 北京市

json快捷转ts类型的扩展:https://marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts
vscode安装之后 ctrl+alt+V 即可生成类型

协议注册
在 Windows 中，要注册一个自定义协议，需要在注册表中添加一些项目：

Windows Registry Editor Version 5.00[HKEY_CURRENT_USER\Software\Classes\myprotocol]@="URL:myprotocol""URL Protocol"=""[HKEY_CURRENT_USER\Software\Classes\myprotocol\shell][HKEY_CURRENT_USER\Software\Classes\myprotocol\shell\open][HKEY_CURRENT_USER\Software\Classes\myprotocol\shell\open\command]@="\"你的程序绝对路径\" \"%1\""

在上面的代码中，myprotocol 是自定义的协议名，你可以自己定义。你的程序绝对路径 是你的程序的绝对路径，%1 是网页传递过来的参数。比如网页的链接是 myprotocol://hello，那么 你的程序绝对路径 就会接收到 myprotocol://hello 这个参数。

这样，当网页中有一个链接是 myprotocol://hello 时，点击这个链接就会打开你的程序，并传递 myprotocol://hello 这个参数。

协议检测
在网页中，可以使用 a 标签来定义一个自定义协议的链接，点击就会打开你的程序并传递参数：

<a href="myprotocol://hello">打开我的程序</a>

但是，如果你还没有定义这个协议，点击这个链接是没有任何效果的。那么我们就可以使用 custom-protocol-check 这个库来检测是否已经定义了这个协议。

import customProtocolCheck from "custom-protocol-check";customProtocolCheck(  "myprotocol://params",  () => {    if(!window.confirm("XXXXXX is not installed. Do you want to install it?")) return;    window.open('https://example.com/XXXXXX.exe', '_blank');  },  () => {    console.log("Custom protocol found and opened the file successfully.");  }, 5000);

这样，当用户点击这个链接时，如果没有定义这个协议，就会弹出一个提示框，询问用户是否要下载你的程序。

至此，我们就完成了一个自定义协议的定义和使用。

那么，如果我们想要更多高级的工程化的功能，启动的应用程序应该如何和 Web 页面进行配合呢？

下面，我们将通过一个 C# WinForm 实例，介绍自定义协议的 Web 与桌面应用程序配合的最佳实践。

Web 与 App 通信
启动应用程序后，应用程序可以通过 Web 的协议链接，获取到 Web 传递过来的参数，但是这样的通信是单向的，如果我们希望 Web 页面和应用程序之间进行双向通信，就需要使用 WebSocket。

我们可以在应用程序内启动一个 WebSocket 服务，然后在 Web 页面中通过 WebSocket 连接到这个服务，这样就可以实现双向通信。

我们可以使用 Fleck 来实现 Websocket Server，这里是 示例代码 。

server = new WebSocketServer("ws://127.0.0.1:" + Port);server.Start(socket =>{    socket.OnOpen = () => Logger.Log.Info("WebSocket Open!");    socket.OnClose = () => Logger.Log.Info("WebSocket Close!");    socket.OnError = (err) => Logger.Log.Info("WebSocket Error: " + err.Message);    socket.OnMessage = (message => {        object msg;        try        {            msg = new JavaScriptSerializer().DeserializeObject(message);        }        catch (Exception)        {            msg = message;        }        action(new MessageCall()        {            type = WebSocketMessageType.Text,            message = msg,            client = socket,        });    });    socket.OnBinary = (message => {        action(new MessageCall()        {            type = WebSocketMessageType.Binary,            binary = message,            client = socket,        });    });});

这里监听了 WebSocket 的字符串消息和二进制消息，然后通过 action 回调函数将消息数据向外传递。其中 client 就是连接的客户端，可以通过 client 发送消息。

而 Web 那边，我们可以使用 WebSocket 连接到这个服务，示例代码：

function connectSocket(onMessage, port) {  return new Promise((resolve) => {    const ws = new WebSocket(`ws://localhost:${port}`);    ws.onopen = () => {      console.log("Socket is connected.");      ws.onmessage = (message) => {        onMessage(message.data);      };      ws.onclose = () => {        console.log("Socket is closed.");      }      resolve(ws);    };    ws.onclose = () => {      // retry after 1s      setTimeout(() => connectSocket(onMessage, port), 1000);    };  });}

因为启动程序是需要时间的，我们无法确定合适程序完成启动，所以这里使用了 setTimeout 来重试连接，如果连接失败，就会在 1s 后重试。

这样，就建立了一个 Web 页面和应用程序之间的双向通信信道。

通信协议
有了通信信道，我们就可以定义一套通信协议，用于 Web 页面和应用程序之间的通信。比如使用 JSON，定义信息结构如下：

{  "command": "download",  "data": {    "url": "https://file.fishpi.cn/2023/02/blob-e6f2be62.png",    "local": "C:\\Protocol"  }}

用 command 字段来表示命令，data 字段来表示数据。这样，我们就可以在 Web 页面中发送一个下载文件的命令，应用程序就可以接收到这个命令，并执行下载文件到指定的目录。（没错，就是 @xiaoaonan 上次收到的奇葩用户需求。trollface

然后，应用程序那边，就可以通过 WebSocket 来接收这个命令，然后执行下载文件的操作，示例代码：

// 启动 WebSocket 服务private void ServiceStart(int Port){    Logger.Log.Info("Start WebSocket in Port " + Port);    WebSocketService.Start(call =>    {        try        {            wsClient = call.client;            if (call.type == WebSocketMessageType.Text)            {                MessageExecute((Dictionary<string, object>)call.message);            }        }        catch (Exception ex)        {            Logger.Log.Fatal("Websocket Message Error: " + ex.Message);            throw ex;        }    }, Port.ToString());}// 执行命令private void MessageExecute(Dictionary<string, object> message){    string command = message["command"] as string;    object data = message.Keys.Contains("data") ? message["data"] : null;    switch (command)    {        case "Ping":            SendData("Ping", "Pong");            break;        case "Download":            Download((data as Dictionary<string, object>)["url"] as string, (data as Dictionary<string, object>)["local"] as string);            break;        case "Close":            Application.Exit();            break;    }}

这样，我们就完成了一个自定义协议的 Web 与桌面应用程序的配合。

程序路由
如果我们要更进一步，我们可以在应用程序中定义一套路由系统，用于处理不同的协议地址，比如 myprotocol://form1 就打开一个窗口，myprotocol://form2 就打开另一个窗口。还可以接收 QueryString 参数，比如 myprotocol://form2?port=12345。

那么，我们就可以在程序中定义一个路由解析器，用于解析协议地址，然后执行对应的操作。这里有一个 示例代码 。具体的实现下回再说，感兴趣的可以先看看代码。

打包发布
最后，我们可以使用 Inno Setup 来打包发布我们的应用程序，这是一个免费的 Windows 安装程序制作工具，可以用于打包发布我们的应用程序。

这里是一个 示例脚本

然后，你可以在这里：https://protocol.git.hancel.org/ 查看到 Web 实例。

GitHub 仓库：https://github.com/imlinhanchao/custom-protocol-app

<div class="wrapper">  <div class="circles"></div>  <div class="circles2"></div>  <div class="circles3"></div></div>

.wrapper {  position: relative;  width: 200px;  height: 200px;}.circles,.circles2 {  position: absolute;  width: 50px;  height: 50px;  border-radius: 50%;}.circles {    left:15px;    top:15px;     width: 20px;  height: 20px;  background-color: #3AB5EC;  animation: expand 1s ease-out;}.circles2 {  background-color: rgba(58, 181, 236,0.41);  animation: expand 1s 0.5s infinite linear;}@keyframes expand {  0% {    opacity: 1;    transform: scale(0);  }  100% {    opacity: 0;    transform: scale(1.5);  }}

<style>    .text {        width: 400px;        height: 400px;        background-color: rgb(255, 255, 255);        border-radius: 20px;        transform: perspective(39px) scale(1, 1.15) rotateX(1deg);        /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */        transform-origin: bottom right;        /* bottom left = left bottom = 0 100% 中心点偏移量*/        box-shadow: 0 0 10px #ccc;    }</style><div class="text"></div>

依赖

    "express": "^4.18.2",    "http-proxy-middleware": "^1.0.6",

在项目根目录新建server.js
因为api是 /energyreport/xxx/xxx/xxx?xx=xx,部分接口是/basic/xx/xx
新版http-proxy-middleware的2.x没看

const express = require('express');const proxy = require('http-proxy-middleware');const app = express();const PORT = 8080; app.use(express.static('dist')); const apiProxy = proxy.createProxyMiddleware('/energyreport', {  target: "http://localhost:4200",  changeOrigin: true});const apiProxy1 = proxy.createProxyMiddleware('/basic', {  target: "http://localhost:4200",  changeOrigin: true});app.use(apiProxy);app.use(apiProxy1);app.listen(PORT, function(err) {  if (err) {    console.log('err :', err);  } else {    console.log('Listen at http://localhost:' + PORT);  }});

其他的浏览器和框架没试

/* * @description 十进制数字相加 * @param { number } num1 -数字1 * @param { number } num2 -数字2 * @returns { number } * @example * add(0.1,0.2)  => 0.3 */function add(num1: number, num2: number): number {  const len1 = (num1.toString().split(".") || "").length;  const len2 = (num2.toString().split(".") || "").length;  const maxLen = Math.max(len1, len2);  const multiple = Math.pow(10, maxLen);  return (num1 * multiple + num2 * multiple) / multiple;}

js

/* * @description 十进制数字相加 * @param { number } num1 -数字1 * @param { number } num2 -数字2 * @returns { number } * @example * add(0.1,0.2)  => 0.3 */function add(num1, num2) {    var len1 = (num1.toString().split(".") || "").length;    var len2 = (num2.toString().split(".") || "").length;    var maxLen = Math.max(len1, len2);    var multiple = Math.pow(10, maxLen);    return (num1 * multiple + num2 * multiple) / multiple;}

本项目推荐使用 Visual Studio Code 开发

项目文件、组件命名规范

• Link（v3）：https://cn.vuejs.org/style-guide
• Link（v2）：https://v2.cn.vuejs.org/v2/style-guide

:::warning
💢 Geeker Admin 采用 Vue 官方推荐的风格指南，请务必查看
:::

代码格式化工具（Prettier）

1、下载 prettier 相关依赖：

pnpm install prettier -D

2、安装 Vscode 插件（Prettier）：

3、配置 Prettier（.prettierrc.cjs）：

// @see: https://www.prettier.cnmodule.exports = {// 指定最大换行长度printWidth: 130,// 缩进制表符宽度 | 空格数tabWidth: 2,// 使用制表符而不是空格缩进行 (true：制表符，false：空格)useTabs: false,// 结尾不用分号 (true：有，false：没有)semi: true,// 使用单引号 (true：单引号，false：双引号)singleQuote: false,// 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>"quoteProps: "as-needed",// 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号)jsxSingleQuote: false,// 多行时尽可能打印尾随逗号 可选值"<none|es5|all>"trailingComma: "none",// 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有)bracketSpacing: true,// 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行)bracketSameLine: false,// (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号)arrowParens: "avoid",// 指定要使用的解析器，不需要写文件开头的 @prettierrequirePragma: false,// 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化insertPragma: false,// 用于控制文本是否应该被换行以及如何进行换行proseWrap: "preserve",// 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的htmlWhitespaceSensitivity: "css",// 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式vueIndentScriptAndStyle: false,// 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>"endOfLine: "auto",// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)rangeStart: 0,rangeEnd: Infinity,};

代码规范工具（ESLint）

1、下载 ESLint 相关依赖：

pnpm install eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

2、安装 Vscode 插件（ESLint）：

3、配置 ESLint（.eslintrc.cjs）：

// @see: http://eslint.cnmodule.exports = {root: true,env: {browser: true,node: true,es6: true,},// 指定如何解析语法parser: "vue-eslint-parser",// 优先级低于 parse 的语法解析配置parserOptions: {parser: "@typescript-eslint/parser",ecmaVersion: 2020,sourceType: "module",jsxPragma: "React",ecmaFeatures: {jsx: true,},},// 继承某些已有的规则extends: ["plugin:vue/vue3-recommended","plugin:@typescript-eslint/recommended","plugin:prettier/recommended",],/** * "off" 或 0    ==>  关闭规则 * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行） * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错） */rules: {// eslint (http://eslint.cn/docs/rules)"no-var": "error", // 要求使用 let 或 const 而不是 var"no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行"prefer-const": "off", // 使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const"no-use-before-define": "off", // 禁止在 函数/类/变量 定义之前使用它们"no-irregular-whitespace": "off", // 禁止不规则的空白// typeScript (https://typescript-eslint.io/rules)"@typescript-eslint/no-unused-vars": "error", // 禁止定义未使用的变量"@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore"@typescript-eslint/no-inferrable-types": "off", // 可以轻松推断的显式类型可能会增加不必要的冗长"@typescript-eslint/no-namespace": "off", // 禁止使用自定义 TypeScript 模块和命名空间。"@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 类型"@typescript-eslint/ban-types": "off", // 禁止使用特定类型"@typescript-eslint/explicit-function-return-type": "off", // 不允许对初始化为数字、字符串或布尔值的变量或参数进行显式类型声明"@typescript-eslint/no-var-requires": "off", // 不允许在 import 语句中使用 require 语句"@typescript-eslint/no-empty-function": "off", // 禁止空函数"@typescript-eslint/no-use-before-define": "off", // 禁止在变量定义之前使用它们"@typescript-eslint/ban-ts-comment": "off", // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述"@typescript-eslint/no-non-null-assertion": "off", // 不允许使用后缀运算符的非空断言(!)"@typescript-eslint/explicit-module-boundary-types": "off", // 要求导出函数和类的公共类方法的显式返回和参数类型// vue (https://eslint.vuejs.org/rules)"vue/script-setup-uses-vars": "error", // 防止<script setup>使用的变量<template>被标记为未使用，此规则仅在启用该no-unused-vars规则时有效。"vue/v-slot-style": "error", // 强制执行 v-slot 指令样式"vue/no-mutating-props": "off", // 不允许组件 prop的改变"vue/no-v-html": "off", // 禁止使用 v-html"vue/custom-event-name-casing": "off", // 为自定义事件名称强制使用特定大小写"vue/attributes-order": "off", // vue api使用顺序，强制执行属性顺序"vue/one-component-per-file": "off", // 强制每个组件都应该在自己的文件中"vue/html-closing-bracket-newline": "off", // 在标签的右括号之前要求或禁止换行"vue/max-attributes-per-line": "off", // 强制每行的最大属性数"vue/multiline-html-element-content-newline": "off", // 在多行元素的内容之前和之后需要换行符"vue/singleline-html-element-content-newline": "off", // 在单行元素的内容之前和之后需要换行符"vue/attribute-hyphenation": "off", // 对模板中的自定义组件强制执行属性命名样式"vue/require-default-prop": "off", // 此规则要求为每个 prop 为必填时，必须提供默认值"vue/multi-word-component-names": "off", // 要求组件名称始终为 “-” 链接的单词},};

样式规范工具（StyleLint）

1、下载 StyleLint 相关依赖：

pnpm install stylelint stylelint-config-html stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss stylelint-config-recess-order postcss postcss-html stylelint-config-prettier -D

2、安装 Vscode 插件（StyleLint）：

3、在目录的 .vscode 文件夹下新建 settings.json：

{"editor.formatOnSave": true,"editor.codeActionsOnSave": {"source.fixAll.stylelint": true},"stylelint.enable": true,"stylelint.validate": ["css","less","postcss","scss","vue","sass","html"],"files.eol": "\n"}

😎 也可以在 vscode 中全局配置上述 json 代码 😎

4、配置 StyleLint（.stylelintrc.cjs）：

// @see: https://stylelint.iomodule.exports = {root: true,// 继承某些已有的规则extends: ["stylelint-config-standard", // 配置 stylelint 拓展插件"stylelint-config-html/vue", // 配置 vue 中 template 样式格式化"stylelint-config-standard-scss", // 配置 stylelint scss 插件"stylelint-config-recommended-vue/scss", // 配置 vue 中 scss 样式格式化"stylelint-config-recess-order", // 配置 stylelint css 属性书写顺序插件,"stylelint-config-prettier", // 配置 stylelint 和 prettier 兼容],overrides: [// 扫描 .vue/html 文件中的 <style> 标签内的样式{files: ["**/*.{vue,html}"],customSyntax: "postcss-html",},],rules: {"function-url-quotes": "always", // URL 的引号 "always(必须加上引号)"|"never(没有引号)""string-quotes": "double", // 指定字符串使用单引号或双引号 "single(单引号)"|"double(双引号)""unit-case": "lower", // 指定单位的大小写 "lower(全小写)"|"upper(全大写)""color-hex-case": "lower", // 指定 16 进制颜色的大小写 "lower(全小写)"|"upper(全大写)""color-hex-length": "long", // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)""rule-empty-line-before": "never", // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行)""block-opening-brace-space-before": "always", // 要求在块的开大括号之前必须有一个空格或不能有空白符 "always(大括号前必须始终有一个空格)"|"never(左大括号之前绝不能有空格)"|"always-single-line(在单行块中的左大括号之前必须始终有一个空格)"|"never-single-line(在单行块中的左大括号之前绝不能有空格)"|"always-multi-line(在多行块中，左大括号之前必须始终有一个空格)"|"never-multi-line(多行块中的左大括号之前绝不能有空格)""font-family-no-missing-generic-family-keyword": null, // 禁止在字体族名称列表中缺少通用字体族关键字"scss/at-import-partial-extension": null, // 解决不能使用 @import 引入 scss 文件"property-no-unknown": null, // 禁止未知的属性"no-empty-source": null, // 禁止空源码"selector-class-pattern": null, // 强制选择器类名的格式"value-no-vendor-prefix": null, // 关闭 vendor-prefix (为了解决多行省略 -webkit-box)"no-descending-specificity": null, // 不允许较低特异性的选择器出现在覆盖较高特异性的选择器"value-keyword-case": null, // 解决在 scss 中使用 v-bind 大写单词报错"selector-pseudo-class-no-unknown": [true,{ignorePseudoClasses: ["global", "v-deep", "deep"],},],},ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts"],};

EditorConfig 配置

1、简介：

• EditorConfig 帮助开发人员在 不同的编辑器 和 IDE 之间定义和维护一致的编码样式。

2、安装 VsCode 插件（EditorConfig ）：

3、配置 EditorConfig（.editorconfig）：

# @see: http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8end_of_line = lf # 控制换行类型(lf | cr | crlf)insert_final_newline = true # 始终在文件末尾插入一个新行indent_style = space # 缩进风格（tab | space）indent_size = 2 # 缩进大小max_line_length = 130 # 最大行长度[*.md] # 表示仅对 md 文件适用以下规则max_line_length = off # 关闭最大行长度限制trim_trailing_whitespace = false # 关闭末尾空格修剪

Git 流程规范配置

1、husky（操作 git 钩子的工具）：

安装：

pnpm install husky -D

使用（为了添加.husky 文件夹）：

# 编辑 package.json > prepare 脚本并运行一次pnpm set-script prepare "husky install"pnpm prepare

2、 lint-staged（本地暂存代码检查工具）

安装：

pnpm install lint-staged --D

添加 ESlint Hook（在.husky 文件夹下添加 pre-commit 文件）：

作用：通过钩子函数，判断提交的代码是否符合规范，并使用 prettier 格式化代码

npx husky add .husky/pre-commit "npm run lint:lint-staged"

新增 lint-staged.config.cjs 文件：

module.exports = {  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],  "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"],  "package.json": ["prettier --write"],  "*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],  "*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],  "*.md": ["prettier --write"]};

3、commitlint（commit 信息校验工具，不符合则报错）

安装：

pnpm install @commitlint/cli @commitlint/config-conventional -D

配置命令（在.husky 文件夹下添加 commit-msg 文件）：

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

4、commitizen（基于 Node.js 的 git commit 命令行工具，生成标准化的 message）

// 安装 czg，如此一来可以快速使用 czg 命令进行启动。pnpm install czg -D

5、cz-git

指定提交文字规范，一款工程性更强，高度自定义，标准输出格式的 commitizen 适配器

pnpm install cz-git -D

配置 package.json：

"config": {  "commitizen": {    "path": "node_modules/cz-git"  }}

新建 commitlint.config.js 文件：

// @see: https://cz-git.qbenben.com/zh/guideconst fs = require("fs");const path = require("path");const scopes = fs.readdirSync(path.resolve(__dirname, "src"), { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name.replace(/s$/, ""));/** @type {import('cz-git').UserConfig} */module.exports = {ignores: [(commit) => commit.includes("init")],extends: ["@commitlint/config-conventional"],rules: {// @see: https://commitlint.js.org/#/reference-rules"body-leading-blank": [2, "always"],"footer-leading-blank": [1, "always"],"header-max-length": [2, "always", 108],"subject-empty": [2, "never"],"type-empty": [2, "never"],"subject-case": [0],"type-enum": [2,"always",["feat","fix","docs","style","refactor","perf","test","build","ci","chore","revert","wip","workflow","types","release",],],},prompt: {messages: {type: "Select the type of change that you're committing:",scope: "Denote the SCOPE of this change (optional):",customScope: "Denote the SCOPE of this change:",subject: "Write a SHORT, IMPERATIVE tense description of the change:\n",body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',breaking:'List any BREAKING CHANGES (optional). Use "|" to break new line:\n',footerPrefixsSelect:"Select the ISSUES type of changeList by this change (optional):",customFooterPrefixs: "Input ISSUES prefix:",footer: "List any ISSUES by this change. E.g.: #31, #34:\n",confirmCommit: "Are you sure you want to proceed with the commit above?",// 中文版// type: "选择你要提交的类型 :",// scope: "选择一个提交范围（可选）:",// customScope: "请输入自定义的提交范围 :",// subject: "填写简短精炼的变更描述 :\n",// body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',// breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',// footerPrefixsSelect: "选择关联issue前缀（可选）:",// customFooterPrefixs: "输入自定义issue前缀 :",// footer: "列举关联issue (可选) 例如: #31, #I3244 :\n",// confirmCommit: "是否提交或修改commit ?"},types: [{value: "feat",name: "feat:     🚀  A new feature",emoji: "🚀",},{value: "fix",name: "fix:      🧩  A bug fix",emoji: "🧩",},{value: "docs",name: "docs:     📚  Documentation only changes",emoji: "📚",},{value: "style",name: "style:    🎨  Changes that do not affect the meaning of the code",emoji: "🎨",},{value: "refactor",name: "refactor: ♻️   A code change that neither fixes a bug nor adds a feature",emoji: "♻️",},{value: "perf",name: "perf:     ⚡️  A code change that improves performance",emoji: "⚡️",},{value: "test",name: "test:     ✅  Adding missing tests or correcting existing tests",emoji: "✅",},{value: "build",name: "build:    📦️   Changes that affect the build system or external dependencies",emoji: "📦️",},{value: "ci",name: "ci:       🎡  Changes to our CI configuration files and scripts",emoji: "🎡",},{value: "chore",name: "chore:    🔨  Other changes that don't modify src or test files",emoji: "🔨",},{value: "revert",name: "revert:   ⏪️  Reverts a previous commit",emoji: "⏪️",},{value: "wip",name: "wip:      🕔  work in process",emoji: "🕔",},{value: "workflow",name: "workflow: 📋  workflow improvements",emoji: "📋",},{value: "type",name: "type:     🔰  type definition file changes",emoji: "🔰",},// 中文版// { value: "feat", name: "特性:   🚀  新增功能", emoji: "🚀" },// { value: "fix", name: "修复:   🧩  修复缺陷", emoji: "🧩" },// { value: "docs", name: "文档:   📚  文档变更", emoji: "📚" },// { value: "style", name: "格式:   🎨  代码格式（不影响功能，例如空格、分号等格式修正）", emoji: "🎨" },// { value: "refactor", name: "重构:   ♻️  代码重构（不包括 bug 修复、功能新增）", emoji: "♻️" },// { value: "perf", name: "性能:    ⚡️  性能优化", emoji: "⚡️" },// { value: "test", name: "测试:   ✅  添加疏漏测试或已有测试改动", emoji: "✅" },// { value: "build", name: "构建:   📦️  构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）", emoji: "📦️" },// { value: "ci", name: "集成:   🎡  修改 CI 配置、脚本", emoji: "🎡" },// { value: "chore", name: "回退:   ⏪️  回滚 commit", emoji: "⏪️" },// { value: "revert", name: "其他:   🔨  对构建过程或辅助工具和库的更改（不影响源文件、测试用例）", emoji: "🔨" },// { value: "wip", name: "开发:   🕔  正在开发中", emoji: "🕔" },// { value: "workflow", name: "工作流:   📋  工作流程改进", emoji: "📋" },// { value: "types", name: "类型:   🔰  类型定义文件修改", emoji: "🔰" }],useEmoji: true,scopes: [...scopes],customScopesAlign: "bottom",emptyScopesAlias: "empty",customScopesAlias: "custom",allowBreakingChanges: ["feat", "fix"],},};

配置 package.json 命令

{"scripts": {// 本地运行(dev环境)"dev": "vite",// 本地运行(dev环境)"serve": "vite",// 构建打包(dev环境)"build:dev": "vue-tsc && vite build --mode development",// 构建打包(test环境)"build:test": "vue-tsc && vite build --mode test",// 构建打包(pro环境)"build:pro": "vue-tsc && vite build --mode production",// 检查项目 ts 类型"type:check": "vue-tsc --noEmit --skipLibCheck",// 本地环境预览构建后的 dist"preview": "npm run build:dev && vite preview",// 执行 eslint 校验"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",// 执行 prettier 格式化"lint:prettier": "prettier --write \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",// 执行 stylelint 格式化"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",// 执行 lint-staged.config.js 文件下的命令"lint:lint-staged": "lint-staged",// 初始化 husky 配置"prepare": "husky install",// 自动更新版本"release": "standard-version",// 提交代码(可自定义配置执行命令)"commit": "git add -A && czg && git push"}}