@yoyaflow/yoya-ui 0.2.0 → 0.3.0

package/README.md

@@ -6,6 +6,28 @@
 
 yoya-ui is a web foundation library — a new form of business UI construction. Views are built directly on the real DOM: declarative HTML authoring, router, i18n, theming, state and server-side rendering (SSR) out of the box, with pure client rendering switchable from the same code. Bundled UI components exist for out-of-the-box convenience; they are not the boundary of the library — native elements and third-party components compose the same way.
 
+## Hello World — declarative UI and reactive i18n
+
+No framework runtime, no virtual DOM, no JSX build step: views are real DOM nodes described in plain JS, and i18n is a string shortcut.
+
+```js
+// HelloWorldExample — declarative UI
+function HelloWorldExample() {
+  return div((root) => {
+    root.p('Hello，World！');
+  });
+}
+```
+
+```js
+// HelloWorldExampleI18n — reactive i18n text with params
+function HelloWorldExampleI18n() {
+  return div((root) => {
+    root.p('Hello, {name}!'.s('greeting.hello', { name: 'yoya-ui' }));
+  });
+}
+```
+
 ## Features
 
 - **Low-barrier declarative authoring**: build UI with declarative structured JS elements — view and logic live in the same language, eliminating the friction between HTML markup and complex manipulation logic; only HTML and plain JS are required, with no framework-specific concepts
@@ -22,6 +44,22 @@ yoya-ui is a web foundation library — a new form of business UI construction.
 
 ## Installation
 
+### Scaffold a new project
+
+```bash
+npx create-yoya-ui@latest my-app                 # basic template (SPA)
+npx create-yoya-ui@latest my-app --template ssr  # SSR template (renderPage + hydrateOrMount)
+npx create-yoya-ui@latest my-app --template admin # admin console template (top nav + collapsible sidebar + RouterViews)
+cd my-app
+npm install
+npm run dev          # basic / admin: dev server
+# SSR: npm run build && npm start
+```
+
+`--template admin` scaffolds a standard admin console: top navigation, collapsible sidebar and a titled RouterViews content area, with feature examples for dashboard (data boards & charts), member / role / permission management, and dictionary management (type table with an item editor dialog).
+
+### Install into an existing project
+
 ```bash
 npm install @yoyaflow/yoya-ui
 ```

package/README.zh-CN.md

@@ -7,6 +7,28 @@
 
 yoya-ui 是一套新的业务界面构建形式，也是一个 Web 基础库：直接在真实 DOM 上构建视图，声明式 HTML 写法、路由、i18n、主题与状态系统开箱即用，支持服务端渲染（SSR）与纯客户端渲染同代码切换。自带 UI 组件只是为了开箱即用，组件清单并不代表库的能力边界——原生元素与第三方组件以同样方式自由组合。
 
+## Hello World——声明式构建与响应式 i18n
+
+没有框架运行时、没有虚拟 DOM、没有 JSX 构建链：视图就是由原生 JS 描述的真实 DOM，i18n 只是字符串快捷方式。
+
+```js
+// HelloWorldExample —— 声明式构建
+function HelloWorldExample() {
+  return div((root) => {
+    root.p('Hello，World！');
+  });
+}
+```
+
+```js
+// HelloWorldExampleI18n —— 响应式 i18n 文本（带参数）
+function HelloWorldExampleI18n() {
+  return div((root) => {
+    root.p('Hello, {name}!'.s('greeting.hello', { name: 'yoya-ui' }));
+  });
+}
+```
+
 ## 特性
 
 - **低门槛声明式构建**：采用声明式结构化 JS 元素构建方案，视图与操作逻辑同源，消除 HTML 标签化语言与复杂操作逻辑不兼容的问题；只学 HTML 与原生 JS 即可使用，无框架专属概念
@@ -23,6 +45,22 @@ yoya-ui 是一套新的业务界面构建形式，也是一个 Web 基础库：
 
 ## 安装
 
+### 脚手架快速搭建
+
+```bash
+npx create-yoya-ui@latest my-app                 # basic 模板（SPA）
+npx create-yoya-ui@latest my-app --template ssr  # SSR 模板（renderPage + hydrateOrMount）
+npx create-yoya-ui@latest my-app --template admin # admin 后台管理模板（顶部导航 + 可折叠侧栏 + RouterViews）
+cd my-app
+npm install
+npm run dev          # basic / admin：开发服务器
+# SSR：npm run build && npm start
+```
+
+`--template admin` 生成标准后台管理模板：顶部导航 + 可折叠侧栏 + 带标题的 RouterViews 内容区，内置数据概览看板与图表，以及成员 / 角色 / 权限 / 字典管理等业务域示例。
+
+### 已有项目引入
+
 ```bash
 npm install @yoyaflow/yoya-ui
 ```