ခြုံငုံသုံးသပ်ချက်
Shell က Settings hub ကို ပိုင်ဆိုင်ပါသည်။ Plugin များသည် register() တွင် AppRegistry.setting.add ဖြင့် panel ထည့်ပြီး base-frontend hooks ဖြင့် တန်ဖိုး ဖတ်/သိမ်းပါသည်။
- AppRegistry.setting.add({ pluginName, element })
- useSettingQuery({ mode: 'private' | 'public' })
- useUpdateSettingQuery()
- SettingKeys အသစ်မဖန်တီးမီ ရှိပြီးသားကို သုံးပါ
၁။ Setting UI မှတ်ပုံတင်ခြင်း
register() အတွင်း AppRegistry.setting.add ခေါ်ပါ။
- ပုံစံ — { pluginName, element }
- pluginName = metadata.name
- Load/save ကို panel အတွင်း လုပ်ပါ
TSXfrontend/src/index.tsx
1import type { AppRegistryState, PluginModule } from "@quan-erp/shared-types";
2import metadata from "../module.metadata.json" with { type: "json" };
3import { MyPluginSettings } from "./page/setting/my-plugin-settings";
4
5const Plugin: PluginModule = {
6 register(AppRegistry: AppRegistryState) {
7 AppRegistry.setting.add({
8 pluginName: metadata.name,
9 element: <MyPluginSettings />,
10 });
11 },
12};
13
14export default Plugin;၂။ Settings panel တည်ဆောက်ခြင်း
frontend/src/page/setting/ အောက်တွင် panel ထားရှိပါ။ base-frontend hooks နှင့် shared-ui သုံးပါ။
TSXfrontend/src/page/setting/my-plugin-settings.tsx
1import { useSettingContext, useSettingQuery } from "@quan-erp/base-frontend";
2
3export function MyPluginSettings() {
4 const { data: settings, isLoading } = useSettingQuery({ mode: "private" });
5 const { onUpdateSetting, editedSetting } = useSettingContext();
6
7 if (isLoading) return null;
8
9 return (
10 <div className="flex flex-col gap-4 p-4">
11 <h3>My plugin</h3>
12 {/* Bind controls to settings / editedSetting;
13 call onUpdateSetting(key, value, datatype) on change */}
14 </div>
15 );
16}၃။ Settings hooks
Import hooks from @quan-erp/base-frontend.
- useSettingQuery — setting map load
- useUpdateSettingQuery — persist
- useSettingStore — client cache (useSettingStore()())
- useSettingContext — onUpdateSetting / editedSetting
TSXread + update
1import {
2 useSettingQuery,
3 useUpdateSettingQuery,
4} from "@quan-erp/base-frontend";
5
6const { data = {} } = useSettingQuery({ mode: "private" });
7const updateSetting = useUpdateSettingQuery();
8
9// Prefer useSettingContext().onUpdateSetting inside the Settings hub.
10// For standalone flows:
11await updateSetting.mutateAsync({ /* SettingMapValue */ });၄။ Setting keys
LOCALE, THEME, DATE_FORMAT, TIMEZONE, BUSINESS_NAME, PRIMARY_COLOR စသည်တို့ကို ဦးစားပေးပါ။ Plugin-specific key များအတွက် namespace ရှင်းလင်းအောင် ထားရှိပါ။
- Private vs public mode — pick the mode that matches who should read the value
- Do not invent duplicates of LOCALE / THEME / TIMEZONE
- Align datatype with what onUpdateSetting / backend SettingService expect
အရေးကြီးသော စည်းကမ်းများ
- register() တွင်သာ setting.add ခေါ်ပါ
- pluginName = metadata.name
- element သည် ReactElement (JSX) ဖြစ်ရပါမည်
- base-frontend setting hooks သုံးပါ
စစ်ဆေးရန်စာရင်း
- Create page/setting panel component
- AppRegistry.setting.add({ pluginName, element }) in register()
- Wire useSettingQuery / useSettingContext (or useUpdateSettingQuery)
- Reuse platform keys when applicable
- Verify panel appears on Settings after quan-erp watch and install
အဖြစ်များသော ပြဿနာများ
- Panel မပေါ် — မမှတ်ပုံတင်ခြင်း / pluginName မှားခြင်း
- Type error — component type ပေးမိပြီး JSX မဟုတ်ခြင်း
- Load မရ — mode မှားခြင်း / provider အပြင်တွင် သုံးခြင်း
- Save မရ — onUpdateSetting မခေါ်ခြင်း / datatype မှားခြင်း