diff --git a/static/src/App.vue b/static/src/App.vue index 6d69d9e..90ed59b 100644 --- a/static/src/App.vue +++ b/static/src/App.vue @@ -376,31 +376,53 @@ -
+
- - +
@@ -514,7 +536,8 @@ import VideoPicker from './components/overlay/VideoPicker.vue'; const mobilePanelIcon = new URL('../icons/align-left.svg', import.meta.url).href; const mobileMenuIcons = { workspace: new URL('../icons/folder.svg', import.meta.url).href, - personal: new URL('../icons/user.svg', import.meta.url).href + personal: new URL('../icons/user.svg', import.meta.url).href, + newChat: new URL('../icons/pencil.svg', import.meta.url).href }; defineOptions(appOptions); diff --git a/static/src/styles/components/chat/_chat-area.scss b/static/src/styles/components/chat/_chat-area.scss index 052f179..26d4a4e 100644 --- a/static/src/styles/components/chat/_chat-area.scss +++ b/static/src/styles/components/chat/_chat-area.scss @@ -140,11 +140,25 @@ .messages-area { padding-top: 8px; + padding-left: 12px !important; + padding-right: 12px !important; } .message-block:first-child { margin-top: 0; } + + .assistant-message .message-text { + padding: 16px 8px !important; + } +} + +/* 额外的手机端样式,不依赖 mobile 类 */ +@media (max-width: 768px) { + .messages-flow { + padding-left: 0; + padding-right: 0; + } } .conversation-ribbon__selector { @@ -747,7 +761,7 @@ body[data-theme='dark'] .more-icon { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - flex-shrink: 1; + flex: 1; min-width: 0; } diff --git a/static/src/styles/components/overlays/_overlays.scss b/static/src/styles/components/overlays/_overlays.scss index 5184067..749ce01 100644 --- a/static/src/styles/components/overlays/_overlays.scss +++ b/static/src/styles/components/overlays/_overlays.scss @@ -370,6 +370,7 @@ max-height: none; border-radius: 0; padding: 16px; + padding-top: 60px; display: flex; flex-direction: column; } @@ -1515,6 +1516,70 @@ align-self: flex-start; } +/* 新的下拉菜单样式 */ +.mobile-panel-menu--dropdown { + position: fixed; + top: 52px; + left: 12px; + display: flex; + flex-direction: column; + gap: 6px; + padding: 12px; + border-radius: 14px; + background: rgba(255, 255, 255, 0.96); + box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18); + backdrop-filter: blur(8px); + min-width: 200px; + z-index: 1600; +} + +.mobile-menu-item { + display: flex; + align-items: center; + gap: 12px; + padding: 10px 12px; + border-radius: 12px; + background: transparent; + border: 1px solid transparent; + cursor: pointer; + transition: all 0.18s ease; + color: #0f172a; + text-align: left; +} + +.mobile-menu-item:hover { + background: #f6f7fb; +} + +.mobile-menu-item .item-label { + font-size: 14px; + font-weight: 500; + flex: 1; +} + +/* 统一所有图标容器宽度为 30px,确保文字左对齐 */ +.mobile-menu-icon { + width: 24px !important; + height: 24px !important; + min-width: 30px; + max-width: 30px; + flex-shrink: 0; + display: block; +} + +/* 对话记录图标特殊尺寸,但容器宽度保持 30px */ +.mobile-menu-item:nth-child(1) svg.mobile-menu-icon { + width: 30px !important; + height: 30px !important; + margin-top: 2px; +} + +/* 个人空间图标稍大一点 */ +.mobile-menu-item:nth-child(3) img.mobile-menu-icon { + width: 26px !important; + height: 26px !important; +} + .mobile-topbar-title { flex: 1; font-size: 14px; @@ -1661,6 +1726,7 @@ border-radius: 0; box-shadow: none; padding: 0; + padding-top: 44px; position: relative; overflow: hidden; display: flex; @@ -1695,7 +1761,7 @@ margin-top: 0; flex: 1; width: 100%; - height: 100%; + height: calc(100% - 44px); overflow: hidden; } @@ -2941,6 +3007,25 @@ body[data-theme='dark'] { background: #000000 !important; } + /* 新的下拉菜单样式 - 暗色主题 */ + .mobile-panel-menu--dropdown { + background: #2a2a2a !important; + box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5) !important; + } + + .mobile-menu-item { + color: #ffffff !important; + } + + .mobile-menu-item:hover { + background: #3a3a3a !important; + } + + /* 图标颜色反转为白色 */ + .mobile-menu-icon { + filter: brightness(0) invert(1) !important; + } + /* 手机端菜单按钮 - SVG 白色 */ .mobile-menu-btn { color: #ffffff !important;