[refactor] simplify Base & Session models based on MobX-RESTful

package.json

@@ -24,6 +24,7 @@
         "koajax": "^1.1.2",
         "mobx": "^6.12.4",
         "mobx-github": "^0.3.2",
+        "mobx-restful": "^1.0.0-rc.5",
         "web-cell": "^3.0.0-rc.16",
         "web-utility": "^4.4.0"
     },

source/component/AuditBar.tsx

@@ -77,7 +77,7 @@ export const AuditBar: FC<AuditBarProps> = observer(props => {
                     <Button
                         variant="danger"
                         size="sm"
-                        onClick={() => model.delete(objectId)}
+                        onClick={() => model.deleteOne(objectId)}
                     >
                         删除
                     </Button>

source/component/CardsPage.tsx

@@ -25,25 +25,29 @@ export abstract class CardsPage<T>
     };
 
     mountedCallback() {
-        this.model.getNextPage(this.filter);
+        this.model.getList(this.filter);
+    }
+
+    disconnectedCallback() {
+        this.model.clear();
     }
 
     loadMore: TouchHandler = detail => {
-        if (detail === 'bottom') return this.model.getNextPage(this.filter);
+        if (detail === 'bottom') return this.model.getList(this.filter);
     };
 
     changeDistrict = ({ detail }: DistrictEvent) =>
-        this.model.getNextPage(
+        this.model.getList(
             (this.filter = { ...detail, verified: this.filter.verified }),
-            true
+            1
         );
 
     changeVerified = ({ target }: Event) => {
         const { checked } = target as HTMLInputElement;
 
         this.filter.verified = checked;
 
-        return this.model.getNextPage(this.filter, true);
+        return this.model.getList(this.filter, 1);
     };
 
     async clip2board(raw: string) {
@@ -56,7 +60,7 @@ export abstract class CardsPage<T>
 
     render() {
         const { name: title, scope, districtFilter } = this,
-            { loading, list, noMore } = this.model,
+            { downloading, allItems, noMore } = this.model,
             admin = session.hasRole('Admin');
 
         return (
@@ -81,11 +85,11 @@ export abstract class CardsPage<T>
                 </div>
                 <ScrollBoundary onTouch={this.loadMore}>
                     <SpinnerBox
-                        cover={loading}
+                        cover={downloading > 0}
                         className="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-3"
                     >
-                        {list.map(item => (
-                            <div className="col">
+                        {allItems.map(item => (
+                            <div key={item.objectId} className="col">
                                 {this.renderItem(item as T)}
                             </div>
                         ))}

source/model/Area.ts

@@ -1,8 +1,10 @@
 import { observable } from 'mobx';
+import { BaseModel, persist, restore, toggle } from 'mobx-restful';
 
 import { District, getSubDistricts } from '../service';
 
-export class AreaModel {
+export class AreaModel extends BaseModel {
+    @persist()
     @observable
     accessor provinces: District[] = [];
 
@@ -13,9 +15,13 @@ export class AreaModel {
     accessor districts: District[] = [];
 
     constructor() {
-        getSubDistricts().then(list => (this.provinces = list));
+        super();
+        restore(this, 'area').then(async () => {
+            if (!this.provinces[0]) this.provinces = await getSubDistricts();
+        });
     }
 
+    @toggle('downloading')
     async getSubs(type: 'city' | 'district', parent: string) {
         const list = await getSubDistricts(parent);