cooljser/dsh-plugin-portal

DSH 插件生态门户 · DSH Plugin Portal

基于 awesome-dsh-plugin（DeepSeek Harness 插件精选列表，701 个插件）构建的插件生态门户网页：把上游"清单"升级为一站式发现、筛选、安装的入口。

🌐 在线访问：https://dsh.cooljser.com（自建服务器 + nginx 托管，HTTPS 由 Let's Encrypt 自动签发）

纯静态、零依赖、无构建链 —— 生成产物直接扔到任意静态托管即可运行。

📸 截图预览

| Hero 首屏 | 插件库 |
|---|---|
| Hero 首屏截图 | 插件库截图 |

✨ 功能特性

- Hero 首屏：鲸鱼插画 + 核心数据（插件总数 / 分类 / 作者 / 本周新增，数字滚动动画）
- 分类总览：12 个分类卡片，点击即跳转插件库并预筛选
- 插件库（核心）：实时搜索（名称/作者/描述/npm 包）+ 分类 chips + 三种排序（最新/名称/作者）+ 列表/卡片双视图 + 一键复制安装命令
- 编辑精选：8 个社区代表性插件推荐位
- 生态数据面板：近 30 天新增时间线（CSS 柱状图）+ 分类分布条形图 + 关键指标
- 上手引导：三步安装教程（命令可复制），命令与真实 dsh CLI 一致
- 中英双语：运行时一键切换，无需整页刷新，偏好持久化
- 深色模式：跟随系统 prefers-color-scheme 自动切换

📁 目录结构

dsh-plugin-portal/
├── index.html            # 页面骨架（内容由 app.js 渲染）
├── styles.css            # 视觉样式（清新明亮风，含深色模式）
├── app.js                # 全部交互逻辑（搜索/筛选/排序/视图/i18n/复制）
├── data.js               # 生成的数据快照（window.DSH_DATA，勿手改）
├── img/
│   └── 1.png / 2.png     # 页面截图（README 预览用）
├── scripts/
│   └── fetch-data.mjs    # 数据拉取 + 解析脚本（上游 README/数据 → data.js）
└── src-data/             # 上游数据快照（离线可用）
├── README.md / README.zh.md
└── added-dates.json  # 每个插件入库日期

🚀 快速开始

预览（任意静态服务器即可）：

cd dsh-plugin-portal
python3 -m http.server 8080
打开 http://127.0.0.1:8080

重新生成数据（默认读本地快照 src-data/）：

node scripts/fetch-data.mjs

从上游仓库的最新状态更新快照后重新生成：

1) 拉取上游最新内容（示例）
git clone --depth 1 https://github.com/awesome-dsh-plugin/awesome-dsh-plugin /tmp/awesome-dsh-plugin

2) 直接用仓库工作副本解析（跳过快照）
DSH_SRC=/tmp/awesome-dsh-plugin node scripts/fetch-data.mjs

fetch-data.mjs 也会在本地快照缺失时自动降级到 GitHub raw 拉取（需联网）。

🌍 部署

产物只有 4 个静态文件（index.html / styles.css / app.js / data.js），可部署到：

- GitHub Pages（gh-pages 分支或 Actions）
- Cloudflare Pages / Vercel / Netlify 静态目录
- 任意 Nginx / 对象存储静态托管

📊 数据说明

| 字段 | 含义 | 来源 |
|---|---|---|
| name / url / owner | 插件名 / GitHub 地址 / 作者 | 上游双语 README |
| desc.zh / desc.en | 中英文描述 | README.zh.md / README.md |
| cat | 分类（ui/theme/session/memory/tools/skill/workflow/notify/model/dev/market/fun） | README 章节 |
| added | 入库日期 | added-dates.json |
| npm | npm 包名（上游已移除该映射，缺省为 null） | 原 npm-map.json |
| cmd | 安装命令（dsh plugin --profile web add …） | 由 URL 推导 |

数据版权归上游 awesome-dsh-plugin 所有，本项目与其一致采用 CC0 授权。

🛠 技术要点

- 原生 HTML + CSS + JS，无框架、无第三方库、无字体外链（完全离线可用）
- i18n：文案字典 T + 全量重渲染；插件描述直接读数据的双语字段
- 搜索防抖不必要（本地 701 条），但输入时只重渲染结果区，保证输入框焦点不丢失
- 复制命令：navigator.clipboard + execCommand 降级 + Toast 反馈
- 无障碍：语义化标签、aria-live 计数、键盘可聚焦、prefers-reduced-motion 支持