create-yiougo 1.0.0

package/template/src/main.ts

@@ -0,0 +1,20 @@
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import { Quasar } from 'quasar';
+import router from './router';
+import App from './App.vue';
+
+// import layouts from 'virtual:generated-layouts' // vite-plugin-vue-layouts 自动处理
+
+import '@quasar/extras/material-icons/material-icons.css';
+import 'quasar/src/css/index.sass';
+import './styles/main.scss';
+
+const app = createApp(App);
+const pinia = createPinia();
+
+app.use(pinia);
+app.use(router);
+app.use(Quasar, {});
+
+app.mount('#app');

package/template/src/pages/about.vue

@@ -0,0 +1,111 @@
+<template>
+  <q-page class="q-pa-md">
+    <q-card>
+      <q-card-section>
+        <div class="text-h4 q-mb-md">About Yiougo</div>
+        <p class="text-body1">
+          A modern full-stack application template built with cutting-edge technologies.
+        </p>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-section>
+        <div class="text-h6 q-mb-md">Backend Stack</div>
+        <q-list>
+          <q-item>
+            <q-item-section avatar>
+              <q-icon color="primary" name="check_circle" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Elysia</q-item-label>
+              <q-item-label caption>Fast and ergonomic web framework for Bun</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section avatar>
+              <q-icon color="primary" name="check_circle" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>MongoDB</q-item-label>
+              <q-item-label caption>NoSQL database</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section avatar>
+              <q-icon color="primary" name="check_circle" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Redis</q-item-label>
+              <q-item-label caption>In-memory data store for caching</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-section>
+        <div class="text-h6 q-mb-md">Frontend Stack</div>
+        <q-list>
+          <q-item>
+            <q-item-section avatar>
+              <q-icon color="secondary" name="check_circle" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Vue 3</q-item-label>
+              <q-item-label caption>Progressive JavaScript framework</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section avatar>
+              <q-icon color="secondary" name="check_circle" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Vite</q-item-label>
+              <q-item-label caption>Next generation frontend tooling</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section avatar>
+              <q-icon color="secondary" name="check_circle" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Quasar</q-item-label>
+              <q-item-label caption>Vue component framework</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section avatar>
+              <q-icon color="secondary" name="check_circle" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Pinia</q-item-label>
+              <q-item-label caption>Vue store</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section avatar>
+              <q-icon color="secondary" name="check_circle" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Vue Router</q-item-label>
+              <q-item-label caption>Official router for Vue.js</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card-section>
+    </q-card>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<route lang="yaml">
+meta:
+  layout: default
+</route>
+
+<style lang="scss" scoped>
+</style>

package/template/src/pages/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <q-page class="flex flex-center">
+    <div class="text-center">
+      <h1 class="text-h2 text-primary q-mb-md">Welcome to Yiougo</h1>
+      <p class="text-h6 text-grey-7 q-mb-lg">
+        A modern full-stack application built with Elysia and Vue 3
+      </p>
+      <div class="q-gutter-md">
+        <q-btn
+          color="primary"
+          label="View Users"
+          icon="people"
+          to="/users"
+          size="lg"
+        />
+        <q-btn
+          color="secondary"
+          label="About"
+          icon="info"
+          to="/about"
+          size="lg"
+          outline
+        />
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<route lang="yaml">
+meta:
+  layout: default
+</route>
+
+<style lang="scss" scoped>
+</style>

package/template/src/pages/users.vue

