@fuzionx/framework 0.1.45 → 0.1.47

package/cli/templates/make/app-spa/views/default/spa/src/views/HomeView.vue

@@ -0,0 +1,215 @@
+<!--
+  HomeView.vue — 랜딩 페이지.
+  
+  SSR home.html 완전 복제:
+  Hero (particles, badge, title, code block), Stats Bar,
+  Features Grid (6개), Architecture Layers, Comparison Table,
+  CTA Section, Footer.
+-->
+<template>
+  <!-- ── Hero Section ── -->
+  <section class="hero-section">
+    <div class="hero-particles">
+      <div class="particle p1"></div>
+      <div class="particle p2"></div>
+      <div class="particle p3"></div>
+      <div class="particle p4"></div>
+      <div class="particle p5"></div>
+      <div class="particle p6"></div>
+    </div>
+    <div class="container hero-container">
+      <div class="hero-badge">⚡ {{ t('home.hero_badge', 'Powered by Rust N-API') }}</div>
+      <h1 class="hero-title">
+        {{ t('home.hero_title_1', 'Build') }} <span class="gradient-text">{{ t('home.hero_title_2', 'Blazing Fast') }}</span><br>
+        {{ t('home.hero_title_3', 'Web Applications') }}
+      </h1>
+      <p class="hero-subtitle">
+        {{ t('home.hero_sub_1', 'Full-stack MVC framework for Node.js with a Rust-powered core engine.') }}<br>
+        {{ t('home.hero_sub_2', '500K+ requests per second. Zero-copy file handling. Native-speed crypto.') }}
+      </p>
+      <div class="hero-actions">
+        <router-link to="/features" class="btn btn-hero-primary">
+          <span>{{ t('home.btn_features', 'Explore Features') }}</span>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </router-link>
+        <router-link to="/chat" class="btn btn-hero-outline">
+          <span>{{ t('home.btn_demo', 'Live Demo') }}</span>
+        </router-link>
+      </div>
+      <CodeBlock title="app.js" :code="heroCode" />
+    </div>
+  </section>
+
+  <!-- ── Stats Bar ── -->
+  <section class="stats-bar">
+    <div class="container">
+      <div class="stats-bar-grid">
+        <div class="stat-bar-item">
+          <span class="stat-bar-number">500K+</span>
+          <span class="stat-bar-label">{{ t('home.stat_rps', 'Requests/sec') }}</span>
+        </div>
+        <div class="stat-bar-divider"></div>
+        <div class="stat-bar-item">
+          <span class="stat-bar-number">3</span>
+          <span class="stat-bar-label">{{ t('home.stat_db', 'Database Drivers') }}</span>
+        </div>
+        <div class="stat-bar-divider"></div>
+        <div class="stat-bar-item">
+          <span class="stat-bar-number">0</span>
+          <span class="stat-bar-label">{{ t('home.stat_zero_copy', 'Memory Copy Uploads') }}</span>
+        </div>
+        <div class="stat-bar-divider"></div>
+        <div class="stat-bar-item">
+          <span class="stat-bar-number">21</span>
+          <span class="stat-bar-label">{{ t('home.stat_modules', 'Core Modules') }}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ── Core Features Grid ── -->
+  <section class="section">
+    <div class="container">
+      <div class="section-header">
+        <h2 class="section-title">{{ t('home.feat_title_1', 'Everything You Need.') }}<br><span class="gradient-text">{{ t('home.feat_title_2', "Nothing You Don't.") }}</span></h2>
+        <p class="section-subtitle">{{ t('home.feat_subtitle', 'A production-ready framework that ships with batteries included — powered by Rust under the hood.') }}</p>
+      </div>
+      <div class="features-showcase">
+        <div v-for="feat in features" :key="feat.icon" class="feature-showcase-card">
+          <div class="feature-icon-wrap"><span class="feature-icon">{{ feat.icon }}</span></div>
+          <h3>{{ feat.title }}</h3>
+          <p>{{ feat.desc }}</p>
+          <span :class="['feature-tag', feat.tagClass]">{{ feat.tag }}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ── Architecture ── -->
+  <section class="section section-dark">
+    <div class="container">
+      <div class="section-header">
+        <h2 class="section-title">{{ t('home.arch_title_1', 'Layered') }} <span class="gradient-text">{{ t('home.arch_title_2', 'Architecture') }}</span></h2>
+        <p class="section-subtitle">{{ t('home.arch_subtitle', 'Three-tier design separating concerns for maximum performance and developer ergonomics.') }}</p>
+      </div>
+      <div class="arch-layers">
+        <div class="arch-layer arch-layer-top">
+          <div class="arch-layer-badge">{{ t('home.arch_you_write', 'You Write') }}</div>
+          <h4>@fuzionx/framework</h4>
+          <p>{{ t('home.arch_framework_desc', 'Controllers, Services, Models, Middleware, WebSocket Handlers, Jobs — Laravel-style MVC with full DI container') }}</p>
+        </div>
+        <div class="arch-connector">
+          <svg width="24" height="30" viewBox="0 0 24 30"><path d="M12 0v24M6 18l6 6 6-6" stroke="rgba(102,126,234,0.6)" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
+        </div>
+        <div class="arch-layer arch-layer-mid">
+          <div class="arch-layer-badge">{{ t('home.arch_engine', 'Engine') }}</div>
+          <h4>@fuzionx/core</h4>
+          <p>{{ t('home.arch_core_desc', 'Express-level HTTP engine wrapping the Rust bridge. Routing, request/response lifecycle, WebSocket server.') }}</p>
+        </div>
+        <div class="arch-connector">
+          <svg width="24" height="30" viewBox="0 0 24 30"><path d="M12 0v24M6 18l6 6 6-6" stroke="rgba(118,75,162,0.6)" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
+        </div>
+        <div class="arch-layer arch-layer-bottom">
+          <div class="arch-layer-badge">{{ t('home.arch_native', 'Native') }}</div>
+          <h4>@fuzionx/bridge</h4>
+          <p>{{ t('home.arch_bridge_desc', 'Rust N-API binary — libuv Fusion HTTP, native crypto, media processing, file I/O. Zero-copy where possible.') }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ── Comparison Table ── -->
+  <section class="section">
+    <div class="container">
+      <div class="section-header">
+        <h2 class="section-title">{{ t('home.why_title_1', 'Why') }} <span class="gradient-text">FuzionX</span>?</h2>
+        <p class="section-subtitle">{{ t('home.why_subtitle', 'See how FuzionX stacks up against popular Node.js frameworks.') }}</p>
+      </div>
+      <div class="comparison-table-wrap">
+        <table class="comparison-table">
+          <thead>
+            <tr>
+              <th>{{ t('home.cmp_feature', 'Feature') }}</th>
+              <th class="highlight-col">FuzionX</th>
+              <th>Express</th>
+              <th>NestJS</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in comparisonRows" :key="row.feature">
+              <td>{{ row.feature }}</td>
+              <td class="highlight-col"><span class="check">✓</span> {{ row.fuzionx }}</td>
+              <td><span :class="row.express.startsWith('✗') ? 'cross' : ''">{{ row.express }}</span></td>
+              <td><span :class="row.nestjs.startsWith('✗') ? 'cross' : ''">{{ row.nestjs }}</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </section>
+
+  <!-- ── CTA ── -->
+  <section class="cta-section">
+    <div class="container">
+      <div class="cta-card glass-card">
+        <h2 class="cta-title">{{ t('home.cta_title_1', 'Ready to Build') }} <span class="gradient-text">{{ t('home.cta_title_2', 'Something Fast') }}</span>?</h2>
+        <p class="cta-subtitle">{{ t('home.cta_subtitle', 'Get started with FuzionX in seconds. One command, zero configuration.') }}</p>
+        <div class="cta-install">
+          <code>npx create-fuzionx my-app</code>
+        </div>
+        <div class="hero-actions" style="margin-top: 1.5rem;">
+          <router-link to="/features" class="btn btn-hero-primary"><span>{{ t('home.btn_all_features', 'View All Features') }}</span></router-link>
+          <router-link to="/chat" class="btn btn-hero-outline"><span>{{ t('home.btn_try_chat', 'Try Chat Demo') }}</span></router-link>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ── Footer ── -->
+  <footer class="site-footer">
+    <div class="container">
+      <div class="footer-content">
+        <span class="footer-brand">FuzionX</span>
+        <span class="footer-text">{{ t('home.footer', 'Rust-powered Node.js framework for the modern web.') }}</span>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useLocale } from '../composables/useLocale.js';
+import CodeBlock from '../components/CodeBlock.vue';
+
+const { t } = useLocale();
+
+/** Hero 코드 블록 HTML (줄바꿈 보장) */
+const heroCode = [
+  `<span class="code-kw">import</span> { Application } <span class="code-kw">from</span> <span class="code-str">'@fuzionx/framework'</span>;`,
+  `<span class="code-kw">const</span> app = <span class="code-kw">new</span> <span class="code-fn">Application</span>({ configPath: <span class="code-str">'./fuzionx.yaml'</span> });`,
+  `<span class="code-kw">await</span> app.<span class="code-fn">boot</span>();`,
+  `<span class="code-kw">await</span> app.<span class="code-fn">listen</span>();  <span class="code-cmt">// 🚀 500K+ RPS ready</span>`,
+].join('\n');
+
+/** Core Features 그리드 데이터 — SSR home.html 6개 카드 */
+const features = computed(() => [
+  { icon: '⚡', title: t('home.feat_bridge', 'Rust N-API Bridge'), desc: t('home.feat_bridge_desc', 'HTTP server, session management, cryptography, and file processing at native speed. No JavaScript overhead for core operations.'), tag: 'Rust', tagClass: 'tag-rust' },
+  { icon: '🗄️', title: t('home.feat_orm', 'Multi-DB ORM'), desc: t('home.feat_orm_desc', 'One unified API for MariaDB, PostgreSQL, and MongoDB. Model-based schema sync replaces migration files.'), tag: 'Node.js', tagClass: 'tag-node' },
+  { icon: '🔌', title: t('home.feat_ws', 'Real-time WebSocket'), desc: t('home.feat_ws_desc', 'Namespace routing, rooms, event-based handlers, and multi-server Hub broadcasting built into the framework.'), tag: 'WebSocket', tagClass: 'tag-ws' },
+  { icon: '🎨', title: t('home.feat_ssr', 'SSR + SPA Hybrid'), desc: t('home.feat_ssr_desc', 'Tera template engine for SSR pages alongside Vue.js SPA — run both in a single project with domain-based routing.'), tag: 'Hybrid', tagClass: 'tag-node' },
+  { icon: '🔐', title: t('home.feat_security', 'Enterprise Security'), desc: t('home.feat_security_desc', 'Native bcrypt/argon2 hashing, AES-256-GCM encryption, ASP wire protocol, CSRF protection, and rate limiting.'), tag: 'Rust', tagClass: 'tag-rust' },
+  { icon: '⏰', title: t('home.feat_queue', 'Task Queue + Workers'), desc: t('home.feat_queue_desc', 'Scheduled jobs (cron), async task queues with retry logic, and WorkerPool for CPU-heavy operations in isolated threads.'), tag: 'Node.js', tagClass: 'tag-node' },
+]);
+
+/** Comparison Table 데이터 — SSR home.html 테이블 */
+const comparisonRows = computed(() => [
+  { feature: t('home.cmp_http', 'HTTP Engine'), fuzionx: 'Rust N-API', express: 'JavaScript', nestjs: 'JavaScript' },
+  { feature: t('home.cmp_orm', 'ORM Built-in'), fuzionx: 'Multi-DB', express: `✗ ${t('home.cmp_3rd_party', '3rd party')}`, nestjs: '✗ TypeORM plugin' },
+  { feature: 'WebSocket', fuzionx: 'Native + Hub', express: '✗ socket.io', nestjs: '✗ Gateway plugin' },
+  { feature: t('home.cmp_upload', 'File Upload'), fuzionx: 'Zero-copy Rust', express: 'multer (JS memory)', nestjs: 'multer (JS memory)' },
+  { feature: 'Crypto/Hash', fuzionx: 'Native Rust', express: 'Node.js crypto', nestjs: 'Node.js crypto' },
+  { feature: t('home.cmp_queue', 'Task Queue'), fuzionx: t('home.cmp_builtin', 'Built-in'), express: '✗ bull/agenda', nestjs: '✗ bull plugin' },
+  { feature: t('home.cmp_schema', 'Schema Sync'), fuzionx: t('home.cmp_model_based', 'Model-based'), express: '✗ N/A', nestjs: '✗ Migrations' },
+  { feature: 'i18n', fuzionx: t('home.cmp_builtin', 'Built-in'), express: '✗ i18next', nestjs: '✗ nestjs-i18n' },
+]);
+</script>

