这不是到年底了么，除了工作总结，生活也要总结下，尤其是线上的生活




以下内容部分先后

# 1. 个人服务折腾

## 1.1 域名
申请了一个域名，shizhuoran.top 我闺女名字，腾讯云申请的，服务器是阿里云；

## 1.2 博客搬家
博客从Gitea搬家到了云服务Docker，`VanBlog`;

## 1.3 个人RSS
服务端`FreshRSS`，客户端 `Fluent Reader` `FeedMe`，添加了一些感兴趣的内容，可以集合到一快看了；

## 1.4 ZeroTier
部署了异地组网，部署了自己的moon服务，手机，平板，个人电脑，公司电脑，4个云服务器都连一块了；EasyTier也不赖，正在测试，可以切换；

## 1.5 Docker
使用Docker安装各种工具，`Nginx Proxy Manager` `Uptime Kuma` `Dockge` ...

# 2. 大模型元年

## 2.1 本地ollama
我发现我的笔记本还可以跑一些大模型，就试了试；7B-14B 都差不多能跑，跑了个遍，发现小模型是有壁垒的；

## 2.2 FastGPT & Dify || RAG & GraphRag
又学习测试了两个AI工作流，体验不错，写了一堆的工作流，目前没有太大的应用，作为积累；
初步的RAG探索，因为不会Python，没有精进；

## 2.3 OneAPI
大模型转发工具，可以连接本地模型，管理各平台模型；

## 2.4 微调
跟着跑了一次微调，发现训练数据会成为企业的核心资产；大胆预测针对训练数据和垂直领域的微调模型可能在将来可能会成为市场，像通用模型一样；

# 3. 开发

## 3.1 FineUI11的学习
没用上，就看了看，开发点公共库啥的，目前搁置状态；

## 3.2 FineUI扩展
卖不出去

## 3.3 MermaidHelp
自研开源生成流程图的AI项目，很有用，随时都会用；

## 3.4 GitReport
自研开源Git周报AI生成，研究了GIT的接口，拿一些数据，给AI总结，也一直在用，提交写的好周报次不了；

## 3.5 FineUIDesignerVSIX
自研FineUI的VS扩展工具；简化开发，省了不少事；

## 3.6 油猴脚本
使用油猴脚本（就是JS）开发了几个插件，这回浏览器也是私有的了；

# 4. 读书 & 影视 & 娱乐

《认知红利》还没读完，听了《国富论》《乔布斯传》《朱元璋演绎》，参加了2个AI论坛，1个新质生产的讲座，2个生产制造论坛，去了3次图书馆；

待读书单：《机·智 从数字化车间走向智能制造》《AI赋能 企业智能化实践》《智能制造之路》《对话时代》

影视：《毒液》《变形金刚：起源》《X战警97》《死侍与金刚狼》《辐射》《飞驰人生2》《洛基第二季》《超异能族》《哈莉奎因》《珍的不一样第二季》

游戏：《恶月十三》《棕色尘埃2》

B站一期不拉：波士顿圆脸，小约翰可汗，顺仙，燕三嘤嘤嘤，王全行，老6使命召唤，AIGCLINK，温大愚，小熊flippy，科学透镜，啊粥粥啊粥，小Lin说，... 太多了，反正配米饭很香

2024年终总结

本来买的vps闲着，然后部署了个H5的游戏，又想着ip访问不方便，就想打包APP。网上搜了一下，在线打包好多都花钱，本地的，装`HBuilderX`或者`Android Studio`，后来AI告诉我 `Cordova` 可以，是`Node.js`的一个工具`Node.js`我本地倒是有，安装也不麻烦，使用倒是还行，但是还要安装一堆的环境。我手上有`docker`，原来已经有人打包好`Cordova安卓环境`了，直接用就行，`docker`还能当工具用，我也是第一次知道这么玩。


![cordovaapparchitecture-20230712.svg](/static/img/2e2060deec538c91e6373dcbe762b213.cordovaapparchitecture-20230712.svg)



