Skip to content

Commit 199f393

Browse files
rhlinrhlin
authored
Merge pull request #134 from opentiny/fix/template-pc-render
fix: template pc render
2 parents 98887e1 + 7130cf0 commit 199f393

5 files changed

Lines changed: 131 additions & 64 deletions

File tree

‎sites/playground/web/src/components/genui-template/GenuiTemplate.vue‎

Lines changed: 50 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,15 @@ const { isMobile } = useIsMobile();
1717
1818
const TinyCloseIcon = iconClose();
1919
20-
const { currentSchema, setCurrentSchema, setCurrentPreviewSchema, currentPreviewSchema, templateConversationState, conversation, currentCardId } = useTemplate();
20+
const {
21+
currentSchema,
22+
setCurrentSchema,
23+
setCurrentPreviewSchema,
24+
currentPreviewSchema,
25+
templateConversationState,
26+
conversation,
27+
currentCardId,
28+
} = useTemplate();
2129
const props = defineProps<{
2230
theme: 'light' | 'dark' | 'lite' | 'auto';
2331
}>();
@@ -48,7 +56,9 @@ const latestSchemaCardId = computed(() => {
4856
return schemaMessage?.cardId ?? '';
4957
});
5058
// 仅当正在查看历史版本时显示“返回最新版本/应用此版本”
51-
const showReturnLatestButton = computed(() => Boolean(currentCardId.value && latestSchemaCardId.value && currentCardId.value !== latestSchemaCardId.value));
59+
const showReturnLatestButton = computed(() =>
60+
Boolean(currentCardId.value && latestSchemaCardId.value && currentCardId.value !== latestSchemaCardId.value),
61+
);
5262
// 历史版本在未“应用此版本”前禁止编辑
5363
const isHistoryVersionApplied = ref(true);
5464
const isSchemaEditorReadonly = computed(() => showReturnLatestButton.value && !isHistoryVersionApplied.value);
@@ -266,36 +276,58 @@ onUnmounted(() => {
266276
<div class="schema-version-container" v-show="schemaEditorVisible && !isMobile">
267277
<div class="schema-version-container__header">
268278
<span class="schema-version-container__title">查看 Schema</span>
269-
<tiny-button type="text" class="genui-schema-toolbar-close-btn" :icon="TinyCloseIcon" aria-label="关闭"
270-
@click="closeSchemaEditorView" />
279+
<tiny-button
280+
type="text"
281+
class="genui-schema-toolbar-close-btn"
282+
:icon="TinyCloseIcon"
283+
aria-label="关闭"
284+
@click="closeSchemaEditorView"
285+
/>
271286
</div>
272287
<div class="schema-version-container__editor">
273288
<code-editor v-model:value="schemaEditor" language="json" theme="vs" :options="editorOptions" />
274289
</div>
275290
</div>
276291
</div>
277-
<genui-template-mobile-sheet v-if="isMobile" :visible="isMobile && schemaEditorVisible"
278-
:json-editor-open="mobileSchemaJsonEditorOpen" :panel-style="mobileSheetPanelStyle"
279-
:show-return-latest-button="showReturnLatestButton" :current-preview-schema="currentPreviewSchema"
280-
:schema-editor="schemaEditor" :editor-options="editorOptions" :view-schema-icon="viewSchemaIcon"
281-
:close-icon="TinyCloseIcon" @update:json-editor-open="mobileSchemaJsonEditorOpen = $event"
282-
@update:schema-editor="schemaEditor = $event" @mask-click="onMobileSheetMaskClick"
283-
@grab-touch-start="onMobileSheetGrabTouchStart" @close="closeSchemaEditorView"
284-
@apply-current-version="applyCurrentVersion" @reset-to-latest-version="resetToLatestVersion" />
292+
<genui-template-mobile-sheet
293+
v-if="isMobile"
294+
:visible="isMobile && schemaEditorVisible"
295+
:json-editor-open="mobileSchemaJsonEditorOpen"
296+
:panel-style="mobileSheetPanelStyle"
297+
:show-return-latest-button="showReturnLatestButton"
298+
:current-preview-schema="currentPreviewSchema"
299+
:schema-editor="schemaEditor"
300+
:editor-options="editorOptions"
301+
:view-schema-icon="viewSchemaIcon"
302+
:close-icon="TinyCloseIcon"
303+
@update:json-editor-open="mobileSchemaJsonEditorOpen = $event"
304+
@update:schema-editor="schemaEditor = $event"
305+
@mask-click="onMobileSheetMaskClick"
306+
@grab-touch-start="onMobileSheetGrabTouchStart"
307+
@close="closeSchemaEditorView"
308+
@apply-current-version="applyCurrentVersion"
309+
@reset-to-latest-version="resetToLatestVersion"
310+
/>
285311
<template v-else>
286-
<div class="genui-schema-template-item renderer-container" v-if="currentSchema && rendererPanelVisible">
312+
<div class="genui-schema-template-item renderer-container" v-if="currentPreviewSchema && rendererPanelVisible">
287313
<div class="renderer-container-wrapper">
288314
<div class="top-button-group">
289315
<button type="button" class="schema-toggle-text" @click="toggleSchemaEditor">
290316
<img class="button-svg-icon" :src="viewSchemaIcon" alt="" />
291317
查看 JSON
292318
</button>
293319
<div class="top-button-group-right">
294-
<tiny-button v-if="showReturnLatestButton" round @click="resetToLatestVersion">返回最新版本</tiny-button>
295-
<tiny-button v-if="showReturnLatestButton" type="primary" round
296-
@click="applyCurrentVersion">应用此版本</tiny-button>
297-
<tiny-button type="text" class="genui-schema-toolbar-close-btn" :icon="TinyCloseIcon" aria-label="关闭预览区"
298-
@click="closeRendererPanel" />
320+
<tiny-button v-if="showReturnLatestButton" type="primary" round @click="resetToLatestVersion">返回最新版本</tiny-button>
321+
<tiny-button v-if="showReturnLatestButton" round @click="applyCurrentVersion">
322+
应用此版本
323+
</tiny-button>
324+
<tiny-button
325+
type="text"
326+
class="genui-schema-toolbar-close-btn"
327+
:icon="TinyCloseIcon"
328+
aria-label="关闭预览区"
329+
@click="closeRendererPanel"
330+
/>
299331
</div>
300332
</div>
301333
<schema-renderer class="schema-renderer" :content="currentPreviewSchema" :generating="false" />
@@ -340,7 +372,6 @@ onUnmounted(() => {
340372
min-height: 0;
341373
display: flex;
342374
flex-direction: column;
343-
text-align: center;
344375
position: relative;
345376
346377
.top-button-group {
@@ -415,7 +446,6 @@ onUnmounted(() => {
415446
}
416447
}
417448
418-
419449
.genui-template-chat {
420450
width: 100%;
421451
min-height: 0;

‎sites/playground/web/src/components/genui-template/GenuiTemplateChat.vue‎

Lines changed: 55 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { GeneratingStatus, STATUS } from '@opentiny/tiny-robot-kit';
1616
import type { ChatMessage } from '@opentiny/tiny-robot-kit';
1717
import { IconAi, IconUser, IconArrowDown } from '@opentiny/tiny-robot-svgs';
1818
import type { BubbleRoleConfig } from '@opentiny/tiny-robot';
19-
import { requiredCompleteFieldSelectors, scrollEnd, throttle } from '@opentiny/genui-sdk-vue';
19+
import { requiredCompleteFieldSelectors, scrollEnd, throttle, GENUI_CONFIG } from '@opentiny/genui-sdk-vue';
2020
import type { IMessage } from '@opentiny/genui-sdk-vue';
2121
import copy from 'clipboard-copy';
2222
import type { INotificationPayload, IMessageItem, IJsonPatchMessageItem, ISchemaCardMessageItem } from './chat.types';
@@ -37,15 +37,15 @@ import { emitter } from './template-chat-event-emitter';
3737
import useIcon from '../../use-icon';
3838
3939
const { addIcons } = useIcon();
40-
addIcons(IconAi, IconUser);
40+
addIcons(IconAi, IconUser, IconArrowDown);
4141
4242
const props = defineProps<{
4343
messages?: IMessage[];
4444
}>();
4545
4646
const emit = defineEmits(['schema-version-toggle']);
4747
48-
const TinyGenuiConfig: any = inject('TinyGenuiConfig');
48+
const TinyGenuiConfig: any = inject(GENUI_CONFIG, null);
4949
const { setColorMode } = useTheme();
5050
const prevSchema = ref<string>('');
5151
const errorMessagesMap = ref<Map<string, string>>(new Map());
@@ -141,7 +141,6 @@ const schemaCardRenderer = async (props: any) => {
141141
// 给每个组件添加 id
142142
const schemaWithId = generateIdForComponents(target);
143143
setCurrentPreviewSchema(schemaWithId);
144-
145144
} catch (error) {
146145
console.error('schemaCardRenderer error ===>', error);
147146
errorMessagesMap.value.set(props.cardId, error.message);
@@ -261,7 +260,8 @@ const messageRenderers = {
261260
prevSchema: prevSchema.value,
262261
errorMessagesMap: errorMessagesMap.value,
263262
messages: messages.value,
264-
onSchemaVersionToggle: (schema: Record<string, unknown>, cardId: string) => emit('schema-version-toggle', schema, cardId),
263+
onSchemaVersionToggle: (schema: Record<string, unknown>, cardId: string) =>
264+
emit('schema-version-toggle', schema, cardId),
265265
});
266266
},
267267
'schema-card': (props) => {
@@ -273,7 +273,8 @@ const messageRenderers = {
273273
prevSchema: prevSchema.value,
274274
errorMessagesMap: errorMessagesMap.value,
275275
messages: messages.value,
276-
onSchemaVersionToggle: (schema: Record<string, unknown>, cardId: string) => emit('schema-version-toggle', schema, cardId),
276+
onSchemaVersionToggle: (schema: Record<string, unknown>, cardId: string) =>
277+
emit('schema-version-toggle', schema, cardId),
277278
});
278279
},
279280
};
@@ -399,21 +400,45 @@ onUnmounted(() => {
399400
</script>
400401

401402
<template>
402-
<div class="tg-chat-container" :class="{ 'dark': TinyGenuiConfig?.theme === 'dark' }">
403-
<div class="messages-container" ref="messagesContainer">
403+
<div
404+
class="tg-chat-container"
405+
:class="{ 'dark': TinyGenuiConfig?.theme === 'dark' }"
406+
>
407+
<div
408+
class="messages-container"
409+
ref="messagesContainer"
410+
>
404411
<tr-bubble-provider :content-renderers="messageRenderers">
405-
<tr-bubble-list v-if="showMessages.length" :items="showMessages" :roles="roles" auto-scroll> </tr-bubble-list>
412+
<tr-bubble-list
413+
v-if="showMessages.length"
414+
:items="showMessages"
415+
:roles="roles"
416+
auto-scroll
417+
>
418+
</tr-bubble-list>
406419
</tr-bubble-provider>
407420
</div>
408421
<div class="sender-container">
409-
<div :class="['scroll-to-bottom-button', { 'is-generating': generating }]" v-show="!isLastMessageInBottom"
410-
@click="scrollToBottom">
422+
<div
423+
:class="['scroll-to-bottom-button', { 'is-generating': generating }]"
424+
v-show="!isLastMessageInBottom"
425+
@click="scrollToBottom"
426+
>
411427
<IconArrowDown class="icon-arrow-down" />
412428
</div>
413-
<tr-sender v-model="inputMessage"
414-
:placeholder="GeneratingStatus.includes(messageManager.messageState.status) ? '正在思考中...' : '请输入您的问题～'"
415-
:clearable="true" :loading="GeneratingStatus.includes(messageManager.messageState.status)" :showWordLimit="true"
416-
:maxLength="5000" @clear="clearInputMessage" @submit="handleSendMessage" @cancel="messageManager.abortRequest">
429+
<tr-sender
430+
v-model="inputMessage"
431+
:placeholder="
432+
GeneratingStatus.includes(messageManager.messageState.status) ? '正在思考中...' : '请输入您的问题～'
433+
"
434+
:clearable="true"
435+
:loading="GeneratingStatus.includes(messageManager.messageState.status)"
436+
:showWordLimit="true"
437+
:maxLength="5000"
438+
@clear="clearInputMessage"
439+
@submit="handleSendMessage"
440+
@cancel="messageManager.abortRequest"
441+
>
417442
</tr-sender>
418443
</div>
419444
</div>
@@ -423,6 +448,10 @@ onUnmounted(() => {
423448
.tg-chat-container {
424449
--ti-gen-chat-container-bg-color: #f0f0f0;
425450
--thinking-display: initial;
451+
--sender-bg: url('./assets/sender-light.svg') no-repeat center;
452+
--sender-border-color: #e5e5e5;
453+
--generating-bg-before: linear-gradient(90deg, #fff, #a2c7f4);
454+
--generating-bg-after: #fff;
426455
box-sizing: border-box;
427456
height: 100%;
428457
color: var(--tr-text-primary);
@@ -431,9 +460,12 @@ onUnmounted(() => {
431460
display: flex;
432461
flex-direction: column;
433462
overflow: auto;
434-
435463
&.dark {
436464
--ti-gen-chat-container-bg-color: #191919;
465+
--sender-bg: url('./assets/sender-dark.svg') no-repeat center;
466+
--sender-border-color: #333;
467+
--generating-bg-before: linear-gradient(90deg, #262626, #808080);
468+
--generating-bg-after: #191919;
437469
}
438470
}
439471
@@ -464,15 +496,14 @@ onUnmounted(() => {
464496
}
465497
466498
:deep(.tr-bubble[data-role='assistant'] .tr-bubble__content-items) {
467-
468499
// 匹配：type非空 + 排除 schema-card/loading-text 这两个值
469-
>[type]:not([type='']):not([type='schema-card']):not([type='loading-text']) {
500+
> [type]:not([type='']):not([type='schema-card']):not([type='loading-text']) {
470501
display: var(--thinking-display, initial);
471502
}
472503
}
473504
474505
:deep(.tr-bubble__step-tool) {
475-
&+.tr-bubble__step-tool {
506+
& + .tr-bubble__step-tool {
476507
margin-top: 16px;
477508
}
478509
}
@@ -531,13 +562,15 @@ onUnmounted(() => {
531562
border: 1px solid var(--sender-border-color);
532563
z-index: 1000;
533564
534-
&>svg {
565+
& > svg {
535566
width: 20px;
536567
height: 20px;
537568
}
538569
539570
&:hover {
540-
box-shadow: 0px 10px 20px 0px #0000001a, 0px 0px 1px 0px #00000026;
571+
box-shadow:
572+
0px 10px 20px 0px #0000001a,
573+
0px 0px 1px 0px #00000026;
541574
}
542575
543576
&.is-generating {
@@ -571,7 +604,7 @@ onUnmounted(() => {
571604
z-index: 1;
572605
}
573606
574-
&>svg {
607+
& > svg {
575608
z-index: 2;
576609
}
577610
}

‎sites/playground/web/src/components/genui-template/GenuiTemplateMobileSheet.vue‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,7 @@ const handleJsonEditorChange = (value: string) => {
7575
</div>
7676
</div>
7777
<div
78-
:class="[
79-
'schema-mobile-sheet__body',
80-
{ 'schema-mobile-sheet__body--with-footer': showReturnLatestButton },
81-
]"
78+
:class="['schema-mobile-sheet__body', { 'schema-mobile-sheet__body--with-footer': showReturnLatestButton }]"
8279
>
8380
<div
8481
v-if="currentPreviewSchema"
@@ -92,10 +89,7 @@ const handleJsonEditorChange = (value: string) => {
9289
/>
9390
</div>
9491
<Transition name="schema-mobile-json">
95-
<div
96-
v-show="jsonEditorOpen"
97-
class="schema-mobile-sheet__editor schema-mobile-sheet__editor--layer"
98-
>
92+
<div v-show="jsonEditorOpen" class="schema-mobile-sheet__editor schema-mobile-sheet__editor--layer">
9993
<code-editor
10094
:value="schemaEditor"
10195
language="json"
@@ -107,15 +101,11 @@ const handleJsonEditorChange = (value: string) => {
107101
</Transition>
108102
</div>
109103
<div v-if="showReturnLatestButton" class="schema-mobile-sheet__footer">
110-
<tiny-button
111-
type="primary"
112-
round
113-
class="schema-mobile-sheet__latest-btn"
114-
@click="emit('apply-current-version')"
115-
>
104+
<tiny-button round class="schema-mobile-sheet__latest-btn" @click="emit('apply-current-version')">
116105
应用此版本
117106
</tiny-button>
118107
<tiny-button
108+
type="primary"
119109
round
120110
class="schema-mobile-sheet__latest-btn"
121111
@click="emit('reset-to-latest-version')"
@@ -351,7 +341,9 @@ const handleJsonEditorChange = (value: string) => {
351341
352342
.schema-mobile-json-enter-active,
353343
.schema-mobile-json-leave-active {
354-
transition: opacity 0.2s ease, transform 0.22s ease;
344+
transition:
345+
opacity 0.2s ease,
346+
transform 0.22s ease;
355347
}
356348
357349
.schema-mobile-json-enter-from,

0 commit comments

Comments
 (0)