41 布局消息通知开发 作业 - udo-bit/naive_admin_pro GitHub Wiki

目标

完成消息布局开发
完成待办布局开发

开发

message-item.vue

<script lang="ts" setup>
defineProps<{
  read?: boolean
  avatar?: string
  title?: string
  timer?: string
  desc?: string
}>()
</script>

<template>
  <n-list-item :class="read ? 'op-40' : ''">
    <n-thing>
      <template v-if="avatar" #avatar>
        <n-avatar round :src="avatar" />
      </template>
      <template v-if="title" #header>
        <span class="text-16px">
          {{ title }}
        </span>
      </template>
      <template #description>
        <template v-if="desc">
          <span class="text-12px">
            {{ desc }}
          </span>
        </template>
        <template v-if="timer">
          <div class="text-14px">
            {{ timer }}
          </div>
        </template>
      </template>
    </n-thing>
  </n-list-item>
</template>

<style scoped>

</style>

upcoming-item.vue

<script lang="ts" setup>
defineProps<{
  read?: boolean
  type?: 'success' | 'warning' | 'error' | 'info'
  tag?: string
  title?: string
  content?: string
}>()
</script>

<template>
  <n-list-item :class="read ? 'op-40' : ''">
    <n-thing>
      <template v-if="title" #header>
        <span class="text-16px">
          {{ title }}
        </span>
      </template>
      <template v-if="tag" #header-extra>
        <n-tag size="small" :type="type">
          {{ tag }}
        </n-tag>
      </template>
      <template v-if="content" #description>
        <span class="text-14px">
          {{ content }}
        </span>
      </template>
    </n-thing>
  </n-list-item>
</template>

<style scoped>

</style>
⚠️ **GitHub.com Fallback** ⚠️