ခြုံငုံသုံးသပ်ချက်
Home shortcuts သည် မကြာခဏ သုံးသော လုပ်ဆောင်ချက်များ (POS၊ scan၊ create invoice) အတွက် home screen icon tile များ ဖြစ်ပါသည်။ PluginModule.register() အတွင်း base-frontend shortcut store မှ တစ်ကြိမ် မှတ်ပုံတင်ပါ — AppRegistry မဟုတ်ပါ။
- useHomeShortcutStore နှင့် ShortcutItem ကို @quan-erp/base-frontend မှ import လုပ်ပါ
- register() အတွင်း useHomeShortcutStore().getState().add({…}) ခေါ်ပါ
- Icon ကို <ShortcutItem> ဖြင့် wrap လုပ်ပါ
- id သည် plugin အားလုံးတွင် unique ဖြစ်ရပါမည် (`${metadata.name}/…` ကို ဦးစားပေးပါ)
၁။ Shortcut မှတ်ပုံတင်ခြင်း
frontend/src/index.tsx ၏ register() တွင် add() ခေါ်ပါ။ pluginName၊ unique id၊ displayName၊ ShortcutItem-wrapped icon နှင့် toLink နှင့်/သို့မဟုတ် onClick ပေးပါ။
TSXfrontend/src/index.tsx
1import { ShoppingCart } from "lucide-react";
2import { ShortcutItem, useHomeShortcutStore } from "@quan-erp/base-frontend";
3import type { AppRegistryState, PluginModule } from "@quan-erp/shared-types";
4import metadata from "../module.metadata.json" with { type: "json" };
5
6const Plugin: PluginModule = {
7 register(_AppRegistry: AppRegistryState) {
8 useHomeShortcutStore().getState().add({
9 pluginName: metadata.name,
10 id: `${metadata.name}/pos`,
11 displayName: "POS",
12 component: (
13 <ShortcutItem>
14 <ShoppingCart size={25} />
15 </ShortcutItem>
16 ),
17 toLink: `/${metadata.name}/pos`,
18 async onClick() {
19 // optional — dialogs, scans, side effects
20 },
21 });
22 },
23};
24
25export default Plugin;၂။ Properties
add() entry တစ်ခုစီသည် home tile တစ်ခုကို စီစဉ်ပါသည်။
- pluginName — module.metadata.json name နှင့် တူရပါမည်
- id — plugin များအနှံ့ unique၊ `${metadata.name}/feature` အကြံပြုပါသည်
- displayName — icon အောက် label
- component — ReactNode၊ icon ကို <ShortcutItem> ဖြင့် wrap ရပါမည်
- toLink — optional route (ဥပမာ `/${metadata.name}/pos`)
- onClick — dialog၊ scanner သို့မဟုတ် custom navigation အတွက် optional async handler
၃။ Navigation patterns
ပုံမှန် route jump အတွက် toLink သုံးပါ။ Dialog ဖွင့်ခြင်း၊ scan flow စတင်ခြင်း သို့မဟုတ် navigate မတိုင်မီ logic လိုလျှင် onClick သုံးပါ။ လိုအပ်လျှင် နှစ်ခုလုံး ပေါင်းသုံးနိုင်ပါသည်။
- Collision မဖြစ်စေရန် toLink ကို plugin path namespace အောက်တွင် ထားရှိပါ
- toLink ကို အမှန်ရှိသော AppRegistry.route / menu path နှင့် ကိုက်ညီအောင် ထားပါ
- အမြင်ညီညွတ်စေရန် IconPark / lucide icons (~25) ကို ဦးစားပေးပါ
TSonClick-only (e.g. scan)
1useHomeShortcutStore().getState().add({
2 pluginName: metadata.name,
3 id: `${metadata.name}/scan`,
4 displayName: "Scan",
5 component: (
6 <ShortcutItem>
7 <ScanIcon size={25} />
8 </ShortcutItem>
9 ),
10 async onClick() {
11 // open scanner / dialog — no toLink required
12 },
13});အရေးကြီးသော စည်းကမ်းများ
- register() တွင်သာ မှတ်ပုံတင်ပါ — page component mount တွင် မလုပ်ရပါ
- component သည် ShortcutItem သုံးရပါမည် — bare icon သည် home layout styling ကို ပျက်စေပါသည်
- id များသည် installed plugin အားလုံးတွင် unique ဖြစ်ရပါမည်
- pluginName သည် metadata.name နှင့် တူရပါမည်
- မကြာခဏ သုံးသော action များအတွက်သာ — menu item တိုင်း မဟုတ်ပါ
စစ်ဆေးရန်စာရင်း
- ShortcutItem + useHomeShortcutStore ကို @quan-erp/base-frontend မှ import လုပ်ပါ
- register() တွင် pluginName, id, displayName, component ဖြင့် add() ခေါ်ပါ
- Icon ကို <ShortcutItem> ဖြင့် wrap လုပ်ပါ
- toLink နှင့်/သို့မဟုတ် onClick သတ်မှတ်ပါ
- quan-erp watch နှင့် install ပြီးနောက် tile ပေါ်ကြောင်း စစ်ဆေးပါ
အဖြစ်များသော ပြဿနာများ
- Tile မပေါ် — add မလုပ်ခြင်း / pluginName မှားခြင်း / မ install ရသေးခြင်း
- Icon layout ပျက် — ShortcutItem ပျောက်နေခြင်း
- Click မလုပ် — toLink/onClick မရှိခြင်း သို့မဟုတ် path မှားခြင်း
- Duplicate — id မထူးခြားခြင်း
- လမ်းမှား — toLink နှင့် route မကိုက်ခြင်း