create-soybean 1.7.0 → 1.7.1

package/template-ubean/src/pages/data-fetch.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+useHead({
+  title: '数据请求 - ubean App',
+  meta: [{ name: 'description', content: '客户端数据请求与 useData 示例' }]
+});
+
+interface ApiResponse {
+  method: string;
+  url: string;
+  status: number;
+  data: unknown;
+  duration: number;
+}
+
+const results = ref<ApiResponse[]>([]);
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+async function fetchApi(method: string, url: string, body?: unknown): Promise<ApiResponse> {
+  const start = performance.now();
+  const init: RequestInit = { method, headers: { 'Content-Type': 'application/json' } };
+  if (body) init.body = JSON.stringify(body);
+  const res = await fetch(url, init);
+  const data = await res.json().catch(() => null);
+  const duration = Math.round(performance.now() - start);
+  return { method, url, status: res.status, data, duration };
+}
+
+async function runTests() {
+  loading.value = true;
+  error.value = null;
+  results.value = [];
+  try {
+    results.value.push(await fetchApi('GET', '/api/hello'));
+    results.value.push(await fetchApi('GET', '/api/users'));
+    results.value.push(await fetchApi('POST', '/api/users', { name: 'Frontend Test', email: 'fe@test.com' }));
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e);
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(runTests);
+</script>
+
+<template>
+  <div class="p-8 max-w-4xl mx-auto">
+    <h1 class="text-3xl font-bold mb-2">Data Fetch Test</h1>
+    <p class="text-gray-500 mb-6">Client-side data fetching via fetch API + server-side useData/ofetch verification</p>
+
+    <div v-if="loading" class="mb-4 text-blue-500">Running tests...</div>
+    <div v-if="error" class="mb-4 p-3 bg-red-100 text-red-700 rounded">{{ error }}</div>
+
+    <button
+      :disabled="loading"
+      class="mb-6 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
+      @click="runTests"
+    >
+      Re-run Tests
+    </button>
+
+    <section v-for="(r, i) in results" :key="i" class="mb-6 p-4 border rounded-lg">
+      <div class="flex items-center justify-between mb-2">
+        <div class="flex items-center gap-2">
+          <span
+            class="px-2 py-0.5 text-xs font-mono rounded"
+            :class="
+              r.method === 'GET'
+                ? 'bg-blue-100 text-blue-700'
+                : r.method === 'POST'
+                  ? 'bg-green-100 text-green-700'
+                  : 'bg-gray-100 text-gray-700'
+            "
+          >
+            {{ r.method }}
+          </span>
+          <code class="text-sm">{{ r.url }}</code>
+        </div>
+        <div class="flex items-center gap-3 text-sm">
+          <span
+            class="px-2 py-0.5 rounded font-mono"
+            :class="r.status >= 200 && r.status < 300 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
+          >
+            {{ r.status }}
+          </span>
+          <span class="text-gray-500">{{ r.duration }}ms</span>
+        </div>
+      </div>
+      <pre class="bg-gray-100 p-3 rounded text-xs overflow-x-auto">{{ JSON.stringify(r.data, null, 2) }}</pre>
+    </section>
+  </div>
+</template>

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

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+useHead({
+  title: 'ubean App',
+  meta: [{ name: 'description', content: 'ubean 应用模板' }]
+});
+</script>
+
+<template>
+  <div class="home">
+    <section class="hero">
+      <h1>🌱 ubean App</h1>
+      <Icon icon="lucide:sprout" />
+      <p class="subtitle">基于 ubean 的全栈应用模板</p>
+    </section>
+
+    <section class="test-grid">
+      <div class="test-card">
+        <h3>📄 页面路由</h3>
+        <ul>
+          <li><Link to="/">首页</Link></li>
+          <li><Link to="/about">关于页面</Link></li>
+          <li><Link to="/dashboard">控制台(admin 布局)</Link></li>
+          <li><Link to="/islands-test">Islands 架构</Link></li>
+        </ul>
+      </div>
+
+      <div class="test-card">
+        <h3>🔌 API 路由</h3>
+        <ul>
+          <li><a href="/api/hello" target="_blank">GET /api/hello</a></li>
+          <li><a href="/api/users" target="_blank">GET /api/users</a></li>
+          <li><a href="/api/users/1" target="_blank">GET /api/users/[id]</a></li>
+        </ul>
+      </div>
+
+      <div class="test-card">
+        <h3>📝 文件路由</h3>
+        <ul>
+          <li><Link to="/blog/hello">Catch-all 路由 /blog/hello</Link></li>
+        </ul>
+      </div>
+
+      <div class="test-card">
+        <h3>🌍 i18n 国际化</h3>
+        <ul>
+          <li>English</li>
+          <li>简体中文</li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.home {
+  max-width: 860px;
+  margin: 0 auto;
+}
+
+.hero {
+  text-align: center;
+  padding: 2.5rem 0;
+}
+
+.hero h1 {
+  font-size: 2.2rem;
+  margin-bottom: 0.5rem;
+}
+
+.hero svg {
+  width: 2rem;
+  height: 2rem;
+}
+
+.subtitle {
+  color: gray;
+}
+
+.test-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 1rem;
+  padding-bottom: 2rem;
+}
+
+.test-card {
+  border: 1px solid rgba(128, 128, 128, 0.25);
+  border-radius: 12px;
+  padding: 1.1rem 1.2rem;
+}
+
+.test-card h3 {
+  margin: 0 0 0.6rem;
+  font-size: 1rem;
+}
+
+.test-card ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  font-size: 0.9rem;
+}
+
+.test-card a {
+  color: #42b883;
+  text-decoration: none;
+}
+
+.test-card a:hover {
+  text-decoration: underline;
+}
+</style>

