@uofx/plugin-schematics

v1.0.3

Published

10 days ago

Angular Schematics for UOF X Plugin development

0High
0Medium
0Low

edeeric

hollyliang

uofx schematics plugin angular

@uofx/plugin-schematics

Angular Schematics 套件，用於在 UOF X Plugin 專案中生成元件。

前提條件

⚠️ 重要：執行任何 Schematic 前，目標專案的 ClientApp/ 目錄下必須存在 schematics/ 樣板資料夾。
若樣板資料夾不存在，Schematic 將拋出錯誤並中止執行。

樣板資料夾結構如下（詳見底部樣板結構）：

ClientApp/
└── schematics/          # ← 此資料夾必須存在
    ├── model/
    ├── field/
    ├── panel/
    └── page/

若此資料夾遺失，請重新從樣板專案複製。

可用的 Schematics

plugin-field（別名：field）

生成外掛欄位元件（Web 端）。

ng g @uofx/plugin-schematics:field my-field

選項：

| 選項 | 型別 | 說明 | 預設值 | |------|------|------|--------| | name | string | 欄位名稱（必填） | — | | --display-name | string | 顯示名稱 | PascalCase 名稱 | | --code | string | 欄位代碼 | camelCase 名稱 | | --group | string | 欄位群組（不存在時自動建立） | group1 | | --design | boolean | 產生 design 元件 | true | | --print | boolean | 產生 print 元件 | true | | --view | boolean | 產生 view 元件 | true | | --dry-run | boolean | 模擬執行，不實際建立檔案 | false |

範例：

# 產生 Web 端欄位
ng g @uofx/plugin-schematics:field customer-info

# 使用自訂欄位代碼
ng g @uofx/plugin-schematics:field customer-info --code=custInfo

# 指定群組
ng g @uofx/plugin-schematics:field customer-info --group=group2

plugin-mobile-field（別名：mobile-field）

生成行動端欄位元件（write + view）。

⚠️ 前置條件：行動端欄位必須有對應的 Web 端欄位。請先使用 plugin-field 生成同名（或同 code）的 Web 端欄位。

ng g @uofx/plugin-schematics:mobile-field my-field

選項：

範例：

# 1. 先產生 Web 端欄位
ng g @uofx/plugin-schematics:field customer-info

# 2. 再產生對應的行動端欄位（code 必須與 Web 端一致）
ng g @uofx/plugin-schematics:mobile-field customer-info

# 使用自訂欄位代碼（需與 Web 端 field 的 code 相同）
ng g @uofx/plugin-schematics:mobile-field customer-info --code=custInfo

plugin-admin-panel（別名：admin-panel）

生成管理端面板元件。

ng g @uofx/plugin-schematics:admin-panel dashboard

選項：

| 選項 | 型別 | 說明 | 預設值 | |------|------|------|--------| | name | string | 面板名稱（必填） | — | | --display-name | string | 顯示名稱 | PascalCase 名稱 | | --code | string | 面板代碼 | camelCase 名稱 | | --dry-run | boolean | 模擬執行 | false |

範例：

ng g @uofx/plugin-schematics:admin-panel dashboard
ng g @uofx/plugin-schematics:admin-panel dashboard --code=adminDash

plugin-user-panel（別名：user-panel）

生成使用者端面板元件。

ng g @uofx/plugin-schematics:user-panel my-panel

選項：

範例：

ng g @uofx/plugin-schematics:user-panel notifications
ng g @uofx/plugin-schematics:user-panel notifications --display-name=通知面板

plugin-mobile-panel（別名：mobile-panel）

生成行動端面板元件。

ng g @uofx/plugin-schematics:mobile-panel app-dashboard

選項：

範例：

ng g @uofx/plugin-schematics:mobile-panel app-dashboard
ng g @uofx/plugin-schematics:mobile-panel app-dashboard --code=mobileDash

plugin-admin-page（別名：admin-page）

生成管理端頁面元件，支援多種頁面類型。

ng g @uofx/plugin-schematics:admin-page settings

選項：

