fix(hololake): ship dynamic persona routes and coherent workspace
This commit is contained in:
parent
5105ec5e32
commit
787ba2ad3f
21 changed files with 1111 additions and 326 deletions
|
|
@ -0,0 +1,266 @@
|
|||
/* HoloLake 0.7.1 canonical workspace layer.
|
||||
* This file is intentionally loaded after the inherited component stylesheet.
|
||||
* It is the single layout and theme authority for the platform shell.
|
||||
*/
|
||||
|
||||
.hololake-shell {
|
||||
--lake-bg: #07111d;
|
||||
--lake-panel: #0b1623;
|
||||
--lake-surface: #101d2b;
|
||||
--lake-surface-2: #152536;
|
||||
--lake-reading: #091521;
|
||||
--lake-border: #26384a;
|
||||
--lake-border-soft: rgba(133, 160, 184, .17);
|
||||
--lake-text: #edf3f7;
|
||||
--lake-text-soft: #cbd5df;
|
||||
--lake-muted: #8192a5;
|
||||
--lake-accent: #58b9cc;
|
||||
--lake-accent-soft: rgba(88, 185, 204, .12);
|
||||
--lake-success: #55c99c;
|
||||
--lake-warning: #d7a94e;
|
||||
--lake-danger: #e2787c;
|
||||
min-width: 760px;
|
||||
color: var(--lake-text);
|
||||
background: var(--lake-bg);
|
||||
}
|
||||
|
||||
.hololake-shell[data-appearance="deep-night"] {
|
||||
--lake-bg: #020811;
|
||||
--lake-panel: #07111c;
|
||||
--lake-surface: #0a1622;
|
||||
--lake-surface-2: #0e1c2a;
|
||||
--lake-reading: #040c15;
|
||||
--lake-border: #1d3042;
|
||||
--lake-muted: #708196;
|
||||
}
|
||||
|
||||
.hololake-shell[data-appearance="mist-light"] {
|
||||
--lake-bg: #eef2f5;
|
||||
--lake-panel: #f7f9fb;
|
||||
--lake-surface: #ffffff;
|
||||
--lake-surface-2: #edf2f5;
|
||||
--lake-reading: #fbfcfd;
|
||||
--lake-border: #ccd6df;
|
||||
--lake-border-soft: rgba(62, 82, 100, .14);
|
||||
--lake-text: #172330;
|
||||
--lake-text-soft: #344252;
|
||||
--lake-muted: #687889;
|
||||
--lake-accent: #247f94;
|
||||
--lake-accent-soft: rgba(36, 127, 148, .1);
|
||||
--lake-success: #24835d;
|
||||
--lake-warning: #9a6917;
|
||||
--lake-danger: #b94f55;
|
||||
}
|
||||
|
||||
body, #root { background: var(--lake-bg, #07111d); }
|
||||
|
||||
.platform-topbar {
|
||||
height: 58px;
|
||||
display: grid;
|
||||
grid-template-columns: 210px minmax(280px, 1fr) auto auto;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0 14px 0 0;
|
||||
border-bottom: 1px solid var(--lake-border-soft);
|
||||
background: var(--lake-panel);
|
||||
}
|
||||
|
||||
.topbar-channel { display: none; }
|
||||
.topbar-search { min-width: 0; }
|
||||
.topbar-search input { height: 36px; border-color: var(--lake-border); background: var(--lake-surface); color: var(--lake-text); }
|
||||
.theme-quick-toggle {
|
||||
height: 34px;
|
||||
min-width: 58px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--lake-border-soft);
|
||||
border-radius: 17px;
|
||||
background: var(--lake-surface);
|
||||
color: var(--lake-text-soft);
|
||||
font-size: 11px;
|
||||
}
|
||||
.theme-quick-toggle:hover { border-color: var(--lake-border); background: var(--lake-surface-2); }
|
||||
|
||||
.fifth-domain-session { height: 38px; min-width: 148px; border-color: var(--lake-border-soft); background: transparent; color: var(--lake-text); }
|
||||
.fifth-domain-session:hover { background: var(--lake-surface); }
|
||||
.fifth-domain-session small { color: var(--lake-muted); }
|
||||
|
||||
.platform-body { height: calc(100% - 58px); grid-template-columns: 210px minmax(0, 1fr); }
|
||||
.platform-navigation {
|
||||
min-width: 0;
|
||||
padding: 12px 10px 10px;
|
||||
border-right: 1px solid var(--lake-border-soft);
|
||||
background: var(--lake-panel);
|
||||
}
|
||||
.platform-brand { min-height: 42px; height: auto; padding: 0 9px 10px; border: 0; }
|
||||
.platform-brand strong { color: var(--lake-text); font-size: 16px; }
|
||||
.platform-brand-orbit { width: 27px; height: 27px; }
|
||||
.channel-selector { min-height: 56px; margin: 4px 0 9px; padding: 8px; border: 1px solid transparent; border-radius: 9px; background: var(--lake-accent-soft); color: var(--lake-text-soft); }
|
||||
.channel-selector:hover { border-color: var(--lake-border-soft); background: var(--lake-accent-soft); }
|
||||
.world-switcher { margin: 0 0 7px; }
|
||||
.world-switcher-trigger { min-height: 44px; color: var(--lake-text-soft); }
|
||||
.world-switcher-trigger:hover, .world-switcher-trigger[aria-expanded="true"] { border-color: var(--lake-border-soft); background: var(--lake-surface); }
|
||||
.platform-route-list { z-index: 60; border-color: var(--lake-border); background: var(--lake-surface); }
|
||||
.platform-route-list > button, .platform-module-list > button { color: var(--lake-muted); }
|
||||
.platform-route-list > button:hover, .platform-module-list > button:hover { color: var(--lake-text); background: var(--lake-surface-2); }
|
||||
.platform-route-list > button.selected, .platform-module-list > button.selected { color: var(--lake-text); background: var(--lake-accent-soft); }
|
||||
|
||||
.subdomain-navigation { margin: 4px 5px 10px; padding: 9px; border: 1px solid var(--lake-border-soft); border-radius: 9px; background: var(--lake-surface); }
|
||||
.subdomain-navigation > small { display: block; margin: 0 4px 6px; color: var(--lake-muted); font-size: 9px; letter-spacing: .08em; }
|
||||
.subdomain-navigation > button { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 7px; border: 0; border-radius: 7px; background: transparent; color: var(--lake-text-soft); text-align: left; }
|
||||
.subdomain-navigation > button:hover { background: var(--lake-accent-soft); }
|
||||
.subdomain-navigation svg { width: 17px; fill: none; stroke: var(--lake-accent); stroke-width: 1.7; }
|
||||
.subdomain-navigation button > span { display: grid; gap: 1px; }
|
||||
.subdomain-navigation strong { font-size: 11px; font-weight: 600; }
|
||||
.subdomain-navigation button small { color: var(--lake-muted); font-size: 9px; }
|
||||
.module-heading { padding: 10px 9px 5px; color: var(--lake-muted); }
|
||||
.platform-module-list { padding: 3px 0; }
|
||||
.platform-nav-footer { margin-top: auto; padding: 12px 9px 6px; border-top-color: var(--lake-border-soft); }
|
||||
|
||||
.platform-workspace { min-width: 0; height: 100%; overflow: hidden; background: var(--lake-bg); }
|
||||
.knowledge-tabbar { height: 43px; min-height: 43px; border-bottom-color: var(--lake-border-soft); background: var(--lake-panel); }
|
||||
.document-tab { border-color: var(--lake-border-soft); border-bottom-color: var(--lake-surface); background: var(--lake-surface); color: var(--lake-text-soft); }
|
||||
.knowledge-module-bar { height: 54px; min-height: 54px; padding: 0 14px; border-bottom-color: var(--lake-border-soft); background: var(--lake-panel); }
|
||||
.storage-state-button { min-width: 210px; border: 0; background: transparent; color: var(--lake-text); }
|
||||
.storage-state-button:hover { background: var(--lake-surface); }
|
||||
.knowledge-module-actions button { color: var(--lake-muted); }
|
||||
.knowledge-module-actions button:hover, .knowledge-module-actions button.selected { border-color: var(--lake-border-soft); background: var(--lake-surface); color: var(--lake-text-soft); }
|
||||
|
||||
.knowledge-workbench { height: calc(100% - 97px); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; background: var(--lake-reading); }
|
||||
.knowledge-workbench.has-tree { grid-template-columns: var(--tree-width) 5px minmax(0, 1fr); }
|
||||
.knowledge-workbench.has-agent { grid-template-columns: minmax(0, 1fr) 5px var(--agent-width); }
|
||||
.knowledge-workbench.has-tree.has-agent { grid-template-columns: var(--tree-width) 5px minmax(0, 1fr) 5px var(--agent-width); }
|
||||
.workspace-resizer { position: relative; z-index: 5; width: 5px; height: 100%; padding: 0; border: 0; background: transparent; cursor: col-resize; }
|
||||
.workspace-resizer::after { content: ""; position: absolute; inset: 0 2px; background: var(--lake-border-soft); transition: background .15s; }
|
||||
.workspace-resizer:hover::after, .is-resizing .workspace-resizer::after { background: var(--lake-accent); }
|
||||
.is-resizing { cursor: col-resize; user-select: none; }
|
||||
|
||||
.knowledge-sidebar { width: auto; min-width: 0; height: 100%; flex: none; border-right: 0; background: var(--lake-panel); }
|
||||
.knowledge-sidebar-heading { color: var(--lake-muted); }
|
||||
.knowledge-sidebar .doc-tree, .knowledge-sidebar .tree-root, .knowledge-sidebar .kb-tree { min-height: 0; background: transparent; border: 0; color: var(--lake-text-soft); }
|
||||
.knowledge-sidebar .kb-tree-item { color: var(--lake-muted); }
|
||||
.knowledge-sidebar .kb-tree-item:hover { background: var(--lake-surface); color: var(--lake-text-soft); }
|
||||
.knowledge-sidebar .kb-tree-item.active { background: var(--lake-accent-soft); color: var(--lake-text); }
|
||||
.import-button { border-color: var(--lake-border-soft); background: var(--lake-accent-soft); color: var(--lake-text-soft); }
|
||||
|
||||
.knowledge-content { min-width: 0; height: 100%; overflow: auto; background: var(--lake-reading); }
|
||||
.knowledge-content > .editor, .knowledge-content > .kb-editor, .knowledge-content > .version-history { width: min(920px, calc(100% - 72px)); min-width: 0; margin: 46px auto 90px; }
|
||||
.kb-editor { color: var(--lake-text-soft); }
|
||||
.kb-page-symbol { color: var(--lake-accent); }
|
||||
.kb-editor-meta, .kb-editor-path, .kb-editor-date { color: var(--lake-muted); }
|
||||
.kb-editor-title, .kb-markdown-render h1, .kb-markdown-render h2, .kb-markdown-render h3, .kb-markdown-render h4 { color: var(--lake-text); }
|
||||
.kb-editor-title { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.18; }
|
||||
.kb-editor-toolbar { opacity: 1; }
|
||||
.kb-btn-primary { border-color: var(--lake-accent); background: var(--lake-accent); color: var(--lake-bg); }
|
||||
.kb-btn-secondary { border-color: var(--lake-border); background: var(--lake-surface); color: var(--lake-text-soft); }
|
||||
.kb-editor-edit-pane { grid-template-columns: minmax(0, 1fr); }
|
||||
.kb-editor-textarea { min-height: 380px; border-color: var(--lake-border); background: var(--lake-surface); color: var(--lake-text-soft); }
|
||||
.kb-editor-preview-pane { border-color: var(--lake-border); background: var(--lake-reading); }
|
||||
.kb-markdown-render { min-width: 0; color: var(--lake-text-soft); font-family: var(--human-font); font-size: var(--reading-size, 17px); line-height: 1.82; overflow-wrap: anywhere; }
|
||||
.kb-markdown-render p, .kb-markdown-render li { color: var(--lake-text-soft); }
|
||||
.kb-markdown-render h1 { font-size: 1.9em; }
|
||||
.kb-markdown-render h2 { font-size: 1.45em; padding-top: .35em; }
|
||||
.kb-markdown-render h3 { font-size: 1.18em; }
|
||||
.kb-markdown-render blockquote { border-left-color: var(--lake-accent); background: var(--lake-accent-soft); color: var(--lake-muted); }
|
||||
.kb-markdown-render code { background: var(--lake-surface-2); color: var(--lake-text); }
|
||||
.kb-markdown-render pre { max-width: 100%; background: var(--lake-panel); color: var(--lake-text-soft); }
|
||||
.kb-markdown-render a { color: var(--lake-accent); }
|
||||
.kb-markdown-render a[data-hololake-wiki="true"] { padding: 1px 4px; border-radius: 4px; background: var(--lake-accent-soft); text-decoration: none; }
|
||||
.kb-table-scroll { width: 100%; max-width: 100%; margin: 1.25em 0; overflow-x: auto; border: 1px solid var(--lake-border); border-radius: 8px; }
|
||||
.kb-table-scroll table, .kb-markdown-render table { width: max-content; min-width: 100%; margin: 0; border: 0; border-collapse: collapse; }
|
||||
.kb-markdown-render th, .kb-markdown-render td { min-width: 120px; padding: 10px 12px; border: 0; border-right: 1px solid var(--lake-border); border-bottom: 1px solid var(--lake-border); color: var(--lake-text-soft); vertical-align: top; }
|
||||
.kb-markdown-render th { background: var(--lake-surface-2); color: var(--lake-text); }
|
||||
.kb-markdown-render tr:last-child td { border-bottom: 0; }
|
||||
.kb-markdown-render th:last-child, .kb-markdown-render td:last-child { border-right: 0; }
|
||||
.kb-raw-html { border: 1px solid var(--lake-border); }
|
||||
.document-path { color: var(--lake-muted); }
|
||||
|
||||
.agent-drawer { position: relative; inset: auto; z-index: 1; width: auto; height: 100%; min-width: 0; border: 0; border-radius: 0; background: var(--lake-panel); box-shadow: none; backdrop-filter: none; }
|
||||
.agent-drawer-scope { min-height: 39px; padding: 7px 12px; border-bottom-color: var(--lake-border-soft); color: var(--lake-muted); }
|
||||
.agent-drawer-scope strong { color: var(--lake-text-soft); }
|
||||
.agent-chat { min-width: 0; background: var(--lake-panel); color: var(--lake-text); }
|
||||
.agent-header { min-height: 60px; padding: 10px 12px; border-bottom-color: var(--lake-border-soft); }
|
||||
.agent-info { min-width: 0; }
|
||||
.agent-meta { min-width: 0; }
|
||||
.agent-meta h3 { color: var(--lake-text); }
|
||||
.agent-role { display: block; max-width: 240px; overflow: hidden; color: var(--lake-muted); text-overflow: ellipsis; white-space: nowrap; }
|
||||
.agent-actions { display: flex; flex: 0 0 auto; gap: 4px; }
|
||||
.agent-actions button { min-width: 30px; height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--lake-muted); white-space: nowrap; }
|
||||
.agent-actions button[title="历史记录"] { min-width: 44px; }
|
||||
.agent-actions button:hover, .agent-actions button.selected { background: var(--lake-surface-2); color: var(--lake-text); }
|
||||
.runtime-status { border-bottom-color: var(--lake-border-soft); }
|
||||
.runtime-row { color: var(--lake-muted); }
|
||||
.runtime-tools { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.agent-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
|
||||
.agent-body.history-open { grid-template-columns: minmax(160px, 42%) minmax(0, 1fr); }
|
||||
.agent-history { min-width: 0; overflow: hidden; border-right: 1px solid var(--lake-border-soft); background: var(--lake-surface); }
|
||||
.agent-history-heading { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-bottom: 1px solid var(--lake-border-soft); }
|
||||
.agent-history-heading strong { font-size: 11px; }
|
||||
.agent-history-heading button { border: 0; background: transparent; color: var(--lake-accent); font-size: 10px; }
|
||||
.agent-history-list { height: calc(100% - 44px); overflow: auto; padding: 6px; }
|
||||
.agent-history-item { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 2px; margin-bottom: 3px; border-radius: 7px; }
|
||||
.agent-history-item.selected { background: var(--lake-accent-soft); }
|
||||
.agent-history-item > button { min-width: 0; padding: 8px; border: 0; background: transparent; color: var(--lake-text-soft); text-align: left; }
|
||||
.agent-history-item strong, .agent-history-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.agent-history-item strong { font-size: 10px; }
|
||||
.agent-history-item small { margin-top: 3px; color: var(--lake-muted); font-size: 8px; }
|
||||
.agent-history-item > button.delete { align-self: center; padding: 0; color: var(--lake-muted); text-align: center; }
|
||||
.agent-history-item > button.delete:hover { color: var(--lake-danger); }
|
||||
.agent-conversation { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
|
||||
.agent-messages { flex: 1; min-height: 0; padding: 14px 12px; overflow-y: auto; background: transparent; }
|
||||
.agent-welcome { align-items: flex-start; padding: 28px 10px; text-align: left; }
|
||||
.agent-welcome h2 { color: var(--lake-text); font-size: 18px; }
|
||||
.agent-welcome p { color: var(--lake-muted); font-size: 12px; line-height: 1.7; }
|
||||
.msg-user-bubble { background: var(--lake-accent-soft); color: var(--lake-text); }
|
||||
.msg-assistant-bubble { color: var(--lake-text-soft); }
|
||||
.msg-markdown { color: var(--lake-text-soft); }
|
||||
.msg-markdown p, .msg-markdown li { color: inherit; }
|
||||
.agent-activity { margin: 0 0 12px; border: 1px solid var(--lake-border-soft); border-radius: 9px; background: var(--lake-surface); }
|
||||
.agent-activity summary { padding: 9px 10px; color: var(--lake-text-soft); font-size: 10px; cursor: pointer; }
|
||||
.agent-activity ol { margin: 0; padding: 0 9px 9px; list-style: none; }
|
||||
.agent-activity li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 7px 2px; border-top: 1px solid var(--lake-border-soft); }
|
||||
.agent-activity li > span { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--lake-success); }
|
||||
.agent-activity li[data-status="pending"] > span { background: var(--lake-warning); }
|
||||
.agent-activity li[data-status="failed"] > span { background: var(--lake-danger); }
|
||||
.agent-activity li div { min-width: 0; }
|
||||
.agent-activity strong, .agent-activity small { display: block; }
|
||||
.agent-activity strong { color: var(--lake-text-soft); font-size: 10px; }
|
||||
.agent-activity small { margin-top: 3px; overflow: hidden; color: var(--lake-muted); font-size: 9px; line-height: 1.45; text-overflow: ellipsis; }
|
||||
.agent-activity em { color: var(--lake-muted); font-size: 8px; font-style: normal; }
|
||||
.pending-action { border-color: var(--lake-border); background: var(--lake-surface); }
|
||||
.agent-input-area { padding: 10px 12px 12px; border-top-color: var(--lake-border-soft); background: var(--lake-panel); }
|
||||
.agent-input-wrapper { border-color: var(--lake-border); background: var(--lake-surface); }
|
||||
.agent-input { color: var(--lake-text); }
|
||||
.agent-hint { color: var(--lake-muted); }
|
||||
.btn-send { background: var(--lake-accent); color: var(--lake-bg); }
|
||||
|
||||
.agent-launcher { right: 18px; bottom: 16px; height: 42px; border-color: var(--lake-border); background: var(--lake-surface-2); color: var(--lake-text-soft); }
|
||||
.agent-launcher:hover { background: var(--lake-accent-soft); }
|
||||
.domain-surface { background: var(--lake-bg); }
|
||||
.domain-module-card, .domain-connection { border-color: var(--lake-border-soft); background: var(--lake-panel); }
|
||||
.domain-module-card:hover { background: var(--lake-surface); }
|
||||
|
||||
.storage-sheet, .human-settings { border-color: var(--lake-border); background: var(--lake-panel); color: var(--lake-text); }
|
||||
.storage-sheet-backdrop, .human-settings-backdrop { background: rgba(2, 8, 14, .56); }
|
||||
.settings-section select, .settings-model-fields input { border-color: var(--lake-border); background: var(--lake-surface); color: var(--lake-text); }
|
||||
.settings-model-card, .settings-account-card { border-color: var(--lake-border-soft); background: var(--lake-surface); }
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
.knowledge-workbench.has-tree.has-agent { grid-template-columns: minmax(0, 1fr) 5px minmax(380px, var(--agent-width)); }
|
||||
.knowledge-workbench.has-tree.has-agent .knowledge-sidebar,
|
||||
.knowledge-workbench.has-tree.has-agent .tree-resizer { display: none; }
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.platform-topbar { grid-template-columns: 188px minmax(240px, 1fr) auto auto; }
|
||||
.platform-body { grid-template-columns: 188px minmax(0, 1fr); }
|
||||
.knowledge-workbench.has-tree.has-agent { grid-template-columns: minmax(0, 1fr) 5px minmax(360px, var(--agent-width)); }
|
||||
.knowledge-content > .editor, .knowledge-content > .kb-editor, .knowledge-content > .version-history { width: calc(100% - 40px); }
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.theme-quick-toggle { display: none; }
|
||||
.platform-topbar { grid-template-columns: 172px minmax(220px, 1fr) auto; }
|
||||
.platform-body { grid-template-columns: 172px minmax(0, 1fr); }
|
||||
.knowledge-workbench.has-tree.has-agent { grid-template-columns: minmax(0, 1fr) 5px minmax(360px, var(--agent-width)); }
|
||||
.knowledge-workbench.has-tree.has-agent .knowledge-sidebar, .knowledge-workbench.has-tree.has-agent .tree-resizer { display: none; }
|
||||
}
|
||||
Loading…
Reference in a new issue