dsh-plugin 1.1.1 → 1.2.0

package/src/client/styles/Modal.module.css

@@ -1,4 +1,8 @@
-/* Plugin Hub dialogs and overlays: install / uninstall modals, error dialog,
+/* DSH-Plugin Hub — the community plugin marketplace for DeepSeek Harness.
+ * Website: https://dsh-plugin.org
+ * GitHub: https://github.com/dshplugin/dsh-plugin-hub
+ *
+ * Plugin Hub dialogs and overlays: install / uninstall modals, error dialog,
  * failure-record dialog, task-queue dialog, progress strip, inline progress
  * and the global toast. Colors resolve through the --hub-* design tokens. */
 
@@ -41,6 +45,22 @@
   max-width: calc(100vw - 48px);
 }
 
+/* 日志存放位置弹窗：加宽 —— 路径随用户主目录/用户名变化（长短不一），
+   输入框内要完整显示长路径，窄了显示不下 */
+.modalWide {
+  width: 560px;
+  max-width: calc(100vw - 48px);
+}
+
+/* 系统日志查看器弹窗：比错误弹窗更宽 —— 日志行带时间/级别/类别/事件/描述，
+   加上筛选栏与底部操作栏后需要横向空间，窄了长行容易折行。
+   高度固定（540px，小视口才让位给窗口上限）：内容多寡不再让弹窗忽高忽低 */
+.logModal {
+  width: 780px;
+  height: min(540px, calc(100vh - 64px));
+  max-width: calc(100vw - 48px);
+}
+
 .modalHead {
   display: flex;
   align-items: center;
@@ -662,6 +682,32 @@
   pointer-events: none;
 }
 
+/* 「立即重启」的警告色变体：重启属于「提醒/待办」语义，用琥珀警告色而非品牌蓝，
+   与行内重启按钮、待重启状态点保持同一警示视觉；「完成/关闭」按钮继续用品牌蓝 */
+.restartNowWarning {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+  color: #fff;
+  background: var(--hub-warning);
+  border: none;
+  border-radius: 6px;
+  padding: 5px 14px;
+  cursor: pointer;
+  user-select: none;
+  transition: background 120ms ease;
+}
+
+.restartNowWarning:hover {
+  background: var(--hub-warning-hover);
+}
+
+.restartNowWarning:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 /* 成功结果视图（安装/卸载完成）：按钮对居中，与上方居中的对勾/标题/说明对齐，
    而不是沿用通用 modalActions 的右对齐；等宽成组，视觉上不散落 */
 .result .modalActions {
@@ -672,7 +718,8 @@
 }
 
 .result .modalActions .restartLater,
-.result .modalActions .restartNow {
+.result .modalActions .restartNow,
+.result .modalActions .restartNowWarning {
   min-width: 100px;
 }
 
@@ -735,6 +782,34 @@
   }
 }
 
+/* —— 安装失败记录 —— */
+
+/* 失败记录列表：纵向排列，高度随记录数自适应 —— 记录少时贴合内容，记录多时由窗体 max-height 兜底滚动 */
+.failList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-right: 2px;
+}
+
+/* 每条失败记录 = 一张独立卡片：边框 + 底色 + 内边距，多条之间以间距清晰分隔，按钮归属一眼可辨 */
+.failRow {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid var(--hub-border-2);
+  border-radius: 8px;
+  background: var(--hub-bg-2);
+}
+
+.failHead {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
 /* —— 任务通知中心（成功 + 失败） —— */
 
 /* 通知列表：纵向排列，高度随记录数自适应 —— 记录少时贴合内容，记录多时由窗体 max-height 兜底滚动 */
@@ -829,32 +904,99 @@
   color: var(--hub-danger-text);
 }
 