# 1. 环境
在`dokerhub` 和 `github` 上找了一圈，试验了几个环境，内部的版本比较老，导致各种失败，终于找到了一个能用的:
* [GitHub-cordova-android-builder](https://github.com/hamdifourati/cordova-android-builder)
* [docker](https://hub.docker.com/r/hamdifourati/cordova-android-builder/)

命令如下：
```
docker run -it -v "$(pwd)":/opt/src --rm hamdifourati/cordova-android-builder bash
```
> * --rm 就是使用后删除，容器退出后就删除实例了
> * $(pwd) 是取当前目录，这里会创建`cordova`的工作目录，指定目录也行，把引号去掉，如果是静态的文件包含index.html的就很方便
> * 最后的 `bash` 是进入该容器实例控制台的意思，就是所有的操作都在 `cordova` 容器内部

# 2. 补丁
进入到容器后，会到默认的`/opt/src` 目录，这里就印射的本地目录，但是还得打补丁才能用（注意这里都是容器内部），一遍一遍试才总结出来的:

```
#sdkmanager包升级
sdkmanager "platforms;android-34"
sdkmanager "build-tools;34.0.0"

#java环境
#https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html
wget https://download.oracle.com/java/17/archive/jdk-17.0.12_linux-x64_bin.deb
dpkg -i jdk-17.0.12_linux-x64_bin.deb
export JAVA_HOME=/usr/lib/jvm/jdk-17.0.12-oracle-x64
export PATH=$JAVA_HOME/bin:$PATH

#vim 酌情安装
#apt-get install -y vim

```

# 3. 打包
到这就可以正式用了，
* 基本命令：

```
#创建项目
cordova create MyApp
cd MyApp

#部署环境
cordova platform add android

#构建
cordova build android
```
最后会提示成功，第一次会很慢，后面就好了，去印射的路径`$(pwd)`拿就行了

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

如果不用了，使用`exit`退出

* 允许HTTP（默认https）
```
vim platforms/android/app/src/main/AndroidManifest.xml
```

```
#android:usesCleartextTraffic="true"
<application android:hardwareAccelerated="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:usesCleartextTraffic="true">
```

* 配置

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

```
vim config.xml
```
```
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    
    <name>XYAPP</name>
    <description>Sample Apache Cordova App</description>
    <author email="dev@cordova.apache.org" href="https://cordova.apache.org">
        Meixianghao
    </author>
    
    <content src="http://XXX:8889/" />
     
    <preference name="Orientation" value="portrait" />
    
    <allow-navigation href="http://*/*" /> 
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
</widget>

```

后续还要配置图标，启动页面，等，目前我用不上

# 4. 新的构建

由于每次进入都要打补丁，我本地又构建了一个，没上传，这里是 `Dockerfile`

``` Dockerfile
#https://hub.docker.com/_/openjdk
ARG OPENJDK_VERSION=17
FROM eclipse-temurin:${OPENJDK_VERSION}

# Reference default value
ARG OPENJDK_VERSION
#https://github.com/nodesource/distributions/blob/master/README.md
ARG NODEJS_VERSION=20
#https://gradle.org/releases/
ARG GRADLE_VERSION=8.7
#https://www.npmjs.com/package/cordova?activeTab=versions
ARG CORDOVA_VERSION=12.0.0
#https://developer.android.com/studio#command-tools
ARG ANDROID_CMDTOOLS_VERSION=11076708


LABEL maintainer="Hamdi Fourati <contact@hamdifourati.info>"

WORKDIR /opt/src

ENV JAVA_HOME /opt/java/openjdk/
ENV ANDROID_SDK_ROOT /usr/local/android-sdk-linux
ENV ANDROID_HOME $ANDROID_SDK_ROOT
ENV GRADLE_USER_HOME /opt/gradle
ENV PATH $PATH:$ANDROID_SDK_ROOT/platform-tools:$ANDROID_SDK_ROOT/cmdline-tools/latest/bin:$GRADLE_USER_HOME/bin

# Tools
RUN apt update && apt -qq install -y git

# NodeJS
RUN echo https://deb.nodesource.com/setup_${NODEJS_VERSION}.x
RUN curl -sL https://deb.nodesource.com/setup_${NODEJS_VERSION}.x | bash -
RUN apt -qq install -y nodejs

# Cordova
RUN npm i -g cordova@${CORDOVA_VERSION}

# Gradle
RUN apt -qq install -y unzip
RUN curl -so /tmp/gradle-${GRADLE_VERSION}-bin.zip https://downloads.gradle.org/distributions/gradle-${GRADLE_VERSION}-bin.zip && \
    unzip -qd /opt /tmp/gradle-${GRADLE_VERSION}-bin.zip && \
    ln -s /opt/gradle-${GRADLE_VERSION} /opt/gradle

# Android
RUN curl -so /tmp/commandlinetools-linux-${ANDROID_CMDTOOLS_VERSION}_latest.zip https://dl.google.com/android/repository/commandlinetools-linux-${ANDROID_CMDTOOLS_VERSION}_latest.zip && \
    mkdir -p $ANDROID_SDK_ROOT/cmdline-tools/ && \
    unzip -qd $ANDROID_SDK_ROOT/cmdline-tools/ /tmp/commandlinetools-linux-${ANDROID_CMDTOOLS_VERSION}_latest.zip && \
    mv $ANDROID_SDK_ROOT/cmdline-tools/cmdline-tools $ANDROID_SDK_ROOT/cmdline-tools/latest

# 打补丁
RUN sdkmanager "platforms;android-34"
RUN sdkmanager "build-tools;34.0.0"
RUN wget https://download.oracle.com/java/17/archive/jdk-17.0.12_linux-x64_bin.deb
RUN dpkg -i jdk-17.0.12_linux-x64_bin.deb
RUN export JAVA_HOME=/usr/lib/jvm/jdk-17.0.12-oracle-x64
RUN export PATH=$JAVA_HOME/bin:$PATH
RUN apt-get install -y vim

# Update and accept licences
COPY android.packages android.packages
RUN ( sleep 5 && while [ 1 ]; do sleep 1; echo y; done ) | sdkmanager --package_file=android.packages

```
android.packages
``` 
platforms;android-34
build-tools;34.0.0
```

使用Cordova将网址/网页打包APP

![](/static/img/8fc72ebaf1cbaa928102c6b9dc36a810.ServerStatus.webp)
公司各种环境比较多，VPS 开的也多，之前的`Uptime Kuma` 能监听服务，非入侵监听不到CPU，内存什么的，所以还是要探针，简单些主流的有 `ServerStatus`和`哪吒探针`，随便挑了一个 `ServerStatus`，这里记录下🕳️坑


![104741.jpg](/static/img/816955e639ed33f7e5c3a8b9e591db63.104741.webp)



# 1. 服务端docker-compose

百度了一下 docker📦镜像 有两个项目
 * [Github-cppla](https://github.com/cppla/ServerStatus)
 * [Github-stillechan](https://github.com/stilleshan/ServerStatus)
 
我都试了，最后用的 `cppla`这个，这个返回的信息丰富📚一些，其实也用不上

```
version: "3.8"
services:
  serverstatus:
    restart: unless-stopped
    image: cppla/serverstatus
    ports:
      - 8014:80
      - 8015:35601
    volumes:
      - /home/serverstatus/server/config.json:/ServerStatus/server/config.json
      - /home/serverstatus/html:/usr/share/nginx/html
networks: {}
```


:::warning{title="注意"}

这里介绍和教程没说清楚🤷‍♂️，这里的印射，在docker启动前，是需要先有这两个目录和文件的，所以让先下源码，我是下载后传到服务器的，我开始以为会自动创建目录和文件📄，所以报错了


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

然后服务端配置 `config.json`，要监听几个服务，集合里就放几个
```
{
    "servers": [{
        "username": "2.16",
        "password": "_admin",
        "name": "MES正式环境",
        "type": "VPS",
        "host": "192.168.2.16",
        "location": "cn",
        "disabled": false,
        "region": "HK"
    },{
        "username": "2.17",
        "password": "_admin",
        "name": "MES备份环境",
        "type": "VPS",
        "host": "192.168.2.17",
        "location": "cn",
        "disabled": false,
        "region": "HK"
    }]
}
```

`username` `password` 就是客户端要输入的，剩下的参数都是影响客户端显示的，其实没啥用

这个配置我传到本地的Git服务上了，然后在服务器上拉下来，总用vim不好编辑

# 2. 客户端-探针

客户端其实就是收集数据抛到🎯指定的服务

客户端比较折磨，按理说有自动的脚本，但是各种问题，有的服务器好使有的不好使，死活连不上服务端

后来还是第三个 `BotoX` 比较稳定，但是会少上传一些参数，好在我也用不上

* cppla
```
wget -N --no-check-certificate https://raw.githubusercontent.com/cppla/ServerStatus/refs/heads/master/status.sh && chmod +x status.sh && bash status.sh c
```
---

* stilleshan
```
wget -N --no-check-certificate https://raw.githubusercontent.com/stilleshan/ServerStatus/master/status.sh && chmod +x status.sh && bash status.sh c
```
---
* BotoX
```
wget -N --no-check-certificate https://raw.github.com/BotoX/ServerStatus/master/other/client-setup.sh && chmod +x client-setup.sh && bash client-setup.sh c
```

```
Which client implementation do you want to use? [python, python-psutil, bash]
> python 或 bash 随缘 比一定哪个可以
What is your status servers address (DNS or IP)?
> IP
What is your status servers port? [35601,...]
> 8015 看docker
Specify the username.
> 就是 username
Specify a password for the user.
> 就是 password
Is this correct? [yes/no]
> yes 后面还有几个yes不知道啥意思
which user should the script be run? [http, ...]
> 最后会出现 哪个用户执行脚本，输入 root 用户不存在会报错
```
---

:::warning{title="注意"}

会卡在 `raw.githubusercontent.com` 没有响应，有时候行，有时候不行
> 正在连接 raw.githubusercontent.com (raw.githubusercontent.com)|185.199.109.133|:443... 已连接。
无法建立 SSL 连接。

方法是 `vim /etc/hosts`，然后把IP写进去，保存就行了
```
185.199.108.133 raw.githubusercontent.com
185.199.109.133 raw.githubusercontent.com
185.199.110.133 raw.githubusercontent.com
185.199.111.133 raw.githubusercontent.com
```
:::


:::warning{title="注意"}
有一台服务器BotoX会报没有nc，安装下就行了
```
yum install nc
```
:::

# 3. 终端WEB

终端页面💻还是有区别的，

cppla
![68747470733a2f2f646c2e6370702e6c612f417263686976652f7365727665727374617475735f6c617975692e706e67.png](/static/img/85ba78f4fb9f2615d4d0ca344180eebb.68747470733a2f2f646c2e6370702e6c612f417263686976652f7365727665727374617475735f6c617975692e706e67.webp)

stilleshan
![screenshot.jpg](/static/img/bfe81397f469bbc5e0fc66fb2eb592f6.screenshot.webp)

这个终端就是读取 `/home/serverstatus/html/json/stats.json` （docker的印射路径），拼html显示，就是个静态的页面，docker里放了个`nginx`露出👀就完事了，然后我也不用那么多信息，类型，地址，流量，公司内部也不用监控，所以就手撸一个（让GPT），

index.html
```
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <title>服务器监控</title>
</head>
<body>
    <div class="container">
        <header>
            <h1>服务器监控</h1>
            <span id="update-time"></span>
        </header>
        <div id="cards-container" class="cards-container"></div>
    </div>
    <script src="js/index.js"></script>
</body>
</html>

```

index.js
```
function bytesToSize(bytes, precision, si = false) {
    const units = si ? ['B', 'KB', 'MB', 'GB', 'TB'] : ['B', 'KiB', 'MiB', 'GiB', 'TiB'];
    if (bytes === 0) return '0 B';
    const k = si ? 1000 : 1024;
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(precision)) + ' ' + units[i];
}

function updateCards(data) {
    const container = document.getElementById('cards-container');

    data.servers.forEach(server => {
        const cardId = server.name.replace(/\s+/g, '-');
        let card = document.getElementById(cardId);

        // 如果卡片不存在，则创建新的卡片
        if (!card) {
            card = document.createElement('div');
            card.id = cardId;
            card.className = 'card';
            container.appendChild(card);

            // 使用表格布局
            card.innerHTML = `
                <div class="card-header">
                    <img src="image/os/BareMetalServer.svg" alt="${server.location}" width="40"/>
                    <h2 class="card-title ${server.online4 ? 'online' : 'offline'}">${server.name}</h2>
                    <span class="online-indicator ${server.online4 ? 'online' : 'offline'}"></span>
                </div>
                <table>
                    <tbody>
                        <tr>
                            <td>Host:</td>
                            <td>${server.host}</td>
                        </tr>
                        <tr>
                            <td>CPU:</td>
                            <td>
                                <div class="progress-bar">
                                    <div class="progress" style="width: ${server.cpu}%;"><span class="progress-text">${server.cpu}%</span></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>内存:</td>
                            <td>
                                <div class="progress-bar">
                                    <div class="progress" style="width: ${(server.memory_used / server.memory_total) * 100}%;">
                                        <span class="progress-text">${bytesToSize(server.memory_used * 1024, 1)} / ${bytesToSize(server.memory_total * 1024, 1)}</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>硬盘:</td>
                            <td>
                                <div class="progress-bar">
                                    <div class="progress" style="width: ${(server.hdd_used / server.hdd_total) * 100}%;">
                                        <span class="progress-text">${bytesToSize(server.hdd_used * 1024 * 1024, 2)} / ${bytesToSize(server.hdd_total * 1024 * 1024, 2)}</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            `;
        } else {
           // 更新已存在卡片的动态数据
           const onlineIndicator = card.querySelector('.online-indicator');
           onlineIndicator.className = `online-indicator ${server.online4 ? 'online' : 'offline'}`;
           const cardTitle = card.querySelector('.card-title');
           cardTitle.className = `card-title ${server.online4 ? 'online' : 'offline'}`;

           const cpuProgress = card.querySelector('.progress-bar .progress');
           cpuProgress.style.width = `${server.cpu}%`;
           setProgressColor(cpuProgress, server.cpu);
           cpuProgress.querySelector('.progress-text').innerText = `${server.cpu}%`;

           const memoryProgress = card.querySelectorAll('.progress-bar')[1].querySelector('.progress');
           const memoryUsedPercent = (server.memory_used / server.memory_total) * 100;
           memoryProgress.style.width = `${memoryUsedPercent}%`;
           setProgressColor(memoryProgress, memoryUsedPercent);
           memoryProgress.querySelector('.progress-text').innerText = `${bytesToSize(server.memory_used * 1024, 1)} / ${bytesToSize(server.memory_total * 1024, 1)}`;

           const hddProgress = card.querySelectorAll('.progress-bar')[2].querySelector('.progress');
           const hddUsedPercent = (server.hdd_used / server.hdd_total) * 100;
           hddProgress.style.width = `${hddUsedPercent}%`;
           setProgressColor(hddProgress, hddUsedPercent);
           hddProgress.querySelector('.progress-text').innerText = `${bytesToSize(server.hdd_used * 1024 * 1024, 2)} / ${bytesToSize(server.hdd_total * 1024 * 1024, 2)}`;
        }
    });

    document.getElementById('update-time').innerText = `最后更新时间: ${new Date(data.updated * 1000).toLocaleString()}`;
}

function setProgressColor(progressElement, percent) {
    if (percent > 90) {
        progressElement.style.backgroundColor = 'darkslateblue';
    } else if (percent > 70) {
        progressElement.style.backgroundColor = 'mediumblue';
    } else if (percent > 50) {
        progressElement.style.backgroundColor = 'royalblue';
    } else {
        progressElement.style.backgroundColor = 'cornflowerblue'; // 默认颜色
    }
}

function fetchData() {
    fetch('json/stats.json')
        .then(response => response.json())
        .then(data => updateCards(data))
        .catch(error => console.error('Error fetching data:', error));
}

// 初始加载
fetchData();
// 每2秒更新
setInterval(fetchData, 2000);

```

css
```
body {
    background-color: #212e36;
    color: #ffffff;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    padding: 20px 10%;
}

header {
    /* text-align: center; */
    margin-bottom: 20px;
}

.cards-container {
    display: grid;
    --rowcount: 4; /* 默认一行4个卡片 */
    grid-template-columns: repeat(var(--rowcount), 1fr);
    gap: 30px;
}
@media screen and (max-width: 1279px) {
    .cards-container {
      --rowcount: 2;
    }
  }
@media screen and (max-width: 559px) {
    .cards-container {
      --rowcount: 1;
    }
  }
.card {
    background-color: #2c3e50;
    border-radius: 8px;
    padding: 15px;
    transition: transform 0.2s;
}

.card-header {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 15px; /* 增加底部间距 */
}

.card-header img {
    margin-right: 10px; /* 图标与标题之间的间距 */
}
.online-indicator {
    width: 10px;
    height: 10px;
    background-color: #28a745; /* 绿色 */
    border-radius: 50%; /* 圆形 */
    margin-left: 10px; /* 与标题之间的间距 */
    animation: pulse 1.5s infinite; /* 呼吸效果 */
}

.online-indicator.offline{
    background-color: #aaa; /* 灰色 */
    animation: pulse 3s ease-in-out infinite; /* 呼吸效果 */
}
.offline{
    color: #aaa; /* 灰色 */
}
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}
table {
    width: 100%;
    border-collapse: collapse; /* 合并边框 */
    margin-top: 10px; /* 增加顶部间距 */
}

td {
    padding: 8px;
    vertical-align: middle; /* 垂直居中 */
    border-bottom: 1px solid #34495e; /* 添加底部边框 */
}

.progress-bar {
    background-color: #4caf50;
    border-radius: 5px;
    height: 20px;
    position: relative;
    overflow: hidden;
}

.progress {
    background-color: cornflowerblue;
    height: 100%;
    width: 0;
    transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

.progress-text {
    position: absolute;
    color: white;
    font-weight: bold;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap; /* 防止文本换行 */
    line-height:22px;
}

/* 额外样式以增强卡片视觉效果 */
.card:hover {
    /* transform: scale(1.02); */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

#update-time {
    font-size: 0.9em;
    color: #bdc3c7; /* 更新信息的颜色 */
}
td:first-child {
    width: 20%; /* 设置第一列较小的宽度 */
}

td:last-child {
    width: 80%; /* 设置第二列为默认宽度 */
}
```

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

---

:::info{title="相关连接"}

[Github-cppla](https://github.com/cppla/ServerStatus)

[Github-stillechan](https://github.com/stilleshan/ServerStatus)
 
[知乎-ServerStatus - 一款牛逼的监控工具](https://zhuanlan.zhihu.com/p/711621773)

:::

随记-ServerStatus探针

![Swagger.png](/static/img/b386e4c812937e6804864ab82b28843f.Swagger.webp)
`Swagger` 前台可以解析注释`<summary>`，这个注释是支持`markdown`的，这里记录下



```
/// <summary>
/// 工令单
/// </summary>
/// <remarks>
/// 用例
///[<see cref="CP_InData"/>](#model-GD_InData)
///```
///{
///  GUID:"202312071659001",
///  data:{
///      "TA002":"000168",
///      "DB":"HD"
///  }
///}
///```
/// </remarks>
/// <param name="data"></param>
/// <returns></returns>
[HttpPost("GetGD")]
public async Task<IActionResult> GetGD([FromBody] GD_InMessage data)
{
    var DefaultOut = (GD_InMessage _data) => new GD_OutMessage()
    {
        GUID = data.GUID,
        Code = "-99",
        Message = "操作失败",
        Result = new List<MsGD>()
    };
    GD_OutMessage result = DefaultOut(data);
    try { result = await @event.Send(new GD_Event(data)); }
    catch (Exception ex)
    {
        log?.Error(this, "GetGD", ex);
    }
    result ??= DefaultOut(data);
    return new JsonResult(result);
}
```

这样写，前台就有示例了，而且可以点击超连接到下面的`Schemas`，vs也能快速看到


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


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


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

随记-Swagger注释

![](/static/img/58d2be8c803293e27d152b1dcf501923.æä»¶åè½3.gif)
从0开发一个[vs插件](https://gitee.com/shixixiyue/fine-uidesigner-vsix)（因为之前没开发过所以是0，并不是因为我是0），需要准备 参考样板（成熟的项目和别人的分享），大模型（最好联网搜索的），官方教程；

* 解决方案我找到了[CodeMaid](https://github.com/codecadwallader/codemaid)的源码，因为一直在用，所以就直接用了；网上大多的分享都过期了，参考价值有限；

* 一开始还是问AI，先问的GPT，使用的GPT-4o-mini，但是他的代码也有点过期，Claude3.5也有点不准，而且费用感人，结合着用就行了，[kimi](https://kimi.moonshot.cn/)也用了，可以联网检索，三个结合才一点点试出来的，可见插件开发这个学习资料还是很少的；

* 然后就是[官方的文档](https://learn.microsoft.com/zh-cn/visualstudio/extensibility/extensibility-hello-world?view=vs-2022)也要去学一学都看一遍，结合[kimi](https://kimi.moonshot.cn/)直接把网页发给他就行了；



---

# 1. 万事开头难

首先有需求后，需要分析进行任务拆解，WBS

比如我要实现右键菜单点击跳转到事件的定义，我要先提出需求，然后让AI给我一段伪代码整理思路，这个过程适合编程经验少的，



:::tip{title="提示词"}
我要开发一个vs2022的插件，你给我写一个伪代码，实现 在cshtml页面，点击右键，弹出菜单中，点击按钮，获取右键位置范围内的事件名称，点击后跳转到cs文件的该事件的代码位置，你思考下我要实现哪些方法和步骤
:::


:::info{title="答复"}
开发一个Visual Studio 2022插件来实现您描述的功能，需要涉及到Visual Studio扩展开发的几个关键步骤。以下是实现该功能的伪代码和步骤概述：

### 1. 设置项目和依赖项

首先，您需要创建一个新的VSIX项目，并添加必要的NuGet包，比如`Microsoft.VisualStudio.SDK`和`Microsoft.VisualStudio.OLE.Interop`。

### 2. 创建命令和菜单项

您需要定义一个新的命令，该命令将响应右键点击事件，并在弹出菜单中添加一个按钮。

```csharp
[Command(PackageIds.MyCommandId)]
public void MyCommand(object sender, EventArgs e)
{
    // 弹出菜单逻辑
}
```

### 3. 监听右键点击事件

您需要监听cshtml页面的右键点击事件，并在该事件触发时显示菜单。

```csharp
public void OnRClick(object sender, EventArgs e)
{
    // 获取右键点击的位置
    var rightClickPosition = GetRightClickPosition();

    // 显示菜单
    ShowContextMenu(rightClickPosition);
}
```

### 4. 获取事件名称

在菜单项被点击后，您需要解析cshtml文件，找到点击位置范围内的事件名称。

```csharp
public string GetEventNameAtPosition(string filePath, int position)
{
    // 解析cshtml文件，获取事件名称
    // 这里需要实现具体的解析逻辑
    return eventName;
}
```

### 5. 跳转到事件代码位置

一旦获取到事件名称，您需要找到对应的cs文件，并跳转到该事件的代码位置。

```csharp
public void NavigateToEvent(string eventName)
{
    // 查找对应的cs文件和事件位置
    var document = FindDocument(eventName);
    var position = FindPositionInDocument(document, eventName);

    // 跳转到指定位置
    Navigate(document, position);
}
```

### 6. 实现辅助方法

您需要实现一些辅助方法来完成上述步骤，比如获取右键点击位置、显示菜单、解析cshtml文件、查找文档和位置等。

```csharp
private int GetRightClickPosition()
{
    // 实现获取右键点击位置的逻辑
    return position;
}

private void ShowContextMenu(int position)
{
    // 实现显示菜单的逻辑
}

private Document FindDocument(string eventName)
{
    // 实现查找文档的逻辑
    return document;
}

private int FindPositionInDocument(Document document, string eventName)
{
    // 实现查找事件位置的逻辑
    return position;
}

private void Navigate(Document document, int position)
{
    // 实现跳转到指定位置的逻辑
}
```

### 7. 注册命令和事件监听

最后，您需要在VSIX的包初始化时注册命令和事件监听。

```csharp
protected override void Initialize()
{
    base.Initialize();

    // 注册命令
    RegisterCommand();

    // 注册事件监听
    RegisterEventListening();
}
```

### 8. 测试和调试

在开发过程中，不断测试和调试您的插件，确保它能够在不同的场景下正常工作。

请注意，这只是一个高层次的伪代码概述，具体的实现细节会涉及到更多的API调用和逻辑处理。您可能需要查阅Visual Studio扩展开发文档来获取更详细的指导。

:::

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

这样我就知道我应该准备哪些方法了，然后具体实现，可以参考成熟方案的源码，通过搜索关键字一点点跟踪，然后问一问，这里几乎每个方法都有槛，没写过

# 2. 然后中间难

问AI时候也会出现问题，我想在工具-选项中增加一个菜单，增加配置项，但是给的代码始终运行不了，大模型不会吧，就会现编，三个模型都瞎编，最后直接看了官方的教程


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



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

# 3. 最后打包测试

vs插件这玩意居然也能调试，点击调试后会打开一个素的vs2022，然后就正常用测试就行了；

另外 菜单配置 `<CommandTable>` 的结构就是个迷，到现在我也没闹明白；这里贴出源码作为记录；

```
<?xml version="1.0" encoding="utf-8"?>
<CommandTable xmlns="http://schemas.microsoft.com/VisualStudio/2005-10-18/CommandTable" xmlns:xs="http://www.w3.org/2001/XMLSchema">
	<Extern href="stdidcmd.h" />
	<Extern href="vsshlids.h" />
	<Commands package="FineUICoreDesignerPackage">
		<Groups>
			<Group guid="guidFineUICoreDesignerCmdSet" id="FineUICoreDesignerMenuGroup" priority="0x0500">
				
				<Parent guid="GuidVisualStudioHTMLDocumentContextMenu" id="IDVisualStudioHTMLDocumentContextMenu" />
			</Group>
		</Groups>
		<Buttons>
			<Button guid="guidFineUICoreDesignerCmdSet" id="cmdidGoToDefinition" priority="0x0100" type="Button">
				<Icon guid="guidFineUIIconSet" id="IconFineUI" />
				<Parent guid="guidFineUICoreDesignerCmdSet" id="FineUICoreDesignerMenuGroup" />
				<CommandFlag>DynamicVisibility</CommandFlag>
				<Strings>
					<ButtonText>转到定义FineUI</ButtonText>
				</Strings>
			</Button>
			<Button guid="guidFineUICoreDesignerCmdSet" id="cmdidGoToController" priority="0x0100" type="Button">
				<Icon guid="guidFineUIIconSet" id="IconFineUI" />
				<Parent guid="guidFineUICoreDesignerCmdSet" id="FineUICoreDesignerMenuGroup" />
				<CommandFlag>DynamicVisibility</CommandFlag>
				<Strings>
					<ButtonText>转到控制器</ButtonText>
				</Strings>
			</Button>
			<Button guid="guidFineUICoreDesignerCmdSet" id="cmdidGoToAPI" priority="0x0100" type="Button">
				<Icon guid="guidFineUIIconSet" id="IconFineUI" />
				<Parent guid="guidFineUICoreDesignerCmdSet" id="FineUICoreDesignerMenuGroup" />
				<CommandFlag>DynamicVisibility</CommandFlag>
				<Strings>
					<ButtonText>转到API</ButtonText>
				</Strings>
			</Button>
			<Button guid="guidFineUICoreDesignerCmdSet" id="cmdidGoToJSAPI" priority="0x0100" type="Button">
				<Icon guid="guidFineUIIconSet" id="IconFineUI" />
				<Parent guid="guidFineUICoreDesignerCmdSet" id="FineUICoreDesignerMenuGroup" />
				<CommandFlag>DynamicVisibility</CommandFlag>
				<Strings>
					<ButtonText>转到JS_API</ButtonText>
				</Strings>
			</Button>
		</Buttons>
		<Bitmaps>
			<Bitmap  guid="guidFineUIIconSet" href="Integration\Images\favicon.ico" />
		</Bitmaps>
	</Commands>
	<Symbols>
		<GuidSymbol name="FineUICoreDesignerPackage" value="{f65a3614-da29-4c5f-8e46-802d23a3b65b}" />
		<GuidSymbol name="guidFineUICoreDesignerCmdSet" value="{D38C3F3E-D44C-4A10-AA28-928EC1C6C4C1}">
			<IDSymbol name="cmdidGoToDefinition" value="0x0100" />
			<IDSymbol name="cmdidGoToController" value="0x0101" />
			<IDSymbol name="cmdidGoToAPI" value="0x0102" />
			<IDSymbol name="cmdidGoToJSAPI" value="0x0103" />
			<IDSymbol name="FineUICoreDesignerMenuGroup" value="0x1020" />
		</GuidSymbol>

		<GuidSymbol name="GuidVisualStudioHTMLDocumentContextMenu" value="{78f03954-2fb8-4087-8ce7-59d71710b3bb}">
			<IDSymbol name="IDVisualStudioHTMLDocumentContextMenu" value="0x1" />
		</GuidSymbol>

		<GuidSymbol name="guidFineUIIconSet" value="{54aa78c9-285a-4166-9eba-369dde5d787e}">
			<IDSymbol name="IconFineUI" value="1" />
		</GuidSymbol>
	</Symbols>
</CommandTable>

```


---

:::info{title="相关连接"}
[针对开发 FineUI 的 vs 扩展插件](https://gitee.com/shixixiyue/fine-uidesigner-vsix)
:::