docs: add CONTRIBUTING.md (#586)

* docs(contributing): 更新贡献指南
相关issuse: https://github.com/hakadao/BewlyBewly/issues/164

* docs(CONTRIBUTING): Update contributing guidelines formatting and language

* feat: add icons to `NotificationsPop` &&  `MorePop` (#580)

* feat: `MorePop` item icon and cache `MomentPop`

* chore: revert cache MomentPop

* feat: `NotificationsPop` item icon

* chore(pkg): update deps

* style: Update icons in MorePop and NotificationsPop components

---------

Co-authored-by: starknt <1431880400@qq.com>

* docs: Update CONTRIBUTING.md && support other languages

* docs: update other languages link

* docs: update readme

---------

Co-authored-by: pengyunfei <pengyunfei@360.cn>
Co-authored-by: starknt <1431880400@qq.com>

src/components/TopBar/components/MorePop.vue

@@ -5,23 +5,23 @@ import { getUserID, isHomePage } from '~/utils/main'
 const { t } = useI18n()
 
 const list = [
-  { name: t('topbar.notifications'), url: '//message.bilibili.com' },
-  { name: t('topbar.moments'), url: '//t.bilibili.com/' },
-  { name: t('topbar.favorites'), url: `//space.bilibili.com/${getUserID() ?? ''}/favlist` },
-  { name: t('topbar.history'), url: '//www.bilibili.com/account/history' },
-  { name: t('topbar.watch_later'), url: '//www.bilibili.com/watchlater/#/list' },
-  { name: t('topbar.creative_center'), url: '//member.bilibili.com/platform/home' },
+  { name: t('topbar.notifications'), url: '//message.bilibili.com', icon: 'i-mingcute:notification-line' },
+  { name: t('topbar.moments'), url: '//t.bilibili.com/', icon: 'i-tabler:windmill' },
+  { name: t('topbar.favorites'), url: `//space.bilibili.com/${getUserID() ?? ''}/favlist`, icon: 'i-mingcute:star-line' },
+  { name: t('topbar.history'), url: '//www.bilibili.com/account/history', icon: 'i-mingcute:time-line' },
+  { name: t('topbar.watch_later'), url: '//www.bilibili.com/watchlater/#/list', icon: 'i-mingcute:carplay-line' },
+  { name: t('topbar.creative_center'), url: '//member.bilibili.com/platform/home', icon: 'i-mingcute:bulb-line' },
 ]
 </script>
 
 <template>
   <div
+    style="box-shadow: var(--bew-shadow-3)"
     bg="$bew-elevated-solid-1"
-    w="170px"
+    w="180px"
     p="4"
     rounded="$bew-radius"
     flex="~ col"
-    style="box-shadow: var(--bew-shadow-3)"
   >
     <a
       v-for="item in list"
@@ -35,11 +35,10 @@ const list = [
       transition="all duration-300"
       m="b-1 last:b-0"
       flex="~"
-      justify="between"
       items="center"
-      h="35px"
     >
-      {{ item.name }}
+      <i :class="item.icon" class="mr-4" />
+      <span class="flex-1">{{ item.name }}</span>
     </a>
   </div>
 </template>

src/components/TopBar/components/NotificationsPop.vue

@@ -10,26 +10,31 @@ const list = reactive([
     name: t('topbar.noti_dropdown.replys'),
     url: 'https://message.bilibili.com/#/reply',
     unreadCount: 0,
+    icon: 'i-mingcute:share-forward-line',
   },
   {
     name: t('topbar.noti_dropdown.mentions'),
     url: 'https://message.bilibili.com/#/at',
     unreadCount: 0,
+    icon: 'i-mingcute:at-line',
   },
   {
     name: t('topbar.noti_dropdown.likes'),
     url: 'https://message.bilibili.com/#/love',
     unreadCount: 0,
+    icon: 'i-mingcute:thumb-up-2-line',
   },
   {
     name: t('topbar.noti_dropdown.messages'),
     url: 'https://message.bilibili.com/#/system',
     unreadCount: 0,
+    icon: 'i-mingcute:mail-line',
   },
   {
     name: t('topbar.noti_dropdown.chats'),
     url: 'https://message.bilibili.com/#/whisper',
     unreadCount: 0,
+    icon: 'i-mingcute:message-3-line',
   },
 ],
 )
@@ -92,14 +97,12 @@ function getUnreadMessageCount() {
       transition="all duration-300"
       m="b-1 last:b-0"
       flex="~"
-      justify="between"
       items="center"
       h="35px"
     >
-      {{ item.name }}
-      <template
-        v-if="item.unreadCount > 0"
-      >
+      <i :class="item.icon" />
+      <span class="flex-1 ml-2 mr-1">{{ item.name }}</span>
+      <template v-if="item.unreadCount > 0">
         <div
           bg="$bew-theme-color"
           rounded="full"
@@ -108,7 +111,7 @@ function getUnreadMessageCount() {
           min-w="21px"
           min-h="21px"
         >
-          {{ item.unreadCount > 999 ? '999+' : item.unreadCount }}
+          {{ item.unreadCount > 99 ? '99+' : item.unreadCount }}
         </div>
       </template>
     </a>