DSH 插件生态门户 · DSH Plugin Portal

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

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

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

📸 截图预览

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 / 对象存储静态托管

📊 数据说明

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

🛠 技术要点

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