feat: introduction

.gitignore

@@ -7,3 +7,5 @@ opencode.json
 node_modules
 
 dist
+
+*:Zone.Identifier

app/citizen-frontend/src/components/layout/DefaultLayout.vue

@@ -88,6 +88,13 @@
           to="/"
         />
 
+        <v-list-item
+          color="primary"
+          prepend-icon="mdi-information-outline"
+          title="計畫簡介"
+          to="/introduction"
+        />
+
         <v-list-item
           color="primary"
           prepend-icon="mdi-clipboard-text-search"

app/citizen-frontend/src/pages/index.vue

@@ -79,6 +79,14 @@
           <HealthRadarChart :radar-data="store.radarData" />
         </v-card>
 
+        <ModuleRouterCard
+          description="了解公益普測計畫、研究依據與平台流程。"
+          icon="mdi-information-outline"
+          icon-color="primary"
+          title="簡介"
+          to="/introduction"
+        />
+
         <ModuleRouterCard
           description="完成線上自評，取得初步風險分級。"
           icon="mdi-clipboard-text-search"
@@ -172,7 +180,9 @@
                 color="primary"
                 variant="flat"
                 @click="prescriptionDialog = false"
-              >確認關閉</v-btn>
+              >
+                確認關閉
+              </v-btn>
             </v-card-actions>
           </v-card>
         </v-dialog>
@@ -183,7 +193,7 @@
           <BrandAvatar class="elevation-2" :icon-size="42" :size="72" />
         </div>
 
-        <v-card class="rounded-xl elevation-2 mb-12 py-4" color="surface">
+        <v-card class="rounded-xl elevation-2 mb-4 py-4" color="surface">
           <v-card-text>
             <div class="d-flex align-center mb-4">
               <v-avatar class="mr-4 text-white" color="accent" size="36">
@@ -222,20 +232,28 @@
             >
               登入平台
             </v-btn>
-          </v-card-text>
-        </v-card>
 
-        <v-card color="surface" variant="flat">
+            <div class="d-flex align-center mt-4">
-          <v-card-text class="pa-4 d-flex align-center text-left">
+              <v-icon class="mr-3" color="primary" icon="mdi-lock-outline" size="28" />
-            <v-icon class="mr-3" color="primary" icon="mdi-lock-outline" size="28" />
 
-            <div>
+              <div>
-              <div class="font-weight-bold text-grey-darken-4">登入後可使用完整功能</div>
+                <div class="font-weight-bold text-grey-darken-4">登入後可使用完整功能</div>
 
-              <div class="text-title-small text-grey">普測預約、現場報到、量測紀錄與運動處方。</div>
+                <div class="text-title-small text-grey">
+                  普測預約、現場報到、量測紀錄與運動處方。
+                </div>
+              </div>
             </div>
           </v-card-text>
         </v-card>
+
+        <ModuleRouterCard
+          description="了解公益普測計畫、研究依據與平台流程。"
+          icon="mdi-information-outline"
+          icon-color="primary"
+          title="簡介"
+          to="/introduction"
+        />
       </template>
     </template>
   </Layout>

