feat(Workplace): Add wrokplace demo

feat(Component): Add Highlight component

feat(hooks): Add useTimeAgo hook

src/components/Highlight/index.ts

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

src/components/Highlight/src/Highlight.vue

@@ -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/UserInfo/src/UserInfo.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>