feat: project init
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
# 告訴 EditorConfig 這是最頂層的設定檔,不要再往上找
|
||||
root = true
|
||||
|
||||
[*]
|
||||
# 編碼格式
|
||||
charset = utf-8
|
||||
# 換行符號 (Linux/Mac 建議用 lf,這對教育系統部署到 Linux Server 很重要)
|
||||
end_of_line = lf
|
||||
# 是否在檔案結尾插入新行
|
||||
insert_final_newline = true
|
||||
# 縮排風格 (空格或 Tab)
|
||||
indent_style = space
|
||||
# 縮排大小
|
||||
indent_size = 2
|
||||
# 自動刪除行尾多餘空白
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
# Markdown 檔案有時需要行尾空白來代表換行,所以關閉它
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[package.json]
|
||||
# 有些人喜歡 JSON 用 2 個空格,保持一致
|
||||
indent_size = 2
|
||||
@@ -0,0 +1,3 @@
|
||||
* text=auto
|
||||
|
||||
* eol=lf
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
.eslintcache
|
||||
.stylelintcache
|
||||
@@ -0,0 +1,8 @@
|
||||
# 先忽略根目錄下的所有檔案
|
||||
/*
|
||||
|
||||
# 但是不要忽略這兩個資料夾
|
||||
!/src
|
||||
|
||||
# 也不要忽略 .prettierignore 自己 (選配)
|
||||
!.prettierignore
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "es5",
|
||||
"printWidth": 100,
|
||||
"bracketSpacing": true,
|
||||
"arrowParens": "always",
|
||||
"endOfLine": "auto"
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
# Project Rules
|
||||
|
||||
## General
|
||||
- Follow the existing code style and patterns.
|
||||
@@ -0,0 +1,11 @@
|
||||
# For a complete example, see: https://okigu.com/ruler#complete-example
|
||||
|
||||
# List of agents to configure
|
||||
default_agents = ["copilot", "claude", "trae"]
|
||||
|
||||
[mcp_servers.vuetify]
|
||||
url = "https://mcp.vuetifyjs.com/mcp"
|
||||
|
||||
# https://github.com/vuetifyjs/mcp#authentication
|
||||
# [mcp_servers.vuetify.headers]
|
||||
# Authorization = "Bearer <YOUR_API_KEY>"
|
||||
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"vuetifyjs.vuetify-vscode",
|
||||
"vue.volar"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
# Project Rules
|
||||
|
||||
## General
|
||||
- Follow the existing code style and patterns.
|
||||
- Use pnpm for running project commands.
|
||||
- Keep code in TypeScript unless migration is required.
|
||||
|
||||
## Stack
|
||||
- Framework: Vue 3 + Vite
|
||||
- UI Library: Vuetify
|
||||
- Enabled Features: ESLint, Vuetify MCP, Pinia, Vue I18n, Vue Router
|
||||
|
||||
## Icon Usage
|
||||
```js
|
||||
<script setup>
|
||||
import { mdiAccount } from '@mdi/js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-icon :icon="mdiAccount" />
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,83 @@
|
||||
# skt-vuetify-templates
|
||||
|
||||
Scaffolded with Vuetify CLI.
|
||||
|
||||
## ❗️ Documentation
|
||||
|
||||
- Primary docs: https://vuetifyjs.com/
|
||||
- Getting started guide: https://vuetifyjs.com/en/getting-started/installation/
|
||||
- Community support: https://community.vuetifyjs.com/
|
||||
- Issue tracker: https://issues.vuetifyjs.com/
|
||||
|
||||
## 🧱 Stack
|
||||
|
||||
- Framework: Vue 3 + Vite
|
||||
- UI Library: Vuetify
|
||||
- Language: TypeScript
|
||||
- Package manager: pnpm
|
||||
|
||||
## 🧭 Start Here
|
||||
|
||||
- Main entry: `src/main.ts`
|
||||
- Main app component: `src/App.vue`
|
||||
- Main styles: `src/styles/`
|
||||
- Plugin setup: `src/plugins/`
|
||||
|
||||
## 📁 Project Structure
|
||||
|
||||
- `src/main.ts` — application entry point
|
||||
- `src/App.vue` — root component
|
||||
- `src/components/` — reusable Vue components
|
||||
- `src/plugins/` — plugin registration and setup
|
||||
- `src/styles/` — global styles and theme settings
|
||||
- `public/` — static public files
|
||||
|
||||
## ✨ Enabled Features
|
||||
|
||||
- ESLint
|
||||
- Vuetify MCP
|
||||
- Pinia
|
||||
- Vue I18n
|
||||
- Vue Router
|
||||
|
||||
## 💿 Install
|
||||
|
||||
Use your selected package manager (pnpm) to install dependencies:
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
## 🏗️ Build
|
||||
|
||||
```bash
|
||||
pnpm build
|
||||
```
|
||||
|
||||
## 🧪 Available Scripts
|
||||
|
||||
- `pnpm dev`
|
||||
- `pnpm build`
|
||||
- `pnpm preview`
|
||||
- `pnpm build-only`
|
||||
- `pnpm type-check`
|
||||
- `pnpm lint`
|
||||
- `pnpm lint:fix`
|
||||
- `pnpm mcp`
|
||||
- `pnpm mcp:revert`
|
||||
|
||||
## 💪 Support Vuetify Development
|
||||
|
||||
This project uses Vuetify - an MIT licensed Open Source project. We are glad to welcome contributors and any support for ongoing development:
|
||||
|
||||
- Contribute to Vuetify and ecosystem projects: https://github.com/vuetifyjs
|
||||
- Request enterprise support: https://support.vuetifyjs.com/
|
||||
- Sponsor on GitHub: https://github.com/sponsors/vuetifyjs
|
||||
- Support on Open Collective: https://opencollective.com/vuetify
|
||||
@@ -0,0 +1,2 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite-plugin-vue-layouts-next/client" />
|
||||
@@ -0,0 +1,8 @@
|
||||
import eslintConfigPrettier from "eslint-config-prettier/flat";
|
||||
import vuetify from 'eslint-config-vuetify'
|
||||
|
||||
export default vuetify({
|
||||
ts: true,
|
||||
},{
|
||||
extends: [eslintConfigPrettier]
|
||||
})
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Welcome to Vuetify 4</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"name": "skt-vuetify-templates",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check \"build-only {@}\" --",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build --force",
|
||||
"lint": "eslint",
|
||||
"lint:fix": "eslint --fix",
|
||||
"mcp": "ruler apply",
|
||||
"mcp:revert": "ruler revert"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/js": "^7.4.47",
|
||||
"pinia": "^3.0.4",
|
||||
"vue": "^3.5.31",
|
||||
"vue-i18n": "^11.3.0",
|
||||
"vue-router": "^5.0.4",
|
||||
"vuetify": "^4.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@intellectronica/ruler": "^0.3.37",
|
||||
"@tsconfig/node22": "^22.0.5",
|
||||
"@types/node": "^24.12.0",
|
||||
"@vitejs/plugin-vue": "^6.0.5",
|
||||
"@vue/tsconfig": "^0.9.1",
|
||||
"eslint": "^9.39.4",
|
||||
"eslint-config-prettier": "^10.1.8",
|
||||
"eslint-config-vuetify": "^4.4.0",
|
||||
"npm-run-all2": "^8.0.4",
|
||||
"sass-embedded": "^1.98.0",
|
||||
"typescript": "~5.9.3",
|
||||
"vite": "^8.0.2",
|
||||
"vite-plugin-vuetify": "^2.1.3",
|
||||
"vue-tsc": "^3.2.6"
|
||||
},
|
||||
"overrides": {}
|
||||
}
|
||||
Generated
+3572
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
+11
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-main>
|
||||
<router-view />
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
//
|
||||
</script>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 526 B |
@@ -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>
|
||||
@@ -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>
|
||||
```
|
||||
+21
@@ -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')
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<HelloWorld />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
</script>
|
||||
@@ -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.
|
||||
@@ -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,
|
||||
})
|
||||
@@ -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)
|
||||
}
|
||||
@@ -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,
|
||||
},
|
||||
})
|
||||
@@ -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
|
||||
@@ -0,0 +1,8 @@
|
||||
// Utilities
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useAppStore = defineStore('app', {
|
||||
state: () => ({
|
||||
//
|
||||
}),
|
||||
})
|
||||
@@ -0,0 +1,3 @@
|
||||
# Styles
|
||||
|
||||
This directory is for configuring the styles of the application.
|
||||
@@ -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,
|
||||
)
|
||||
);
|
||||
@@ -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,
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": [
|
||||
"env.d.ts",
|
||||
"src/**/*",
|
||||
"src/**/*.vue"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/__tests__/*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": ".",
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"vueCompilerOptions": {
|
||||
"plugins": [
|
||||
"vue-router/volar/sfc-typed-router",
|
||||
"vue-router/volar/sfc-route-blocks"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": "@tsconfig/node22/tsconfig.json",
|
||||
"include": [
|
||||
"vite.config.*",
|
||||
"vitest.config.*",
|
||||
"cypress.config.*",
|
||||
"nightwatch.conf.*",
|
||||
"playwright.config.*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"noEmit": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
import Vue from '@vitejs/plugin-vue'
|
||||
import { defineConfig } from 'vite'
|
||||
import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
Vue({
|
||||
template: { transformAssetUrls },
|
||||
}),
|
||||
// https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
|
||||
Vuetify({
|
||||
autoImport: true,
|
||||
styles: {
|
||||
configFile: 'src/styles/settings.scss',
|
||||
},
|
||||
})
|
||||
],
|
||||
define: { 'process.env': {} },
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('src', import.meta.url)),
|
||||
},
|
||||
extensions: [
|
||||
'.js',
|
||||
'.json',
|
||||
'.jsx',
|
||||
'.mjs',
|
||||
'.ts',
|
||||
'.tsx',
|
||||
'.vue',
|
||||
],
|
||||
},
|
||||
server: {
|
||||
port: 3700,
|
||||
proxy:{
|
||||
"/service/": {
|
||||
target: "http://192.168.89.54:9002",
|
||||
changeOrigin: true,
|
||||
},
|
||||
}
|
||||
},
|
||||
build: {
|
||||
rollupOptions: {
|
||||
output: {
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user