fix: 移除路由 base 路径并优化图片展示布局

- Vue Router base 路径从 /chat-ui/ 改为 /
- MessageBubble 添加 readonly prop,分享页面隐藏操作栏
- 图片网格改用 inline-flex 布局,按内容宽度收缩

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
肖应宇 2026-03-26 10:17:58 +08:00
parent eff089c7ad
commit 1df9ee3cf2
3 changed files with 12 additions and 7 deletions

View File

@ -175,6 +175,7 @@
message.role === 'assistant' && message.role === 'assistant' &&
!message.isStreaming && !message.isStreaming &&
!message.isError && !message.isError &&
!readonly &&
!isMessageSelectMode !isMessageSelectMode
" "
:content="message.content.text || ''" :content="message.content.text || ''"
@ -223,12 +224,14 @@ const props = withDefaults(
isNew?: boolean; isNew?: boolean;
isMessageSelectMode?: boolean; isMessageSelectMode?: boolean;
isSelected?: boolean; isSelected?: boolean;
readonly?: boolean;
}>(), }>(),
{ {
showTimestamp: true, showTimestamp: true,
compact: false, compact: false,
isMessageSelectMode: false, isMessageSelectMode: false,
isSelected: false, isSelected: false,
readonly: false,
}, },
); );
const { copy } = useClipboard({ legacy: true }); const { copy } = useClipboard({ legacy: true });
@ -488,7 +491,7 @@ setCustomComponents("playground-demo", {
// markstream-vue // markstream-vue
.text-content { .text-content {
:deep(p) { :deep(p) {
margin: 0 0 12px; margin: 0 0 12px;
&:last-child { &:last-child {
@ -664,15 +667,16 @@ setCustomComponents("playground-demo", {
} }
} }
.images-grid { .images-flex {
display: grid; display: inline-flex;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); flex-wrap: wrap;
gap: 8px; gap: 7px;
margin-top: 12px; margin-top: 12px;
} }
.image-item { .image-item {
position: relative; position: relative;
width: 130px;
aspect-ratio: 1; aspect-ratio: 1;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;

View File

@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue' import HomeView from '@/views/HomeView.vue'
const router = createRouter({ const router = createRouter({
history: createWebHistory('/chat-ui/'), history: createWebHistory('/'),
routes: [ routes: [
{ {
path: '/', path: '/',

View File

@ -100,6 +100,7 @@
:key="message.id" :key="message.id"
:message="message" :message="message"
:show-timestamp="true" :show-timestamp="true"
:readonly="true"
/> />
</template> </template>
</div> </div>
@ -562,4 +563,4 @@ onMounted(() => {
padding: 20px 0; padding: 20px 0;
overflow-y: auto; overflow-y: auto;
} }
</style> </style>