create-soybean 1.7.0 → 1.7.1

package/template-ubean/src/components/islands/IslandCounter.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const count = ref(0);
+const mountedAt = ref<string>('');
+
+function increment() {
+  count.value++;
+}
+
+onMounted(() => {
+  mountedAt.value = new Date().toISOString();
+});
+</script>
+
+<template>
+  <div class="island-counter">
+    <p class="island-label">client:load Island</p>
+    <p class="counter-value">{{ count }}</p>
+    <button @click="increment">+1</button>
+    <p v-if="mountedAt" class="mounted-info">Mounted at: {{ mountedAt }}</p>
+  </div>
+</template>
+
+<style scoped>
+.island-counter {
+  padding: 1rem;
+  border: 2px solid #42b883;
+  border-radius: 8px;
+  background: #f0fdf4;
+}
+
+.island-label {
+  font-size: 0.8rem;
+  color: #15803d;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.counter-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #166534;
+}
+
+button {
+  padding: 0.4rem 1rem;
+  background: #42b883;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+button:hover {
+  background: #35495e;
+}
+
+.mounted-info {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+  font-family: monospace;
+}
+</style>

package/template-ubean/src/components/islands/IslandMedia.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+
+const isWide = ref(false);
+const checks = ref(0);
+let mql: MediaQueryList | null = null;
+
+function onChange(e: MediaQueryListEvent) {
+  isWide.value = e.matches;
+  checks.value++;
+}
+
+onMounted(() => {
+  mql = window.matchMedia('(min-width: 768px)');
+  isWide.value = mql.matches;
+  mql.addEventListener('change', onChange);
+});
+
+onUnmounted(() => {
+  if (mql) mql.removeEventListener('change', onChange);
+});
+</script>
+
+<template>
+  <div class="island-media">
+    <p class="island-label">client:media Island</p>
+    <p class="media-status" :class="{ wide: isWide, narrow: !isWide }">
+      {{ isWide ? '🖥 Wide screen (≥768px)' : '📱 Narrow screen (<768px)' }}
+    </p>
+    <p class="media-info">Media query changes: {{ checks }}</p>
+    <p class="media-hint">Resize browser to trigger media query changes</p>
+  </div>
+</template>
+
+<style scoped>
+.island-media {
+  padding: 1rem;
+  border: 2px solid #8b5cf6;
+  border-radius: 8px;
+  background: #f5f3ff;
+}
+
+.island-label {
+  font-size: 0.8rem;
+  color: #6d28d9;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.media-status {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.media-status.wide {
+  color: #166534;
+}
+
+.media-status.narrow {
+  color: #92400e;
+}
+
+.media-info,
+.media-hint {
+  margin-top: 0.3rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+</style>

package/template-ubean/src/components/islands/IslandOnly.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const clientTime = ref<string>('');
+
+onMounted(() => {
+  clientTime.value = new Date().toISOString();
+});
+</script>
+
+<template>
+  <div class="island-only">
+    <p class="island-label">client:only Island</p>
+    <p class="only-status">✓ Rendered on client only</p>
+    <p v-if="clientTime" class="only-time">Client time: {{ clientTime }}</p>
+    <p class="only-hint">This component was NOT server-side rendered</p>
+  </div>
+</template>
+
+<style scoped>
+.island-only {
+  padding: 1rem;
+  border: 2px dashed #ec4899;
+  border-radius: 8px;
+  background: #fdf2f8;
+}
+
+.island-label {
+  font-size: 0.8rem;
+  color: #be185d;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.only-status {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #166534;
+}
+
+.only-time {
+  margin-top: 0.3rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+  font-family: monospace;
+}
+
+.only-hint {
+  margin-top: 0.3rem;
+  font-size: 0.75rem;
+  color: #9ca3af;
+  font-style: italic;
+}
+</style>

package/template-ubean/src/components/islands/IslandVisibility.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const visible = ref(false);
+const visibleCount = ref(0);
+const firstVisibleAt = ref<string>('');
+
+onMounted(() => {
+  // The IntersectionObserver is set up by the bootstrap script;
+  // once the island is hydrated, we mark it as visible.
+  visible.value = true;
+  visibleCount.value = 1;
+  firstVisibleAt.value = new Date().toISOString();
+});
+</script>
+
+<template>
+  <div class="island-visibility">
+    <p class="island-label">client:visible Island</p>
+    <p class="vis-status" :class="{ active: visible }">
+      {{ visible ? '✓ Visible & Hydrated' : '○ Waiting for visibility...' }}
+    </p>
+    <p v-if="firstVisibleAt" class="vis-time">First visible: {{ firstVisibleAt }}</p>
+    <p class="vis-count">Visibility events: {{ visibleCount }}</p>
+  </div>
+</template>
+
+<style scoped>
+.island-visibility {
+  padding: 1rem;
+  border: 2px solid #f59e0b;
+  border-radius: 8px;
+  background: #fffbeb;
+}
+
+.island-label {
+  font-size: 0.8rem;
+  color: #b45309;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.vis-status {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #92400e;
+}
+
+.vis-status.active {
+  color: #166534;
+}
+
+.vis-time,
+.vis-count {
+  margin-top: 0.3rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+  font-family: monospace;
+}
+</style>

package/template-ubean/src/layouts/admin.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="src-layouts-admin-layout">
+    <PageView />
+  </div>
+</template>
+
+<style scoped>
+.src-layouts-admin-layout {
+  min-height: 100vh;
+}
+</style>

package/template-ubean/src/layouts/default.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="layout">
+    <header class="header">
+      <nav class="nav">
+        <Link to="/" class="logo">ubean-app</Link>
+        <div class="nav-links">
+          <Link to="/">首页</Link>
+          <Link to="/about">关于</Link>
+          <Link to="/data-fetch">数据请求</Link>
+          <Link to="/islands-test">Islands</Link>
+          <Link to="/blog/hello">博客</Link>
+        </div>
+      </nav>
+    </header>
+    <main class="main">
+      <PageView />
+    </main>
+    <footer class="footer">
+      <p>ubean 应用模板</p>
+    </footer>
+  </div>
+</template>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.header {
+  background: linear-gradient(135deg, #42b883, #35495e);
+  padding: 0 20px;
+}
+
+.nav {
+  max-width: 960px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+}
+
+.logo {
+  color: white;
+  font-size: 1.3rem;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.nav-links {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.nav-links a {
+  color: rgba(255, 255, 255, 0.9);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.95rem;
+  transition: color 0.2s;
+}
+
+.nav-links a:hover {
+  color: white;
+}
+
+.main {
+  flex: 1;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  width: 100%;
+}
+
+.footer {
+  background: #2c3e50;
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
+  padding: 1.2rem;
+}
+
+.footer p {
+  margin: 0;
+  font-size: 0.9rem;
+}
+</style>

package/template-ubean/src/locales/en.json

@@ -0,0 +1,31 @@
+{
+  "app": {
+    "title": "Ubean Test",
+    "description": "A test project for ubean framework"
+  },
+  "common": {
+    "hello": "Hello, {name}!",
+    "welcome": "Welcome to ubean",
+    "goodbye": "Goodbye"
+  },
+  "items": {
+    "count": "You have {count} item | You have {count} items",
+    "explicit": "No items | One item | Many items",
+    "categorized": "zero: No items | one: One item | other: {count} items"
+  },
+  "navigation": {
+    "home": "Home",
+    "about": "About",
+    "features": "Features",
+    "dashboard": "Dashboard"
+  },
+  "linked": {
+    "greeting": "Hello, @:common.hello",
+    "nested": "@:navigation.home page"
+  },
+  "messages": {
+    "loading": "Loading...",
+    "error": "An error occurred",
+    "success": "Operation completed successfully"
+  }
+}

package/template-ubean/src/locales/zh.json

@@ -0,0 +1,31 @@
+{
+  "app": {
+    "title": "Ubean 测试",
+    "description": "ubean 框架测试项目"
+  },
+  "common": {
+    "hello": "你好，{name}！",
+    "welcome": "欢迎使用 ubean",
+    "goodbye": "再见"
+  },
+  "items": {
+    "count": "你有 {count} 个项目",
+    "explicit": "没有项目 | 一个项目 | 很多项目",
+    "categorized": "zero: 没有项目 | one: 一个项目 | other: {count} 个项目"
+  },
+  "navigation": {
+    "home": "首页",
+    "about": "关于",
+    "features": "功能",
+    "dashboard": "仪表盘"
+  },
+  "linked": {
+    "greeting": "你好，@:common.hello",
+    "nested": "@:navigation.home 页面"
+  },
+  "messages": {
+    "loading": "加载中...",
+    "error": "发生错误",
+    "success": "操作成功完成"
+  }
+}

package/template-ubean/src/middleware/01.global.ts

@@ -0,0 +1,9 @@
+import { defineMiddleware } from 'ubean/server';
+
+export default defineMiddleware(async (c, next) => {
+  const start = Date.now();
+  await next();
+  const duration = Date.now() - start;
+  c.header('X-Test-Middleware', 'ubean-test-global');
+  c.header('X-Response-Time', `${duration}ms`);
+});

package/template-ubean/src/pages/about.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+definePage({
+  head: {
+    title: '关于 - ubean-test',
+    meta: [{ name: 'description', content: 'ubean 框架功能测试项目介绍页' }]
+  }
+});
+</script>
+
+<template>
+  <div class="about">
+    <h1>关于 ubean-test</h1>
+    <p>这是一个用于验证 ubean 框架各项功能的测试项目。</p>
+
+    <section class="info-section">
+      <h2>测试的功能模块</h2>
+      <div class="feature-list">
+        <div class="feature-item">
+          <span class="check">✅</span>
+          <span>文件系统路由 (API + Pages)</span>
+        </div>
+        <div class="feature-item">
+          <span class="check">✅</span>
+          <span>布局系统 (Layouts)</span>
+        </div>
+        <div class="feature-item">
+          <span class="check">✅</span>
+          <span>SSR 服务端渲染</span>
+        </div>
+        <div class="feature-item">
+          <span class="check">✅</span>
+          <span>客户端导航</span>
+        </div>
+        <div class="feature-item">
+          <span class="check">✅</span>
+          <span>API 路由与验证器</span>
+        </div>
+        <div class="feature-item">
+          <span class="check">✅</span>
+          <span>中间件系统</span>
+        </div>
+        <div class="feature-item">
+          <span class="check">✅</span>
+          <span>环境变量管理 (defineEnv)</span>
+        </div>
+        <div class="feature-item">
+          <span class="check">✅</span>
+          <span>定时任务 (Cron)</span>
+        </div>
+        <div class="feature-item">
+          <span class="check">✅</span>
+          <span>国际化 (i18n)</span>
+        </div>
+        <div class="feature-item">
+          <span class="check">✅</span>
+          <span>错误处理</span>
+        </div>
+        <div class="feature-item">
+          <span class="check">✅</span>
+          <span>响应工具 (json/text/html/redirect)</span>
+        </div>
+        <div class="feature-item">
+          <span class="check">✅</span>
+          <span>SEO (robots/sitemap)</span>
+        </div>
+        <div class="feature-item">
+          <span class="check">✅</span>
+          <span>DevTools</span>
+        </div>
+      </div>
+    </section>
+
+    <Link to="/" class="back-link">← 返回首页</Link>
+  </div>
+</template>
+
+<style scoped>
+.about h1 {
+  color: #42b883;
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.about p {
+  color: #555;
+  font-size: 1.1rem;
+  line-height: 1.7;
+  margin-bottom: 2rem;
+}
+
+.info-section {
+  margin: 2rem 0;
+}
+
+.info-section h2 {
+  color: #35495e;
+  font-size: 1.4rem;
+  margin-bottom: 1.2rem;
+  border-bottom: 2px solid #42b883;
+  padding-bottom: 0.5rem;
+}
+
+.feature-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 0.6rem;
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.6rem 0.8rem;
+  background: #f0f9f4;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  color: #444;
+}
+
+.check {
+  font-size: 1rem;
+}
+
+.back-link {
+  display: inline-block;
+  margin-top: 2rem;
+  color: #42b883;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.back-link:hover {
+  text-decoration: underline;
+}
+</style>

package/template-ubean/src/pages/blog/[...slug].vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+definePage({
+  path: '/blog/:slug(.*)*'
+});
+
+const route = useRoute('BlogAllSlug');
+const slug = computed(() => {
+  const value = route.params.slug;
+  if (Array.isArray(value)) return value.filter(Boolean).join('/');
+  return typeof value === 'string' ? value : '';
+});
+</script>
+
+<template>
+  <article>
+    <h1>Blog {{ slug }}</h1>
+    <p>
+      Catch-all file route for
+      <code>@ubean/content</code>
+      . Prerender URLs come from
+      <code>discoverContentPageRoutes</code>
+      /
+      <code>extractContentPageRoutes</code>
+      .
+    </p>
+  </article>
+</template>

package/template-ubean/src/pages/dashboard/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+useHead({
+  title: '控制台'
+});
+</script>
+
+<template>
+  <div class="dashboard-page">
+    <h1>控制台首页</h1>
+    <p>
+      使用 admin 布局的页面示例 -
+      <code>/dashboard</code>
+      (见
+      <code>src/layouts/admin.vue</code>
+      )
+    </p>
+    <Link to="/">← 返回首页</Link>
+  </div>
+</template>