前端 | Ant Design X组件库设计资源

画UED的时候想用Ant Design X的组件, 没找到相关的资源

所以在MasterGo自制了一组Ant Design X的组件库设计资源

目前已覆盖2.1.1版本60%的组件与变体, 有需要的欢迎取用~

源文件:

https://mastergo.com/goto/PFTLqa2Q?page_id=14:5591&file=181978941685384 邀请您进入《Ant Design X》,点击链接开始协作

Welcome 欢迎

欢迎@1x

Prompts 提示集

  • list@1x
  • item@1x

Sender 输入框

sender@1x

Conversations 管理对话

新对话@1x

Attachments 输入附件

attachments@1x

Bubble 对话气泡

Bubble@1x

Sender 输入框

sender@1x

Think 思考过程

tinking@1x

使用案例

MacBook Air 13_ - 1@1x

非专业的前端设计工程师, 组件的参数以官网的CSS为参考设置的

可能会出现和实际组件表现不一致的情况, 还请谅解~

GO | Markdown转图片/截图网页

Situation:

在进行企业微信推送的时候, 遇到了markdown格式消息推送长度超限的问题, 且业务上不允许丢失通知样式, 需要找到一种既能保持样式, 又能突破消息长度限制的推送方案

Task

1 . 方案制定

最先想到的是将Markdown内的详情内容转为图片形式, 基础信息部分保留原Markdown推送, 但是在我们的场景下遇到两个问题:

· 图片存储有网络域隔离, 推送出来的链接无法在外部网络环境访问

· 即使是使用图片, 由于使用了文字样式, 稍长的基础消息也有可能触发长度限制

因此这个方案最终没有采纳, 转而考虑整体转图片, 使用图片消息推送的方案

图片消息推送方案中, 我们遇到的问题是无法很好的处理原Markdown消息中的URL部分, 业务强依赖消息中的超链接来提升效率

最终, 选择了分步骤推送的方式来解决纯图片消息无法携带链接的问题

先推送一个包含全文的图片, 再推送一次概览Markdown提供链接

2. 技术实现

首先 直接将原来的Markdown进行图片渲染是行不通的, 没找到合适的渲染引擎, 最后选择了先转Html再通过浏览器渲染截图的方案

Action

需要两个包

1 . github.com/yuin/goldmark

goldmark是go的一个Markdown转Html库, 其实现了Markdown标准,(CommonMark) 易于拓展

2. github.com/chromedp/chromedp

chromedp是一个自动化浏览器测试的库, 基于Chrome DevTools Protocol(CDP)开发, 通过CDP可以直接调用Chromium

具体步骤见如下代码

// 先定义Markdown文本
md := `
> markdown document.

- Item 1
- Item 2
- [Link](https://baidu.com)
`

// 再定义基础的Html模板
htmlTemplate := `
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    <!-- 在这里可以设置自定义的HTML样式, 比如字体颜色之类的 -->
  </style>
</head>
<body>%s</body>
</html>
`

// 先把Markdown转HTML
var buf bytes.Buffer
if err := goldmark.Convert([]byte(md), &buf); err != nil {
   log.Fatal(err)
}
htmlContent := buf.String()

// 模板替换
fullHTML := fmt.Sprintf(htmlTemplate, htmlContent)

// 要将转换完的HTML内容做一次url转换
// 这和后面使用<strong>Chromium</strong>进行截图有关, 直接在地址栏使用
// ”data:text/html,“+HTML代码
// 的方式就可以渲染页面, 不需要存文件转一次了
// 如果不转url的话内容是现实不出来的
encodedHTML := url.PathEscape(fullHTML)

// 设置你<strong>Chromium</strong>的路径, 如果你装了Chrome那应该不用手动设置, Env里有
// 我这里用的是Edge, 所以要设置下
// 建议还是手动设置下, 因为最后都要跑到生产机器上去的, <strong>Chromium</strong>地址不确定
pathOpts := chromedp.ExecPath("/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge")