| 選項 | 型別 | 說明 | 預設值 | |------|------|------|--------| | name | string | 頁面名稱（必填） | — | | --display-name | string | 顯示名稱 | PascalCase 名稱 | | --func-id | string | 功能識別碼 | CONSTANT_CASE 名稱 | | --type | basic | container | sider | tab | 頁面類型 | basic | | --dry-run | boolean | 模擬執行 | false |

頁面類型說明：

| 類型 | 說明 | |------|------| | basic | 空白頁面（預設） | | container | 置中容器佈局頁面 | | sider | 側邊欄佈局頁面 | | tab | 頁籤佈局頁面 |

範例：

# 空白頁面（預設）
ng g @uofx/plugin-schematics:admin-page settings

# 置中容器頁面
ng g @uofx/plugin-schematics:admin-page settings --type=container

# 側邊欄頁面
ng g @uofx/plugin-schematics:admin-page settings --type=sider

# 頁籤頁面
ng g @uofx/plugin-schematics:admin-page settings --type=tab

# 自訂 funcId 與顯示名稱
ng g @uofx/plugin-schematics:admin-page settings --func-id=PLUGIN_SETTINGS --display-name=設定管理

plugin-user-page（別名：user-page）

生成使用者端頁面元件，支援多種頁面類型。

ng g @uofx/plugin-schematics:user-page profile

選項：

| 選項 | 型別 | 說明 | 預設值 | |------|------|------|--------| | name | string | 頁面名稱（必填） | — | | --display-name | string | 顯示名稱 | PascalCase 名稱 | | --func-id | string | 功能識別碼 | CONSTANT_CASE 名稱 | | --type | basic | full | tab | 頁面類型 | basic | | --dry-run | boolean | 模擬執行 | false |

頁面類型說明：

| 類型 | 說明 | |------|------| | basic | 空白頁面（預設） | | full | 滿版佈局頁面 | | tab | 頁籤佈局頁面 |

範例：

# 空白頁面（預設）
ng g @uofx/plugin-schematics:user-page profile

# 滿版佈局頁面
ng g @uofx/plugin-schematics:user-page profile --type=full

# 頁籤頁面
ng g @uofx/plugin-schematics:user-page profile --type=tab

plugin-mobile-page（別名：mobile-page）

生成行動版頁面元件，支援多種頁面類型。

ng g @uofx/plugin-schematics:mobile-page home

選項：

| 選項 | 型別 | 說明 | 預設值 | |------|------|------|--------| | name | string | 頁面名稱（必填） | — | | --display-name | string | 顯示名稱 | PascalCase 名稱 | | --func-id | string | 功能識別碼 | CONSTANT_CASE 名稱 | | --type | basic | tab | 頁面類型 | basic | | --dry-run | boolean | 模擬執行 | false |

頁面類型說明：

| 類型 | 說明 | |------|------| | basic | 空白 Ionic 頁面（預設） | | tab | Segment 頁籤佈局頁面（含列表/卡片視圖切換） |

範例：

# 空白頁面（預設）
ng g @uofx/plugin-schematics:mobile-page home

# 頁籤頁面
ng g @uofx/plugin-schematics:mobile-page home --type=tab

# 自訂 funcId 與顯示名稱
ng g @uofx/plugin-schematics:mobile-page home --func-id=APP_HOME --display-name=首頁

plugin-version（別名：version）

在 plugin.versions.json 中新增版本項目。

ng g @uofx/plugin-schematics:version --version=1.0 --min-uofx-version=2.89.0

選項：

| 選項 | 型別 | 說明 | 預設值 | |------|------|------|--------| | --version | string | 版本號（必填） | — | | --min-uofx-version | string | 最低 UOFX 版本（必填） | — |

範例：

# 新增版本
ng g @uofx/plugin-schematics:version --version=2.0 --min-uofx-version=2.89.0

樣板結構

此套件從目標專案的 ClientApp/schematics/ 目錄讀取樣板。此資料夾必須存在且結構完整，否則 Schematic 將拋出錯誤並中止。

