Element Plus X

https://element-plus-x.com/zh
Admin
Element Plus X is an enterprise-grade AI component library built on Vue 3 and Element Plus,...
Tokens:114,098
Snippets:632
Trust Score:5.2
Update:4 months ago
Show doc for...
Tokens:
Raw
### Vue Component Setup with Markdown

Source: https://element-plus-x.com/zh/components/xmarkdown

A Vue 3 setup script demonstrating how to use the markdown component with an embedded HTML example.

```vue
<script setup lang="ts">
const markdown = `
\
```html
<div class="product-card">
  <div class="badge">新品</div>
  <img src="https://picsum.photos/300/200?product" alt="产品图片">

  <div class="content">
    <h3>无线蓝牙耳机 Pro</h3>
    <p class="description">主动降噪技术，30小时续航，IPX5防水等级</p>

    <div class="rating">
      <span>★★★★☆</span>
      <span class="reviews">(124条评价)</span>
    </div>

    <div class="price-container">
      <span class="price">¥499</span>
      <span class="original-price">¥699</span>
      <span class="discount">7折</span>
    </div>

    <div class="actions">
      <button class="cart-btn" onclick="addToCart(this)">加入购物车</button>
      <button class="fav-btn">❤️</button>
    </div>

    <div class="meta">
      <span>✓ 次日达</span>
      <span>✓ 7天无理由</span>
    </div>
  </div>
</div>

`
</script>
```

--------------------------------

### Install with npm

Source: https://element-plus-x.com/zh/guide/install.html

Use this command to install the Element-Plus-X library using npm.

```sh
npm install vue-element-plus-x --save
```

--------------------------------

### Install with yarn

Source: https://element-plus-x.com/zh/guide/install.html

Use this command to install the Element-Plus-X library using yarn.

```sh
yarn add vue-element-plus-x --save
```

--------------------------------

### Install with pnpm

Source: https://element-plus-x.com/zh/guide/install.html

Use this command to install the Element-Plus-X library using pnpm.

```sh
pnpm add vue-element-plus-x --save
```

--------------------------------

### Install Project Dependencies with PNPM

Source: https://element-plus-x.com/zh/guide/develop.html

Install all necessary project dependencies using PNPM, the recommended package manager for this project.

```bash
pnpm install
```

--------------------------------

### Basic useRecord Hook Usage

Source: https://element-plus-x.com/zh/components/useRecord

Demonstrates the basic setup and usage of the useRecord hook, including starting and stopping recording, and handling the transcribed text. It shows how to destructure the value to avoid naming conflicts.

```vue
<script setup lang="ts">
import {
  Eleme,
  Loading,
  Mic,
  Microphone,
  RefreshRight,
  Service
} from '@element-plus/icons-vue';
import { useRecord } from 'vue-element-plus-x';

// useRecord 这是常规 写法
// const { start, value, loading, stop } = useRecord({ onEnd: handleEnd })

// useRecord 下面的写法是对 value 的解构赋值，将 value 取名为 text 并赋值给 text，让他和下面的 value 变量名不冲突
const { 
  start,
  value: text,
  loading,
  stop
} = useRecord({ 
  onEnd: handleEnd 
});

const value = ref('');
const senderRef = ref();

function handleStart() {
  start();
}

function handleEnd(res: string) {
  console.log('end:', res);
}

function submit() {
  console.log('submit:', text);
}

watch(
  text,
  val => {
    console.log('text:', val);
    value.value = val;
  },
  { deep: true }
);
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <div style="display: flex">
      <el-button :disabled="loading" @click="handleStart">
        {{ loading ? '录音中' : '开始录音' }}
      </el-button>
      <el-button :disabled="!loading" @click="stop">
        结束录音
      </el-button>
    </div>

    <Sender ref="senderRef" v-model="value" @submit="submit">
      <template #action-list>
        <div class="btn-list">
          <el-button
            v-if="!loading"
            :loading="loading"
            type="primary"
            circle
            plain
            color="#EC0078"
            @click="handleStart"
          >
            <el-icon>
              <Mic />
            </el-icon>
          </el-button>

          <el-button
            v-else
            type="primary"
            circle
            color="#EC0078"
            :z-index="99"
            @click="stop"
          >
            <el-icon class="loading">
              <Eleme />
            </el-icon>
          </el-button>
        </div>
      </template>
    </Sender>

    <Sender ref="senderRef" v-model="value" @submit="submit">
      <template #action-list>
        <div class="btn-list">
          <el-button
            v-if="!loading"
            :loading="loading"
            type="primary"
            circle
            color="#626aef"
            @click="handleStart"
          >
            <el-icon><Microphone /></el-icon>
          </el-button>

          <el-button
            v-else
            type="primary"
            circle
            color="#626aef"
            plain
            :z-index="99"
            @click="stop"
          >
            <el-icon class="loading">
              <Loading />
            </el-icon>
          </el-button>
        </div>
      </template>
    </Sender>

    <Sender ref="senderRef" v-model="value" @submit="submit">
      <template #action-list>
        <div class="btn-list">
          <el-button
            v-if="!loading"
            :loading="loading"
            type="primary"
            color="#FE0006"
            test
            @click="handleStart"
          >
            <el-icon><Service /></el-icon>
          </el-button>

          <el-button
            v-else
            type="primary"
            color="#FE0006"
            plain
            :z-index="99"
            @click="stop"
          >
            <el-icon class="loading">
              <RefreshRight />
            </el-icon>
          </el-button>
        </div>
      </template>
    </Sender>
  </div>