// 设置无头模式(headless mode)
// 这个是<strong>Chromium</strong>提供的一个模式, 可以在不显示GUI的情况下进行自动化操作
headlessOpts := chromedp.Flag("headless", true)

// 先设置执行选项
allocCtx, cancel := chromedp.NewExecAllocator(context.Background(), pathOpts, headlessOpts)

defer cancel()

// 连接<strong>Chromium</strong>
ctx, cancel := chromedp.NewContext(allocCtx)
defer cancel()

// 这里开始截图
var screenshot []byte
err := chromedp.Run(ctx,
        // html的内容就在这设置
    chromedp.Navigate("data:text/html,"+encodedHTML),
        // 等待Body加载完毕
    chromedp.WaitVisible("body", chromedp.ByQuery),
        // 这里使用FullScreenshot API进行截图
        //如果你只需要部分区域, 可以使用CaptureScreenshot加设置Viewport大小的方式限制范围, 100是截图质量
    chromedp.FullScreenshot(&screenshot, 100),
)
if err != nil {
    log.Fatal(err)
}

// 保存图片
if err := os.WriteFile("output.png", screenshot, 0644); err != nil {
    log.Fatal(err)
}

Rusult

通过转换图片的方式, 我们解决了业务方的需求

从我们来看, 虽然引入Chromium的方式可能不太优雅, 但是这个方案可能是当前比较好的复杂样式markdown转图片的解决方案了

阿里云ESA

阿里云的边缘安全加速 ESA(Edge Security Acceleration)是一个全球分布式的边缘网络平台。它通过遍布全球的3200多个边缘节点,为游戏、电商、金融、媒体等行业提供一站式的网络加速、安全防护和边缘计算服务,旨在解决全球业务访问延迟高、网络攻击频发以及中心化计算带来的性能瓶颈问题。

ESA提供了一站式管理网络和边缘的云服务,可以为互联网内容、应用程序、数据中心、企业办公以及人工智能等场景的数据内容提供全面的保护和极致的加速。

  • 全球化基础设施通过遍布全球各地的核心节点,ESA连接了全球主要的云服务商、数据中心、运营商,在提供稳定的互联链路的基础之上,利用Anycast路由进一步缩短了端到端的延时。
  • 全站流量优化保护ESA为网站、应用程序、AI等所有接入的站点应用从网络层和应用层进行性能优化和保护。针对企业版用户,还支持线下云边的VPC互通组网,隐藏并保护数据中心和数据资产的安全,如果您对VPC互通组网服务感兴趣,或希望了解更多细节,请联系您的客户经理。
  • Serverless开发平台ESA的全面云化和边缘的澎湃算力加持,使得每个边缘节点均可以提供存算一体的Serverless环境和KV存储能力,为开发者提供 Node.js 兼容的Serverless计算服务,可以将网站和应用快速地部署在全球边缘节点之上。
  • 全面的安全和性能分析采用全新的日志采集系统,ESA在合规的前提下进行采集且存储包括DNS、网络层、应用层在内的全域日志,通过更低延时的数据分析系统,即时生成数据分析结果,实现分钟级别的异常攻击识别效果。

免费体验链接:

http://s.tb.cn/e6.0Fu67m

Windows下GO编译慢解决参考

突然发现Goland编译速度慢的离谱, 一个HelloWord都得等个3分钟

参考相关文章, 发现是↓这玩意搞的鬼

Microsoft PC Manager Service

一个微软自己搞PC管家

disable后编译速度就正常了

感谢这位老哥找到的原因: Win11系统下Golang编译运行异常缓慢的原因和解决方法 – 哔哩哔哩

遂写了个powershell一键关闭禁用这个服务, 有需要的自取~

github: https://github.com/Iristack/DisableMsPCManager

记一个PPTP搭建排障

Server通过pptpd搭建pptp服务 构建完成后client建联失败

现象1:Server拒绝client的lcp协商

这种情况先在server抓包,server会主动回答一个request-reject,这个reject包里面会携带拒绝的原因,根据reject包内携带的原因来判断为什么server拒绝了这个协商,我遇到的情况是,client携带了一个cbcp的标记,这个是微软的一个callback标记,在适配器里面把lcp拓展关了就恢复