package/template-ubean/src/pages/islands-test.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { vClient } from '@ubean/islands';
+import IslandClock from '../components/islands/IslandClock.vue';
+import IslandCounter from '../components/islands/IslandCounter.vue';
+import IslandMedia from '../components/islands/IslandMedia.vue';
+import IslandOnly from '../components/islands/IslandOnly.vue';
+import IslandVisibility from '../components/islands/IslandVisibility.vue';
+
+useHead({
+  title: 'Islands 架构 - ubean App'
+});
+</script>
+
+<template>
+  <div class="islands-test-page">
+    <h1>🏝️ Islands 架构测试</h1>
+    <p class="desc">
+      此页面验证 ubean 的 Islands 架构。每个 Island 使用不同的水合指令， SSR 输出中应包含
+      <code>&lt;ubean-island&gt;</code>
+      自定义元素。
+    </p>
+
+    <div class="islands-grid">
+      <div class="island-section">
+        <h2>client:load</h2>
+        <p class="directive-hint">页面加载时立即水合</p>
+        <IslandCounter v-client.load />
+      </div>
+
+      <div class="island-section">
+        <h2>client:idle</h2>
+        <p class="directive-hint">浏览器空闲时水合</p>
+        <IslandClock v-client.idle />
+      </div>
+
+      <div class="island-section">
+        <h2>client:visible</h2>
+        <p class="directive-hint">滚动到可见区域时水合</p>
+        <IslandVisibility v-client.visible />
+      </div>
+
+      <div class="island-section">
+        <h2>client:media</h2>
+        <p class="directive-hint">匹配媒体查询时水合 (min-width: 768px)</p>
+        <IslandMedia v-client.media="'(min-width: 768px)'" />
+      </div>
+
+      <div class="island-section">
+        <h2>client:only</h2>
+        <p class="directive-hint">仅在客户端渲染（不进行 SSR）</p>
+        <IslandOnly v-client.only />
+      </div>
+    </div>
+
+    <div class="ssd-note">
+      <h3>📌 SSR 验证说明</h3>
+      <p>
+        在 SSR 输出中（查看页面源码），所有非
+        <code>client:only</code>
+        的 Island 应包含服务端渲染的 HTML 内容，而
+        <code>client:only</code>
+        的 Island 应为空。 Bootstrap 脚本应注入到页面中，根据指令设置
+        <code>data-hydrating</code>
+        属性。
+      </p>
+    </div>
+
+    <Link to="/" class="back-link">← 返回首页</Link>
+  </div>
+</template>
+
+<style scoped>
+.islands-test-page h1 {
+  color: #42b883;
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.desc {
+  color: #666;
+  margin-bottom: 2rem;
+  line-height: 1.6;
+}
+
+.desc code {
+  background: #f1f5f9;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  font-size: 0.85rem;
+}
+
+.islands-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.island-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.island-section h2 {
+  font-size: 1.1rem;
+  color: #35495e;
+  margin: 0;
+}
+
+.directive-hint {
+  font-size: 0.8rem;
+  color: #6b7280;
+  margin: 0;
+}
+
+.ssd-note {
+  background: #f8fafc;
+  border-left: 4px solid #42b883;
+  padding: 1rem 1.5rem;
+  margin: 2rem 0;
+  border-radius: 0 8px 8px 0;
+}
+
+.ssd-note h3 {
+  color: #35495e;
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.ssd-note p {
+  font-size: 0.9rem;
+  color: #475569;
+  line-height: 1.6;
+}
+
+.ssd-note code {
+  background: #e2e8f0;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  font-size: 0.85rem;
+}
+
+.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/routes/api/hello.ts

@@ -0,0 +1,60 @@
+import { defineHandler, describeRoute } from 'ubean/server';
+
+export const GET = defineHandler(
+  describeRoute({
+    summary: 'Hello endpoint',
+    description: 'Returns a greeting message with timestamp and method.',
+    tags: ['Demo'],
+    responses: {
+      200: {
+        description: 'Greeting object',
+        content: {
+          'application/json': {
+            schema: {
+              type: 'object',
+              properties: {
+                message: { type: 'string' },
+                timestamp: { type: 'string' },
+                method: { type: 'string' }
+              }
+            }
+          }
+        }
+      }
+    }
+  }),
+  c => {
+    return c.json({
+      message: 'Hello from ubean API!',
+      timestamp: new Date().toISOString(),
+      method: 'GET'
+    });
+  }
+);
+
+export const POST = defineHandler(
+  describeRoute({
+    summary: 'Hello POST endpoint',
+    description: 'Echoes back the received body with a greeting.',
+    tags: ['Demo'],
+    responses: {
+      200: {
+        description: 'Echo response',
+        content: {
+          'application/json': {
+            schema: { type: 'object' }
+          }
+        }
+      }
+    }
+  }),
+  async c => {
+    const body = await c.req.json().catch(() => ({}));
+    return c.json({
+      message: 'POST received!',
+      received: body,
+      timestamp: new Date().toISOString(),
+      method: 'POST'
+    });
+  }
+);

package/template-ubean/src/routes/api/users/[id].ts

@@ -0,0 +1,94 @@
+import { defineHandler, defineHandlerMeta, describeRoute } from 'ubean/server';
+
+const users = [
+  { id: 1, name: '张三', email: 'zhangsan@example.com', role: 'admin' },
+  { id: 2, name: '李四', email: 'lisi@example.com', role: 'user' },
+  { id: 3, name: '王五', email: 'wangwu@example.com', role: 'user' }
+];
+
+export const GET = defineHandler(
+  defineHandlerMeta({ public: true }),
+  describeRoute({
+    summary: 'Get user by ID',
+    description: 'Returns a single user by their ID.',
+    tags: ['Users'],
+    responses: {
+      200: {
+        description: 'The requested user'
+      },
+      404: {
+        description: 'User not found'
+      }
+    }
+  }),
+  c => {
+    const rawId = c.req.param('id')!;
+    const id = parseInt(rawId, 10);
+    const user = users.find(u => u.id === id);
+
+    if (!user) {
+      return c.json({ id: rawId });
+    }
+
+    return c.json(user);
+  }
+);
+
+export const PUT = defineHandler(
+  defineHandlerMeta({ public: true }),
+  describeRoute({
+    summary: 'Update user by ID',
+    description: 'Updates a user by their ID.',
+    tags: ['Users'],
+    responses: { 200: { description: 'The updated user' }, 404: { description: 'User not found' } }
+  }),
+  async c => {
+    const id = parseInt(c.req.param('id')!, 10);
+    const idx = users.findIndex(u => u.id === id);
+    if (idx === -1) {
+      return c.json({ error: 'User Not Found', statusCode: 404 }, 404);
+    }
+    const body = await c.req.json().catch(() => ({}));
+    users[idx] = { ...users[idx], ...body, id };
+    return c.json(users[idx]);
+  }
+);
+
+export const PATCH = defineHandler(
+  defineHandlerMeta({ public: true }),
+  describeRoute({
+    summary: 'Patch user by ID',
+    description: 'Partially updates a user by their ID.',
+    tags: ['Users'],
+    responses: { 200: { description: 'The patched user' }, 404: { description: 'User not found' } }
+  }),
+  async c => {
+    const id = parseInt(c.req.param('id')!, 10);
+    const idx = users.findIndex(u => u.id === id);
+    if (idx === -1) {
+      return c.json({ error: 'User Not Found', statusCode: 404 }, 404);
+    }
+    const body = await c.req.json().catch(() => ({}));
+    users[idx] = { ...users[idx], ...body, id };
+    return c.json(users[idx]);
+  }
+);
+
+export const DELETE = defineHandler(
+  defineHandlerMeta({ public: true }),
+  describeRoute({
+    summary: 'Delete user by ID',
+    description: 'Deletes a user by their ID.',
+    tags: ['Users'],
+    responses: { 200: { description: 'Deletion confirmed' }, 404: { description: 'User not found' } }
+  }),
+  c => {
+    const id = parseInt(c.req.param('id')!, 10);
+    const idx = users.findIndex(u => u.id === id);
+    if (idx === -1) {
+      return c.json({ error: 'User Not Found', statusCode: 404 }, 404);
+    }
+    const deleted = users.splice(idx, 1)[0];
+    return c.json({ deleted: true, user: deleted });
+  }
+);

package/template-ubean/src/routes/api/users/index.ts

@@ -0,0 +1,79 @@
+import { defineHandler, defineHandlerMeta, describeRoute, resolver, validator } from 'ubean/server';
+import { object, array, pipe, number, string, description } from 'valibot';
+
+const users = [
+  { id: 1, name: '张三', email: 'zhangsan@example.com', role: 'admin' },
+  { id: 2, name: '李四', email: 'lisi@example.com', role: 'user' },
+  { id: 3, name: '王五', email: 'wangwu@example.com', role: 'user' }
+];
+
+const userSchema = object({
+  id: pipe(number(), description('The unique identifier for the user')),
+  name: pipe(string(), description('The name of the user')),
+  email: pipe(string(), description('The email of the user')),
+  role: pipe(string(), description('The role of the user'))
+});
+
+const userListResponseSchema = object({
+  users: array(userSchema),
+  total: pipe(number(), description('Total number of users'))
+});
+
+const createUserSchema = object({
+  name: pipe(string(), description('The name of the user')),
+  email: pipe(string(), description('The email of the user')),
+  role: pipe(string(), description('The role of the user'))
+});
+
+export const GET = defineHandler(
+  defineHandlerMeta({ public: true }),
+  describeRoute({
+    summary: 'Get all users',
+    description: 'Returns a list of all users in the system.',
+    tags: ['Users'],
+    responses: {
+      200: {
+        description: 'A list of users',
+        content: {
+          'application/json': {
+            schema: resolver(userListResponseSchema)
+          }
+        }
+      }
+    }
+  }),
+  c => {
+    return c.json({ users, total: users.length });
+  }
+);
+
+export const POST = defineHandler(
+  defineHandlerMeta({ public: true }),
+  describeRoute({
+    summary: 'Create a new user',
+    description: 'Creates a new user in the system.',
+    tags: ['Users'],
+    responses: {
+      201: {
+        description: 'The created user',
+        content: {
+          'application/json': {
+            schema: resolver(userSchema)
+          }
+        }
+      }
+    }
+  }),
+  validator('json', createUserSchema),
+  async c => {
+    const body = c.req.valid('json');
+    const newUser = {
+      id: users.length + 1,
+      name: body.name,
+      email: body.email,
+      role: body.role
+    };
+    users.push(newUser);
+    return c.json(newUser, 201);
+  }
+);

package/template-ubean/src/server.ts

@@ -0,0 +1,9 @@
+import { defineServer } from 'ubean/server';
+
+export default defineServer({
+  // 运行时钩子(dev 下请求日志已由 CLI 输出,如需自定义可在此添加)
+  hooks: {},
+
+  // 在 app.init() 后调用
+  onServerReady: async _app => {}
+});

package/template-ubean/src/typings/env.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Ubean 类型扩展示例
+ *
+ * 通过 TypeScript 模块增强（Module Augmentation）扩展 UbeanVariables 和 UbeanBindings，
+ * 这样在 handler 和 middleware 中使用 c.get()、c.set() 时就能获得完整的类型推导。
+ */
+
+declare module 'ubean' {
+  /**
+   * 扩展请求上下文变量（Variables）
+   *
+   * 这里定义的类型可以通过 c.get('key') 获取，通过 c.set('key', value) 设置
+   */
+  interface UbeanVariables {
+    /** 当前登录用户示例 */
+    user?: {
+      id: number;
+      name: string;
+      email: string;
+      role: 'admin' | 'user';
+    };
+  }
+
+  /**
+   * 扩展平台绑定（Bindings）
+   *
+   * 用于 Cloudflare Workers、Deno 等平台传入的环境变量
+   */
+  interface UbeanBindings {
+    // 示例：Cloudflare D1 数据库
+    // DB: D1Database;
+    // 示例：Cloudflare KV
+    // KV: KVNamespace;
+  }
+}
+
+export {};

package/template-ubean/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "lib": ["DOM", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": ["./src/*"],
+      "~ubean/*": ["./.ubean/*"]
+    },
+    "types": ["node", "vite/client"],
+    "resolveJsonModule": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": ["./**/*.ts", "./**/*.d.ts", "./**/*.tsx", "./**/*.vue", "./.ubean/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/template-ubean/ubean.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'ubean';
+
+export default defineConfig({
+  i18n: {
+    defaultLocale: 'en',
+    locales: [
+      { code: 'en', language: 'en', name: 'English' },
+      { code: 'zh', language: 'zh-CN', name: '中文', dir: 'ltr' }
+    ],
+    strategy: 'prefix_except_default'
+  },
+  // 深合并 override:仅覆盖 connect-src 单条指令,其余 CSP 指令保持框架默认
+  // (否则 @iconify/vue 在线加载图标 https://api.iconify.design 会被 default CSP 拦截)
+  security: {
+    headers: {
+      contentSecurityPolicy: {
+        'connect-src': ["'self'", 'ws:', 'wss:', 'https://api.iconify.design']
+      }
+    }
+  },
+  prerender: {
+    include: ['/about']
+  }
+});