@dsh-tom/dsh-css 0.1.3 → 0.1.5

package/README.md

@@ -6,7 +6,7 @@
 
 ```powershell
 cd D:\product\dsh-css
-npm ci
+npm run check
 npm login --registry=https://registry.npmjs.org/
 npm publish --access public --registry=https://registry.npmjs.org/
 ```
@@ -21,7 +21,7 @@ npm publish --access public --registry=https://registry.npmjs.org/
 打开 **插件 → 添加插件 → 安装第三方插件**，在“包名或地址”输入：
 
 ```text
-D:\product\dsh-css\dsh-tom-dsh-css-0.1.3.tgz
+D:\product\dsh-css\dsh-tom-dsh-css-0.1.5.tgz
 ```
 
 安装并启用，然后完全退出并重新打开 dsh。
@@ -31,7 +31,7 @@ D:\product\dsh-css\dsh-tom-dsh-css-0.1.3.tgz
 包发布到 npmjs 后，先卸载已安装的旧版，再打开 **插件 → 添加插件 → 安装第三方插件**，输入：
 
 ```text
-@dsh-tom/dsh-css@0.1.3
+@dsh-tom/dsh-css@0.1.5
 ```
 
 选择 **安装源 → npm 官方源**，安装并启用，然后完全退出并重新打开 dsh。

package/dist/client.js

