Web 外掛頁面
新增外掛頁面¶
- 新增檔案 lobby.page.ts。
- 設定
@UofxPluginAuthorize()
,並指定唯一的functionId
。
import { Component } from "@angular/core";
import { UofxPluginAuthorize } from "@uofx/plugin";
@UofxPluginAuthorize({ functionId: "LOBBY" })
@Component({
selector: "uofx-web-lobby",
template: `<h1>Lobby</h1>`,
})
export class LobbyPage {}
設定路由¶
管理者端新增在 admin.module.ts,使用者端則在 user.module.ts,範例中為設定空路徑導向 lobby,lobby 會載入LobbyPage
。
import { LobbyPage } from "./lobby.page";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
@NgModule({
imports: [
RouterModule.forChild([
{ path: "", redirectTo: "lobby", pathMatch: "full" },
{ path: "lobby", component: LobbyPage },
{
],
declarations: [LobbyPage],
})
export class UserModule {}
使用 lazy load module¶
新增其他module
與page
,如同一般在使用 Angular lazy module 的方法,下方為範例新增一支 options.module.ts。
imports: [
RouterModule.forChild([
{ path: "", redirectTo: "lobby", pathMatch: "full" },
{ path: "lobby", component: LobbyPage },
{
path: "options",
loadChildren: () => import("./options.module").then((m) => m.OptionsModule),
},
]),
],
declarations: [LobbyPage],
})
export class UserModule {}
Danger
目前暫不支援使用 standalone component 並設定 loadComponent 載入,此方法會導致 Page 驗證失效。除非所設定的 Page 不需要通過身份驗證皆可查看。
設定 routes.json¶
在 routes.json 中設定的functionId
,於 Plugin 功能管理中設定可用的特定使用者,則特定使用者權限中即包含該functionId
,便可正確進入該相同於@UofxPluginAuthorize
所設定的功能頁面。
以下方menu
設定方式為例,在 Plugin 功能管理中設定選單「大廳」為 user1 可以使用,則 user1 可以看到選單「EDE 外掛模組」/「大廳」,點選大廳會導向 /user/plugin/{code}/lobby,lobby 路徑於 user.module.ts 指定為讀取LobbyPage
,此時LobbyPage
所設定的functionId
為LOBBY
則可進入使用。
即LobbyPage
若因設定錯誤functionId
為LOBBY_ONE
,那該功能會無法進入使用。
{
"user": {
"menu": {
"name": "EDE 外掛模組",
"icon": "assets/icons/pets.png",
"children": [
{
"funcId": "LOBBY",
"name": "大廳",
"icon": "assets/icons/house.png",
"path": "lobby"
}
]
}
}
}
設定 Icon¶
可參考 配置與設定>設定檔共用規則
Icon 設計規範¶
此規範是為了符合 UOF X 風格,若不需要風格一致,可忽略。
使用者端¶
項目 | 規格 |
---|---|
大小 | 22px |
主色 | #FFC2AF |
輔色 | #FFC2AF |
邊界留白 | 2~4px |
項目 | 規格 |
---|---|
大小 | 22px |
主色 | #999999 |
輔色 | - |
邊界留白 | 2~4px |
管理者端¶
項目 | 規格 |
---|---|
大小 | 22px |
主色 | #FFC2AF |
輔色 | #FFC2AF |
邊界留白 | 2~4px |
項目 | 規格 |
---|---|
大小 | 22px |
主色 | #97A1B7 |
輔色 | - |
邊界留白 | 2~4px |
設定 Path¶
Path 設定為相對路徑,路徑設定方式皆與原 Angular router 設定方式相同。
為避免各個獨立的 Plugin 衝突,所以皆有保留路徑。
- 使用者端: /user/plugin/{codePath}
- 管理者端: /admin/plugin/{codePath}
codePath
為由PluginCode
將.
移除,並全部變成小寫轉換而成,如下:
- Ede.Sample.Plugin > /user/plugin/edesampleplugin
- Ede.HRSystem -> /user/plugin/edehrsystem
如上方所設定之範例,連結組合為 /admin/plugin/edesampleplugin/setting 與 /admin/plugin/edesampleplugin/setting/security。
因路徑名稱較長,且相對路徑使用不便,可改用 Plugin 套件/頁面工具