create-secra 0.1.2 → 0.1.3

package/README.md

@@ -1,6 +1,12 @@
 # create-secra
 
-Use this package to bootstrap a Secra frontend project:
+Bootstrap a Secra frontend project from a built-in local template.
+
+[中文文档](./README.zh-CN.md)
+
+## Usage
+
+Create a project:
 
 ```bash
 pnpm create secra my-app
@@ -12,10 +18,35 @@ or
 npm create secra@latest my-app
 ```
 
-By default it uses the local `template` directory in this package.
+## Template Behavior
+
+- Default template source: local `template/` directory in this package.
+- No git clone / degit is used.
+- Template copy excludes these directories:
+  - `node_modules`
+  - `dist`
+  - `.turbo`
+  - `.git`
+- After scaffolding, dependencies are installed automatically with your detected package manager (`pnpm`/`yarn`/`bun`/`npm`).
+
+## Override Template Source
 
-You can override the template directory temporarily:
+You can temporarily point to another local template path:
 
 ```bash
 SECRA_TEMPLATE=/absolute/path/to/template pnpm create secra my-app
 ```
+
+## Maintain the Built-in Template
+
+If you want to refresh `template/` from another project (for example `secra-front`), copy files with excludes:
+
+```bash
+rsync -a --delete \
+  --exclude node_modules \
+  --exclude dist \
+  --exclude .turbo \
+  --exclude .git \
+  /path/to/source-project/ \
+  ./template/
+```

package/README.zh-CN.md

@@ -0,0 +1,52 @@
+# create-secra
+
+基于内置本地模板快速创建 Secra 前端项目。
+
+[English README](./README.md)
+
+## 使用方式
+
+创建项目：
+
+```bash
+pnpm create secra my-app
+```
+
+或
+
+```bash
+npm create secra@latest my-app
+```
+
+## Template 功能说明
+
+- 默认模板来源：当前包内的 `template/` 目录。
+- 不使用 git clone / degit 拉取远程仓库。
+- 复制模板时会自动排除以下目录：
+  - `node_modules`
+  - `dist`
+  - `.turbo`
+  - `.git`
+- 脚手架复制完成后，会自动根据当前环境识别包管理器并安装依赖（`pnpm`/`yarn`/`bun`/`npm`）。
+
+## 临时覆盖模板目录
+
+如需临时指定其他本地模板目录，可通过环境变量：
+
+```bash
+SECRA_TEMPLATE=/absolute/path/to/template pnpm create secra my-app
+```
+
+## 维护内置模板
+
+如果你想从其他项目（例如 `secra-front`）更新 `template/`，可执行：
+
+```bash
+rsync -a --delete \
+  --exclude node_modules \
+  --exclude dist \
+  --exclude .turbo \
+  --exclude .git \
+  /path/to/source-project/ \
+  ./template/
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-secra",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Create a Secra project from the official template.",
   "type": "module",
   "bin": {

package/template/apps/core/src/pages/index.tsx

@@ -1,4 +1,83 @@
+import type { CSSProperties } from "react";
+import reactLogo from "../assets/react.svg";
+
+const cardStyle: CSSProperties = {
+    border: "1px solid #e5e7eb",
+    borderRadius: 12,
+    padding: 16,
+    background: "#ffffff",
+    boxShadow: "0 6px 24px rgba(15, 23, 42, 0.06)",
+};
+
 const Home = () => {
-    return (<div>首页</div>);
+    return (
+        <main
+            style={{
+                minHeight: "100vh",
+                padding: "48px 20px",
+                background: "linear-gradient(180deg, #f8fafc 0%, #ffffff 100%)",
+                color: "#0f172a",
+            }}
+        >
+            <section style={{ maxWidth: 920, margin: "0 auto" }}>
+                <header style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 24 }}>
+                    <img src={reactLogo} alt="React Logo" width={48} height={48} />
+                    <div>
+                        <h1 style={{ fontSize: 34, lineHeight: 1.2, margin: 0 }}>
+                            React + Vite + Secra
+                        </h1>
+                        <p style={{ margin: "8px 0 0", color: "#475569" }}>
+                            A fast starter template for modern frontend projects.
+                        </p>
+                    </div>
+                </header>
+
+                <div
+                    style={{
+                        display: "grid",
+                        gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+                        gap: 14,
+                    }}
+                >
+                    <article style={cardStyle}>
+                        <h3 style={{ marginTop: 0 }}>React</h3>
+                        <p style={{ margin: 0, color: "#475569" }}>
+                            Build component-based UI with a clean and maintainable structure.
+                        </p>
+                    </article>
+                    <article style={cardStyle}>
+                        <h3 style={{ marginTop: 0 }}>Vite</h3>
+                        <p style={{ margin: 0, color: "#475569" }}>
+                            Enjoy instant startup and fast HMR for daily development.
+                        </p>
+                    </article>
+                    <article style={cardStyle}>
+                        <h3 style={{ marginTop: 0 }}>Secra</h3>
+                        <p style={{ margin: 0, color: "#475569" }}>
+                            Structured app bootstrap, routing and engineering defaults out of the box.
+                        </p>
+                    </article>
+                </div>
+
+                <section style={{ ...cardStyle, marginTop: 18 }}>
+                    <h2 style={{ marginTop: 0, fontSize: 20 }}>Quick Start</h2>
+                    <pre
+                        style={{
+                            margin: 0,
+                            padding: 14,
+                            borderRadius: 8,
+                            background: "#0f172a",
+                            color: "#e2e8f0",
+                            overflowX: "auto",
+                        }}
+                    >
+{`pnpm install
+pnpm dev`}
+                    </pre>
+                </section>
+            </section>
+        </main>
+    );
 };
+
 export default Home;