vue-element-ui-x 0.1.5 → 0.1.7-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/attachments.js +3082 -0
- package/lib/bubble-list.js +13840 -0
- package/lib/bubble.js +13125 -0
- package/lib/components/Attachments/index.js +6 -6
- package/lib/components/Bubble/index.js +188 -192
- package/lib/components/BubbleList/index.js +189 -194
- package/lib/components/Conversations/index.js +6 -6
- package/lib/components/FilesCard/index.js +5 -5
- package/lib/components/Prompts/index.js +21 -21
- package/lib/components/Sender/index.js +4 -4
- package/lib/components/Think/index.js +1 -1
- package/lib/components/Thinking/index.js +1 -1
- package/lib/components/ThoughtChain/index.js +186 -191
- package/lib/components/Typewriter/index.js +182 -186
- package/lib/components/Welcome/index.js +1 -1
- package/lib/conversations.js +18825 -0
- package/lib/files-card.js +2471 -0
- package/lib/index.common.js +1 -1
- package/lib/index.esm.js +1 -1
- package/lib/index.js +1707 -1691
- package/lib/index.umd.js +1 -1
- package/lib/mixins/index.js +2 -2
- package/lib/mixins.js +1016 -0
- package/lib/prompts.js +832 -0
- package/lib/sender.js +1911 -0
- package/lib/think.js +799 -0
- package/lib/thinking.js +809 -0
- package/lib/thought-chain.js +30391 -0
- package/lib/typewriter.js +12788 -0
- package/lib/welcome.js +755 -0
- package/package.json +3 -4
- package/src/components/Attachments/index.js +8 -8
- package/src/components/Bubble/index.js +6 -6
- package/src/components/Bubble/src/main.vue +299 -299
- package/src/components/BubbleList/index.js +8 -8
- package/src/components/BubbleList/src/loading.vue +75 -75
- package/src/components/BubbleList/src/main.vue +466 -466
- package/src/components/Conversations/index.js +8 -8
- package/src/components/Conversations/src/main.vue +635 -635
- package/src/components/FilesCard/index.js +8 -8
- package/src/components/FilesCard/src/fileSvg/audio.vue +38 -38
- package/src/components/FilesCard/src/fileSvg/code.vue +35 -35
- package/src/components/FilesCard/src/fileSvg/database.vue +94 -94
- package/src/components/FilesCard/src/fileSvg/excel.vue +38 -38
- package/src/components/FilesCard/src/fileSvg/file.vue +40 -40
- package/src/components/FilesCard/src/fileSvg/image.vue +40 -40
- package/src/components/FilesCard/src/fileSvg/index.js +46 -46
- package/src/components/FilesCard/src/fileSvg/link.vue +54 -54
- package/src/components/FilesCard/src/fileSvg/mark.vue +38 -38
- package/src/components/FilesCard/src/fileSvg/pdf.vue +38 -38
- package/src/components/FilesCard/src/fileSvg/ppt.vue +38 -38
- package/src/components/FilesCard/src/fileSvg/three.vue +38 -38
- package/src/components/FilesCard/src/fileSvg/txt.vue +38 -38
- package/src/components/FilesCard/src/fileSvg/unknown.vue +54 -54
- package/src/components/FilesCard/src/fileSvg/video.vue +38 -38
- package/src/components/FilesCard/src/fileSvg/word.vue +38 -38
- package/src/components/FilesCard/src/fileSvg/zip.vue +38 -38
- package/src/components/FilesCard/src/options.js +18 -18
- package/src/components/Prompts/index.js +8 -8
- package/src/components/Prompts/src/main.vue +248 -248
- package/src/components/Sender/index.js +8 -8
- package/src/components/Sender/src/components/ClearButton.vue +28 -28
- package/src/components/Sender/src/components/Loading.vue +53 -53
- package/src/components/Sender/src/components/LoadingButton.vue +39 -39
- package/src/components/Sender/src/components/SendButton.vue +26 -26
- package/src/components/Sender/src/components/SpeechButton.vue +24 -24
- package/src/components/Sender/src/components/SpeechLoading.vue +87 -87
- package/src/components/Sender/src/components/SpeechLoadingButton.vue +43 -43
- package/src/components/Think/index.js +8 -8
- package/src/components/Think/src/main.vue +190 -190
- package/src/components/Thinking/index.js +8 -8
- package/src/components/Thinking/src/main.vue +195 -195
- package/src/components/ThoughtChain/index.js +8 -8
- package/src/components/ThoughtChain/src/main.vue +293 -293
- package/src/components/Typewriter/index.js +8 -8
- package/src/components/Welcome/index.js +8 -8
- package/src/components/Welcome/src/main.vue +151 -151
- package/src/index.js +23 -3
- package/src/styles/Attachments.scss +236 -236
- package/src/styles/Bubble.scss +157 -157
- package/src/styles/BubbleList.scss +148 -148
- package/src/styles/Conversations.scss +260 -260
- package/src/styles/FilesCard.scss +221 -221
- package/src/styles/Prompts.scss +195 -195
- package/src/styles/Sender.scss +199 -199
- package/src/styles/Think.scss +134 -134
- package/src/styles/Thinking.scss +112 -112
- package/src/styles/ThoughtChain.scss +113 -113
- package/src/styles/Typewriter.scss +66 -66
- package/src/styles/button.scss +302 -0
- package/src/styles/var.scss +1052 -0
- package/src/theme/var.scss +72 -72
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="el-x-send-button">
|
|
3
|
-
<el-button
|
|
4
|
-
circle
|
|
5
|
-
@click="$emit('clear')"
|
|
6
|
-
size="small"
|
|
7
|
-
>
|
|
8
|
-
<i class="el-icon-brush"></i>
|
|
9
|
-
</el-button>
|
|
10
|
-
</div>
|
|
11
|
-
</template>
|
|
12
|
-
|
|
13
|
-
<script>
|
|
14
|
-
export default {
|
|
15
|
-
name: 'ClearButton',
|
|
16
|
-
};
|
|
17
|
-
</script>
|
|
18
|
-
|
|
19
|
-
<style scoped lang="scss">
|
|
20
|
-
.el-x-send-button {
|
|
21
|
-
.el-button {
|
|
22
|
-
.el-icon-brush {
|
|
23
|
-
// 旋转180
|
|
24
|
-
transform: rotate(180deg);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="el-x-send-button">
|
|
3
|
+
<el-button
|
|
4
|
+
circle
|
|
5
|
+
@click="$emit('clear')"
|
|
6
|
+
size="small"
|
|
7
|
+
>
|
|
8
|
+
<i class="el-icon-brush"></i>
|
|
9
|
+
</el-button>
|
|
10
|
+
</div>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
export default {
|
|
15
|
+
name: 'ClearButton',
|
|
16
|
+
};
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<style scoped lang="scss">
|
|
20
|
+
.el-x-send-button {
|
|
21
|
+
.el-button {
|
|
22
|
+
.el-icon-brush {
|
|
23
|
+
// 旋转180
|
|
24
|
+
transform: rotate(180deg);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
</style>
|
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<svg
|
|
3
|
-
viewBox="0 0 1000 1000"
|
|
4
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
-
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
6
|
-
>
|
|
7
|
-
<title>Loading</title>
|
|
8
|
-
<rect
|
|
9
|
-
fill="currentColor"
|
|
10
|
-
height="250"
|
|
11
|
-
rx="24"
|
|
12
|
-
ry="24"
|
|
13
|
-
width="250"
|
|
14
|
-
x="375"
|
|
15
|
-
y="375"
|
|
16
|
-
/>
|
|
17
|
-
<circle
|
|
18
|
-
cx="500"
|
|
19
|
-
cy="500"
|
|
20
|
-
fill="none"
|
|
21
|
-
r="450"
|
|
22
|
-
stroke="currentColor"
|
|
23
|
-
stroke-width="100"
|
|
24
|
-
opacity="0.45"
|
|
25
|
-
/>
|
|
26
|
-
<circle
|
|
27
|
-
cx="500"
|
|
28
|
-
cy="500"
|
|
29
|
-
fill="none"
|
|
30
|
-
r="450"
|
|
31
|
-
stroke="currentColor"
|
|
32
|
-
stroke-width="100"
|
|
33
|
-
stroke-dasharray="600 9999999"
|
|
34
|
-
>
|
|
35
|
-
<animateTransform
|
|
36
|
-
attributeName="transform"
|
|
37
|
-
dur="1s"
|
|
38
|
-
from="0 500 500"
|
|
39
|
-
repeatCount="indefinite"
|
|
40
|
-
to="360 500 500"
|
|
41
|
-
type="rotate"
|
|
42
|
-
/>
|
|
43
|
-
</circle>
|
|
44
|
-
</svg>
|
|
45
|
-
</template>
|
|
46
|
-
|
|
47
|
-
<script>
|
|
48
|
-
export default {
|
|
49
|
-
name: 'Loading',
|
|
50
|
-
};
|
|
51
|
-
</script>
|
|
52
|
-
|
|
53
|
-
<style scoped></style>
|
|
1
|
+
<template>
|
|
2
|
+
<svg
|
|
3
|
+
viewBox="0 0 1000 1000"
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
6
|
+
>
|
|
7
|
+
<title>Loading</title>
|
|
8
|
+
<rect
|
|
9
|
+
fill="currentColor"
|
|
10
|
+
height="250"
|
|
11
|
+
rx="24"
|
|
12
|
+
ry="24"
|
|
13
|
+
width="250"
|
|
14
|
+
x="375"
|
|
15
|
+
y="375"
|
|
16
|
+
/>
|
|
17
|
+
<circle
|
|
18
|
+
cx="500"
|
|
19
|
+
cy="500"
|
|
20
|
+
fill="none"
|
|
21
|
+
r="450"
|
|
22
|
+
stroke="currentColor"
|
|
23
|
+
stroke-width="100"
|
|
24
|
+
opacity="0.45"
|
|
25
|
+
/>
|
|
26
|
+
<circle
|
|
27
|
+
cx="500"
|
|
28
|
+
cy="500"
|
|
29
|
+
fill="none"
|
|
30
|
+
r="450"
|
|
31
|
+
stroke="currentColor"
|
|
32
|
+
stroke-width="100"
|
|
33
|
+
stroke-dasharray="600 9999999"
|
|
34
|
+
>
|
|
35
|
+
<animateTransform
|
|
36
|
+
attributeName="transform"
|
|
37
|
+
dur="1s"
|
|
38
|
+
from="0 500 500"
|
|
39
|
+
repeatCount="indefinite"
|
|
40
|
+
to="360 500 500"
|
|
41
|
+
type="rotate"
|
|
42
|
+
/>
|
|
43
|
+
</circle>
|
|
44
|
+
</svg>
|
|
45
|
+
</template>
|
|
46
|
+
|
|
47
|
+
<script>
|
|
48
|
+
export default {
|
|
49
|
+
name: 'Loading',
|
|
50
|
+
};
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
<style scoped></style>
|
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="el-x-send-button">
|
|
3
|
-
<el-button
|
|
4
|
-
circle
|
|
5
|
-
@click="$emit('cancel')"
|
|
6
|
-
size="small"
|
|
7
|
-
>
|
|
8
|
-
<loading class="loading-svg" />
|
|
9
|
-
</el-button>
|
|
10
|
-
</div>
|
|
11
|
-
</template>
|
|
12
|
-
|
|
13
|
-
<script>
|
|
14
|
-
import Loading from './Loading.vue';
|
|
15
|
-
|
|
16
|
-
export default {
|
|
17
|
-
name: 'LoadingButton',
|
|
18
|
-
components: {
|
|
19
|
-
Loading,
|
|
20
|
-
},
|
|
21
|
-
};
|
|
22
|
-
</script>
|
|
23
|
-
|
|
24
|
-
<style scoped lang="scss">
|
|
25
|
-
@import '~element-ui/packages/theme-chalk/src/common/var';
|
|
26
|
-
|
|
27
|
-
.el-x-send-button {
|
|
28
|
-
height: 32px;
|
|
29
|
-
.el-button {
|
|
30
|
-
padding: 0;
|
|
31
|
-
width: 32px;
|
|
32
|
-
height: 32px;
|
|
33
|
-
}
|
|
34
|
-
.loading-svg {
|
|
35
|
-
color: $--color-primary;
|
|
36
|
-
width: 100%;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="el-x-send-button">
|
|
3
|
+
<el-button
|
|
4
|
+
circle
|
|
5
|
+
@click="$emit('cancel')"
|
|
6
|
+
size="small"
|
|
7
|
+
>
|
|
8
|
+
<loading class="loading-svg" />
|
|
9
|
+
</el-button>
|
|
10
|
+
</div>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
import Loading from './Loading.vue';
|
|
15
|
+
|
|
16
|
+
export default {
|
|
17
|
+
name: 'LoadingButton',
|
|
18
|
+
components: {
|
|
19
|
+
Loading,
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<style scoped lang="scss">
|
|
25
|
+
@import '~element-ui/packages/theme-chalk/src/common/var';
|
|
26
|
+
|
|
27
|
+
.el-x-send-button {
|
|
28
|
+
height: 32px;
|
|
29
|
+
.el-button {
|
|
30
|
+
padding: 0;
|
|
31
|
+
width: 32px;
|
|
32
|
+
height: 32px;
|
|
33
|
+
}
|
|
34
|
+
.loading-svg {
|
|
35
|
+
color: $--color-primary;
|
|
36
|
+
width: 100%;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
</style>
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="el-x-send-button">
|
|
3
|
-
<el-button
|
|
4
|
-
circle
|
|
5
|
-
:disabled="disabled"
|
|
6
|
-
@click="$emit('submit')"
|
|
7
|
-
size="small"
|
|
8
|
-
>
|
|
9
|
-
<i class="el-icon-top"></i>
|
|
10
|
-
</el-button>
|
|
11
|
-
</div>
|
|
12
|
-
</template>
|
|
13
|
-
|
|
14
|
-
<script>
|
|
15
|
-
export default {
|
|
16
|
-
name: 'SendButton',
|
|
17
|
-
props: {
|
|
18
|
-
disabled: {
|
|
19
|
-
type: Boolean,
|
|
20
|
-
default: false,
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
};
|
|
24
|
-
</script>
|
|
25
|
-
|
|
26
|
-
<style scoped lang="scss"></style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="el-x-send-button">
|
|
3
|
+
<el-button
|
|
4
|
+
circle
|
|
5
|
+
:disabled="disabled"
|
|
6
|
+
@click="$emit('submit')"
|
|
7
|
+
size="small"
|
|
8
|
+
>
|
|
9
|
+
<i class="el-icon-top"></i>
|
|
10
|
+
</el-button>
|
|
11
|
+
</div>
|
|
12
|
+
</template>
|
|
13
|
+
|
|
14
|
+
<script>
|
|
15
|
+
export default {
|
|
16
|
+
name: 'SendButton',
|
|
17
|
+
props: {
|
|
18
|
+
disabled: {
|
|
19
|
+
type: Boolean,
|
|
20
|
+
default: false,
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<style scoped lang="scss"></style>
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="el-x-send-button">
|
|
3
|
-
<el-button
|
|
4
|
-
circle
|
|
5
|
-
size="small"
|
|
6
|
-
@click="onClick"
|
|
7
|
-
>
|
|
8
|
-
<i class="el-icon-microphone"></i>
|
|
9
|
-
</el-button>
|
|
10
|
-
</div>
|
|
11
|
-
</template>
|
|
12
|
-
|
|
13
|
-
<script>
|
|
14
|
-
export default {
|
|
15
|
-
name: 'SpeechButton',
|
|
16
|
-
methods: {
|
|
17
|
-
onClick() {
|
|
18
|
-
this.$emit('click');
|
|
19
|
-
},
|
|
20
|
-
},
|
|
21
|
-
};
|
|
22
|
-
</script>
|
|
23
|
-
|
|
24
|
-
<style scoped lang="scss"></style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="el-x-send-button">
|
|
3
|
+
<el-button
|
|
4
|
+
circle
|
|
5
|
+
size="small"
|
|
6
|
+
@click="onClick"
|
|
7
|
+
>
|
|
8
|
+
<i class="el-icon-microphone"></i>
|
|
9
|
+
</el-button>
|
|
10
|
+
</div>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
export default {
|
|
15
|
+
name: 'SpeechButton',
|
|
16
|
+
methods: {
|
|
17
|
+
onClick() {
|
|
18
|
+
this.$emit('click');
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<style scoped lang="scss"></style>
|
|
@@ -1,87 +1,87 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<svg
|
|
3
|
-
:class="className"
|
|
4
|
-
color="currentColor"
|
|
5
|
-
:viewBox="`0 0 ${SIZE} ${SIZE}`"
|
|
6
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
-
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
8
|
-
>
|
|
9
|
-
<title>Speech Recording</title>
|
|
10
|
-
|
|
11
|
-
<rect
|
|
12
|
-
v-for="(item, index) in rects"
|
|
13
|
-
:key="index"
|
|
14
|
-
fill="currentColor"
|
|
15
|
-
:rx="RECT_RADIUS"
|
|
16
|
-
:ry="RECT_RADIUS"
|
|
17
|
-
:height="RECT_HEIGHT_MIN"
|
|
18
|
-
:width="RECT_WIDTH"
|
|
19
|
-
:x="item.x"
|
|
20
|
-
:y="item.yMin"
|
|
21
|
-
>
|
|
22
|
-
<animate
|
|
23
|
-
attributeName="height"
|
|
24
|
-
:values="`${RECT_HEIGHT_MIN}; ${RECT_HEIGHT_MAX}; ${RECT_HEIGHT_MIN}`"
|
|
25
|
-
keyTimes="0; 0.5; 1"
|
|
26
|
-
:dur="`${DURATION}s`"
|
|
27
|
-
:begin="`${(DURATION / COUNT) * index}s`"
|
|
28
|
-
repeatCount="indefinite"
|
|
29
|
-
/>
|
|
30
|
-
<animate
|
|
31
|
-
attributeName="y"
|
|
32
|
-
:values="`${item.yMin}; ${item.yMax}; ${item.yMin}`"
|
|
33
|
-
keyTimes="0; 0.5; 1"
|
|
34
|
-
:dur="`${DURATION}s`"
|
|
35
|
-
:begin="`${(DURATION / COUNT) * index}s`"
|
|
36
|
-
repeatCount="indefinite"
|
|
37
|
-
/>
|
|
38
|
-
</rect>
|
|
39
|
-
</svg>
|
|
40
|
-
</template>
|
|
41
|
-
|
|
42
|
-
<script>
|
|
43
|
-
export default {
|
|
44
|
-
name: 'SpeechLoading',
|
|
45
|
-
|
|
46
|
-
props: {
|
|
47
|
-
className: {
|
|
48
|
-
type: String,
|
|
49
|
-
default: '',
|
|
50
|
-
},
|
|
51
|
-
},
|
|
52
|
-
|
|
53
|
-
data() {
|
|
54
|
-
return {
|
|
55
|
-
// 定义常量
|
|
56
|
-
SIZE: 1000,
|
|
57
|
-
COUNT: 4,
|
|
58
|
-
RECT_WIDTH: 140,
|
|
59
|
-
RECT_RADIUS: 70, // RECT_WIDTH / 2
|
|
60
|
-
RECT_HEIGHT_MIN: 250,
|
|
61
|
-
RECT_HEIGHT_MAX: 500,
|
|
62
|
-
DURATION: 0.8,
|
|
63
|
-
};
|
|
64
|
-
},
|
|
65
|
-
|
|
66
|
-
computed: {
|
|
67
|
-
// 计算矩形的位置和高度范围
|
|
68
|
-
rects() {
|
|
69
|
-
const dest = (this.SIZE - this.RECT_WIDTH * this.COUNT) / (this.COUNT - 1);
|
|
70
|
-
return Array.from({
|
|
71
|
-
length: this.COUNT,
|
|
72
|
-
}).map((_, index) => {
|
|
73
|
-
const x = index * (dest + this.RECT_WIDTH);
|
|
74
|
-
const yMin = this.SIZE / 2 - this.RECT_HEIGHT_MIN / 2;
|
|
75
|
-
const yMax = this.SIZE / 2 - this.RECT_HEIGHT_MAX / 2;
|
|
76
|
-
return {
|
|
77
|
-
x,
|
|
78
|
-
yMin,
|
|
79
|
-
yMax,
|
|
80
|
-
};
|
|
81
|
-
});
|
|
82
|
-
},
|
|
83
|
-
},
|
|
84
|
-
};
|
|
85
|
-
</script>
|
|
86
|
-
|
|
87
|
-
<style scoped></style>
|
|
1
|
+
<template>
|
|
2
|
+
<svg
|
|
3
|
+
:class="className"
|
|
4
|
+
color="currentColor"
|
|
5
|
+
:viewBox="`0 0 ${SIZE} ${SIZE}`"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
8
|
+
>
|
|
9
|
+
<title>Speech Recording</title>
|
|
10
|
+
|
|
11
|
+
<rect
|
|
12
|
+
v-for="(item, index) in rects"
|
|
13
|
+
:key="index"
|
|
14
|
+
fill="currentColor"
|
|
15
|
+
:rx="RECT_RADIUS"
|
|
16
|
+
:ry="RECT_RADIUS"
|
|
17
|
+
:height="RECT_HEIGHT_MIN"
|
|
18
|
+
:width="RECT_WIDTH"
|
|
19
|
+
:x="item.x"
|
|
20
|
+
:y="item.yMin"
|
|
21
|
+
>
|
|
22
|
+
<animate
|
|
23
|
+
attributeName="height"
|
|
24
|
+
:values="`${RECT_HEIGHT_MIN}; ${RECT_HEIGHT_MAX}; ${RECT_HEIGHT_MIN}`"
|
|
25
|
+
keyTimes="0; 0.5; 1"
|
|
26
|
+
:dur="`${DURATION}s`"
|
|
27
|
+
:begin="`${(DURATION / COUNT) * index}s`"
|
|
28
|
+
repeatCount="indefinite"
|
|
29
|
+
/>
|
|
30
|
+
<animate
|
|
31
|
+
attributeName="y"
|
|
32
|
+
:values="`${item.yMin}; ${item.yMax}; ${item.yMin}`"
|
|
33
|
+
keyTimes="0; 0.5; 1"
|
|
34
|
+
:dur="`${DURATION}s`"
|
|
35
|
+
:begin="`${(DURATION / COUNT) * index}s`"
|
|
36
|
+
repeatCount="indefinite"
|
|
37
|
+
/>
|
|
38
|
+
</rect>
|
|
39
|
+
</svg>
|
|
40
|
+
</template>
|
|
41
|
+
|
|
42
|
+
<script>
|
|
43
|
+
export default {
|
|
44
|
+
name: 'SpeechLoading',
|
|
45
|
+
|
|
46
|
+
props: {
|
|
47
|
+
className: {
|
|
48
|
+
type: String,
|
|
49
|
+
default: '',
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
|
|
53
|
+
data() {
|
|
54
|
+
return {
|
|
55
|
+
// 定义常量
|
|
56
|
+
SIZE: 1000,
|
|
57
|
+
COUNT: 4,
|
|
58
|
+
RECT_WIDTH: 140,
|
|
59
|
+
RECT_RADIUS: 70, // RECT_WIDTH / 2
|
|
60
|
+
RECT_HEIGHT_MIN: 250,
|
|
61
|
+
RECT_HEIGHT_MAX: 500,
|
|
62
|
+
DURATION: 0.8,
|
|
63
|
+
};
|
|
64
|
+
},
|
|
65
|
+
|
|
66
|
+
computed: {
|
|
67
|
+
// 计算矩形的位置和高度范围
|
|
68
|
+
rects() {
|
|
69
|
+
const dest = (this.SIZE - this.RECT_WIDTH * this.COUNT) / (this.COUNT - 1);
|
|
70
|
+
return Array.from({
|
|
71
|
+
length: this.COUNT,
|
|
72
|
+
}).map((_, index) => {
|
|
73
|
+
const x = index * (dest + this.RECT_WIDTH);
|
|
74
|
+
const yMin = this.SIZE / 2 - this.RECT_HEIGHT_MIN / 2;
|
|
75
|
+
const yMax = this.SIZE / 2 - this.RECT_HEIGHT_MAX / 2;
|
|
76
|
+
return {
|
|
77
|
+
x,
|
|
78
|
+
yMin,
|
|
79
|
+
yMax,
|
|
80
|
+
};
|
|
81
|
+
});
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
};
|
|
85
|
+
</script>
|
|
86
|
+
|
|
87
|
+
<style scoped></style>
|
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="el-x-send-button">
|
|
3
|
-
<el-button
|
|
4
|
-
circle
|
|
5
|
-
size="small"
|
|
6
|
-
@click="onClick"
|
|
7
|
-
>
|
|
8
|
-
<speech-loading class="loading-svg" />
|
|
9
|
-
</el-button>
|
|
10
|
-
</div>
|
|
11
|
-
</template>
|
|
12
|
-
|
|
13
|
-
<script>
|
|
14
|
-
import SpeechLoading from './SpeechLoading.vue';
|
|
15
|
-
|
|
16
|
-
export default {
|
|
17
|
-
name: 'SpeechLoadingButton',
|
|
18
|
-
components: {
|
|
19
|
-
SpeechLoading,
|
|
20
|
-
},
|
|
21
|
-
methods: {
|
|
22
|
-
onClick() {
|
|
23
|
-
this.$emit('click');
|
|
24
|
-
},
|
|
25
|
-
},
|
|
26
|
-
};
|
|
27
|
-
</script>
|
|
28
|
-
|
|
29
|
-
<style scoped lang="scss">
|
|
30
|
-
@import '~element-ui/packages/theme-chalk/src/common/var';
|
|
31
|
-
|
|
32
|
-
.el-x-send-button {
|
|
33
|
-
.el-button {
|
|
34
|
-
padding: 0;
|
|
35
|
-
width: 32px;
|
|
36
|
-
height: 32px;
|
|
37
|
-
}
|
|
38
|
-
.loading-svg {
|
|
39
|
-
color: $--color-primary;
|
|
40
|
-
width: 16px;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="el-x-send-button">
|
|
3
|
+
<el-button
|
|
4
|
+
circle
|
|
5
|
+
size="small"
|
|
6
|
+
@click="onClick"
|
|
7
|
+
>
|
|
8
|
+
<speech-loading class="loading-svg" />
|
|
9
|
+
</el-button>
|
|
10
|
+
</div>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
import SpeechLoading from './SpeechLoading.vue';
|
|
15
|
+
|
|
16
|
+
export default {
|
|
17
|
+
name: 'SpeechLoadingButton',
|
|
18
|
+
components: {
|
|
19
|
+
SpeechLoading,
|
|
20
|
+
},
|
|
21
|
+
methods: {
|
|
22
|
+
onClick() {
|
|
23
|
+
this.$emit('click');
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
};
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<style scoped lang="scss">
|
|
30
|
+
@import '~element-ui/packages/theme-chalk/src/common/var';
|
|
31
|
+
|
|
32
|
+
.el-x-send-button {
|
|
33
|
+
.el-button {
|
|
34
|
+
padding: 0;
|
|
35
|
+
width: 32px;
|
|
36
|
+
height: 32px;
|
|
37
|
+
}
|
|
38
|
+
.loading-svg {
|
|
39
|
+
color: $--color-primary;
|
|
40
|
+
width: 16px;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
</style>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import ElXThink from './src/main.vue';
|
|
2
|
-
|
|
3
|
-
/* istanbul ignore next */
|
|
4
|
-
ElXThink.install = function (Vue) {
|
|
5
|
-
Vue.component(ElXThink.name, ElXThink);
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
export default ElXThink;
|
|
1
|
+
import ElXThink from './src/main.vue';
|
|
2
|
+
|
|
3
|
+
/* istanbul ignore next */
|
|
4
|
+
ElXThink.install = function (Vue) {
|
|
5
|
+
Vue.component(ElXThink.name, ElXThink);
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
export default ElXThink;
|