@@ -0,0 +1,126 @@
+<template>
+  <q-page class="q-pa-md">
+    <div class="row justify-between items-center q-mb-md">
+      <h4 class="q-ma-none">Users</h4>
+      <q-btn color="primary" label="Add User" icon="add" @click="showDialog = true" />
+    </div>
+
+    <q-card>
+      <q-card-section>
+        <q-table
+          :rows="userStore.users"
+          :columns="columns"
+          row-key="_id"
+          :loading="userStore.loading"
+          flat
+          bordered
+        >
+          <template v-slot:body-cell-actions="props">
+            <q-td :props="props">
+              <q-btn
+                flat
+                round
+                dense
+                color="negative"
+                icon="delete"
+                @click="handleDelete(props.row._id)"
+              />
+            </q-td>
+          </template>
+        </q-table>
+      </q-card-section>
+    </q-card>
+
+    <q-dialog v-model="showDialog">
+      <q-card style="min-width: 400px">
+        <q-card-section>
+          <div class="text-h6">Add New User</div>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none">
+          <q-input v-model="newUser.username" label="Username" />
+          <q-input v-model="newUser.email" label="Email" type="email" />
+          <q-input v-model="newUser.password" label="Password" type="password" />
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn flat label="Cancel" color="primary" v-close-popup />
+          <q-btn label="Create" color="primary" @click="handleCreate" />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useUserStore } from '@/stores/user.store';
+import { useQuasar } from 'quasar';
+
+const userStore = useUserStore();
+const $q = useQuasar();
+const showDialog = ref(false);
+const newUser = ref({
+  username: '',
+  email: '',
+  password: ''
+});
+
+const columns = [
+  { name: 'username', label: 'Username', field: 'username', align: 'left' as const },
+  { name: 'email', label: 'Email', field: 'email', align: 'left' as const },
+  { name: 'createdAt', label: 'Created At', field: 'createdAt', align: 'left' as const },
+  { name: 'actions', label: 'Actions', field: 'actions', align: 'center' as const }
+];
+
+onMounted(() => {
+  userStore.fetchUsers();
+});
+
+async function handleCreate() {
+  await userStore.createUser(newUser.value);
+  if (!userStore.error) {
+    showDialog.value = false;
+    newUser.value = { username: '', email: '', password: '' };
+    $q.notify({
+      type: 'positive',
+      message: 'User created successfully'
+    });
+  } else {
+    $q.notify({
+      type: 'negative',
+      message: userStore.error
+    });
+  }
+}
+
+async function handleDelete(id: string) {
+  $q.dialog({
+    title: 'Confirm',
+    message: 'Are you sure you want to delete this user?',
+    cancel: true,
+    persistent: true
+  }).onOk(async () => {
+    await userStore.deleteUser(id);
+    if (!userStore.error) {
+      $q.notify({
+        type: 'positive',
+        message: 'User deleted successfully'
+      });
+    } else {
+      $q.notify({
+        type: 'negative',
+        message: userStore.error
+      });
+    }
+  });
+}
+</script>
+
+<route lang="yaml">
+meta:
+  layout: default
+</route>
+
+<style lang="scss" scoped>
+</style>

package/template/src/router/index.ts

@@ -0,0 +1,12 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { setupLayouts } from 'virtual:generated-layouts'
+import generatedRoutes from '~pages'
+
+const routes = setupLayouts(generatedRoutes)
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+})
+
+export default router;

package/template/src/stores/user.store.ts