</template>

<style scoped lang="less">
// 旋转
.loading {
  animation: rotate 1s linear infinite;
}

</style>
```

--------------------------------

### Install Element Plus X

Source: https://element-plus-x.com/zh

Install the Element Plus X library using pnpm. This is the first step to integrating the components into your Vue project.

```bash
pnpm install vue-element-plus-x
```

--------------------------------

### Use useXStream for SIP Stream Data

Source: https://element-plus-x.com/zh/components/useXStream

This example shows how to use the useXStream hook to handle data from the SIP protocol. It includes a custom TransformStream to process SIP data before it's enqueued, alongside functions to start and cancel the stream.

```vue
<script setup lang="ts">
import { useXStream } from 'vue-element-plus-x';

const { startStream, cancel, data, error, isLoading } = useXStream();

async function startSIPStream() {
  try {
    const response = await fetch(
      'https://node-test.element-plus-x.com/api/sip',
      { headers: { 'Content-Type': 'application/sip' } }
    );
    const readableStream = response.body!;

    // 自定义 transformStream 处理 SIP 数据
    const sipTransformStream = new TransformStream<string, any>({
      transform(chunk, controller) {
        // 这里可以添加 SIP 数据的解析逻辑
        controller.enqueue(chunk);
      }
    });

    await startStream({ readableStream, transformStream: sipTransformStream });
  }
  catch (err) {
    console.error('Fetch error:', err);
  }
}

// 计算属性
const content = computed(() => {
  if (!data.value.length)
    return '';
  let text = '';
  for (let index = 0; index < data.value.length; index++) {
    const chunk = data.value[index];
    try {
      console.log('chunk', chunk);
      text += chunk;
    }
    catch (error) {
      console.error('解析数据时出错:', error);
    }
    // console.log('New chunk:', chunk)
  }
  console.log('Text:', text);
  return text;
});
</script>

<template>
  <div class="container">
    <div class="btn-list">
      <el-button :disabled="isLoading" @click="startSIPStream">
        {{ isLoading ? '加载中...' : '获取 SIP 协议数据' }}
      </el-button>

      <el-button :disabled="!isLoading" @click="cancel()">
        中断请求
      </el-button>
    </div>
    <div v-if="error" class="error">
      {{ error.message }}
    </div>

    <Bubble
      v-if="content"
      :content="content"
      is-markdown
      style="width: calc(100% - 12px)"
    />
  </div>
</template>

