feat(Workplace): Add wrokplace demo

feat(Component): Add Highlight component

feat(hooks): Add useTimeAgo hook

Author: kailong321200875

src/assets/imgs/avatar.jpg

@@ -0,0 +1,3 @@
+import Highlight from './src/Highlight.vue'
+
+export { Highlight }

src/components/Highlight/index.ts

@@ -0,0 +1,65 @@
+<script lang="tsx">
+import { defineComponent, PropType, computed, h, unref } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+
+export default defineComponent({
+  name: 'Highlight',
+  props: {
+    tag: propTypes.string.def('span'),
+    keys: {
+      type: Array as PropType<string[]>,
+      default: () => []
+    },
+    color: propTypes.string.def('var(--el-color-primary)')
+  },
+  emits: ['click'],
+  setup(props, { emit, slots }) {
+    const keyNodes = computed(() => {
+      return props.keys.map((key) => {
+        return h(
+          'span',
+          {
+            onClick: () => {
+              emit('click', key)
+            },
+            style: {
+              color: props.color,
+              cursor: 'pointer'
+            }
+          },
+          key
+        )
+      })
+    })
+
+    const parseText = (text: string) => {
+      props.keys.forEach((key, index) => {
+        const regexp = new RegExp(key, 'g')
+        text = text.replace(regexp, `{{${index}}}`)
+      })
+      return text.split(/{{|}}/)
+    }
+
+    const renderText = () => {
+      if (!slots?.default) return null
+      const node = slots?.default()[0].children
+
+      if (!node) {
+        return slots?.default()[0]
+      }
+
+      const textArray = parseText(node as string)
+      const regexp = /^[0-9]*$/
+      const nodes = textArray.map((t) => {
+        if (regexp.test(t)) {
+          return unref(keyNodes)[Math.floor(Number(t))] || t
+        }
+        return t
+      })
+      return h(props.tag, nodes)
+    }
+
+    return () => renderText()
+  }
+})
+</script>

src/components/Highlight/src/Highlight.vue