@@ -0,0 +1,64 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import type { User } from '@shared/types';
+import { userApi } from '@/api/user.api';
+
+export const useUserStore = defineStore('user', () => {
+  const users = ref<User[]>([]);
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+
+  async function fetchUsers() {
+    loading.value = true;
+    error.value = null;
+    try {
+      const response = await userApi.getAll();
+      if (response.success) {
+        users.value = response.data;
+      }
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to fetch users';
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function createUser(userData: Partial<User>) {
+    loading.value = true;
+    error.value = null;
+    try {
+      const response = await userApi.create(userData);
+      if (response.success) {
+        users.value.push(response.data);
+      }
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to create user';
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function deleteUser(id: string) {
+    loading.value = true;
+    error.value = null;
+    try {
+      const response = await userApi.delete(id);
+      if (response.success) {
+        users.value = users.value.filter(u => u._id !== id);
+      }
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to delete user';
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  return {
+    users,
+    loading,
+    error,
+    fetchUsers,
+    createUser,
+    deleteUser
+  };
+});

package/template/src/styles/main.scss

@@ -0,0 +1,15 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/template/src/styles/quasar-variables.sass

@@ -0,0 +1,8 @@
+$primary: #1976D2
+$secondary: #26A69A
+$accent: #9C27B0
+$dark: #1D1D1D
+$positive: #21BA45
+$negative: #C10015
+$info: #31CCEC
+$warning: #F2C037

package/template/src/types/global.d.ts

@@ -0,0 +1,28 @@
+// 全局类型声明
+declare module '~pages' {
+  import type { RouteRecordRaw } from 'vue-router'
+  const routes: RouteRecordRaw[]
+  export default routes
+}
+
+declare module 'node:url' {
+  export * from 'url'
+}
+
+declare module 'vite-plugin-pages' {
+  export interface PagesOptions {
+    dirs?: string[]
+    extensions?: string[]
+    importMode?: 'sync' | 'async'
+    routeBlockLang?: string
+  }
+  export default function Pages(options?: PagesOptions): any
+}
+
+declare module 'vite-plugin-vue-layouts' {
+  export interface LayoutsOptions {
+    layoutsDirs?: string
+    defaultLayout?: string
+  }
+  export default function Layouts(options?: LayoutsOptions): any
+}

package/template/src/utils/date.ts

@@ -0,0 +1,49 @@
+export function formatDate(date: Date | string, format: string = 'YYYY-MM-DD'): string {
+  const d = new Date(date)
+  
+  if (isNaN(d.getTime())) {
+    return ''
+  }
+  
+  const year = d.getFullYear()
+  const month = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  const hours = String(d.getHours()).padStart(2, '0')
+  const minutes = String(d.getMinutes()).padStart(2, '0')
+  const seconds = String(d.getSeconds()).padStart(2, '0')
+  
+  return format
+    .replace('YYYY', String(year))
+    .replace('MM', month)
+    .replace('DD', day)
+    .replace('HH', hours)
+    .replace('mm', minutes)
+    .replace('ss', seconds)
+}
+
+export function timeAgo(date: Date | string): string {
+  const now = new Date()
+  const past = new Date(date)
+  const diffInSeconds = Math.floor((now.getTime() - past.getTime()) / 1000)
+  
+  if (diffInSeconds < 60) {
+    return '刚刚'
+  }
+  
+  const diffInMinutes = Math.floor(diffInSeconds / 60)
+  if (diffInMinutes < 60) {
+    return `${diffInMinutes}分钟前`
+  }
+  
+  const diffInHours = Math.floor(diffInMinutes / 60)
+  if (diffInHours < 24) {
+    return `${diffInHours}小时前`
+  }
+  
+  const diffInDays = Math.floor(diffInHours / 24)
+  if (diffInDays < 30) {
+    return `${diffInDays}天前`
+  }
+  
+  return formatDate(past)
+}

package/template/src/utils/index.ts

@@ -0,0 +1,3 @@
+// 工具函数导出
+export * from './date'
+export * from './storage'

package/template/src/utils/storage.ts

@@ -0,0 +1,56 @@
+export function getStorage<T>(key: string, defaultValue?: T): T | null {
+  try {
+    const item = localStorage.getItem(key)
+    if (item === null) {
+      return defaultValue ?? null
+    }
+    return JSON.parse(item) as T
+  } catch {
+    return defaultValue ?? null
+  }
+}
+
+export function setStorage<T>(key: string, value: T): void {
+  try {
+    localStorage.setItem(key, JSON.stringify(value))
+  } catch (error) {
+    console.error('Failed to save to localStorage:', error)
+  }
+}
+
+export function removeStorage(key: string): void {
+  try {
+    localStorage.removeItem(key)
+  } catch (error) {
+    console.error('Failed to remove from localStorage:', error)
+  }
+}
+
+export function clearStorage(): void {
+  try {
+    localStorage.clear()
+  } catch (error) {
+    console.error('Failed to clear localStorage:', error)
+  }
+}
+
+// Session Storage
+export function getSessionStorage<T>(key: string, defaultValue?: T): T | null {
+  try {
+    const item = sessionStorage.getItem(key)
+    if (item === null) {
+      return defaultValue ?? null
+    }
+    return JSON.parse(item) as T
+  } catch {
+    return defaultValue ?? null
+  }
+}
+
+export function setSessionStorage<T>(key: string, value: T): void {
+  try {
+    sessionStorage.setItem(key, JSON.stringify(value))
+  } catch (error) {
+    console.error('Failed to save to sessionStorage:', error)
+  }
+}

package/template/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/template/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@shared/*": ["./shared/*"]
+    },
+    "types": ["vite/client", "node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "shared/**/*.ts"]
+}

package/template/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/template/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/tsconfig.server.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "baseUrl": ".",
+    "paths": {
+      "@shared/*": ["./shared/*"]
+    },
+    "types": ["bun-types"]
+  },
+  "include": ["server/**/*.ts", "shared/**/*.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,42 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
+import Pages from 'vite-plugin-pages'
+import Layouts from 'vite-plugin-vue-layouts'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue({
+      template: { transformAssetUrls }
+    }),
+    Pages({
+      dirs: ['src/pages'],
+      extensions: ['vue'],
+      importMode: 'async',
+      routeBlockLang: 'yaml'
+    }),
+    Layouts(),
+    quasar({
+      sassVariables: fileURLToPath(new URL('./src/styles/quasar-variables.sass', import.meta.url))
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@shared': fileURLToPath(new URL('./shared', import.meta.url))
+    }
+  },
+  server: {
+    port: 5173,
+    host: '0.0.0.0',
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true
+      }
+    }
+  }
+})