<style scoped lang="less">
.container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  .el-button {
    width: fit-content;
  }
  :deep(.markdown-body) {
    background-color: transparent;
    padding: 12px;
  }
}
</style>
```

--------------------------------

### Product Card Example

Source: https://element-plus-x.com/zh/components/xmarkdown

An example of a product card using HTML and CSS, including a JavaScript function for adding items to a cart.

```html
<div class="product-card">  <div class="badge">新品</div>  <img src="https://picsum.photos/300/200?product" alt="产品图片">  <div class="content">    <h3>无线蓝牙耳机 Pro</h3>    <p class="description">主动降噪技术，30小时续航，IPX5防水等级</p>    <div class="rating">      <span>★★★★☆</span>      <span class="reviews">(124条评价)</span>    </div>    <div class="price-container">      <span class="price">¥499</span>      <span class="original-price">¥699</span>      <span class="discount">7折</span>    </div>    <div class="actions">      <button class="cart-btn" onclick="addToCart(this)">加入购物车</button>      <button class="fav-btn">❤️</button>    </div>    <div class="meta">      <span>✓ 次日达</span>      <span>✓ 7天无理由</span>    </div>  </div></div><script>  function addToCart(button) {    // 防止重复点击    if (button.disabled) return;        // 禁用按钮    button.disabled = true;    button.innerHTML = '加入中...';        // 模拟添加到购物车的API请求    setTimeout(() => {      // 显示成功消息      button.innerHTML = '✓ 已加入';      button.classList.add('success');            // 3秒后恢复按钮状态      setTimeout(() => {        button.innerHTML = '加入购物车';        button.disabled = false;        button.classList.remove('success');      }, 3000);    }, 800);  };</script><style>  .product-card {  width: 280px;  border-radius: 12px;  overflow: hidden;  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);  position: relative;  background: white;  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}.badge {  position: absolute;  top: 12px;  left: 12px;  background: #ff6b6b;  color: white;  padding: 4px 10px;  border-radius: 4px;  font-weight: bold;  font-size: 12px;  z-index: 2;}img {  width: 100%;  height: 180px;  object-fit: cover;  display: block;}.content {  padding: 16px;}h3 {  margin: 8px 0;  font-size: 18px;  color: #333;}.description {  color: #666;  font-size: 14px;  margin: 8px 0 12px;  line-height: 1.4;}.rating {  display: flex;  align-items: center;  margin: 10px 0;  color: #ffb300;}.reviews {  font-size: 13px;  color: #888;  margin-left: 8px;}.price-container {  display: flex;  align-items: center;  gap: 8px;  margin: 12px 0;}.price {  font-size: 22px;  font-weight: bold;  color: #ff4757;}.original-price {  font-size: 14px;  color: #999;  text-decoration: line-through;}.discount {  background: #fff200;  padding: 2px 6px;  border-radius: 4px;  font-size: 12px;}.actions {  display: flex;  gap: 8px;  margin: 16px 0 12px;}.cart-btn {  flex: 1;  background: #5352ed;  color: white;  border: none;  padding: 10px;  border-radius: 6px;  font-weight: bold;  cursor: pointer;  transition: background 0.2s;}.cart-btn:hover {  background: #3742fa;}.cart-btn.disabled {  background: #a4b0be;  cursor: not-allowed;}.cart-btn.success {  background: #2ed573;}.fav-btn {  width: 42px;  background: white;  border: 1px solid #ddd;  border-radius: 6px;  font-size: 18px;  cursor: pointer;  transition: all 0.2s;}.fav-btn:hover {  border-color: #ff6b6b;  color: #ff6b6b;}.meta {  display: flex;  gap: 15px;  font-size: 13px;  color: #2ed573;  margin-top: 8px;}</style>
```

--------------------------------

### Verify Installation in package.json

Source: https://element-plus-x.com/zh/guide/install.html

Check your package.json file to ensure 'vue-element-plus-x' is listed under dependencies after installation.

```json
{
  "dependencies": {
    "vue-element-plus-x": "^1.3.0"
  }
}
```

--------------------------------

### Welcome Component with Extra Subtitle

Source: https://element-plus-x.com/zh/components/welcome

This example demonstrates the Welcome component with an additional 'extra' prop for a subtitle, alongside the icon, title, and description.

```vue
<Welcome
  :direction="value"
  icon="https://camo.githubusercontent.com/4ea7fdaabf101c16965c0bd3ead816c9d7726a59b06f0800eb7c9a30212d5a6a/68747470733a2f2f63646e2e656c656d656e742d706c75732d782e636f6d2f656c656d656e742d706c75732d782e706e67"
  title="欢迎使用 Element Plus X 💖"
  extra="副标题"
  description="这是描述信息 ~"
  :style="{ background: bgColor }"
/>
```

--------------------------------

### Full Import Example

Source: https://element-plus-x.com/zh/guide/install.html

Globally import ElementPlusX using app.use() in your main.ts file for full access to all components.

```typescript
// main.ts
import { createApp } from 'vue'
import ElementPlusX from 'vue-element-plus-x'
import App from './App.vue'

const app = createApp(App)
// 使用 app.use() 全局引入
app.use(ElementPlusX)
app.mount('#app')
```

--------------------------------

### Vue Typewriter Component Control with Methods and Events

Source: https://element-plus-x.com/zh/components/typewriter

This example shows how to implement interactive controls (pause, continue, replay, destroy) and monitor the Typewriter component's state using its instance methods and event listeners in a Vue 3 setup script.

```vue
<script setup lang="ts">
import type { TypewriterInstance } from 'vue-element-plus-x/types/typewriter';
import {
  Delete,
  RefreshLeft,
  VideoPause,
  VideoPlay
} from '@element-plus/icons-vue';

const markdownContent = ref(
  `# 🔥 Typewriter 实例方法-事件 \n 😄 使你的打字器可高度定制化。\n - 更方便的控制打字器的状态 \n - 列表项 **粗体文本** 和 *斜体文本* \n ```javascript \n // 🙉 控制台可以查看相关打日志\n console.log('Hello, world!'); \n ````
);

const isTypingValue = ref(false);
const progressValue = ref(0);
const typerRef = ref();
// 开始打字的监听方法
function onStart(instance: TypewriterInstance) {
  console.log('开始打字：组件 ref 实例', unref(instance));
  isTypingValue.value = true;
}
// 打字中，进度监听方法
function onWriting(instance: TypewriterInstance) {
  const progress: number = instance.progress.value;
  // 避免打印打多次 onWriting 事件 😂
  if (progress > 90 && progress < 100) {
    // 可以直接获取打字进度，可以根据打字进度，设置更炫酷的样式
    // console.log('Writing', `${progress}%`)
    console.log(
      '打字中 isTyping:',
      instance.isTyping.value,
      'progress:',
      progress
    );
  }

  if (~~progress === 80) {
    console.log(
      '打字中 progress 为 80% 时候的内容',
      instance.renderedContent.value
    );
  }
  isTypingValue.value = true;
  progressValue.value = ~~progress; // 通过运算符~~取整 💩
}
// 监听打字结束事件
function onFinish(instance: TypewriterInstance) {
  isTypingValue.value = false;
  console.log(
    '打字结束 isTyping',
    instance.isTyping.value,
    'progress:',
    instance.progress.value
  );
}
// 组件实例方法，控制 暂停打字
function onInterrupt() {
  typerRef.value.interrupt();
  isTypingValue.value = false;
}
function onDestroy() {
  typerRef.value.destroy();
  isTypingValue.value = false;
  progressValue.value = 0;
}
</script>

<template>
  <ClientOnly>
    <div style="display: flex; flex-direction: column; gap: 12px">
      <div style="display: flex">
        <el-button
          v-if="isTypingValue"
          type="warning"
          style="width: fit-content"
          @click="onInterrupt"
        >
          <el-icon :size="18">
            <VideoPause />
          </el-icon>
          <span>暂停</span>
        </el-button>
        <el-button
          v-if="!isTypingValue && progressValue !== 0 && progressValue !== 100"
          type="success"
          style="width: fit-content"
          @click="typerRef?.continue()"
        >
          <el-icon :size="18">
            <VideoPlay />
          </el-icon>
          <span>继续</span>
        </el-button>
        <el-button
          v-if="
            !isTypingValue && (progressValue === 0 || progressValue === 100)
          "
          type="primary"
          style="width: fit-content"
          @click="typerRef?.restart()"
        >
          <el-icon :size="18">
            <RefreshLeft />
          </el-icon>
          <span>重播</span>
        </el-button>
        <el-button type="danger" style="width: fit-content" @click="onDestroy">
          <el-icon><Delete /></el-icon>
          <span>销毁</span>
        </el-button>
      </div>

      <el-progress
        v-if="progressValue > 0 && progressValue !== 100"
        :duration="0"
        :percentage="progressValue"
      />
      <el-progress
        v-if="progressValue === 100"
        :percentage="100"
        status="success"
      />
    </div>
  </ClientOnly>
</template>
```

--------------------------------

### SSE Event Part Example

Source: https://element-plus-x.com/zh/components/useXStream

Example of how an SSE event part is structured, including the event type, data payload, and separators.

```text
sseEventPart **`'event: message
data: {"id":"${i}","content":"${contentChunks[i]}"}

'`**
```

--------------------------------

### Initiate and Cancel Requests with XRequest

Source: https://element-plus-x.com/zh/components/useSend

Demonstrates the basic usage of XRequest for sending requests and aborting them. Instantiate XRequest with configuration, then use .send() to start and .abort() to stop.

```vue
<script setup lang="ts">
import { XRequest } from 'vue-element-plus-x';

const str = ref('');

const sse = new XRequest({
  baseURL: 'https://node-test.element-plus-x.com',
  onMessage: (msg: { data: string }) => {
    console.log('onMessage:', msg);
    str.value += `
    ${msg.data}`;
  }
});
</script>

<template>
  <div class="container">
    <div class="btn-list">
      <el-button
        @click="
          () => {
            str = '';
            sse.send('/api/sse');
          }
        "
      >
        发起请求
      </el-button>

      <el-button @click="sse.abort()">
        取消请求
      </el-button>
    </div>

    <div>{{ str }}</div>
  </div>
</template>
```

--------------------------------

### Bubble List Component Setup and Methods

Source: https://element-plus-x.com/zh/components/bubbleList

This snippet demonstrates the setup of the Bubble List component, including generating fake messages, adding new messages, clearing the list, and utilizing instance methods for scrolling. It requires importing necessary types and functions from 'vue-element-plus-x'.

```vue
<script setup lang="ts">
import type {
  BubbleListItemProps,
  BubbleListProps
} from 'vue-element-plus-x/types/BubbleList';
import type { TypewriterProps } from 'vue-element-plus-x/types/Typewriter';

type listType = BubbleListItemProps & {
  key: number;
  role: 'user' | 'ai';
};

// 示例调用
const bubbleItems = ref<BubbleListProps<listType>['list']>(
  generateFakeItems(2)
);

function generateFakeItems(count: number): listType[] {
  const messages: listType[] = [];
  for (let i = 0; i < count; i++) {
    const role = i % 2 === 0 ? 'ai' : 'user';
    const placement = role === 'ai' ? 'start' : 'end';
    const key = i + 1;
    const content =
      role === 'ai'
        ? '💖 感谢使用 Element Plus X ! 你的支持，是我们开源的最强动力 ~'
        : `哈哈哈，让我试试`;
    const loading = false;
    const shape = 'corner';
    const variant = role === 'ai' ? 'filled' : 'outlined';
    const isMarkdown = false;
    const typing = false;
    const avatar =
      role === 'ai'
        ? 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        : 'https://avatars.githubusercontent.com/u/76239030?v=4';

    messages.push({
      key,
      role,
      placement,
      content,
      loading,
      shape,
      variant,
      isMarkdown,
      typing,
      avatar,
      avatarSize: '32px'
    });
  }
  return messages;
}

const bubbleListRef = ref();
const num = ref(0);

function addMessage() {
  const i = bubbleItems.value.length;
  const isUser = !!(i % 2);
  const content = isUser
    ? '哈哈哈，让我试试'
    : '💖 感谢使用 Element Plus X ! 你的支持，是我们开源的最强动力 ~'.repeat(5);
  const shape = 'corner';
  const variant = !isUser ? 'filled' : 'outlined';
  const placement = isUser ? 'end' : 'start';
  const typing: TypewriterProps['typing'] = isUser
    ? false
    : { step: 5, suffix: '🍆', interval: 35 };
  const avatar = isUser
    ? 'https://avatars.githubusercontent.com/u/76239030?v=4'
    : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
  const obj = {
    key: i,
    role: isUser ? 'user' : 'ai',
    content,
    placement,
    typing,
    avatar,
    shape,
    variant,
    avatarSize: '32px',
    isFog: !isUser
  };
  bubbleItems.value.push(obj as listType);
  // 每次添加 调用 滚动到底部 触发 自动滚动
  scrollBottom();
}

function clearMessage() {
  bubbleItems.value = [];
}

function scrollToTop() {
  bubbleListRef.value.scrollToTop();
}

function scrollBottom() {
  bubbleListRef.value.scrollToBottom();
}

function scrollToBubble() {
  bubbleListRef.value.scrollToBubble(num.value);
}

onMounted(() => {
  setTimeout(() => {
    bubbleItems.value.map(item => {
      item.loading = false;
      return item;
    });
  }, 3000);
});
</script>

<template>
  <div class="component-container">
    <div class="top-wrap">
      <div class="btn-list">
        <el-button type="primary" plain @click="addMessage">
          添加对话
        </el-button>
        <el-button type="danger" plain @click="clearMessage">
          清空对话列表
        </el-button>
        <el-button type="primary" plain @click="scrollToTop">
          滚动到顶部
        </el-button>
        <el-button type="primary" plain @click="scrollBottom">
          滚动到底部
        </el-button>
      </div>

      <div class="btn-list">
        <el-input-number
          v-model="num"
          :min="0"
          :max="10"
          controls-position="right"
        />
        <el-button type="primary" plain @click="scrollToBubble">
          滚动第{{ num }}个气泡框
        </el-button>
      </div>
    </div>

```

--------------------------------

### Basic Sender Usage

Source: https://element-plus-x.com/zh/components/sender

A simple example demonstrating the basic usage of the Sender input component.

```vue
<template>
  <Sender />
</template>
```

--------------------------------

### Custom Footer Example

Source: https://element-plus-x.com/zh/components/mentionSender

Illustrates customizing the footer of the MentionSender component using the #footer slot. This example also shows how to use the 'showUpdown' prop to hide default layouts when customizing the footer.

```vue
<script setup lang="ts">
import { ElementPlus, Paperclip, Promotion } from '@element-plus/icons-vue';

const senderValue = ref('');
const isSelect = ref(false);
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 20px">
    <MentionSender
      v-model="senderValue"
      :auto-size="{ minRows: 1, maxRows: 5 }"
      clearable
      allow-speech
      placeholder="💌 欢迎使用 Element-Plus-X"
    >
      <template #prefix>
        <div
          style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap"
        >
          <el-button round plain color="#626aef">
            <el-icon><Paperclip /></el-icon>
          </el-button>
        </div>
      </template>

      <template #action-list>
        <div style="display: flex; align-items: center; gap: 8px">
          <el-button round color="#626aef">
            <el-icon><Promotion /></el-icon>
          </el-button>
        </div>
      </template>

      <!-- 自定义 底部插槽 -->
      <template #footer>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px;
          "
        >
          默认变体 自定义底部
        </div>
      </template>
    </MentionSender>
  </div>
</template>
```

--------------------------------

### Borderless Welcome Component with Description

Source: https://element-plus-x.com/zh/components/welcome

This example uses the 'borderless' variant of the Welcome component, including a title and description, with a background gradient.

```vue
<Welcome
  :direction="value"
  variant="borderless"
  title="欢迎使用 Element Plus X 💖"
  description="这是描述信息 ~"
  :style="{ background: bgColor }"
/>
```

--------------------------------

### Attachments Basic Usage and Scrolling Modes

Source: https://element-plus-x.com/zh/components/attachments

Demonstrates the basic setup and usage of the Attachments component with scrollX, scrollY, and wrap overflow modes. Includes setup for file handling, upload logic, and deletion.

```vue
<script setup lang="ts">
import type {
  FilesCardProps,
  FilesType
} from 'vue-element-plus-x/types/FilesCard';
import { ref } from 'vue';

type SelfFilesCardProps = FilesCardProps & {
  id?: number;
};

const colorMap: Record<FilesType, string> = {
  word: '#5E74A8',
  excel: '#4A6B4A',
  ppt: '#C27C40',
  pdf: '#5A6976',
  txt: '#D4C58C',
  mark: '#FFA500',
  image: '#8E7CC3',
  audio: '#A67B5B',
  video: '#4A5568',
  three: '#5F9E86',
  code: '#4B636E',
  database: '#4A5A6B',
  link: '#5D7CBA',
  zip: '#8B5E3C',
  file: '#AAB2BF',
  unknown: '#888888'
};

const files = ref<SelfFilesCardProps[]>([]);
const typeList = Object.keys(colorMap);

onMounted(() => {
  for (let index = 0; index < 30; index++) {
    files.value.push({
      id: index,
      uid: index,
      name: `文件${index}`,
      fileSize: 1024 * 2,
      fileType: typeList[
        Math.floor(Math.random() * typeList.length)
      ] as FilesType,
      // description: `描述 ${index}`,
      url: 'https://www.baidu.com',
      thumbUrl: 'https://www.baidu.com',
      imgFile: new File([], 'test.txt'),
      showDelIcon: true
    });
  }
});

function handleBeforUpload(file: any) {
  console.log('befor', file);
  if (file.size > 1024 * 1024 * 2) {
    ElMessage.error('文件大小不能超过 2MB!');
    return false;
  }
}

async function handleUploadDrop(files: any, props: any) {
  console.log('drop', files);
  console.log('props', props);

  if (files && files.length > 0) {
    if (files[0].type === '') {
      ElMessage.error('禁止上传文件夹！');
      return false;
    }

    for (let index = 0; index < files.length; index++) {
      const file = files[index];
      await handleHttpRequest({ file });
    }
  }
}

async function handleHttpRequest(options: any) {
  const formData = new FormData();
  formData.append('file', options.file);
  ElMessage.info('上传中...');

  setTimeout(() => {
    const res = {
      message: '文件上传成功',
      fileName: options.file.name,
      uid: options.file.uid,
      fileSize: options.file.size,
      imgFile: options.file
    };
    files.value.push({
      id: files.value.length,
      uid: res.uid,
      name: res.fileName,
      fileSize: res.fileSize,
      imgFile: res.imgFile,
      showDelIcon: true,
      imgVariant: 'square'
    });
    ElMessage.success('上传成功');
  }, 1000);
}

function handleDeleteCard(item: SelfFilesCardProps) {
  files.value = files.value.filter((items: any) => items.id !== item.id);
  console.log('delete', item);
  ElMessage.success('删除成功');
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <div>scrollX</div>
    <Attachments
      :http-request="handleHttpRequest"
      :items="files"
      drag
      overflow="scrollX"
      :before-upload="handleBeforUpload"
      :hide-upload="false"
      @upload-drop="handleUploadDrop"
      @delete-card="handleDeleteCard"
    />
    <div>scrollY</div>
    <Attachments
      :http-request="handleHttpRequest"
      :items="files"
      drag
      overflow="scrollY"
      :list-style="{ height: '200px' }"
      :before-upload="handleBeforUpload"
      :hide-upload="false"
      @upload-drop="handleUploadDrop"
      @delete-card="handleDeleteCard"
    />
    <div>wrap</div>
    <Attachments
      :http-request="handleHttpRequest"
      :items="files"
      drag
      overflow="wrap"
      :before-upload="handleBeforUpload"
      :hide-upload="false"
      @upload-drop="handleUploadDrop"
      @delete-card="handleDeleteCard"
    />
  </div>
</template>

<style scoped lang="less"></style>

```

--------------------------------

### Borderless Welcome Component with Icon, Subtitle, and Description

Source: https://element-plus-x.com/zh/components/welcome

This example shows the 'borderless' Welcome component with an icon, title, subtitle ('extra' prop), and description, utilizing a background gradient.

```vue
<Welcome
  :direction="value"
  icon="https://camo.githubusercontent.com/4ea7fdaabf101c16965c0bd3ead816c9d7726a59b06f0800eb7c9a30212d5a6a/68747470733a2f2f63646e2e656c656d656e742d706c75732d782e636f6d2f656c656d656e742d706c75732d782e706e67"
  variant="borderless"
  title="欢迎使用 Element Plus X 💖"
  extra="副标题"
  description="这是描述信息 ~"
  :style="{ background: bgColor }"
/>
```

--------------------------------

### On-Demand Import Example

Source: https://element-plus-x.com/zh/guide/install.html

Import specific components like BubbleList and Sender for on-demand usage. This leverages Tree Shaking for optimization.

```vue
<script>
import { BubbleList, Sender } from 'vue-element-plus-x';

const list = [
  {
    content: 'Hello, Element Plus X',
    role: 'user'
  }
];
</script>

<template>
  <div
    style="display: flex; flex-direction: column; height: 230px; justify-content: space-between;"
  >
    <BubbleList :list="list" />
    <Sender />
  </div>
</template>
```

--------------------------------

### Custom Mermaid Toolbar Example

Source: https://element-plus-x.com/zh/components/xmarkdown

Demonstrates how to create a fully custom Mermaid toolbar using the `codeMermaidHeaderControl` slot in Vue. This example shows how to integrate Element Plus components and custom styling for a personalized user experience.

```vue
<script setup lang="ts">
import { ElButton, ElMessage, ElTooltip } from 'element-plus';
import { h } from 'vue';

const markdown = `
\
```mermaid
pie
    "传媒及文化相关" : 35
    "广告与市场营销" : 8
    "游戏开发" : 15
    "影视动画与特效" : 12
    "互联网产品设计" : 10
    "VR/AR开发" : 5
    "其他" : 15
\
```
`;

const selfCodeXSlot = {
  codeMermaidHeaderControl: (props: any) => {
    return h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          padding: '12px 16px',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: 'white',
          borderRadius: '8px',
          boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
        }
      },
      [
        h(
          'div',
          {
            style: { display: 'flex', alignItems: 'center', gap: '12px' }
          },
          [
            h('span', { style: { fontSize: '16px' } }, '🎨'),
            h('span', { style: { fontWeight: '600' } }, 'Custom Mermaid'),
            h(
              'span',
              {
                style: {
                  fontSize: '12px',
                  background: 'rgba(255,255,255,0.25)',
                  padding: '4px 8px',
                  borderRadius: '12px'
                }
              },
              props.showSourceCode ? '📝 源码' : '📊 图表'
            )
          ]
        ),

```

--------------------------------

### Custom Prefix and Header Example

Source: https://element-plus-x.com/zh/components/mentionSender

Demonstrates how to customize both the header and prefix content of the MentionSender component using slots. Includes logic to open/close the header and manage its visibility.

```vue
<script setup lang="ts">
import { CircleClose, Link } from '@element-plus/icons-vue';

const senderRef = ref();
const senderValue = ref('');
const showHeaderFlog = ref(false);

onMounted(() => {
  showHeaderFlog.value = true;
  senderRef.value.openHeader();
});

function openCloseHeader() {
  if (!showHeaderFlog.value) {
    senderRef.value.openHeader();
  }
  else {
    senderRef.value.closeHeader();
  }
  showHeaderFlog.value = !showHeaderFlog.value;
}

function closeHeader() {
  showHeaderFlog.value = false;
  senderRef.value.closeHeader();
}
</script>

<template>
  <div
    style="
      display: flex;
      flex-direction: column;
      gap: 12px;
      height: 230px;
      justify-content: flex-end;
    "
  >
    <MentionSender ref="senderRef" v-model="senderValue">
      <template #header>
        <div class="header-self-wrap">
          <div class="header-self-title">
            <div class="header-left">
              💯 欢迎使用 Element Plus X
            </div>
            <div class="header-right">
              <el-button @click.stop="closeHeader">
                <el-icon><CircleClose /></el-icon>
                <span>关闭头部</span>
              </el-button>
            </div>
          </div>
          <div class="header-self-content">
            🦜 自定义头部内容
          </div>
        </div>
      </template>

      <!-- 自定义前缀 -->
      <template #prefix>
        <div class="prefix-self-wrap">
          <el-button dark>
            <el-icon><Link /></el-icon>
            <span>自定义前缀</span>
          </el-button>

          <el-button color="#626aef" :dark="true" @click="openCloseHeader">
            打开/关闭头部
          </el-button>
        </div>
      </template>
    </MentionSender>
  </div>
</template>

<style scoped lang="less">
.header-self-wrap {
  display: flex;
  flex-direction: column;
  padding: 16px;
  height: 200px;
  .header-self-title {
    width: 100%;
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
  }
  .header-self-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #626aef;
    font-weight: 600;
  }
}

</style>
```

--------------------------------

### JavaScript Code Block Example

Source: https://element-plus-x.com/zh/components/xmarkdown

A simple JavaScript code snippet demonstrating a console log.

```javascript
console.log('hello world');
```

--------------------------------

### Basic Bubble Usage

Source: https://element-plus-x.com/zh/components/bubble

Demonstrates the simplest way to integrate the Bubble component by providing only the content. This is the most basic setup for displaying a chat message.

```vue
<script setup lang="ts">
const content = ref('hello world !');
</script>

<template>
  <Bubble :content="content" />
</template>
```

--------------------------------

### Custom Header Example

Source: https://element-plus-x.com/zh/components/mentionSender

Demonstrates how to customize the header of the MentionSender component using the #header slot. Includes methods to open and close the header.

```vue
<script setup lang="ts">
import { CircleClose } from '@element-plus/icons-vue';

const senderRef = ref();
const senderValue = ref('');
const showHeaderFlog = ref(false);

onMounted(() => {
  showHeaderFlog.value = true;
  senderRef.value.openHeader();
});

function openCloseHeader() {
  if (!showHeaderFlog.value) {
    senderRef.value.openHeader();
  }
  else {
    senderRef.value.closeHeader();
  }
  showHeaderFlog.value = !showHeaderFlog.value;
}

function closeHeader() {
  showHeaderFlog.value = false;
  senderRef.value.closeHeader();
}
</script>

<template>
  <div
    style="
      display: flex;
      flex-direction: column;
      gap: 12px;
      height: 300px;
      justify-content: space-between;
    "
  >
    <el-button style="width: fit-content" @click="openCloseHeader">
      {{ showHeaderFlog ? '关闭头部' : '打开头部' }}
    </el-button>
    <MentionSender ref="senderRef" v-model="senderValue">
      <template #header>
        <div class="header-self-wrap">
          <div class="header-self-title">
            <div class="header-left">
              💯 欢迎使用 Element Plus X
            </div>
            <div class="header-right">
              <el-button @click.stop="closeHeader">
                <el-icon><CircleClose /></el-icon>
                <span>关闭头部</span>
              </el-button>
            </div>
          </div>
          <div class="header-self-content">
            🦜 自定义头部内容
          </div>
        </div>
      </template>
    </MentionSender>
  </div>
</template>

<style scoped lang="less">
.header-self-wrap {
  display: flex;
  flex-direction: column;
  padding: 16px;
  height: 200px;
  .header-self-title {
    width: 100%;
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
  }
  .header-self-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #626aef;
    font-weight: 600;
  }
}
</style>
```

--------------------------------

### Configure Built-in Shiki Themes for XMarkdown

Source: https://element-plus-x.com/zh/components/xmarkdown

The `themes` attribute allows you to select specific Shiki themes for light and dark modes. This example applies 'andromeeda' for light and 'material-theme-darker' for dark.

```vue
<script setup lang="ts">
const markdown = `
\
console.log('hello world');
\
`;
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <XMarkdown
      :markdown="markdown"
      :themes="{ light: 'andromeeda', dark: 'material-theme-darker' }"
    />
  </div>
</template>

<style scoped lang="less"></style>
```

--------------------------------

### Run Development Server

Source: https://element-plus-x.com/zh/guide/install.html

Execute this command to run your project and verify that components are available.

```bash
npm run dev
```

--------------------------------

### Build and Run Core Components for Debugging

Source: https://element-plus-x.com/zh/guide/develop.html

Locally build the production version of the components and then run the core development server for debugging and previewing.

```bash
# 先本地构建
pnpm build

# 示例项目执行
pnpm run dev:core
```
Tokens:
Raw