Jydev (#60)

v1.1.4版本

Author: HeJiaYue520

apps/playground/components.d.ts

@@ -10,15 +10,26 @@ declare module 'vue' {
   export interface GlobalComponents {
     BubbleDemo: typeof import('./src/components/BubbleDemo.vue')['default']
     BubbleListDemo: typeof import('./src/components/BubbleListDemo.vue')['default']
+    EditorInputDemo: typeof import('./src/components/EditorInputDemo.vue')['default']
+    EditorSenderDemo: typeof import('./src/components/EditorSenderDemo.vue')['default']
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElEditable: typeof import('element-plus/es')['ElEditable']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElMention: typeof import('element-plus/es')['ElMention']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    MentionSenderDemo: typeof import('./src/components/MentionSenderDemo.vue')['default']
     SenderDemo: typeof import('./src/components/SenderDemo.vue')['default']
+    TestEditorInputDemo: typeof import('./src/components/Test-EditorInputDemo.vue')['default']
+    TestEditorSenderDemo: typeof import('./src/components/Test-EditorSenderDemo.vue')['default']
+    TestInputDemo: typeof import('./src/components/TestInputDemo.vue')['default']
+    TextInputDemo: typeof import('./src/components/TextInputDemo.vue')['default']
     ThinkingDemo: typeof import('./src/components/ThinkingDemo.vue')['default']
     ThoughtChainDemo: typeof import('./src/components/ThoughtChainDemo.vue')['default']
     UseRecordDemo: typeof import('./src/components/useRecordDemo.vue')['default']

apps/playground/src/App-test.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import EditorInputDemo from './components/Test-EditorInputDemo.vue'
+import EditorSenderDemo from './components/Test-EditorSenderDemo.vue'
+import SenderDemo from './components/SenderDemo.vue'
+</script>
+
+<template>
+  <div id="app">
+    <el-alert
+      title="💖 欢迎使用 Element-Plus-X"
+      type="success"
+      closable
+    >
+      <p class="self-description">
+        详情可移步使用文档：👉 <a href="https://element-plus-x.com">element-plus-x.com</a>
+      </p>
+    </el-alert>
+
+    <el-tabs type="border-card" class="demo-tabs">
+      <el-tab-pane label="EditorInputDemo">
+        <EditorInputDemo />
+      </el-tab-pane>
+      <el-tab-pane label="SenderDemo">
+        <SenderDemo />
+      </el-tab-pane>
+      <el-tab-pane label="EditorSenderDemo">
+        <EditorSenderDemo />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<style scoped>
+#app {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.demo-tabs {
+  min-height: calc(100vh - 64px - 64px);
+  background-color: beige;
+}
+
+.self-description {
+  font-size: 14px;
+
+  a {
+    text-emphasis: none;
+    color: coral;
+    font-weight: 700;
+  }
+}
+</style>

apps/playground/src/App.vue

@@ -9,6 +9,7 @@ import UseSend from './components/useSendDemo.vue'
 import useXStreamSIP from './components/useXStreamSIPDemo.vue'
 import useXStreamSSE from './components/useXStreamSSEDemo.vue'
 import UseWelcome from './components/WelcomeDemo.vue'
+import UseMentionSender from './components/MentionSenderDemo.vue'
 </script>
 
 <template>
@@ -36,6 +37,10 @@ import UseWelcome from './components/WelcomeDemo.vue'
         <UseSender />
       </el-tab-pane>
 
+      <el-tab-pane label="MentionSender">
+        <UseMentionSender />
+      </el-tab-pane>
+
       <el-tab-pane label="Welcome">
         <UseWelcome />
       </el-tab-pane>

apps/playground/src/components/BubbleDemo.vue

@@ -29,6 +29,7 @@ console.log('Hello, world!');
 
 <template>
   <div class="component-container">
+    <p>新版本支持 打字器 雾化效果</p>
     <div class="component-1">
       <Bubble
         placement="start"
@@ -41,6 +42,7 @@ console.log('Hello, world!');
           suffix: '💗',
         }"
         :is-markdown="true"
+        :is-fog="{ bgColor: '#FFFFFF' }"
       >
         <template #avatar>
           <el-avatar :size="32" :src="avatar" />

apps/playground/src/components/BubbleListDemo.vue

@@ -22,6 +22,7 @@ function addMessage() {
     content,
     placement,
     typing,
+    isFog: true,
   }
   bubbleItems.value.push(obj as MessageItem)
   bubbleListRef.value.scrollToBottom()
@@ -51,6 +52,8 @@ onMounted(() => {
 
 <template>
   <div class="component-container">
+    <p>1. 气泡列表组件，同样继承 雾化效果，点击添加对话预览 </p>
+    <p>2. 新版本 支持回到底部按钮，支持 鼠标悬停出现滚动条增强 交互体验 </p>
     <div class="top-wrap">
       <div class="btn-list">
         <el-button type="primary" plain @click="addMessage">
@@ -67,7 +70,11 @@ onMounted(() => {
     </div>
 
     <div class="component-1">
-      <BubbleList ref="bubbleListRef" :list="bubbleItems" @on-complete="onCompleteFunc">
+      <BubbleList
+        ref="bubbleListRef"
+        :list="bubbleItems"
+        @on-complete="onCompleteFunc"
+      >
         <template #avatar="{ item }">
           <el-avatar :size="32" :src="item.avatar" />
         </template>
@@ -102,6 +109,12 @@ onMounted(() => {
             }}
           </div>
         </template>
+
+        <!-- <template #backToBottom>
+          <el-button circle style="padding: 23px; font-size: 20px;">
+            💖
+          </el-button>
+        </template> -->
       </BubbleList>
     </div>
   </div>