@xcanwin/manyoyo 6.2.4 → 6.2.6

package/lib/web/frontend/app.css

@@ -13,9 +13,8 @@
 
     --line: #d9c7ad;
     --line-strong: #b59263;
-    --tree-guide: rgba(181, 146, 99, 0.44);
-    --tree-guide-soft: rgba(181, 146, 99, 0.44);
-    --tree-active: #ecdfc8;
+    --tree-active: #e0c99b;
+    --session-card-hover: #f0e0c4;
 
     --surface-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(252, 246, 236, 0.88) 100%);
 
@@ -394,7 +393,8 @@ textarea:focus-visible {
 
 .form-grid input,
 .form-grid select,
-.text-block textarea {
+.text-block textarea,
+.text-block input {
     border: 1px solid var(--line);
     border-radius: 10px;
     padding: 9px 11px;
@@ -528,138 +528,80 @@ textarea:focus-visible {
     border-radius: 8px;
 }
 
-.tree-node-block,
-.tree-node-children {
+.crumb-bar {
     display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.tree-node-row {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    align-items: stretch;
-    column-gap: 8px;
-}
-
-.tree-node-row.tree-node-row-container,
-.tree-node-row.tree-node-row-agent {
-    position: relative;
-}
-
-.tree-prefix {
-    min-height: 38px;
-    display: inline-flex;
-    align-items: stretch;
-    gap: 3px;
-    position: relative;
-}
-
-.tree-prefix-toggle {
-    position: relative;
-    width: 16px;
-    flex: 0 0 16px;
-    display: inline-flex;
+    flex-wrap: wrap;
     align-items: center;
-    justify-content: center;
-}
-
-.tree-prefix-segment,
-.tree-prefix-branch {
-    position: relative;
-    width: 10px;
-    flex: 0 0 10px;
-}
-
-.tree-prefix-branch::before,
-.tree-prefix-branch::after {
-    content: "";
-    position: absolute;
-    background: var(--tree-guide);
+    gap: 6px;
+    padding: 0 2px;
+    min-height: 20px;
 }
 
-.tree-prefix-branch::before {
-    left: 5px;
-    top: -6px;
-    bottom: 50%;
-    width: 1px;
+.container-search-input {
+    width: 100%;
+    font-size: 12px;
+    padding: 6px 9px;
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    background: var(--panel-soft);
+    color: var(--text);
 }
 
-.tree-prefix-branch.is-mid::before {
-    bottom: -6px;
+.container-search-input[hidden] {
+    display: none;
 }
 
-.tree-prefix-branch::after {
-    left: 5px;
-    top: 50%;
-    width: 9px;
-    height: 1px;
-    background: var(--tree-guide-soft);
+.crumb-item {
+    border: none;
+    background: transparent;
+    color: var(--accent-strong);
+    font-size: 12px;
+    font-weight: 600;
+    padding: 2px 2px;
+    border-radius: 6px;
+    cursor: pointer;
+    max-width: 220px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
-.tree-prefix-leaf {
-    position: relative;
-    width: 12px;
-    flex: 0 0 12px;
+.crumb-item:hover {
+    transform: none;
+    text-decoration: underline;
 }
 
-.tree-prefix-leaf::before {
-    content: "";
-    position: absolute;
-    left: 1px;
-    top: 50%;
-    width: 10px;
-    height: 1px;
-    background: var(--tree-guide-soft);
-    transform: translateY(0);
+.crumb-item.is-current {
+    color: var(--text);
+    cursor: default;
+    font-weight: 700;
 }
 
-.disclosure-toggle {
-    width: 16px;
-    height: 16px;
-    padding: 0;
-    align-self: center;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    border-radius: 6px;
-    color: #8c7257;
-    background: transparent;
-    transition: transform 140ms ease, background-color 140ms ease, color 140ms ease;
+.crumb-item.is-current:hover {
+    text-decoration: none;
 }
 
-.disclosure-toggle svg {
-    width: 12px;
-    height: 12px;
-    display: block;
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 1.8;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    vector-effect: non-scaling-stroke;
+.crumb-sep {
+    color: #a3927c;
+    font-size: 12px;
 }
 
-.disclosure-toggle:hover {
-    transform: none;
+.crumb-jump-active {
+    margin-left: auto;
+    border: 1px solid var(--line);
+    background: var(--panel-soft);
     color: var(--accent-strong);
-    background: rgba(196, 85, 31, 0.08);
-}
-
-.disclosure-toggle:active {
-    transform: none;
-}
-
-.disclosure-toggle[aria-expanded="true"] {
-    transform: rotate(90deg);
+    font-size: 11px;
+    font-weight: 600;
+    padding: 3px 8px;
+    border-radius: 999px;
 }
 
-.disclosure-toggle[aria-expanded="true"]:hover {
-    transform: rotate(90deg);
+.session-card {
+    position: relative;
 }
 
-.tree-node-button {
+.session-card-button {
     width: 100%;
     text-align: left;
     border: 1px solid transparent;
@@ -670,67 +612,86 @@ textarea:focus-visible {
     transition: background-color 120ms ease;
 }
 
-.tree-node-button:hover {
+.session-card-container .session-card-button,
+.session-card-agent .session-card-button {
+    padding-right: 38px;
+}
+
+.session-card-button:hover {
     transform: none;
-    background: var(--panel-soft);
+    background: var(--session-card-hover);
 }
 
-.tree-node-button:active {
+.session-card-button:active {
     transform: none;
 }
 
-.tree-node-button:focus-visible {
+.session-card-button:focus-visible {
     outline: none;
     box-shadow: 0 0 0 3px rgba(196, 85, 31, 0.14);
 }
 
-.tree-node-button.active {
+.session-card-button.active {
     background: var(--tree-active);
 }
 
-.tree-node-button.tree-node-tone-history .tree-node-title,
-.tree-node-button.tree-node-tone-history .tree-node-meta {
+.session-card.tree-node-tone-history .session-card-title,
+.session-card.tree-node-tone-history .session-card-meta {
     color: var(--tree-history-text);
 }
 
-.tree-node-block.has-active > .tree-node-row > .tree-node-button:not(.active) {
-    background: var(--panel-soft);
-}
-
-.tree-node-row-container .tree-node-button-container,
-.tree-node-row-agent .tree-node-button-agent {
-    padding-right: 38px;
+.session-card.has-active .session-card-button:not(.active) {
+    background: var(--tree-active);
 }
 
-.tree-node-main {
+.session-card-main {
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 6px;
 }
 
-.tree-node-title {
+.session-card-title-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.session-card-title {
     margin-top: 0;
     font-weight: 700;
     font-size: 13px;
     line-height: 1.5;
     overflow-wrap: anywhere;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
-.tree-node-button-directory .tree-node-title,
-.tree-node-button-container .tree-node-title {
+.session-card-container .session-card-title {
     font-family: var(--font-mono);
     font-size: 12px;
     font-weight: 600;
 }
 
-.tree-node-meta {
+.session-card-meta {
     color: #7b6d5d;
     font-size: 11px;
     line-height: 1.45;
     overflow-wrap: anywhere;
 }
 
+.session-card-submeta {
+    color: #a3927c;
+    font-size: 10px;
+    line-height: 1.4;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .tree-node-status {
     font-weight: 700;
     font-size: 12px;
@@ -763,7 +724,7 @@ textarea:focus-visible {
     transition: opacity 140ms ease;
 }
 
-.tree-node-row:hover .tree-node-menu,
+.session-card:hover .tree-node-menu,
 .tree-node-menu:focus-within,
 .tree-node-menu.is-open {
     opacity: 1;
@@ -843,10 +804,6 @@ textarea:focus-visible {
     background: var(--danger-soft);
 }
 
-.tree-node-children[hidden] {
-    display: none;
-}
-
 .dir-picker-modal {
     width: min(720px, calc(100vw - 24px));
 }

package/lib/web/frontend/app.html

@@ -32,7 +32,15 @@
                 <span>工作台</span>
                 <span id="sessionCount">0 个</span>
             </div>
-            <div id="sessionList" role="tree" aria-label="会话树"></div>
+            <nav class="crumb-bar" id="sessionBreadcrumb" aria-label="导航路径"></nav>
+            <input
+                type="text"
+                id="containerSearchInput"
+                class="container-search-input"
+                placeholder="按工作目录 / 容器名搜索"
+                spellcheck="false"
+            />
+            <div id="sessionList" aria-label="容器与 AGENT 列表"></div>
             <div class="sidebar-bottom">
                 <button type="button" id="openConfigBtn" class="secondary">系统设置</button>
             </div>
@@ -295,6 +303,25 @@
                 </footer>
             </section>
         </div>
+
+        <div id="cloneNameModal" class="modal-backdrop" hidden>
+            <section class="modal" role="dialog" aria-modal="true" aria-labelledby="cloneNameTitle">
+                <header class="modal-header">
+                    <h2 id="cloneNameTitle">创建相同配置容器</h2>
+                    <button type="button" id="cloneNameCancelBtn" class="secondary">关闭</button>
+                </header>
+                <div class="modal-body">
+                    <div id="cloneNameTip" class="modal-tip"></div>
+                    <label class="text-block">新容器名称
+                        <input type="text" id="cloneNameInput" spellcheck="false" />
+                    </label>
+                    <div id="cloneNameError" class="modal-error" hidden></div>
+                </div>
+                <footer class="modal-footer">
+                    <button type="button" id="cloneNameConfirmBtn">确认</button>
+                </footer>
+            </section>
+        </div>
     </div>
 
     <script src="/app/vendor/xterm.js"></script>