@lark-apaas/coding-template-react-standard-webapp 0.1.0-alpha.20260827082008

package/LICENSE

@@ -0,0 +1,13 @@
+MIT License
+
+Copyright (c) 2024 Lark Technologies Pte. Ltd. and/or its affiliates
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted,provided that the above copyright notice and this permission notice appear in all copies.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE
+INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO
+EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR
+CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE,
+DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS
+ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+# @lark-apaas/coding-template-react-standard-webapp
+
+React standard webapp template for [miaoda coding](https://code.byted.org/apaas/miaoda-coding) — 面向本地开发的纯前端模板（无平台 SDK 依赖），产物可托管部署到妙搭平台。
+
+**Tech stack:** vite · react · typescript · tailwind · shadcn-ui
+
+## Usage
+
+This package is consumed by [miaoda-cli](https://code.byted.org/apaas/miaoda-cli). It is not intended to be installed as a runtime dependency — the CLI fetches the tarball, renders `template/` into a user project, then discards the package reference.
+
+## 与 vite-react 模板的区别
+
+基于 `vite-react` 母版裁剪，面向本地开发场景：
+
+- 无任何 `@lark-apaas/*` 运行时/构建依赖（client-toolkit-lite、coding-preset-vite-react、coding-presets-react 均已移除）
+- 部署协议（dist/output 分层 + routes.json）以内联插件实现在 `template/vite.config.ts` 单文件中，可作为 custom 技术栈的协议参考实现
+- 常规 scripts：`dev` / `build` / `typecheck` / `lint`，无 wrapper 脚本，跨平台
+- 本地 `npm run dev` 零环境变量预览；托管构建仅消费 `MIAODA_CLIENT_BASE_PATH` / `MIAODA_RESOURCE_CDN_PREFIX`
+
+## Contents
+
+| Path | Purpose |
+|---|---|
+| `template/` | Files copied to the user project at init time |
+| `hooks/` | Lifecycle hooks (no-op for v0.1) |

package/hooks/after-install.mjs

@@ -0,0 +1,3 @@
+export default async function afterInstall(ctx) {
+  // no-op for v0.1
+}

package/hooks/after-render.mjs

@@ -0,0 +1,3 @@
+export default async function afterRender(ctx) {
+  // no-op for v0.1
+}

package/hooks/before-render.mjs

@@ -0,0 +1,3 @@
+export default async function beforeRender(ctx) {
+  // no-op for v0.1
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@lark-apaas/coding-template-react-standard-webapp",
+  "version": "0.1.0-alpha.20260827082008",
+  "description": "React standard webapp template for miaoda local development (vite + react, no platform SDK)",
+  "type": "module",
+  "files": [
+    "template",
+    "hooks"
+  ],
+  "scripts": {
+    "validate-manifest": "node ../../../scripts/validate-template.mjs .",
+    "smoke": "node ../../../scripts/smoke-template.mjs .",
+    "prepublishOnly": "pnpm validate-manifest"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "keywords": [
+    "miaoda",
+    "coding-template",
+    "react",
+    "webapp"
+  ],
+  "license": "MIT",
+  "miaodaTemplate": {
+    "schemaVersion": 1,
+    "archType": 2,
+    "hooks": {
+      "beforeRender": "hooks/before-render.mjs",
+      "afterRender": "hooks/after-render.mjs",
+      "afterInstall": "hooks/after-install.mjs"
+    }
+  }
+}

package/template/README.md

@@ -0,0 +1,105 @@
+# 项目技术规范
+
+## 技术栈
+
+- 前端: React 19 + TypeScript
+- 样式: Tailwind CSS v4
+- UI 组件: shadcn/ui `import { Button } from "@/components/ui/button";`
+- 图标: lucide-react `import { SearchIcon } from "lucide-react";`
+- 图表: echarts-for-react `import ReactECharts from "echarts-for-react";`
+- 动画: framer-motion `import { motion } from "framer-motion";`
+- 路由: react-router-dom `import { Link, useNavigate } from "react-router-dom";`
+
+---
+
+## 目录结构
+
+```
+src/
+├── index.tsx            # 入口（勿修改）
+├── app.tsx              # 路由配置（仅在 <Routes> 内增删 <Route>）
+├── index.css            # 全局样式 + 主题变量
+├── components/          # 基础 UI 组件（禁止存放业务组件）
+│   ├── layout.tsx       # 全局布局容器（含 <Outlet />）
+│   └── ui/              # shadcn/ui 内置组件（勿修改）
+├── pages/               # 页面模块（每个页面一个目录）
+│   ├── <PageName>/      # 页面目录示例
+│   │   ├── PageName.tsx        # 页面入口文件与目录同名
+│   │   └── components/         # 页面专属组件
+│   └── NotFoundPage/
+│       └── NotFoundPage.tsx
+├── hooks/               # 自定义 Hooks
+└── lib/                 # 工具函数（cn() 等）
+
+public/                  # 静态资源（dev server 原样服务；构建后随 dist/output 同源部署）
+```
+
+---
+
+## 模板初始状态
+
+- `app.tsx` 首页路由指向 `pages/HomePage`（占位欢迎页）
+- 开发时将 `HomePage` 替换为业务首页，或在 `pages/` 下创建新页面并调整 `index` 路由
+- `layout.tsx` 为空壳容器（仅 `<Outlet />`），需根据需求实现导航和布局
+
+---
+
+## 禁止修改的文件
+
+| 文件 | 原因 |
+|------|------|
+| `src/index.tsx` | Provider 层级 + 样式引入，由模板管理 |
+| `src/components/ui/*` | shadcn/ui 内置组件，版本锁定 |
+
+---
+
+## 文件放置规则
+
+| 内容类型 | 放置位置 |
+|---------|---------|
+| 新页面 | `src/pages/<PageName>/PageName.tsx` |
+| 页面专属组件 | `src/pages/<PageName>/components/` |
+| 自定义 Hooks | `src/hooks/` |
+| 工具函数 | `src/lib/` |
+| 静态数据文件 | `public/data/` |
+| 静态图片 | `public/images/` |
+
+---
+
+## 导入路径
+
+```typescript
+// @/ 别名 → src/
+import { cn } from "@/lib/utils";
+import { useIsMobile } from "@/hooks/use-mobile";
+
+// public/ 下的静态资源通过 URL 引用（dev 与线上同源）
+// <img src="/images/hero.png" />  fetch("/data/config.json")
+```
+
+---
+
+## 路由配置
+
+- 新增页面需在 `src/app.tsx` 的 `<Routes>` 内注册 `<Route>`
+- `BrowserRouter` 已在 `index.tsx` 中配置，`app.tsx` 中**禁止**再包裹 Router
+
+---
+
+## 主题变量
+
+主题色定义在 `src/index.css`，通过 `:root` CSS 变量 + `@theme inline` 注册到 Tailwind。
+
+| 用途 | Tailwind 类 | CSS 变量 |
+|------|------------|----------|
+| 页面背景 | `bg-background` | `--background` |
+| 主文本 | `text-foreground` | `--foreground` |
+| 卡片背景 | `bg-card` | `--card` |
+| 次要文本 | `text-muted-foreground` | `--muted-foreground` |
+| 主色 | `bg-primary` / `text-primary` | `--primary` |
+| 强调色 | `bg-accent` | `--accent` |
+| 边框 | `border-border` | `--border` |
+| 危险色 | `text-destructive` | `--destructive` |
+| 图表色 | `bg-chart-1` ~ `bg-chart-5` | `--chart-1` ~ `--chart-5` |
+
+HSL 格式使用**空格分隔**：`--primary: hsl(150 60% 40%);`

package/template/_gitignore

@@ -0,0 +1,64 @@
+# Dependencies
+node_modules/
+*/node_modules/
+
+# Production builds
+dist/
+*/dist/
+build/
+*/build/
+
+# Environment files
+.env.local
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+/logs/
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+*.lcov
+
+# IDE files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Temporary folders
+tmp/
+temp/
+.playwright-cli/
+
+# Lock files (keep package-lock.json for consistent installs)
+yarn.lock
+pnpm-lock.yaml
+
+# Cache files
+.eslintcache
+*.tsbuildinfo
+
+# swc wasm
+.swc
+
+# Agent files
+.agent/

package/template/_npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmmirror.com/

package/template/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/template/eslint.config.mjs

@@ -0,0 +1,27 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import { globalIgnores } from 'eslint/config';
+
+export default tseslint.config(globalIgnores(['dist', '**/components/ui/**']), {
+  files: ['src/**/*.{ts,tsx}'],
+  extends: [
+    js.configs.recommended,
+    ...tseslint.configs.recommended,
+    reactHooks.configs.flat.recommended,
+    reactRefresh.configs.vite,
+  ],
+  languageOptions: {
+    ecmaVersion: 2023,
+    globals: globals.browser,
+  },
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+    ],
+  },
+});

package/template/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>应用标题</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package/template/miaoda.json

@@ -0,0 +1,11 @@
+{
+  "stack": "react-standard-webapp",
+  "dev": {
+    "command": ["npm", "run", "dev"],
+    "port": 5173
+  },
+  "build": {
+    "command": ["npm", "run", "build"],
+    "output": "dist"
+  }
+}