ပန်းတိုင်
Desktop တွင် သိပ်သည်းပြီး ထိရောက်သော list/detail မျက်နှာပြင်၊ mobile တွင် ဖတ်ရှုရလွယ်ပြီး လက်ချောင်းဖြင့် သုံးရလွယ်သော မျက်နှာပြင်ကို ပေးပို့ရပါသည် — စွမ်းရည်များကို မလျှော့ချဘဲ ဖြစ်ပါသည်။
- Query / data source တစ်ခုတည်း — presentation သာ ခွဲခြားပါ
- Desktop — DataTable + PageTitle actions
- Mobile — card list + Floating action button ဖြင့် primary action
- UI ကို ပြောင်းလဲပြသပါ — feature များကို empty placeholder ဖြင့် မဖျောက်ရပါ
1. လိုအပ်ချက်များ
Data ကို load လုပ်ပြီးသား plugin page နှင့် shared UI primitives များ လိုအပ်ပါသည်။
- @quan-erp/shared-ui ရရှိနိုင်ရပါမည် (useMediaQuery, SCREENS, DataTable, PageTitle, PageContent)
- Desktop အတွက် columns / rows ရှိသော list page တစ်ခု
- စာမျက်နှာသည် mobile chrome တွင် ပေါ်ပါက bottom nav ကို configure လုပ်ထားနိုင်ပါသည်
2. Mobile စစ်ဆေးခြင်း
Shared breakpoint helper ကို အသုံးပြုပါ။ SCREENS.md သည် Quark ERP plugin စာမျက်နှာများအတွက် စံ mobile/desktop ခွဲခြားချက် ဖြစ်ပါသည်။
- md breakpoint အောက်တွင် isMobile === true ဖြစ်ပါသည်
- window.innerWidth ဖြင့် ad-hoc စစ်ဆေးခြင်းထက် ဤနည်းကို ဦးစားပေးပါ
import { useMediaQuery, SCREENS } from "@quan-erp/shared-ui";
const isMobile = useMediaQuery(SCREENS.md);3. Layout ပြောင်းလဲခြင်း (data တူညီ)
တစ်ကြိမ်သာ fetch လုပ်ပါ။ data / isLoading ကို branch နှစ်ခုလုံးသို့ ပေးပို့ပါ။ Mobile တွင် dense PageTitle action row ကို ရိုးရှင်းစေပါ (သို့မဟုတ် ချန်လှပ်ပါ)၊ primary action များကို FAB သို့ ရွှေ့ပါ။
- Desktop — DataTable သိပ်သည်းမှုနှင့် PageTitle toolbar actions ထားရှိပါ
- Mobile — card list component; create/edit အတွက် FAB
- Mobile အတွက် query ကို ဒုတိယအကြိမ် မခေါ်ရပါ
1{isMobile ? (
2 <div />
3) : (
4 <PageTitle>
5 <div className="flex items-center justify-between w-full">
6 <span>{translation.get("feature", "Feature")}</span>
7 <Button onClick={() => setCreateOpen(true)}>Add</Button>
8 </div>
9 </PageTitle>
10)}
11
12<PageContent>
13 {isMobile ? (
14 <MobileListView data={data} isLoading={isLoading} />
15 ) : (
16 <DataTable columns={columns} data={data} />
17 )}
18</PageContent>4. Mobile card ပုံစံ
Cupertino-style card များကို ဦးစားပေး၍ အတန်းများကို တို့ထိရလွယ်ပြီး ဖတ်ရှုရလွယ်အောင် ထားပါ။ Row action များအတွက် dense table action column အစား ghost icon button များကို အသုံးပြုပါ။
- Card shell — bg-card, p-4, rounded-3xl, cupertino-corner, border, shadow-sm, flex flex-col gap-3
- ဆုံးဖြတ်ရန် လိုအပ်သော field များကို ပြပါ; ကျန်သည်များကို sheet/dialog တွင် ဖွင့်ပါ
- edit / delete / status action များ ရောက်ရှိနိုင်အောင် ထားပါ — card သို့မဟုတ် detail sheet သို့ ရွှေ့နိုင်သော်လည်း မဖျောက်ရပါ
5. Pull to refresh နှင့် bottom nav
Mobile list များသည် Pull to refresh ဖြင့် ပြန်လည် တောင်းဆိုသင့်ပါသည်။ စာမျက်နှာသည် bottom nav တွင် ရှိပါက FAB များကို bar အပေါ်သို့ ရွှေ့၍ မဖုံးစေရပါ။
- အသုံးပြုသူက pull-down refetch မျှော်လင့်သော list တွင် Pull to refresh ဖြင့် ဖုံးအုပ်ပါ
- FAB နေရာ — bottom nav မြင်ရလျှင် bottom-25; မမြင်ရလျှင် bottom-5 (FAB how-to ကို ကြည့်ပါ)
- useIsContainInBottomNavBar(`/${metadata.name}/…`) ကို @quan-erp/base-frontend မှ အသုံးပြုပါ
6. စစ်ဆေးခြင်း
Browser ကို resize လုပ်ပါ သို့မဟုတ် device mode ဖြင့် presentation နှစ်ခုလုံး တူညီသော မှတ်တမ်းနှင့် action များကို မျှဝေကြောင်း အတည်ပြုပါ။
- Wide viewport — DataTable + PageTitle actions မြင်ရရပါသည်
- Narrow viewport — card list + FAB; core feature အတွက် “mobile တွင် မရနိုင်” empty stub မရှိရပါ
- Create / edit / delete သည် mobile တွင် ရောက်ရှိနိုင်ရပါသည်
- Pull to refresh က တူညီသော list data ကို update လုပ်ရပါသည်
- Bottom nav မြင်ရပါက FAB က bar ကို ရှင်းလင်းရပါသည် (bottom-25)
အဖြစ်များသော အမှားများ
- Mobile တွင် column သို့မဟုတ် feature တစ်ခုလုံးကို ဖျောက်ခြင်း — UI ကို ပြောင်းလဲပြသရပါသည်
- Desktop နှင့် ကွဲလွဲသွားနိုင်သော mobile-only API ခေါ်ဆိုမှုများ
- Desktop တွင် FAB ပြသခြင်း (သို့မဟုတ် mobile တွင် dense table action သာရှိပြီး FAB မရှိခြင်း)
- Bottom nav overlap ကို လျစ်လျူရှုခြင်း — FAB ကို bar က ဖုံးနေခြင်း
- Plugin အတွင်း SCREENS.md နှင့် မကိုက်ညီသော custom breakpoint