ClientApp/schematics/
├── model/                  # Model 樣板（field 專用）
├── field/
│   ├── web/               # Web 欄位樣板
│   └── app/               # App 欄位樣板
├── panel/
│   ├── admin/             # 管理端面板樣板
│   ├── user/              # 使用者端面板樣板
│   └── app/               # 行動端面板樣板
└── page/
    ├── web/
    │   ├── admin/
    │   │   ├── basic/     # 空白頁面樣板（預設）
    │   │   ├── container/ # 置中容器頁面樣板
    │   │   ├── sider/     # 側邊欄頁面樣板
    │   │   └── tab/       # 頁籤頁面樣板
    │   └── user/
    │       ├── basic/     # 空白頁面樣板（預設）
    │       ├── full/      # 滿版佈局頁面樣板
    │       └── tab/       # 頁籤頁面樣板
    └── app/
        ├── basic/     # 空白 Ionic 頁面樣板（預設）
        └── tab/       # Segment 頁籤頁面樣板

樣板變數

樣板檔案使用 .template 副檔名，支援以下 EJS 風格變數：

內容變數

| 變數 | 說明 | 範例（name=my-field） | |------|------|------------------------| | <%= name %> | 原始名稱 | my-field | | <%= dasherize(name) %> | kebab-case | my-field | | <%= classify(name) %> | PascalCase | MyField | | <%= camelize(name) %> | camelCase | myField | | <%= constantCase(name) %> | CONSTANT_CASE | MY_FIELD | | <%= underscore(name) %> | snake_case | my_field | | <%= displayName %> | 顯示名稱 | MyField | | <%= code %> | 欄位/面板代碼 | myField | | <%= group %> | 欄位群組（field 專用） | group1 | | <%= funcId %> | 功能識別碼（page 專用） | MY_FIELD | | <%= scope %> | 範圍（admin | user | app） | `` |

檔名變數

| 變數 | 說明 | 範例（name=my-field） | |------|------|------------------------| | __name__ | 原始名稱（不轉換） | my-field | | __name@dasherize__ | kebab-case | my-field | | __name@classify__ | PascalCase | MyField | | __name@camelize__ | camelCase | myField |

範例樣板

檔名：__name@dasherize__.component.ts.template

import { Component } from '@angular/core';

@Component({
  selector: 'app-<%= dasherize(name) %>',
  templateUrl: './<%= dasherize(name) %>.component.html'
})
export class <%= classify(name) %>Component {
  // <%= displayName %> 元件
}

設定檔自動更新

各 Schematic 執行時會自動更新以下設定檔：

| Schematic | 更新的設定檔 | |-----------|-------------| | plugin-field | fields-design.json、fields-runtime.json（web 部分）、webpack-exposes.config.js（web section）、app.module.ts | | plugin-mobile-field | fields-runtime.json（app 部分）、webpack-exposes.config.js（app section）、app.module.ts | | plugin-admin-panel | panels-design.json、panels-runtime.json、webpack-exposes.config.js | | plugin-user-panel | panels-design.json、panels-runtime.json、webpack-exposes.config.js | | plugin-mobile-panel | panels-design.json、panels-runtime.json、app-panel.module.ts | | plugin-admin-page | routes.json、admin.module.ts（NgModule + Router 更新） | | plugin-user-page | routes.json、user.module.ts（NgModule + Router 更新） | | plugin-mobile-page | routes.json、page.module.ts（NgModule + Router 更新） | | plugin-version | plugin.versions.json |

JSON 設定檔位於 src/assets/configs/ 目錄下，webpack-exposes.config.js 位於專案根目錄，plugin.versions.json 位於 src/ 目錄。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@uofx/plugin-schematics

前提條件

可用的 Schematics

plugin-field（別名：field）

plugin-mobile-field（別名：mobile-field）

plugin-admin-panel（別名：admin-panel）

plugin-user-panel（別名：user-panel）

plugin-mobile-panel（別名：mobile-panel）

plugin-admin-page（別名：admin-page）

plugin-user-page（別名：user-page）

plugin-mobile-page（別名：mobile-page）

plugin-version（別名：version）

樣板結構

樣板變數

內容變數

檔名變數

範例樣板

設定檔自動更新