feat: project init

src/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-app>
+    <v-main>
+      <router-view />
+    </v-main>
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>

src/assets/logo.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
+<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
+<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
+<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
+</svg>

src/components/HelloWorld.vue

@@ -0,0 +1,94 @@
+<template>
+  <v-container class="fill-height d-flex flex-column justify-center" max-width="1100">
+    <div>
+      <v-img
+        class="mb-4 font-weight-bold"
+        height="150"
+        src="@/assets/logo.png"
+      />
+
+      <div class="mb-8 text-center">
+        <div class="text-body-medium font-weight-light mb-n1">Welcome to</div>
+        <div class="text-display-medium font-weight-bold">Vuetify</div>
+      </div>
+
+      <v-row>
+        <v-col cols="12">
+          <v-card
+            class="py-4"
+            color="surface-variant"
+            image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
+            rounded="lg"
+            variant="tonal"
+          >
+            <template #prepend>
+              <v-avatar class="ml-2 mr-4" icon="mdi-rocket-launch-outline" size="60" variant="tonal" />
+            </template>
+
+            <template #image>
+              <v-img position="top right" />
+            </template>
+
+            <template #title>
+              <div class="my-title my-uppercase text-headline-medium font-weight-bold">Get started</div>
+            </template>
+
+            <template #subtitle>
+              <div class="text-body-large">
+                Change this page by updating <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>components/HelloWorld.vue</v-kbd>.
+              </div>
+            </template>
+          </v-card>
+        </v-col>
+
+        <v-col v-for="link in links" :key="link.href" cols="6">
+          <v-card
+            append-icon="mdi-open-in-new"
+            class="py-4"
+            color="surface-variant"
+            :href="link.href"
+            rel="noopener noreferrer"
+            rounded="lg"
+            :subtitle="link.subtitle"
+            target="_blank"
+            :title="link.title"
+            variant="tonal"
+          >
+            <template #prepend>
+              <v-avatar class="ml-2 mr-4" :icon="link.icon" size="60" variant="tonal" />
+            </template>
+          </v-card>
+        </v-col>
+      </v-row>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+  const links = [
+    {
+      href: 'https://vuetifyjs.com/',
+      icon: 'mdi-text-box-outline',
+      subtitle: 'Learn about all things Vuetify in our documentation.',
+      title: 'Documentation',
+    },
+    {
+      href: 'https://vuetifyjs.com/introduction/why-vuetify/#feature-guides',
+      icon: 'mdi-star-circle-outline',
+      subtitle: 'Explore available framework Features.',
+      title: 'Features',
+    },
+    {
+      href: 'https://vuetifyjs.com/components/all',
+      icon: 'mdi-widgets-outline',
+      subtitle: 'Discover components in the API Explorer.',
+      title: 'Components',
+    },
+    {
+      href: 'https://discord.vuetifyjs.com',
+      icon: 'mdi-account-group-outline',
+      subtitle: 'Connect with Vuetify developers.',
+      title: 'Community',
+    },
+  ]
+</script>

src/components/README.md

@@ -0,0 +1,35 @@
+# Components
+
+Vue template files in this folder are automatically imported.
+
+## 🚀 Usage
+
+Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
+
+The following example assumes a component located at `src/components/MyComponent.vue`:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
+```
+
+When your template is rendered, the component's import will automatically be inlined, which renders to this:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import MyComponent from '@/components/MyComponent.vue'
+</script>
+```

src/main.ts

@@ -0,0 +1,21 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Composables
+import { createApp } from 'vue'
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './App.vue'
+
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')

src/pages/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <HelloWorld />
+</template>
+
+<script lang="ts" setup>
+  import HelloWorld from '@/components/HelloWorld.vue'
+</script>

src/plugins/README.md

@@ -0,0 +1,3 @@
+# Plugins
+
+Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.

src/plugins/i18n.ts

@@ -0,0 +1,21 @@
+import { createI18n } from 'vue-i18n'
+
+const messages = {
+  en: {
+    message: {
+      hello: 'hello world',
+    },
+  },
+  ja: {
+    message: {
+      hello: 'こんにちは、世界',
+    },
+  },
+}
+
+export default createI18n({
+  legacy: false,
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages,
+})

src/plugins/index.ts

