feat: 添加当前日期时间展示组件

songshankun

2023-10-28 a213f6bfca8c129680c7e4ef53f3391d3347fc38

feat: 添加当前日期时间展示组件

 src/views/dashboard/components/CurrentDateTime.vue

New file
@@ -0,0 +1,21 @@
<template>
  <div class="current-date-time">
    {{ time }}
  </div>
</template>

<script setup lang="ts">
import { useDateFormat, useNow } from '@vueuse/core'

const time = useDateFormat(useNow(), 'YYYY[年] MM[月] DD[日] dddd HH:mm:ss', { locales: 'zh-cn' })
</script>
<style scoped lang="scss">
$color: #30decd;

.current-date-time {
  width: 370px;
  color: $color;
  font-size: 24px;
  font-weight: 600;
}
</style>

 src/views/dashboard/components/TaskTabs.vue

@@ -15,10 +15,14 @@
import { useVModel } from '@vueuse/core'

const props = defineProps<{
  /** tab 列表*/
  list: string[]
  /** 当前选中的 tab*/
  modelValue?: string
}>()
const emit = defineEmits(['update:modelValue'])
const emit = defineEmits<{
  'update:modelValue': [tabName: string]
}>()
const data = useVModel(props, 'modelValue', emit)

function selectTab(tabName: string) {

 src/views/dashboard/index.vue

@@ -10,7 +10,11 @@
    <template #middleBlock2>主看板</template>
    <template #middleBlock3>任务详情</template>
    <template #middleBlock4>人员信息</template>
    <template #rightBlock1>时间</template>
    <template #rightBlock1>
      <div class="date-time">
        <CurrentDateTime></CurrentDateTime>
      </div>
    </template>
    <template #rightBlock2>状态面板</template>
    <template #rightBlock3>知识库</template>
  </DashboardLayout>
@@ -22,6 +26,7 @@
import type { Task } from '@/api/task'
import { chain } from 'lodash-es'
import TaskTabs from '@/views/dashboard/components/TaskTabs.vue'
import CurrentDateTime from '@/views/dashboard/components/CurrentDateTime.vue'

defineOptions({
  name: 'DashboardView'
@@ -55,4 +60,12 @@
})
</script>

<style scoped></style>
<style scoped>
.date-time {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 12px;
}
</style>