refactor: ♻️ [comment] 添加相对时间属性(#I5PWF6)

closed #I5PWF6

demo/assets/comment.ts

@@ -11,7 +11,7 @@ const comment = [
       '缘生缘灭，缘起缘落，我在看别人的故事，别人何尝不是在看我的故事?别人在演绎人生，我又何尝不是在这场戏里?谁的眼神沧桑了谁?我的眼神，只是沧桑了自己[喝酒]',
     likes: 2,
     contentImg: '/static/img/program.gif, /static/img/normal.webp',
-    createTime: '1分钟前',
+    createTime: '2023-04-30 16:22',
     user: {
       username: '落🤍尘',
       avatar: 'https://static.juzicon.com/avatars/avatar-200602130320-HMR2.jpeg?x-oss-process=image/resize,w_100',
@@ -26,7 +26,7 @@ const comment = [
     address: '来自苏州',
     content: '知道在学校为什么感觉这么困吗？[大笑2]因为学校，是梦开始的地方。[脱单doge]',
     likes: 11,
-    createTime: '1天前',
+    createTime: '2023-04-28 09:00',
     user: {
       username: '悟二空',
       avatar: 'https://static.juzicon.com/user/avatar-bf22291e-ea5c-4280-850d-88bc288fcf5d-220408002256-ZBQQ.jpeg',
@@ -43,7 +43,7 @@ const comment = [
           address: '来自重庆',
           content: '说的对[大笑2]，所以，综上所述，上课睡觉不怪我呀💤',
           likes: 3,
-          createTime: '1分钟前',
+          createTime: '2023-04-28 10:00',
           user: {
             username: '别扰我清梦*ぁ',
             avatar:
@@ -60,7 +60,7 @@ const comment = [
             '回复 <span style="color: var(--u-color-success-dark-2);">@别扰我清梦*ぁ:</span> 看完打了一个哈切。。。会传染。。。[委屈]',
           address: '来自广州',
           likes: 9,
-          createTime: '1天前',
+          createTime: '2023-04-28 10:00',
           user: {
             username: 'Blizzard',
             avatar:
@@ -79,7 +79,7 @@ const comment = [
     address: '来自北京',
     content: '人的一切痛苦，本质上都是对自己的无能的愤怒。',
     likes: 34116,
-    createTime: '2分钟前',
+    createTime: '2023-04-27 09:00',
     user: {
       username: '半个句号',
       avatar:
@@ -97,7 +97,7 @@ const comment = [
           address: '来自成都',
           content: '人生就像愤怒的小鸟，当你失败时，总有几只猪在笑。',
           likes: 7,
-          createTime: '1天前',
+          createTime: '2023-04-28 09:00',
           user: {
             username: '陆呈洋',
             avatar:
@@ -113,7 +113,7 @@ const comment = [
           address: '来自杭州',
           content: '深思熟虑的结果往往就是说不清楚。',
           likes: 3,
-          createTime: '2天前',
+          createTime: '2023-04-28 10:00',
           user: {
             username: '哑谜',
             avatar:
@@ -133,7 +133,7 @@ const comment = [
     content:
       '鱼说：我时时刻刻睁开眼睛，就是为了能让你永远在我眼中！<br>水说：我时时刻刻流淌不息，就是为了能永远把你拥抱！！<br>锅说：都快熟了，还这么贫。',
     likes: 13,
-    createTime: '2天前',
+    createTime: '2023-03-28 13:00',
     user: {
       username: 'Blizzard1',
       avatar:
@@ -151,7 +151,7 @@ const comment = [
           address: '来自北京',
           content: '鱼对水说，你看不到我流泪，因为我在水中。水对鱼说，我看到你悲伤，因为你在我心中。[呲牙]',
           likes: 36,
-          createTime: '1分钟前',
+          createTime: '2023-04-01 13:00',
           user: {
             username: '过往~',
             avatar:
@@ -167,7 +167,7 @@ const comment = [
           address: '来自杭州',
           content: '约束条件变了，原来的收益，一下子都变为成本。生命如果架在锅上，成本自然也就很高了[tv_微笑]',
           likes: 16,
-          createTime: '1天前',
+          createTime: '2023-04-01 15:00',
           user: {
             username: 'Blizzard1',
             avatar:
@@ -189,7 +189,7 @@ const comment = [
     content:
       '鱼说：我时时刻刻睁开眼睛，就是为了能让你永远在我眼中！<br>水说：我时时刻刻流淌不息，就是为了能永远把你拥抱！！<br>锅说：都快熟了，还这么贫。',
     likes: 13,
-    createTime: '2天前',
+    createTime: '2023-04-29 14:00',
     user: {
       username: 'Blizzard1',
       avatar:
@@ -206,7 +206,7 @@ const comment = [
     content:
       '鱼说：我时时刻刻睁开眼睛，就是为了能让你永远在我眼中！<br>水说：我时时刻刻流淌不息，就是为了能永远把你拥抱！！<br>锅说：都快熟了，还这么贫。',
     likes: 13,
-    createTime: '2天前',
+    createTime: '2023-04-29 17:00',
     user: {
       username: 'Blizzard1',
       avatar:
@@ -227,7 +227,7 @@ export const reply = {
       address: '来自成都',
       content: '人生就像愤怒的小鸟，当你失败时，总有几只猪在笑。',
       likes: 7,
-      createTime: '1天前',
+      createTime: '2023-04-29 14:00',
       user: {
         username: '陆呈洋',
         avatar:
@@ -243,7 +243,7 @@ export const reply = {
       address: '来自杭州',
       content: '深思熟虑的结果往往就是说不清楚。',
       likes: 3,
-      createTime: '2天前',
+      createTime: '2023-04-29 15:00',
       user: {
         username: '哑谜',
         avatar:
@@ -259,7 +259,7 @@ export const reply = {
       level: 2,
       address: '来自深圳',
       content: '当我跨过沉沦的一切，向着永恒开战的时候，你是我的军旗。',
-      createTime: '5天前',
+      createTime: '2023-04-29 17:00',
       user: {
         username: 'Mia',
         avatar:
@@ -275,7 +275,7 @@ export const reply = {
       address: '来自西安',
       likes: 34,
       content: '不要由于别人不能成为我们所希望的人而愤怒，因为我们自己也难以成为自己所希望的人。',
-      createTime: '1天前',
+      createTime: '2023-04-29 14:00',
       user: {
         username: 'poli301',
         avatar:
@@ -296,7 +296,7 @@ export const reply = {
       likes: 32,
       address: '来自武汉',
       content: '世上莫名其妙走霉运的人多的是，都是一边为命运生气，一边化愤怒为力量地活着。',
-      createTime: '11小时前'
+      createTime: '2023-04-29 14:00'
     },
     {
       id: '36',
@@ -305,7 +305,7 @@ export const reply = {
       likes: 21,
       address: '来自上海',
       content: '这世上所有的不利情况，都是当事者能力不足造成的',
-      createTime: '10小时前',
+      createTime: '2023-04-29 14:00',
       user: {
         username: '十三',
         avatar:
@@ -321,7 +321,7 @@ export const reply = {
       likes: 18,
       address: '来自广州',
       content: ' 绝望自有绝望的力量，就像希望自有希望的无能。',
-      createTime: '9小时前',
+      createTime: '2023-04-30 14:00',
       user: {
         username: 'D.z.H****',
         avatar:
@@ -337,7 +337,7 @@ export const reply = {
       likes: 17,
       address: '来自重庆',
       content: ' 无论这个世界对你怎样，都请你一如既往的努力，勇敢，充满希望。',
-      createTime: '8小时前',
+      createTime: '2023-04-30 15:00',
       user: {
         username: '繁星Cong2',
         avatar:

demo/components/comment.vue

@@ -7,6 +7,7 @@
       @reply-page="replyPage"
       @show-info="showInfo"
       @operate="operate"
+      relative-time
       upload
       page
     >

packages/src/components/comment/key.ts

@@ -25,6 +25,7 @@ export const InjectInputBox: InjectionKey<InjectInputBoxApi> = Symbol()
 // 内容盒子
 export interface InjectContentBoxApi {
   user: Ref<UserApi>
+  relativeTime: boolean
   like: (id: string) => void
   showInfo: (id: string, finish: Function) => void
 }

packages/src/components/comment/src/comment.vue

@@ -147,6 +147,7 @@ const like = (id: string) => {
 const contentBoxParam: InjectContentBoxApi = {
   user: user,
   like: like,
+  relativeTime: isNull(props.relativeTime, false),
   showInfo: (uid, finish) => emit('showInfo', uid, finish)
 }
 provide(InjectContentBox, contentBoxParam)

packages/src/components/comment/src/content-box.vue

@@ -27,7 +27,7 @@
           </UserCard>
           <!-- <span class="author-badge-text">（作者）</span> -->
           <span class="address" style="color: #939393; font-size: 12px">&nbsp;&nbsp;{{ data.address }}</span>
-          <time class="time">{{ data.createTime }}</time>
+          <time class="time">{{ relativeTime ? dayjs(data.createTime).fromNow() : data.createTime }}</time>
         </div>
         <div class="content">
           <u-fold unfold>
@@ -128,7 +128,7 @@ import type { InputBoxApi } from './tools/input-box.vue'
 import { ElAvatar } from '~/element'
 import { useEmojiParse, useLevel } from '~/hooks'
 import Operation from './tools/operation.vue'
-import { str, ElImage, isEmpty } from '~/index'
+import { str, ElImage, isEmpty, dayjs } from '~/index'
 import UserCard from './tools/user-card.vue'
 import { InjectContentBox, InjectContentBoxApi, InjectSlots } from '../key'
 
@@ -154,7 +154,7 @@ const imgList = computed(() => {
 })
 
 const { allEmoji } = inject(InjectionEmojiApi) as EmojiApi
-const { like, user } = inject(InjectContentBox) as InjectContentBoxApi
+const { like, user, relativeTime } = inject(InjectContentBox) as InjectContentBoxApi
 
 //点击回复按钮打开输入框
 function reply() {