@@ -38,7 +38,11 @@ const loginOut = () => {
 <template>
   <ElDropdown :class="prefixCls" trigger="click">
     <div class="flex items-center">
-      <img src="@/assets/imgs/avatar.png" alt="" class="w-[calc(var(--tags-view-height)-10px)]" />
+      <img
+        src="@/assets/imgs/avatar.jpg"
+        alt=""
+        class="w-[calc(var(--tags-view-height)-10px)] rounded-[50%]"
+      />
       <span class="<lg:hidden text-14px pl-[5px] text-[var(--top-header-text-color)]">Archer</span>
     </div>
     <template #dropdown>

src/components/UserInfo/src/UserInfo.vue

@@ -0,0 +1,48 @@
+import { useTimeAgo as useTimeAgoCore, UseTimeAgoMessages } from '@vueuse/core'
+import { computed, unref } from 'vue'
+import { useLocaleStoreWithOut } from '@/store/modules/locale'
+
+const TIME_AGO_MESSAGE_MAP: {
+  'zh-CN': UseTimeAgoMessages
+  en: UseTimeAgoMessages
+} = {
+  'zh-CN': {
+    justNow: '刚刚',
+    past: (n) => (n.match(/\d/) ? `${n}前` : n),
+    future: (n) => (n.match(/\d/) ? `${n}后` : n),
+    month: (n, past) => (n === 1 ? (past ? '上个月' : '下个月') : `${n} 个月`),
+    year: (n, past) => (n === 1 ? (past ? '去年' : '明年') : `${n} 年`),
+    day: (n, past) => (n === 1 ? (past ? '昨天' : '明天') : `${n} 天`),
+    week: (n, past) => (n === 1 ? (past ? '上周' : '下周') : `${n} 周`),
+    hour: (n) => `${n} 小时`,
+    minute: (n) => `${n} 分钟`,
+    second: (n) => `${n} 秒`
+  },
+  en: {
+    justNow: '刚刚',
+    past: (n) => (n.match(/\d/) ? `${n} ago` : n),
+    future: (n) => (n.match(/\d/) ? `in ${n}` : n),
+    month: (n, past) =>
+      n === 1 ? (past ? 'last month' : 'next month') : `${n} month${n > 1 ? 's' : ''}`,
+    year: (n, past) =>
+      n === 1 ? (past ? 'last year' : 'next year') : `${n} year${n > 1 ? 's' : ''}`,
+    day: (n, past) => (n === 1 ? (past ? 'yesterday' : 'tomorrow') : `${n} day${n > 1 ? 's' : ''}`),
+    week: (n, past) =>
+      n === 1 ? (past ? 'last week' : 'next week') : `${n} week${n > 1 ? 's' : ''}`,
+    hour: (n) => `${n} hour${n > 1 ? 's' : ''}`,
+    minute: (n) => `${n} minute${n > 1 ? 's' : ''}`,
+    second: (n) => `${n} second${n > 1 ? 's' : ''}`
+  }
+}
+
+export const useTimeAgo = (time: Date | number | string) => {
+  const localeStore = useLocaleStoreWithOut()
+
+  const currentLocale = computed(() => localeStore.getCurrentLocale)
+
+  const timeAgo = useTimeAgoCore(time, {
+    messages: TIME_AGO_MESSAGE_MAP[unref(currentLocale).lang]
+  })
+
+  return timeAgo
+}

src/hooks/web/useTimeAgo.ts

@@ -71,7 +71,8 @@ export default {
     menu12: 'Menu1-2',
     menu2: 'Menu2',
     dashboard: 'Dashboard',
-    analysis: 'Analysis'
+    analysis: 'Analysis',
+    workplace: 'Workplace'
   },
   analysis: {
     newUser: 'New user',
@@ -109,6 +110,28 @@ export default {
     saturday: 'Saturday',
     sunday: 'Sunday'
   },
+  workplace: {
+    goodMorning: 'Good morning',
+    happyDay: 'Wish you happy every day!',
+    toady: `It's sunny today`,
+    project: 'Project',
+    access: 'Project access',
+    toDo: 'To do',
+    introduction: 'A serious introduction',
+    more: 'More',
+    shortcutOperation: 'Shortcut operation',
+    operation: 'Operation',
+    index: 'Index',
+    personal: 'Personal',
+    team: 'Team',
+    quote: 'Quote',
+    contribution: 'Contribution',
+    hot: 'Hot',
+    yield: 'Yield',
+    dynamic: 'Dynamic',
+    push: 'push',
+    pushCode: 'Archer push code to GitHub'
+  },
   formDemo: {
     input: 'Input',
     inputNumber: 'InputNumber',

src/locales/en.ts

@@ -71,7 +71,8 @@ export default {
     menu12: '菜单1-2',
     menu2: '菜单2',
     dashboard: '首页',
-    analysis: '分析页'
+    analysis: '分析页',
+    workplace: '工作台'
   },
   analysis: {
     newUser: '新增用户',
@@ -109,6 +110,28 @@ export default {
     saturday: '周六',
     sunday: '周日'
   },
+  workplace: {
+    goodMorning: '早安',
+    happyDay: '祝你开心每一天!',
+    toady: '今日晴',
+    project: '项目数',
+    access: '项目访问',
+    toDo: '待办',
+    introduction: '一个正经的简介',
+    more: '更多',
+    shortcutOperation: '快捷操作',
+    operation: '操作',
+    index: '指数',
+    personal: '个人',
+    team: '团队',
+    quote: '引用',
+    contribution: '贡献',
+    hot: '热度',
+    yield: '产量',
+    dynamic: '动态',
+    push: '推送',
+    pushCode: 'Archer 推送 代码到 Github'
+  },
   formDemo: {
     input: '输入框',
     inputNumber: '数字输入框',

src/locales/zh-CN.ts

@@ -1,6 +1,13 @@
 import * as echarts from 'echarts/core'
 
-import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart } from 'echarts/charts'
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  PictorialBarChart,
+  RadarChart
+} from 'echarts/charts'
 
 import {
   TitleComponent,
@@ -27,7 +34,8 @@ echarts.use([
   PieChart,
   MapChart,
   CanvasRenderer,
-  PictorialBarChart
+  PictorialBarChart,
+  RadarChart
 ])
 
 export default echarts

src/plugins/echarts/index.ts

@@ -54,8 +54,16 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         name: 'Analysis',
         meta: {
           title: t('router.analysis'),
-          noCache: true,
-          affix: true
+          noCache: true
+        }
+      },
+      {
+        path: 'workplace',
+        component: () => import('@/views/Dashboard/Workplace.vue'),
+        name: 'Workplace',
+        meta: {
+          title: t('router.workplace'),
+          noCache: true
         }
       }
     ]

src/router/index.ts

@@ -63,3 +63,35 @@ export const findIndex = <T = Recordable>(ary: Array<T>, fn: Fn): number => {
 export const trim = (str: string) => {
   return str.replace(/(^\s*)|(\s*$)/g, '')
 }
+
+/**
+ * @param {Date | number | string} time 需要转换的时间
+ * @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
+ */
+export function formatTime(time: Date | number | string, fmt: string) {
+  if (!time) return ''
+  else {
+    const date = new Date(time)
+    const o = {
+      'M+': date.getMonth() + 1,
+      'd+': date.getDate(),
+      'H+': date.getHours(),
+      'm+': date.getMinutes(),
+      's+': date.getSeconds(),
+      'q+': Math.floor((date.getMonth() + 3) / 3),
+      S: date.getMilliseconds()
+    }
+    if (/(y+)/.test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+    }
+    for (const k in o) {
+      if (new RegExp('(' + k + ')').test(fmt)) {
+        fmt = fmt.replace(
+          RegExp.$1,
+          RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
+        )
+      }
+    }
+    return fmt
+  }
+}

src/utils/index.ts

@@ -32,7 +32,7 @@ setTimeout(() => {
     <ElCol :span="24">
       <ElCard shadow="hover" class="mb-20px">
         <ElSkeleton :loading="loading" animated :rows="4">
-          <Echart :options="lineOptions" :height="400" />
+          <Echart :options="lineOptions" :height="350" />
         </ElSkeleton>
       </ElCard>
     </ElCol>