feat: Add workplace api

mock/workplace/index.ts

@@ -0,0 +1,172 @@
+import { config } from '@/config/axios/config'
+import { MockMethod } from 'vite-plugin-mock'
+
+const { result_code } = config
+
+const timeout = 1000
+
+export default [
+  // 获取统计
+  {
+    url: '/workplace/total',
+    method: 'get',
+    timeout,
+    response: () => {
+      return {
+        code: result_code,
+        data: {
+          project: 40,
+          access: 2340,
+          todo: 10
+        }
+      }
+    }
+  },
+  // 获取项目
+  {
+    url: '/workplace/project',
+    method: 'get',
+    timeout,
+    response: () => {
+      return {
+        code: result_code,
+        data: [
+          {
+            name: 'Github',
+            icon: 'akar-icons:github-fill',
+            message: 'workplace.introduction',
+            personal: 'Archer',
+            time: new Date()
+          },
+          {
+            name: 'Vue',
+            icon: 'logos:vue',
+            message: 'workplace.introduction',
+            personal: 'Archer',
+            time: new Date()
+          },
+          {
+            name: 'Angular',
+            icon: 'logos:angular-icon',
+            message: 'workplace.introduction',
+            personal: 'Archer',
+            time: new Date()
+          },
+          {
+            name: 'React',
+            icon: 'logos:react',
+            message: 'workplace.introduction',
+            personal: 'Archer',
+            time: new Date()
+          },
+          {
+            name: 'Webpack',
+            icon: 'logos:webpack',
+            message: 'workplace.introduction',
+            personal: 'Archer',
+            time: new Date()
+          },
+          {
+            name: 'Vite',
+            icon: 'vscode-icons:file-type-vite',
+            message: 'workplace.introduction',
+            personal: 'Archer',
+            time: new Date()
+          }
+        ]
+      }
+    }
+  },
+  // 获取动态
+  {
+    url: '/workplace/dynamic',
+    method: 'get',
+    timeout,
+    response: () => {
+      return {
+        code: result_code,
+        data: [
+          {
+            keys: ['workplace.push', 'Github'],
+            time: new Date()
+          },
+          {
+            keys: ['workplace.push', 'Github'],
+            time: new Date()
+          },
+          {
+            keys: ['workplace.push', 'Github'],
+            time: new Date()
+          },
+          {
+            keys: ['workplace.push', 'Github'],
+            time: new Date()
+          },
+          {
+            keys: ['workplace.push', 'Github'],
+            time: new Date()
+          },
+          {
+            keys: ['workplace.push', 'Github'],
+            time: new Date()
+          }
+        ]
+      }
+    }
+  },
+  // 获取团队信息
+  {
+    url: '/workplace/team',
+    method: 'get',
+    timeout,
+    response: () => {
+      return {
+        code: result_code,
+        data: [
+          {
+            name: 'Github',
+            icon: 'akar-icons:github-fill'
+          },
+          {
+            name: 'Vue',
+            icon: 'logos:vue'
+          },
+          {
+            name: 'Angular',
+            icon: 'logos:angular-icon'
+          },
+          {
+            name: 'React',
+            icon: 'logos:react'
+          },
+          {
+            name: 'Webpack',
+            icon: 'logos:webpack'
+          },
+          {
+            name: 'Vite',
+            icon: 'vscode-icons:file-type-vite'
+          }
+        ]
+      }
+    }
+  },
+  // 获取指数
+  {
+    url: '/workplace/radar',
+    method: 'get',
+    timeout,
+    response: () => {
+      return {
+        code: result_code,
+        data: [
+          { name: 'workplace.quote', max: 65, personal: 42, team: 50 },
+          { name: 'workplace.contribution', max: 160, personal: 30, team: 140 },
+          { name: 'workplace.hot', max: 300, personal: 20, team: 28 },
+          { name: 'workplace.yield', max: 130, personal: 35, team: 35 },
+          { name: 'workplace.follow', max: 100, personal: 80, team: 90 }
+        ]
+      }
+    }
+  }
+] as MockMethod[]

