dchat-vue 1.0.0 → 1.0.2

package/README.md

@@ -7,9 +7,10 @@ A Vue 3 chat dialog component that displays in the bottom right corner of the sc
 - Default positioning in the bottom right corner
 - Click to open/close chat dialog
 - Customizable bottom and right positioning via props
-- Integration with Element Plus UI library
+- Lightweight with no external UI framework dependencies
 - Support for AI chat functionality
 - Responsive design
+- Native HTML5 and CSS3 implementation
 
 ## Installation
 
@@ -24,7 +25,7 @@ npm install dchat-vue
 ```vue
 <template>
   <div>
-    <ChatDialog
+    <DChatVue
       title="在线客服"
       :username="'user123'"
       :bottom="50"
@@ -35,30 +36,29 @@ npm install dchat-vue
 </template>
 
 <script setup>
-import { ChatDialog } from 'dchat-vue'
+import DChatVue from 'dchat-vue'
 import 'dchat-vue/dist/style.css'
 </script>
 ```
 
-### With Element Plus
+### Advanced Usage
 
 ```vue
 <template>
   <div>
-    <ChatDialog
+    <DChatVue
       title="智能助手"
       :default-open="true"
       :bottom="100"
       :right="50"
+      :marker="'your-marker'"
     />
   </div>
 </template>
 
 <script setup>
-import { ChatDialog } from 'dchat-vue'
+import DChatVue from 'dchat-vue'
 import 'dchat-vue/dist/style.css'
-// Import Element Plus styles if not already imported
-import 'element-plus/dist/index.css'
 </script>
 ```
 
@@ -130,10 +130,17 @@ This will generate the following files in the `dist` directory:
 ## Dependencies
 
 - Vue 3 - ^3.5.0
-- Element Plus - ^2.12.0
-- @element-plus/icons-vue - ^2.3.2
 - @microsoft/fetch-event-source - ^2.0.1
 
+## Lightweight & Framework-Free
+
+This component is built with pure Vue 3 and native HTML5/CSS3, without any external UI framework dependencies. This makes it:
+
+- **Lightweight**: Smaller bundle size
+- **Fast**: No additional framework overhead
+- **Flexible**: Easy to customize and extend
+- **Compatible**: Works in any Vue 3 project
+
 ## Browser Support
 
 - Chrome (latest)

package/dist/dchat-vue.css