app/citizen-frontend/src/pages/introduction.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import Layout from '@/components/layout/DefaultLayout.vue'
+
+const slides = [
+  {
+    title: '公益普測計畫',
+    src: new URL('../assets/introduction/公益普測計畫.jpg', import.meta.url).href,
+  },
+  {
+    title: '全齡功能性體適能衰退之研究',
+    src: new URL(
+      '../assets/introduction/全齡功能性體適能衰退之研究/0- 全齡功能性體適能衰退之研究.jpg',
+      import.meta.url,
+    ).href,
+  },
+  {
+    title: '研究總覽',
+    src: new URL(
+      '../assets/introduction/全齡功能性體適能衰退之研究/1 - 研究總覽.jpg',
+      import.meta.url,
+    ).href,
+  },
+  {
+    title: '方法與指標',
+    src: new URL(
+      '../assets/introduction/全齡功能性體適能衰退之研究/2 - 方法與指標.jpg',
+      import.meta.url,
+    ).href,
+  },
+  {
+    title: '主要結果',
+    src: new URL(
+      '../assets/introduction/全齡功能性體適能衰退之研究/3 - 主要結果.jpg',
+      import.meta.url,
+    ).href,
+  },
+  {
+    title: '研究總覽',
+    src: new URL(
+      '../assets/introduction/全齡功能性體適能衰退之研究/4 - 研究總覽.jpg',
+      import.meta.url,
+    ).href,
+  },
+]
+</script>
+
+<template>
+  <Layout>
+    <template #main>
+      <v-card variant="flat">
+        <v-card-title class="font-weight-bold text-primary d-flex align-center">
+          <v-icon class="mr-4" color="accent" icon="mdi-information-outline" />
+          計畫簡介
+        </v-card-title>
+
+        <v-carousel class="introduction-carousel" hide-delimiters show-arrows="hover">
+          <v-carousel-item
+            v-for="slide in slides"
+            :key="slide.src"
+            :alt="slide.title"
+            :src="slide.src"
+          />
+        </v-carousel>
+      </v-card>
+    </template>
+  </Layout>
+</template>
+
+<style scoped>
+.introduction-carousel {
+  background: #f5f7f8;
+  height: min(58vh, 440px);
+  min-height: 220px;
+}
+
+.introduction-carousel :deep(.v-window__container),
+.introduction-carousel :deep(.v-window-item),
+.introduction-carousel :deep(.v-responsive),
+.introduction-carousel :deep(.v-img) {
+  height: 100%;
+}
+
+.introduction-carousel :deep(.v-img__img) {
+  object-fit: contain;
+  object-position: center;
+}
+</style>

app/citizen-frontend/src/pages/self-assessment.vue

@@ -61,6 +61,19 @@
                 />
               </v-col>
 
+              <v-col cols="12" sm="6">
+                <v-text-field
+                  v-model="profileForm.phone"
+                  class="mb-3"
+                  color="primary"
+                  density="comfortable"
+                  hide-details="auto"
+                  label="手機號碼"
+                  type="tel"
+                  variant="outlined"
+                />
+              </v-col>
+
               <v-col cols="12" sm="6">
                 <v-select
                   v-model="profileForm.gender"
@@ -361,6 +374,7 @@ const stepNames = ['基本資料', '功能狀態', '健康限制', '自評結果
 
 const profileForm = reactive({
   name: store.userProfile.name,
+  phone: store.userProfile.phone,
   birthday: store.userProfile.birthday,
   gender: store.userProfile.gender,
   height: store.userProfile.height,
@@ -462,6 +476,7 @@ function handleSubmit () {
   // 儲存至 store
   store.updateProfile({
     name: profileForm.name,
+    phone: profileForm.phone,
     birthday: profileForm.birthday,
     gender: profileForm.gender,
     height: profileForm.height,

app/citizen-frontend/src/router/index.ts

@@ -3,6 +3,7 @@ import Appointment from '@/pages/appointment.vue'
 import Checkin from '@/pages/checkin.vue'
 import CheckinDetail from '@/pages/checkinDetail.vue'
 import Index from '@/pages/index.vue'
+import Introduction from '@/pages/introduction.vue'
 import Login from '@/pages/login.vue'
 import SelfAssessment from '@/pages/self-assessment.vue'
 import { useAppStore } from '@/stores/app'
@@ -18,6 +19,12 @@ const router = createRouter({
       name: 'home',
       component: Index,
     },
+    {
+      path: '/introduction',
+      name: 'introduction',
+      component: Introduction,
+      meta: { title: '計畫簡介｜運動玩轉健康力' },
+    },
     {
       path: '/login',
       name: 'login',