Update Documentation for SUI Structure and Locale Handling
- 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.
This commit is contained in:
parent
0825e06dbe
commit
f115e6d782
3 changed files with 49 additions and 32 deletions
|
|
@ -18,16 +18,18 @@ SUI is a full-stack web development framework that allows you to create web appl
|
|||
```
|
||||
/templates/<template_name>/
|
||||
├── __document.html # Global document template
|
||||
├── __assets/ # Static assets
|
||||
├── __data.json # Global data (accessible via $global)
|
||||
├── __assets/ # Static assets (reference via @assets/)
|
||||
├── __locales/ # Locale files
|
||||
└── <route>/ # Pages
|
||||
└── <page>/
|
||||
├── <page>.html # HTML template
|
||||
└── 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
|
||||
├── <page>.backend.ts # Backend script
|
||||
└── __locales/ # Page-level locale files
|
||||
```
|
||||
|
||||
### Basic Page
|
||||
|
|
@ -85,13 +87,16 @@ Agent SUI is designed for AI Agent applications with automatic page loading from
|
|||
```
|
||||
<app>/
|
||||
├── agent/
|
||||
│ └── template/ # Agent SUI template
|
||||
│ └── template/ # Agent SUI template (shared)
|
||||
│ ├── __document.html
|
||||
│ ├── __data.json
|
||||
│ ├── __assets/
|
||||
│ └── pages/
|
||||
│ └── pages/ # Global pages (401, 404, etc.)
|
||||
│ └── <page>/
|
||||
└── assistants/
|
||||
└── <name>/
|
||||
└── pages/ # Assistant pages
|
||||
└── pages/ # Assistant pages → /agents/<name>/<route>
|
||||
└── <page>/
|
||||
```
|
||||
|
||||
Build with: `yao sui build agent`
|
||||
|
|
|
|||
|
|
@ -11,31 +11,28 @@ Agent SUI is a special SUI configuration designed for AI Agent applications. It
|
|||
│ └── template/ # Agent SUI template directory
|
||||
│ ├── template.json # Optional template configuration
|
||||
│ ├── __document.html # Global document template
|
||||
│ ├── __data.json # Global data
|
||||
│ ├── __assets/ # Global assets (CSS, JS, images)
|
||||
│ ├── __data.json # Global data (accessible via $global)
|
||||
│ ├── __assets/ # Global assets (reference via @assets/)
|
||||
│ │ ├── css/
|
||||
│ │ ├── js/
|
||||
│ │ └── images/
|
||||
│ ├── pages/ # Global agent pages (login, error, etc.)
|
||||
│ │ └── login/
|
||||
│ │ └── login.html
|
||||
│ └── __locales/ # Internationalization
|
||||
│ ├── __locales/ # Global locale files
|
||||
│ └── pages/ # Global pages (401, 404, login, etc.)
|
||||
│ └── <page>/ # Route = folder name
|
||||
│ ├── <page>.html
|
||||
│ ├── <page>.css
|
||||
│ ├── <page>.ts
|
||||
│ └── __locales/ # Page-level locale files
|
||||
│
|
||||
└── assistants/ # Assistants directory
|
||||
├── demo/ # Assistant: demo
|
||||
│ ├── package.yao # Assistant configuration
|
||||
│ └── pages/ # Assistant-specific pages
|
||||
│ ├── index/
|
||||
│ │ ├── index.html
|
||||
│ │ ├── index.css
|
||||
│ │ └── index.ts
|
||||
│ └── __assets/ # Optional assistant-specific assets
|
||||
│
|
||||
└── another/ # Assistant: another
|
||||
├── package.yao
|
||||
└── pages/
|
||||
└── settings/
|
||||
└── settings.html
|
||||
└── <name>/ # Assistant
|
||||
├── package.yao # Assistant configuration
|
||||
└── pages/ # Assistant pages → /agents/<name>/<route>
|
||||
└── <page>/ # Route = folder name (can be nested)
|
||||
├── <page>.html
|
||||
├── <page>.css
|
||||
├── <page>.ts
|
||||
└── __locales/
|
||||
```
|
||||
|
||||
## Route Mapping
|
||||
|
|
|
|||
|
|
@ -128,11 +128,26 @@ self.Confirm = () => {
|
|||
|
||||
## Locale Detection
|
||||
|
||||
SUI detects locale from:
|
||||
SUI detects locale from the `locale` HTTP cookie on the server side.
|
||||
|
||||
1. Cookie (`locale` or `umi_locale`)
|
||||
2. Browser language
|
||||
3. Default (`en-us`)
|
||||
**Important:** `s:trans` translations are server-side rendered. This means:
|
||||
|
||||
1. The translation happens when the page is generated on the server
|
||||
2. Changing locale via JavaScript only affects localStorage/client state
|
||||
3. To apply locale changes to `s:trans` content, you must reload the page
|
||||
|
||||
```javascript
|
||||
// To change locale and have s:trans reflect the change:
|
||||
document.cookie = "locale=zh-CN;path=/;max-age=31536000";
|
||||
location.reload(); // Required for server-side translations
|
||||
```
|
||||
|
||||
**Cookie Priority:**
|
||||
|
||||
1. `locale` cookie (primary)
|
||||
2. `umi_locale` cookie (fallback for CUI compatibility)
|
||||
3. Browser language
|
||||
4. Default (`en-us`)
|
||||
|
||||
### Access Current Locale
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue