feat: notification页面

src/views/notifications/components/NotificationsList.vue

@@ -0,0 +1,111 @@
+<template>
+  <section class="notifications-panel">
+    <div class="notifications-toolbar">
+      <div class="unread-summary">
+        <span class="unread-label">UNREAD</span>
+        <span class="unread-count">{{ unreadCount }}</span>
+      </div>
+
+      <button
+        type="button"
+        class="mark-all-button"
+        :disabled="unreadCount === 0"
+        @click="emit('markAllAsRead')"
+      >
+        Mark all as read
+      </button>
+    </div>
+
+    <div class="notifications-items">
+      <NotificationListItem
+        v-for="item in items"
+        :key="item.id"
+        :item="item"
+        @toggle="emit('toggleItem', $event)"
+      />
+    </div>
+  </section>
+</template>
+<script setup lang="ts">
+import NotificationListItem from './NotificationListItem.vue'
+import type { NotificationRecord } from '../types'
+
+defineProps<{
+  items: NotificationRecord[]
+  unreadCount: number
+}>()
+
+const emit = defineEmits<{
+  toggleItem: [id: NotificationRecord['id']]
+  markAllAsRead: []
+}>()
+</script>
+
+<style lang="less" scoped>
+.notifications-panel {
+  width: 100%;
+}
+
+.notifications-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+  margin-bottom: 4rem;
+}
+
+.unread-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 1.3rem;
+}
+
+.unread-label {
+  color: #979797;
+  font-size: 1.4rem;
+  line-height: 1.4;
+  letter-spacing: 0.04em;
+  font-family: 'KaiseiOpti-Regular';
+}
+
+.unread-count {
+  min-width: 3.1rem;
+  height: 2.4rem;
+  padding: 0 0.8rem;
+  border-radius: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #232323;
+  color: #ffffff;
+  font-size: 1.4rem;
+  line-height: 1;
+  font-family: 'KaiseiOpti-Bold';
+}
+
+.mark-all-button {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #979797;
+  font-size: 1.4rem;
+  line-height: 1.4;
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+  font-family: 'KaiseiOpti-Regular';
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.55;
+  }
+}
+
+@media (max-width: 768px) {
+  .notifications-toolbar {
+    align-items: flex-start;
+    flex-direction: column;
+    margin-bottom: 2.8rem;
+  }
+}
+</style>