<div style="background: #1a1f2c; padding: 3rem; border-left: 4px solid #3b82f6; 
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);">
  <h1 style="font-family: 'Helvetica Neue', sans-serif; font-size: 2.75rem; 
    color: #f1f5f9; margin: 0; display: flex; align-items: center; gap: 1rem;">
    <span style="display: inline-block; width: 8px; height: 40px; background: #3b82f6;"></span>
    TraeCN
    <span style="color: #94a3b8; font-weight: 300;">测试</span>
  </h1>
</div>



# TraeCN 测试


[Trae](https://www.trae.com.cn) 挺火的，我也测了以下**Builder 测试版本**，这里放几个截图，

## Builder 测试版本

模型支持DeepSeekV3 和 DeepSeekR1，这里显示`DeepSeek-Reasoner` 和 `DeepSeek-Chat`，应该指向的是官方模型，目前没有使用限制；还有个豆包模型但是现在是灰色的，是得灰这玩意怕比；



这里我输入了一个需求：



![wechat_2025-03-04_092109_941.png](/static/img/a43a97e01bdd5f17a3a95655b757412e.wechat_2025-03-04_092109_941.webp)

然后自己进行了思考和编写代码，`main.py` `requirements.txt` `Dockerfile`;

#### 构建 
直接构建，遇见了网络问题... `python:3.9-slim` 镜像执行 `apt-get install`时候会无网络，R1开始尝试修复;


![wechat_2025-03-04_094753_362.png](/static/img/b9f98cefd1e9617f6aaa9360b1a7c764.wechat_2025-03-04_094753_362.webp)

可以看到，`Trae` 尝试修改`Dockerfile`，然后人工确认修改，执行构建命令，人工确认执行，监听终端窗口，发现问题，再次尝试修改`Dockerfile` ... ，然后就报错了，**官方模型实锤**。

#### 修改代码

然后修改代码也会失败，哈；

![wechat_2025-03-04_100333_525.png](/static/img/d0bc0d69cd0428a3706013494032aa70.wechat_2025-03-04_100333_525.webp)

#### 历史

后来我发现AI修改的怎么退回呢，这里有个时间线，从这回退；


![wechat_2025-03-04_101002_806.png](/static/img/8b3207d896602696a5cd8bb14ffbf044.wechat_2025-03-04_101002_806.webp)

---

HTML到底怎么转成图片保存，这里我用了 `PuppeteerSharp` ，下次分享。

TraeCN测试

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




以下内容部分先后

# 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)