不知道更新啥了，油猴`Tampermonkey`脚本丢了，这里记录下，避免丢失；

写页面的时候老是发现 ID 记不住 或者 字段忘了，就放了个右键，比 `F12` 快一点，虽然代码没多少，但是确实不多，

![](https://blog.shizhuoran.top/static/img/9d56269262350a700d14b84890e1c2f6.showids.gif)




```
// ==UserScript==
// @name         显示控件ID
// @namespace    http://tampermonkey.net/
// @version      2023-11-23
// @description  try to take over the world!
// @author       没想好
// @match        http://192.168.123.238/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=123.238
// @grant        none
// @require      https://code.jquery.com/jquery-3.7.1.min.js
// ==/UserScript==
this.$ = this.jQuery = jQuery.noConflict(true);

(function() {
    'use strict';
    //data-qtip="这是提示信息"

    $('.f-panel.f-widget-content').each((i,item)=>{
        let el = $(item);
        el.find('.f-panel-title-text').attr('data-qtip',`${el.attr('id')}<br/>`);
    })
    $('.f-field').each((i,item)=>{
        let el = $(item);
        el.attr('data-qtip',`${el.attr('id')}<br/>${el.attr('data')}`);
    })
    $('.f-btn').each((i,item)=>{
        let el = $(item);
        el.attr('data-qtip',`${el.attr('id')}<br/>`);
    })
    $('.f-grid-colheader.f-grid-renderfield').each((i,item)=>{
        let el = $(item);
        el.attr('data-qtip',`${el.attr('data-columnid')}<br/>`);
    })
    $('.f-grid-row').each((i,item)=>{
        let el = $(item);
        el.attr('data-qtip',`${el.attr('data-rowid')}<br/>`);
    })
})();
```

![图片.png](/static/img/b563d67af2ab329a81c75ec8e34fed77.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

![图片.png](/static/img/6f71310d9b2c8f2139922a0ef2775abb.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

使用油猴脚本显示页面ID

公司服务器部署的系统比较多，端口也多，IP记不住，端口号也记不住；之前做了个导航页面，但是还是想着如果能用域名管理就好了，又做了个DNS代理，在服务器上，但是要使用的话还要配置客户端DNS指向，后来发现原来防火墙上就有这个服务，现在记录下；



![jiagou-copy.drawio.png](/static/img/bcdba603a85bfca5320a2bd086e80583.jiagou-copy.drawio.webp)


# 1. DNS代理

公司的网络首先要经过防火墙，防火墙上有DNS代理服务，就不用单独配置代理了，

![图片.png](/static/img/96f4e78d9504879c36dc9e0ed5d12e6f.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

这里的本地域名应使用没有注册过的域名，如果已经存在的，可能不会代理到，我没细测；

代理策略指向一个服务器 比如 192.168.2.23


![图片.png](/static/img/fd84d4af874c235971b70ad8edacbc04.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

虽然指向了服务器，下一步呢，比如我访问二级域名 `nginx.hd.top` 怎么指向 实际的服务  `192.168.123.43:8081` 呢，很简单 使用 `Nginx` 就可以了，所以要在 `192.168.2.23` 部署`Nginx`，`Nginx`代理到实际的应用；

# 2. nginx-proxy-manager

直接使用 `Dockge` 部署 `nginx-proxy-manager` 中文版...

``` compose.yaml
version: "3.8"
services:
  nginx-proxy-manager:
    restart: unless-stopped
    image: chishin/nginx-proxy-manager-zh:latest
    ports:
      - 80:80
      - 81:81
      - 443:443
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt
networks: {}

```


![图片.png](/static/img/fac4a837d9b005138d86750a5aa9c927.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

直接指向实际的IP和端口就行了

![图片.png](/static/img/ef106368408cf631e403f036292caaae.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

---
这样， `二级域名`会通过`DNS`解析到 `2.23` 然后 通过 `2.23` 的`Nginx`转到实际的服务

公司局域网本地域名

![Uptime Kuma.png](/static/img/d55aef3f3cf53472f2e6796d42725401.Uptime%20Kuma.webp)

大家都知道我本来就是大聪明🤓，小机灵鬼😳，然后偶尔~嘿，我就要去 [chatanywhere](https://api.chatanywhere.tech/#/) 看看API余额还有多少，这也没有个接口时不时的就要查一下，如果能提醒就好了，我就想：我怎么这么帅呢😎

![图片.png](/static/img/0fbc4c52ad7dd71ee873ae594331668b.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)



# 1. 截取提交

首先使用火狐浏览器的开发者工具把提交数据复制下来


![图片.png](/static/img/06e8b4870de4febb5d24949221bf3cc5.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

得到如下字符串

```
curl "https://api.chatanywhere.tech/v1/query/balance" --compressed -X POST -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:127.0) Gecko/20100101 Firefox/127.0" -H "Accept: application/json, text/plain, */*" -H "Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2" -H "Accept-Encoding: gzip, deflate, br, zstd" -H "Access-Control-Allow-Headers: Authorization,Origin, X-Requested-With, Content-Type, Accept" -H "Access-Control-Allow-Methods: GET,POST" -H "Access-Control-Allow-Origin: *" -H "Authorization: 不告诉你" -H "Origin: https://api.chatanywhere.tech" -H "Connection: keep-alive" -H "Referer: https://api.chatanywhere.tech/" -H "Sec-Fetch-Dest: empty" -H "Sec-Fetch-Mode: cors" -H "Sec-Fetch-Site: same-origin" -H "Priority: u=1" -H "Pragma: no-cache" -H "Cache-Control: no-cache" -H "Content-Length: 0"
```


# 2. 测试

然后使用 APIFOX 测试一下

![图片.png](/static/img/d4e45b575dab848dd47c36817c944c2d.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

就得到结果了

![图片.png](/static/img/92eba650892480c6418ba1dd52320ba0.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

# 3. 监听

服务器的 `Uptime Kuma` 也是我安装的，可以监听服务，也可以监听json，非常方便，把参数填进去


![QNVE0NFQ$M0KMMVX97JI1$6.jpg](/static/img/fcddc388618694b74889fab490782de6.QNVE0NFQ$M0KMMVX97JI1$6.webp)

![](https://blog.shizhuoran.top/static/img/9d8b07af28e452e8118bf506c5404c2d.20240618101852.webp)

这里使用了 [JSONata](https://jsonata.org/)，挺有意思，这样`Uptime Kuma` 就可以监听并通知到钉钉了，裆余额小于10时通知我的丁丁👏

---

所有这里只要有`API`接口返回个`json` ，就可以使用  `Uptime Kuma` 监听通知并通知，是一个新的运维思路

使用Uptime Kuma监听接口

![LibGit2Sharp.png](/static/img/9581db7a896d63fd70fef2a7b5caaedd.LibGit2Sharp.webp)

这不是要写年中报告📊么，昨天晚上哄小孩睡觉😴想到可以分析下项目在Git上的提交文件次数📁，分下前台和后天的修改，为系统的升级和后续设计提供数据支撑📈；看似无聊其实没什么用；




`代码肯定不会自己写的`

:::note{title="gtp-4o"}
## 我:
我的.net项目是 git 管理的，我现在想分析下建项以来所有的改动，哪些是前端修改，哪些是后端修改，我应该怎么做

## ChatGPT:
要分析你的 .NET 项目自创建以来的所有改动，并区分哪些是前端修改，哪些是后端修改，你可以遵循以下步骤：

1. 获取所有的提交记录：

你可以使用 Git 命令来获取所有的提交记录。以下是一个基本命令来获取所有提交的列表：
```
git log --pretty=format:"%H"
```

这个命令会输出所有提交的哈希值。

2. 分析每个提交的改动：

对于每个提交，你需要分析修改了哪些文件。你可以使用以下命令来获取某个提交的文件改动列表：
```
git diff-tree --no-commit-id --name-only -r <commit-hash>
```
这个命令会列出指定提交中所有被修改的文件。

3. 区分前端和后端文件：

根据文件路径和文件类型，你可以区分哪些文件是前端文件，哪些是后端文件。通常，前端文件包括 HTML、CSS、JavaScript、TypeScript 文件等，而后端文件包括 C# 文件（.cs）、配置文件等。

例如，假设你的项目结构如下：
```
/frontend
    /src
        /components
            App.js
            ...
/backend
    /Controllers
        HomeController.cs
        ...
```
你可以根据文件路径来判断。
编写脚本自动化分析：
你可以编写一个脚本来自动化上述步骤。

5. 进一步分析：

你可以根据需要进一步分析每个提交的具体改动内容，或者生成更详细的报告。

希望这些步骤能够帮助你分析项目中的改动情况。如果你有任何其他问题，欢迎随时提问！

## 我:
写个.net控制台程序吧

## ChatGPT:
好的，我们可以使用 .NET 来编写一个控制台程序，来分析 Git 提交记录并区分前端和后端的修改。你可以使用 LibGit2Sharp 这个库来操作 Git 仓库。

首先，你需要在你的项目中安装 LibGit2Sharp 包。你可以使用 NuGet 包管理器来安装它：
```
dotnet add package LibGit2Sharp
```

然后，你可以编写以下 C# 控制台程序：
```
using System;
using System.Collections.Generic;
using System.Linq;
using LibGit2Sharp;

namespace GitChangeAnalyzer
{
    class Program
    {
        static void Main(string[] args)
        {
            // 仓库路径
            string repoPath = @"path\to\your\repository";

            using (var repo = new Repository(repoPath))
            {
                // 获取所有提交
                var commits = repo.Commits;

                int frontendChanges = 0;
                int backendChanges = 0;

                foreach (var commit in commits)
                {
                    var changes = repo.Diff.Compare<TreeChanges>(commit.Parents.First().Tree, commit.Tree);

                    bool hasFrontendChange = false;
                    bool hasBackendChange = false;

                    foreach (var change in changes)
                    {
                        if (IsFrontendFile(change.Path))
                        {
                            hasFrontendChange = true;
                        }
                        else if (IsBackendFile(change.Path))
                        {
                            hasBackendChange = true;
                        }
                    }

                    if (hasFrontendChange)
                    {
                        frontendChanges++;
                    }

                    if (hasBackendChange)
                    {
                        backendChanges++;
                    }
                }

                Console.WriteLine($"Total frontend changes: {frontendChanges}");
                Console.WriteLine($"Total backend changes: {backendChanges}");
            }
        }

        static bool IsFrontendFile(string filePath)
        {
            // 根据文件路径和扩展名判断是否是前端文件
            return filePath.StartsWith("frontend/") ||
                   filePath.EndsWith(".html") ||
                   filePath.EndsWith(".css") ||
                   filePath.EndsWith(".js") ||
                   filePath.EndsWith(".ts");
        }

        static bool IsBackendFile(string filePath)
        {
            // 根据文件路径和扩展名判断是否是后端文件
            return filePath.StartsWith("backend/") ||
                   filePath.EndsWith(".cs") ||
                   filePath.EndsWith(".config") ||
                   filePath.EndsWith(".xml");
        }
    }
}
```
请注意以下几点：
1. 设置仓库路径：你需要将 repoPath 设置为你的 Git 仓库的路径。
2. 判断文件类型：IsFrontendFile 和 IsBackendFile 方法用于判断文件是前端文件还是后端文件。你可以根据你的项目结构和文件类型进行调整。

这个程序会遍历所有的提交，分析每个提交中的文件改动，并统计前端和后端的改动次数。运行程序后，你会在控制台中看到前端和后端的改动次数。

如果你有任何问题或需要进一步的帮助，请告诉我！
:::

这里唯一的坑是提示 `LibGit2Sharp.LibGit2SharpException:“repository path 'E:/华电众信/HD_MES/' is not owned by current user”`

在[这里](https://blog.csdn.net/witton/article/details/129734545?spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-129734545-blog-94206450.235%5Ev43%5Epc_blog_bottom_relevance_base4&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-129734545-blog-94206450.235%5Ev43%5Epc_blog_bottom_relevance_base4&utm_relevant_index=21)解决



:::note{title="gpt-4o"}
## 我:
我已经得到结果 
前端文件修改总数: 9848
后端文件修改总数: 12609
其他文件修改总数: 47917
总提交数: 1235
总修改数: 145399


## ChatGPT:
好的，我们可以根据你提供的最新数据进行分析：

- 前端文件修改总数: 9848
- 后端文件修改总数: 12609
- 其他文件修改总数: 47917
- 总提交数: 1235
- 总修改数: 145399

我们可以从这些数据中得出以下信息和结论：

### 1. 修改类型分布
- 前端文件修改占总修改数的比例：
  \[
  \frac{9848}{145399} \approx 6.77\%
  \]
- 后端文件修改占总修改数的比例：
  \[
  \frac{12609}{145399} \approx 8.67\%
  \]
- 其他文件修改占总修改数的比例：
  \[
  \frac{47917}{145399} \approx 32.95\%
  \]

### 2. 每次提交的平均修改数
- 平均每次提交的修改数：
  \[
  \frac{145399}{1235} \approx 117.72
  \]

### 3. 前端和后端修改的相对比例
- 前端文件修改与后端文件修改的比例：
  \[
  \frac{9848}{12609} \approx 0.78
  \]

### 4. 前端和后端修改的绝对数量
- 前端文件修改总数：9848
- 后端文件修改总数：12609

### 5. 其他文件的修改情况
- 其他文件的修改总数：47917

### 结论
1. **修改类型分布**：
   - 前端文件修改占总修改数的6.77%，后端文件修改占总修改数的8.67%，其他文件修改占总修改数的32.95%。
   - 其他文件的修改次数虽然仍然占据较大比例，但相比之前的数据，比例有所下降。

2. **每次提交的平均修改数**：
   - 每次提交平均有约118个文件被修改，这与之前的数据一致。

3. **前端和后端修改的相对比例**：
   - 前端文件修改与后端文件修改的比例为0.78，这表明后端文件的修改次数仍然多于前端文件，但比例略低于之前的数据。

4. **前端和后端修改的绝对数量**：
   - 后端文件的修改总数比前端文件多2761次。

5. **其他文件的修改情况**：
   - 其他文件的修改次数显著减少，这可能表明项目中配置文件、文档或其他非代码文件的变更次数减少。

### 总结
1. **修改类型的分布有所变化**，前端和后端文件的修改比例相对增加，其他文件的修改比例减少。
2. **每次提交的平均修改数保持不变**，每次提交平均修改118个文件。
3. **后端文件的修改次数仍然多于前端文件**，但比例有所下降，表明前后端开发的工作量仍然比较均衡。
4. **其他文件的修改次数显著减少**，可能意味着项目的配置、文档或其他非代码文件的变更减少。

如果你有任何特定的方面需要进一步分析或有更多数据提供，我可以帮助你进行更详细的分析。
:::

使用LibGit2Sharp分析项目提交

![MermaidHelp2.png](/static/img/c747025b20c3baaf42871cc9e04ce125.MermaidHelp2.webp)

没想到还能出第二期，这几天增加了功能，还是有坑，这里说下

# 1. FineUI11

既然是FineUI11用例项目，`FineUI11`的改造是永久话题，

## 1.1 `f:Tool`图标在右边
对于`f:ContentPanel`我使用了`<Tools>`放按钮，因为`f:Toolbar`会错位，`Tools`里的控件`f:Tool`是图标和文字，但是这个没有图片再右边的属性`IconAlign` ，`f:Button`是有的；我想要这样的

![图片.png](/static/img/862a35c67352e0eb888171ed0fe278c2.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)



好吧，只能改，首先新建 `ToolEx`
``` c#
 [HtmlTargetElement("f:Tool")]
 [RestrictChildren("Menu", new string[] { "Listeners", "Attributes" })]
 public class ToolEx : ToolTagHelperEx
 {
 }
```

然后告诉前台 Tool 被接管了 
```  _ViewImports.cshtml
@removeTagHelper FineUICoreEx.ToolTagHelperEx, FineUICoreEx
```

最后增加属性，核心就是`i`和`span`换个位置；

```
[HtmlTargetElement("f:Tool")]
[RestrictChildren("Menu", new string[] { "Listeners", "Attributes" })]
public class ToolEx : ToolTagHelperEx
{
    /// <summary>
    /// 图标位置， 只支持右侧 或 左侧
    /// </summary>
    [HtmlAttributeName("IconAlign")]
    public IconAlign IconAlign { get; set; }

    protected override void PreProcess(TagHelperContext context, TagHelperOutput output)
    {
        StringBuilder sb = new();
        if (IconAlign == IconAlign.Right)
        {
            sb.Append($"$('#{this.Source.ID} i').before($('#{this.Source.ID} span'));");
        }
        PageContext.RegisterStartupScript(sb.ToString());
        base.PreProcess(context, output);
    }
}
```

## 1.2 分割线
`Tools`里 `f:ToolbarSeparator` 也没有，干脆造一个，这里的思路是先 `new Tool()`，然后直接绘制一个`ToolbarSeparator` 替换；

首先要告诉 `Tools` 可以有 `f:ToolbarSeparator`，和上面的思路一样 

``` c#
[HtmlTargetElement("Tools")]
[RestrictChildren("f:Tool", new string[] { "f:ToolbarSeparator" })]
public class ToolsEx : ToolsTagHelperEx
{
}
```

然后修改 `ToolbarSeparatorTagHelperEx` 的默认绘制，如果是包在 `<Tools>` 里的，就改变行为
``` c#
public class ToolbarSeparatorEx : ITagHelperEx<ToolbarSeparatorTagHelperEx>
{
    public void BeforProcess(ToolbarSeparatorTagHelperEx tagHelper, TagHelperContext context, TagHelperOutput output, TagHelperExFun method)
    {
        var currentPath = method.GetCurrentPath();
        var reverse = currentPath.AsEnumerable().Reverse();
        //判断是不是在 ToolsEx 里
        if (currentPath.Any(m => m.GetType() == typeof(ToolsEx)))
        {
            var nextItem = reverse.SkipWhile(m => m.GetType() == typeof(ToolsEx)).First();
            var item = nextItem as PanelBaseTagHelper;
            var newtool = new Tool();
            item.Source.Tools.Add(newtool);
            StringBuilder sb = new();
            sb.Append($"$('#{newtool.ID}').replaceWith('<div class=\"f-toolbar-separator f-toolbar-item f-cmp f-widget\" style=\"display: initial;\"></div>');F.ui.{tagHelper.ID}.remove();$('#{tagHelper.Source.WrapperID}').remove();");
            PageContext.RegisterStartupScript(sb.ToString());
        }
    }
}
```

然后就可以了
 
![图片.png](/static/img/647b7f4a95ab63682d47598cc982ea68.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

# 2. mermaid 
## 2.1 拦截语法错误

`mermaid.js` 提供了语法验证和错误的事件

``` js
//验证 注意是异步方法
F.ui.rightPanel.parse = await mermaid.parse(code);
```

``` js
//注册语法错误
mermaid.setParseErrorHandler((e) => {
    //错误信息
    console.log('e>', e);
})
```

## 2.2 导出放大
`mermaid.ink` 的放大只有 1-3倍，可以通过调节`width`来直接放大，因为有的图像确实很模糊

``` js
let width = $('#mermaidSvg').width();
let scale = F.ui.btnscale.scale || 2;
width = width * scale;
const dataURL = `https://mermaid.ink/img/pako:${F.ui.codePanel.mermaidPako}?type=${type}&width=${width}`;
```

---
至此 该项目告一段落


![](/static/img/508af01e03614acbe3667ba38cdd4698.gongneng2.gif)

:::info{title="相关连接"}
[MermaidHelp开发日志（一）](https://blog.shizhuoran.top/post/50)

[MermaidHelp开发日志（二）](https://blog.shizhuoran.top/post/51)

:::

1. FineUI11

1.1 f:Tool图标在右边

1.1 `f:Tool`图标在右边