@@ -0,0 +1,19 @@
+// Types
+import type { App } from 'vue'
+import { createPinia } from 'pinia'
+import router from '../router'
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+import i18n from './i18n'
+// Plugins
+import vuetify from './vuetify'
+
+export function registerPlugins(app: App) {
+  app.use(vuetify)
+  app.use(createPinia())
+  app.use(i18n)
+  app.use(router)
+}

src/plugins/vuetify.ts

@@ -0,0 +1,25 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Composables
+import { createVuetify } from 'vuetify'
+import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
+import themes from '@/styles/themes'
+
+import 'vuetify/styles'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  icons: {
+    defaultSet: 'mdi',
+    aliases,
+    sets: { mdi },
+  },
+  theme: {
+    defaultTheme: 'themeBlueSky',
+    themes,
+  },
+})

src/router/index.ts

@@ -0,0 +1,21 @@
+/**
+ * router/index.ts
+ *
+ * Manual routes for ./src/pages/*.vue
+ */
+
+// Composables
+import { createRouter, createWebHistory } from 'vue-router'
+import Index from '@/pages/index.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      component: Index,
+    },
+  ],
+})
+
+export default router

src/stores/app.ts

@@ -0,0 +1,8 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    //
+  }),
+})

src/styles/README.md

@@ -0,0 +1,3 @@
+# Styles
+
+This directory is for configuring the styles of the application.

src/styles/settings.scss

@@ -0,0 +1,19 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify/settings' with (
+//   $color-pack: false
+// );
+
+@use 'vuetify/settings' with (
+  $body-font-family: (
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif,
+  )
+);

src/styles/themes.ts