src/api/dashboard/workplace/index.ts

@@ -0,0 +1,24 @@
+import { useAxios } from '@/hooks/web/useAxios'
+import type { WorkplaceTotal, Project, Dynamic, Team, RadarData } from './types'
+
+const { request } = useAxios()
+
+export const getCountApi = () => {
+  return request<WorkplaceTotal>({ url: '/workplace/total', method: 'get' })
+}
+
+export const getProjectApi = () => {
+  return request<Project[]>({ url: '/workplace/project', method: 'get' })
+}
+
+export const getDynamicApi = () => {
+  return request<Dynamic[]>({ url: '/workplace/dynamic', method: 'get' })
+}
+
+export const getTeamApi = () => {
+  return request<Team[]>({ url: '/workplace/team', method: 'get' })
+}
+
+export const getRadarApi = () => {
+  return request<RadarData[]>({ url: '/workplace/radar', method: 'get' })
+}

src/api/dashboard/workplace/types.ts

@@ -0,0 +1,30 @@
+export type WorkplaceTotal = {
+  project: number
+  access: number
+  todo: number
+}
+
+export type Project = {
+  name: string
+  icon: string
+  message: string
+  personal: string
+  time: Date | number | string
+}
+
+export type Dynamic = {
+  keys: string[]
+  time: Date | number | string
+}
+
+export type Team = {
+  name: string
+  icon: string
+}
+
+export type RadarData = {
+  personal: number
+  team: number
+  max: number
+  name: string
+}

src/locales/en.ts