package/cli/templates/make/app-spa/views/default/spa/src/views/Login.vue

@@ -0,0 +1,82 @@
+<!--
+  Login.vue — 로그인 페이지.
+  
+  SSR login.html 완전 복제:
+  Glass card 인증 폼 (이메일, 비밀번호).
+  Pinia auth store로 상태 관리.
+-->
+<template>
+  <div class="auth-container">
+    <div class="glass-card auth-card">
+      <div class="auth-logo">FuzionX</div>
+      <p class="auth-subtitle">{{ t('page.login', '로그인') }}</p>
+
+      <form class="auth-form" @submit.prevent="handleLogin">
+        <div class="form-group">
+          <label for="email">{{ t('label.email', '이메일') }}</label>
+          <input
+            v-model="form.email"
+            type="email"
+            id="email"
+            required
+            placeholder="name@example.com"
+          />
+        </div>
+        <div class="form-group">
+          <label for="password">{{ t('label.password', '비밀번호') }}</label>
+          <input
+            v-model="form.password"
+            type="password"
+            id="password"
+            required
+          />
+        </div>
+
+        <button type="submit" class="btn btn-primary btn-full" :disabled="loading">
+          {{ loading ? '...' : t('btn.login', '로그인') }}
+        </button>
+      </form>
+
+      <div class="auth-footer">
+        {{ t('auth.no_account', '계정이 없으신가요?') }}
+        <router-link to="/register">{{ t('btn.register', '회원가입') }}</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+import { useApi } from '../composables/useApi.js';
+import { useAuthStore } from '../stores/auth.js';
+import { useLocale } from '../composables/useLocale.js';
+import { useToast } from '../plugins/toast.js';
+
+const router = useRouter();
+const api = useApi();
+const authStore = useAuthStore();
+const { t } = useLocale();
+const toast = useToast();
+
+const form = reactive({ email: '', password: '' });
+const loading = ref(false);
+
+/** 로그인 처리 */
+async function handleLogin() {
+  loading.value = true;
+  try {
+    const res = await api.post('/api/auth/login', form);
+    if (res?.user) {
+      authStore.setUser(res.user);
+      router.push('/');
+    } else {
+      toast.error(res?.message || t('error.login_failed', '로그인에 실패했습니다.'));
+    }
+  } catch (e) {
+    toast.error(t('error.network', '네트워크 오류가 발생했습니다.'));
+  } finally {
+    loading.value = false;
+  }
+}
+</script>

