feat: 技术 chip 换成 skillicons.dev 圆角卡片风格

简单图标的 google 域名国内访问不到、且 simpleicons 是单色色板视觉单调,换成 skillicons.dev 的圆角卡片彩色 SVG;slug 用「小写 + 去掉所有非字母数字」+ 一份手动 alias 表(vue.js → vue / tailwindcss → tailwind / aspnet → dotnet / javascript → js / typescript → ts 等)兜常见命名差异;Skill Icons 未收录会返回 0 宽空 SVG,onLoad 里通过 naturalWidth 判 0 回落本地色块。

将版本号提升到 1.3.67。

Author: setube

PRIVACY.md

@@ -42,7 +42,7 @@ StackPrism / 栈棱镜(以下简称「本扩展」)是一款基于 Chrome / Edge
 - 没有遥测、没有广告 SDK、没有第三方分析、没有错误上报到云端
 - 扩展只发起两类网络请求,**均不**携带您的任何身份信息或浏览数据:
   1. 异步抓取**您当前访问页面自身已经加载的**少量 JS 文件首段(走浏览器缓存,不增加额外网络流量),用于在本地扫描该 JS 中的版权注释和 OAuth 入口 URL
-  2. 从 `cdn.simpleicons.org` 拉取技术品牌图标(请求体只包含一个公开技术名 slug,例如 react / vuedotjs / docker,不含您正在访问的页面 URL、识别结果或任何个人信息);图标如果 2 秒内未加载成功,扩展会自动回落到本地生成的首字母色块,绝不阻塞识别流程
+  2. 从 `skillicons.dev` 拉取技术品牌图标(请求只包含一个公开技术名 slug,例如 react / vue / docker,不含您正在访问的页面 URL、识别结果或任何个人信息);图标如果 2 秒内未加载成功或对方未收录,扩展会自动回落到本地生成的首字母色块,绝不阻塞识别流程
 
 ## 第三方共享
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stackprism",
   "private": true,
-  "version": "1.3.66",
+  "version": "1.3.67",
   "type": "module",
   "description": "StackPrism 用于检测网页前端、后端、CDN、SaaS、广告营销、统计、登录、支付、网站程序和主题模板线索。",
   "scripts": {

src/ui/components/TechChip.vue

@@ -46,23 +46,48 @@
     return (letter || raw.charAt(0)).toUpperCase()
   })
 
-  // 走 cdn.simpleicons.org/<slug> 拉 SVG 图标。
-  // SimpleIcons slug 规则:小写、空格/特殊字符删掉、`.` → `dot`、`+` → `plus`、`&` → `and`。
-  // 没收录的(中文名 / 站点自家脚本 / 兜底「疑似前端库」)slug 为空或 404,2s 超时回落文字色块
+  // Skill Icons(skillicons.dev)圆角卡片风格的技术 logo。slug 规则简单:小写、去掉所有非字母数字。
+  // 几个 Skill Icons 与常见 tech.name 之间命名差异手动 alias 一下;命中不到的 slug 会拿到 0 宽空 SVG,
+  // 我们在 onLoad 里通过 naturalWidth 判 0 回落文字色块。
+  const SKILL_ALIASES: Record<string, string> = {
+    vue: 'vue',
+    vuejs: 'vue',
+    vue3: 'vue',
+    tailwindcss: 'tailwind',
+    aspnet: 'dotnet',
+    aspnetcore: 'dotnet',
+    aspnetmvc: 'dotnet',
+    cnet: 'dotnet',
+    springboot: 'spring',
+    springmvc: 'spring',
+    springbootspringmvc: 'spring',
+    expressjs: 'expressjs',
+    express: 'expressjs',
+    javascript: 'js',
+    typescript: 'ts',
+    csharp: 'cs',
+    cpp: 'cpp',
+    objectivec: 'c',
+    angularjs: 'angular',
+    angularangularjs: 'angular',
+    github: 'github',
+    githubcom: 'github',
+    githubpages: 'github',
+    githubassets: 'github',
+    githubrawcontent: 'github'
+  }
+
   const toSlug = (raw: string): string => {
     const baseName = raw.split('/')[0].trim()
-    return baseName
-      .toLowerCase()
-      .replace(/\./g, 'dot')
-      .replace(/\+/g, 'plus')
-      .replace(/&/g, 'and')
-      .replace(/[^a-z0-9]/g, '')
+    const normalized = baseName.toLowerCase().replace(/[^a-z0-9]/g, '')
+    if (!normalized) return ''
+    return SKILL_ALIASES[normalized] || normalized
   }
 
   const iconUrl = computed(() => {
     const slug = toSlug(String(props.name || ''))
     if (!slug) return ''
-    return `https://cdn.simpleicons.org/${slug}`
+    return `https://skillicons.dev/icons?i=${slug}`
   })
 
   const iconState = ref<'pending' | 'loaded' | 'failed'>(iconUrl.value ? 'pending' : 'failed')
@@ -76,8 +101,14 @@
     }
   }
 
-  const onLoad = () => {
+  const onLoad = (event: Event) => {
     clearTimer()
+    // Skill Icons 对没收录的 slug 会返回 0 宽 SVG,这里识破后回落色块
+    const img = event.target as HTMLImageElement
+    if (img && (img.naturalWidth === 0 || img.naturalHeight === 0)) {
+      iconState.value = 'failed'
+      return
+    }
     iconState.value = 'loaded'
   }