@@ -2,9 +2,295 @@
 window.__ModuleLoader__.load({
   id: "@dsh-tom/dsh-css",
   factory: (require) => {
-    const { createElement } = require('react');
-    const css = "/* 深色模式配色，保留内置文字、边框和语法高亮颜色。 */\nhtml body[data-ds-dark-theme] {\n  /* 区域 1：左侧会话列表；Windows 标题栏在下方单独设置。原 RGB(27, 27, 28)。 */\n  --dsw-specific-sidebar-fill: rgb(36, 37, 33) !important;\n\n  /* 区域 2：会话标题、正文以及应用基础背景。原 RGB(21, 21, 23)。 */\n  --dsw-alias-bg-base: rgb(39, 40, 34) !important;\n\n  /* 区域 3：主输入框。原 RGB(44, 44, 46)。 */\n  --dsw-specific-input-major: rgb(66, 67, 61) !important;\n\n  /* 会话内代码块及使用同一语义变量的输出区域。原 RGB(27, 27, 28)。 */\n  --dsw-alias-markdown-code-block: rgb(55, 56, 50) !important;\n}\n\n/* 标题栏及原生窗口按钮共享此颜色，会话列表继续使用原来的背景。 */\nhtml[data-windows-titlebar] body[data-ds-dark-theme] {\n  --dsw-specific-sidebar-fill: rgb(32, 32, 32) !important;\n\n  & .BynINW_sidebarCol {\n    --dsw-specific-sidebar-fill: rgb(36, 37, 33) !important;\n  }\n\n  /* 主内容面板左上角改为直角。 */\n  & .BynINW_centerCol {\n    border-top-left-radius: 0;\n  }\n}\n\n/* Windows 桌面版展开侧栏：左侧图标栏 + 右侧标题、会话列表。\n * 类名对应 DSH 0.2.1-rc.2；折叠侧栏继续使用宿主布局。\n * 复用品牌、新会话、面板和账户按钮，不改变原有点击事件。\n */\nhtml[data-windows-titlebar] body[data-ds-dark-theme] ._2H3hWW_root:not(._2H3hWW_collapsed) {\n  --dsh-css-rail-width: 52px;\n  display: grid;\n  grid-template-columns: var(--dsh-css-rail-width) minmax(0, 1fr);\n  grid-template-rows: 52px auto auto minmax(0, 1fr);\n  padding: 0;\n  position: relative;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0 auto 0 0;\n    width: var(--dsh-css-rail-width);\n    background: rgb(32, 32, 32);\n    pointer-events: none;\n  }\n\n  & ._2H3hWW_logoRow {\n    grid-area: 1 / 2;\n    height: 52px;\n    margin: 0;\n    padding: 0 16px;\n    justify-content: flex-start;\n  }\n\n  & ._2H3hWW_logoRow::after {\n    content: \"DeepSeek\";\n    color: var(--dsw-alias-label-primary);\n    font: 600 18px / 24px var(--dsw-font-family);\n    letter-spacing: 0;\n  }\n\n  /* 原品牌按钮仍打开新会话，以首页图标呈现。 */\n  & ._2H3hWW_brand {\n    position: absolute;\n    top: 8px;\n    left: 8px;\n    width: 36px;\n    height: 36px;\n    padding: 0;\n    border-radius: 8px;\n    justify-content: center;\n    background: var(--dsw-alias-interactive-bg-hover);\n    overflow: visible;\n  }\n\n  & ._2H3hWW_brandIdentity {\n    display: none;\n  }\n\n  & ._2H3hWW_brand::before {\n    content: \"\";\n    width: 18px;\n    height: 18px;\n    background: currentColor;\n    mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 10v3h2v7a2 2 0 0 0 2 2h4v-7h4v7h4a2 2 0 0 0 2-2v-7h2v-3Z'/%3E%3C/svg%3E\") center / contain no-repeat;\n  }\n\n  &:has(._2H3hWW_panelActive) ._2H3hWW_brand {\n    background: transparent;\n  }\n\n  & ._2H3hWW_newSession {\n    grid-area: 2 / 2;\n    align-self: start;\n    z-index: 1;\n    height: 36px;\n    margin: 0 8px;\n    padding: 0 8px;\n    border: none;\n    border-radius: 8px;\n    background: transparent;\n    font-weight: 400;\n    justify-content: flex-start;\n  }\n\n  & ._2H3hWW_newSessionContent {\n    width: 100%;\n    justify-content: flex-start;\n    gap: 8px;\n  }\n\n  & ._2H3hWW_newSessionContent > svg {\n    display: none;\n  }\n\n  & ._2H3hWW_newSessionContent::before {\n    content: \"\";\n    flex: none;\n    width: 14px;\n    height: 14px;\n    background: currentColor;\n    mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-7M16 3a2.1 2.1 0 0 1 3 3L9 16l-4 1 1-4Z'/%3E%3C/svg%3E\") center / contain no-repeat;\n  }\n\n  & ._2H3hWW_panelList {\n    grid-area: 2 / 1;\n    position: relative;\n    align-self: start;\n    gap: 8px;\n    margin: 0;\n    padding: 0 8px;\n  }\n\n  & ._2H3hWW_panelRow {\n    position: relative;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    margin: 0;\n    padding: 0;\n    border-radius: 8px;\n    color: var(--dsw-alias-label-tertiary);\n  }\n\n  & ._2H3hWW_panelTitle {\n    display: none;\n  }\n\n  & ._2H3hWW_panelGlyph > svg {\n    width: 18px;\n    height: 18px;\n  }\n\n  & ._2H3hWW_panelActive {\n    color: var(--dsw-alias-label-primary);\n  }\n\n  /* 列表与导航共用网格行，顶部留出新会话按钮的位置。 */\n  & ._2H3hWW_regionArea {\n    grid-area: 2 / 2 / -1 / 3;\n    margin: 0;\n    padding: 44px 0 0 12px;\n  }\n\n  & ._2H3hWW_footArea {\n    grid-area: 4 / 1;\n    position: relative;\n    align-self: end;\n    gap: 8px;\n    padding: 8px;\n  }\n\n  & ._2H3hWW_footerActions:empty {\n    display: none;\n  }\n\n  /* 左下角设置按钮沿用账户菜单，设置、登录等入口仍由宿主提供。 */\n  & .ET65mq_trigger {\n    position: relative;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    padding: 0;\n    border-radius: 8px;\n    color: var(--dsw-alias-label-tertiary);\n  }\n\n  & .ET65mq_trigger > * {\n    display: none;\n  }\n\n  & .ET65mq_trigger::before {\n    content: \"\";\n    width: 18px;\n    height: 18px;\n    background: currentColor;\n    mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 3-.5 2-2 1-2-.5-2 3.5L4.5 10v3L3 14l2 3.5 2-.5 2 1 .5 3h5l.5-3 2-1 2 .5 2-3.5-1.5-1v-3L21 9l-2-3.5-2 .5-2-1-.5-2Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E\") center / contain no-repeat;\n  }\n\n  /* 同一元素也显示等待状态，只隐藏普通的相对时间。 */\n  & .hIlkoa_sessionRow > .hIlkoa_time:not([aria-hidden=\"true\"]) {\n    display: none;\n  }\n\n  & :is(._2H3hWW_brand, ._2H3hWW_newSession, .ET65mq_trigger):hover {\n    background: var(--dsw-alias-interactive-bg-hover);\n  }\n\n  & :is(._2H3hWW_brand, ._2H3hWW_newSession, .ET65mq_trigger):focus-visible {\n    outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));\n    outline-offset: -2px;\n  }\n\n  /* 展开状态下宿主禁用了面板 Tooltip，为纯图标入口补上名称。 */\n  & :is(._2H3hWW_panelRow, .ET65mq_trigger):is(:hover, :focus-visible)::after {\n    content: attr(aria-label);\n    position: absolute;\n    z-index: 40;\n    left: 44px;\n    top: 50%;\n    transform: translateY(-50%);\n    padding: 4px 8px;\n    border: 1px solid var(--dsw-alias-border-l3);\n    border-radius: 6px;\n    background: var(--dsw-alias-bg-layer-1);\n    color: var(--dsw-alias-label-primary);\n    font: 12px / 20px var(--dsw-font-family);\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & .ET65mq_trigger:is(:hover, :focus-visible)::after {\n    content: \"设置\";\n  }\n}\n\n/* 悬浮卡片由宿主通过 portal 挂在侧栏外。 */\n.dsh-css-project {\n  display: none;\n}\n\nhtml[data-windows-titlebar] body[data-ds-dark-theme] .dsh-css-project {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--dsw-alias-label-secondary);\n  font-size: 12px;\n  line-height: 20px;\n\n  & svg {\n    flex: none;\n  }\n\n  & span {\n    overflow-wrap: anywhere;\n  }\n}\n";
-const inject = ['slots', 'sessions', 'workspaces', 'layout'];
+    const { createElement, useState, useEffect, useRef } = require('react');
+    const { Menu, Modal } = require('@deepseek-ai/dsh-client-ui-primitives');
+    const css = "/* 深色模式配色，保留内置文字、边框和语法高亮颜色。 */\nhtml body[data-ds-dark-theme] {\n  /* 区域 1：左侧会话列表；Windows 标题栏在下方单独设置。原 RGB(27, 27, 28)。 */\n  --dsw-specific-sidebar-fill: rgb(36, 37, 33) !important;\n\n  /* 区域 2：会话标题、正文以及应用基础背景。原 RGB(21, 21, 23)。 */\n  --dsw-alias-bg-base: rgb(39, 40, 34) !important;\n\n  /* 区域 3：主输入框。原 RGB(44, 44, 46)。 */\n  --dsw-specific-input-major: rgb(66, 67, 61) !important;\n\n  /* 会话内代码块及使用同一语义变量的输出区域。原 RGB(27, 27, 28)。 */\n  --dsw-alias-markdown-code-block: rgb(55, 56, 50) !important;\n}\n\n/* 标题栏及原生窗口按钮共享此颜色，会话列表继续使用原来的背景。 */\nhtml[data-windows-titlebar] body[data-ds-dark-theme] {\n  --dsw-specific-sidebar-fill: rgb(32, 32, 32) !important;\n\n  & .BynINW_sidebarCol {\n    --dsw-specific-sidebar-fill: rgb(36, 37, 33) !important;\n  }\n\n  /* 主内容面板左上角改为直角。 */\n  & .BynINW_centerCol {\n    border-top-left-radius: 0;\n  }\n}\n\n/* Windows 桌面版展开侧栏：左侧图标栏 + 右侧标题、会话列表。\n * 类名对应 DSH 0.2.1-rc.2；折叠侧栏继续使用宿主布局。\n * 复用品牌、新会话、面板和账户按钮，不改变原有点击事件。\n */\nhtml[data-windows-titlebar] body[data-ds-dark-theme] ._2H3hWW_root:not(._2H3hWW_collapsed) {\n  --dsh-css-rail-width: 52px;\n  display: grid;\n  grid-template-columns: var(--dsh-css-rail-width) minmax(0, 1fr);\n  grid-template-rows: 52px auto auto minmax(0, 1fr);\n  padding: 0;\n  position: relative;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0 auto 0 0;\n    width: var(--dsh-css-rail-width);\n    background: rgb(32, 32, 32);\n    pointer-events: none;\n  }\n\n  & ._2H3hWW_logoRow {\n    grid-area: 1 / 2;\n    height: 52px;\n    margin: 0;\n    padding: 0 16px;\n    justify-content: flex-start;\n  }\n\n  & ._2H3hWW_logoRow::after {\n    content: \"DeepSeek\";\n    color: var(--dsw-alias-label-primary);\n    font: 600 18px / 24px var(--dsw-font-family);\n    letter-spacing: 0;\n  }\n\n  /* 原品牌按钮仍打开新会话，以首页图标呈现。 */\n  & ._2H3hWW_brand {\n    position: absolute;\n    top: 8px;\n    left: 8px;\n    width: 36px;\n    height: 36px;\n    padding: 0;\n    border-radius: 8px;\n    justify-content: center;\n    background: var(--dsw-alias-interactive-bg-hover);\n    overflow: visible;\n  }\n\n  & ._2H3hWW_brandIdentity {\n    display: none;\n  }\n\n  & ._2H3hWW_brand::before {\n    content: \"\";\n    width: 18px;\n    height: 18px;\n    background: currentColor;\n    mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 10v3h2v7a2 2 0 0 0 2 2h4v-7h4v7h4a2 2 0 0 0 2-2v-7h2v-3Z'/%3E%3C/svg%3E\") center / contain no-repeat;\n  }\n\n  &:has(._2H3hWW_panelActive) ._2H3hWW_brand {\n    background: transparent;\n  }\n\n  & ._2H3hWW_newSession {\n    grid-area: 2 / 2;\n    align-self: start;\n    z-index: 1;\n    height: 36px;\n    margin: 0 8px;\n    padding: 0 8px;\n    border: none;\n    border-radius: 8px;\n    background: transparent;\n    font-weight: 400;\n    justify-content: flex-start;\n  }\n\n  & ._2H3hWW_newSessionContent {\n    width: 100%;\n    justify-content: flex-start;\n    gap: 8px;\n  }\n\n  & ._2H3hWW_newSessionContent > svg {\n    display: none;\n  }\n\n  & ._2H3hWW_newSessionContent::before {\n    content: \"\";\n    flex: none;\n    width: 14px;\n    height: 14px;\n    background: currentColor;\n    mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-7M16 3a2.1 2.1 0 0 1 3 3L9 16l-4 1 1-4Z'/%3E%3C/svg%3E\") center / contain no-repeat;\n  }\n\n  & ._2H3hWW_panelList {\n    grid-area: 2 / 1;\n    position: relative;\n    align-self: start;\n    gap: 8px;\n    margin: 0;\n    padding: 0 8px;\n  }\n\n  & ._2H3hWW_panelRow {\n    position: relative;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    margin: 0;\n    padding: 0;\n    border-radius: 8px;\n    color: var(--dsw-alias-label-tertiary);\n  }\n\n  & ._2H3hWW_panelTitle {\n    display: none;\n  }\n\n  & ._2H3hWW_panelGlyph > svg {\n    width: 18px;\n    height: 18px;\n  }\n\n  & ._2H3hWW_panelActive {\n    color: var(--dsw-alias-label-primary);\n  }\n\n  /* 列表与导航共用网格行，顶部留出新会话按钮的位置。 */\n  & ._2H3hWW_regionArea {\n    grid-area: 2 / 2 / -1 / 3;\n    margin: 0;\n    padding: 44px 0 0 12px;\n  }\n\n  & ._2H3hWW_footArea {\n    grid-area: 4 / 1;\n    position: relative;\n    align-self: end;\n    gap: 8px;\n    padding: 8px;\n  }\n\n  & ._2H3hWW_footerActions:empty {\n    display: none;\n  }\n\n  /* 左下角设置按钮沿用账户菜单，设置、登录等入口仍由宿主提供。 */\n  & .ET65mq_trigger {\n    position: relative;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    padding: 0;\n    border-radius: 8px;\n    color: var(--dsw-alias-label-tertiary);\n  }\n\n  & .ET65mq_trigger > * {\n    display: none;\n  }\n\n  & .ET65mq_trigger::before {\n    content: \"\";\n    width: 18px;\n    height: 18px;\n    background: currentColor;\n    mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 3-.5 2-2 1-2-.5-2 3.5L4.5 10v3L3 14l2 3.5 2-.5 2 1 .5 3h5l.5-3 2-1 2 .5 2-3.5-1.5-1v-3L21 9l-2-3.5-2 .5-2-1-.5-2Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E\") center / contain no-repeat;\n  }\n\n  /* 同一元素也显示等待状态，只隐藏普通的相对时间。 */\n  & .hIlkoa_sessionRow > .hIlkoa_time:not([aria-hidden=\"true\"]) {\n    display: none;\n  }\n\n  & :is(._2H3hWW_brand, ._2H3hWW_newSession, .ET65mq_trigger):hover {\n    background: var(--dsw-alias-interactive-bg-hover);\n  }\n\n  & :is(._2H3hWW_brand, ._2H3hWW_newSession, .ET65mq_trigger):focus-visible {\n    outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));\n    outline-offset: -2px;\n  }\n\n  /* 展开状态下宿主禁用了面板 Tooltip，为纯图标入口补上名称。 */\n  & :is(._2H3hWW_panelRow, .ET65mq_trigger):is(:hover, :focus-visible)::after {\n    content: attr(aria-label);\n    position: absolute;\n    z-index: 40;\n    left: 44px;\n    top: 50%;\n    transform: translateY(-50%);\n    padding: 4px 8px;\n    border: 1px solid var(--dsw-alias-border-l3);\n    border-radius: 6px;\n    background: var(--dsw-alias-bg-layer-1);\n    color: var(--dsw-alias-label-primary);\n    font: 12px / 20px var(--dsw-font-family);\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & .ET65mq_trigger:is(:hover, :focus-visible)::after {\n    content: \"设置\";\n  }\n}\n\n/* 悬浮卡片由宿主通过 portal 挂在侧栏外。 */\n.dsh-css-project {\n  display: none;\n}\n\nhtml[data-windows-titlebar] body[data-ds-dark-theme] .dsh-css-project {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--dsw-alias-label-secondary);\n  font-size: 12px;\n  line-height: 20px;\n\n  & svg {\n    flex: none;\n  }\n\n  & span {\n    overflow-wrap: anywhere;\n  }\n}\n\n/* 项目页通过宿主 main 插槽挂载，菜单和对话框沿用宿主组件。 */\n.dsh-css-more-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dsh-css-more-open {\n  background: var(--dsw-alias-interactive-bg-hover) !important;\n}\n\nhtml[data-windows-titlebar] body[data-ds-dark-theme] ._2H3hWW_panelRow.dsh-css-more-open::after {\n  display: none;\n}\n\n.dsh-css-projects-page {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  color: var(--dsw-alias-label-primary);\n  background: var(--dsw-alias-bg-base);\n  font: 14px / 1.5 var(--dsw-font-family);\n}\n\n.dsh-css-projects-content {\n  box-sizing: border-box;\n  width: min(100%, 1408px);\n  margin: 0 auto;\n  padding: 32px;\n}\n\n.dsh-css-projects-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n  margin-bottom: 24px;\n\n  & h1 {\n    margin: 0;\n    font-size: 24px;\n    font-weight: 600;\n  }\n}\n\n.dsh-css-projects-tools,\n.dsh-css-project-dialog-actions {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.dsh-css-projects-page button,\n.dsh-css-project-dialog-actions button {\n  cursor: pointer;\n  font: inherit;\n\n  &:disabled { cursor: default; opacity: .45; }\n}\n\n.dsh-css-project-search {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 240px;\n  height: 34px;\n  padding: 0 12px;\n  border: 1px solid var(--dsw-alias-border-l3);\n  border-radius: 20px;\n  color: var(--dsw-alias-label-tertiary);\n\n  & input {\n    width: 100%;\n    min-width: 0;\n    border: 0;\n    outline: none;\n    background: transparent;\n    color: var(--dsw-alias-label-primary);\n    font: inherit;\n  }\n\n  &:focus-within { border-color: var(--dsw-alias-label-secondary); }\n}\n\n.dsh-css-project-create,\n.dsh-css-project-secondary {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-height: 34px;\n  padding: 6px 16px;\n  border: 1px solid transparent;\n  border-radius: 20px;\n  white-space: nowrap;\n  background: var(--dsw-alias-label-primary);\n  color: var(--dsw-alias-bg-base);\n}\n\n.dsh-css-project-secondary {\n  background: transparent;\n  color: var(--dsw-alias-label-primary);\n  border-color: var(--dsw-alias-border-l3);\n}\n\n.dsh-css-project-columns,\n.dsh-css-project-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 100px 80px;\n  align-items: center;\n  gap: 16px;\n}\n\n.dsh-css-project-columns {\n  min-height: 32px;\n  border-bottom: 1px solid var(--dsw-alias-border-l3);\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 12px;\n\n  & button { border: 0; padding: 0; color: inherit; background: transparent; }\n}\n\n.dsh-css-project-row {\n  position: relative;\n  min-height: 70px;\n  border-bottom: 1px solid var(--dsw-alias-border-l3);\n\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 0 -12px;\n    border-radius: 12px;\n    pointer-events: none;\n  }\n\n  &:is(:hover, :focus-within, .is-open)::before { background: var(--dsw-alias-interactive-bg-hover); }\n  & > * { position: relative; }\n  &:is(:hover, :focus-within, .is-open) .dsh-css-project-chevron { opacity: 1; }\n}\n\n.dsh-css-project-name-cell { min-width: 0; }\n\n.dsh-css-project-name {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  min-height: 70px;\n  padding: 8px;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  text-align: left;\n\n  & svg { flex: none; }\n  & span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n}\n\n.dsh-css-project-chevron { opacity: 0; }\n.dsh-css-project-time { color: var(--dsw-alias-label-secondary); white-space: nowrap; }\n.dsh-css-project-actions { display: flex; gap: 4px; }\n\n.dsh-css-icon-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: var(--dsw-alias-label-secondary);\n\n  &:is(:hover, [aria-expanded='true']) { background: var(--dsw-alias-interactive-bg-hover); }\n}\n\n.dsh-css-projects-page button:focus-visible,\n.dsh-css-project-dialog-actions button:focus-visible {\n  outline: 2px solid var(--dsw-focus-ring-color, var(--dsw-alias-label-secondary));\n  outline-offset: 2px;\n}\n\n.dsh-css-project-empty { padding: 60px 0; text-align: center; color: var(--dsw-alias-label-tertiary); }\n.dsh-css-project-error { color: var(--dsw-alias-state-error-primary, #dc6767); overflow-wrap: anywhere; }\n.dsh-css-project-notice { color: var(--dsw-alias-label-secondary); }\n.dsh-css-project-field { display: flex; flex-direction: column; gap: 10px; }\n.dsh-css-project-field input {\n  padding: 10px 12px;\n  border: 1px solid var(--dsw-alias-border-l3);\n  border-radius: 8px;\n  background: var(--dsw-alias-bg-base);\n  color: var(--dsw-alias-label-primary);\n  font: inherit;\n}\n.dsh-css-project-path { color: var(--dsw-alias-label-tertiary); font-size: 12px; overflow-wrap: anywhere; }\n\n/* 项目弹窗使用 Codex 的深灰底、圆角和按钮配色。 */\n.dsh-css-project-remove-dialog,\n.dsh-css-project-edit-dialog {\n  gap: 12px;\n  padding-bottom: 20px;\n  border-radius: 22px;\n  box-shadow: none;\n\n  & > :first-child > :first-child { padding: 20px 14px 4px 20px; }\n  & h2 { font-size: 20px; line-height: 26px; font-weight: 600; overflow-wrap: anywhere; }\n  & > :last-child { padding: 0 20px; }\n  & .dsh-css-project-dialog-actions { gap: 12px; }\n  & .dsh-css-project-dialog-actions button { min-height: 32px; padding: 5px 16px; border-radius: 10px; }\n  & .dsh-css-project-secondary { border-color: transparent; }\n}\n\n.dsh-css-project-remove-dialog {\n  width: min(420px, 100%);\n  & .dsh-css-project-remove-content > p { padding: 0 20px; }\n  & .dsh-css-project-remove-content > :last-child { margin-top: 0; padding: 0 20px; }\n}\n\n.dsh-css-project-edit-dialog {\n  width: min(520px, 100%);\n  gap: 20px;\n\n  & .dsh-css-project-edit-content > :first-child { padding-bottom: 12px; }\n  & .dsh-css-project-edit-content > :last-child { margin-top: 0; padding: 0 20px; }\n  & .dsh-css-project-field { gap: 12px; }\n  & .dsh-css-project-name-input {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 0 12px;\n    border: 1px solid var(--dsw-alias-border-l3);\n    border-radius: 12px;\n  }\n  & .dsh-css-project-name-input:focus-within { border-color: var(--dsw-alias-label-secondary); }\n  & .dsh-css-project-name-input input {\n    min-width: 0;\n    width: 100%;\n    height: 38px;\n    padding: 0;\n    border: 0;\n    outline: 0;\n    background: transparent;\n  }\n  & svg { flex: none; }\n  & .dsh-css-project-source { display: flex; flex-direction: column; gap: 8px; }\n  & .dsh-css-project-source-label { font-size: 13px; font-weight: 600; }\n  & .dsh-css-project-path {\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    min-height: 48px;\n    padding: 10px 12px;\n    border: 1px solid var(--dsw-alias-border-l3);\n    border-radius: 10px;\n    color: var(--dsw-alias-label-primary);\n    font-size: 13px;\n  }\n}\n\nbody[data-ds-dark-theme] :is(.dsh-css-project-remove-dialog, .dsh-css-project-edit-dialog) {\n  background: rgb(55, 56, 51);\n\n  & h2 { color: rgb(238, 238, 233); }\n  & .dsh-css-project-remove-content > p,\n  & .dsh-css-project-secondary { color: rgb(142, 143, 137); }\n  & .dsh-css-project-secondary:hover:not(:disabled) { background: rgb(255 255 255 / 5%); }\n  & .dsh-css-project-remove { color: rgb(240, 100, 96); background: rgb(76, 61, 56); }\n  & .dsh-css-project-remove:hover:not(:disabled) { background: rgb(88, 65, 60); }\n  & .dsh-css-project-name-input { background: rgb(58, 59, 53); border-color: rgb(80, 81, 74); }\n  & .dsh-css-project-name-input:focus-within { border-color: rgb(148, 149, 138); }\n  & .dsh-css-project-path { background: rgb(58, 59, 53); border-color: rgb(70, 71, 64); }\n  & .dsh-css-project-path svg { color: rgb(142, 143, 137); }\n}\n\nbody[data-ds-dark-theme] .dsh-css-project-edit-dialog .dsh-css-project-create {\n  background: rgb(248, 248, 243);\n  color: rgb(55, 56, 51);\n}\n\nbody[data-ds-dark-theme] [role='presentation']:has(> :is(.dsh-css-project-remove-dialog, .dsh-css-project-edit-dialog)) {\n  --dsw-alias-bg-mask-1: rgb(0 0 0 / 15%);\n}\n\n@media (max-width: 760px) {\n  .dsh-css-projects-content { padding: 24px 20px; }\n  .dsh-css-projects-header { align-items: stretch; flex-direction: column; }\n  .dsh-css-project-search { flex: 1; width: auto; }\n  .dsh-css-project-columns, .dsh-css-project-row { grid-template-columns: minmax(0, 1fr) 64px 68px; gap: 8px; }\n  .dsh-css-project-name { gap: 10px; }\n}\n";
+// React 和宿主的菜单、对话框由构建入口注入。
+const PROJECTS_PANEL = 'dsh-css-projects';
+
+function ProjectIcon({ name = 'folder', size = 16, ...props }) {
+  const paths = {
+    folder: 'M3 7V5a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Zm0 2h18',
+    more: 'M5 12h.01M12 12h.01M19 12h.01',
+    search: 'M21 21l-5-5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0',
+    plus: 'M12 5v14M5 12h14',
+    edit: 'M12 4H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-7M16 3a2.1 2.1 0 0 1 3 3L9 16l-4 1 1-4Z',
+    archive: 'M3 3h18v4H3ZM5 7v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7M9 11h6',
+    close: 'm6 6 12 12M6 18 18 6',
+    chevron: 'm9 5 7 7-7 7',
+  };
+  return createElement('svg', {
+    width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
+    stroke: 'currentColor', strokeWidth: name === 'more' ? 3.5 : 1.6,
+    strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true, ...props,
+  }, createElement('path', { d: paths[name] }));
+}
+
+function ProjectsNav({ size, openProjects }) {
+  const icon = useRef(null);
+  const anchor = useRef(null);
+  const [open, setOpen] = useState(false);
+  const opened = useRef(false);
+  opened.current = open;
+  // panellist 只提供图标插槽，外层按钮由宿主创建；接管点击以先打开菜单。
+  useEffect(() => {
+    const button = icon.current.closest('button');
+    anchor.current = button;
+    const toggle = event => {
+      event.stopPropagation();
+      setOpen(value => !value);
+    };
+    const keepAnchor = event => { if (opened.current) event.stopPropagation(); };
+    button.addEventListener('click', toggle);
+    button.addEventListener('pointerdown', keepAnchor);
+    button.setAttribute('aria-haspopup', 'menu');
+    return () => {
+      button.removeEventListener('click', toggle);
+      button.removeEventListener('pointerdown', keepAnchor);
+      button.removeAttribute('aria-haspopup');
+      button.removeAttribute('aria-expanded');
+      button.classList.remove('dsh-css-more-open');
+    };
+  }, []);
+  useEffect(() => {
+    anchor.current.setAttribute('aria-expanded', String(open));
+    anchor.current.classList.toggle('dsh-css-more-open', open);
+  }, [open]);
+  return createElement('span', { ref: icon, className: 'dsh-css-more-icon', onClick: event => event.stopPropagation() },
+    createElement(ProjectIcon, { name: 'more', size }),
+    createElement(Menu, {
+      open, anchor: null, portal: true, side: 'right', autoFocus: true,
+      getAnchorRect: () => anchor.current?.getBoundingClientRect() ?? null,
+      items: [{ id: 'projects', label: '项目', icon: createElement(ProjectIcon) }],
+      onClose: () => {
+        setOpen(false);
+        if (document.activeElement?.closest('[role="menu"]')) anchor.current?.focus();
+      },
+      onSelect: () => { setOpen(false); openProjects(); },
+    }));
+}
+
+function projectName(workspace) {
+  return workspace.title || workspace.path.split(/[\\/]/).filter(Boolean).at(-1) || workspace.path;
+}
+
+function projectUpdatedAt(workspace, sessions) {
+  return workspace.sessionIds.reduce((latest, id) => Math.max(latest, Number(sessions[id]?.updatedAt) || 0),
+    Date.parse(workspace.updatedAt || workspace.createdAt) || 0);
+}
+
+function projectTime(time, now) {
+  if (!time) return '—';
+  const minutes = Math.max(0, Math.floor((now - time) / 60000));
+  if (minutes < 1) return '刚刚';
+  if (minutes < 60) return `${minutes} 分`;
+  if (minutes < 1440) return `${Math.floor(minutes / 60)} 小时`;
+  if (minutes < 10080) return `${Math.floor(minutes / 1440)} 天`;
+  return `${Math.floor(minutes / 10080)} 周`;
+}
+
+function ProjectListRow({ workspace, updatedAt, now, busy, onOpen, onCreate, onAction }) {
+  const [open, setOpen] = useState(false);
+  const title = projectName(workspace);
+  return createElement('div', { className: `dsh-css-project-row${open ? ' is-open' : ''}`, role: 'row' },
+    createElement('div', { role: 'cell', className: 'dsh-css-project-name-cell' },
+      createElement('button', {
+        type: 'button', className: 'dsh-css-project-name', title: workspace.path,
+        disabled: busy, onClick: () => onOpen(workspace),
+      }, createElement(ProjectIcon), createElement('span', null, title),
+      createElement(ProjectIcon, { name: 'chevron', size: 12, className: 'dsh-css-project-chevron' }))),
+    createElement('div', { role: 'cell', className: 'dsh-css-project-time', title: updatedAt ? new Date(updatedAt).toLocaleString('zh-CN') : '' }, projectTime(updatedAt, now)),
+    createElement('div', { role: 'cell', className: 'dsh-css-project-actions' },
+      createElement(Menu, {
+        open, portal: true, side: 'bottom', align: 'end', autoFocus: true,
+        anchor: createElement('button', {
+        type: 'button', className: 'dsh-css-icon-button', disabled: busy,
+        'aria-label': `${title}：更多操作`, 'aria-haspopup': 'menu', 'aria-expanded': open,
+        onClick: () => setOpen(value => !value),
+        }, createElement(ProjectIcon, { name: 'more' })),
+        items: [
+          { id: 'rename', label: '编辑项目', icon: createElement(ProjectIcon, { name: 'edit' }) },
+          { id: 'archive', label: '归档聊天', icon: createElement(ProjectIcon, { name: 'archive' }) },
+          { id: 'remove', label: '移除项目', icon: createElement(ProjectIcon, { name: 'close' }) },
+        ],
+        onClose: () => setOpen(false),
+        onSelect: action => { setOpen(false); onAction(action, workspace); },
+      }),
+      createElement('button', {
+        type: 'button', className: 'dsh-css-icon-button', disabled: busy,
+        'aria-label': `${title}：新建聊天`, title: '新建聊天', onClick: () => onCreate(workspace),
+      }, createElement(ProjectIcon, { name: 'edit' }))));
+}
+
+function ProjectsPage({ useWorkspaces, useSessions, actions }) {
+  const workspaces = useWorkspaces(state => state);
+  const sessions = useSessions(state => state);
+  const [query, setQuery] = useState('');
+  const [ascending, setAscending] = useState(false);
+  const [now, setNow] = useState(Date.now);
+  const [busy, setBusy] = useState(false);
+  const pending = useRef(false);
+  const [error, setError] = useState('');
+  const [notice, setNotice] = useState('');
+  const [dialog, setDialog] = useState(null);
+  const [draft, setDraft] = useState('');
+  const ready = workspaces.phase === 'ready' && workspaces.state !== 'loading' && sessions.phase === 'ready';
+
+  useEffect(() => {
+    const timer = window.setInterval(() => setNow(Date.now()), 60000);
+    return () => window.clearInterval(timer);
+  }, []);
+
+  const run = async operation => {
+    if (pending.current) return;
+    pending.current = true;
+    setBusy(true);
+    setError('');
+    setNotice('');
+    try { await operation(); }
+    catch (reason) { setError(reason instanceof Error ? reason.message : String(reason)); }
+    finally { pending.current = false; setBusy(false); }
+  };
+  const requestAction = (kind, workspace) => {
+    setError('');
+    setNotice('');
+    setDraft(projectName(workspace));
+    setDialog({ kind, workspace });
+  };
+  const closeDialog = () => { if (!pending.current) { setDialog(null); setError(''); } };
+  const confirm = () => run(async () => {
+    const { kind, workspace } = dialog;
+    if (kind === 'rename') {
+      if (!draft.trim()) return;
+      await actions.rename(workspace.workspaceId, draft.trim());
+    } else if (kind === 'remove') {
+      await actions.remove(workspace.workspaceId);
+    } else {
+      const result = await actions.archive(workspace.workspaceId);
+      setNotice(result);
+    }
+    setDialog(null);
+  });
+  const needle = query.trim().toLocaleLowerCase();
+  const rows = workspaces.items.filter(workspace =>
+    `${projectName(workspace)}\n${workspace.path}`.toLocaleLowerCase().includes(needle))
+    .map(workspace => ({ workspace, updatedAt: projectUpdatedAt(workspace, sessions.byId) }))
+    .sort((a, b) => (ascending ? a.updatedAt - b.updatedAt : b.updatedAt - a.updatedAt) ||
+      projectName(a.workspace).localeCompare(projectName(b.workspace), 'zh-CN'));
+  const dialogTitle = dialog?.kind === 'rename' ? '编辑项目' : dialog?.kind === 'archive' ? '归档聊天' : '移除项目';
+  const removing = dialog?.kind === 'remove';
+  const editing = dialog?.kind === 'rename';
+
+  return createElement('section', { className: 'dsh-css-projects-page', 'aria-label': '项目', 'aria-busy': busy },
+    createElement('div', { className: 'dsh-css-projects-content' },
+      createElement('header', { className: 'dsh-css-projects-header' },
+        createElement('h1', null, '项目'),
+        createElement('div', { className: 'dsh-css-projects-tools' },
+          createElement('label', { className: 'dsh-css-project-search' },
+            createElement(ProjectIcon, { name: 'search', size: 14 }),
+            createElement('input', { type: 'search', value: query, placeholder: '搜索项目', 'aria-label': '搜索项目', onChange: event => setQuery(event.target.value) })),
+          createElement('button', {
+            type: 'button', className: 'dsh-css-project-create', disabled: busy || !ready,
+            onClick: () => run(async () => { if (await actions.create()) setNotice('项目已添加'); }),
+          }, createElement(ProjectIcon, { name: 'plus', size: 14 }), '创建'))),
+      error && !dialog && createElement('p', { className: 'dsh-css-project-error', role: 'alert' }, error),
+      notice && createElement('p', { className: 'dsh-css-project-notice', role: 'status' }, notice),
+      createElement('div', { role: 'table', 'aria-label': '项目列表', className: 'dsh-css-project-table' },
+        createElement('div', { role: 'row', className: 'dsh-css-project-columns' },
+          createElement('div', { role: 'columnheader' }, '名称'),
+          createElement('div', { role: 'columnheader', 'aria-sort': ascending ? 'ascending' : 'descending' },
+            createElement('button', { type: 'button', onClick: () => setAscending(value => !value) }, '已更新 ', ascending ? '↑' : '↓')),
+          createElement('div', { role: 'columnheader', 'aria-label': '操作' })),
+        ...rows.map(({ workspace, updatedAt }) => createElement(ProjectListRow, {
+          key: workspace.workspaceId, workspace, updatedAt, now, busy: busy || !ready,
+          onOpen: target => run(() => actions.open(target.workspaceId)),
+          onCreate: target => actions.startSession(target.workspaceId), onAction: requestAction,
+        }))),
+      rows.length === 0 && createElement('p', { className: 'dsh-css-project-empty', role: 'status' },
+        !ready ? '正在加载项目…' : needle ? '没有找到匹配的项目' : '还没有项目，点击“创建”选择项目文件夹。')),
+    createElement(Modal, {
+      open: dialog !== null, title: removing ? `移除 ${projectName(dialog.workspace)}？` : dialogTitle,
+      closeLabel: '关闭', onClose: closeDialog,
+      className: removing ? 'dsh-css-project-remove-dialog' : editing ? 'dsh-css-project-edit-dialog' : undefined,
+      contentClassName: removing ? 'dsh-css-project-remove-content' : editing ? 'dsh-css-project-edit-content' : undefined,
+      backdropBlur: !(removing || editing),
+      description: removing ? '这只会从应用中移除该项目。你电脑上的文件和现有聊天不会被删除。' : undefined,
+      footer: createElement('div', { className: 'dsh-css-project-dialog-actions' },
+        createElement('button', { type: 'button', className: 'dsh-css-project-secondary', disabled: busy, onClick: closeDialog }, '取消'),
+        createElement('button', {
+          type: 'button', className: `dsh-css-project-create${removing ? ' dsh-css-project-remove' : ''}`,
+          disabled: busy || (dialog?.kind === 'rename' && !draft.trim()), onClick: confirm,
+        }, busy ? '处理中…' : dialog?.kind === 'rename' ? '保存' : dialogTitle)),
+    }, editing
+      ? createElement('div', { className: 'dsh-css-project-field' },
+        createElement('label', { className: 'dsh-css-project-name-input' },
+          createElement(ProjectIcon), createElement('input', {
+          value: draft, disabled: busy, 'data-modal-autofocus': true,
+          'aria-label': '项目名称',
+          onChange: event => setDraft(event.target.value),
+          onKeyDown: event => {
+            if (event.key === 'Enter' && !event.nativeEvent.isComposing) { event.preventDefault(); confirm(); }
+          },
+        })),
+        createElement('div', { className: 'dsh-css-project-source' },
+          createElement('span', { className: 'dsh-css-project-source-label' }, '源文件夹'),
+          createElement('div', { className: 'dsh-css-project-path', title: dialog.workspace.path },
+            createElement(ProjectIcon), createElement('span', null, dialog.workspace.path))))
+      : dialog?.kind === 'archive' ? createElement('p', null,
+        `归档“${projectName(dialog.workspace)}”中的聊天？运行中的聊天会保留，聊天记录不会删除。`) : null,
+    error && createElement('p', { className: 'dsh-css-project-error', role: 'alert' }, error)));
+}
+
+function registerProjects(ctx) {
+  const actions = {
+    async create() {
+      const picker = globalThis.__DSH_DIRECTORY_PICKER__;
+      const path = await (picker ? picker.pick() : ctx.uiWorkspace.pickDirectory());
+      if (path === null) return false;
+      await ctx.workspaces.create({ path });
+      return true;
+    },
+    rename: (id, title) => ctx.workspaces.rename(id, title),
+    remove: id => ctx.workspaces.delete(id),
+    startSession: id => ctx.uiWorkspace.startSession(id),
+    async open(id) {
+      const snapshot = ctx.workspaces.list.getSnapshot();
+      const workspace = snapshot.items.find(item => item.workspaceId === id);
+      if (!workspace) throw new Error('项目已被移除，请刷新后重试。');
+      const sessions = ctx.sessions.list.getSnapshot().byId;
+      const recent = workspace.sessionIds.filter(sessionId => sessions[sessionId] && !snapshot.archivedSessionIds.includes(sessionId))
+        .sort((a, b) => sessions[b].updatedAt - sessions[a].updatedAt)[0];
+      if (recent) ctx.uiWorkspace.openSession(recent);
+      else await ctx.uiWorkspace.openWorkspace(id);
+    },
+    async archive(id) {
+      const snapshot = ctx.workspaces.list.getSnapshot();
+      const workspace = snapshot.items.find(item => item.workspaceId === id);
+      if (!workspace) throw new Error('项目已被移除，请刷新后重试。');
+      const ids = workspace.sessionIds.filter(sessionId => !snapshot.archivedSessionIds.includes(sessionId));
+      let archived = 0;
+      const failures = [];
+      for (const sessionId of ids) {
+        try { await ctx.uiWorkspace.archiveSession(sessionId); archived++; }
+        catch (reason) {
+          failures.push(reason instanceof Error ? reason.message : String(reason));
+        }
+      }
+      if (failures.length) throw new Error(`已归档 ${archived} 个聊天，${failures.length} 个未归档：${failures[0]}`);
+      return ids.length ? `已归档 ${archived} 个聊天` : '没有需要归档的聊天';
+    },
+  };
+  ctx.slots.inject('main', () => ctx.slots.register({
+    name: 'main', key: PROJECTS_PANEL,
+    inject: () => ({ actions, hooks: { workspaces: ctx.workspaces.list, sessions: ctx.sessions.list } }),
+  }, ProjectsPage));
+  ctx.slots.inject('sidebar.panellist', () => ctx.slots.register({
+    name: 'sidebar.panellist', id: PROJECTS_PANEL, label: '更多', order: 100,
+    inject: () => ({ openProjects: () => ctx.layout.selectPanel(PROJECTS_PANEL) }),
+  }, ProjectsNav));
+}
+
+const inject = ['slots', 'sessions', 'workspaces', 'layout', 'uiWorkspace'];
 
 // createElement 和 css 由构建入口注入，React 复用宿主提供的模块。
 function ProjectHover({ sessionId, useWorkspaces, useSessions }) {
@@ -74,6 +360,7 @@ function apply(ctx) {
   });
 
   ctx.effect(() => applySidebarWidth(ctx.layout));
+  registerProjects(ctx);
   ctx.slots.inject('sidebar.session.row.hover', () => ctx.slots.register({
     name: 'sidebar.session.row.hover',
     id: 'dsh-css-project',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dsh-tom/dsh-css",
-  "version": "0.1.3",
-  "description": "为 DeepSeek Harness 深色界面调整侧边栏、会话、输入框和代码块的背景颜色。",
+  "version": "0.1.5",
+  "description": "为 DeepSeek Harness 调整深色界面，并增加项目管理列表。",
   "type": "module",
   "main": "./index.js",
   "exports": {
@@ -23,7 +23,8 @@
   },
   "scripts": {
     "build": "node scripts/build.mjs",
-    "check": "node --check index.js && node --check src/client.js && node --check scripts/build.mjs && npm run build && node --check dist/client.js",
+    "test": "node --test test/*.test.mjs",
+    "check": "node --check index.js && node --check src/client.js && node --check src/projects.js && node --check scripts/build.mjs && npm run build && node --check dist/client.js && npm test",
     "prepack": "npm run check"
   }
 }

package/theme.css

@@ -259,3 +259,298 @@ html[data-windows-titlebar] body[data-ds-dark-theme] .dsh-css-project {
     overflow-wrap: anywhere;
   }
 }
+
+/* 项目页通过宿主 main 插槽挂载，菜单和对话框沿用宿主组件。 */
+.dsh-css-more-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dsh-css-more-open {
+  background: var(--dsw-alias-interactive-bg-hover) !important;
+}
+
+html[data-windows-titlebar] body[data-ds-dark-theme] ._2H3hWW_panelRow.dsh-css-more-open::after {
+  display: none;
+}
+
+.dsh-css-projects-page {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-base);
+  font: 14px / 1.5 var(--dsw-font-family);
+}
+
+.dsh-css-projects-content {
+  box-sizing: border-box;
+  width: min(100%, 1408px);
+  margin: 0 auto;
+  padding: 32px;
+}
+
+.dsh-css-projects-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 24px;
+
+  & h1 {
+    margin: 0;
+    font-size: 24px;
+    font-weight: 600;
+  }
+}
+
+.dsh-css-projects-tools,
+.dsh-css-project-dialog-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.dsh-css-projects-page button,
+.dsh-css-project-dialog-actions button {
+  cursor: pointer;
+  font: inherit;
+
+  &:disabled { cursor: default; opacity: .45; }
+}
+
+.dsh-css-project-search {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 240px;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--dsw-alias-border-l3);
+  border-radius: 20px;
+  color: var(--dsw-alias-label-tertiary);
+
+  & input {
+    width: 100%;
+    min-width: 0;
+    border: 0;
+    outline: none;
+    background: transparent;
+    color: var(--dsw-alias-label-primary);
+    font: inherit;
+  }
+
+  &:focus-within { border-color: var(--dsw-alias-label-secondary); }
+}
+
+.dsh-css-project-create,
+.dsh-css-project-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 34px;
+  padding: 6px 16px;
+  border: 1px solid transparent;
+  border-radius: 20px;
+  white-space: nowrap;
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-base);
+}
+
+.dsh-css-project-secondary {
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-border-l3);
+}
+
+.dsh-css-project-columns,
+.dsh-css-project-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 100px 80px;
+  align-items: center;
+  gap: 16px;
+}
+
+.dsh-css-project-columns {
+  min-height: 32px;
+  border-bottom: 1px solid var(--dsw-alias-border-l3);
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+
+  & button { border: 0; padding: 0; color: inherit; background: transparent; }
+}
+
+.dsh-css-project-row {
+  position: relative;
+  min-height: 70px;
+  border-bottom: 1px solid var(--dsw-alias-border-l3);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0 -12px;
+    border-radius: 12px;
+    pointer-events: none;
+  }
+
+  &:is(:hover, :focus-within, .is-open)::before { background: var(--dsw-alias-interactive-bg-hover); }
+  & > * { position: relative; }
+  &:is(:hover, :focus-within, .is-open) .dsh-css-project-chevron { opacity: 1; }
+}
+
+.dsh-css-project-name-cell { min-width: 0; }
+
+.dsh-css-project-name {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  width: 100%;
+  min-height: 70px;
+  padding: 8px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+
+  & svg { flex: none; }
+  & span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+}
+
+.dsh-css-project-chevron { opacity: 0; }
+.dsh-css-project-time { color: var(--dsw-alias-label-secondary); white-space: nowrap; }
+.dsh-css-project-actions { display: flex; gap: 4px; }
+
+.dsh-css-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+
+  &:is(:hover, [aria-expanded='true']) { background: var(--dsw-alias-interactive-bg-hover); }
+}
+
+.dsh-css-projects-page button:focus-visible,
+.dsh-css-project-dialog-actions button:focus-visible {
+  outline: 2px solid var(--dsw-focus-ring-color, var(--dsw-alias-label-secondary));
+  outline-offset: 2px;
+}
+
+.dsh-css-project-empty { padding: 60px 0; text-align: center; color: var(--dsw-alias-label-tertiary); }
+.dsh-css-project-error { color: var(--dsw-alias-state-error-primary, #dc6767); overflow-wrap: anywhere; }
+.dsh-css-project-notice { color: var(--dsw-alias-label-secondary); }
+.dsh-css-project-field { display: flex; flex-direction: column; gap: 10px; }
+.dsh-css-project-field input {
+  padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border-l3);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+}
+.dsh-css-project-path { color: var(--dsw-alias-label-tertiary); font-size: 12px; overflow-wrap: anywhere; }
+
+/* 项目弹窗使用 Codex 的深灰底、圆角和按钮配色。 */
+.dsh-css-project-remove-dialog,
+.dsh-css-project-edit-dialog {
+  gap: 12px;
+  padding-bottom: 20px;
+  border-radius: 22px;
+  box-shadow: none;
+
+  & > :first-child > :first-child { padding: 20px 14px 4px 20px; }
+  & h2 { font-size: 20px; line-height: 26px; font-weight: 600; overflow-wrap: anywhere; }
+  & > :last-child { padding: 0 20px; }
+  & .dsh-css-project-dialog-actions { gap: 12px; }
+  & .dsh-css-project-dialog-actions button { min-height: 32px; padding: 5px 16px; border-radius: 10px; }
+  & .dsh-css-project-secondary { border-color: transparent; }
+}
+
+.dsh-css-project-remove-dialog {
+  width: min(420px, 100%);
+  & .dsh-css-project-remove-content > p { padding: 0 20px; }
+  & .dsh-css-project-remove-content > :last-child { margin-top: 0; padding: 0 20px; }
+}
+
+.dsh-css-project-edit-dialog {
+  width: min(520px, 100%);
+  gap: 20px;
+
+  & .dsh-css-project-edit-content > :first-child { padding-bottom: 12px; }
+  & .dsh-css-project-edit-content > :last-child { margin-top: 0; padding: 0 20px; }
+  & .dsh-css-project-field { gap: 12px; }
+  & .dsh-css-project-name-input {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0 12px;
+    border: 1px solid var(--dsw-alias-border-l3);
+    border-radius: 12px;
+  }
+  & .dsh-css-project-name-input:focus-within { border-color: var(--dsw-alias-label-secondary); }
+  & .dsh-css-project-name-input input {
+    min-width: 0;
+    width: 100%;
+    height: 38px;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+  }
+  & svg { flex: none; }
+  & .dsh-css-project-source { display: flex; flex-direction: column; gap: 8px; }
+  & .dsh-css-project-source-label { font-size: 13px; font-weight: 600; }
+  & .dsh-css-project-path {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 48px;
+    padding: 10px 12px;
+    border: 1px solid var(--dsw-alias-border-l3);
+    border-radius: 10px;
+    color: var(--dsw-alias-label-primary);
+    font-size: 13px;
+  }
+}
+
+body[data-ds-dark-theme] :is(.dsh-css-project-remove-dialog, .dsh-css-project-edit-dialog) {
+  background: rgb(55, 56, 51);
+
+  & h2 { color: rgb(238, 238, 233); }
+  & .dsh-css-project-remove-content > p,
+  & .dsh-css-project-secondary { color: rgb(142, 143, 137); }
+  & .dsh-css-project-secondary:hover:not(:disabled) { background: rgb(255 255 255 / 5%); }
+  & .dsh-css-project-remove { color: rgb(240, 100, 96); background: rgb(76, 61, 56); }
+  & .dsh-css-project-remove:hover:not(:disabled) { background: rgb(88, 65, 60); }
+  & .dsh-css-project-name-input { background: rgb(58, 59, 53); border-color: rgb(80, 81, 74); }
+  & .dsh-css-project-name-input:focus-within { border-color: rgb(148, 149, 138); }
+  & .dsh-css-project-path { background: rgb(58, 59, 53); border-color: rgb(70, 71, 64); }
+  & .dsh-css-project-path svg { color: rgb(142, 143, 137); }
+}
+
+body[data-ds-dark-theme] .dsh-css-project-edit-dialog .dsh-css-project-create {
+  background: rgb(248, 248, 243);
+  color: rgb(55, 56, 51);
+}
+
+body[data-ds-dark-theme] [role='presentation']:has(> :is(.dsh-css-project-remove-dialog, .dsh-css-project-edit-dialog)) {
+  --dsw-alias-bg-mask-1: rgb(0 0 0 / 15%);
+}
+
+@media (max-width: 760px) {
+  .dsh-css-projects-content { padding: 24px 20px; }
+  .dsh-css-projects-header { align-items: stretch; flex-direction: column; }
+  .dsh-css-project-search { flex: 1; width: auto; }
+  .dsh-css-project-columns, .dsh-css-project-row { grid-template-columns: minmax(0, 1fr) 64px 68px; gap: 8px; }
+  .dsh-css-project-name { gap: 10px; }
+}