现象2:Server接收client的协商,回复了ack,但是依旧建联失败

一定要看看client所在的本地网络有没有防火墙…还要看看本地网络拓扑层数 这次的场景 client是本地的一台pc,一直协商失败,在client上抓包发现没收到server的ack,但是server上又明确抓到回包了,最后想起来本地的网关刷了openwtr…. 把gre协议放开后测试还是不行

遂在网关上面抓包,openwrt能装tcpdump 抓完发现 由于gre不带port 报文回到了gw后就没法往下转发到client了 配了条静态路由后大功告成

总结:

多抓包多抓包多抓包

还有永远不要无条件信任一个终端网关…..

通过OneInStack快速部署Web运行环境

在生产环境中, 尽量不要使用OneInStack之类的一键安装脚本, 由于镜像/脚本存在被第三方恶意篡改的不确定性,对生产环境可能造成潜在的安全风险

如果你只是希望快速搭建一个可用的Web环境, 欢迎查看这篇文章

如何快速搭建Web环境 – Zoisite’s Blog

什么是OneInStack

这里直接贴上项目官方的介绍

脚本介绍

此脚本使用shell编写,用于快速部署LEMP/LAMP/LNMP/LNMPA/LTMP(Linux、Nginx/Tengine/OpenResty、MySQL/MariaDB/Percona、PHP、JAVA)环境,适用于64位的RHEL 7、8、9(包括CentOS、RedHat、AlmaLinux、Rocky)、Debian 9、10、11、12、Ubuntu 16、18、20、22和Fedora 27+。

脚本特点:

  • 持续更新,提供交互式安装和自动安装
  • 源码编译安装,采用最新稳定版本,并从官方站点下载
  • 提供多重安全优化
  • 提供多个数据库版本(MySQL-8.0、MySQL-5.7、MySQL-5.6、MySQL-5.5、MariaDB-10.11、MariaDB-10.5、MariaDB-10.4、MariaDB-5.5、Percona-8.0、Percona-5.7、Percona-5.6、Percona-5.5、PostgreSQL、MongoDB)
  • 提供多个PHP版本(PHP-8.3、PHP-8.2、PHP-8.1、PHP-8.0、PHP-7.4、PHP-7.3、PHP-7.2、PHP-7.1、PHP-7.0、PHP-5.6、PHP-5.5、PHP-5.4、PHP-5.3)
  • 提供Nginx、Tengine、OpenResty、Caddy、Apache和ngx_lua_waf
  • 提供多个Tomcat版本(Tomcat-10、Tomcat-9、Tomcat-8、Tomcat-7)
  • 提供多个JDK版本(OpenJDK-8、OpenJDK-11、OpenJDK-17)
  • 根据需求安装PHP缓存加速器(ZendOPcache、xcache、apcu、eAccelerator)和PHP扩展,包括ZendGuardLoader、ionCube、SourceGuardian、imagick、gmagick、fileinfo、imap、ldap、calendar、phalcon、yaf、yar、redis、memcached、memcache、mongodb、swoole、xdebug
  • 可选安装Nodejs、Pureftpd、phpMyAdmin
  • 可选安装memcached、redis
  • 使用Jemalloc优化MySQL、Nginx
  • 提供添加虚拟主机脚本,包括Let’s Encrypt SSL证书
  • 提供Nginx/Tengine/OpenResty/Apache/Tomcat、MySQL/MariaDB/Percona、PHP、Redis、Memcached、phpMyAdmin升级脚本
  • 提供本地、远程(服务器间rsync)、阿里云OSS、腾讯云COS、又拍云、七牛云、亚马逊S3、Google Drive和Dropbox备份脚本

综上所诉, 这是一个以快速构建Web环境为目标的一键部署脚本, 个人项目还是挺推荐使用的, 毕竟很省事