package/cli/templates/make/app-spa/views/default/spa/src/views/Profile.vue

@@ -0,0 +1,85 @@
+<!--
+  Profile.vue — 프로필 수정 페이지.
+  
+  SSR profile.html 완전 복제:
+  Glass card 폼 (이름, 이메일, 새 비밀번호, 비밀번호 확인).
+  인증 필요 (auth required).
+-->
+<template>
+  <div class="container">
+    <div class="glass-card">
+      <h1 class="page-title">{{ t('profile.title', '프로필 수정') }}</h1>
+
+      <form class="form" @submit.prevent="handleUpdate">
+        <div class="form-group">
+          <label for="name">{{ t('label.name', '이름') }}</label>
+          <input v-model="form.name" type="text" id="name" required />
+        </div>
+        <div class="form-group">
+          <label for="email">{{ t('label.email', '이메일') }}</label>
+          <input v-model="form.email" type="email" id="email" required />
+        </div>
+        <div class="form-group">
+          <label for="password">{{ t('profile.new_password', '새 비밀번호 (변경 시에만)') }}</label>
+          <input v-model="form.password" type="password" id="password" />
+        </div>
+        <div class="form-group">
+          <label for="password_confirm">{{ t('label.password_confirm', '비밀번호 확인') }}</label>
+          <input v-model="form.password_confirm" type="password" id="password_confirm" />
+        </div>
+
+        <button type="submit" class="btn btn-primary" :disabled="loading">
+          {{ loading ? '...' : t('btn.save', '저장') }}
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { useApi } from '../composables/useApi.js';
+import { useAuthStore } from '../stores/auth.js';
+import { useLocale } from '../composables/useLocale.js';
+import { useToast } from '../plugins/toast.js';
+
+const api = useApi();
+const authStore = useAuthStore();
+const { t } = useLocale();
+const toast = useToast();
+
+const form = reactive({ name: '', email: '', password: '', password_confirm: '' });
+const loading = ref(false);
+
+/** 초기 로드 — 현재 사용자 정보 채우기 */
+onMounted(() => {
+  if (authStore.user) {
+    form.name = authStore.user.name || '';
+    form.email = authStore.user.email || '';
+  }
+});
+
+/** 프로필 업데이트 처리 */
+async function handleUpdate() {
+  if (form.password && form.password !== form.password_confirm) {
+    toast.error(t('error.password_mismatch', '비밀번호가 일치하지 않습니다.'));
+    return;
+  }
+  loading.value = true;
+  try {
+    const res = await api.put('/api/user/profile', form);
+    if (res?.user) {
+      authStore.setUser(res.user);
+      toast.success(t('profile.updated', '프로필이 업데이트되었습니다.'));
+      form.password = '';
+      form.password_confirm = '';
+    } else {
+      toast.error(res?.message || t('error.update_failed', '업데이트에 실패했습니다.'));
+    }
+  } catch (e) {
+    toast.error(t('error.network', '네트워크 오류가 발생했습니다.'));
+  } finally {
+    loading.value = false;
+  }
+}
+</script>

