f115e6d782
- Revised the README and agent-sui documentation to clarify the directory structure, including the addition of __data.json and __locales directories for global and page-level data. - Enhanced explanations of the pages directory, emphasizing the organization of global and assistant-specific pages. - Updated the i18n documentation to detail locale detection and the importance of server-side rendering for translations, including a code snippet for changing locales via JavaScript.
108 lines
3.2 KiB
Markdown
108 lines
3.2 KiB
Markdown
# SUI - Simple User Interface
|
|
|
|
SUI is a full-stack web development framework that allows you to create web applications using HTML, CSS, and TypeScript/JavaScript without complex build tools.
|
|
|
|
## Features
|
|
|
|
- **Page as Component**: Every page is a component, unifying the development model
|
|
- **Template Syntax**: Intuitive data binding, conditionals, and loops
|
|
- **Backend Scripts**: Server-side logic with TypeScript
|
|
- **Scoped Styles**: Automatic CSS scoping per component
|
|
- **i18n Support**: Built-in internationalization
|
|
- **Agent SUI**: Special configuration for AI Agent applications
|
|
|
|
## Quick Start
|
|
|
|
### Directory Structure
|
|
|
|
```
|
|
/templates/<template_name>/
|
|
├── __document.html # Global document template
|
|
├── __data.json # Global data (accessible via $global)
|
|
├── __assets/ # Static assets (reference via @assets/)
|
|
├── __locales/ # Locale files
|
|
└── pages/ # All pages go here
|
|
└── <page>/ # Route = folder name (can be nested)
|
|
├── <page>.html # HTML template (filename must match folder)
|
|
├── <page>.css # Styles
|
|
├── <page>.ts # Frontend script
|
|
├── <page>.json # Data configuration
|
|
├── <page>.config # Page configuration
|
|
├── <page>.backend.ts # Backend script
|
|
└── __locales/ # Page-level locale files
|
|
```
|
|
|
|
### Basic Page
|
|
|
|
**`/home/home.html`**:
|
|
|
|
```html
|
|
<div class="home">
|
|
<h1>{{ title }}</h1>
|
|
<p s:if="{{ showMessage }}">{{ message }}</p>
|
|
</div>
|
|
```
|
|
|
|
**`/home/home.json`**:
|
|
|
|
```json
|
|
{
|
|
"title": "Welcome",
|
|
"showMessage": true,
|
|
"message": "Hello, World!"
|
|
}
|
|
```
|
|
|
|
### Commands
|
|
|
|
```bash
|
|
# Build templates
|
|
yao sui build <sui> [template]
|
|
|
|
# Watch for changes
|
|
yao sui watch <sui> [template]
|
|
|
|
# Build Agent SUI
|
|
yao sui build agent
|
|
|
|
# Watch Agent SUI
|
|
yao sui watch agent
|
|
```
|
|
|
|
## Documentation
|
|
|
|
- [Template Syntax](docs/template-syntax.md) - Data binding, conditionals, loops
|
|
- [Components](docs/components.md) - Page as component, props, slots
|
|
- [Backend Scripts](docs/backend-scripts.md) - Server-side logic
|
|
- [Data Binding](docs/data-binding.md) - Built-in variables and functions
|
|
- [Event Handling](docs/event-handling.md) - Event binding and state management
|
|
- [Internationalization](docs/i18n.md) - Translation and localization
|
|
- [Frontend API](docs/frontend-api.md) - Component query, backend calls, render API, CUI integration
|
|
- [Agent SUI](docs/agent-sui.md) - AI Agent application setup
|
|
|
|
## Agent SUI
|
|
|
|
Agent SUI is designed for AI Agent applications with automatic page loading from assistants:
|
|
|
|
```
|
|
<app>/
|
|
├── agent/
|
|
│ └── template/ # Agent SUI template (shared)
|
|
│ ├── __document.html
|
|
│ ├── __data.json
|
|
│ ├── __assets/
|
|
│ └── pages/ # Global pages (401, 404, etc.)
|
|
│ └── <page>/
|
|
└── assistants/
|
|
└── <name>/
|
|
└── pages/ # Assistant pages → /agents/<name>/<route>
|
|
└── <page>/
|
|
```
|
|
|
|
Build with: `yao sui build agent`
|
|
|
|
See [Agent SUI Documentation](docs/agent-sui.md) for details.
|
|
|
|
## License
|
|
|
|
This project is part of the Yao App Engine and follows the [Yao Open Source License](../LICENSE).
|