@@ -130,7 +130,8 @@ export default {
     yield: 'Yield',
     dynamic: 'Dynamic',
     push: 'push',
-    pushCode: 'Archer push code to Github'
+    pushCode: 'Archer push code to Github',
+    follow: 'Follow'
   },
   formDemo: {
     input: 'Input',

src/locales/zh-CN.ts

@@ -130,7 +130,8 @@ export default {
     yield: '产量',
     dynamic: '动态',
     push: '推送',
-    pushCode: 'Archer 推送 代码到 Github'
+    pushCode: 'Archer 推送 代码到 Github',
+    follow: '关注'
   },
   formDemo: {
     input: '输入框',

src/views/Dashboard/Workplace.vue

@@ -2,137 +2,112 @@
 import { useTimeAgo } from '@/hooks/web/useTimeAgo'
 import { ElRow, ElCol, ElSkeleton, ElCard, ElDivider, ElLink } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
 import { CountTo } from '@/components/CountTo'
 import { formatTime } from '@/utils'
 import { Echart } from '@/components/Echart'
+import { EChartsOption } from 'echarts'
 import { radarOption } from './echarts-data'
 import { Highlight } from '@/components/Highlight'
-
+import {
-interface Project {
+  getCountApi,
-  name: string
+  getProjectApi,
-  icon: string
+  getDynamicApi,
-  message: string
+  getTeamApi,
-  personal: string
+  getRadarApi
-  time: Date | number | string
+} from '@/api/dashboard/workplace'
-}
+import type { WorkplaceTotal, Project, Dynamic, Team } from '@/api/dashboard/workplace/types'
-
+import { set } from 'lodash-es'
-interface Dynamic {
-  keys: string[]
-  time: Date | number | string
-}
-
-interface Team {
-  name: string
-  icon: string
-}
-
-const { t } = useI18n()
-
-const projects: Project[] = [
-  {
-    name: 'Github',
-    icon: 'akar-icons:github-fill',
-    message: t('workplace.introduction'),
-    personal: 'Archer',
-    time: new Date()
-  },
-  {
-    name: 'Vue',
-    icon: 'logos:vue',
-    message: t('workplace.introduction'),
-    personal: 'Archer',
-    time: new Date()
-  },
-  {
-    name: 'Angular',
-    icon: 'logos:angular-icon',
-    message: t('workplace.introduction'),
-    personal: 'Archer',
-    time: new Date()
-  },
-  {
-    name: 'React',
-    icon: 'logos:react',
-    message: t('workplace.introduction'),
-    personal: 'Archer',
-    time: new Date()
-  },
-  {
-    name: 'Webpack',
-    icon: 'logos:webpack',
-    message: t('workplace.introduction'),
-    personal: 'Archer',
-    time: new Date()
-  },
-  {
-    name: 'Vite',
-    icon: 'vscode-icons:file-type-vite',
-    message: t('workplace.introduction'),
-    personal: 'Archer',
-    time: new Date()
-  }
-]
-
-const dynamics: Dynamic[] = [
-  {
-    keys: [t('workplace.push'), 'Github'],
-    time: new Date()
-  },
-  {
-    keys: [t('workplace.push'), 'Github'],
-    time: new Date()
-  },
-  {
-    keys: [t('workplace.push'), 'Github'],
-    time: new Date()
-  },
-  {
-    keys: [t('workplace.push'), 'Github'],
-    time: new Date()
-  },
-  {
-    keys: [t('workplace.push'), 'Github'],
-    time: new Date()
-  },
-  {
-    keys: [t('workplace.push'), 'Github'],
-    time: new Date()
-  }
-]
-
-const team: Team[] = [
-  {
-    name: 'Github',
-    icon: 'akar-icons:github-fill'
-  },
-  {
-    name: 'Vue',
-    icon: 'logos:vue'
-  },
-  {
-    name: 'Angular',
-    icon: 'logos:angular-icon'
-  },
-  {
-    name: 'React',
-    icon: 'logos:react'
-  },
-  {
-    name: 'Webpack',
-    icon: 'logos:webpack'
-  },
-  {
-    name: 'Vite',
-    icon: 'vscode-icons:file-type-vite'
-  }
-]
 
 const loading = ref(true)
 
-setTimeout(() => {
+// 获取统计数
+let totalSate = reactive<WorkplaceTotal>({
+  project: 0,
+  access: 0,
+  todo: 0
+})
+
+const getCount = async () => {
+  const res = await getCountApi().catch(() => {})
+  if (res) {
+    totalSate = Object.assign(totalSate, res.data)
+  }
+}
+
+let projects = reactive<Project[]>([])
+
+// 获取项目数
+const getProject = async () => {
+  const res = await getProjectApi().catch(() => {})
+  if (res) {
+    projects = Object.assign(projects, res.data)
+  }
+}
+
+// 获取动态
+let dynamics = reactive<Dynamic[]>([])
+
+const getDynamic = async () => {
+  const res = await getDynamicApi().catch(() => {})
+  if (res) {
+    dynamics = Object.assign(dynamics, res.data)
+  }
+}
+
+// 获取团队
+let team = reactive<Team[]>([])
+
+const getTeam = async () => {
+  const res = await getTeamApi().catch(() => {})
+  if (res) {
+    team = Object.assign(team, res.data)
+  }
+}
+
+// 获取指数
+let radarOptionData = reactive<EChartsOption>(radarOption) as EChartsOption
+
+const getRadar = async () => {
+  const res = await getRadarApi().catch(() => {})
+  if (res) {
+    set(
+      radarOptionData,
+      'radar.indicator',
+      res.data.map((v) => {
+        return {
+          name: t(v.name),
+          max: v.max
+        }
+      })
+    )
+    set(radarOptionData, 'series', [
+      {
+        name: `xxx${t('workplace.index')}`,
+        type: 'radar',
+        data: [
+          {
+            value: res.data.map((v) => v.personal),
+            name: t('workplace.personal')
+          },
+          {
+            value: res.data.map((v) => v.team),
+            name: t('workplace.team')
+          }
+        ]
+      }
+    ])
+  }
+}
+
+const getAllApi = async () => {
+  await Promise.all([getCount(), getProject(), getDynamic(), getTeam(), getRadar()])
   loading.value = false
-}, 1000)
+}
+
+getAllApi()
+
+const { t } = useI18n()
 </script>
 
 <template>
@@ -161,17 +136,32 @@ setTimeout(() => {
             <div class="flex h-70px items-center justify-end <sm:mt-20px">
               <div class="px-8px text-right">
                 <div class="text-14px text-gray-400 mb-20px">{{ t('workplace.project') }}</div>
-                <CountTo class="text-20px" :start-val="0" :end-val="40" :duration="2600" />
+                <CountTo
+                  class="text-20px"
+                  :start-val="0"
+                  :end-val="totalSate.project"
+                  :duration="2600"
+                />
               </div>
               <ElDivider direction="vertical" />
               <div class="px-8px text-right">
                 <div class="text-14px text-gray-400 mb-20px">{{ t('workplace.toDo') }}</div>
-                <CountTo class="text-20px" :start-val="0" :end-val="10" :duration="2600" />
+                <CountTo
+                  class="text-20px"
+                  :start-val="0"
+                  :end-val="totalSate.todo"
+                  :duration="2600"
+                />
               </div>
               <ElDivider direction="vertical" border-style="dashed" />
               <div class="px-8px text-right">
                 <div class="text-14px text-gray-400 mb-20px">{{ t('workplace.access') }}</div>
-                <CountTo class="text-20px" :start-val="0" :end-val="2340" :duration="2600" />
+                <CountTo
+                  class="text-20px"
+                  :start-val="0"
+                  :end-val="totalSate.access"
+                  :duration="2600"
+                />
               </div>
             </div>
           </ElCol>
@@ -205,7 +195,7 @@ setTimeout(() => {
                   <Icon :icon="item.icon" :size="25" class="mr-10px" />
                   <span class="text-16px">{{ item.name }}</span>
                 </div>
-                <div class="mt-15px text-14px text-gray-400">{{ item.message }}</div>
+                <div class="mt-15px text-14px text-gray-400">{{ t(item.message) }}</div>
                 <div class="mt-20px text-12px text-gray-400 flex justify-between">
                   <span>{{ item.personal }}</span>
                   <span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
@@ -233,7 +223,9 @@ setTimeout(() => {
               />
               <div>
                 <div class="text-14px">
-                  <Highlight :keys="item.keys"> {{ t('workplace.pushCode') }} </Highlight>
+                  <Highlight :keys="item.keys.map((v) => t(v))">
+                    {{ t('workplace.pushCode') }}
+                  </Highlight>
                 </div>
                 <div class="mt-15px text-12px text-gray-400">
                   {{ useTimeAgo(item.time) }}
@@ -273,7 +265,7 @@ setTimeout(() => {
           <template #header>
             <span>xx{{ t('workplace.index') }}</span>
           </template>
-          <Echart :options="radarOption" :height="400" />
+          <Echart :options="radarOptionData" :height="400" />
         </ElCard>
       </ElSkeleton>
 

src/views/Dashboard/echarts-data.ts

@@ -162,7 +162,8 @@ export const radarOption: EChartsOption = {
       { name: t('workplace.quote'), max: 65 },
       { name: t('workplace.contribution'), max: 160 },
       { name: t('workplace.hot'), max: 300 },
-      { name: t('workplace.yield'), max: 130 }
+      { name: t('workplace.yield'), max: 130 },
+      { name: t('workplace.follow'), max: 100 }
     ]
   },
   series: [
@@ -171,11 +172,11 @@ export const radarOption: EChartsOption = {
       type: 'radar',
       data: [
         {
-          value: [42, 30, 20, 35],
+          value: [42, 30, 20, 35, 80],
           name: t('workplace.personal')
         },
         {
-          value: [50, 140, 28, 35],
+          value: [50, 140, 28, 35, 90],
           name: t('workplace.team')
         }
       ]