codexmate 0.0.26 → 0.0.28

package/web-ui/session-helpers.mjs

@@ -160,7 +160,7 @@ export function switchMainTab(tab) {
         this.prepareSessionTabRender();
     }
     const shouldLoadTrashListOnSettingsEnter = nextTab === 'settings'
-        && this.settingsTab === 'trash'
+        && this.settingsTab === 'data'
         && typeof this.loadSessionTrash === 'function';
     if (shouldLoadTrashListOnSettingsEnter) {
         this.loadSessionTrash({
@@ -168,7 +168,7 @@ export function switchMainTab(tab) {
         });
     }
     const shouldPrimeTrashCountOnSettingsEnter = nextTab === 'settings'
-        && this.settingsTab !== 'trash'
+        && this.settingsTab !== 'data'
         && typeof this.loadSessionTrashCount === 'function';
     if (shouldPrimeTrashCountOnSettingsEnter) {
         this.sessionTrashLoadedOnce = false;

package/web-ui/styles/base-theme.css

@@ -4,34 +4,36 @@
    设计系统 - Design Tokens
    ============================================ */
 :root {
-    /* 色彩系统：中性灰（更贴近 craft/shadcn 观感）+ 品牌强调 */
-    --color-brand: #C77462;
-    --color-brand-dark: #B45E4E;
-    --color-brand-light: rgba(199, 116, 98, 0.12);
-    --color-brand-subtle: rgba(199, 116, 98, 0.18);
-
-    --color-bg: #FAFAFA;
-    --color-surface: #FFFFFF;
-    --color-surface-alt: #F4F4F5;
+    /* 色彩系统：低饱和暖色 + 桌面助理式柔和层级 */
+    --color-brand: #C87963;
+    --color-brand-dark: #A95845;
+    --color-brand-light: rgba(200, 121, 99, 0.13);
+    --color-brand-subtle: rgba(200, 121, 99, 0.2);
+
+    --color-bg: #F7F0E9;
+    --color-surface: #FFFDFC;
+    --color-surface-alt: #F7EFE8;
     --color-surface-elevated: #FFFFFF;
-    --color-surface-tint: rgba(255, 255, 255, 0.92);
-    --color-text-primary: #18181B;
-    --color-text-secondary: #3F3F46;
-    --color-text-tertiary: #71717A;
-    --color-text-muted: #A1A1AA;
-    --color-border: #E4E4E7;
-    --color-border-soft: rgba(24, 24, 27, 0.12);
-    --color-border-strong: rgba(24, 24, 27, 0.24);
+    --color-surface-tint: rgba(255, 253, 250, 0.86);
+    --color-text-primary: #241F1C;
+    --color-text-secondary: #5A504A;
+    --color-text-tertiary: #82746A;
+    --color-text-muted: #A99B91;
+    --color-border: rgba(137, 111, 94, 0.18);
+    --color-border-soft: rgba(137, 111, 94, 0.13);
+    --color-border-strong: rgba(137, 111, 94, 0.34);
 
     --color-success: #4B8B6A;
     --color-error: #C44536;
 
     --bg-warm-gradient:
-        linear-gradient(180deg, #FAFAFA 0%, #FAFAFA 100%);
+        radial-gradient(circle at 14% 8%, rgba(255, 219, 196, 0.5) 0%, rgba(255, 219, 196, 0) 32%),
+        radial-gradient(circle at 88% 0%, rgba(252, 239, 207, 0.58) 0%, rgba(252, 239, 207, 0) 30%),
+        linear-gradient(135deg, #FFF8F1 0%, #F7F0E9 46%, #F1E8DF 100%);
 
-    --color-bg-topbar-strong: rgba(250, 250, 250, 0.96);
-    --color-bg-topbar-soft: rgba(250, 250, 250, 0.9);
-    --color-bg-topbar-clear: rgba(250, 250, 250, 0);
+    --color-bg-topbar-strong: rgba(255, 248, 241, 0.96);
+    --color-bg-topbar-soft: rgba(255, 248, 241, 0.86);
+    --color-bg-topbar-clear: rgba(255, 248, 241, 0);
 
     /* 字体系统 */
     --font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
@@ -64,24 +66,24 @@
     --spacing-xl: 64px;
 
     /* 圆角系统 */
-    --radius-sm: 8px;
-    --radius-md: 10px;
-    --radius-lg: 12px;
-    --radius-xl: 16px;
+    --radius-sm: 10px;
+    --radius-md: 14px;
+    --radius-lg: 18px;
+    --radius-xl: 24px;
     --radius-full: 50px;
 
-    /* 阴影系统 - 更偏中性与克制 */
-    --shadow-subtle: 0 1px 2px rgba(24, 24, 27, 0.04);
-    --shadow-card: 0 1px 3px rgba(24, 24, 27, 0.06);
-    --shadow-card-hover: 0 8px 26px rgba(24, 24, 27, 0.12);
-    --shadow-float: 0 14px 36px rgba(24, 24, 27, 0.16);
-    --shadow-raised: 0 8px 18px rgba(24, 24, 27, 0.12);
+    /* 阴影系统 - 柔和桌面浮层 */
+    --shadow-subtle: 0 1px 2px rgba(60, 47, 38, 0.05);
+    --shadow-card: 0 12px 30px rgba(92, 68, 52, 0.08);
+    --shadow-card-hover: 0 18px 44px rgba(92, 68, 52, 0.14);
+    --shadow-float: 0 22px 56px rgba(70, 51, 39, 0.18);
+    --shadow-raised: 0 14px 30px rgba(92, 68, 52, 0.14);
     --shadow-modal:
-        0 10px 30px rgba(24, 24, 27, 0.14),
-        0 28px 72px rgba(24, 24, 27, 0.12);
+        0 16px 42px rgba(70, 51, 39, 0.16),
+        0 34px 84px rgba(70, 51, 39, 0.16);
     --shadow-input-focus:
         0 0 0 3px var(--color-brand-light),
-        0 1px 2px rgba(24, 24, 27, 0.06);
+        0 1px 2px rgba(60, 47, 38, 0.06);
 
     /* 动画 - 更细腻的曲线 */
     --transition-instant: 100ms;
@@ -266,3 +268,14 @@ body {
     position: relative;
     overflow-x: hidden;
 }
+
+body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    background:
+        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 26%),
+        radial-gradient(circle at 86% 18%, rgba(255, 232, 206, 0.36), rgba(255, 232, 206, 0) 30%);
+    z-index: 0;
+}

package/web-ui/styles/controls-forms.css

@@ -2,13 +2,12 @@
    选择器 - 用于模型选择
    ============================================ */
 .selector-section {
-    background: transparent;
-    border-radius: 0;
-    padding: 12px 0 0;
+    background: rgba(255, 255, 255, 0.36);
+    border-radius: var(--radius-md);
+    padding: 12px;
     margin-bottom: 12px;
-    box-shadow: none;
-    border: none;
-    border-top: 1px solid var(--color-border);
+    box-shadow: var(--shadow-subtle);
+    border: 1px solid var(--color-border-soft);
     display: flex;
     flex-direction: column;
     gap: 6px;
@@ -125,9 +124,9 @@
     min-height: 28px !important;
     padding: 0 10px !important;
     line-height: 1 !important;
-    border-radius: 8px !important;
+    border-radius: var(--radius-sm) !important;
     border: 1px solid var(--color-border-soft) !important;
-    background: rgba(255, 255, 255, 0.72) !important;
+    background: rgba(255, 255, 255, 0.76) !important;
     font-size: 12px !important;
     font-weight: var(--font-weight-secondary) !important;
     color: var(--color-text-secondary) !important;
@@ -197,12 +196,12 @@
     align-items: center;
     justify-content: center;
     transition: all var(--transition-fast) var(--ease-spring);
-    box-shadow: 0 2px 4px rgba(210, 107, 90, 0.2);
+    box-shadow: 0 8px 18px rgba(92, 68, 52, 0.12);
 }
 
 .btn-icon:hover {
     transform: translateY(-1px) scale(1.05);
-    box-shadow: 0 4px 8px rgba(210, 107, 90, 0.25);
+    box-shadow: 0 12px 24px rgba(92, 68, 52, 0.16);
 }
 
 .btn-icon:active {
@@ -214,11 +213,11 @@
     min-height: 36px;
     padding: 8px 10px;
     padding-right: 34px;
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
+    border: 1px solid var(--color-border-soft);
+    border-radius: var(--radius-sm);
     font-size: 13px;
     font-weight: var(--font-weight-body);
-    background-color: var(--color-surface);
+    background-color: rgba(255, 255, 255, 0.72);
     color: var(--color-text-primary);
     outline: none;
     cursor: pointer;
@@ -228,12 +227,12 @@
     background-position: right 14px center;
     background-size: 12px;
     transition: all var(--transition-fast) var(--ease-smooth);
-    box-shadow: none;
+    box-shadow: var(--shadow-subtle);
 }
 
 .model-select:hover {
     border-color: var(--color-border-strong);
-    background-color: var(--color-surface);
+    background-color: rgba(255, 255, 255, 0.9);
 }
 
 .model-select:focus {
@@ -246,20 +245,20 @@
     width: 100%;
     min-height: 36px;
     padding: 8px 10px;
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
+    border: 1px solid var(--color-border-soft);
+    border-radius: var(--radius-sm);
     font-size: 13px;
     font-weight: var(--font-weight-body);
-    background-color: var(--color-surface);
+    background-color: rgba(255, 255, 255, 0.72);
     color: var(--color-text-primary);
     outline: none;
     transition: all var(--transition-fast) var(--ease-smooth);
-    box-shadow: none;
+    box-shadow: var(--shadow-subtle);
 }
 
 .model-input:hover {
     border-color: var(--color-border-strong);
-    background-color: var(--color-surface);
+    background-color: rgba(255, 255, 255, 0.9);
 }
 
 .model-input:focus {
@@ -300,9 +299,9 @@
     width: 100%;
     min-height: 38px;
     padding: 8px 10px;
-    border: 1px dashed rgba(208, 196, 182, 0.55);
-    border-radius: 8px;
-    background: rgba(255, 255, 255, 0.22);
+    border: 1px dashed rgba(137, 111, 94, 0.28);
+    border-radius: var(--radius-md);
+    background: rgba(255, 255, 255, 0.42);
     font-size: 13px;
     font-weight: var(--font-weight-secondary);
     color: var(--color-text-tertiary);
@@ -324,7 +323,7 @@
 .btn-add:hover {
     border-color: var(--color-brand);
     color: var(--color-brand);
-    background: linear-gradient(to bottom, rgba(210, 107, 90, 0.05) 0%, rgba(210, 107, 90, 0.02) 100%);
+    background: linear-gradient(to bottom, rgba(200, 121, 99, 0.12) 0%, rgba(255, 255, 255, 0.52) 100%);
     transform: translateY(-1px);
 }
 
@@ -345,15 +344,15 @@
 .btn-tool {
     min-height: 36px;
     padding: 8px 10px;
-    border-radius: 8px;
+    border-radius: var(--radius-sm);
     border: 1px solid var(--color-border-soft);
-    background: rgba(255, 255, 255, 0.72);
+    background: rgba(255, 255, 255, 0.68);
     font-size: 13px;
     font-weight: var(--font-weight-secondary);
     color: var(--color-text-secondary);
     cursor: pointer;
     transition: all var(--transition-fast) var(--ease-spring);
-    box-shadow: none;
+    box-shadow: var(--shadow-subtle);
     letter-spacing: -0.01em;
     width: 100%;
     text-align: center;
@@ -379,7 +378,7 @@
     border-color: var(--color-brand);
     color: var(--color-brand);
     transform: translateY(-1px);
-    box-shadow: 0 4px 8px rgba(210, 107, 90, 0.12);
+    box-shadow: 0 10px 22px rgba(92, 68, 52, 0.1);
 }
 
 .btn-tool:disabled,

package/web-ui/styles/layout-shell.css

@@ -3,7 +3,7 @@
    ============================================ */
 body::before,
 body::after {
-    content: none;
+    pointer-events: none;
 }
 
 /* ============================================
@@ -34,7 +34,7 @@ body::after {
     min-height: 100vh;
     height: 100vh;
     overflow: hidden;
-    background: var(--color-bg);
+    background: transparent;
 }
 
 .app-shell.standalone {
@@ -48,16 +48,17 @@ body::after {
     display: flex;
     flex-direction: column;
     gap: 0;
-    padding: 0;
-    background: var(--color-surface);
-    border-right: 1px solid var(--color-border);
+    padding: 10px 8px;
+    background:
+        linear-gradient(180deg, rgba(255, 253, 250, 0.92) 0%, rgba(255, 248, 241, 0.82) 100%);
+    border-right: 1px solid rgba(137, 111, 94, 0.16);
     border-radius: 0;
-    box-shadow: none;
+    box-shadow: 18px 0 42px rgba(92, 68, 52, 0.08);
     min-height: 100vh;
     overflow-y: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
-    backdrop-filter: none;
+    backdrop-filter: blur(18px) saturate(130%);
 }
 
 .side-rail::-webkit-scrollbar {
@@ -73,11 +74,11 @@ body::after {
     display: flex;
     flex-direction: column;
     gap: 4px;
-    padding: 6px;
+    padding: 7px 4px;
 }
 
 .side-section + .side-section {
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid rgba(137, 111, 94, 0.12);
 }
 
 .side-rail-nav {
@@ -129,8 +130,8 @@ body::after {
 }
 
 .lang-choice-btn.active {
-    border-color: rgba(199, 116, 98, 0.55);
-    background: rgba(199, 116, 98, 0.14);
+    border-color: rgba(200, 121, 99, 0.55);
+    background: rgba(200, 121, 99, 0.14);
     color: var(--color-brand-dark);
 }
 
@@ -201,7 +202,7 @@ body::after {
 }
 
 .lang-fab .lang-switch:hover .lang-switch-track {
-    border-color: rgba(199, 116, 98, 0.7);
+    border-color: rgba(200, 121, 99, 0.7);
 }
 
 .side-rail-lang {
@@ -209,10 +210,10 @@ body::after {
     bottom: 0;
     z-index: 2;
     margin-top: auto;
-    padding: 12px 10px;
-    background: transparent;
-    border-top: 1px solid var(--color-border);
-    backdrop-filter: none;
+    padding: 12px 4px 4px;
+    background: linear-gradient(180deg, rgba(255, 248, 241, 0), rgba(255, 248, 241, 0.92) 34%);
+    border-top: 1px solid rgba(137, 111, 94, 0.12);
+    backdrop-filter: blur(10px);
     display: flex;
     justify-content: center;
 }
@@ -249,7 +250,7 @@ body::after {
 }
 
 .lang-switch:hover .lang-switch-track {
-    border-color: rgba(199, 116, 98, 0.6);
+    border-color: rgba(200, 121, 99, 0.6);
     background: rgba(255, 253, 252, 0.92);
     transform: translateY(-1px);
 }
@@ -297,7 +298,7 @@ body::after {
     content: "";
     position: absolute;
     inset: -20px;
-    background: radial-gradient(circle at 30% 20%, rgba(199, 116, 98, 0.18), rgba(199, 116, 98, 0) 55%);
+    background: radial-gradient(circle at 30% 20%, rgba(200, 121, 99, 0.18), rgba(200, 121, 99, 0) 55%);
     opacity: 0;
     transform: translateY(10px);
     transition: opacity 240ms var(--ease-smooth), transform 240ms var(--ease-smooth);
@@ -322,13 +323,13 @@ body::after {
 .side-item {
     width: 100%;
     text-align: left;
-    padding: 5px;
-    border-radius: 8px;
+    padding: 8px 10px;
+    border-radius: 13px;
     border: 1px solid transparent;
     background: transparent;
     color: var(--color-text-secondary);
     cursor: pointer;
-    transition: border-color var(--transition-fast) var(--ease-smooth), background-color var(--transition-fast) var(--ease-smooth), color var(--transition-fast) var(--ease-smooth);
+    transition: border-color var(--transition-fast) var(--ease-smooth), background-color var(--transition-fast) var(--ease-smooth), color var(--transition-fast) var(--ease-smooth), box-shadow var(--transition-fast) var(--ease-smooth), transform var(--transition-fast) var(--ease-smooth);
     display: flex;
     flex-direction: column;
     gap: 2px;
@@ -351,16 +352,18 @@ body::after {
 }
 
 .side-item:hover {
-    background: var(--color-surface-alt);
+    background: rgba(255, 255, 255, 0.58);
     color: var(--color-text-primary);
+    transform: translateY(-1px);
 }
 
 .side-item.active,
 .side-item.nav-intent-active {
-    border-color: transparent;
-    background: var(--color-brand-light);
+    border-color: rgba(200, 121, 99, 0.28);
+    background:
+        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(200, 121, 99, 0.14));
     color: var(--color-brand-dark);
-    box-shadow: none;
+    box-shadow: 0 10px 24px rgba(92, 68, 52, 0.08);
 }
 
 .side-item.nav-intent-inactive,
@@ -421,8 +424,8 @@ body::after {
     align-items: flex-start;
     gap: 10px;
     margin-bottom: 0;
-    padding: 20px;
-    border-bottom: 1px solid var(--color-border);
+    padding: 16px 10px 18px;
+    border-bottom: 1px solid rgba(137, 111, 94, 0.12);
 }
 
 .brand-head {
@@ -434,10 +437,10 @@ body::after {
 .brand-logo {
     width: 38px;
     height: 38px;
-    border-radius: 10px;
+    border-radius: 14px;
     object-fit: cover;
     flex-shrink: 0;
-    box-shadow: var(--shadow-subtle);
+    box-shadow: 0 12px 26px rgba(92, 68, 52, 0.12);
 }
 
 .brand-copy {
@@ -497,10 +500,10 @@ body::after {
     justify-content: flex-start;
     gap: 8px;
     padding: 8px 10px;
-    border-radius: 8px;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    box-shadow: none;
+    border-radius: 13px;
+    background: rgba(255, 255, 255, 0.62);
+    border: 1px solid rgba(137, 111, 94, 0.15);
+    box-shadow: var(--shadow-subtle);
 }
 
 .github-badge:hover {
@@ -511,7 +514,7 @@ body::after {
 }
 
 .github-badge:focus-visible {
-    outline: 3px solid rgba(199, 116, 98, 0.18);
+    outline: 3px solid rgba(200, 121, 99, 0.18);
     outline-offset: 2px;
     border-color: var(--color-brand);
     color: var(--color-text-primary);

package/web-ui/styles/modals-core.css

@@ -17,7 +17,9 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(to bottom, rgba(31, 26, 23, 0.3) 0%, rgba(31, 26, 23, 0.5) 100%);
+    background:
+        radial-gradient(circle at 50% 18%, rgba(255, 248, 241, 0.22), rgba(255, 248, 241, 0) 36%),
+        linear-gradient(to bottom, rgba(31, 26, 23, 0.28) 0%, rgba(31, 26, 23, 0.48) 100%);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -28,16 +30,16 @@
 }
 
 .modal {
-    background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(255, 255, 255, 0.98) 100%);
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.96) 0%, rgba(255, 250, 246, 0.94) 100%);
     width: 90%;
     max-width: 400px;
     max-height: 90vh;
     overflow-y: auto;
     overscroll-behavior: contain;
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius-xl);
     padding: var(--spacing-md);
     box-shadow: var(--shadow-modal);
-    border: 1px solid rgba(255, 255, 255, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.72);
     animation: modalSlideUp var(--transition-slow) var(--ease-spring);
 }
 
@@ -75,8 +77,8 @@
     margin-top: 0;
     padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
     border-top: 1px solid var(--color-border-soft);
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.96) 100%);
-    backdrop-filter: blur(2px);
+    background: linear-gradient(to bottom, rgba(255, 250, 246, 0.78) 0%, rgba(255, 250, 246, 0.96) 100%);
+    backdrop-filter: blur(10px);
 }
 
 .modal-title {
@@ -116,8 +118,8 @@
     gap: var(--spacing-sm);
     padding: 10px 12px;
     border: 1px solid var(--color-border-soft);
-    border-radius: var(--radius-lg);
-    background: var(--color-surface-alt);
+    border-radius: var(--radius-md);
+    background: rgba(255, 255, 255, 0.48);
 }
 
 .install-row-main {
@@ -138,7 +140,7 @@
     font-size: var(--font-size-secondary);
     color: var(--color-text-primary);
     word-break: break-all;
-    background: rgba(255, 255, 255, 0.7);
+    background: rgba(255, 255, 255, 0.72);
     padding: 8px 10px;
     border-radius: var(--radius-sm);
     border: 1px solid var(--color-border-soft);
@@ -156,7 +158,7 @@
 
 .install-action-tabs .btn-mini.active {
     background: var(--color-brand-light);
-    border-color: rgba(199, 116, 98, 0.22);
+    border-color: rgba(200, 121, 99, 0.22);
     color: var(--color-brand-dark);
 }