UniEmoji/index.html at main · hellodigua/UniEmoji · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>UniEmoji</title>
    <link rel="stylesheet" href="./assets/style.css" />
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>UniEmoji</h1>
        <p>统一的 emoji 协议，用同一套语义替换任何表情。</p>
        <p>
          模型或用户给出受控 Unicode，显示端按 40 个稳定语义换成当前表情包。下面这些图来自贴吧、B 站、抖音、QQ、小红书、微博、知乎，是素材库和候选包，不是终局形态。
        </p>
        <p>
          <a href="PROTOCOL.md">协议说明</a>
          ·
          <a href="EMOJI_KEYS.md">40 个语义 key</a>
        </p>
        <div class="stats" id="stats">
          <div class="stat-card">
            <div class="stat-number" id="totalEmojis">0</div>
            <div class="stat-label">素材图</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">7</div>
            <div class="stat-label">平台</div>
          </div>
        </div>
      </div>

      <div class="search-container">
        <input
          type="text"
          class="search-input"
          placeholder="搜索素材..."
          id="searchInput"
        />
      </div>

      <div id="platformsContainer">
        <div class="loading">正在加载素材...</div>
      </div>
    </div>

    <script>
      let emojiData = [];
      let filteredData = [];
      let currentOrder = [];

      const ORDER_STORAGE_KEY = "emoji_platform_order";

      function loadStoredOrder(validNames) {
        try {
          const raw = localStorage.getItem(ORDER_STORAGE_KEY);
          if (!raw) return null;
          const arr = JSON.parse(raw);
          if (!Array.isArray(arr)) return null;
          const validSet = new Set(validNames);
          const filtered = arr.filter((name) => validSet.has(name));
          const missing = validNames.filter((name) => !filtered.includes(name));
          return [...filtered, ...missing];
        } catch (e) {
          return null;
        }
      }

      function saveOrder() {
        try {
          localStorage.setItem(ORDER_STORAGE_KEY, JSON.stringify(currentOrder));
        } catch (e) {}
      }

      // 平台配置
      const platformConfig = {
        tieba: { icon: "贴", class: "tieba" },
        zhihu: { icon: "知", class: "zhihu" },
        xiaohongshu: { icon: "红", class: "xiaohongshu" },
        douyin: { icon: "抖", class: "douyin" },
        qq: { icon: "Q", class: "qq" },
        bilibili: { icon: "B", class: "bilibili" },
        weibo: { icon: "微", class: "weibo" },
      };

      // 加载表情包数据
      async function loadEmojiData() {
        try {
          const response = await fetch("emoji.json");
          emojiData = await response.json();
          filteredData = [...emojiData];
          const names = emojiData.map((p) => p.platform);
          const stored = loadStoredOrder(names);
          currentOrder = stored ?? names.slice();
          applyOrdering();
          renderPlatforms();
          updateStats();
        } catch (error) {
          console.error("加载数据失败:", error);
          document.getElementById("platformsContainer").innerHTML =
            '<div class="loading">❌ 加载失败，请确保 emoji.json 文件存在</div>';
        }
      }

      // 渲染平台
      function renderPlatforms() {
        const container = document.getElementById("platformsContainer");

        if (filteredData.length === 0) {
          container.innerHTML =
            '<div class="loading">😢 没有找到匹配的表情包</div>';
          return;
        }

        container.innerHTML = filteredData
          .map((platform, idx) => {
            const config = platformConfig[platform.platform] || {
              icon: "?",
              class: "default",
            };
            const showMoveUp = idx > 0; // 最顶部的不显示按钮

            return `
                    <div class="platform-section">
                        <div class="platform-header">
                            <div class="platform-title">
                                <div class="platform-icon ${config.class}">${
              config.icon
            }</div>
                                ${platform.platform}
                            </div>
                            <div class="platform-actions">
                                ${
                                  showMoveUp
                                    ? `<button class="pin-button" title="上移一位" onclick="moveUp('${platform.platform}')">上移</button>`
                                    : ""
                                }
                                <div class="platform-count">${
                                  platform.emojis.length
                                } 个表情</div>
                            </div>
                        </div>
                        <div class="emoji-grid">
                            ${platform.emojis
                              .map(
                                (emoji, index) => `
                                <div class="emoji-item" onclick="copyImageToClipboard('${
                                  emoji.url
                                }')">
                                    <img src="${emoji.url}" alt="${
                                  emoji.name || "表情"
                                }" class="emoji-image"
                                         onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iOCIgZmlsbD0iI0Y1RjVGNSIvPgo8dGV4dCB4PSIzMCIgeT0iMzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIyNCIgZmlsbD0iIzk5OTk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+8J+YvjwvdGV4dD4KPHN2Zz4K'">
                                    <div class="emoji-name">${
                                      emoji.name || `表情 ${index + 1}`
                                    }</div>
                                </div>
                            `
                              )
                              .join("")}
                        </div>
                    </div>
                `;
          })
          .join("");
      }

      // 更新统计信息
      function updateStats() {
        const totalEmojis = filteredData.reduce(
          (sum, platform) => sum + platform.emojis.length,
          0
        );
        document.getElementById("totalEmojis").textContent = totalEmojis;
      }

      // 按自定义顺序排序
      function applyOrdering() {
        const orderIndex = new Map(currentOrder.map((n, i) => [n, i]));
        filteredData.sort(
          (a, b) =>
            (orderIndex.get(a.platform) ?? 0) -
            (orderIndex.get(b.platform) ?? 0)
        );
      }

      // 搜索功能
      function filterEmojis(searchTerm) {
        if (!searchTerm.trim()) {
          filteredData = [...emojiData];
        } else {
          filteredData = emojiData
            .map((platform) => ({
              ...platform,
              emojis: platform.emojis.filter(
                (emoji) =>
                  (emoji.name || "")
                    .toLowerCase()
                    .includes(searchTerm.toLowerCase()) ||
                  platform.platform
                    .toLowerCase()
                    .includes(searchTerm.toLowerCase())
              ),
            }))
            .filter((platform) => platform.emojis.length > 0);
        }

        applyOrdering();
        renderPlatforms();
        updateStats();
      }

      function moveUp(name) {
        const idx = currentOrder.indexOf(name);
        if (idx > 0) {
          const tmp = currentOrder[idx - 1];
          currentOrder[idx - 1] = currentOrder[idx];
          currentOrder[idx] = tmp;
          saveOrder();
          applyOrdering();
          renderPlatforms();
          updateStats();
        }
      }

      // 复制图片到剪贴板
      async function copyImageToClipboard(imageSrc) {
        try {
          // 创建一个临时的 canvas 来处理图片
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          const img = new Image();

          // 设置跨域属性
          img.crossOrigin = "anonymous";

          return new Promise((resolve, reject) => {
            img.onload = async () => {
              try {
                // 设置 canvas 尺寸
                canvas.width = img.width;
                canvas.height = img.height;

                // 绘制图片到 canvas
                ctx.drawImage(img, 0, 0);

                // 将 canvas 转换为 blob
                canvas.toBlob(async (blob) => {
                  try {
                    // 使用 Clipboard API 复制图片
                    await navigator.clipboard.write([
                      new ClipboardItem({
                        [blob.type]: blob,
                      }),
                    ]);

                    showToast("✅ 图片已复制到剪贴板！", "#4CAF50");
                    resolve();
                  } catch (err) {
                    // 如果复制图片失败，回退到复制路径
                    console.warn("复制图片失败，回退到复制路径:", err);
                    await fallbackCopyText(imageSrc);
                    resolve();
                  }
                }, "image/png");
              } catch (err) {
                console.error("处理图片失败:", err);
                await fallbackCopyText(imageSrc);
                resolve();
              }
            };

            img.onerror = async () => {
              console.error("加载图片失败:", imageSrc);
              await fallbackCopyText(imageSrc);
              resolve();
            };

            // 开始加载图片
            img.src = imageSrc;
          });
        } catch (err) {
          console.error("复制功能不支持:", err);
          await fallbackCopyText(imageSrc);
        }
      }

      // 回退方案：复制文本路径
      async function fallbackCopyText(text) {
        try {
          await navigator.clipboard.writeText(text);
          showToast("📋 图片路径已复制到剪贴板", "#FF9800");
        } catch (err) {
          console.error("复制路径也失败了:", err);
          showToast("❌ 复制失败，请手动保存图片", "#f44336");
        }
      }

      // 显示提示消息
      function showToast(message, backgroundColor = "#4CAF50") {
        const toast = document.createElement("div");
        toast.textContent = message;
        toast.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: ${backgroundColor};
                color: white;
                padding: 12px 20px;
                border-radius: 8px;
                z-index: 1000;
                font-size: 14px;
                font-weight: 500;
                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
                animation: fadeInOut 3s ease-in-out;
            `;
        document.body.appendChild(toast);
        setTimeout(() => {
          if (document.body.contains(toast)) {
            document.body.removeChild(toast);
          }
        }, 3000);
      }

      // 事件监听
      document.getElementById("searchInput").addEventListener("input", (e) => {
        filterEmojis(e.target.value);
      });

      // 初始化
      loadEmojiData();
    </script>
  </body>
</html>