@@ -1 +1 @@
-.suggest_wrap[data-v-2f5e2e5e]{display:flex;align-items:center;padding-top:.5rem;padding-bottom:.5rem}.suggest_box[data-v-2f5e2e5e]{display:flex;flex-wrap:wrap;justify-content:center}.line-1[data-v-2f5e2e5e]{flex-grow:1;height:1px}.suggest-item[data-v-2f5e2e5e]{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-2f5e2e5e]:hover{background:#1e80ff33}.try_box[data-v-2f5e2e5e]{display:flex;align-items:center;font-size:12px}.try_box_icon[data-v-2f5e2e5e]{color:#6b7280}.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-d7eb24d5]{position:fixed;bottom:0;right:0;z-index:1000}.header_img[data-v-d7eb24d5]{vertical-align:middle;width:40px}.ml-10[data-v-d7eb24d5]{margin-left:10px}.open-chat-btn[data-v-d7eb24d5]{position:absolute;bottom:var(--v74d802ee);right:var(--d120986c);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-d7eb24d5]:hover{background-color:#66b1ff;transform:scale(1.1);box-shadow:0 4px 16px #0003}.open-chat-btn:hover img[data-v-d7eb24d5]{animation:shakeX 1s}.chat-dialog[data-v-d7eb24d5]{position:absolute;right:var(--v83fd9a38);bottom:var(--v74d802ee);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-d7eb24d5 .3s ease}@keyframes slideUp-d7eb24d5{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.chat-dialog-header[data-v-d7eb24d5]{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-d7eb24d5]{margin:0;font-size:16px;font-weight:600}.close-btn[data-v-d7eb24d5]{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-d7eb24d5]:hover{background-color:#fff3}.chat-box[data-v-d7eb24d5]{flex:1;padding:16px;overflow-y:auto;background-color:#f5f7fa;display:flex;flex-direction:column;gap:12px}.footer_box[data-v-d7eb24d5]{padding:0 12px 12px}.chat-input-area[data-v-d7eb24d5]{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-d7eb24d5]{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-d7eb24d5]:focus{border-color:#409eff}.send-btn[data-v-d7eb24d5]{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-d7eb24d5]:hover{background-color:#66b1ff}.send-btn[data-v-d7eb24d5]:active{background-color:#3a8ee6}.explain_box[data-v-d7eb24d5]{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-d7eb24d5]{text-align:left;font-family:SourceHanSansCN-Bold;font-size:18px;margin:0}.explain_close[data-v-d7eb24d5]{position:absolute;top:10px;right:10px;color:#252631;font-size:18px;transition:all .3s}.explain_content[data-v-d7eb24d5]{font-family:SourceHanSansCN-Regular;font-size:14px;color:#252631;text-indent:2em;text-align:left}.intro-title[data-v-d7eb24d5]{color:#252631;font-size:14px;margin:0;text-align:left}.list-box[data-v-d7eb24d5]{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-d7eb24d5]{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-d7eb24d5]{cursor:pointer;width:100%}.custom-scroll[data-v-d7eb24d5]::-webkit-scrollbar{width:8px}.custom-scroll[data-v-d7eb24d5]::-webkit-scrollbar-track{background-color:#dcdee1}.custom-scroll[data-v-d7eb24d5]::-webkit-scrollbar-thumb{background-color:#e4e4e4;border-radius:8px}.custom-scroll[data-v-d7eb24d5]::-webkit-scrollbar-thumb:hover{background-color:#333}
+.suggest_wrap[data-v-ec154a8f]{display:flex;align-items:center;padding-top:.5rem;padding-bottom:.5rem}.suggest_box[data-v-ec154a8f]{display:flex;flex-wrap:wrap;justify-content:center}.line-1[data-v-ec154a8f]{flex-grow:1;height:1px}.suggest-item[data-v-ec154a8f]{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-ec154a8f]:hover{background:#1e80ff33}.try_box[data-v-ec154a8f]{display:flex;align-items:center;font-size:12px}.try_box .icon-coffee[data-v-ec154a8f]{color:#6b7280;font-size:14px;margin-right:4px}.file-list-box[data-v-051f4227]{width:100%;margin-bottom:10px;align-self:flex-start;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.file-del[data-v-051f4227]{display:none;position:absolute;top:-7px;right:-4px;font-size:16px}.file_item[data-v-051f4227]{position:relative}.file_item:hover .file-del[data-v-051f4227]{display:block}.file[data-v-051f4227]{width:100%;flex:1;box-sizing:border-box;display:flex;height:52px;padding:4px;align-items:center;gap:10px;border-radius:8px;background:#fff;position:relative}.file-icon[data-v-051f4227]{width:25px;height:25px;border-radius:8px;overflow:hidden}.file-info[data-v-051f4227]{width:calc(100% - 38px);display:flex;flex-direction:column}.file-name[data-v-051f4227]{width:100%;color:#1a2029;font-size:12px;line-height:1.2;text-align:left}.file-success[data-v-051f4227]{display:flex;align-items:center;gap:8px;align-self:stretch;overflow:hidden;color:#838a95;text-overflow:ellipsis;font-family:PingFang SC;font-size:10px;font-weight:400;line-height:20px}.file-error[data-v-051f4227]{color:#e42020;text-overflow:ellipsis;font-family:PingFang SC;font-size:10px;font-weight:400;line-height:20px}.msg-item[data-v-e35b4667]:last-child{margin-bottom:0}.msg-item[data-v-e35b4667]{margin-bottom:15px;text-align:left}.content[data-v-e35b4667]{display:flex}.img_1[data-v-e35b4667]{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-e35b4667]{width:100%;height:100%;border-radius:50%}.img_2[data-v-e35b4667]{width:36px;height:36px;margin-left:8px}.time[data-v-e35b4667]{margin-top:2px;color:#909399;font-size:12px}.time_1[data-v-e35b4667]{text-align:right}.time_2[data-v-e35b4667]{text-align:left}.t1[data-v-e35b4667]{text-align:right;margin-right:45px}.t2[data-v-e35b4667]{margin-left:45px}.dialog_conent[data-v-e35b4667]{max-width:350px;padding:10px;font-size:14px;background:#fff;color:#303133;box-shadow:0 2px 12px #0000001a}.dialog_user_box[data-v-e35b4667]{display:flex;justify-content:flex-end;width:100%}.dialog_robot_box[data-v-e35b4667]{display:flex}.dialog_conent_user[data-v-e35b4667]{border-radius:20px 0 20px 20px;background:#4a8dff;color:#fff;margin-left:5px}.dialog_conent_robot[data-v-e35b4667]{border-radius:0 20px 20px;margin-right:5px;text-align:left}.btn-icon[data-v-e35b4667]:hover{color:#409eff}.file-upload-container[data-v-928e8f4e]{width:40px}.uploading[data-v-928e8f4e]{color:#409eff;font-size:12px;margin-left:8px;animation:spinner-928e8f4e 1s linear infinite}@keyframes spinner-928e8f4e{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.upload-wrapper[data-v-928e8f4e]{position:relative;display:inline-block}.file-input[data-v-928e8f4e]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}.upload-area[data-v-928e8f4e]{width:40px;height:40px;border:1px dashed #d9d9d9;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;background-color:#fafafa}.upload-area[data-v-928e8f4e]:hover{border-color:#409eff}.upload-area.is-dragover[data-v-928e8f4e]{border-color:#409eff;background-color:#ecf5ff}.upload-area.disabled[data-v-928e8f4e]{opacity:.6;cursor:not-allowed}.drag_content .hint[data-v-928e8f4e]{font-size:12px;color:#666;text-align:center}.file-list[data-v-928e8f4e]{margin-top:8px;max-height:200px;overflow-y:auto}.file-item[data-v-928e8f4e]{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:12px;color:#333}.file-remove[data-v-928e8f4e]{background:none;border:none;color:#999;cursor:pointer;font-size:16px;width:16px;height:16px;line-height:16px;text-align:center}.file-remove[data-v-928e8f4e]:hover{color:#f56565}.native-message[data-v-928e8f4e]{position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:4px;color:#fff;z-index:10000;transform:translate(120%);transition:transform .3s ease;font-size:14px;box-shadow:0 4px 12px #00000026}.native-message.show[data-v-928e8f4e]{transform:translate(0)}.native-message-success[data-v-928e8f4e]{background-color:#67c23a}.native-message-error[data-v-928e8f4e]{background-color:#f56c6c}.native-message-warning[data-v-928e8f4e]{background-color:#e6a23c}.native-message-info[data-v-928e8f4e]{background-color:#909399}.chat-dialog-wrapper[data-v-7d47f5d1]{position:fixed;bottom:0;right:0;z-index:1000}.header_img[data-v-7d47f5d1]{vertical-align:middle;width:40px}.ml-10[data-v-7d47f5d1]{margin-left:10px}.open-chat-btn[data-v-7d47f5d1]{position:absolute;bottom:var(--bebcb800);right:var(--v4bec0373);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-7d47f5d1]:hover{background-color:#66b1ff;transform:scale(1.1);box-shadow:0 4px 16px #0003}.open-chat-btn:hover img[data-v-7d47f5d1]{animation:shakeX 1s}.chat-dialog[data-v-7d47f5d1]{position:absolute;right:var(--v664144db);bottom:var(--bebcb800);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-7d47f5d1 .3s ease}@keyframes slideUp-7d47f5d1{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.chat-dialog-header[data-v-7d47f5d1]{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-7d47f5d1]{margin:0;font-size:16px;font-weight:600}.close-btn[data-v-7d47f5d1]{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-7d47f5d1]:hover{background-color:#fff3}.chat-box[data-v-7d47f5d1]{flex:1;padding:16px;overflow-y:auto;background-color:#f5f7fa;display:flex;flex-direction:column;gap:12px}.footer_box[data-v-7d47f5d1]{padding:0 12px 12px}.chat-input-area[data-v-7d47f5d1]{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-7d47f5d1]{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-7d47f5d1]:focus{border-color:#409eff}.send-btn[data-v-7d47f5d1]{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-7d47f5d1]:hover{background-color:#66b1ff}.send-btn[data-v-7d47f5d1]:active{background-color:#3a8ee6}.explain_box[data-v-7d47f5d1]{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-7d47f5d1]{text-align:left;font-family:SourceHanSansCN-Bold;font-size:18px;margin:0}.explain_close[data-v-7d47f5d1]{position:absolute;top:10px;right:10px;color:#252631;font-size:18px;transition:all .3s}.explain_content[data-v-7d47f5d1]{font-family:SourceHanSansCN-Regular;font-size:14px;color:#252631;text-indent:2em;text-align:left}.intro-title[data-v-7d47f5d1]{color:#252631;font-size:14px;margin:0;text-align:left}.list-box[data-v-7d47f5d1]{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-7d47f5d1]{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-7d47f5d1]{cursor:pointer;width:100%}.custom-scroll[data-v-7d47f5d1]::-webkit-scrollbar{width:8px}.custom-scroll[data-v-7d47f5d1]::-webkit-scrollbar-track{background-color:#dcdee1}.custom-scroll[data-v-7d47f5d1]::-webkit-scrollbar-thumb{background-color:#e4e4e4;border-radius:8px}.custom-scroll[data-v-7d47f5d1]::-webkit-scrollbar-thumb:hover{background-color:#333}.native-message[data-v-7d47f5d1]{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-7d47f5d1]{transform:translate(-50%) translateY(0)}.native-message-error[data-v-7d47f5d1]{background:#fef0f0;border-color:#fbc4c4;color:#f56c6c}.native-message-success[data-v-7d47f5d1]{background:#f0f9ff;border-color:#b3d8ff;color:#409eff}.native-message-warning[data-v-7d47f5d1]{background:#fdf6ec;border-color:#f5dab1;color:#e6a23c}.native-message-info[data-v-7d47f5d1]{background:#f4f4f5;border-color:#d3d4d6;color:#909399}.suggested-questions-grid[data-v-7d47f5d1]{display:flex;flex-direction:column;gap:8px}.question-item[data-v-7d47f5d1]{width:100%}.close-icon[data-v-7d47f5d1]{font-size:16px;font-weight:700;margin-right:4px}