dchat-vue 1.0.0 → 1.0.1
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/README.md +13 -6
- package/dist/dchat-vue.css +1 -1
- package/dist/dchat-vue.js +363 -410
- package/dist/dchat-vue.umd.cjs +2 -2
- package/package.json +3 -6
package/README.md
CHANGED
|
@@ -7,9 +7,10 @@ A Vue 3 chat dialog component that displays in the bottom right corner of the sc
|
|
|
7
7
|
- Default positioning in the bottom right corner
|
|
8
8
|
- Click to open/close chat dialog
|
|
9
9
|
- Customizable bottom and right positioning via props
|
|
10
|
-
-
|
|
10
|
+
- Lightweight with no external UI framework dependencies
|
|
11
11
|
- Support for AI chat functionality
|
|
12
12
|
- Responsive design
|
|
13
|
+
- Native HTML5 and CSS3 implementation
|
|
13
14
|
|
|
14
15
|
## Installation
|
|
15
16
|
|
|
@@ -40,7 +41,7 @@ import 'dchat-vue/dist/style.css'
|
|
|
40
41
|
</script>
|
|
41
42
|
```
|
|
42
43
|
|
|
43
|
-
###
|
|
44
|
+
### Advanced Usage
|
|
44
45
|
|
|
45
46
|
```vue
|
|
46
47
|
<template>
|
|
@@ -50,6 +51,7 @@ import 'dchat-vue/dist/style.css'
|
|
|
50
51
|
:default-open="true"
|
|
51
52
|
:bottom="100"
|
|
52
53
|
:right="50"
|
|
54
|
+
:marker="'your-marker'"
|
|
53
55
|
/>
|
|
54
56
|
</div>
|
|
55
57
|
</template>
|
|
@@ -57,8 +59,6 @@ import 'dchat-vue/dist/style.css'
|
|
|
57
59
|
<script setup>
|
|
58
60
|
import { ChatDialog } from 'dchat-vue'
|
|
59
61
|
import 'dchat-vue/dist/style.css'
|
|
60
|
-
// Import Element Plus styles if not already imported
|
|
61
|
-
import 'element-plus/dist/index.css'
|
|
62
62
|
</script>
|
|
63
63
|
```
|
|
64
64
|
|
|
@@ -130,10 +130,17 @@ This will generate the following files in the `dist` directory:
|
|
|
130
130
|
## Dependencies
|
|
131
131
|
|
|
132
132
|
- Vue 3 - ^3.5.0
|
|
133
|
-
- Element Plus - ^2.12.0
|
|
134
|
-
- @element-plus/icons-vue - ^2.3.2
|
|
135
133
|
- @microsoft/fetch-event-source - ^2.0.1
|
|
136
134
|
|
|
135
|
+
## Lightweight & Framework-Free
|
|
136
|
+
|
|
137
|
+
This component is built with pure Vue 3 and native HTML5/CSS3, without any external UI framework dependencies. This makes it:
|
|
138
|
+
|
|
139
|
+
- **Lightweight**: Smaller bundle size
|
|
140
|
+
- **Fast**: No additional framework overhead
|
|
141
|
+
- **Flexible**: Easy to customize and extend
|
|
142
|
+
- **Compatible**: Works in any Vue 3 project
|
|
143
|
+
|
|
137
144
|
## Browser Support
|
|
138
145
|
|
|
139
146
|
- Chrome (latest)
|
package/dist/dchat-vue.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.suggest_wrap[data-v-
|
|
1
|
+
.suggest_wrap[data-v-dab12769]{display:flex;align-items:center;padding-top:.5rem;padding-bottom:.5rem}.suggest_box[data-v-dab12769]{display:flex;flex-wrap:wrap;justify-content:center}.line-1[data-v-dab12769]{flex-grow:1;height:1px}.suggest-item[data-v-dab12769]{border:1px solid #1e80ff;padding:4px 6px;border-radius:4px;color:#1e80ff;font-size:12px;line-height:18px;cursor:pointer;margin-right:.5rem;margin-bottom:.5rem}.suggest-item[data-v-dab12769]:hover{background:#1e80ff33}.try_box[data-v-dab12769]{display:flex;align-items:center;font-size:12px}.coffee-icon[data-v-dab12769]{color:#6b7280;font-size:14px;margin-right:4px}.msg-item[data-v-c8423ab8]:last-child{margin-bottom:0}.msg-item[data-v-c8423ab8]{margin-bottom:15px;text-align:left}.content[data-v-c8423ab8]{display:flex}.img_1[data-v-c8423ab8]{width:40px;height:40px;margin-right:8px;border-radius:50%;background:linear-gradient(-45deg,#5479f1,#4a8dff);color:#fff;text-align:center;line-height:44px;font-size:26px}.img_1 .robot_img[data-v-c8423ab8]{width:100%;height:100%;border-radius:50%}.img_2[data-v-c8423ab8]{width:36px;height:36px;margin-left:8px}.time[data-v-c8423ab8]{margin-top:2px;color:#909399;font-size:12px}.time_1[data-v-c8423ab8]{text-align:right}.time_2[data-v-c8423ab8]{text-align:left}.t1[data-v-c8423ab8]{text-align:right;margin-right:45px}.t2[data-v-c8423ab8]{margin-left:45px}.dialog_conent[data-v-c8423ab8]{max-width:350px;padding:10px;font-size:14px;background:#fff;color:#303133;box-shadow:0 2px 12px #0000001a}.dialog_user_box[data-v-c8423ab8]{display:flex;justify-content:flex-end;width:100%}.dialog_robot_box[data-v-c8423ab8]{display:flex}.dialog_conent_user[data-v-c8423ab8]{border-radius:20px 0 20px 20px;background:#4a8dff;color:#fff;margin-left:5px}.dialog_conent_robot[data-v-c8423ab8]{border-radius:0 20px 20px;margin-right:5px;text-align:left}.btn-icon[data-v-c8423ab8]:hover{color:#409eff}.chat-dialog-wrapper[data-v-cce5b922]{position:fixed;bottom:0;right:0;z-index:1000}.header_img[data-v-cce5b922]{vertical-align:middle;width:40px}.ml-10[data-v-cce5b922]{margin-left:10px}.open-chat-btn[data-v-cce5b922]{position:absolute;bottom:var(--v5065f9e5);right:var(--v01fa4624);width:60px;height:60px;border-radius:50%;background-color:#409eff;background-color:#e9ebf6;color:#fff;border:none;cursor:pointer;box-shadow:0 2px 12px #00000026;transition:all .3s ease;font-size:20px;display:flex;align-items:center;justify-content:center;outline:none}.open-chat-btn[data-v-cce5b922]:hover{background-color:#66b1ff;transform:scale(1.1);box-shadow:0 4px 16px #0003}.open-chat-btn:hover img[data-v-cce5b922]{animation:shakeX 1s}.chat-dialog[data-v-cce5b922]{position:absolute;right:var(--v4e6e2040);bottom:var(--v5065f9e5);width:500px;height:600px;background-color:#f0f4fa;border-radius:12px;box-shadow:0 4px 20px #00000026;display:flex;overflow:hidden;flex-direction:column;margin-bottom:10px;animation:slideUp-cce5b922 .3s ease}@keyframes slideUp-cce5b922{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.chat-dialog-header[data-v-cce5b922]{display:flex;justify-content:space-between;line-height:28px;text-align:left;background-color:#b9d3f4;font-size:16px;color:#0b2949;height:auto;padding:8px 15px;border-top-left-radius:12px;border-top-right-radius:12px}.chat-dialog-header h3[data-v-cce5b922]{margin:0;font-size:16px;font-weight:600}.close-btn[data-v-cce5b922]{background:none;border:none;color:#4e5969;font-size:24px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s}.close-btn[data-v-cce5b922]:hover{background-color:#fff3}.chat-box[data-v-cce5b922]{flex:1;padding:16px;overflow-y:auto;background-color:#f5f7fa;display:flex;flex-direction:column;gap:12px}.footer_box[data-v-cce5b922]{padding:0 12px 12px}.chat-input-area[data-v-cce5b922]{box-sizing:border-box;line-height:normal;display:flex;width:100%;border-collapse:separate;border-spacing:0;position:relative;font-size:14px;background-color:#fff;border-radius:8px}.message-input[data-v-cce5b922]{border-radius:4px 0 0 4px;border:none;vertical-align:middle;display:table-cell;-webkit-appearance:none;background-image:none;box-sizing:border-box;color:#606266;height:40px;line-height:40px;outline:0;padding:0 15px;flex:1}.message-input[data-v-cce5b922]:focus{border-color:#409eff}.send-btn[data-v-cce5b922]{padding:10px 16px;background-color:#409eff;color:#fff;border:none;font-size:14px;cursor:pointer;border-radius:initial;transition:background-color .2s;border-top-right-radius:12px;border-bottom-right-radius:12px}.send-btn[data-v-cce5b922]:hover{background-color:#66b1ff}.send-btn[data-v-cce5b922]:active{background-color:#3a8ee6}.explain_box[data-v-cce5b922]{position:relative;background-image:linear-gradient(120deg,#d9ebff,#e3e6ff);border-radius:12px;border:1px solid #fff;padding:10px 12px;margin:0}.explain_title[data-v-cce5b922]{text-align:left;font-family:SourceHanSansCN-Bold;font-size:18px;margin:0}.explain_close[data-v-cce5b922]{position:absolute;top:10px;right:10px;color:#252631;font-size:18px;transition:all .3s}.explain_content[data-v-cce5b922]{font-family:SourceHanSansCN-Regular;font-size:14px;color:#252631;text-indent:2em;text-align:left}.intro-title[data-v-cce5b922]{color:#252631;font-size:14px;margin:0;text-align:left}.list-box[data-v-cce5b922]{margin-bottom:4px;font-size:12px;text-align:left;padding:.35rem;border-radius:5px;background-color:#fff;line-height:1.5;color:#666}.cute_icon[data-v-cce5b922]{display:inline-block;border-radius:10px 10px 2px;background-image:linear-gradient(45deg,#4a8dff,#7368f2);color:#fff;font-size:12px;padding:0 4px;margin-right:.4rem}.cute_a[data-v-cce5b922]{cursor:pointer;width:100%}.custom-scroll[data-v-cce5b922]::-webkit-scrollbar{width:8px}.custom-scroll[data-v-cce5b922]::-webkit-scrollbar-track{background-color:#dcdee1}.custom-scroll[data-v-cce5b922]::-webkit-scrollbar-thumb{background-color:#e4e4e4;border-radius:8px}.custom-scroll[data-v-cce5b922]::-webkit-scrollbar-thumb:hover{background-color:#333}.native-message[data-v-cce5b922]{position:fixed;top:20px;left:50%;transform:translate(-50%) translateY(-100px);background:#fff;border-radius:4px;box-shadow:0 2px 12px #0000001a;padding:12px 20px;font-size:14px;z-index:2000;transition:transform .3s ease;border:1px solid #e4e7ed}.native-message.show[data-v-cce5b922]{transform:translate(-50%) translateY(0)}.native-message-error[data-v-cce5b922]{background:#fef0f0;border-color:#fbc4c4;color:#f56c6c}.native-message-success[data-v-cce5b922]{background:#f0f9ff;border-color:#b3d8ff;color:#409eff}.native-message-warning[data-v-cce5b922]{background:#fdf6ec;border-color:#f5dab1;color:#e6a23c}.native-message-info[data-v-cce5b922]{background:#f4f4f5;border-color:#d3d4d6;color:#909399}.suggested-questions-grid[data-v-cce5b922]{display:flex;flex-direction:column;gap:8px}.question-item[data-v-cce5b922]{width:100%}.close-icon[data-v-cce5b922]{font-size:16px;font-weight:700;margin-right:4px}
|