JOJO/agent-Specialization
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(ui): refine sidebar and personal space styling

Browse Source
This commit is contained in:
JOJO 2026-05-28 14:15:02 +08:00
parent 611fcdd6d3
commit 0b6b39f262
7 changed files with 126 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/src/components/personalization/ExperienceOnboarding.vue
View File

@ -105,7 +105,7 @@ function confirmSelection() {
background: rgba(255, 255, 255, 0.96); background: rgba(255, 255, 255, 0.96);
border-radius: 18px; border-radius: 18px;
padding: 24px 28px; padding: 24px 28px;
box-shadow: 0 20px 50px rgba(33, 24, 14, 0.25); box-shadow: none;
border: 1px solid rgba(118, 103, 84, 0.25); border: 1px solid rgba(118, 103, 84, 0.25);
} }
.exp-header { .exp-header {
@ -144,16 +144,16 @@ function confirmSelection() {
padding: 16px 14px; padding: 16px 14px;
cursor: pointer; cursor: pointer;
transition: 0.2s ease; transition: 0.2s ease;
box-shadow: 0 8px 18px rgba(61, 57, 41, 0.06); box-shadow: none;
background: #fff; background: #fff;
} }
.mode-card:hover { .mode-card:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 16px 30px rgba(61, 57, 41, 0.12); box-shadow: none;
} }
.mode-card.active { .mode-card.active {
border-color: #da7756; border-color: #da7756;
box-shadow: 0 18px 36px rgba(218, 119, 86, 0.25); box-shadow: none;
} }
.badge { .badge {
display: inline-flex; display: inline-flex;

77
static/src/components/personalization/PersonalizationDrawer.vue
View File

@ -343,6 +343,7 @@
</button> </button>
<div <div
:class="['settings-floating-menu', { dark: activeTheme === 'dark' }]" :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
:style="activeDropdown ? floatingMenuStyle : undefined"
> >
<button <button
type="button" type="button"
@ -395,6 +396,7 @@
</button> </button>
<div <div
:class="['settings-floating-menu', { dark: activeTheme === 'dark' }]" :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
:style="activeDropdown ? floatingMenuStyle : undefined"
> >
<button <button
v-for="option in filteredModelOptions" v-for="option in filteredModelOptions"
@ -437,6 +439,7 @@
</button> </button>
<div <div
:class="['settings-floating-menu', { dark: activeTheme === 'dark' }]" :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
:style="activeDropdown ? floatingMenuStyle : undefined"
> >
<button <button
v-for="option in runModeOptions" v-for="option in runModeOptions"
@ -514,6 +517,7 @@
</button> </button>
<div <div
:class="['settings-floating-menu', { dark: activeTheme === 'dark' }]" :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
:style="activeDropdown ? floatingMenuStyle : undefined"
> >
<button <button
v-for="option in themeOptions" v-for="option in themeOptions"
@ -594,13 +598,14 @@
</button> </button>
<div <div
:class="['settings-floating-menu', { dark: activeTheme === 'dark' }]" :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
:style="activeDropdown ? floatingMenuStyle : undefined"
> >
<button <button
v-for="option in blockDisplayOptions" v-for="option in blockDisplayOptions"
:key="option.id" :key="option.id"
type="button" type="button"
class="settings-menu-option" class="settings-menu-option"
:class="{ selected: form.block_display_mode === option.value }" :class="{ selected: currentBlockDisplayMode === option.value }"
@click="selectBlockDisplayMode(option.value)" @click="selectBlockDisplayMode(option.value)"
> >
<strong>{{ option.label }}</strong <strong>{{ option.label }}</strong
@ -638,6 +643,7 @@
</button> </button>
<div <div
:class="['settings-floating-menu', { dark: activeTheme === 'dark' }]" :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
:style="activeDropdown ? floatingMenuStyle : undefined"
> >
<button <button
v-for="option in permissionModeOptions" v-for="option in permissionModeOptions"
@ -1106,6 +1112,7 @@
</button> </button>
<div <div
:class="['settings-floating-menu', { dark: activeTheme === 'dark' }]" :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
:style="activeDropdown ? floatingMenuStyle : undefined"
> >
<button <button
v-for="option in imageCompressionOptions" v-for="option in imageCompressionOptions"
@ -1276,7 +1283,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'; import { ref, computed, watch, onMounted, nextTick, onBeforeUnmount } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { usePersonalizationStore } from '@/stores/personalization'; import { usePersonalizationStore } from '@/stores/personalization';
import { useResourceStore } from '@/stores/resource'; import { useResourceStore } from '@/stores/resource';
@ -1310,7 +1317,8 @@ const {
skillsCatalog, skillsCatalog,
thinkingIntervalDefault, thinkingIntervalDefault,
thinkingIntervalRange, thinkingIntervalRange,
recentConversationsPromptLimitRange recentConversationsPromptLimitRange,
experiments
} = storeToRefs(personalization); } = storeToRefs(personalization);
type IconKey = keyof typeof ICONS; type IconKey = keyof typeof ICONS;
@ -1372,23 +1380,62 @@ const personalTabs = computed(() => {
const activeTab = ref<PersonalTab>('general'); const activeTab = ref<PersonalTab>('general');
const activeDropdown = ref<string | null>(null); const activeDropdown = ref<string | null>(null);
const floatingMenuStyle = ref<Record<string, string>>({});
const activeTabLabel = computed(() => { const activeTabLabel = computed(() => {
return personalTabs.value.find((tab) => tab.id === activeTab.value)?.label || '常规'; return personalTabs.value.find((tab) => tab.id === activeTab.value)?.label || '常规';
}); });
const toggleDropdown = (key: string) => { const updateFloatingMenuPosition = async () => {
if (!activeDropdown.value || typeof window === 'undefined') {
floatingMenuStyle.value = {};
return;
}
await nextTick();
const button = document.querySelector<HTMLElement>(
'.settings-select-wrap.open .settings-select-button'
);
if (!button) {
return;
}
const rect = button.getBoundingClientRect();
const menuWidth = Math.min(300, Math.max(240, window.innerWidth - 32));
const left = Math.max(16, Math.min(rect.right - menuWidth, window.innerWidth - menuWidth - 16));
const top = Math.max(16, Math.min(rect.bottom + 10, window.innerHeight - 80));
floatingMenuStyle.value = {
position: 'fixed',
top: `${Math.round(top)}px`,
left: `${Math.round(left)}px`,
right: 'auto',
width: `${Math.round(menuWidth)}px`,
zIndex: '2147483647'
};
};
const toggleDropdown = async (key: string) => {
activeDropdown.value = activeDropdown.value === key ? null : key; activeDropdown.value = activeDropdown.value === key ? null : key;
await updateFloatingMenuPosition();
}; };
const closeDropdown = () => { const closeDropdown = () => {
activeDropdown.value = null; activeDropdown.value = null;
floatingMenuStyle.value = {};
}; };
const settingsTabIconStyle = (icon: IconKey) => ({ const settingsTabIconStyle = (icon: IconKey) => ({
'--icon-src': `url(${ICONS[icon]})` '--icon-src': `url(${ICONS[icon]})`
}); });
onMounted(() => {
window.addEventListener('resize', updateFloatingMenuPosition);
window.addEventListener('scroll', updateFloatingMenuPosition, true);
});
onBeforeUnmount(() => {
window.removeEventListener('resize', updateFloatingMenuPosition);
window.removeEventListener('scroll', updateFloatingMenuPosition, true);
});
type RunModeValue = 'fast' | 'thinking' | 'deep' | null; type RunModeValue = 'fast' | 'thinking' | 'deep' | null;
type PermissionModeValue = 'readonly' | 'approval' | 'auto_approval' | 'unrestricted'; type PermissionModeValue = 'readonly' | 'approval' | 'auto_approval' | 'unrestricted';
type CompressionField = type CompressionField =
@ -1487,9 +1534,11 @@ const communicationStyleLabel = computed(() => {
return form.value.communication_style === 'human_like' ? '拟人' : '默认'; return form.value.communication_style === 'human_like' ? '拟人' : '默认';
}); });
const currentBlockDisplayMode = computed(() => experiments.value.blockDisplayMode);
const blockDisplayLabel = computed(() => { const blockDisplayLabel = computed(() => {
return ( return (
blockDisplayOptions.find((option) => option.value === form.value.block_display_mode)?.label || blockDisplayOptions.find((option) => option.value === currentBlockDisplayMode.value)?.label ||
'堆叠动画' '堆叠动画'
); );
}); });
@ -2176,14 +2225,12 @@ const applyThemeOption = async (theme: ThemeKey) => {
overflow-y: auto; overflow-y: auto;
overflow-x: visible; overflow-x: visible;
padding-right: 18px; padding-right: 18px;
padding-bottom: 28px; padding-bottom: 86px;
scroll-padding-bottom: 86px;
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none; -ms-overflow-style: none;
} }
.settings-redesign-scroll:has(.settings-select-wrap.open) {
overflow: visible;
}
.settings-redesign-tabs::-webkit-scrollbar, .settings-redesign-tabs::-webkit-scrollbar,
.settings-redesign-scroll::-webkit-scrollbar, .settings-redesign-scroll::-webkit-scrollbar,
@ -2300,9 +2347,9 @@ const applyThemeOption = async (theme: ThemeKey) => {
} }
.settings-floating-menu { .settings-floating-menu {
position: absolute; position: fixed;
right: 0; right: auto;
top: calc(100% + 10px); top: auto;
width: 300px; width: 300px;
max-height: min(420px, 60vh); max-height: min(420px, 60vh);
overflow: auto; overflow: auto;
@ -2313,7 +2360,7 @@ const applyThemeOption = async (theme: ThemeKey) => {
box-shadow: var(--settings-floating-menu-shadow); box-shadow: var(--settings-floating-menu-shadow);
opacity: 1; opacity: 1;
backdrop-filter: none; backdrop-filter: none;
z-index: 10000; z-index: 2147483647;
display: none; display: none;
} }
@ -2435,7 +2482,7 @@ const applyThemeOption = async (theme: ThemeKey) => {
.settings-number-row input:focus, .settings-number-row input:focus,
.settings-compression-grid input:focus { .settings-compression-grid input:focus {
border-color: var(--claude-text-secondary); border-color: var(--claude-text-secondary);
box-shadow: 0 0 0 4px rgba(128, 128, 128, 0.11); box-shadow: none;
} }
.settings-input-stack { .settings-input-stack {
@ -2608,7 +2655,7 @@ const applyThemeOption = async (theme: ThemeKey) => {
} }
.settings-toggle-row input:checked + .fancy-check .fancy-path { .settings-toggle-row input:checked + .fancy-check .fancy-path {
stroke: var(--claude-accent); stroke: var(--claude-text-secondary);
stroke-dasharray: 70.5096664428711 9999999; stroke-dasharray: 70.5096664428711 9999999;
stroke-dashoffset: -262.2723388671875; stroke-dashoffset: -262.2723388671875;
} }

26
static/src/styles/components/chat/_chat-area.scss
View File

@ -269,7 +269,7 @@
padding: 12px; padding: 12px;
border-radius: 14px; border-radius: 14px;
background: rgba(255, 255, 255, 0.96); background: rgba(255, 255, 255, 0.96);
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18); box-shadow: none;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
pointer-events: auto; pointer-events: auto;
min-width: 480px; min-width: 480px;
@ -398,17 +398,17 @@
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
box-shadow: 0 6px 16px rgba(61, 57, 41, 0.08); box-shadow: none;
} }
.scroll-lock-btn:hover { .scroll-lock-btn:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 9px 20px rgba(61, 57, 41, 0.12); box-shadow: none;
} }
.scroll-lock-toggle.locked .scroll-lock-btn { .scroll-lock-toggle.locked .scroll-lock-btn {
border-color: var(--claude-accent); border-color: var(--claude-accent);
box-shadow: 0 0 10px var(--claude-highlight); box-shadow: none;
} }
.scroll-lock-btn svg { .scroll-lock-btn svg {
@ -477,7 +477,7 @@
border-radius: 18px; border-radius: 18px;
font-size: 15px; font-size: 15px;
line-height: 1.6; line-height: 1.6;
box-shadow: 0 12px 28px rgba(61, 57, 41, 0.08); box-shadow: none;
color: var(--claude-text); color: var(--claude-text);
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-all; word-break: break-all;
@ -485,7 +485,7 @@
} }
.user-message .message-text { .user-message .message-text {
background: rgba(255, 255, 255, 0.88); background: #f5f5f5;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
@ -588,7 +588,7 @@
overflow: hidden; overflow: hidden;
border: 1px solid var(--claude-border); border: 1px solid var(--claude-border);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 12px 28px rgba(61, 57, 41, 0.08); box-shadow: none;
} }
.collapsible-header { .collapsible-header {
@ -711,7 +711,7 @@
border: 1px solid var(--claude-border); border: 1px solid var(--claude-border);
border-radius: 16px; border-radius: 16px;
background: var(--claude-card); background: var(--claude-card);
box-shadow: var(--claude-shadow); box-shadow: none;
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
} }
@ -927,7 +927,7 @@ body[data-theme='dark'] .more-icon {
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
background: transparent; background: transparent;
box-shadow: var(--claude-shadow); box-shadow: none;
} }
.chat-inline-card__body { .chat-inline-card__body {
@ -982,7 +982,7 @@ body[data-theme='dark'] .more-icon {
object-fit: contain; object-fit: contain;
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--claude-border); border: 1px solid var(--claude-border);
box-shadow: var(--claude-shadow); box-shadow: none;
background: var(--claude-card); background: var(--claude-card);
} }
@ -1090,7 +1090,7 @@ show-html:not([data-rendered='1']) {
border: 1px solid var(--claude-border); border: 1px solid var(--claude-border);
border-radius: 12px; border-radius: 12px;
background: transparent; background: transparent;
box-shadow: var(--claude-shadow); box-shadow: none;
} }
show_html:not([data-rendered='1'])[ratio='1:1'], show_html:not([data-rendered='1'])[ratio='1:1'],
@ -1169,7 +1169,7 @@ show-html:not([data-rendered='1'])[ratio='3:4'] {
border: 1px solid var(--claude-border); border: 1px solid var(--claude-border);
border-radius: 12px; border-radius: 12px;
background: var(--theme-surface-soft); background: var(--theme-surface-soft);
box-shadow: var(--theme-shadow-soft); box-shadow: none;
} }
.text-output .text-content .md-table-scroll > table, .text-output .text-content .md-table-scroll > table,
@ -1258,7 +1258,7 @@ show-html:not([data-rendered='1'])[ratio='3:4'] {
border-radius: 10px; border-radius: 10px;
background: var(--theme-surface-soft); background: var(--theme-surface-soft);
border-left: 4px solid var(--claude-accent); border-left: 4px solid var(--claude-accent);
box-shadow: inset 0 0 0 1px var(--claude-border); box-shadow: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;

27
static/src/styles/components/input/_composer.scss
View File

@ -214,7 +214,7 @@ body[data-theme='dark'] {
border-radius: 10px; border-radius: 10px;
border: 1px solid var(--theme-control-border); border: 1px solid var(--theme-control-border);
background: var(--theme-surface-soft); background: var(--theme-surface-soft);
box-shadow: var(--theme-shadow-mid); box-shadow: none;
color: var(--claude-text); color: var(--claude-text);
font-size: 12px; font-size: 12px;
line-height: 1.35; line-height: 1.35;
@ -269,7 +269,7 @@ body[data-theme='dark'] {
border: 1px solid var(--theme-control-border); border: 1px solid var(--theme-control-border);
border-radius: 14px; border-radius: 14px;
background: var(--theme-surface-soft); background: var(--theme-surface-soft);
box-shadow: var(--theme-shadow-mid); box-shadow: none;
} }
.permission-switcher__menu--split { .permission-switcher__menu--split {
@ -375,7 +375,7 @@ body[data-theme='dark'] {
border-radius: var(--stadium-radius); border-radius: var(--stadium-radius);
border: 1px solid rgba(15, 23, 42, 0.12); border: 1px solid rgba(15, 23, 42, 0.12);
background: #ffffff; background: #ffffff;
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16); box-shadow: none;
display: flex; display: flex;
gap: 12px; gap: 12px;
transition: transition:
@ -388,24 +388,19 @@ body[data-theme='dark'] {
padding-bottom: 16px; padding-bottom: 16px;
min-height: calc(var(--stadium-radius) * 2.7); min-height: calc(var(--stadium-radius) * 2.7);
border-color: rgba(15, 23, 42, 0.2); border-color: rgba(15, 23, 42, 0.2);
box-shadow: 0 26px 70px rgba(15, 23, 42, 0.22); box-shadow: none;
} }
.stadium-shell.is-focused, .stadium-shell.is-focused,
.stadium-shell.has-text { .stadium-shell.has-text {
border-color: var(--claude-accent); border-color: rgba(15, 23, 42, 0.12);
box-shadow: box-shadow: none;
0 2px 22px var(--claude-highlight),
0 0 30px var(--claude-highlight),
0 22px 60px rgba(15, 23, 42, 0.22);
} }
.stadium-shell.is-multiline.is-focused, .stadium-shell.is-multiline.is-focused,
.stadium-shell.is-multiline.has-text { .stadium-shell.is-multiline.has-text {
box-shadow: border-color: rgba(15, 23, 42, 0.2);
0 2px 28px var(--claude-highlight), box-shadow: none;
0 0 36px var(--claude-highlight),
0 32px 86px rgba(15, 23, 42, 0.28);
} }
.input-stack { .input-stack {
@ -581,7 +576,7 @@ body[data-theme='dark'] {
background: rgba(255, 255, 255, 0.98); background: rgba(255, 255, 255, 0.98);
border: 1px solid var(--claude-border); border: 1px solid var(--claude-border);
border-radius: 18px; border-radius: 18px;
box-shadow: var(--claude-shadow); box-shadow: none;
z-index: 30; z-index: 30;
pointer-events: auto; pointer-events: auto;
} }
@ -640,7 +635,7 @@ body[data-theme='dark'] {
border-radius: 18px; border-radius: 18px;
border: 1px solid var(--claude-border); border: 1px solid var(--claude-border);
background: rgba(255, 255, 255, 0.98); background: rgba(255, 255, 255, 0.98);
box-shadow: var(--claude-shadow); box-shadow: none;
z-index: 31; z-index: 31;
} }
@ -799,7 +794,7 @@ body[data-theme='dark'] {
background: rgba(255, 255, 255, 0.96); background: rgba(255, 255, 255, 0.96);
border: 1px solid var(--claude-border); border: 1px solid var(--claude-border);
border-radius: 12px; border-radius: 12px;
box-shadow: var(--claude-shadow); box-shadow: none;
padding: 12px; padding: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

20
static/src/styles/components/overlays/_overlays.scss
View File

@ -2847,14 +2847,14 @@ body[data-theme='light'] {
.experiment-visual { .experiment-visual {
background: var(--theme-surface-card); background: var(--theme-surface-card);
box-shadow: var(--theme-shadow-soft); box-shadow: none;
} }
.stadium-shell.is-focused, .stadium-shell.is-focused,
.stadium-shell.has-text, .stadium-shell.has-text,
.stadium-shell.is-multiline.is-focused, .stadium-shell.is-multiline.is-focused,
.stadium-shell.is-multiline.has-text { .stadium-shell.is-multiline.has-text {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: none;
} }
/* 按钮背景色 - 使用浅灰色 */ /* 按钮背景色 - 使用浅灰色 */
@ -3004,14 +3004,14 @@ body[data-theme='dark'] {
.experiment-visual { .experiment-visual {
background: var(--theme-surface-card); background: var(--theme-surface-card);
box-shadow: var(--theme-shadow-soft); box-shadow: none;
} }
.stadium-shell.is-focused, .stadium-shell.is-focused,
.stadium-shell.has-text, .stadium-shell.has-text,
.stadium-shell.is-multiline.is-focused, .stadium-shell.is-multiline.is-focused,
.stadium-shell.is-multiline.has-text { .stadium-shell.is-multiline.has-text {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); box-shadow: none;
} }
/* 输入栏 - 改为灰黑色 */ /* 输入栏 - 改为灰黑色 */
@ -3023,7 +3023,7 @@ body[data-theme='dark'] {
.stadium-shell.is-focused, .stadium-shell.is-focused,
.stadium-shell.has-text { .stadium-shell.has-text {
background: #2a2a2a; background: #2a2a2a;
border-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.1);
} }
/* 输入框文字颜色 */ /* 输入框文字颜色 */
@ -3377,7 +3377,7 @@ body[data-theme='dark'] {
/* 用户消息块 - 使用浅灰色 */ /* 用户消息块 - 使用浅灰色 */
.user-message .message-text { .user-message .message-text {
background: #2a2a2a; background: #2a2a2a;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); box-shadow: none;
} }
/* AI 消息块 - 使用浅灰色 */ /* AI 消息块 - 使用浅灰色 */
@ -3421,17 +3421,17 @@ body[data-theme='dark'] {
.scroll-lock-btn { .scroll-lock-btn {
background: #2a2a2a; background: #2a2a2a;
border-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); box-shadow: none;
} }
.scroll-lock-btn:hover { .scroll-lock-btn:hover {
background: #353535; background: #353535;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); box-shadow: none;
} }
.scroll-lock-toggle.locked .scroll-lock-btn { .scroll-lock-toggle.locked .scroll-lock-btn {
border-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); box-shadow: none;
} }
.scroll-lock-toggle.locked .scroll-lock-btn img { .scroll-lock-toggle.locked .scroll-lock-btn img {
@ -3444,7 +3444,7 @@ body[data-theme='dark'] {
/* 左侧面板头部（文件/待办事项/子智能体标签栏） */ /* 左侧面板头部（文件/待办事项/子智能体标签栏） */
.sidebar-header { .sidebar-header {
background: #1a1a1a; background: var(--claude-left-rail);
} }
/* 移动端审批面板 - 移除所有背景让内容顶头 */ /* 移动端审批面板 - 移除所有背景让内容顶头 */

41
static/src/styles/components/panels/_left-panel.scss
View File

@ -17,6 +17,7 @@
align-items: stretch; align-items: stretch;
flex-shrink: 0; flex-shrink: 0;
margin-left: 52px; margin-left: 52px;
background: var(--claude-left-rail);
} }
/* 侧边栏 */ /* 侧边栏 */
@ -67,11 +68,11 @@
} }
.compact-status-card { .compact-status-card {
background: var(--claude-panel); background: var(--claude-left-rail);
border: 1px solid var(--claude-border); border: 1px solid var(--claude-border);
border-radius: 18px; border-radius: 18px;
padding: 14px 16px; padding: 14px 16px;
box-shadow: 0 12px 30px rgba(61, 57, 41, 0.12); box-shadow: none;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -249,9 +250,9 @@
border-bottom: 1px solid var(--claude-border); border-bottom: 1px solid var(--claude-border);
position: sticky; position: sticky;
top: 0; top: 0;
background: rgba(255, 255, 255, 0.85); background: var(--claude-left-rail);
z-index: 10; z-index: 10;
backdrop-filter: blur(16px); backdrop-filter: none;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
@ -309,10 +310,10 @@
} }
.sidebar-panel-card { .sidebar-panel-card {
background: var(--claude-panel); background: var(--claude-left-rail);
border: 1px solid var(--claude-border); border: 1px solid var(--claude-border);
border-radius: 18px; border-radius: 18px;
box-shadow: 0 12px 30px rgba(61, 57, 41, 0.12); box-shadow: none;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -330,7 +331,7 @@
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;
background: var(--claude-sidebar); background: var(--claude-left-rail);
padding: 6px 12px 24px; padding: 6px 12px 24px;
border-radius: 0 0 18px 18px; border-radius: 0 0 18px 18px;
border-top: 1px solid rgba(118, 103, 84, 0.12); border-top: 1px solid rgba(118, 103, 84, 0.12);
@ -352,7 +353,7 @@
border: 1px solid rgba(118, 103, 84, 0.2); border: 1px solid rgba(118, 103, 84, 0.2);
border-radius: 8px; border-radius: 8px;
padding: 6px 8px; padding: 6px 8px;
box-shadow: 0 6px 18px rgba(61, 57, 41, 0.12); box-shadow: none;
z-index: 20; z-index: 20;
} }
@ -457,7 +458,7 @@
border: 1px solid rgba(118, 103, 84, 0.2); border: 1px solid rgba(118, 103, 84, 0.2);
border-radius: 10px; border-radius: 10px;
padding: 12px 14px; padding: 12px 14px;
background: rgba(255, 255, 255, 0.92); background: color-mix(in srgb, var(--claude-left-rail) 88%, var(--theme-surface-strong) 12%);
cursor: pointer; cursor: pointer;
transition: transition:
border-color 0.2s ease, border-color 0.2s ease,
@ -471,11 +472,11 @@
.sub-agent-card:hover { .sub-agent-card:hover {
border-color: #6c5ce7; border-color: #6c5ce7;
box-shadow: 0 6px 16px rgba(108, 92, 231, 0.15); box-shadow: none;
[data-theme='dark'] & { [data-theme='dark'] & {
border-color: #8b7ce7; border-color: #8b7ce7;
box-shadow: 0 6px 16px rgba(139, 124, 231, 0.25); box-shadow: none;
} }
} }
@ -531,7 +532,7 @@
color: var(--claude-text-secondary); color: var(--claude-text-secondary);
padding: 10px 14px; padding: 10px 14px;
border-radius: 10px; border-radius: 10px;
background: rgba(255, 255, 255, 0.8); background: color-mix(in srgb, var(--claude-left-rail) 88%, var(--theme-surface-strong) 12%);
border: 1px dashed var(--claude-border); border: 1px dashed var(--claude-border);
text-align: center; text-align: center;
@ -562,7 +563,7 @@
margin: 0 auto; margin: 0 auto;
border-radius: 12px; border-radius: 12px;
border: 1px dashed var(--claude-border-strong); border: 1px dashed var(--claude-border-strong);
background: var(--theme-surface-muted); background: color-mix(in srgb, var(--claude-left-rail) 90%, var(--theme-surface-strong) 10%);
padding: 10px 12px; padding: 10px 12px;
position: relative; position: relative;
display: flex; display: flex;
@ -616,7 +617,7 @@
.host-workspace-card { .host-workspace-card {
width: 100%; width: 100%;
border: 1px solid var(--theme-control-border); border: 1px solid var(--theme-control-border);
background: var(--theme-surface-soft); background: color-mix(in srgb, var(--claude-left-rail) 88%, var(--theme-surface-strong) 12%);
border-radius: 10px; border-radius: 10px;
padding: 10px 12px; padding: 10px 12px;
text-align: left; text-align: left;
@ -685,12 +686,12 @@
} }
[data-theme='dark'] .host-workspace-header-box { [data-theme='dark'] .host-workspace-header-box {
background: rgba(30, 30, 30, 0.78); background: var(--claude-left-rail);
border-color: rgba(160, 160, 160, 0.45); border-color: rgba(160, 160, 160, 0.45);
} }
[data-theme='dark'] .host-workspace-card { [data-theme='dark'] .host-workspace-card {
background: #1f1f1f; background: color-mix(in srgb, var(--claude-left-rail) 88%, var(--theme-surface-strong) 12%);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: #222222; background: #222222;
@ -735,7 +736,7 @@
border-radius: 10px; border-radius: 10px;
font-size: 13px; font-size: 13px;
color: var(--claude-text); color: var(--claude-text);
background: rgba(255, 255, 255, 0.9); background: color-mix(in srgb, var(--claude-left-rail) 88%, var(--theme-surface-strong) 12%);
} }
.todo-task.done { .todo-task.done {
@ -843,7 +844,7 @@
background: #ffffff; background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08); border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15); box-shadow: none;
z-index: 3000; z-index: 3000;
min-width: 180px; min-width: 180px;
padding: 6px 0; padding: 6px 0;
@ -917,11 +918,11 @@
top: 0; top: 0;
display: flex; display: flex;
gap: 4px; gap: 4px;
background: var(--theme-surface-strong, #ffffff); background: var(--claude-left-rail);
border: 1px solid var(--claude-border); border: 1px solid var(--claude-border);
border-radius: 14px; border-radius: 14px;
padding: 6px; padding: 6px;
box-shadow: var(--theme-shadow-soft); box-shadow: none;
z-index: 20; z-index: 20;
} }

6
static/src/styles/components/sidebar/_conversation.scss
View File

@ -150,6 +150,10 @@
height: 29px; height: 29px;
} }
.conversation-menu-btn .chat-icon svg {
transform: translateY(3px);
}
.pencil-icon svg { .pencil-icon svg {
width: 22px; width: 22px;
height: 22px; height: 22px;
@ -420,7 +424,7 @@ body[data-theme='dark'] .conversation-sidebar .conversation-item.active:focus-wi
border: 1px solid var(--claude-border); border: 1px solid var(--claude-border);
border-radius: 14px; border-radius: 14px;
background: var(--theme-surface-strong, #fff); background: var(--theme-surface-strong, #fff);
box-shadow: var(--theme-shadow-soft); box-shadow: none;
opacity: 0; opacity: 0;
transform: translateY(-4px) scale(0.98); transform: translateY(-4px) scale(0.98);
pointer-events: none; pointer-events: none;