diff --git a/memhub/apps/web/src/EmbeddingSwitchExperience.tsx b/memhub/apps/web/src/EmbeddingSwitchExperience.tsx index 1391c72..2032d22 100644 --- a/memhub/apps/web/src/EmbeddingSwitchExperience.tsx +++ b/memhub/apps/web/src/EmbeddingSwitchExperience.tsx @@ -3,7 +3,7 @@ import type { EmbeddingSwitchJob, EmbeddingSwitchPlan, } from "@one-memory/contracts"; -import { ChevronDown, CircleAlert, Search, X } from "lucide-react"; +import { ChevronDown, CircleAlert, X } from "lucide-react"; import { useEffect, useRef, useState } from "react"; import { deleteRetiredEmbeddingSpace } from "./api"; import { R6Button } from "./R6Controls"; @@ -81,10 +81,13 @@ export function EmbeddingSwitchConfirmDialog({ }, []); return ( -
+
-

更新记忆搜索索引?

@@ -390,13 +390,13 @@ export function EmbeddingSwitchGlobalStatus({ 清理旧索引 ) : null} - +

) : null} @@ -426,13 +426,13 @@ export function EmbeddingSwitchGlobalStatus({ 检查连接 - +
) : null} diff --git a/memhub/apps/web/src/embedding-switch.css b/memhub/apps/web/src/embedding-switch.css index 6fb2333..d49e5cd 100644 --- a/memhub/apps/web/src/embedding-switch.css +++ b/memhub/apps/web/src/embedding-switch.css @@ -1,44 +1,21 @@ -.embedding-switch-dialog-layer { - position: fixed; - inset: 0; +.r6-settings-dialog-layer.embedding-switch-dialog-layer { z-index: 120; - display: grid; - place-items: center; - padding: 24px; - background: rgb(24 31 36 / 28%); - backdrop-filter: blur(10px); } -.embedding-switch-dialog { +.r6-settings-dialog.embedding-switch-dialog { box-sizing: border-box; - width: min(600px, 100%); + width: min(600px, calc(100vw - 40px)); max-height: calc(100vh - 48px); overflow: auto; - padding: 28px; - border: 1px solid #d7dfe5; - border-radius: 14px; - background: #fff; - color: #26343e; + color: var(--r6-text); } .embedding-switch-dialog > header { display: flex; - gap: 14px; align-items: flex-start; } -.embedding-switch-dialog-icon { - display: grid; - width: 36px; - height: 36px; - flex: 0 0 auto; - place-items: center; - border-radius: 9px; - background: #edf2f5; - color: #425b6c; -} - -.embedding-switch-dialog h2 { +.r6-settings-dialog.embedding-switch-dialog h2 { margin: 0 0 6px; font-size: 20px; line-height: 28px; @@ -47,30 +24,30 @@ .embedding-switch-safety p, .embedding-switch-dialog header p { margin: 0; - color: #61717d; + color: var(--r6-muted); font-size: 13px; - line-height: 21px; + line-height: 22px; } .embedding-switch-impact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 1px; margin: 22px 0; - overflow: hidden; - border: 1px solid #dce3e8; - border-radius: 10px; - background: #dce3e8; + border-block: 1px solid var(--bd); } .embedding-switch-impact > div { - padding: 14px 16px; - background: #f8fafb; + padding: 14px 16px 14px 0; +} + +.embedding-switch-impact > div + div { + padding-left: 16px; + border-left: 1px solid var(--bd); } .embedding-switch-impact dt, .embedding-switch-details dt { - color: #71808b; + color: var(--meta-reading); font-size: 12px; line-height: 18px; } @@ -78,9 +55,10 @@ .embedding-switch-impact dd, .embedding-switch-details dd { margin: 3px 0 0; - color: #26343e; + color: var(--r6-text); font-size: 14px; font-weight: 600; + font-variant-numeric: tabular-nums; line-height: 21px; } @@ -89,8 +67,7 @@ grid-template-columns: 170px minmax(0, 1fr); gap: 10px 18px; padding: 18px 0; - border-top: 1px solid #e2e7eb; - border-bottom: 1px solid #e2e7eb; + border-bottom: 1px solid var(--bd); } .embedding-switch-safety strong { @@ -107,11 +84,16 @@ align-items: center; gap: 6px; min-height: 32px; - color: #526773; + color: var(--r6-muted); font-size: 13px; cursor: pointer; } +.embedding-switch-details summary:focus-visible { + outline: 2px solid var(--r6-focus); + outline-offset: 2px; +} + .embedding-switch-alert svg { flex: 0 0 auto; margin-top: 2px; @@ -127,8 +109,9 @@ gap: 14px 24px; margin: 12px 0 0; padding: 16px; - border-radius: 9px; - background: #f6f8f9; + border-top: 1px solid var(--bd); + border-radius: 0; + background: transparent; } .embedding-switch-alert { @@ -138,13 +121,14 @@ margin-top: 16px; padding: 11px 12px; border-radius: 8px; - background: #fff3f1; - color: #873f38; + border: 1px solid var(--dg-bd); + background: var(--dg-bg); + color: var(--dg); font-size: 13px; line-height: 20px; } -.embedding-switch-dialog footer { +.r6-settings-dialog.embedding-switch-dialog footer { display: flex; justify-content: flex-end; gap: 10px; @@ -155,13 +139,13 @@ .embedding-switch-outcome { box-sizing: border-box; display: flex; - min-height: 58px; + min-height: 50px; align-items: center; gap: 16px; - padding: 11px 18px; - border-bottom: 1px solid #d9e1e6; - background: #f8fafb; - color: #2f424f; + padding: 9px 18px; + border-bottom: 0.5px solid var(--bd); + background: var(--panel); + color: var(--tx); } .embedding-switch-strip-copy, @@ -174,13 +158,15 @@ .embedding-switch-strip strong, .embedding-switch-outcome strong { font-size: 13px; + font-weight: 600; line-height: 19px; } .embedding-switch-strip span, .embedding-switch-outcome span { - color: #667782; + color: var(--tx2); font-size: 12px; + font-variant-numeric: tabular-nums; line-height: 18px; } @@ -189,24 +175,24 @@ flex: 1; overflow: hidden; border-radius: 999px; - background: #dce4e8; + background: var(--bd); } .embedding-switch-progress > span { display: block; height: 100%; border-radius: inherit; - background: #557c93; - transition: width 180ms ease-out; + background: var(--ac); + transition: width var(--motion-state) var(--motion-enter); } .embedding-switch-outcome { justify-content: space-between; - background: #f3f8f5; + background: var(--ok-bg); } .embedding-switch-outcome.is-error { - background: #fff7f5; + background: var(--dg-bg); } .embedding-switch-outcome-actions { @@ -218,28 +204,16 @@ .embedding-switch-cleanup-error { margin: 0; padding: 8px 18px; - border-bottom: 1px solid #ecd8d4; - background: #fff7f5; - color: #873f38; + border-bottom: 0.5px solid var(--dg-bd); + background: var(--dg-bg); + color: var(--dg); font-size: 12px; line-height: 18px; } -.embedding-switch-outcome button:not(.r6-button) { - display: grid; - width: 32px; - height: 32px; - padding: 0; - place-items: center; - border: 0; - border-radius: 7px; - background: transparent; - color: #60717c; - cursor: pointer; -} - -.embedding-switch-outcome button:not(.r6-button):hover { - background: #e8eef1; +.embedding-switch-outcome-actions > .r6-button:last-child { + width: 36px; + padding-inline: 0; } @media (max-width: 700px) { @@ -259,6 +233,16 @@ grid-template-columns: 1fr; } + .embedding-switch-impact > div { + padding: 12px 0; + } + + .embedding-switch-impact > div + div { + padding-left: 0; + border-top: 1px solid var(--bd); + border-left: 0; + } + .embedding-switch-safety, .embedding-switch-details dl { grid-template-columns: 1fr; @@ -281,3 +265,7 @@ transition: none; } } + +[data-native-reduce-motion="true"] .embedding-switch-progress > span { + transition: none; +} diff --git a/memhub/apps/web/src/r6-controls.css b/memhub/apps/web/src/r6-controls.css index 58c5bce..dba7e3c 100644 --- a/memhub/apps/web/src/r6-controls.css +++ b/memhub/apps/web/src/r6-controls.css @@ -11,6 +11,41 @@ --r6-fast: 140ms; } +.r6-settings-dialog-layer { + position: fixed; + inset: 0; + z-index: 100; + display: grid; + place-items: center; + background: rgb(46 66 82 / 18%); + backdrop-filter: blur(8px); +} + +.r6-settings-dialog { + width: min(420px, calc(100vw - 40px)); + padding: 28px; + border: 1px solid white; + border-radius: 16px; + background: #f3f7f9; + box-shadow: 0 24px 64px rgb(38 59 74 / 18%); +} + +.r6-settings-dialog h2 { + margin: 0 0 10px; + font-size: 20px; +} + +.r6-settings-dialog p { + margin: 0 0 24px; + color: #63707b; +} + +.r6-settings-dialog footer { + display: flex; + justify-content: flex-end; + gap: 12px; +} + button.r6-button { position: relative; display: inline-flex; @@ -318,6 +353,18 @@ button.r6-switch:focus-visible, [data-native-reduce-motion="true"] .r6-button-spinner { animation: none; } + +@media (prefers-reduced-transparency: reduce) { + .r6-settings-dialog-layer { + background: rgb(46 66 82 / 28%); + backdrop-filter: none; + } +} + +[data-native-reduce-transparency="true"] .r6-settings-dialog-layer { + background: rgb(46 66 82 / 28%); + backdrop-filter: none; +} [data-native-reduce-motion="true"] :is(.r6-button, .r6-switch-track, .r6-switch-thumb) { transition: none; diff --git a/memhub/apps/web/src/r6-settings.css b/memhub/apps/web/src/r6-settings.css index f8c258c..c6a476e 100644 --- a/memhub/apps/web/src/r6-settings.css +++ b/memhub/apps/web/src/r6-settings.css @@ -579,36 +579,6 @@ background: rgb(158 178 194 / 22%); color: #0f6e56; } -.r6-settings-dialog-layer { - position: fixed; - inset: 0; - z-index: 100; - display: grid; - place-items: center; - background: rgb(46 66 82 / 18%); - backdrop-filter: blur(8px); -} -.r6-settings-dialog { - width: min(420px, calc(100vw - 40px)); - padding: 28px; - border: 1px solid white; - border-radius: 16px; - background: #f3f7f9; - box-shadow: 0 24px 64px rgb(38 59 74 / 18%); -} -.r6-settings-dialog h2 { - margin: 0 0 10px; - font-size: 20px; -} -.r6-settings-dialog p { - margin: 0 0 24px; - color: #63707b; -} -.r6-settings-dialog footer { - display: flex; - justify-content: flex-end; - gap: 12px; -} .r6-settings .r6-model-maintenance { margin-top: 24px; } @@ -757,13 +727,42 @@ box-sizing: border-box; width: 100%; min-width: 0; - min-height: 54px; - border: 1px solid #c0ccd5; + min-height: 44px; + border: 1px solid var(--r6-control-edge); border-radius: 8px; - background: #f0f5f6; - color: #262a2e; - font-size: 15px; - padding: 14px 16px; + background: #fff; + color: var(--r6-text); + font-size: 14px; + padding: 10px 13px; +} +.r6-settings .model-form .om-option-menu-button { + height: 44px; + min-height: 44px; + padding: 0 42px 0 13px; + border-color: var(--r6-control-edge); + background: #fff; + color: var(--r6-text); + font-size: 14px; +} +.r6-settings .model-form .om-option-menu-button::after { + top: 16px; + right: 16px; +} +.r6-settings .model-form .om-option-menu-button[aria-expanded="true"] { + border-color: #7892a6; + box-shadow: 0 0 0 3px rgb(85 124 147 / 12%); +} +.r6-settings .model-form input:not([type="checkbox"]):hover, +.r6-settings .model-form select:hover, +.r6-settings .model-form .om-option-menu-button:hover:not(:disabled) { + border-color: #aabcc8; + background: #fff; +} +.r6-settings .model-form input:not([type="checkbox"]):focus-visible, +.r6-settings .model-form select:focus-visible, +.r6-settings .model-form .om-option-menu-button:focus-visible { + outline: 2px solid var(--r6-focus); + outline-offset: 2px; } .r6-settings .model-advanced { grid-column: 1 / -1;