web-component-gallery 1.2.1 → 1.2.4

package/lib/chat/icons/Send.vue

@@ -1,31 +0,0 @@
-<template>
-    <svg :fill="fillColor"
-         class="material-design-icon__svg"
-         :width="size"
-         :height="size"
-         viewBox="0 0 24 24">
-      <path d="M3 12.9999H9V10.9999H3V1.84558C3 1.56944 3.22386 1.34558 3.5 1.34558C3.58425 1.34558 3.66714 1.36687 3.74096 1.40747L22.2034 11.5618C22.4454 11.6949 22.5337 11.9989 22.4006 12.2409C22.3549 12.324 22.2865 12.3924 22.2034 12.4381L3.74096 22.5924C3.499 22.7255 3.19497 22.6372 3.06189 22.3953C3.02129 22.3214 3 22.2386 3 22.1543V12.9999Z">
-        <title v-if="title">{{ title }}</title>
-      </path>
-    </svg>
-</template>
-
-<script>
-export default {
-  name: "SendIcon",
-  emits: ['click'],
-  props: {
-    title: {
-      type: String,
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-}
-</script>

package/lib/chat/index.js

@@ -1,7 +0,0 @@
-import Chat from './Chat.vue'
- 
-Chat.install = function (Vue) { 
-  Vue.component(Chat.name, Chat)
-}
-
-export default Chat 

package/plugins/lib/chat/Chat.js

@@ -1,96 +0,0 @@
-import katex from 'katex'
-import {marked} from 'marked'  // @4.3.0版本
-import DOMPurify from 'dompurify'
-
-// 配置 Marked
-marked.setOptions({ mangle: false, breaks: false })
-
-export function parseMarkdown(text) {
-    if(!text) return
-    // $\\frac{1}{|a|} F\\left(\\frac{\\omega}{a}\\right)$
-    const rawText = text.trim()
-            .replace(/\\\[/g, "$")
-            .replace(/\\\]/g, "$")
-    const rawHtml = marked(rawText)
-    return DOMPurify.sanitize(rawHtml, {
-        ADD_TAGS: ['math', 'semantics'],
-        ADD_ATTR: ['class', 'encoding']
-    })
-}
-
-
-import KatexAutoRender from 'katex/dist/contrib/auto-render'
-import 'katex/dist/katex.min.css' 
-
-export function katexAutoRender(el, binding) {
-    let options = {
-        delimiters: [
-            { left: "$$", right: "$$", display: true },
-            { left: "$", right: "$", display: false }, 
-            { left: "\\(", right: "\\)", display: false },
-            { left: "\(", right: "\)", display: false },
-            { left: "\\[", right: "\\]", display: true },
-            { left: "\[", right: "\]", display: false }
-        ]
-    }
-
-    if(binding.value) {
-        options = {
-            ...options,
-            ...binding.value
-        }
-    }
-
-    KatexAutoRender(el, options)
-}
-
-
-
-// // 块级公式解析 ($$...$$)
-// const blockMathExtension = {
-//     name: 'blockMath',
-//     level: 'block',
-//     start(src) { return src.indexOf('$$') },
-//     tokenizer(src) {
-//       const match = src.match(/^\$\$((?:\\\$|[^$])+?)\$\$/)
-//       if (match) {
-//         return {
-//           type: 'blockMath',
-//           raw: match,
-//           text: match.trim()
-//         }
-//       }
-//     },
-//     renderer(token) {
-//       try {
-//         return katex.renderToString(token.text, { displayMode: true })
-//       } catch (e) {
-//         return `<div class="katex-error">块级公式错误: ${e.message}</div>`
-//       }
-//     }
-// }
-  
-// // 行内公式解析 ($...$)
-// const inlineMathExtension = {
-//     name: 'inlineMath',
-//     level: 'inline',
-//     start(src) { return src.indexOf('$') },
-//     tokenizer(src) {
-//       const match = src.match(/^\$((?:\\\$|[^$])+?)\$/)
-//       if (match) {
-//         return {
-//           type: 'inlineMath',
-//           raw: match,
-//           text: match.trim()
-//         }
-//       }
-//     }, 
-//     renderer(token) {
-//       try {
-//         return katex.renderToString(token.text, { displayMode: false })
-//       } catch (e) {
-//         return `<span class="katex-error">行内公式错误: ${e.message}</span>`
-//       }
-//     }
-// }
-// marked.use({ extensions: [blockMathExtension, inlineMathExtension] })

package/plugins/lib/chat/Chat.vue

@@ -1,224 +0,0 @@
-<template>
-    <div class="quick-chat-container">
-        <Header v-if="displayHeader"
-                :hide-close-button="hideCloseButton" :close-button-icon-size="closeButtonIconSize" @onClose="onClose()">
-            <template #header>
-                <slot name="header"></slot>
-            </template>
-        </Header>
-        <MessageDisplay :async-mode="asyncMode" :load-more-messages="loadMoreMessages"
-                        :link-options="linkOptions"
-                        :scroll-bottom="scrollBottom"
-                        :profile-picture-config="profilePictureConfig"
-                        :timestamp-config="timestampConfig"
-                        @onImageClicked="onImageClicked"/> 
-        <MessageManager
-                        :submit-icon-size="submitIconSize"
-                        :submit-image-icon-size="submitImageIconSize"
-                        :send-images="sendImages"
-                        :accept-image-types="acceptImageTypes"
-                        @onImageSelected="onImageSelected"
-                        @onMessageSubmit="onMessageSubmit"
-                        @onType="onType"/> 
-    </div>
-</template>
-
-<script>
-    import Header from './Header.vue'
-    import MessageDisplay from './MessageDisplay.vue'
-    import MessageManager from './MessageManager.vue'
-    import {mapMutations} from 'vuex'
-
-    export default {
-        name: 'chat',
-        components: {
-            Header,
-            MessageDisplay,
-            MessageManager
-        },
-        props: {
-            participants: {
-                type: Array,
-                required: true
-            },
-            messages: {
-                type: Array,
-                required: true
-            },
-            myself: {
-                type: Object,
-                required: true
-            },
-            chatTitle: {
-                type: String,
-                required: false,
-                default: '七星安全助手'
-            },
-            chatDescription: {
-                type: String,
-                required: false,
-                default: 'deepseek'
-            },
-            placeholder: {
-                type: String,
-                required: false,
-                default: '在此输入消息'
-            },
-            hideCloseButton: {
-                type: Boolean,
-                required: false,
-                default: false
-            },
-            submitIconSize: {
-                type: Number,
-                required: false,
-                default: 24
-            },
-            submitImageIconSize: {
-                type: Number,
-                required: false,
-                default: 24
-            },
-            closeButtonIconSize: {
-                type: String,
-                required: false,
-                default: "15px"
-            },
-            asyncMode: {
-                type: Boolean,
-                required: false,
-                default: false
-            },
-            loadMoreMessages: {
-                type: Function,
-                required: false,
-                default: null
-            },
-            scrollBottom:{
-                type: Object,
-                required: false,
-                default: () => {
-                    return {
-                        messageSent: true,
-                        messageReceived: false
-                    }
-                }
-            },
-            displayHeader: {
-                type: Boolean,
-                required: false,
-                default: true
-            },
-            sendImages: {
-                type: Boolean,
-                required: false,
-                default: false
-            },
-            profilePictureConfig: {
-                type: Object,
-                required: false,
-                default: () => {
-                    return {
-                        others: true,
-                        myself: false,
-                        styles: {
-                            width: '25px',
-                            height: '25px',
-                            borderRadius: '50%'
-                        }
-                    }
-                }
-            },
-            timestampConfig: {
-                type: Object,
-                required: false,
-                default: () => {
-                    return {
-                        format: 'HH:mm',
-                        relative: false
-                    }
-                }
-            },
-            linkOptions: {
-                type: Object,
-                required: false,
-                default: () => {
-                    return {
-                        myself: {},
-                        others: {}
-                    }
-                }
-            },
-            acceptImageTypes: {
-                type: String,
-                required: false,
-                default: "image/*"
-            }
-        },
-        watch: {
-            participants() {
-                this.setParticipants(this.participants);
-            },
-            myself() {
-                this.setMyself(this.myself);
-            },
-            messages() {
-                this.setMessages(this.messages);
-            },
-            placeholder() {
-                this.setPlaceholder(this.placeholder);
-            },
-            chatTitle() {
-                this.setChatTitle(this.chatTitle);
-            },
-            chatDescription() {
-                this.setChatDescription(this.chatDescription);
-            }
-        },
-        created() {
-            this.setParticipants(this.participants);
-            this.setMyself(this.myself);
-            this.setMessages(this.messages);
-            this.setPlaceholder(this.placeholder);
-            this.setChatTitle(this.chatTitle);
-            this.setChatDescription(this.chatDescription);
-        },
-        methods: {
-            ...mapMutations([
-                'setParticipants',
-                'setMyself',
-                'setMessages',
-                'setPlaceholder',
-                'setChatTitle',
-                'setChatDescription'
-            ]),
-            onClose: function(){
-                this.$emit("onClose");
-            },
-            onType: function(e){
-                this.$emit("onType", e)
-            },
-            onMessageSubmit: function(message){
-                this.$emit("onMessageSubmit", message)
-            },
-            onImageSelected: function(data){
-                this.$emit("onImageSelected", data)
-            },
-            onImageClicked: function(message){
-                this.$emit("onImageClicked", message)
-            },
-        },
-    }
-</script>
-
-<style lang="less">
-/* 混入样式 */
-@import url('../style/mixins.less');
-.quick-chat-container {
-    .square(100%);
-    .flex-layout(column);
-    align-items: stretch;
-    border-radius: 10px; 
-    overflow: hidden;
-}
-</style>

package/plugins/lib/chat/Header.vue

@@ -1,120 +0,0 @@
-<template>
-    <div class="header-container">
-        <slot name="header" :chatTitle="chatTitle"
-              :participants="participants"
-              :myself="myself"></slot>
-        <div v-if="!hasHeaderSlot" class="header-title">
-            <p class="header-title-text">{{chatTitle}}</p>
-            <p class="header-paticipants-text">
-                {{chatDescription}}
-            </p>
-        </div>
-
-        <div v-if="!hideCloseButton && !hasHeaderSlot" class="header-exit">
-            <slot name="close-button">
-                <a class="header-exit-button" href="#" :style="{fontSize: closeButtonIconSize}"
-                   @click.prevent="onClose">✕</a>
-            </slot>
-        </div>
-    </div>
-</template>
-
-<script>
-    /*
-    * TODO: improve support for more than 10 participants (the names list may break in some cases)
-    */
-    export default {
-        props: {
-            hideCloseButton: {
-                type: Boolean,
-                required: false,
-                default: false
-            },
-            closeButtonIconSize: {
-                type: String,
-                required: false,
-                default: "15px"
-            },
-            /* onClose: {
-                type: Function,
-                required: false,
-                default: () => false
-            } */
-        },
-        computed: {
-            participants() {
-                return this.$store.state.chat.participants
-            },
-            myself() {
-                return this.$store.state.chat.myself
-            },
-            chatTitle() {
-                return this.$store.state.chat.chatTitle
-            },
-            chatDescription() {
-                return this.$store.state.chat.chatDescription
-            },
-            hasHeaderSlot: function () {
-                return !!this.$slots['header']
-            }
-        },
-        methods:{
-            onClose: function(){
-                this.$emit("onClose")
-            }
-        }
-    }
-</script>
-
-<style lang="less">
-@import '~ant-design-vue/lib/style/themes/default.less';
-
-    .quick-chat-container .header-container {
-        height: 70px;
-        display: flex;
-        padding: 0 20px 0 10px;
-        align-items: center;
-        background: @layout-header-background;   
-        -webkit-box-shadow: 0 2px 20px 2px @shadow-color;
-        box-shadow: 0 2px 20px 2px @shadow-color;
-        z-index: 5;
-
-        .header-title {
-            padding: 10px;
-            flex: 1;
-            text-align: left;
-        }
-
-        .header-title-text {
-            color: @white;
-            font-size: @font-size-lg;
-            margin-bottom: 0;
-        }
-
-        .header-paticipants-text {
-            color: #F2F3F5; 
-            font-size: @font-size-sm;
-            margin: 5px 0;
-            max-height: 30px;
-            overflow: hidden;
-        }
-
-        .header-exit-button {
-            text-decoration: none;
-            color: @text-color;
-            font-size: 20px;
-            &:hover {
-                color: @error-color
-            }
-        }
-
-        .icon-close-chat {
-            color: @text-color;
-            width: 100%;
-        }
-
-        .icon-close-chat:hover {
-            color: @error-color
-        }
-    }
-</style>