refactor: 模板占位符从 {{app-name}} 改为 my-app

DEVELOPMENT.md

@@ -1,6 +1,6 @@
-{{app-name}} 开发文档
+my-app 开发文档
 
-本文档面向 `{{app-name}}` 项目的开发者，介绍项目结构、前后端架构、构建流程、测试、代码规范等内容。
+本文档面向 `my-app` 项目的开发者，介绍项目结构、前后端架构、构建流程、测试、代码规范等内容。
 
 用户使用说明请参阅 [README.md](README.md)。
 
@@ -233,7 +233,7 @@ main.tsx
 hooks/use-theme-preference.ts（浏览器 UI 偏好）
 ├── ThemePreference: system / light / dark（RadioGroup 受控值）
 ├── EffectiveTheme: light / dark（写入 document.documentElement theme-mode）
-├── localStorage key: {{app-name}}.theme.preference（同一浏览器记忆）
+├── localStorage key: my-app.theme.preference（同一浏览器记忆）
 └── matchMedia("(prefers-color-scheme: dark)")（系统模式下跟随系统明暗变化）
 ```
 

README.md

@@ -1,4 +1,4 @@
-# {{app-name}}
+# my-app
 
 （替换为你的项目介绍）
 
@@ -25,9 +25,9 @@ cd my-project
 rm -rf .git && git init
 ```
 
-### 2. 替换占位符 `{{app-name}}`
+### 2. 替换占位符 `my-app`
 
-在整个项目中全局搜索替换 `{{app-name}}` 为你的项目名称（如 `my-app`）。以下为所有出现位置：
+在整个项目中全局搜索替换 `my-app` 为你的项目名称（如 `your-project`）。以下为所有出现位置：
 
 | #   | 文件                                    | 说明                                       |
 | --- | --------------------------------------- | ------------------------------------------ |
@@ -41,7 +41,7 @@ rm -rf .git && git init
 | 8   | `src/web/hooks/use-theme-preference.ts` | `localStorage` 键名                        |
 | 9   | `tests/web/App.test.tsx`                | 测试中的品牌名断言                         |
 
-> **提示**：可直接在编辑器中全局搜索 `{{app-name}}`，一次性替换。
+> **提示**：可直接在编辑器中全局搜索 `my-app`，一次性替换。
 
 ### 3. 清理 OpenSpec 历史
 

openspec/config.yaml

@@ -17,7 +17,7 @@ context: |
   - 禁止创建git操作task
   - 积极使用subagents精心设计并行任务，节省上下文空间，加速任务执行
   - 优先使用提问工具对用户进行提问
-  - 本项目为 Bun 全栈应用模板，es-toolkit 为后端首选工具库、recharts 为前端首选图表库
+  - 本项目为 Bun 全栈应用模板，README.md记录模板使用方法，DEVELOPMENT.md记录模板使用的技术细节
 
 rules:
   proposal:

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "{{app-name}}",
+  "name": "my-app",
   "type": "module",
   "private": true,
   "scripts": {

scripts/build.ts

@@ -5,7 +5,7 @@ import { fileURLToPath } from "node:url";
 const projectRoot = fileURLToPath(new URL("..", import.meta.url));
 const distWebDir = join(projectRoot, "dist/web");
 const buildDir = join(projectRoot, ".build");
-const executablePath = join(projectRoot, "dist/{{app-name}}");
+const executablePath = join(projectRoot, "dist/my-app");
 
 async function build() {
   try {

src/server/config.ts

@@ -43,7 +43,7 @@ export function parseRuntimeArgs(argv: string[] = Bun.argv.slice(2)): { configPa
   if (argv.length === 0) return {};
   const firstArg = argv[0];
   if (firstArg === "--help" || firstArg === "-h") {
-    console.log("用法: {{app-name}} [config.yaml]");
+    console.log("用法: my-app [config.yaml]");
     console.log("  config.yaml  可选 YAML 配置文件路径（不存在时使用默认配置）");
     process.exit(0);
   }

src/server/helpers.ts

@@ -18,7 +18,7 @@ export function createHeaders(mode: RuntimeMode, init: HeadersInit): Headers {
 export function createHealthResponse(): HealthResponse {
   return {
     ok: true,
-    service: "{{app-name}}",
+    service: "my-app",
     timestamp: new Date().toISOString(),
   };
 }

src/server/server.ts

@@ -32,7 +32,7 @@ export function startServer(options: StartServerOptions) {
     },
   });
 
-  console.log(`{{app-name}} listening on ${server.url}`);
+  console.log(`my-app listening on ${server.url}`);
 
   return server;
 }

src/web/app.tsx

@@ -31,7 +31,7 @@ export function App() {
         <Menu.HeadMenu
           logo={
             <span className="dashboard-brand">
-              <span className="dashboard-logo">{"{{app-name}}"}</span>
+              <span className="dashboard-logo">my-app</span>
             </span>
           }
           operations={
@@ -50,7 +50,7 @@ export function App() {
       <Content>
         <div className="dashboard-content">
           <Space direction="vertical" size="large" style={{ width: "100%" }}>
-            <h2>欢迎使用 {"{{app-name}}"}</h2>
+            <h2>欢迎使用 my-app</h2>
             <p>在此构建你的应用。以下是 /health API 的返回数据（前后端联调示例）：</p>
             {health && <pre className="health-response">{JSON.stringify(health, null, 2)}</pre>}
           </Space>

src/web/hooks/use-theme-preference.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 export type EffectiveTheme = "dark" | "light";
 export type ThemePreference = "dark" | "light" | "system";
 
-export const THEME_PREFERENCE_STORAGE_KEY = "{{app-name}}.theme.preference";
+export const THEME_PREFERENCE_STORAGE_KEY = "my-app.theme.preference";
 export const THEME_MEDIA_QUERY = "(prefers-color-scheme: dark)";
 
 export function applyInitialThemePreference() {

src/web/index.html

@@ -3,8 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="{{app-name}}" />
+    <meta name="description" content="my-app" />
-    <title>{{app-name}}</title>
+    <title>my-app</title>
   </head>
   <body>
     <div id="root"></div>

tests/web/App.test.tsx

@@ -46,7 +46,7 @@ describe("App", () => {
 
     renderApp();
 
-    expect(screen.getByText("{{app-name}}")).not.toBeNull();
+    expect(screen.getByText("my-app")).not.toBeNull();
     expect(screen.getByText("系统")).not.toBeNull();
     expect(screen.getByText("明亮")).not.toBeNull();
     expect(screen.getByText("黑暗")).not.toBeNull();