ch3chi-commons-vue 0.1.7 → 0.1.10

package/README.md

@@ -1,6 +1,6 @@
 # Commons Vue Library
 
-這是一個 Vue 公用元件/函式庫範例。
+這是一個 Vue 公用元件/函式庫。
 
 ## 安裝
 
@@ -10,40 +10,79 @@ npm install commons-vue
 
 ## 使用方式
 
-### 在 Vue 專案中引入
-
-```js
-// main.js 或 main.ts
-import { SomeComponent, someUtil } from 'commons-vue';
-
-// 註冊元件
-app.component('SomeComponent', SomeComponent);
-
-// 使用工具函式
-const result = someUtil(...args);
+### APIService 範例
+
+```ts
+import { ApiService, ApiRequest } from 'commons-vue';
+
+// 註冊多個 API 端點
+ApiService.registerEndpoints({
+  getUser: { path: '/user/{id}', method: 'GET' },
+  createUser: { path: '/user', method: 'POST' }
+});
+
+// 新增單一 API 端點
+ApiService.addEndpoints('deleteUser', { path: '/user/{id}', method: 'DELETE' });
+
+// 呼叫 API
+const req = new ApiRequest({
+  endpointKey: 'getUser',
+  pathParam: { id: 123 }
+});
+ApiService.call(req).then(resp => {
+  if (resp.isOk()) {
+    console.log('取得使用者資料:', resp.data);
+  } else {
+    console.error('API 錯誤:', resp.message);
+  }
+});
+
+// 下載檔案
+const downloadReq = new ApiRequest({
+  endpointKey: 'exportUser',
+  queryParam: { id: 123 },
+  downloadFileName: 'user_123.xlsx'
+});
+ApiService.download(downloadReq).then(() => {
+  console.log('檔案下載完成');
+}).catch(err => {
+  console.error('下載失敗:', err);
+});
 ```
 
-### 元件範例
-
-```vue
-<template>
-  <SomeComponent :propA="value" />
-</template>
-
-<script setup>
-import { SomeComponent } from 'commons-vue';
-</script>
+### AuthorizationService 範例
+
+```ts
+import { AuthorizationService, CMenuItem, MenuItem } from 'commons-vue';
+
+// 設定角色權限映射
+AuthorizationService.rolePermissionMap = {
+  admin: ['user.read', 'user.write', 'menu.view'],
+  user: ['user.read', 'menu.view']
+};
+
+// 設定選單定義映射
+AuthorizationService.menuDefineMap = {
+  default: [
+    { title: '使用者管理', permission: 'user.read' },
+    { title: '系統設定', permission: 'user.write' }
+  ]
+};
+
+// 檢查角色是否有某權限
+const hasWrite = AuthorizationService.hasPermissionByRole(['user'], 'user.write');
+console.log('user 是否有寫入權限:', hasWrite);
+
+// 取得符合權限的選單
+const menu = AuthorizationService.provideMenuByPermission({
+  roleCode: 'user',
+  permissions: ['user.read', 'menu.view']
+});
+console.log('使用者可見選單:', menu);
 ```
 
-### 工具函式範例
-
-```js
-import { someUtil } from 'commons-vue';
 
-const output = someUtil(input);
-```
 
 ## 文件
 
 請參考 src/ 目錄下的程式碼與註解，或補充詳細 API 文件。
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ch3chi-commons-vue",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -21,27 +21,45 @@
     "build": "tsc"
   },
   "peerDependencies": {
+    "@fortawesome/fontawesome-svg-core": ">=7.1.0",
+    "@fortawesome/free-solid-svg-icons": ">=7.1.0",
+    "@fortawesome/vue-fontawesome": ">=3.1.2",
+    "axios": ">=1.13.2",
     "bootstrap": "^5.3.7",
     "dayjs": ">=1.11.13",
+    "flatpickr": ">=4.6.13",
     "lodash": ">=4.17.21",
+    "mime-types": ">=3.0.1",
     "uuid": ">=11.1.0",
+    "uuidv4": ">=6.2.13",
     "vee-validate": ">=4.15.1",
     "vue": "^3.5.18",
     "yup": ">=1.7.1"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/vue-fontawesome": "^3.1.2",
+    "@tinymce/tinymce-vue": "^6.3.0",
     "@types/bootstrap": "^5.2.10",
     "@types/lodash": "^4.17.20",
+    "@types/mime-types": "^3.0.1",
     "@types/node": "^24.10.0",
+    "axios": "^1.13.2",
     "bootstrap": "^5.3.7",
     "dayjs": "^1.11.13",
+    "flatpickr": "^4.6.13",
     "lodash": "^4.17.21",
+    "mime-types": "^3.0.1",
+    "pinia": "^3.0.4",
     "typescript": "^5.9.3",
     "uuid": "^11.1.0",
+    "uuidv4": "^6.2.13",
     "vee-validate": "^4.15.1",
     "vite": "^7.2.1",
     "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.23",
+    "vue-router": "^4.6.3",
     "yup": "^1.7.1"
   },
   "prepublishOnly": [