パンくずリストを設置

src/components/Layout/BreadCrumbTrail.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import AIcon from '/@/components/UI/AIcon.vue'
+
+export interface Path {
+  name: string
+  link: string
+}
+
+defineProps<{
+  paths: Path[]
+}>()
+</script>
+
+<template>
+  <nav :class="$style.container">
+    <template v-for="(path, index) in paths" :key="path">
+      <a-icon
+        v-if="index !== 0"
+        :class="$style.icon"
+        name="mdi:chevron-right"
+      />
+      <router-link
+        v-if="index !== paths.length - 1"
+        :to="path.link"
+        :class="$style.link"
+      >
+        {{ path.name }}
+      </router-link>
+      <span v-else :class="$style.currentPath">{{ path.name }}</span>
+    </template>
+  </nav>
+</template>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.icon {
+  display: flex;
+  color: $color-text-secondary;
+}
+
+.link {
+  text-decoration: none;
+  color: $color-text-secondary;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+.currentPath {
+  color: $color-primary;
+}
+</style>

src/components/Layout/PageContainer.vue

@@ -1,6 +1,15 @@
+<script setup lang="ts">
+import { Path } from '/@/components/Layout/BreadCrumbTrail.vue'
+import BreadCrumbTrail from '/@/components/Layout/BreadCrumbTrail.vue'
+
+defineProps<{
+  paths?: Path[]
+}>()
+</script>
+
 <template>
   <main :class="$style.container">
-    <div>パンくずリスト</div>
+    <bread-crumb-trail v-if="paths !== undefined" :paths="paths" />
     <slot />
   </main>
 </template>
@@ -16,3 +25,4 @@
   padding-top: 1rem;
 }
 </style>
+import { Path } from 'typescript';

src/pages/ContestPage.vue

@@ -12,7 +12,15 @@ const contestDetail = (await apis.getContest(contestId.value)).data
 </script>
 
 <template>
-  <page-container>
+  <page-container
+    :paths="[
+      { name: 'Contests', link: '/contests' },
+      {
+        name: contestDetail.name,
+        link: `/contests/${contestId}`
+      }
+    ]"
+  >
     <div :class="$style.container">
       <div :class="$style.titleContainer">
         <page-title>{{ contestDetail.name }}</page-title>

src/pages/ContestTeamPage.vue

@@ -8,13 +8,26 @@ import apis from '/@/lib/apis'
 
 const contestId = useParam('contestId')
 const teamId = useParam('teamId')
+const contestDetail = (await apis.getContest(contestId.value)).data
 const contestTeamDetail = (
   await apis.getContestTeam(contestId.value, teamId.value)
 ).data
 </script>
 
 <template>
-  <page-container>
+  <page-container
+    :paths="[
+      { name: 'Contests', link: '/contests' },
+      {
+        name: contestDetail.name,
+        link: `/contests/${contestId}`
+      },
+      {
+        name: contestTeamDetail.name,
+        link: `/contests/${contestId}/teams/${teamId}`
+      }
+    ]"
+  >
     <div :class="$style.container">
       <div :class="$style.titleContainer">
         <page-title>チーム {{ contestTeamDetail.name }}</page-title>

src/pages/ContestsPage.vue

@@ -10,7 +10,7 @@ const contests = await contestStore.fetchContests()
 </script>
 
 <template>
-  <page-container>
+  <page-container :paths="[{ name: 'Contests', link: '/contests' }]">
     <div :class="$style.container">
       <page-title>コンテスト一覧</page-title>
       <contest-list :contests="contests" />

src/pages/GroupPage.vue

@@ -12,7 +12,15 @@ const groupDetail = (await apis.getGroup(groupId.value)).data
 </script>
 
 <template>
-  <page-container>
+  <page-container
+    :paths="[
+      { name: 'Groups', link: '/groups' },
+      {
+        name: groupDetail.name,
+        link: `/groups/${groupId}`
+      }
+    ]"
+  >
     <div :class="$style.container">
       <div :class="$style.titleContainer">
         <page-title>{{ groupDetail.name }}</page-title>

src/pages/GroupsPage.vue

@@ -9,7 +9,7 @@ const groups = await groupStore.fetchGroups()
 </script>
 
 <template>
-  <page-container>
+  <page-container :paths="[{ name: 'Groups', link: '/groups' }]">
     <div :class="$style.container">
       <page-title>班一覧</page-title>
       <group-list :groups="groups" />

src/pages/ProjectPage.vue

@@ -12,7 +12,15 @@ const projectDetail = (await apis.getProject(projectId.value)).data
 </script>
 
 <template>
-  <page-container>
+  <page-container
+    :paths="[
+      { name: 'Projects', link: '/projects' },
+      {
+        name: projectDetail.name,
+        link: `/projects/${projectId}`
+      }
+    ]"
+  >
     <div :class="$style.container">
       <div :class="$style.titleContainer">
         <page-title>{{ projectDetail.name }}</page-title>

src/pages/ProjectsPage.vue

@@ -10,7 +10,7 @@ const projects = await projectStore.fetchProjects()
 </script>
 
 <template>
-  <page-container>
+  <page-container :paths="[{ name: 'Projects', link: '/projects' }]">
     <div :class="$style.container">
       <page-title>プロジェクト一覧</page-title>
       <project-list :projects="projects" />

src/pages/UserPage.vue

@@ -18,7 +18,15 @@ const userGroups = (await apis.getUserGroups(userId.value)).data
 </script>
 
 <template>
-  <page-container>
+  <page-container
+    :paths="[
+      { name: 'Users', link: '/users' },
+      {
+        name: userDetail.name,
+        link: `/users/${userId}`
+      }
+    ]"
+  >
     <div :class="$style.container">
       <user-detail-container :user-detail="userDetail" />
       <bio-container :bio="userDetail.bio" />