# 表情包案例

## **表情包案例**

<figure><img src="https://cdn.mufy.ai/images/a564bafd-7e75-434f-846f-68d1ef130c00/public" alt=""><figcaption></figcaption></figure>

实现在对话过程中，稳定生成Char表情包。

{% hint style="info" %}
原理：

* 使用正则创建中的工具模式-符号匹配模式
* 采用固定符号包裹表情包名称例如使用中括号：\[]，如下图所示
* 括号中的信息代表着表情包的名字
* 代码预先写好表情包名称和图片链接的映射
* 当传入某个名称时，正则匹配成功，并展示表情包图片<br>
  {% endhint %}

<figure><img src="https://cdn.mufy.ai/images/4e535534-7097-4e64-88ef-7f2af101ab00/public" alt=""><figcaption></figcaption></figure>

#### 目标字符

"使用符号匹配模式"，填写中括号即可

```
[表情包名称]
```

#### 替换字符串

<details>

<summary><mark style="color:$primary;">代码过长，点击展开/收起</mark></summary>

````html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>表情包展示组件</title>
    <style>
        .meme-image {
            border-radius: 1.25rem;
            object-fit: cover;
            /* 使用 transition 确保淡入效果平滑 */
            transition: opacity 0.4s ease-in-out;
        }
        .meme-wrapper {
            display: inline-block;
        }
    </style>
</head>
<body>

    <div class="meme-wrapper">
        <!-- 初始设为 opacity-0，通过 JS 控制显隐 -->
        <img 
            id="memeDisplay" 
            alt="表情包" 
            class="meme-image w-48 h-48 shadow-lg border-2 border-white opacity-0"
        >
    </div>

    <script>
        // 1. 表情包链接映射
        const MEME_MAP = {
            '开心': 'https://cdn.mufy.ai/images/bcd519fc-3e9a-43dd-2bec-0426750e3e00/public',
            '愤怒': 'https://cdn.mufy.ai/images/362712d1-92d3-4690-98d4-cd30d52ab000/public',
            '无语': 'https://cdn.mufy.ai/images/71ae5d8a-b7e5-46f5-28c5-8a3453d0f500/public',
            '震惊': 'https://cdn.mufy.ai/images/240ee01c-c11f-44a5-260e-14872d0da100/public'
        };

        // 2. 接收输入值 $1
        const inputValue = "$1";

        function displayMeme() {
            const img = document.getElementById('memeDisplay');
            // 如果 $1 未被正确替换，或者找不到映射，默认显示“开心”
            const finalKey = MEME_MAP[inputValue] ? inputValue : '开心';
            const targetSrc = MEME_MAP[finalKey];

            // 处理显示逻辑的函数
            const showImage = () => {
                img.classList.remove('opacity-0');
                img.classList.add('opacity-100');
            };

            // 异常处理：加载失败时
            img.onerror = () => {
                img.src = "https://via.placeholder.com/192?text=Load+Error";
                showImage();
            };

            // 加载成功时
            img.onload = showImage;

            // 开始加载图片
            img.src = targetSrc;

            // 针对部分浏览器缓存导致 onload 不触发的处理
            if (img.complete) {
                showImage();
            }
        }

        // 确保 DOM 加载完成后执行
        if (document.readyState === 'complete') {
            displayMeme();
        } else {
            window.addEventListener('load', displayMeme);
        }
    </script>
</body>
</html>
```
````

</details>

#### 输出设定

```
mumu在每次输出的结尾会生成有mumu状态的表情包，
采用以下格式：[开心]、[愤怒]、[无语]、[震惊]
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mufy.ai/documentation/guan-yu-zheng-ze/you-qu-an-li/biao-qing-bao-an-li.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
