1+ <script setup lang="ts">
2+ import { useClipboard } from ' @vueuse/core'
3+
4+ const git_emojis = [
5+ { emoji: ' 🎨' , code: ' :art:' , name: ' art' , description: ' 改进代码结构/格式' },
6+ { emoji: ' ⚡️' , code: ' :zap:' , name: ' zap' , description: ' 提升性能' },
7+ { emoji: ' 🔥' , code: ' :fire:' , name: ' fire' , description: ' 删除代码或文件' },
8+ { emoji: ' 🐛' , code: ' :bug:' , name: ' bug' , description: ' 修复 Bug' },
9+ { emoji: ' 🚑️' , code: ' :ambulance:' , name: ' ambulance' , description: ' 关键热修复' },
10+ { emoji: ' ✨' , code: ' :sparkles:' , name: ' sparkles' , description: ' 引入新功能' },
11+ { emoji: ' 📝' , code: ' :memo:' , name: ' memo' , description: ' 添加或更新文档' },
12+ { emoji: ' 🚀' , code: ' :rocket:' , name: ' rocket' , description: ' 部署相关变更' },
13+ { emoji: ' 💄' , code: ' :lipstick:' , name: ' lipstick' , description: ' 添加或更新 UI 和样式文件' },
14+ { emoji: ' 🎉' , code: ' :tada:' , name: ' tada' , description: ' 项目初始化或首次提交' },
15+ { emoji: ' ✅' , code: ' :white_check_mark:' , name: ' white_check_mark' , description: ' 添加、更新或通过测试' },
16+ { emoji: ' 🔒️' , code: ' :lock:' , name: ' lock' , description: ' 修复安全或隐私问题' },
17+ { emoji: ' 🔐' , code: ' :closed_lock_with_key:' , name: ' closed_lock_with_key' , description: ' 添加或更新密钥' },
18+ { emoji: ' 🔖' , code: ' :bookmark:' , name: ' bookmark' , description: ' 发布或版本标签' },
19+ { emoji: ' 🚨' , code: ' :rotating_light:' , name: ' rotating_light' , description: ' 修复编译器或 linter 警告' },
20+ { emoji: ' 🚧' , code: ' :construction:' , name: ' construction' , description: ' 进行中的工作' },
21+ { emoji: ' 💚' , code: ' :green_heart:' , name: ' green_heart' , description: ' 修复 CI 构建' },
22+ { emoji: ' ⬇️' , code: ' :arrow_down:' , name: ' arrow_down' , description: ' 降级依赖' },
23+ { emoji: ' ⬆️' , code: ' :arrow_up:' , name: ' arrow_up' , description: ' 升级依赖' },
24+ { emoji: ' 📌' , code: ' :pushpin:' , name: ' pushpin' , description: ' 将依赖固定到特定版本' },
25+ { emoji: ' 👷' , code: ' :construction_worker:' , name: ' construction_worker' , description: ' 添加或更新 CI 构建系统' },
26+ {
27+ emoji: ' 📈' ,
28+ code: ' :chart_with_upwards_trend:' ,
29+ name: ' chart_with_upwards_trend' ,
30+ description: ' 添加或更新分析或跟踪代码'
31+ },
32+ { emoji: ' ♻️' , code: ' :recycle:' , name: ' recycle' , description: ' 重构代码' },
33+ { emoji: ' ➕' , code: ' :heavy_plus_sign:' , name: ' heavy_plus_sign' , description: ' 添加依赖' },
34+ { emoji: ' ➖' , code: ' :heavy_minus_sign:' , name: ' heavy_minus_sign' , description: ' 移除依赖' },
35+ { emoji: ' 🔧' , code: ' :wrench:' , name: ' wrench' , description: ' 添加或更新配置文件' },
36+ { emoji: ' 🔨' , code: ' :hammer:' , name: ' hammer' , description: ' 添加或更新开发脚本' },
37+ { emoji: ' 🌐' , code: ' :globe_with_meridians:' , name: ' globe_with_meridians' , description: ' 国际化与本地化' },
38+ { emoji: ' ✏️' , code: ' :pencil2:' , name: ' pencil2' , description: ' 修复拼写错误' },
39+ { emoji: ' 💩' , code: ' :poop:' , name: ' poop' , description: ' 编写需要改进的糟糕代码' },
40+ { emoji: ' ⏪️' , code: ' :rewind:' , name: ' rewind' , description: ' 回滚变更' },
41+ { emoji: ' 🔀' , code: ' :twisted_rightwards_arrows:' , name: ' twisted_rightwards_arrows' , description: ' 合并分支' },
42+ { emoji: ' 📦️' , code: ' :package:' , name: ' package' , description: ' 添加或更新编译文件或包' },
43+ { emoji: ' 👽️' , code: ' :alien:' , name: ' alien' , description: ' 因外部 API 变更而更新代码' },
44+ { emoji: ' 🚚' , code: ' :truck:' , name: ' truck' , description: ' 移动或重命名资源(如文件、路径、路由)' },
45+ { emoji: ' 📄' , code: ' :page_facing_up:' , name: ' page_facing_up' , description: ' 添加或更新许可证' },
46+ { emoji: ' 💥' , code: ' :boom:' , name: ' boom' , description: ' 引入破坏性变更' },
47+ { emoji: ' 🍱' , code: ' :bento:' , name: ' bento' , description: ' 添加或更新资源文件' },
48+ { emoji: ' ♿️' , code: ' :wheelchair:' , name: ' wheelchair' , description: ' 改进可访问性' },
49+ { emoji: ' 💡' , code: ' :bulb:' , name: ' bulb' , description: ' 添加或更新源代码注释' },
50+ { emoji: ' 🍻' , code: ' :beers:' , name: ' beers' , description: ' 醉酒状态下编写代码' },
51+ { emoji: ' 💬' , code: ' :speech_balloon:' , name: ' speech_balloon' , description: ' 添加或更新文本和字符串内容' },
52+ { emoji: ' 🗃️' , code: ' :card_file_box:' , name: ' card_file_box' , description: ' 执行数据库相关变更(如迁移、schema)' },
53+ { emoji: ' 🔊' , code: ' :loud_sound:' , name: ' loud_sound' , description: ' 添加或更新日志' },
54+ { emoji: ' 🔇' , code: ' :mute:' , name: ' mute' , description: ' 移除日志' },
55+ { emoji: ' 👥' , code: ' :busts_in_silhouette:' , name: ' busts_in_silhouette' , description: ' 添加或更新贡献者' },
56+ { emoji: ' 🚸' , code: ' :children_crossing:' , name: ' children_crossing' , description: ' 改进用户体验或可用性' },
57+ { emoji: ' 🏗️' , code: ' :building_construction:' , name: ' building_construction' , description: ' 进行架构变更' },
58+ { emoji: ' 📱' , code: ' :iphone:' , name: ' iphone' , description: ' 处理响应式设计' },
59+ { emoji: ' 🤡' , code: ' :clown_face:' , name: ' clown_face' , description: ' 模拟或 mock 事物' },
60+ { emoji: ' 🥚' , code: ' :egg:' , name: ' egg' , description: ' 添加或更新彩蛋' },
61+ { emoji: ' 🙈' , code: ' :see_no_evil:' , name: ' see_no_evil' , description: ' 添加或更新 .gitignore 文件' },
62+ { emoji: ' 📸' , code: ' :camera_flash:' , name: ' camera_flash' , description: ' 添加或更新快照测试' },
63+ { emoji: ' ⚗️' , code: ' :alembic:' , name: ' alembic' , description: ' 进行实验性功能' },
64+ { emoji: ' 🔍️' , code: ' :mag:' , name: ' mag' , description: ' 改进 SEO' },
65+ { emoji: ' 🏷️' , code: ' :label:' , name: ' label' , description: ' 添加或更新类型定义' },
66+ { emoji: ' 🌱' , code: ' :seedling:' , name: ' seedling' , description: ' 添加或更新种子数据' },
67+ {
68+ emoji: ' 🚩' ,
69+ code: ' :triangular_flag_on_post:' ,
70+ name: ' triangular_flag_on_post' ,
71+ description: ' 添加、更新或移除功能开关'
72+ },
73+ { emoji: ' 🥅' , code: ' :goal_net:' , name: ' goal_net' , description: ' 捕获错误(错误处理)' },
74+ { emoji: ' 💫' , code: ' :dizzy:' , name: ' dizzy' , description: ' 添加或更新动画和过渡效果' },
75+ { emoji: ' 🗑️' , code: ' :wastebasket:' , name: ' wastebasket' , description: ' 弃用需要后续清理的代码' },
76+ { emoji: ' 🛂' , code: ' :passport_control:' , name: ' passport_control' , description: ' 处理授权、角色和权限相关代码' },
77+ { emoji: ' 🩹' , code: ' :adhesive_bandage:' , name: ' adhesive_bandage' , description: ' 对非关键问题的简单修复' },
78+ { emoji: ' 🧐' , code: ' :monocle_face:' , name: ' monocle_face' , description: ' 数据探索或检查' },
79+ { emoji: ' ⚰️' , code: ' :coffin:' , name: ' coffin' , description: ' 移除死代码' },
80+ { emoji: ' 🧪' , code: ' :test_tube:' , name: ' test_tube' , description: ' 添加一个故意失败的测试' },
81+ { emoji: ' 👔' , code: ' :necktie:' , name: ' necktie' , description: ' 添加或更新业务逻辑' },
82+ { emoji: ' 🩺' , code: ' :stethoscope:' , name: ' stethoscope' , description: ' 添加或更新健康检查' },
83+ { emoji: ' 🧑💻' , code: ' :technologist:' , name: ' technologist' , description: ' 改进开发者体验' },
84+ { emoji: ' 💸' , code: ' :money_with_wings:' , name: ' money_with_wings' , description: ' 添加赞助或金钱相关基础设施' },
85+ { emoji: ' 🧵' , code: ' :thread:' , name: ' thread' , description: ' 添加或更新多线程或并发相关代码' },
86+ { emoji: ' 🦺' , code: ' :safety_vest:' , name: ' safety_vest' , description: ' 添加或更新验证相关代码' },
87+ { emoji: ' ✈️' , code: ' :airplane:' , name: ' airplane' , description: ' 改进离线支持' },
88+ { emoji: ' 🦖' , code: ' :t-rex:' , name: ' t-rex' , description: ' 添加向后兼容代码' },
89+ ]
90+
91+ import { computed } from ' vue'
92+
93+ const list = computed (() => git_emojis .map (item => ({
94+ name: item .name ,
95+ desc: item .description ,
96+ code: item .code ,
97+ emoji: item .emoji ,
98+ })))
99+
100+ const { copy, copied } = useClipboard ({ legacy: true })
101+ </script >
102+
103+ <template >
104+ <div class =" gitmoji-wrapper" >
105+ <div v-for =" item in list" :key =" item.code" class =" gitmoji-item" >
106+ <div class =" emoji" >
107+ <span >{{ item.emoji }}</span >
108+ </div >
109+ <div class =" info" >
110+ <p >{{ item.code }}</p >
111+ <p >{{ item.desc }}</p >
112+ </div >
113+ <button
114+ type =" button"
115+ class =" gitmoji-copy"
116+ :class =" { copied }"
117+ :aria-label =" copied ? '已复制' : '复制'"
118+ :title =" copied ? '已复制' : '复制'"
119+ @click =" copy(item.code)"
120+ >
121+ <span class =" vpi-gitmoji-copy" />
122+ <span class =" visually-hidden" >复制</span >
123+ </button >
124+ </div >
125+ </div >
126+ </template >
127+
128+ <!-- 样式部分保持不变 -->
129+ <style >
130+ .gitmoji-item {
131+ position : relative ;
132+ flex : 1 2 ;
133+ display : flex ;
134+ border : 1px solid var (--vp-c-divider );
135+ border-radius : 8px ;
136+ background-color : var (--vp-c-bg );
137+ box-shadow : 0 0 0 0 transparent ;
138+ transition : box-shadow var (--vp-t-color );
139+ margin-bottom : 16px ;
140+ overflow : hidden ;
141+ }
142+
143+ .gitmoji-item :hover {
144+ box-shadow : var (--vp-shadow-2 );
145+ }
146+
147+ @media (min-width : 768px ) {
148+ .gitmoji-wrapper {
149+ display : grid ;
150+ grid-template-columns : repeat (2 , 1fr );
151+ gap : 16px ;
152+ }
153+
154+ .gitmoji-item {
155+ margin-bottom : 0 ;
156+ }
157+ }
158+
159+ .gitmoji-item .emoji {
160+ display : flex ;
161+ align-items : center ;
162+ justify-content : center ;
163+ font-size : 32px ;
164+ width : 64px ;
165+ }
166+
167+ .gitmoji-item .info {
168+ padding : 16px 16px 16px 0 ;
169+ }
170+
171+ .gitmoji-item .info p {
172+ margin : 0 ;
173+ }
174+
175+ .gitmoji-item .info p :first-child {
176+ font-size : 14px ;
177+ }
178+
179+ .gitmoji-item .info p :last-child {
180+ font-size : 16px ;
181+ color : var (--vp-c-text-2 );
182+ line-height : 22px ;
183+ }
184+
185+ .gitmoji-item .gitmoji-copy {
186+ position : absolute ;
187+ top : 0 ;
188+ right : 0 ;
189+ border : none ;
190+ background-color : transparent ;
191+ color : var (--vp-c-text-2 );
192+ padding : 8px ;
193+ cursor : pointer ;
194+ line-height : 1 ;
195+ opacity : 0 ;
196+ border-bottom-left-radius : 8px ;
197+ transition : opacity var (--vp-t-color ), color var (--vp-t-color ), background-color var (--vp-t-color );
198+ }
199+
200+ .gitmoji-item :hover .gitmoji-copy {
201+ opacity : 1 ;
202+ }
203+
204+ .gitmoji-item .gitmoji-copy :hover {
205+ color : var (--vp-c-text-1 );
206+ background-color : var (--vp-c-bg-soft );
207+ }
208+
209+ .vpi-gitmoji-copy {
210+ width : 2em ;
211+ height : 2em ;
212+ --icon : var (--code-copy-icon );
213+ }
214+
215+ .gitmoji-item .gitmoji-copy.copied .vpi-gitmoji-copy {
216+ --icon : var (--code-copied-icon );
217+ }
218+ </style >
0 commit comments