fix:完善字典管理功能优化全局组件

src/modules/Comment/emojiPicker.vue

@@ -0,0 +1,84 @@
+<template>
+  <el-popover
+    :placement="placement"
+    :width="width"
+    trigger="click"
+    popper-class="emoji-popover"
+    ref="emojiPopoverRef"
+  >
+    <template #reference>
+      <slot>
+        <el-button link title="emoji" class="default-emoji-trigger">😊</el-button>
+      </slot>
+    </template>
+    <el-scrollbar height="240px">
+      <div class="emoji-container">
+        <span
+          v-for="emoji in emotionList"
+          :key="emoji"
+          class="emoji-item"
+          @click="selectEmoji(emoji)"
+        >
+          {{ emoji }}
+        </span>
+      </div>
+    </el-scrollbar>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+import { useEmoji } from "./useEmoji";
+const { emotionList } = useEmoji();
+const props = defineProps({
+  placement: { type: String, default: "bottom-start" },
+  width: { type: [Number, String], default: "auto" },
+});
+
+defineOptions({ name: "EmojiPicker" });
+
+const emojiPopoverRef = ref(null);
+const emit = defineEmits(["select"]);
+
+// 筛选表情后的事件
+const selectEmoji = (emoji) => {
+  emit("select", emoji);
+  nextTick(() => {
+    if (emojiPopoverRef.value) {
+      emojiPopoverRef.value.hide();
+    }
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.emoji-container {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+  padding: 5px;
+
+  .emoji-item {
+    cursor: pointer;
+    font-size: 20px;
+    padding: 6px;
+    border-radius: 4px;
+    text-align: center;
+    transition: background-color 0.2s ease;
+    user-select: none;
+
+    &:hover {
+      background-color: #f0f2f5;
+      transform: scale(1.1);
+    }
+  }
+
+  :deep(.el-scrollbar__bar.is-horizontal) {
+    display: none;
+  }
+}
+
+.default-emoji-trigger {
+  font-size: 20px;
+  padding: 4px;
+}
+</style>