@dsh-tom/dsh-css 0.1.5 → 0.1.6

package/README.md

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

package/dist/client.js

@@ -4,7 +4,7 @@ window.__ModuleLoader__.load({
   factory: (require) => {
     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";
+    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  /* 平铺会话标题与“会话”左对齐，状态图标放到右侧。 */\n  & ._9lTDKa_flatList .hIlkoa_sessionRow {\n    padding-inline-start: 4px;\n\n    & > .hIlkoa_title {\n      margin-left: 0;\n    }\n\n    & > .hIlkoa_slot {\n      order: 1;\n    }\n\n    & > .hIlkoa_slot:empty {\n      display: none;\n    }\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';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsh-tom/dsh-css",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "为 DeepSeek Harness 调整深色界面，并增加项目管理列表。",
   "type": "module",
   "main": "./index.js",

package/theme.css

@@ -166,6 +166,23 @@ html[data-windows-titlebar] body[data-ds-dark-theme] ._2H3hWW_root:not(._2H3hWW_
     padding: 44px 0 0 12px;
   }
 
+  /* 平铺会话标题与“会话”左对齐，状态图标放到右侧。 */
+  & ._9lTDKa_flatList .hIlkoa_sessionRow {
+    padding-inline-start: 4px;
+
+    & > .hIlkoa_title {
+      margin-left: 0;
+    }
+
+    & > .hIlkoa_slot {
+      order: 1;
+    }
+
+    & > .hIlkoa_slot:empty {
+      display: none;
+    }
+  }
+
   & ._2H3hWW_footArea {
     grid-area: 4 / 1;
     position: relative;