-/* —— 安装失败记录 —— */
-
-/* 失败记录列表：纵向排列，高度随记录数自适应 —— 记录少时贴合内容，记录多时由窗体 max-height 兜底滚动 */
-.failList {
+/* 每条通知底部的完整时间戳：YYYY-MM-DD HH:mm:ss，靠右下角展示 */
+.noticeFoot {
   display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding-right: 2px;
+  justify-content: flex-end;
+  align-items: center;
 }
 
-/* 每条失败记录 = 一张独立卡片：边框 + 底色 + 内边距，多条之间以间距清晰分隔，按钮归属一眼可辨 */
-.failRow {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 10px 12px;
-  border: 1px solid var(--hub-border-2);
-  border-radius: 8px;
-  background: var(--hub-bg-2);
+.noticeTime {
+  flex-shrink: 0;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--hub-text-tertiary);
+  font-variant-numeric: tabular-nums;
 }
 
-.failHead {
-  display: flex;
+/* 每条通知右侧的单条删除按钮：小号透明 X，靠右对齐，hover 变红提示可删，可单独移除该条 */
+.noticeRemove {
+  margin-left: auto;
+  flex-shrink: 0;
+  display: inline-flex;
   align-items: center;
-  gap: 8px;
-  min-width: 0;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  color: var(--hub-text-tertiary);
+  background: transparent;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  user-select: none;
+  transition: color 120ms ease, background 120ms ease;
+}
+
+.noticeRemove:hover {
+  color: var(--hub-danger-text);
+  background: var(--hub-danger-tint);
+}
+
+/* 成功通知卡片（时间戳已并入头部行）：删除按钮不再用 auto margin 顶到最右，
+   由时间戳的 margin-left:auto 把「时间 + 删除」整体推到行尾 —— 图标文字与
+   时间垂直居中，卡片只有一行内容，整体居中不顶头 */
+.noticeRowOk .noticeRemove {
+  margin-left: 0;
+}
+
+.noticeRowOk .noticeTime {
+  margin-left: auto;
+}
+
+/* 更新提醒通知：整行可点击直达更新确认弹窗 —— 卡片 hover 提亮 + 指针手型 */
+.noticeRowUpdate {
+  cursor: pointer;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+
+.noticeRowUpdate:hover {
+  border-color: var(--hub-brand);
+  background: var(--hub-brand-tint);
+}
+
+/* 更新提醒：新版本号小徽标（紧随标题之后，品牌蓝浅底） */
+.noticeVersion {
+  flex-shrink: 0;
+  font-size: 11px;
+  line-height: 18px;
+  font-weight: 600;
+  color: var(--hub-brand);
+  background: var(--hub-brand-tint);
+  border: 1px solid var(--hub-brand-border);
+  border-radius: 5px;
+  padding: 0 6px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* 更新提醒：行尾「去更新」小按钮（品牌蓝实底白字） */
+.noticeUpdateGo {
+  flex-shrink: 0;
+  margin-left: 2px;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 600;
+  color: #fff;
+  background: var(--hub-brand);
+  border: none;
+  border-radius: 5px;
+  padding: 2px 8px;
+  cursor: pointer;
+  user-select: none;
+  transition: background 120ms ease;
+}
+
+.noticeUpdateGo:hover {
+  background: var(--hub-brand-hover);
 }
 
 /* 操作类型徽标：安装失败红 / 卸载失败黄 */
@@ -900,55 +1042,6 @@
   text-decoration: underline;
 }
 
-/* 每条通知底部的完整时间戳：YYYY-MM-DD HH:mm:ss，靠右下角展示 */
-.noticeFoot {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.noticeTime {
-  flex-shrink: 0;
-  font-size: 11px;
-  line-height: 16px;
-  color: var(--hub-text-tertiary);
-  font-variant-numeric: tabular-nums;
-}
-
-/* 每条通知右侧的单条删除按钮：小号透明 X，靠右对齐，hover 变红提示可删，可单独移除该条 */
-.noticeRemove {
-  margin-left: auto;
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  color: var(--hub-text-tertiary);
-  background: transparent;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  user-select: none;
-  transition: color 120ms ease, background 120ms ease;
-}
-
-.noticeRemove:hover {
-  color: var(--hub-danger-text);
-  background: var(--hub-danger-tint);
-}
-
-/* 成功通知卡片（时间戳已并入头部行）：删除按钮不再用 auto margin 顶到最右，
-   由时间戳的 margin-left:auto 把「时间 + 删除」整体推到行尾 —— 图标文字与
-   时间垂直居中，卡片只有一行内容，整体居中不顶头 */
-.noticeRowOk .noticeRemove {
-  margin-left: 0;
-}
-
-.noticeRowOk .noticeTime {
-  margin-left: auto;
-}
-
 /* 记录内的复制按钮：纯灰文字、无边框，低调隐蔽，点击即可复制该条完整错误日志 */
 .failCopy {
   flex-shrink: 0;
@@ -1278,3 +1371,196 @@
   color: var(--hub-brand-hover);
   text-decoration: underline;
 }
+
+/* —— 已安装插件详情弹窗 —— */
+
+/* 详情弹窗：比普通弹窗略宽，给信息网格/路径留出横向空间 */
+.detailModal {
+  width: 480px;
+  max-width: calc(100vw - 48px);
+}
+
+/* 有可用更新提示条：品牌色浅底 + 边框，醒目但不刺眼 */
+.detailUpdateHint {
+  padding: 6px 10px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--hub-brand);
+  background: var(--hub-brand-tint);
+  border: 1px solid var(--hub-brand-border-soft);
+  border-radius: 6px;
+}
+
+/* 信息网格：纵向堆叠的 label/value 行 */
+.detailGrid {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.detailRow {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  font-size: 12px;
+  line-height: 20px;
+  min-width: 0;
+}
+
+/* 标签：弱化、固定宽、右对齐文本，网格纵向对齐 */
+.detailLabel {
+  flex-shrink: 0;
+  width: 76px;
+  text-align: right;
+  color: var(--hub-text-tertiary);
+}
+
+/* 值：可换行，主文字色；链接/路径等富内容横排 */
+.detailValue {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px 6px;
+  font-weight: 500;
+  color: var(--hub-text-primary);
+}
+
+/* 版本号 / 包名等代码形态的值：等宽字体，与正文区分 */
+.detailMono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+/* 版本对比箭头：弱化展示在已装版本 → 目录最新之间 */
+.detailArrow {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  color: var(--hub-text-tertiary);
+}
+
+/* 弱化说明文字：紧跟主值后的小字（如「目录最新」「Fork 数」） */
+.detailDim {
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--hub-text-tertiary);
+}
+
+/* 收录入口：品牌蓝链接 + 链节图标，hover 下划线（跳官网详情页或 GitHub 仓库） */
+.detailLink {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 500;
+  color: var(--hub-brand);
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  transition: color 120ms ease;
+}
+
+.detailLink:hover {
+  color: var(--hub-brand-hover);
+  text-decoration: underline;
+}
+
+/* Star 数：金色星标强调 */
+.detailStars {
+  color: #b45309;
+  font-weight: 600;
+}
+
+/* 安装路径：等宽路径 + 右侧「复制 / 打开文件夹」图标按钮组；整条点击复制 */
+.detailPath {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  line-height: 18px;
+  color: var(--hub-text-primary);
+  background: var(--hub-bg-2);
+  border: 1px solid var(--hub-border-2);
+  border-radius: 6px;
+  padding: 3px 3px 3px 8px;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+
+.detailPath:hover {
+  border-color: var(--hub-border-ghost);
+  background: var(--hub-bg-3);
+}
+
+.detailPathText {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+}
+
+/* 路径行右侧操作组：复制 / 打开文件夹两个图标按钮 */
+.detailPathActions {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* 路径行图标按钮：品牌蓝描边 + 浅蓝底，图标放大到 15px —— 小图标在深色路径
+   条上辨识度不够（macOS 尤其明显），蓝色一加立即清晰可点 */
+.detailPathBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  color: var(--hub-brand);
+  background: var(--hub-brand-tint);
+  border: 1px solid var(--hub-brand-border-soft);
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
+}
+
+.detailPathBtn svg {
+  width: 15px;
+  height: 15px;
+}
+
+.detailPathBtn:hover {
+  color: #ffffff;
+  background: var(--hub-brand);
+  border-color: var(--hub-brand);
+}
+
+/* 安装状态点：绿 = 已加载进 loader（运行中）；琥珀 = 已安装未挂载（装完未重启） */
+.detailStatusRunning,
+.detailStatusPending {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  align-self: center;
+}
+
+.detailStatusRunning {
+  background: var(--hub-success);
+}
+
+.detailStatusPending {
+  background: var(--hub-warning);
+}
+
+.detailStatusText {
+  font-weight: 500;
+}

package/src/client/styles/SectionTabs.module.css

@@ -0,0 +1,142 @@
+/* DSH-Plugin Hub — the community plugin marketplace for DeepSeek Harness.
+ * Website: https://dsh-plugin.org
+ * GitHub: https://github.com/dshplugin/dsh-plugin-hub
+ *
+ * Primary navigation (section tabs): an underline tab bar under the header
+ * switching between Market / Installed / Settings. The active tab carries a
+ * brand-colored underline; the bar itself draws a hairline bottom border so
+ * the selected state reads clearly without extra chrome. */
+
+.root {
+  display: flex;
+  align-items: stretch;
+  gap: 28px;
+  flex-shrink: 0;
+  padding: 0 2px;
+  border-bottom: 1px solid var(--hub-border-1);
+}
+
+.tab,
+.tabActive {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 38px;
+  padding: 0 4px;
+  border: none;
+  background: transparent;
+  font-size: 14px;
+  line-height: 38px;
+  cursor: pointer;
+  user-select: none;
+  transition: color 120ms ease;
+}
+
+.tab {
+  color: var(--hub-text-secondary);
+}
+
+.tab:hover {
+  color: var(--hub-text-primary);
+}
+
+.tabActive {
+  color: var(--hub-text-primary);
+  font-weight: 600;
+}
+
+/* tab 图标：16px 随字号等宽对齐，SVG 继承 currentColor 自动跟随选中/悬浮色 */
+.tabIcon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+
+/* 选中下划线：紧贴栏底边（覆盖 hairline 分隔线），品牌色 2px，一眼定位当前视图 */
+.tabActive::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--hub-brand);
+}
+
+/* 计数徽标（已安装数量）：浅灰胶囊；选中态跟随文字转深 */
+.tabCount,
+.tabCountActive {
+  font-size: 11px;
+  line-height: 16px;
+  border-radius: 999px;
+  padding: 0 6px;
+  min-width: 18px;
+  text-align: center;
+}
+
+.tabCount {
+  color: var(--hub-text-tertiary);
+  background: var(--hub-bg-btn);
+}
+
+.tabActive .tabCountActive {
+  color: var(--hub-text-on-fill);
+  background: var(--hub-btn-fill);
+}
+
+/* —— 通知中心入口 —— */
+
+/* 通知铃铛按钮：位于「设置」tab 后边、靠右对齐（margin-left:auto 吃掉 tab 剩余空间），
+   在 38px tab 栏里垂直居中；常态透明底只显铃铛轮廓，hover 浅灰，不抢 tab 视觉层级 */
+.noticeBtn {
+  position: relative;
+  margin-left: auto;
+  align-self: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 26px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 24px;
+  color: var(--hub-text-secondary);
+  background: transparent;
+  cursor: pointer;
+  user-select: none;
+  transition: color 120ms ease, background 120ms ease;
+}
+
+.noticeBtn:hover {
+  color: var(--hub-text-primary);
+  background: var(--hub-bg-hover);
+  border-color: var(--hub-border-2);
+}
+
+/* 铃铛图标容器：保持 SVG 与文字基线对齐 */
+.noticeIcon {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+
+/* 红底白字计数胶囊：内联跟在铃铛后边（不悬浮），只在计数 >0 时出现 */
+.noticeCount {
+  min-width: 17px;
+  height: 17px;
+  padding: 0 5px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 17px;
+  text-align: center;
+  color: #ffffff;
+  background: var(--hub-danger);
+  box-shadow: 0 1px 3px rgba(209, 36, 47, 0.35);
+}