ai-chat-bot-interface 1.0.9 → 1.1.0
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/.prettierignore +5 -0
- package/.prettierrc.cjs +37 -0
- package/index.html +1 -1
- package/package.json +5 -3
- package/src/App.vue +4 -12
- package/src/ChatUi.less +45 -26
- package/src/ChatUi.vue +166 -105
- package/src/assets/styles/public.less +5 -2
- package/src/components/DishesCard.vue +8 -9
- package/src/components/DishesList.vue +14 -10
- package/src/components/OperateModule.vue +175 -0
- package/src/components/PlanCard.vue +5 -6
- package/src/components/icons/BackIcon.vue +19 -0
- package/src/components/icons/ClearIcon.vue +10 -3
- package/src/components/icons/CloseIcon.vue +9 -2
- package/src/components/icons/NewSessionIcon.vue +11 -4
- package/src/components/icons/SendIcon.vue +14 -3
- package/src/components/icons/loadingIcon.vue +76 -0
- package/src/components/icons/loadingIcon2.vue +88 -0
- package/src/components/icons/newChat.vue +18 -0
- package/src/components/icons/tagIcon.vue +18 -0
- package/src/main.js +4 -4
- package/src/style.css +4 -79
- package/src/utils/request.js +15 -17
- package/vite.config.js +20 -3
- package/src/mock.js +0 -0
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="om_wrap">
|
|
3
|
+
<div class="om_quick">
|
|
4
|
+
<div
|
|
5
|
+
class="tag"
|
|
6
|
+
v-for="item in tagList"
|
|
7
|
+
:key="item.value"
|
|
8
|
+
@click.stop="handleTag(item)"
|
|
9
|
+
>
|
|
10
|
+
<tag-icon class="icon" />{{ item.name }}
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
<div class="om_operate">
|
|
14
|
+
<textarea
|
|
15
|
+
v-model="textValue"
|
|
16
|
+
ref="txtEle"
|
|
17
|
+
class="input"
|
|
18
|
+
rows="1"
|
|
19
|
+
placeholder="發消息⋯"
|
|
20
|
+
@input="handleInput"
|
|
21
|
+
@keyup.enter="sendMsg"
|
|
22
|
+
/>
|
|
23
|
+
<div class="btn_group">
|
|
24
|
+
<div class="btn" @click.stop="sendMsg">
|
|
25
|
+
<send-icon :style="{ color: textValue ? '#039938' : '#ccc' }" />
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</template>
|
|
31
|
+
|
|
32
|
+
<script setup>
|
|
33
|
+
import TagIcon from './icons/tagIcon.vue';
|
|
34
|
+
import SendIcon from './icons/SendIcon.vue';
|
|
35
|
+
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
|
|
36
|
+
|
|
37
|
+
const txtEle = ref(null);
|
|
38
|
+
|
|
39
|
+
const props = defineProps({
|
|
40
|
+
modelValue: {
|
|
41
|
+
type: String,
|
|
42
|
+
default: '',
|
|
43
|
+
},
|
|
44
|
+
tagList: {
|
|
45
|
+
type: Array,
|
|
46
|
+
default: () => [
|
|
47
|
+
{ name: '人工客服', value: 'kefu', type: 'chat', msg: '人工客服' },
|
|
48
|
+
{ name: '查看菜单', value: 'menu', type: 'call', msg: '查看菜单' },
|
|
49
|
+
],
|
|
50
|
+
},
|
|
51
|
+
});
|
|
52
|
+
const Emits = defineEmits(['update:modelValue', 'send', 'tag']);
|
|
53
|
+
|
|
54
|
+
watch(
|
|
55
|
+
() => props.modelValue,
|
|
56
|
+
() => {
|
|
57
|
+
console.log('=== ccc ===');
|
|
58
|
+
resizeTextarea();
|
|
59
|
+
},
|
|
60
|
+
);
|
|
61
|
+
|
|
62
|
+
const textValue = computed({
|
|
63
|
+
get: () => {
|
|
64
|
+
return props.modelValue;
|
|
65
|
+
},
|
|
66
|
+
set: (val) => {
|
|
67
|
+
Emits('update:modelValue', val);
|
|
68
|
+
resizeTextarea();
|
|
69
|
+
},
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
onMounted(() => {
|
|
73
|
+
resizeTextarea();
|
|
74
|
+
});
|
|
75
|
+
onUnmounted(() => {
|
|
76
|
+
if (txtEle.value) {
|
|
77
|
+
txtEle.value.style.height = 'auto'; // 恢复默认高度
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
const handleInput = (event) => {
|
|
82
|
+
textValue.value = event.target.value.replace(/^\n+|\n+$/g, '');
|
|
83
|
+
};
|
|
84
|
+
const handleTag = (info) => {
|
|
85
|
+
Emits('tag', { ...info });
|
|
86
|
+
};
|
|
87
|
+
const sendMsg = () => {
|
|
88
|
+
// console.log('=== send msg ===', textValue.value);
|
|
89
|
+
Emits('send', textValue.value);
|
|
90
|
+
};
|
|
91
|
+
const resizeTextarea = () => {
|
|
92
|
+
nextTick(() => {
|
|
93
|
+
if (txtEle.value) {
|
|
94
|
+
txtEle.value.style.height = 'auto';
|
|
95
|
+
txtEle.value.style.height =
|
|
96
|
+
Math.min(txtEle.value.scrollHeight, 72) + 'px';
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
};
|
|
100
|
+
</script>
|
|
101
|
+
|
|
102
|
+
<style scoped lang="less">
|
|
103
|
+
.om {
|
|
104
|
+
&_wrap {
|
|
105
|
+
box-sizing: border-box;
|
|
106
|
+
width: 100%;
|
|
107
|
+
padding: 10px;
|
|
108
|
+
background-color: #fff;
|
|
109
|
+
}
|
|
110
|
+
&_quick {
|
|
111
|
+
display: grid;
|
|
112
|
+
grid-auto-flow: column;
|
|
113
|
+
gap: 10px;
|
|
114
|
+
overflow-x: auto;
|
|
115
|
+
justify-content: start;
|
|
116
|
+
scroll-behavior: smooth;
|
|
117
|
+
scrollbar-width: none; /* 隐藏滚动条（Firefox） */
|
|
118
|
+
&::-webkit-scrollbar {
|
|
119
|
+
display: none;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.tag {
|
|
123
|
+
.flexrsc();
|
|
124
|
+
width: fit-content;
|
|
125
|
+
white-space: nowrap;
|
|
126
|
+
font-weight: 400;
|
|
127
|
+
font-size: 12px;
|
|
128
|
+
color: #333;
|
|
129
|
+
line-height: 16px;
|
|
130
|
+
text-align: left;
|
|
131
|
+
padding: 6px 10px;
|
|
132
|
+
border-radius: 10px;
|
|
133
|
+
border: 1px solid #d0d0d0;
|
|
134
|
+
}
|
|
135
|
+
.icon {
|
|
136
|
+
font-size: 16px;
|
|
137
|
+
color: @primary-color;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
&_operate {
|
|
141
|
+
display: grid;
|
|
142
|
+
grid-template-columns: 1fr auto;
|
|
143
|
+
box-sizing: border-box;
|
|
144
|
+
margin: 10px 0;
|
|
145
|
+
width: 100%;
|
|
146
|
+
min-height: 48px;
|
|
147
|
+
padding: 10px;
|
|
148
|
+
background: #fff;
|
|
149
|
+
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
|
|
150
|
+
border-radius: 24px;
|
|
151
|
+
align-items: center;
|
|
152
|
+
.input {
|
|
153
|
+
font-size: 16px;
|
|
154
|
+
line-height: 24px;
|
|
155
|
+
overflow-y: auto;
|
|
156
|
+
resize: none;
|
|
157
|
+
padding: 0 0 0 10px;
|
|
158
|
+
border-radius: 24px;
|
|
159
|
+
border: none;
|
|
160
|
+
&:focus-visible {
|
|
161
|
+
outline: none;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
.btn {
|
|
165
|
+
.flexrcc();
|
|
166
|
+
height: 100%;
|
|
167
|
+
color: @primary-color;
|
|
168
|
+
font-size: 32px;
|
|
169
|
+
padding: 0 10px;
|
|
170
|
+
&_group {
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
</style>
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="btn_group">
|
|
3
|
-
|
|
2
|
+
<div class="btn_group">
|
|
3
|
+
<div class="btn btn_2" @click.stop="handleSel">用該方案配餐</div>
|
|
4
4
|
</div>
|
|
5
5
|
</template>
|
|
6
6
|
|
|
7
7
|
<script setup>
|
|
8
|
-
|
|
9
8
|
const Emits = defineEmits(['select']);
|
|
10
9
|
const handleSel = () => {
|
|
11
|
-
Emits('select', {})
|
|
12
|
-
}
|
|
10
|
+
Emits('select', {});
|
|
11
|
+
};
|
|
13
12
|
</script>
|
|
14
13
|
|
|
15
14
|
<style scoped lang="less">
|
|
@@ -18,7 +17,7 @@ const handleSel = () => {
|
|
|
18
17
|
width: 100%;
|
|
19
18
|
height: 38px;
|
|
20
19
|
line-height: 38px;
|
|
21
|
-
background-color: #
|
|
20
|
+
background-color: #e6f5eb;
|
|
22
21
|
border-radius: 19px;
|
|
23
22
|
text-align: center;
|
|
24
23
|
font-weight: 600;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg
|
|
3
|
+
viewBox="0 0 1024 1024"
|
|
4
|
+
version="1.1"
|
|
5
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
6
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
7
|
+
width="1em"
|
|
8
|
+
height="1em"
|
|
9
|
+
>
|
|
10
|
+
<path
|
|
11
|
+
d="M395.21518 513.604544l323.135538-312.373427c19.052938-18.416442 19.052938-48.273447 0-66.660212-19.053961-18.416442-49.910737-18.416442-68.964698 0L291.75176 480.290811c-19.052938 18.416442-19.052938 48.273447 0 66.660212l357.633237 345.688183c9.525957 9.207709 22.01234 13.796214 34.497699 13.796214 12.485359 0 24.971741-4.588505 34.466999-13.82896 19.052938-18.416442 19.052938-48.242747 0-66.660212L395.21518 513.604544z"
|
|
12
|
+
fill="currentColor"
|
|
13
|
+
/>
|
|
14
|
+
</svg>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script setup lang="ts"></script>
|
|
18
|
+
|
|
19
|
+
<style scoped></style>
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<svg
|
|
3
|
-
|
|
2
|
+
<svg
|
|
3
|
+
class="icon-icon icon-icon-coz_broom"
|
|
4
|
+
width="1em"
|
|
5
|
+
height="1em"
|
|
6
|
+
viewBox="0 0 24 24"
|
|
7
|
+
fill="currentColor"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
>
|
|
4
10
|
<path
|
|
5
|
-
|
|
11
|
+
d="M9 2V6L4 6C2.89543 6 2 6.89543 2 8V21C2 22.1046 2.89543 23 4 23H20C21.1046 23 22 22.1046 22 21V8C22 6.89543 21.1046 6 20 6L15 6V2C15 0.895431 14.1046 0 13 0H11C9.89543 0 9 0.895431 9 2ZM13 2V8H20V12H4V8H11V2H13ZM4 14H20V21H9V18C9 17.4477 8.55228 17 8 17C7.44772 17 7 17.4477 7 18V21H4L4 14Z"
|
|
12
|
+
></path>
|
|
6
13
|
</svg>
|
|
7
14
|
</template>
|
|
8
15
|
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<svg
|
|
2
|
+
<svg
|
|
3
|
+
width="1em"
|
|
4
|
+
height="1em"
|
|
5
|
+
viewBox="0 0 24 24"
|
|
6
|
+
fill="currentColor"
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
>
|
|
3
9
|
<path
|
|
4
|
-
|
|
10
|
+
d="M4.96977 17.7929C4.57925 18.1834 4.57925 18.8166 4.96977 19.2071C5.3603 19.5976 5.99346 19.5976 6.38399 19.2071L12.1769 13.4142L17.9698 19.2071C18.3603 19.5976 18.9935 19.5976 19.384 19.2071C19.7745 18.8166 19.7745 18.1834 19.384 17.7929L13.5911 12L19.384 6.20711C19.7745 5.81658 19.7745 5.18342 19.384 4.79289C18.9935 4.40237 18.3603 4.40237 17.9698 4.79289L12.1769 10.5858L6.38399 4.79289C5.99347 4.40237 5.3603 4.40237 4.96978 4.79289C4.57925 5.18342 4.57925 5.81658 4.96978 6.20711L10.7627 12L4.96977 17.7929Z"
|
|
11
|
+
></path>
|
|
5
12
|
</svg>
|
|
6
13
|
</template>
|
|
7
14
|
|
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<svg
|
|
3
|
-
|
|
2
|
+
<svg
|
|
3
|
+
width="1em"
|
|
4
|
+
height="1em"
|
|
5
|
+
viewBox="0 0 24 24"
|
|
6
|
+
fill="currentColor"
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
>
|
|
4
9
|
<path
|
|
5
|
-
|
|
10
|
+
d="M6.94025 19.5916L6.23607 21H12C12.4316 21 12.856 20.9696 13.2714 20.9109C13.5046 20.9691 13.7487 21 14 21H15V22C15 22.1951 15.0186 22.3858 15.0542 22.5705C14.0845 22.8501 13.0597 23 12 23H4.61803C3.87465 23 3.39116 22.2177 3.72361 21.5528L4.48405 20.0319C2.3399 18.0247 1 15.1688 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 13.0597 22.8501 14.0845 22.5705 15.0542C22.3858 15.0186 22.1951 15 22 15H21V14C21 13.7487 20.9691 13.5046 20.9109 13.2714C20.9696 12.856 21 12.4316 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 14.5928 4.09379 16.9269 5.85088 18.5718L6.94025 19.5916Z"
|
|
11
|
+
></path>
|
|
6
12
|
<path
|
|
7
|
-
|
|
13
|
+
d="M8 8C7.44772 8 7 8.44772 7 9 7 9.55229 7.44772 10 8 10H15C15.5523 10 16 9.55229 16 9 16 8.44772 15.5523 8 15 8H8zM7 14C7 13.4477 7.44772 13 8 13H12C12.5523 13 13 13.4477 13 14 13 14.5523 12.5523 15 12 15H8C7.44772 15 7 14.5523 7 14zM18 13C18.5523 13 19 13.4477 19 14V17H22C22.5523 17 23 17.4477 23 18 23 18.5523 22.5523 19 22 19H19V22C19 22.5523 18.5523 23 18 23 17.4477 23 17 22.5523 17 22V19H14C13.4477 19 13 18.5523 13 18 13 17.4477 13.4477 17 14 17H17V14C17 13.4477 17.4477 13 18 13z"
|
|
14
|
+
></path>
|
|
8
15
|
</svg>
|
|
9
16
|
</template>
|
|
10
17
|
|
|
@@ -1,8 +1,19 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<svg
|
|
3
|
-
|
|
2
|
+
<svg
|
|
3
|
+
width="1em"
|
|
4
|
+
height="1em"
|
|
5
|
+
viewBox="0 0 32 32"
|
|
6
|
+
fill="none"
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
>
|
|
4
9
|
<path
|
|
5
|
-
|
|
10
|
+
d="M1 16C1 7.71573 7.71573 1 16 1C24.2843 1 31 7.71573 31 16C31 24.2843 24.2843 31 16 31C7.71573 31 1 24.2843 1 16Z"
|
|
11
|
+
fill="currentColor"
|
|
12
|
+
/>
|
|
13
|
+
<path
|
|
14
|
+
d="M16.7066 8.29236L16 7.58578L15.2929 8.29289L9.29289 14.2929C8.90237 14.6834 8.90237 15.3166 9.29289 15.7071C9.68342 16.0976 10.3166 16.0976 10.7071 15.7071L15 11.4142L15 23C15 23.5523 15.4477 24 16 24C16.5523 24 17 23.5523 17 23L17 11.4142L21.2929 15.7071C21.6834 16.0976 22.3166 16.0976 22.7071 15.7071C23.0976 15.3166 23.0976 14.6834 22.7071 14.2929L16.7077 8.29351L16.7071 8.29289L16.7066 8.29236Z"
|
|
15
|
+
fill="#fff"
|
|
16
|
+
/>
|
|
6
17
|
</svg>
|
|
7
18
|
</template>
|
|
8
19
|
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg
|
|
3
|
+
width="1.5em"
|
|
4
|
+
height="1em"
|
|
5
|
+
viewBox="0 0 440 440"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<!-- A 球 -->
|
|
9
|
+
<circle
|
|
10
|
+
id="ballA"
|
|
11
|
+
cx="220"
|
|
12
|
+
cy="220"
|
|
13
|
+
r="50"
|
|
14
|
+
fill="rgba(0,0,0,0.8)"
|
|
15
|
+
opacity="0.1"
|
|
16
|
+
>
|
|
17
|
+
<!-- 位置动画 -->
|
|
18
|
+
<animate
|
|
19
|
+
attributeName="cx"
|
|
20
|
+
values="220; 40; 220; 400; 220"
|
|
21
|
+
dur="1.5s"
|
|
22
|
+
repeatCount="indefinite"
|
|
23
|
+
/>
|
|
24
|
+
<!-- 大小动画 -->
|
|
25
|
+
<animate
|
|
26
|
+
attributeName="r"
|
|
27
|
+
values="50; 80; 100; 80; 50"
|
|
28
|
+
dur="1.5s"
|
|
29
|
+
repeatCount="indefinite"
|
|
30
|
+
/>
|
|
31
|
+
<!-- 透明度动画 -->
|
|
32
|
+
<animate
|
|
33
|
+
attributeName="opacity"
|
|
34
|
+
values="0.1; 0.6; 1; 0.6; 0.1"
|
|
35
|
+
dur="1.5s"
|
|
36
|
+
repeatCount="indefinite"
|
|
37
|
+
/>
|
|
38
|
+
</circle>
|
|
39
|
+
|
|
40
|
+
<!-- B 球 -->
|
|
41
|
+
<circle
|
|
42
|
+
id="ballB"
|
|
43
|
+
cx="220"
|
|
44
|
+
cy="220"
|
|
45
|
+
r="100"
|
|
46
|
+
fill="rgba(0,0,0,0.8)"
|
|
47
|
+
opacity="1"
|
|
48
|
+
>
|
|
49
|
+
<!-- 位置动画 -->
|
|
50
|
+
<animate
|
|
51
|
+
attributeName="cx"
|
|
52
|
+
values="220; 400; 220; 40; 220"
|
|
53
|
+
dur="1.5s"
|
|
54
|
+
repeatCount="indefinite"
|
|
55
|
+
/>
|
|
56
|
+
<!-- 大小动画 -->
|
|
57
|
+
<animate
|
|
58
|
+
attributeName="r"
|
|
59
|
+
values="100; 80; 50; 80; 100"
|
|
60
|
+
dur="1.5s"
|
|
61
|
+
repeatCount="indefinite"
|
|
62
|
+
/>
|
|
63
|
+
<!-- 透明度动画 -->
|
|
64
|
+
<animate
|
|
65
|
+
attributeName="opacity"
|
|
66
|
+
values="1; 0.6; 0.1; 0.6; 1"
|
|
67
|
+
dur="1.5s"
|
|
68
|
+
repeatCount="indefinite"
|
|
69
|
+
/>
|
|
70
|
+
</circle>
|
|
71
|
+
</svg>
|
|
72
|
+
</template>
|
|
73
|
+
|
|
74
|
+
<script></script>
|
|
75
|
+
|
|
76
|
+
<style scoped></style>
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg
|
|
3
|
+
width="1.5em"
|
|
4
|
+
height="1em"
|
|
5
|
+
viewBox="0 0 440 440"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<!-- A 球 -->
|
|
9
|
+
<circle
|
|
10
|
+
id="ballA"
|
|
11
|
+
cx="220"
|
|
12
|
+
cy="220"
|
|
13
|
+
r="50"
|
|
14
|
+
fill="rgba(0,0,0,0.8)"
|
|
15
|
+
opacity="0.1"
|
|
16
|
+
>
|
|
17
|
+
<!-- 位置动画 -->
|
|
18
|
+
<animate
|
|
19
|
+
attributeName="cx"
|
|
20
|
+
values="220; 40; 220; 400; 220"
|
|
21
|
+
dur="1.5s"
|
|
22
|
+
repeatCount="indefinite"
|
|
23
|
+
calcMode="spline"
|
|
24
|
+
keySplines="0.25 0.1 0.25 1; 0.25 0.1 0.25 1; 0.25 0.1 0.25 1; 0.25 0.1 0.25 1"
|
|
25
|
+
/>
|
|
26
|
+
<!-- 大小动画 -->
|
|
27
|
+
<animate
|
|
28
|
+
attributeName="r"
|
|
29
|
+
values="50; 80; 100; 80; 50"
|
|
30
|
+
dur="1.5s"
|
|
31
|
+
repeatCount="indefinite"
|
|
32
|
+
calcMode="spline"
|
|
33
|
+
keySplines="0.4 0.0 0.2 1; 0.4 0.0 0.2 1; 0.4 0.0 0.2 1; 0.4 0.0 0.2 1"
|
|
34
|
+
/>
|
|
35
|
+
<!-- 透明度动画 -->
|
|
36
|
+
<animate
|
|
37
|
+
attributeName="opacity"
|
|
38
|
+
values="0.1; 0.6; 1; 0.6; 0.1"
|
|
39
|
+
dur="1.5s"
|
|
40
|
+
repeatCount="indefinite"
|
|
41
|
+
calcMode="spline"
|
|
42
|
+
keySplines="0.6 0.2 0.8 0.4; 0.6 0.2 0.8 0.4; 0.6 0.2 0.8 0.4; 0.6 0.2 0.8 0.4"
|
|
43
|
+
/>
|
|
44
|
+
</circle>
|
|
45
|
+
|
|
46
|
+
<!-- B 球 -->
|
|
47
|
+
<circle
|
|
48
|
+
id="ballB"
|
|
49
|
+
cx="220"
|
|
50
|
+
cy="220"
|
|
51
|
+
r="100"
|
|
52
|
+
fill="rgba(0,0,0,0.8)"
|
|
53
|
+
opacity="1"
|
|
54
|
+
>
|
|
55
|
+
<!-- 位置动画 -->
|
|
56
|
+
<animate
|
|
57
|
+
attributeName="cx"
|
|
58
|
+
values="220; 400; 220; 40; 220"
|
|
59
|
+
dur="1.5s"
|
|
60
|
+
repeatCount="indefinite"
|
|
61
|
+
calcMode="spline"
|
|
62
|
+
keySplines="0.25 0.1 0.25 1; 0.25 0.1 0.25 1; 0.25 0.1 0.25 1; 0.25 0.1 0.25 1"
|
|
63
|
+
/>
|
|
64
|
+
<!-- 大小动画 -->
|
|
65
|
+
<animate
|
|
66
|
+
attributeName="r"
|
|
67
|
+
values="100; 80; 50; 80; 100"
|
|
68
|
+
dur="1.5s"
|
|
69
|
+
repeatCount="indefinite"
|
|
70
|
+
calcMode="spline"
|
|
71
|
+
keySplines="0.4 0.0 0.2 1; 0.4 0.0 0.2 1; 0.4 0.0 0.2 1; 0.4 0.0 0.2 1"
|
|
72
|
+
/>
|
|
73
|
+
<!-- 透明度动画 -->
|
|
74
|
+
<animate
|
|
75
|
+
attributeName="opacity"
|
|
76
|
+
values="1; 0.6; 0.1; 0.6; 1"
|
|
77
|
+
dur="1.5s"
|
|
78
|
+
repeatCount="indefinite"
|
|
79
|
+
calcMode="spline"
|
|
80
|
+
keySplines="0.6 0.2 0.8 0.4; 0.6 0.2 0.8 0.4; 0.6 0.2 0.8 0.4; 0.6 0.2 0.8 0.4"
|
|
81
|
+
/>
|
|
82
|
+
</circle>
|
|
83
|
+
</svg>
|
|
84
|
+
</template>
|
|
85
|
+
|
|
86
|
+
<script></script>
|
|
87
|
+
|
|
88
|
+
<style scoped></style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg
|
|
3
|
+
width="1em"
|
|
4
|
+
height="1em"
|
|
5
|
+
viewBox="0 0 33 32"
|
|
6
|
+
fill="none"
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
>
|
|
9
|
+
<path
|
|
10
|
+
d="M21 7.64355C21 7.09127 21.4477 6.64355 22 6.64355C22.5523 6.64355 23 7.09127 23 7.64355V9.64355H25C25.5523 9.64355 26 10.0913 26 10.6436C26 11.1958 25.5523 11.6436 25 11.6436H23V13.6436C23 14.1958 22.5523 14.6436 22 14.6436C21.4477 14.6436 21 14.1958 21 13.6436V11.6436H19C18.4477 11.6436 18 11.1958 18 10.6436C18 10.0913 18.4477 9.64355 19 9.64355H21V7.64355ZM9 10.6436C9 10.0913 9.44772 9.64355 10 9.64355H16.164C16.7162 9.64355 17.164 9.19584 17.164 8.64355C17.164 8.09127 16.7162 7.64355 16.164 7.64355H10C8.34315 7.64355 7 8.9867 7 10.6436V22.8527C7 24.7723 9.0737 25.9757 10.7403 25.0233L15.035 22.5693C15.1861 22.4829 15.3571 22.4375 15.5311 22.4375H22C23.6569 22.4375 25 21.0944 25 19.4375V16.32C25 15.7677 24.5523 15.32 24 15.32C23.4477 15.32 23 15.7677 23 16.32V19.4375C23 19.9898 22.5523 20.4375 22 20.4375H15.5311C15.009 20.4375 14.496 20.5737 14.0427 20.8328L9.74807 23.2869C9.41474 23.4773 9 23.2366 9 22.8527V10.6436Z"
|
|
11
|
+
fill="currentColor"
|
|
12
|
+
/>
|
|
13
|
+
</svg>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script setup lang="ts"></script>
|
|
17
|
+
|
|
18
|
+
<style scoped></style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg
|
|
3
|
+
width="1em"
|
|
4
|
+
height="1em"
|
|
5
|
+
viewBox="0 0 16 16"
|
|
6
|
+
fill="none"
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
>
|
|
9
|
+
<path
|
|
10
|
+
d="M5.75335 4.13651C5.8677 3.70974 6.31858 3.36377 6.76041 3.36377C7.20223 3.36377 7.4677 3.70974 7.35335 4.13651L7.14629 4.90928L10.3463 4.90928L10.5533 4.13651C10.6677 3.70974 11.1186 3.36377 11.5604 3.36377C12.0022 3.36377 12.2677 3.70974 12.1533 4.13651L11.9463 4.90928H12.8282C13.2701 4.90928 13.5355 5.25525 13.4212 5.68202C13.3068 6.10879 12.8559 6.45476 12.4141 6.45476H11.5322L10.704 9.54561H11.5859C12.0277 9.54561 12.2932 9.89157 12.1788 10.3183C12.0645 10.7451 11.6136 11.0911 11.1718 11.0911H10.2899L10.0828 11.8639C9.96844 12.2907 9.51757 12.6367 9.07574 12.6367C8.63391 12.6367 8.36844 12.2907 8.4828 11.8639L8.68988 11.0911L5.48986 11.0911L5.28278 11.8639C5.16843 12.2907 4.71756 12.6367 4.27573 12.6367C3.8339 12.6367 3.56843 12.2907 3.68278 11.8639L3.88986 11.0911H3.17178C2.72995 11.0911 2.46448 10.7451 2.57884 10.3183C2.69319 9.89157 3.14407 9.54561 3.58589 9.54561H4.30397L4.67327 8.16737C4.78763 7.7406 5.2385 7.39463 5.68033 7.39463C6.12215 7.39463 6.38763 7.7406 6.27327 8.16737L5.90398 9.54561L9.10399 9.54561L9.93218 6.45476L4.41412 6.45476C3.97229 6.45476 3.70682 6.10879 3.82117 5.68202C3.93553 5.25524 4.3864 4.90928 4.82823 4.90928H5.54629L5.75335 4.13651Z"
|
|
11
|
+
fill="currentColor"
|
|
12
|
+
/>
|
|
13
|
+
</svg>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script></script>
|
|
17
|
+
|
|
18
|
+
<style scoped></style>
|
package/src/main.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { createApp } from 'vue'
|
|
2
|
-
import './style.css'
|
|
3
|
-
import App from './App.vue'
|
|
1
|
+
import { createApp } from 'vue';
|
|
2
|
+
import './style.css';
|
|
3
|
+
import App from './App.vue';
|
|
4
4
|
|
|
5
|
-
createApp(App).mount('#app')
|
|
5
|
+
createApp(App).mount('#app');
|
package/src/style.css
CHANGED
|
@@ -1,79 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
color-scheme: light dark;
|
|
7
|
-
color: rgba(255, 255, 255, 0.87);
|
|
8
|
-
background-color: #242424;
|
|
9
|
-
|
|
10
|
-
font-synthesis: none;
|
|
11
|
-
text-rendering: optimizeLegibility;
|
|
12
|
-
-webkit-font-smoothing: antialiased;
|
|
13
|
-
-moz-osx-font-smoothing: grayscale;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
a {
|
|
17
|
-
font-weight: 500;
|
|
18
|
-
color: #646cff;
|
|
19
|
-
text-decoration: inherit;
|
|
20
|
-
}
|
|
21
|
-
a:hover {
|
|
22
|
-
color: #535bf2;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
body {
|
|
26
|
-
margin: 0;
|
|
27
|
-
display: flex;
|
|
28
|
-
place-items: center;
|
|
29
|
-
min-width: 320px;
|
|
30
|
-
min-height: 100vh;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
h1 {
|
|
34
|
-
font-size: 3.2em;
|
|
35
|
-
line-height: 1.1;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
button {
|
|
39
|
-
border-radius: 8px;
|
|
40
|
-
border: 1px solid transparent;
|
|
41
|
-
padding: 0.6em 1.2em;
|
|
42
|
-
font-size: 1em;
|
|
43
|
-
font-weight: 500;
|
|
44
|
-
font-family: inherit;
|
|
45
|
-
background-color: #1a1a1a;
|
|
46
|
-
cursor: pointer;
|
|
47
|
-
transition: border-color 0.25s;
|
|
48
|
-
}
|
|
49
|
-
button:hover {
|
|
50
|
-
border-color: #646cff;
|
|
51
|
-
}
|
|
52
|
-
button:focus,
|
|
53
|
-
button:focus-visible {
|
|
54
|
-
outline: 4px auto -webkit-focus-ring-color;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.card {
|
|
58
|
-
padding: 2em;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
#app {
|
|
62
|
-
max-width: 1280px;
|
|
63
|
-
margin: 0 auto;
|
|
64
|
-
padding: 2rem;
|
|
65
|
-
text-align: center;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
@media (prefers-color-scheme: light) {
|
|
69
|
-
:root {
|
|
70
|
-
color: #213547;
|
|
71
|
-
background-color: #ffffff;
|
|
72
|
-
}
|
|
73
|
-
a:hover {
|
|
74
|
-
color: #747bff;
|
|
75
|
-
}
|
|
76
|
-
button {
|
|
77
|
-
background-color: #f9f9f9;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
1
|
+
html,body {
|
|
2
|
+
padding: 0;
|
|
3
|
+
margin: 0;
|
|
4
|
+
}
|
package/src/utils/request.js
CHANGED
|
@@ -5,12 +5,12 @@ function customFetch(url, options = {}) {
|
|
|
5
5
|
method: 'GET', // 默认为 GET 请求
|
|
6
6
|
headers: {
|
|
7
7
|
'Content-Type': 'application/json',
|
|
8
|
-
|
|
8
|
+
Accept: 'application/json',
|
|
9
9
|
},
|
|
10
10
|
body: null, // 默认没有请求体
|
|
11
11
|
credentials: 'same-origin', // 默认同源策略
|
|
12
12
|
mode: 'cors', // 默认跨域模式
|
|
13
|
-
cache: 'default' // 默认缓存策略
|
|
13
|
+
cache: 'default', // 默认缓存策略
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
// 合并用户传入的选项和默认选项
|
|
@@ -24,17 +24,17 @@ function customFetch(url, options = {}) {
|
|
|
24
24
|
|
|
25
25
|
// 发送 fetch 请求
|
|
26
26
|
return fetch(url, finalOptions)
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
27
|
+
.then((response) => {
|
|
28
|
+
if (!response.ok) {
|
|
29
|
+
// 如果响应状态码不是 2xx，抛出错误
|
|
30
|
+
throw new Error(`HTTP error! status: ${response.status}`);
|
|
31
|
+
}
|
|
32
|
+
return response.json(); // 默认解析为 JSON
|
|
33
|
+
})
|
|
34
|
+
.catch((error) => {
|
|
35
|
+
console.error('Fetch error:', error);
|
|
36
|
+
throw error; // 向外抛出错误
|
|
37
|
+
});
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
// 使用封装的 fetch 函数发送 GET 请求
|
|
@@ -43,12 +43,10 @@ export function get(url, options = {}) {
|
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
// 使用封装的 fetch 函数发送 POST 请求
|
|
46
|
-
export function post(url, data={}, options = {}) {
|
|
46
|
+
export function post(url, data = {}, options = {}) {
|
|
47
47
|
return customFetch(url, {
|
|
48
48
|
...options,
|
|
49
49
|
method: 'POST',
|
|
50
|
-
body: JSON.stringify(data)
|
|
50
|
+
body: JSON.stringify(data),
|
|
51
51
|
});
|
|
52
52
|
}
|
|
53
|
-
|
|
54
|
-
|