@@ -0,0 +1,195 @@
+// src/plugins/themes.ts
+import type { ThemeDefinition } from 'vuetify'
+
+/**
+ * 命名原則：
+ * - themeBlueSky：清爽藍（行政系統預設安全牌）
+ * - themeGrayGraphite：中性灰（內容導向、低干擾）
+ * - themeGreenForest：森林綠（學務/健康/環保）
+ * - themeNavyAcademic：學院海軍藍（正式、權威）
+ * - themeGoldCampus：校園金黃（歡迎頁、活動專題）
+ * - themeMaroonClassic：學院酒紅（傳統院系常見）
+ *
+ * 注意：
+ * - 加入 on-* 前景色，確保文字/icon 對比。
+ * - surface / background 偏淡，降低視覺疲勞。
+ */
+
+export const themeRoseBlossom: ThemeDefinition = {
+  dark: false,
+  colors: {
+    // ---- 基底 ----
+    background: '#FFF8FA', // 溫柔乾淨的粉白
+    surface: '#FFFFFF',
+
+    // ---- 主色系（粉紅）----
+    primary: '#E66A8B', // Rose Pink 500：柔和不刺眼
+    'primary-variant': '#C75173', // Rose Pink 600：確保按鈕/標題可讀
+    accent: '#F5A6C5', // pink accent，用於小型點綴
+
+    // ---- 輔助色（相近色弱化衝突）----
+    secondary: '#C084FC', // Lavender 300：粉色最佳同類搭配
+    'secondary-variant': '#D8B4FE',
+
+    // ---- 功能性色彩 ----
+    success: '#16A34A', // 綠色固定，用於系統成功語意
+    warning: '#F59E0B',
+    error: '#BE123C', // 深莓紅：粉色主題的最佳 error 反差
+    info: '#0EA5E9',
+
+    // ---- 前景色（無障礙）----
+    'on-primary': '#FFFFFF',
+    'on-secondary': '#1D0F2D',
+    'on-surface': '#1F2937',
+    'on-background': '#1F2937',
+  },
+}
+
+// 清爽藍（Light）
+export const themeBlueSky: ThemeDefinition = {
+  dark: false,
+  colors: {
+    background: '#F7F9FC',
+    surface: '#FFFFFF',
+    primary: '#2563EB', // Blue 600
+    'primary-variant': '#1D4ED8', // Blue 700
+    secondary: '#60A5FA', // Blue 400
+    'secondary-variant': '#93C5FD', // Blue 300
+    accent: '#3B82F6', // Blue 500
+    success: '#16A34A', // Green 600
+    warning: '#F59E0B', // Amber 500
+    error: '#DC2626', // Red 600
+    info: '#0EA5E9', // Sky 500
+
+    // 前景色（文字/icon）
+    'on-primary': '#FFFFFF',
+    'on-secondary': '#0B1220',
+    'on-surface': '#0F172A', // Slate 900
+    'on-background': '#0F172A',
+  },
+}
+
+// 中性灰（Light）
+export const themeGrayGraphite: ThemeDefinition = {
+  dark: false,
+  colors: {
+    background: '#F8FAFC', // Slate 50
+    surface: '#FFFFFF',
+    primary: '#4B5563', // Slate 500
+    'primary-variant': '#6B7280', // Slate 600
+    secondary: '#9CA3AF', // Slate 400
+    'secondary-variant': '#D1D5DB', // Slate 300
+    accent: '#A3A3A3',
+    success: '#16A34A',
+    warning: '#F59E0B',
+    error: '#DC2626',
+    info: '#0284C7', // Sky 600
+
+    'on-primary': '#FFFFFF',
+    'on-secondary': '#111827',
+    'on-surface': '#111827',
+    'on-background': '#111827',
+  },
+}
+
+// 森林綠（Light）
+export const themeGreenForest: ThemeDefinition = {
+  dark: false,
+  colors: {
+    background: '#F6FBF8',
+    surface: '#FFFFFF',
+    primary: '#2F855A', // Forest-ish
+    'primary-variant': '#276749',
+    secondary: '#81C784', // Green 300~400
+    'secondary-variant': '#A5D6A7',
+    accent: '#34D399', // Emerald 400
+    success: '#16A34A',
+    warning: '#CA8A04', // Amber 600（提高文本對比）
+    error: '#DC2626',
+    info: '#0EA5E9',
+
+    'on-primary': '#FFFFFF',
+    'on-secondary': '#0F1A14',
+    'on-surface': '#0F172A',
+    'on-background': '#0F172A',
+  },
+}
+
+// 學院海軍藍（Light）
+export const themeNavyAcademic: ThemeDefinition = {
+  dark: false,
+  colors: {
+    background: '#F7F9FC',
+    surface: '#FFFFFF',
+    primary: '#1E3A8A', // Indigo/Navy 800
+    'primary-variant': '#1E40AF', // Blue 800
+    secondary: '#F59E0B', // 校園常見的金色作為點綴
+    'secondary-variant': '#FCD34D',
+    accent: '#334155', // Slate 700（配合嚴肅氛圍）
+    success: '#16A34A',
+    warning: '#D97706',
+    error: '#DC2626',
+    info: '#2563EB',
+
+    'on-primary': '#FFFFFF',
+    'on-secondary': '#301C02',
+    'on-surface': '#0B1220',
+    'on-background': '#0B1220',
+  },
+}
+
+// 校園金黃（Light）
+export const themeGoldCampus: ThemeDefinition = {
+  dark: false,
+  colors: {
+    background: '#FFFBF3', // 溫暖底色避免刺眼
+    surface: '#FFFFFF',
+    primary: '#B45309', // Amber 700（讓白字更可讀）
+    'primary-variant': '#92400E',
+    secondary: '#F59E0B', // Amber 500
+    'secondary-variant': '#FCD34D', // Amber 300
+    accent: '#FBBF24', // Amber 400
+    success: '#15803D', // Green 700
+    warning: '#D97706',
+    error: '#B91C1C',
+    info: '#0EA5E9',
+
+    'on-primary': '#FFFFFF',
+    'on-secondary': '#2E1600',
+    'on-surface': '#1F2937',
+    'on-background': '#1F2937',
+  },
+}
+
+// 學院酒紅（Light）
+export const themeMaroonClassic: ThemeDefinition = {
+  dark: false,
+  colors: {
+    background: '#FCF7F8',
+    surface: '#FFFFFF',
+    primary: '#7B2C2C', // Maroon
+    'primary-variant': '#5B1F1F',
+    secondary: '#E0B34C', // 與酒紅常見的金色搭配
+    'secondary-variant': '#F6D28B',
+    accent: '#9F3A3A',
+    success: '#166534', // Green 800
+    warning: '#CA8A04',
+    error: '#B91C1C',
+    info: '#0EA5E9',
+
+    'on-primary': '#FFFFFF',
+    'on-secondary': '#3A2800',
+    'on-surface': '#111827',
+    'on-background': '#111827',
+  },
+}
+
+export default {
+  themeBlueSky,
+  themeGrayGraphite,
+  themeGreenForest,
+  themeNavyAcademic,
+  themeGoldCampus,
+  themeMaroonClassic,
+  themeRoseBlossom,
+}