Skip to content

Commit bfeca29

Browse files
author
何嘉悦
committed
docs: v1.2.0 上新
1 parent f50b4f9 commit bfeca29

29 files changed

+480
-697
lines changed

‎apps/docs/components.d.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ declare module 'vue' {
1111
Attachments: typeof import('vue-element-plus-x')['Attachments']
1212
Bubble: typeof import('vue-element-plus-x')['Bubble']
1313
BubbleList: typeof import('vue-element-plus-x')['BubbleList']
14-
ClientOnly: typeof import('vue-element-plus-x')['ClientOnly']
1514
Conversations: typeof import('vue-element-plus-x')['Conversations']
1615
ElAvatar: typeof import('element-plus')['ElAvatar']
1716
ElButton: typeof import('element-plus')['ElButton']

‎apps/docs/components/bubble/demos/avatar-and-placement.vue‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -28,24 +28,26 @@ const avatarUser = 'https://avatars.githubusercontent.com/u/76239030?v=4'
2828
</script>
2929

3030
<template>
31-
<div style="display: flex; flex-direction: column; gap: 12px;">
32-
<!-- Avatar and Placement 左侧 -->
33-
<Bubble content="Good morning, how are you?" placement="start" :avatar="avatarAI" avatar-size="48px" />
34-
35-
<!-- avatar-size 设置头像占位空间 -->
36-
<Bubble content="What a beautiful day!" placement="start" avatar-size="48px" />
37-
38-
<!-- Avatar and Placement 右侧 -->
39-
<Bubble content="Hi, good morning, I'm fine!" placement="end">
40-
<template #avatar>
41-
<el-avatar
42-
:size="32"
43-
:src="avatarUser"
44-
/>
45-
</template>
46-
</Bubble>
47-
48-
<!-- avatar-gap 属性控制 气泡与头像的距离 -->
49-
<Bubble content="Hi, good morning, I'm fine! Thank you!" placement="end" avatar-size="0px" avatar-gap="0px" />
50-
</div>
31+
<ClientOnly>
32+
<div style="display: flex; flex-direction: column; gap: 12px;">
33+
<!-- Avatar and Placement 左侧 -->
34+
<Bubble content="Good morning, how are you?" placement="start" :avatar="avatarAI" avatar-size="48px" />
35+
36+
<!-- avatar-size 设置头像占位空间 -->
37+
<Bubble content="What a beautiful day!" placement="start" avatar-size="48px" />
38+
39+
<!-- Avatar and Placement 右侧 -->
40+
<Bubble content="Hi, good morning, I'm fine!" placement="end">
41+
<template #avatar>
42+
<el-avatar
43+
:size="32"
44+
:src="avatarUser"
45+
/>
46+
</template>
47+
</Bubble>
48+
49+
<!-- avatar-gap 属性控制 气泡与头像的距离 -->
50+
<Bubble content="Hi, good morning, I'm fine! Thank you!" placement="end" avatar-size="0px" avatar-gap="0px" />
51+
</div>
52+
</ClientOnly>
5153
</template>

‎apps/docs/components/bubble/demos/content-customize.vue‎

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -16,44 +16,46 @@ const avatarAI = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpn
1616
</script>
1717

1818
<template>
19-
<div style="display: flex; flex-direction: column; gap: 12px;">
20-
<Bubble content="欢迎使用 element-plus-x。" typing :avatar="avatarAI" :avatar-size="avatarSize" no-style>
21-
<template #content>
22-
<div class="content-container">
23-
😊 欢迎使用 element-plus-x，我是自定义气泡
24-
</div>
25-
</template>
26-
</Bubble>
27-
28-
<Bubble :avatar-size="avatarSize" typing no-style variant="borderless">
29-
<template #header>
30-
<div class="content-container-header">
31-
推荐内容 自定义气泡
32-
</div>
33-
</template>
34-
<template #content>
35-
<div class="content-borderless-container">
36-
🥤 长时间工作后如何有效休息？
37-
</div>
38-
</template>
39-
</Bubble>
40-
41-
<Bubble :avatar-size="avatarSize" typing no-style variant="borderless">
42-
<template #content>
43-
<div class="content-borderless-container">
44-
💌 保持积极心态的秘诀是什么？
45-
</div>
46-
</template>
47-
</Bubble>
48-
49-
<Bubble :avatar-size="avatarSize" typing no-style variant="borderless">
50-
<template #content>
51-
<div class="content-borderless-container">
52-
🔥 如何在巨大的压力下保持冷静？
53-
</div>
54-
</template>
55-
</Bubble>
56-
</div>
19+
<ClientOnly>
20+
<div style="display: flex; flex-direction: column; gap: 12px;">
21+
<Bubble content="欢迎使用 element-plus-x。" typing :avatar="avatarAI" :avatar-size="avatarSize" no-style>
22+
<template #content>
23+
<div class="content-container">
24+
😊 欢迎使用 element-plus-x，我是自定义气泡
25+
</div>
26+
</template>
27+
</Bubble>
28+
29+
<Bubble :avatar-size="avatarSize" typing no-style variant="borderless">
30+
<template #header>
31+
<div class="content-container-header">
32+
推荐内容 自定义气泡
33+
</div>
34+
</template>
35+
<template #content>
36+
<div class="content-borderless-container">
37+
🥤 长时间工作后如何有效休息？
38+
</div>
39+
</template>
40+
</Bubble>
41+
42+
<Bubble :avatar-size="avatarSize" typing no-style variant="borderless">
43+
<template #content>
44+
<div class="content-borderless-container">
45+
💌 保持积极心态的秘诀是什么？
46+
</div>
47+
</template>
48+
</Bubble>
49+
50+
<Bubble :avatar-size="avatarSize" typing no-style variant="borderless">
51+
<template #content>
52+
<div class="content-borderless-container">
53+
🔥 如何在巨大的压力下保持冷静？
54+
</div>
55+
</template>
56+
</Bubble>
57+
</div>
58+
</ClientOnly>
5759
</template>
5860

5961
<style scoped>

‎apps/docs/components/bubble/demos/content.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,7 @@ const content = ref('hello world !')
1111
</script>
1212

1313
<template>
14-
<Bubble :content="content" />
14+
<ClientOnly>
15+
<Bubble :content="content" />
16+
</ClientOnly>
1517
</template>

‎apps/docs/components/bubble/demos/cssAndMermaid.vue‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,18 @@ const markdownText = ref(`#### 标题 \n 这是一个 Markdown 示例。\n - 列
3030
</script>
3131

3232
<template>
33-
<div style="display: flex; flex-direction: column; gap: 12px;">
34-
<Bubble :content="markdownText" typing is-markdown>
35-
<template #avatar>
36-
<el-avatar
37-
:size="32"
38-
:src="avatarUser"
39-
/>
40-
</template>
41-
</Bubble>
42-
</div>
33+
<ClientOnly>
34+
<div style="display: flex; flex-direction: column; gap: 12px;">
35+
<Bubble :content="markdownText" typing is-markdown>
36+
<template #avatar>
37+
<el-avatar
38+
:size="32"
39+
:src="avatarUser"
40+
/>
41+
</template>
42+
</Bubble>
43+
</div>
44+
</ClientOnly>
4345
</template>
4446

4547
<style scoped lang="less">

‎apps/docs/components/bubble/demos/customized.vue‎

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -62,41 +62,45 @@ function onDestroy() {
6262
</script>
6363

6464
<template>
65-
<div style="display: flex; flex-direction: column; gap: 12px;">
66-
<div style="display: flex;">
67-
<el-button v-if="isTypingValue" type="warning" style="width: fit-content;" @click="onInterrupt">
68-
<el-icon :size="18">
69-
<VideoPause />
70-
</el-icon>
71-
<span>暂停</span>
72-
</el-button>
73-
<el-button v-if="!isTypingValue && (progressValue !== 0 && progressValue !== 100)" type="success" style="width: fit-content;" @click="bubbleRef?.continue()">
74-
<el-icon :size="18">
75-
<VideoPlay />
76-
</el-icon>
77-
<span>继续</span>
78-
</el-button>
79-
<el-button v-if="!isTypingValue && (progressValue === 0 || progressValue === 100)" type="primary" style="width: fit-content;" @click="bubbleRef?.restart()">
80-
<el-icon :size="18">
81-
<RefreshLeft />
82-
</el-icon>
83-
<span>重播</span>
84-
</el-button>
85-
<el-button type="danger" style="width: fit-content;" @click="onDestroy">
86-
<el-icon><Delete /></el-icon>
87-
<span>销毁</span>
88-
</el-button>
89-
</div>
65+
<ClientOnly>
66+
<div style="display: flex; flex-direction: column; gap: 12px;">
67+
<div style="display: flex;">
68+
<el-button v-if="isTypingValue" type="warning" style="width: fit-content;" @click="onInterrupt">
69+
<el-icon :size="18">
70+
<VideoPause />
71+
</el-icon>
72+
<span>暂停</span>
73+
</el-button>
74+
<el-button v-if="!isTypingValue && (progressValue !== 0 && progressValue !== 100)" type="success"
75+
style="width: fit-content;" @click="bubbleRef?.continue()">
76+
<el-icon :size="18">
77+
<VideoPlay />
78+
</el-icon>
79+
<span>继续</span>
80+
</el-button>
81+
<el-button v-if="!isTypingValue && (progressValue === 0 || progressValue === 100)" type="primary"
82+
style="width: fit-content;" @click="bubbleRef?.restart()">
83+
<el-icon :size="18">
84+
<RefreshLeft />
85+
</el-icon>
86+
<span>重播</span>
87+
</el-button>
88+
<el-button type="danger" style="width: fit-content;" @click="onDestroy">
89+
<el-icon>
90+
<Delete />
91+
</el-icon>
92+
<span>销毁</span>
93+
</el-button>
94+
</div>
9095

91-
<el-progress v-if="progressValue > 0 && progressValue !== 100" :duration="0" :percentage="progressValue" />
92-
<el-progress v-if=" progressValue === 100" :percentage="100" status="success" />
96+
<el-progress v-if="progressValue > 0 && progressValue !== 100" :duration="0" :percentage="progressValue" />
97+
<el-progress v-if="progressValue === 100" :percentage="100" status="success" />
9398

94-
<!-- 这里展示了如果是 markdown 的话，typing.suffix 会被忽略 -->
95-
<Bubble
96-
ref="bubbleRef" :content="markdownContent" :typing="{ suffix: '💩', interval: 40 }" :is-markdown="true"
97-
@start="onStart" @writing="onWriting" @finish="onFinish"
98-
/>
99-
</div>
99+
<!-- 这里展示了如果是 markdown 的话，typing.suffix 会被忽略 -->
100+
<Bubble ref="bubbleRef" :content="markdownContent" :typing="{ suffix: '💩', interval: 40 }" :is-markdown="true"
101+
@start="onStart" @writing="onWriting" @finish="onFinish" />
102+
</div>
103+
</ClientOnly>
100104
</template>
101105

102106
<style scoped lang="less">

‎apps/docs/components/bubble/demos/header-and-footer.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ const avatarAI = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpn
1414
</script>
1515

1616
<template>
17-
<Bubble :content="content">
17+
<ClientOnly>
18+
<Bubble :content="content">
1819
<template #avatar>
1920
<el-avatar :src="avatarAI" />
2021
</template>
@@ -30,6 +31,8 @@ const avatarAI = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpn
3031
</div>
3132
</template>
3233
</Bubble>
34+
</ClientOnly>
35+
3336
</template>
3437

3538
<style scoped lang="less">

‎apps/docs/components/bubble/demos/is-fog.vue‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -27,24 +27,25 @@ function changeContent(type: number) {
2727
</script>
2828

2929
<template>
30-
<div style="display: flex; flex-direction: column; gap: 12px;">
31-
<div style="display: flex; gap: 12px;">
32-
<el-button style="width: fit-content;" @click="changeContent(1)">
33-
雾化 markdown
34-
</el-button>
35-
<el-button style="width: fit-content;" @click="changeContent(2)">
36-
雾化 text
37-
</el-button>
30+
<ClientOnly>
31+
<div style="display: flex; flex-direction: column; gap: 12px;">
32+
<div style="display: flex; gap: 12px;">
33+
<el-button style="width: fit-content;" @click="changeContent(1)">
34+
雾化 markdown
35+
</el-button>
36+
<el-button style="width: fit-content;" @click="changeContent(2)">
37+
雾化 text
38+
</el-button>
39+
</div>
40+
<Bubble :content="content" :typing="{ step: 3, interval: 80, suffix: '💩' }" is-markdown
41+
:is-fog="{ bgColor: '#f5f5f5' }">
42+
<template #avatar>
43+
<el-avatar :size="32" :src="avatarUser" />
44+
</template>
45+
</Bubble>
3846
</div>
39-
<Bubble :content="content" :typing="{ step: 3, interval: 80, suffix: '💩' }" is-markdown :is-fog="{ bgColor: '#f5f5f5' }">
40-
<template #avatar>
41-
<el-avatar
42-
:size="32"
43-
:src="avatarUser"
44-
/>
45-
</template>
46-
</Bubble>
47-
</div>
47+
</ClientOnly>
48+
4849
</template>
4950

5051
<style scoped lang="less">

‎apps/docs/components/bubble/demos/is-markdown.vue‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,18 @@ function changeContent() {
2222
</script>
2323

2424
<template>
25-
<div style="display: flex; flex-direction: column; gap: 12px;">
26-
<el-button style="width: fit-content;" @click="changeContent">
27-
设置 markdown
28-
</el-button>
29-
<Bubble :content="content" typing is-markdown>
30-
<template #avatar>
31-
<el-avatar
32-
:size="32"
33-
:src="avatarUser"
34-
/>
35-
</template>
36-
</Bubble>
37-
</div>
25+
<ClientOnly>
26+
<div style="display: flex; flex-direction: column; gap: 12px;">
27+
<el-button style="width: fit-content;" @click="changeContent">
28+
设置 markdown
29+
</el-button>
30+
<Bubble :content="content" typing is-markdown>
31+
<template #avatar>
32+
<el-avatar :size="32" :src="avatarUser" />
33+
</template>
34+
</Bubble>
35+
</div>
36+
</ClientOnly>
3837
</template>
3938

4039
<style scoped lang="less">

‎apps/docs/components/bubble/demos/loading.vue‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,24 +16,26 @@ const content = ref('hello world !')
1616
</script>
1717

1818
<template>
19-
<div style="display: flex; flex-direction: column; gap: 10px;">
20-
<Bubble :content="content" :loading="loading" />
21-
22-
<Bubble :content="content" :loading="loading">
23-
<template #loading>
24-
<div>loading...</div>
25-
</template>
26-
</Bubble>
27-
28-
<Bubble :content="content" :loading="loading">
29-
<template #loading>
30-
<div>感谢使用 Element-Plus-X 🌹 请稍后...</div>
31-
</template>
32-
</Bubble>
33-
34-
<div style="display: flex; align-items: center;">
35-
<span>状态：</span>
36-
<el-switch v-model="loading" />
19+
<ClientOnly>
20+
<div style="display: flex; flex-direction: column; gap: 10px;">
21+
<Bubble :content="content" :loading="loading" />
22+
23+
<Bubble :content="content" :loading="loading">
24+
<template #loading>
25+
<div>loading...</div>
26+
</template>
27+
</Bubble>
28+
29+
<Bubble :content="content" :loading="loading">
30+
<template #loading>
31+
<div>感谢使用 Element-Plus-X 🌹 请稍后...</div>
32+
</template>
33+
</Bubble>
34+
35+
<div style="display: flex; align-items: center;">
36+
<span>状态：</span>
37+
<el-switch v-model="loading" />
38+
</div>
3739
</div>
38-
</div>
40+
</ClientOnly>
3941
</template>

0 commit comments

Comments
 (0)