package/cli/templates/make/app-spa/views/default/spa/src/views/Register.vue

@@ -0,0 +1,84 @@
+<!--
+  Register.vue — 회원가입 페이지.
+  
+  SSR register.html 완전 복제:
+  Glass card 인증 폼 (이름, 이메일, 비밀번호, 비밀번호 확인).
+-->
+<template>
+  <div class="auth-container">
+    <div class="glass-card auth-card">
+      <div class="auth-logo">FuzionX</div>
+      <p class="auth-subtitle">{{ t('page.register', '회원가입') }}</p>
+
+      <form class="auth-form" @submit.prevent="handleRegister">
+        <div class="form-group">
+          <label for="name">{{ t('label.name', '이름') }}</label>
+          <input v-model="form.name" type="text" id="name" required />
+        </div>
+        <div class="form-group">
+          <label for="email">{{ t('label.email', '이메일') }}</label>
+          <input v-model="form.email" type="email" id="email" required placeholder="name@example.com" />
+        </div>
+        <div class="form-group">
+          <label for="password">{{ t('label.password', '비밀번호') }}</label>
+          <input v-model="form.password" type="password" id="password" required />
+        </div>
+        <div class="form-group">
+          <label for="password_confirm">{{ t('label.password_confirm', '비밀번호 확인') }}</label>
+          <input v-model="form.password_confirm" type="password" id="password_confirm" required />
+        </div>
+
+        <button type="submit" class="btn btn-primary btn-full" :disabled="loading">
+          {{ loading ? '...' : t('btn.register', '회원가입') }}
+        </button>
+      </form>
+
+      <div class="auth-footer">
+        {{ t('auth.has_account', '이미 계정이 있으신가요?') }}
+        <router-link to="/login">{{ t('btn.login', '로그인') }}</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+import { useApi } from '../composables/useApi.js';
+import { useAuthStore } from '../stores/auth.js';
+import { useLocale } from '../composables/useLocale.js';
+import { useToast } from '../plugins/toast.js';
+import { useAlert } from '../plugins/alert.js';
+
+const router = useRouter();
+const api = useApi();
+const authStore = useAuthStore();
+const { t } = useLocale();
+const toast = useToast();
+const alert = useAlert();
+
+const form = reactive({ name: '', email: '', password: '', password_confirm: '' });
+const loading = ref(false);
+
+/** 회원가입 처리 */
+async function handleRegister() {
+  if (form.password !== form.password_confirm) {
+    toast.error(t('error.password_mismatch', '비밀번호가 일치하지 않습니다.'));
+    return;
+  }
+  loading.value = true;
+  try {
+    const res = await api.post('/api/auth/register', form);
+    if (res?.user) {
+      await alert.show(t('alert.success', '성공'), t('register.success', '회원가입이 완료되었습니다.'));
+      router.push('/login');
+    } else {
+      toast.error(res?.message || t('error.register_failed', '회원가입에 실패했습니다.'));
+    }
+  } catch (e) {
+    toast.error(t('error.network', '네트워크 오류가 발생했습니다.'));
+  } finally {
+    loading.value = false;
+  }
+}
+</script>

package/cli/templates/make/app-spa/views/default/spa/vite.config.js

@@ -0,0 +1,28 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import path from "node:path";
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      "/api": "http://127.0.0.1:49080",
+      "/wasm": "http://127.0.0.1:49080",
+    },
+  },
+  build: {
+    outDir: path.resolve(__dirname, "../../../../public/dist"),
+    emptyOutDir: true,
+    rollupOptions: {
+      output: {
+        entryFileNames: "assets/main.js",
+      },
+    },
+  },
+});