@h-ai/cli 0.1.0-alpha.18 → 0.1.0-alpha.20

package/templates/apps/h5/src/routes/+layout.svelte.hbs

@@ -1,22 +1,38 @@
 {{!-- H5 应用根布局 --}}
-<script lang="ts">
+<script lang='ts'>
   /**
    * H5 应用根布局
    */
   import type { Snippet } from 'svelte'
-  import '../app.css'
 {{#if hasI18n}}
   import { browser } from '$app/environment'
-  import { setGlobalLocale } from '@h-ai/ui'
-  import { getLocale } from '$lib/paraglide/runtime.js'
+{{/if}}
+  import { resolve } from '$app/paths'
+  import { page } from '$app/state'
+{{#if hasI18n}}
   import * as m from '$lib/paraglide/messages'
+  import { getLocale } from '$lib/paraglide/runtime.js'
+  import { setGlobalLocale } from '@h-ai/ui'
 {{/if}}
+  import '../app.css'
 
   interface Props {
     children: Snippet
   }
 
-  let { children }: Props = $props()
+  const { children }: Props = $props()
+
+  const navItems = [
+{{#if hasI18n}}
+    { path: '/', label: m.nav_home(), icon: 'icon-[tabler--home]' },
+    { path: '/discover', label: m.nav_discover(), icon: 'icon-[tabler--compass]' },
+    { path: '/profile', label: m.nav_profile(), icon: 'icon-[tabler--user]' },
+{{else}}
+    { path: '/', label: '首页', icon: 'icon-[tabler--home]' },
+    { path: '/discover', label: '发现', icon: 'icon-[tabler--compass]' },
+    { path: '/profile', label: '我的', icon: 'icon-[tabler--user]' },
+{{/if}}
+  ] as const
 {{#if hasI18n}}
 
   if (browser) {
@@ -26,32 +42,17 @@
 {{/if}}
 </script>
 
-<div class="min-h-screen flex flex-col bg-base-200">
-  <main class="flex-1 pb-16">
+<div class='min-h-screen flex flex-col bg-base-200'>
+  <main class='flex-1 pb-16'>
     {@render children()}
   </main>
 
-  <nav class="btm-nav btm-nav-sm">
-    <a href="/" class="text-primary">
-{{#if hasI18n}}
-      <span class="btm-nav-label">{m.nav_home()}</span>
-{{else}}
-      <span class="btm-nav-label">首页</span>
-{{/if}}
-    </a>
-    <a href="/discover">
-{{#if hasI18n}}
-      <span class="btm-nav-label">{m.nav_discover()}</span>
-{{else}}
-      <span class="btm-nav-label">发现</span>
-{{/if}}
-    </a>
-    <a href="/profile">
-{{#if hasI18n}}
-      <span class="btm-nav-label">{m.nav_profile()}</span>
-{{else}}
-      <span class="btm-nav-label">我的</span>
-{{/if}}
-    </a>
+  <nav class='btm-nav btm-nav-sm'>
+    {#each navItems as item (item.path)}
+      <a href={resolve(item.path, {})} class:active={page.url.pathname === item.path} class:text-primary={page.url.pathname === item.path}>
+        <span class='{item.icon} size-5'></span>
+        <span class='btm-nav-label'>{item.label}</span>
+      </a>
+    {/each}
   </nav>
 </div>

package/templates/apps/h5/src/routes/+page.svelte.hbs

@@ -1,11 +1,12 @@
 {{!-- H5 首页 --}}
-<script lang="ts">
+<script lang='ts'>
   /**
    * H5 首页
    */
 {{#if hasI18n}}
   import * as m from '$lib/paraglide/messages'
 {{/if}}
+  import { Card } from '@h-ai/ui'
 </script>
 
 <svelte:head>
@@ -16,12 +17,22 @@
 {{/if}}
 </svelte:head>
 
-<section class="p-4">
+<section class='p-4 space-y-4'>
 {{#if hasI18n}}
-  <h1 class="text-2xl font-bold mb-4">{m.page_home_title()}</h1>
-  <p class="text-gray-600">{m.page_home_desc()}</p>
+  <h1 class='text-2xl font-black tracking-tight'>{m.page_home_title()}</h1>
+  <Card shadow='sm' class='bg-base-100'>
+    <div class='flex items-center gap-3'>
+      <span class='icon-[tabler--home] size-8 text-primary'></span>
+      <p class='text-base-content/70'>{m.page_home_desc()}</p>
+    </div>
+  </Card>
 {{else}}
-  <h1 class="text-2xl font-bold mb-4">首页</h1>
-  <p class="text-gray-600">欢迎使用 H5 应用</p>
+  <h1 class='text-2xl font-black tracking-tight'>首页</h1>
+  <Card shadow='sm' class='bg-base-100'>
+    <div class='flex items-center gap-3'>
+      <span class='icon-[tabler--home] size-8 text-primary'></span>
+      <p class='text-base-content/70'>欢迎使用 H5 应用</p>
+    </div>
+  </Card>
 {{/if}}
 </section>

package/templates/apps/h5/src/routes/discover/+page.svelte.hbs

@@ -1,11 +1,12 @@
 {{!-- 发现页面 --}}
-<script lang="ts">
+<script lang='ts'>
   /**
    * 发现页面
    */
 {{#if hasI18n}}
   import * as m from '$lib/paraglide/messages'
 {{/if}}
+  import { Card } from '@h-ai/ui'
 </script>
 
 <svelte:head>
@@ -16,12 +17,22 @@
 {{/if}}
 </svelte:head>
 
-<section class="p-4">
+<section class='p-4 space-y-4'>
 {{#if hasI18n}}
-  <h1 class="text-2xl font-bold mb-4">{m.page_discover_title()}</h1>
-  <p class="text-gray-600">{m.page_discover_desc()}</p>
+  <h1 class='text-2xl font-black tracking-tight'>{m.page_discover_title()}</h1>
+  <Card shadow='sm' class='bg-base-100'>
+    <div class='flex items-center gap-3'>
+      <span class='icon-[tabler--compass] size-8 text-primary'></span>
+      <p class='text-base-content/70'>{m.page_discover_desc()}</p>
+    </div>
+  </Card>
 {{else}}
-  <h1 class="text-2xl font-bold mb-4">发现</h1>
-  <p class="text-gray-600">探索更多精彩内容</p>
+  <h1 class='text-2xl font-black tracking-tight'>发现</h1>
+  <Card shadow='sm' class='bg-base-100'>
+    <div class='flex items-center gap-3'>
+      <span class='icon-[tabler--compass] size-8 text-primary'></span>
+      <p class='text-base-content/70'>探索更多精彩内容</p>
+    </div>
+  </Card>
 {{/if}}
 </section>

package/templates/apps/h5/src/routes/profile/+page.svelte.hbs

@@ -1,11 +1,12 @@
 {{!-- 个人中心页面 --}}
-<script lang="ts">
+<script lang='ts'>
   /**
    * 个人中心页面
    */
 {{#if hasI18n}}
   import * as m from '$lib/paraglide/messages'
 {{/if}}
+  import { Card } from '@h-ai/ui'
 </script>
 
 <svelte:head>
@@ -16,12 +17,22 @@
 {{/if}}
 </svelte:head>
 
-<section class="p-4">
+<section class='p-4 space-y-4'>
 {{#if hasI18n}}
-  <h1 class="text-2xl font-bold mb-4">{m.page_profile_title()}</h1>
-  <p class="text-gray-600">{m.page_profile_desc()}</p>
+  <h1 class='text-2xl font-black tracking-tight'>{m.page_profile_title()}</h1>
+  <Card shadow='sm' class='bg-base-100'>
+    <div class='flex items-center gap-3'>
+      <span class='icon-[tabler--user] size-8 text-primary'></span>
+      <p class='text-base-content/70'>{m.page_profile_desc()}</p>
+    </div>
+  </Card>
 {{else}}
-  <h1 class="text-2xl font-bold mb-4">我的</h1>
-  <p class="text-gray-600">管理您的个人信息</p>
+  <h1 class='text-2xl font-black tracking-tight'>我的</h1>
+  <Card shadow='sm' class='bg-base-100'>
+    <div class='flex items-center gap-3'>
+      <span class='icon-[tabler--user] size-8 text-primary'></span>
+      <p class='text-base-content/70'>管理您的个人信息</p>
+    </div>
+  </Card>
 {{/if}}
 </section>

package/templates/apps/website/src/routes/+layout.svelte.hbs

@@ -1,22 +1,39 @@
 {{!-- 官网根布局 --}}
-<script lang="ts">
+<script lang='ts'>
   /**
    * 官网根布局
    */
   import type { Snippet } from 'svelte'
-  import '../app.css'
 {{#if hasI18n}}
   import { browser } from '$app/environment'
-  import { setGlobalLocale } from '@h-ai/ui'
-  import { getLocale } from '$lib/paraglide/runtime.js'
+{{/if}}
+  import { resolve } from '$app/paths'
+{{#if hasI18n}}
   import * as m from '$lib/paraglide/messages'
+  import { getLocale } from '$lib/paraglide/runtime.js'
+  import { setGlobalLocale } from '@h-ai/ui'
 {{/if}}
+  import '../app.css'
 
   interface Props {
     children: Snippet
   }
 
-  let { children }: Props = $props()
+  const { children }: Props = $props()
+
+  const navItems = [
+{{#if hasI18n}}
+    { path: '/', label: m.nav_home() },
+    { path: '/about', label: m.nav_about() },
+    { path: '/services', label: m.nav_services() },
+    { path: '/contact', label: m.nav_contact() },
+{{else}}
+    { path: '/', label: '首页' },
+    { path: '/about', label: '关于' },
+    { path: '/services', label: '服务' },
+    { path: '/contact', label: '联系我们' },
+{{/if}}
+  ] as const
 {{#if hasI18n}}
 
   if (browser) {
@@ -26,39 +43,31 @@
 {{/if}}
 </script>
 
-<div class="min-h-screen flex flex-col">
-  <header class="navbar bg-base-100 shadow-sm">
-    <div class="flex-1">
+<div class='min-h-screen flex flex-col'>
+  <header class='navbar bg-base-100 shadow-sm'>
+    <div class='flex-1'>
 {{#if hasI18n}}
-      <a href="/" class="btn btn-ghost text-xl">{m.app_title()}</a>
+      <a href={resolve('/', {})} class='btn btn-ghost text-xl font-black tracking-tight'>{m.app_title()}</a>
 {{else}}
-      <a href="/" class="btn btn-ghost text-xl">官网</a>
+      <a href={resolve('/', {})} class='btn btn-ghost text-xl font-black tracking-tight'>官网</a>
 {{/if}}
     </div>
-    <nav class="flex-none">
-      <ul class="menu menu-horizontal px-1">
-{{#if hasI18n}}
-        <li><a href="/">{m.nav_home()}</a></li>
-        <li><a href="/about">{m.nav_about()}</a></li>
-        <li><a href="/services">{m.nav_services()}</a></li>
-        <li><a href="/contact">{m.nav_contact()}</a></li>
-{{else}}
-        <li><a href="/">首页</a></li>
-        <li><a href="/about">关于</a></li>
-        <li><a href="/services">服务</a></li>
-        <li><a href="/contact">联系我们</a></li>
-{{/if}}
+    <nav class='flex-none'>
+      <ul class='menu menu-horizontal px-1'>
+        {#each navItems as item (item.path)}
+          <li><a href={resolve(item.path, {})}>{item.label}</a></li>
+        {/each}
       </ul>
     </nav>
   </header>
 
-  <main class="flex-1">
+  <main class='flex-1'>
     {@render children()}
   </main>
 
-  <footer class="footer footer-center p-4 bg-base-300 text-base-content">
+  <footer class='footer footer-center p-4 bg-base-300 text-base-content'>
 {{#if hasI18n}}
-    <p>{m.footer_copyright()}</p>
+    <p>{m.footer_copyright({ year: new Date().getFullYear() })}</p>
 {{else}}
     <p>Copyright © 2025 - All rights reserved</p>
 {{/if}}

package/templates/apps/website/src/routes/+page.svelte.hbs

@@ -1,11 +1,13 @@
 {{!-- 官网首页 --}}
-<script lang="ts">
+<script lang='ts'>
   /**
    * 官网首页
    */
+  import { resolve } from '$app/paths'
 {{#if hasI18n}}
   import * as m from '$lib/paraglide/messages'
 {{/if}}
+  import { Badge } from '@h-ai/ui'
 </script>
 
 <svelte:head>
@@ -16,17 +18,33 @@
 {{/if}}
 </svelte:head>
 
-<section class="hero min-h-[60vh] bg-base-200">
-  <div class="hero-content text-center">
-    <div class="max-w-md">
+<section class='hero min-h-[60vh] bg-gradient-to-b from-base-200 to-base-100'>
+  <div class='hero-content text-center'>
+    <div class='max-w-xl'>
+      <div class='flex justify-center'>
+        <Badge variant='primary'>
+          <span class='icon-[tabler--sparkles] size-4'></span>
 {{#if hasI18n}}
-      <h1 class="text-5xl font-bold">{m.page_home_title()}</h1>
-      <p class="py-6">{m.page_home_subtitle()}</p>
-      <a href="/about" class="btn btn-primary">{m.page_home_cta()}</a>
+          {m.app_title()}
 {{else}}
-      <h1 class="text-5xl font-bold">欢迎</h1>
-      <p class="py-6">基于 hai Agent Framework 构建</p>
-      <a href="/about" class="btn btn-primary">了解更多</a>
+          由 hai 驱动
+{{/if}}
+        </Badge>
+      </div>
+{{#if hasI18n}}
+      <h1 class='mt-5 text-5xl font-black tracking-tight'>{m.page_home_title()}</h1>
+      <p class='py-6 text-base-content/60'>{m.page_home_subtitle()}</p>
+      <a href={resolve('/about', {})} class='btn btn-primary'>
+        <span class='icon-[tabler--arrow-right] size-5'></span>
+        {m.page_home_cta()}
+      </a>
+{{else}}
+      <h1 class='mt-5 text-5xl font-black tracking-tight'>欢迎</h1>
+      <p class='py-6 text-base-content/60'>基于 hai Agent Framework 构建</p>
+      <a href={resolve('/about', {})} class='btn btn-primary'>
+        <span class='icon-[tabler--arrow-right] size-5'></span>
+        了解更多
+      </a>
 {{/if}}
     </div>
   </div>

package/templates/apps/website/src/routes/about/+page.svelte.hbs

@@ -1,11 +1,12 @@
 {{!-- 关于页面 --}}
-<script lang="ts">
+<script lang='ts'>
   /**
    * 关于页面
    */
 {{#if hasI18n}}
   import * as m from '$lib/paraglide/messages'
 {{/if}}
+  import { Card, PageHeader } from '@h-ai/ui'
 </script>
 
 <svelte:head>
@@ -16,12 +17,16 @@
 {{/if}}
 </svelte:head>
 
-<section class="py-16 px-4 max-w-4xl mx-auto">
+<section class='py-16 px-4 max-w-4xl mx-auto'>
 {{#if hasI18n}}
-  <h1 class="text-3xl font-bold mb-8">{m.page_about_title()}</h1>
-  <p class="text-lg text-gray-600">{m.page_about_desc()}</p>
+  <PageHeader title={m.page_about_title()} />
+  <Card shadow='sm' class='bg-base-100'>
+    <p class='text-lg text-base-content/70'>{m.page_about_desc()}</p>
+  </Card>
 {{else}}
-  <h1 class="text-3xl font-bold mb-8">关于我们</h1>
-  <p class="text-lg text-gray-600">了解我们的团队与使命。</p>
+  <PageHeader title='关于我们' />
+  <Card shadow='sm' class='bg-base-100'>
+    <p class='text-lg text-base-content/70'>了解我们的团队与使命。</p>
+  </Card>
 {{/if}}
 </section>

package/templates/apps/website/src/routes/contact/+page.svelte.hbs

@@ -1,11 +1,20 @@
 {{!-- 联系页面 --}}
-<script lang="ts">
+<script lang='ts'>
   /**
    * 联系我们页面
    */
 {{#if hasI18n}}
   import * as m from '$lib/paraglide/messages'
 {{/if}}
+  import { Button, Card, FormField, Input, PageHeader } from '@h-ai/ui'
+
+  let name = $state('')
+  let email = $state('')
+  let message = $state('')
+
+  function handleSubmit(event: SubmitEvent) {
+    event.preventDefault()
+  }
 </script>
 
 <svelte:head>
@@ -16,44 +25,38 @@
 {{/if}}
 </svelte:head>
 
-<section class="py-16 px-4 max-w-2xl mx-auto">
+<section class='py-16 px-4 max-w-2xl mx-auto'>
 {{#if hasI18n}}
-  <h1 class="text-3xl font-bold mb-8">{m.page_contact_title()}</h1>
-  <p class="text-lg text-gray-600 mb-8">{m.page_contact_desc()}</p>
+  <PageHeader title={m.page_contact_title()} description={m.page_contact_desc()} />
 {{else}}
-  <h1 class="text-3xl font-bold mb-8">联系我们</h1>
-  <p class="text-lg text-gray-600 mb-8">有任何疑问？欢迎联系我们。</p>
+  <PageHeader title='联系我们' description='有任何疑问？欢迎联系我们。' />
 {{/if}}
 
-  <form class="space-y-4">
-    <div class="form-control">
-{{#if hasI18n}}
-      <label class="label" for="name"><span class="label-text">{m.page_contact_name()}</span></label>
-{{else}}
-      <label class="label" for="name"><span class="label-text">姓名</span></label>
-{{/if}}
-      <input id="name" type="text" class="input input-bordered w-full" />
-    </div>
-    <div class="form-control">
-{{#if hasI18n}}
-      <label class="label" for="email"><span class="label-text">{m.page_contact_email()}</span></label>
-{{else}}
-      <label class="label" for="email"><span class="label-text">邮箱</span></label>
-{{/if}}
-      <input id="email" type="email" class="input input-bordered w-full" />
-    </div>
-    <div class="form-control">
-{{#if hasI18n}}
-      <label class="label" for="message"><span class="label-text">{m.page_contact_message()}</span></label>
-{{else}}
-      <label class="label" for="message"><span class="label-text">留言</span></label>
-{{/if}}
-      <textarea id="message" class="textarea textarea-bordered w-full" rows="4"></textarea>
-    </div>
+  <Card shadow='sm' class='bg-base-100'>
+    <form class='space-y-4' onsubmit={handleSubmit}>
 {{#if hasI18n}}
-    <button type="submit" class="btn btn-primary w-full">{m.page_contact_submit()}</button>
+      <FormField label={m.page_contact_name()} required>
+        <Input id='name' type='text' bind:value={name} required />
+      </FormField>
+      <FormField label={m.page_contact_email()} required>
+        <Input id='email' type='email' bind:value={email} required />
+      </FormField>
+      <FormField label={m.page_contact_message()} required>
+        <textarea id='message' class='textarea textarea-bordered w-full' rows='4' bind:value={message}></textarea>
+      </FormField>
+      <Button type='submit' variant='primary' class='w-full'>{m.page_contact_submit()}</Button>
 {{else}}
-    <button type="submit" class="btn btn-primary w-full">发送</button>
+      <FormField label='姓名' required>
+        <Input id='name' type='text' bind:value={name} required />
+      </FormField>
+      <FormField label='邮箱' required>
+        <Input id='email' type='email' bind:value={email} required />
+      </FormField>
+      <FormField label='留言' required>
+        <textarea id='message' class='textarea textarea-bordered w-full' rows='4' bind:value={message}></textarea>
+      </FormField>
+      <Button type='submit' variant='primary' class='w-full'>发送</Button>
 {{/if}}
-  </form>
+    </form>
+  </Card>
 </section>

package/templates/apps/website/src/routes/services/+page.svelte.hbs

@@ -1,10 +1,25 @@
 {{!-- 服务页面 --}}
-<script lang="ts">
+<script lang='ts'>
   /**
    * 服务页面
    */
 {{#if hasI18n}}
   import * as m from '$lib/paraglide/messages'
+{{/if}}
+  import { Card, PageHeader } from '@h-ai/ui'
+
+{{#if hasI18n}}
+  const services = $derived([
+    { title: m.page_services_item1(), desc: m.page_services_desc(), icon: 'icon-[tabler--message-circle]' },
+    { title: m.page_services_item2(), desc: m.page_services_desc(), icon: 'icon-[tabler--code]' },
+    { title: m.page_services_item1(), desc: m.page_services_desc(), icon: 'icon-[tabler--server-cog]' },
+  ])
+{{else}}
+  const services = [
+    { title: '咨询服务', desc: '提供专业的技术咨询与解决方案。', icon: 'icon-[tabler--message-circle]' },
+    { title: '定制开发', desc: '根据需求定制开发高质量应用。', icon: 'icon-[tabler--code]' },
+    { title: '运维支持', desc: '提供全方位的系统运维与技术支持。', icon: 'icon-[tabler--server-cog]' },
+  ]
 {{/if}}
 </script>
 
@@ -16,48 +31,20 @@
 {{/if}}
 </svelte:head>
 
-<section class="py-16 px-4 max-w-4xl mx-auto">
+<section class='py-16 px-4 max-w-4xl mx-auto'>
 {{#if hasI18n}}
-  <h1 class="text-3xl font-bold mb-8">{m.page_services_title()}</h1>
-  <p class="text-lg text-gray-600 mb-12">{m.page_services_desc()}</p>
+  <PageHeader title={m.page_services_title()} description={m.page_services_desc()} />
 {{else}}
-  <h1 class="text-3xl font-bold mb-8">我们的服务</h1>
-  <p class="text-lg text-gray-600 mb-12">我们提供以下专业服务。</p>
+  <PageHeader title='我们的服务' description='我们提供以下专业服务。' />
 {{/if}}
 
-  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-    <div class="card bg-base-100 shadow">
-      <div class="card-body">
-{{#if hasI18n}}
-        <h2 class="card-title">{m.page_services_item1()}</h2>
-        <p>{m.page_services_desc()}</p>
-{{else}}
-        <h2 class="card-title">咨询服务</h2>
-        <p>提供专业的技术咨询与解决方案。</p>
-{{/if}}
-      </div>
-    </div>
-    <div class="card bg-base-100 shadow">
-      <div class="card-body">
-{{#if hasI18n}}
-        <h2 class="card-title">{m.page_services_item2()}</h2>
-        <p>{m.page_services_desc()}</p>
-{{else}}
-        <h2 class="card-title">定制开发</h2>
-        <p>根据需求定制开发高质量应用。</p>
-{{/if}}
-      </div>
-    </div>
-    <div class="card bg-base-100 shadow">
-      <div class="card-body">
-{{#if hasI18n}}
-        <h2 class="card-title">{m.page_services_item1()}</h2>
-        <p>{m.page_services_desc()}</p>
-{{else}}
-        <h2 class="card-title">运维支持</h2>
-        <p>提供全方位的系统运维与技术支持。</p>
-{{/if}}
-      </div>
-    </div>
+  <div class='grid grid-cols-1 md:grid-cols-3 gap-6'>
+    {#each services as service (service.title)}
+      <Card shadow='sm' class='bg-base-100'>
+        <span class='{service.icon} size-8 text-primary'></span>
+        <h2 class='mt-3 text-lg font-semibold'>{service.title}</h2>
+        <p class='mt-1 text-sm text-base-content/60'>{service.desc}</p>
+      </Card>
+    {/each}
   </div>
 </section>