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:
parent
eff089c7ad
commit
1df9ee3cf2
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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: '/',
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue