diff --git a/web_src/vuepages/langs/config/en-US.js b/web_src/vuepages/langs/config/en-US.js
index d51b620ba..c715b979e 100644
--- a/web_src/vuepages/langs/config/en-US.js
+++ b/web_src/vuepages/langs/config/en-US.js
@@ -312,7 +312,29 @@ const en = {
     star: 'Star',
     fork: 'Fork',
     noReposfound: 'No matching repositories found.',
-  }
+  },
+  timeObj: {
+    ago: '{msg} ago',
+    from_now: '{msg} from now',
+    now: 'now',
+    future: 'future',
+    '1s': '1 second',
+    '1m': '1 minute',
+    '1h': '1 hour',
+    '1d': '1 day',
+    '1w': '1 week',
+    '1mon': '1 month',
+    '1y': '1 year',
+    seconds: '{msg} seconds',
+    minutes: '{msg} minutes',
+    hours: '{msg} hours',
+    days: '{msg} days',
+    weeks: '{msg} weeks',
+    months: '{msg} months',
+    years: '{msg} years',
+    raw_seconds: 'seconds',
+    raw_minutes: 'minutes',
+  },
 }
 
 export default en;
diff --git a/web_src/vuepages/langs/config/zh-CN.js b/web_src/vuepages/langs/config/zh-CN.js
index 589afd98f..deec22676 100644
--- a/web_src/vuepages/langs/config/zh-CN.js
+++ b/web_src/vuepages/langs/config/zh-CN.js
@@ -220,7 +220,7 @@ const zh = {
     graphicMemory: "显存",
     memory: "内存",
     sharedMemory: "共享内存",
-    tips:'本次新建的调试任务会放在您名下项目openi-notebook中，如果没有该项目系统会自动新建一个。'
+    tips: '本次新建的调试任务会放在您名下项目openi-notebook中，如果没有该项目系统会自动新建一个。'
   },
   tranformImageFailed: '图片脱敏失败',
   originPicture: '原始图片',
@@ -330,6 +330,28 @@ const zh = {
     fork: '派生',
     noReposfound: '未找到匹配的项目。',
   },
+  timeObj: {
+    ago: '{msg}前',
+    from_now: '{msg} 之后',
+    now: '现在',
+    future: '将来',
+    '1s': '1 秒',
+    '1m': '1 分钟',
+    '1h': '1 小时',
+    '1d': '1 天',
+    '1w': '1 周',
+    '1mon': '1 个月',
+    '1y': '1 年',
+    seconds: '{msg} 秒',
+    minutes: '{msg} 分钟',
+    hours: '{msg} 小时',
+    days: '{msg} 天',
+    weeks: '{msg} 周',
+    months: '{msg} 个月',
+    years: '{msg} 年',
+    raw_seconds: '秒',
+    raw_minutes: '分钟',
+  },
 }
 
 export default zh;
diff --git a/web_src/vuepages/pages/repos/components/ReposItem.vue b/web_src/vuepages/pages/repos/components/ReposItem.vue
index e9710f247..f99e90ffa 100644
--- a/web_src/vuepages/pages/repos/components/ReposItem.vue
+++ b/web_src/vuepages/pages/repos/components/ReposItem.vue
@@ -12,6 +12,7 @@
                 <span class="title-1"> / </span>
                 <span class="title-2" v-html="data.NameShow"></span>
               </a>
+              <i v-if="data.IsArchived" class="archive icon archived-icon"></i>
               <svg v-if="(data.IsPrivate || data.IsOwnerPrivate)" class="svg octicon-lock" width="15" height="15"
                 aria-hidden="true">
                 <use xlink:href="#octicon-lock"></use>
@@ -98,6 +99,7 @@ import 'dayjs/locale/zh-cn';
 import 'dayjs/locale/en';
 import dayjs from 'dayjs';
 import { lang } from '~/langs';
+import { timeSinceUnix } from '~/utils';
 
 dayjs.locale(lang == 'zh-CN' ? 'zh-cn' : 'en');
 dayjs.extend(relativeTime);
@@ -117,7 +119,8 @@ export default {
   },
   methods: {
     calcFromNow(unix) {
-      return dayjs(unix * 1000).fromNow();
+      // return dayjs(unix * 1000).fromNow();
+      return timeSinceUnix(unix, Date.now() / 1000);
     },
     dateFormat(unix) {
       return lang == 'zh-CN' ? dayjs(unix * 1000).format('YYYY年MM月DD日 HH时mm分ss秒') :
diff --git a/web_src/vuepages/pages/repos/components/ReposList.vue b/web_src/vuepages/pages/repos/components/ReposList.vue
index 2db72c537..50e41f699 100644
--- a/web_src/vuepages/pages/repos/components/ReposList.vue
+++ b/web_src/vuepages/pages/repos/components/ReposList.vue
@@ -72,7 +72,9 @@ export default {
             }
           });
           this.total = res.Data.Total;
-          LetterAvatar.transform();
+          this.$nextTick(() => {
+            LetterAvatar.transform();
+          });
         } else {
           this.list = [];
           this.total = 0;
diff --git a/web_src/vuepages/utils/index.js b/web_src/vuepages/utils/index.js
index 5b9ecc23f..ac53a0024 100644
--- a/web_src/vuepages/utils/index.js
+++ b/web_src/vuepages/utils/index.js
@@ -27,7 +27,7 @@ export const transFileSize = (srcSize) => {
   srcSize = parseFloat(srcSize);
   const index = Math.floor(Math.log(srcSize) / Math.log(1024));
   const size = (srcSize / Math.pow(1024, index)).toFixed(2);
-  return size + ' ' +  unitArr[index];
+  return size + ' ' + unitArr[index];
 };
 
 export const renderSpecStr = (spec, showPoint) => {
@@ -39,3 +39,91 @@ export const renderSpecStr = (spec, showPoint) => {
   var specStr = `${ngpu}, CPU: ${spec.CpuCores}, ${gpuMemStr}${i18n.t('resourcesManagement.mem')}: ${spec.MemGiB}GB${sharedMemStr}${pointStr}`;
   return specStr;
 };
+
+const Minute = 60;
+const Hour = 60 * Minute;
+const Day = 24 * Hour;
+const Week = 7 * Day;
+const Month = 30 * Day;
+const Year = 12 * Month;
+
+const computeTimeDiff = (diff) => {
+  let diffStr = '';
+  switch (true) {
+    case diff <= 0:
+      diff = 0;
+      diffStr = i18n.t('timeObj.now');
+      break;
+    case diff < 2:
+      diff = 0;
+      diffStr = i18n.t('timeObj.1s');
+      break;
+    case diff < 1 * Minute:
+      diffStr = i18n.t('timeObj.seconds', { msg: Math.floor(diff) });
+      diff = 0;
+      break;
+    case diff < 2 * Minute:
+      diff -= 1 * Minute;
+      diffStr = i18n.t('timeObj.1m');
+      break;
+    case diff < 1 * Hour:
+      diffStr = i18n.t('timeObj.minutes', { msg: Math.floor(diff / Minute) });
+      diff -= diff / Minute * Minute;
+      break;
+    case diff < 2 * Hour:
+      diff -= 1 * Hour;
+      diffStr = i18n.t('timeObj.1h');
+      break;
+    case diff < 1 * Day:
+      diffStr = i18n.t('timeObj.hours', { msg: Math.floor(diff / Hour) });
+      diff -= diff / Hour * Hour;
+      break;
+    case diff < 2 * Day:
+      diff -= 1 * Day;
+      diffStr = i18n.t('timeObj.1d');
+      break;
+    case diff < 1 * Week:
+      diffStr = i18n.t('timeObj.days', { msg: Math.floor(diff / Day) });
+      diff -= diff / Day * Day;
+      break;
+    case diff < 2 * Week:
+      diff -= 1 * Week;
+      diffStr = i18n.t('timeObj.1w');
+      break;
+    case diff < 1 * Month:
+      diffStr = i18n.t('timeObj.weeks', { msg: Math.floor(diff / Week) });
+      diff -= diff / Week * Week;
+      break;
+    case diff < 2 * Month:
+      diff -= 1 * Month;
+      diffStr = i18n.t('timeObj.1mon');
+      break;
+    case diff < 1 * Year:
+      diffStr = i18n.t('timeObj.months', { msg: Math.floor(diff / Month) });
+      diff -= diff / Month * Month;
+      break;
+    case diff < 2 * Year:
+      diff -= 1 * Year;
+      diffStr = i18n.t('timeObj.1y');
+      break;
+    default:
+      diffStr = i18n.t('timeObj.years', { msg: Math.floor(diff / Year) });
+      diff -= (diff / Year) * Year;
+      break;
+  }
+  return { diff, diffStr };
+};
+
+export const timeSinceUnix = (then, now) => {
+  let lbl = 'timeObj.ago';
+  let diff = now - then;
+  if (then > now) {
+    lbl = 'timeObj.from_now';
+    diff = then - now;
+  }
+  if (diff <= 0) {
+    return i18n.t('timeObj.now');
+  }
+  const out = computeTimeDiff(diff);
+  return i18n.t(lbl, { msg: out.diffStr });
+};