跳轉到

Web 外掛頁面

新增外掛頁面

  1. 新增檔案 lobby.page.ts
  2. 設定@UofxPluginAuthorize(),並指定唯一的functionId
lobby.page.ts
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

user.module.ts
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

新增其他modulepage,如同一般在使用 Angular lazy module 的方法,下方為範例新增一支 options.module.ts

user.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所設定的functionIdLOBBY則可進入使用。

LobbyPage若因設定錯誤functionIdLOBBY_ONE,那該功能會無法進入使用。

routes.json
{
  "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 設定方式相同。

  "path": "setting"
  "path": "setting/security"

為避免各個獨立的 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 套件/頁面工具