需要注意的是, 省事带来的是不确定性, 生产环境中还是不建议使用诸如此类的一键部署脚本, 安装流程的不确定性, 镜像源与代码是否存在污染风险,都没法掌握(当然, 就算是官方Release也是有可能被污染的, 但是生产环境, 能谨慎一点算一点)

为什么要使用它

当我们着手部署一个Web环境时,安装各种前置依赖和中间件往往是一项复杂且繁琐的任务。以一个基本的前后端分离项目为例,我们通常需要执行以下步骤:

  • 安装反向代理服务器(如Nginx、Apache、Tengine或Caddy)
  • 配置HTTPS
  • 安装后端运行环境(例如JDK、PHP或Node.js)
  • 安装数据库管理系统

显而易见,所需完成的任务相当繁多。

是否有一种简便的方法能够帮助我们快速实现上述所有需求的安装与配置呢?答案是肯定的,实际上存在不少这样的工具。

比如,经典的LNMP一键配置脚本就广为人知。然而,今天我们想介绍的是OneinStack——一款更为新颖的一键式Web运行环境安装脚本。相比LNMP,OneinStack提供了更高的灵活性,允许用户根据自身需求自定义组件组合。

此外,它还具备全自动的SSL证书管理功能,相较于手动逐一安装各个组件,使用OneinStack无疑大幅节省了时间。

这里也贴上OneinStack的Github链接, 有兴趣的朋友可以看看

GitHub – oneinstack/oneinstack: OneinStack – A PHP/JAVA Deployment Tool

WinUI3踩坑记 – 后台线程刷新UI

心血来潮想写个WinUI3玩玩,发现坑真不少,开个文章记录下这些乱七八糟的坑

设计了一个场景,与服务器建联后,应用接受服务器发送来的数据, 经过处理后实时显示到UI上

为了保持与服务器的长链,并且实现切换页面后依旧能正常获取数据, 这里将与服务器通信的部分单独设计成了一个Client, 想法是通过Client来更新ViewModel, ViewModel变动后就会自动通知UI更新界面

结果发现, 当活动页面为需要更新的页面时,集合更新的通知就会失效, 重新进入页面后数据会正常显示出来

分析后发现问题出在, 由于是通过Client来更新ViewModel的, 所以实际上通知发生在Worker线程, 负责刷新UI的UI线程没有收到通知

ok, 找到原因, 来处理, 反正就是获取当前Active的窗口然后拿线程呗,看看文档

CoreDispatcher.RunAsync  / CoreDispatcher.RunIdleAsync

接口在这, 在ViewModel内获取看看

NULL

那再试试直接从Window获取看看

还是NULL

很奇怪, 无论怎么样都拿不到UI线程, 开始网上冲浪寻找解决方案, 最后终于在StackOverflow找到个回答

c# – A WinUI 3 question about accessing the UI thread from another thread – Stack Overflow

发现在WinUI3中, CoreDispatcher拿UI线程和Window拿UI线程的方法都被废弃了….

Windows Runtime APIs not supported in desktop apps – Windows apps | Microsoft Learn

根据文档换DispatcherQueue试试

前端正常渲染出来了

总结:

还得多找文档, 微软这废弃接口IDE内也没提示

参考文章:

Windows Runtime APIs not supported in desktop apps – Windows apps | Microsoft Learn

c# – A WinUI 3 question about accessing the UI thread from another thread – Stack Overflow

记一个关于OVS-DPDK, ./configure失败的原因

configure: error: Failed to link with DPDK, check the config.log for more details. If a working DPDK library was not found in the default search path, update PKG_CONFIG_PATH for pkg-config to find the .pc file in a non-standard location.

在进行OVS-DPDK编译的时候遇到了以上报错

首先根据提示查询是否pkg-config找不到libdpdk.pc

pkg-config --modversion libdpdk

22.11.1

这里看起来dpdk编译后是正常的,那就根据提示检查config.log, 发现ld报错

cannot find -libverbs

查了下机器上是有个libibverbs.so.1, 建了个软连接到libibverbs.so

ln -s libibverbs.so.1 libibverbs.so

再次配置成功通过