### NPM Private Registry Setup using Bash

Source: https://context7.com/shenluwei/pc-dianplus-mobx-v1/llms.txt

Shell commands to configure and interact with a private NPM registry. This includes setting up the `.npmrc` file for registry access and authentication, logging into the private registry, and then installing dependencies and starting the development server or building for production.

```bash
# Configure .npmrc file
cat > .npmrc << EOF
registry=https://nexus3.dianplus.cn/repository/npm-group/
always-auth=true
EOF

# Login to private registry
npm login --registry=https://nexus3.dianplus.cn/repository/npm-group/

# Install dependencies
yarn install --legacy-peer-deps

# Start development server
yarn start

# Build for production
yarn prod

```

--------------------------------

### Permission Configuration for Role-Based Access Control (TypeScript)

Source: https://context7.com/shenluwei/pc-dianplus-mobx-v1/llms.txt

Configures role-based access control for menu actions using Dianplus AuthComponent. It defines action codes and associates them with menu IDs and system codes for granular permissions. This setup enables dynamic authorization of user actions within the application.

```typescript
import { AuthComponent } from '@dianplusjs/dp-components';

export const MenuId = (window as any).currentmenu;

export const ACTION_CODE = {
  ADD_HAND: '1',
  EDIT_HAND: '2',
  DELETE_HAND: '3',
  EXPORT_HAND: '4',
};

const authConfig = {
  menuId: MenuId,
  sysCode: 'smartx',
  functions: [
    { functionId: ACTION_CODE.ADD_HAND, functionName: 'Add', groupName: '' },
    { functionId: ACTION_CODE.EDIT_HAND, functionName: 'Edit', groupName: '' },
    { functionId: ACTION_CODE.DELETE_HAND, functionName: 'Delete', groupName: '' },
    { functionId: ACTION_CODE.EXPORT_HAND, functionName: 'Export', groupName: '' },
  ],
};

export function batch() {
  return AuthComponent.batch(authConfig);
}

```

--------------------------------

### Initialize and Render React Application with MobX

Source: https://context7.com/shenluwei/pc-dianplus-mobx-v1/llms.txt

This snippet initializes and renders the main application component, handling menu configuration and routing. It utilizes asynchronous components for dynamic loading and integrates with the @dianplusjs component library for UI rendering and internationalization settings.

```typescript
import { App, AsyncComponent, Menu } from '@dianplusjs/dp-components';
import '@dianplusjs/dp-components/dist/esm/styles/antd-reset-global.less';

const { render, m, page } = App;

const pages = [
  ...m('10', [
    ['1010', AsyncComponent(() => import('./modules/sub-module1/menu1'))],
    ['1020', AsyncComponent(() => import('./modules/sub-module1/menu2'))],
  ]),
  ...m('20', [
    ['2010', AsyncComponent(() => import('./modules/sub-module2/menu1'))],
  ]),
];

render({
  pages,
  getDefaultPage: () => page('10', '1010'),
  componentFolder: (window as any)._path,
  domRender: (content) => {
    return Menu.render(content, {
      allowAppDownLoad: false,
      type: 'default',
      i18nOpen: false,
      i18nOptions: {
        defaultLocale: 'zh_CN',
        sysCode: 'smartx',
      },
    });
  },
  beforeRender: (moduleId, menuId, options) => {
    console.log('Page rendering:', moduleId, menuId, options);
  },
});
```

--------------------------------

### Implement MobX Store for State Management

Source: https://context7.com/shenluwei/pc-dianplus-mobx-v1/llms.txt

This MobX store implementation manages the application's state, including loading status, list data, pagination, and query parameters. It uses observables for reactive data and actions to perform state mutations like fetching, adding, modifying, and removing data, with integrated Ant Design messages for user feedback.

```typescript
import { observable, action } from 'mobx';
import { message } from 'antd';
import { T } from '@dianplusjs/utils';
import APIManager from '../api/api-manager';

export default class MainStore {
  @observable isLoading = false;
  @observable listData: any[] = [];
  @observable pagination = {
    currentPage: 1,
    showCount: 20,
    totalResult: 0,
    totalPage: 0,
  };
  @observable queryParams: Record<string, any> = {};

  @action getPage = (params: Record<string, any>) => {
    this.isLoading = true;
    APIManager.getPage(params)
      .then((res) => {
        this.queryParams = params;
        const { results, pagination } = res.resultObject || {};
        this.listData = results;
        this.pagination = pagination;
      })
      .catch((err) => message.error(err.toString()))
      .finally(() => { this.isLoading = false; });
  };

  @action add = (params: Record<string, any>) => {
    this.isLoading = true;
    return APIManager.add(params)
      .then(() => {
        this.getPage(this.queryParams);
        message.success(T('Add success'));
      })
      .catch((err) => message.error(err.toString()))
      .finally(() => { this.isLoading = false; });
  };

  @action modify = (params: Record<string, any>) => {
    this.isLoading = true;
    return APIManager.modify(params)
      .then(() => this.getPage(this.queryParams))
      .catch((err) => message.error(err.toString()))
      .finally(() => { this.isLoading = false; });
  };

  @action remove = (params: Record<string, any>) => {
    this.isLoading = true;
    return APIManager.remove(params)
      .then(() => {
        this.getPage(this.queryParams);
        message.success(T('Delete success'));
      })
      .catch((err) => message.error(err.toString()))
      .finally(() => { this.isLoading = false; });
  };
}

```

--------------------------------

### Configure React Router for Multi-Page Navigation

Source: https://context7.com/shenluwei/pc-dianplus-mobx-v1/llms.txt

This code configures client-side routing for the application using React Router. It sets up routes for different views (main, edit, detail) and includes permission batch registration. This enables multi-page navigation within the single-page application.

```typescript
import { HashRouter as Router, Route } from 'react-router-dom';
import React, { FC } from 'react';
import MainController from './controller/main';
import EditController from './controller/edit';
import { batch } from './auth';

batch(); // Register permissions

const Index: FC = () => {
  return (
    <Router>
      <div>
        <Route path="/" exact component={MainController} />
        <Route path="/edit/:id" exact component={EditController} />
        <Route path="/detail/:id" exact component={DetailController} />
      </div>
    </Router>
  );
};

export default Index;
```

--------------------------------

### Dihog Build Configuration

Source: https://context7.com/shenluwei/pc-dianplus-mobx-v1/llms.txt

A JSON configuration file for the Dihog build system. It specifies build settings such as proxy host, entry point, output path, aliasing, and development server options. This configuration is used to customize the build process for the project.

```json
{
  "proxy_hostname": "https://data.dianplus.cn/",
  "entry": "src/index.tsx",
  "extraBabelPlugins": [],
  "outputPath": "./dist",
  "alias": {
    "djexports-commons": "src/commons/djexports"
  },
  "menuSysCode": "smartx",
  "sysCode": "smartx",
  "sysVersion": "0.0.1",
  "devServer": {
    "port": 8100
  },
  "node": {
    "fs": "empty"
  },
  "djTheme": false,
  "djDialog": true,
  "swc": true
}

```

--------------------------------

### Controller with MobX Provider (TypeScript)

Source: https://context7.com/shenluwei/pc-dianplus-mobx-v1/llms.txt

Builds page controllers integrating MobX stores with React components. It uses MobX for state management and Ant Design components for UI elements. Dependencies include React, MobX, Ant Design, and Dianplus utilities.

```typescript
import React, { FC, useState } from 'react';
import { Provider, useLocalStore } from 'mobx-react';
import { observer } from 'mobx-react-lite';
import { AppLayout, AuthComponent } from '@dianplusjs/dp-components';
import { T } from '@dianplusjs/utils';
import { Button, Modal, Pagination, Space } from 'antd';
import MainTable from '../components/main-table';
import MainStore from '../store/main';
import Search from '../components/search';
import { ACTION_CODE } from '../auth';
import EditModal from '../components/edit-modal';

const Main: FC = () => {
  const mainStore = useLocalStore(() => new MainStore());
  const [visible, setVisible] = useState(false);
  const [mode, setMode] = useState('add');
  const [currentInfo, setCurrentInfo] = useState(undefined);
  const { isLoading, pagination } = mainStore;

  const onChangePage = (current: number, pageSize: number) => {
    mainStore.getPage({
      ...mainStore.queryParams,
      currentPage: current,
      showCount: pageSize,
    });
  };

  const handleSearch = (values: any) => {
    mainStore.getPage({ brandId: window.currentBrandId, showCount: 20, ...values });
  };

  const remove = (id: any) => {
    Modal.confirm({
      content: T('Confirm delete?'),
      onOk: async () => mainStore.remove({ entId: window.currentEntId, id }),
    });
  };

  return (
    <Provider mainStore={mainStore}>
      <AppLayout loading={isLoading}>
        <AppLayout.Header title={T('Management')} menuDisplayMode="default" />
        <AppLayout.Filter>
          <Search onSearch={handleSearch} />
        </AppLayout.Filter>
        <AppLayout.Operations>
          <Space>
            <AuthComponent functionId={ACTION_CODE.ADD_HAND}>
              <Button type="primary" onClick={() => { setMode('add'); setVisible(true); }}>
                {T('Add')}
              </Button>
            </AuthComponent>
          </Space>
          <Pagination
            showQuickJumper
            showSizeChanger
            current={pagination.currentPage}
            total={pagination.totalResult}
            onChange={onChangePage}
          />
        </AppLayout.Operations>
        <AppLayout.Content>
          <MainTable
            edit={(record) => { setCurrentInfo(record); setVisible(true); setMode('modify'); }}
            remove={(value) => remove(value.id)}
          />
          <EditModal
            visible={visible}
            mode={mode}
            onClose={() => setVisible(false)}
            value={currentInfo}
            onOk={async (value: any, type: string) => {
              type === 'add' ? await mainStore.add(value) : await mainStore.modify(value);
              setVisible(false);
            }}
          />
        </AppLayout.Content>
      </AppLayout>
    </Provider>
  );
};

export default observer(Main);

```

--------------------------------

### TypeScript Configuration for Strict Type Checking

Source: https://context7.com/shenluwei/pc-dianplus-mobx-v1/llms.txt

Configures the TypeScript compiler for strict type checking, path aliases for module resolution, and specific compilation targets. Ensures code quality and maintainability by enforcing type safety and simplifying imports. Includes settings for module resolution, JSX, and JavaScript file inclusion.

```json
{
  "compilerOptions": {
    "outDir": "dist",
    "allowSyntheticDefaultImports": true,
    "maxNodeModuleJsDepth": 5,
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "target": "ES6",
    "module": "esnext",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "jsx": "react",
    "allowJs": true,
    "baseUrl": "./",
    "paths": {
      "djexports-commons": ["./src/commons/djexports"]
    }
  },
  "include": [
    "src/**/*.js",
    "src/**/*.jsx",
    "src/**/*.ts",
    "src/**/*.tsx",
    "types/**/*.*",
    "typings.d.ts",
    "global.d.ts"
  ],
  "exclude": ["node_modules", "dist", "build"]
}
```

--------------------------------

### Build Search Forms with React and Ant Design

Source: https://context7.com/shenluwei/pc-dianplus-mobx-v1/llms.txt

The SearchForm component allows for the creation of advanced search forms with built-in validation and query handling. It utilizes Ant Design components for input fields and React's useRef for managing form state. The component accepts an onSearch callback to handle query submissions.

```typescript
import React, { useRef } from 'react';
import { Input, Select, DatePicker } from 'antd';
import { SearchForm } from '@dianplusjs/dp-components';
import type { SearchFormRef } from '@dianplusjs/dp-components';

export interface SearchProps {
  onSearch: (values: any, queryType: 'query' | 'clear', other?: { index?: number }) => void;
}

const Search: React.FC<SearchProps> = (props) => {
  const { onSearch } = props;
  const searchFormRef = useRef<SearchFormRef>(null);

  const handleQuery = (query: any, queryType: 'query' | 'clear', other?: { index?: number }) => {
    onSearch?.(query, queryType, other);
  };

  return (
    <SearchForm ref={searchFormRef} onQuery={handleQuery} compactQuery={false}>
      <SearchForm.Item label="Product Name" required name="goodsName" initialValue="">
        <Input placeholder="Enter product name" />
      </SearchForm.Item>
      <SearchForm.Item label="Category" name="categoryId" initialValue="">
        <Input placeholder="Enter category" />
      </SearchForm.Item>
      <SearchForm.Item label="Date Range" name="dateRange">
        <DatePicker.RangePicker allowClear />
      </SearchForm.Item>
      <SearchForm.Item
        label="Status"
        name="status"
        rules={[{ required: true, message: 'Please select status' }]
      }>
        <Select placeholder="Select status">
          <Select.Option value={1}>Active</Select.Option>
          <Select.Option value={0}>Inactive</Select.Option>
        </Select>
      </SearchForm.Item>
    </SearchForm>
  );
};

export default Search;
```

--------------------------------

### API Manager for RESTful Endpoints (TypeScript)

Source: https://context7.com/shenluwei/pc-dianplus-mobx-v1/llms.txt

Defines RESTful API endpoints with typed request handlers using Dianplus Http utilities. Each static method corresponds to a specific API endpoint for CRUD operations. It simplifies API calls by abstracting the HTTP method and URL.

```typescript
import { Http } from '@dianplusjs/utils';

const { post } = Http;

export default class APIManager {
  static getPage = post('/rs/dataconfig/smartxalloccat/get_page');
  static add = post('/rs/dataconfig/smartxalloccat/add');
  static modify = post('/rs/dataconfig/smartxalloccat/modify');
  static modifyStatus = post('/rs/dataconfig/smartxalloccat/modify_by_query');
  static getById = post('/rs/dataconfig/smartxalloccat/get_dto_by_id');
  static remove = post('/rs/dataconfig/smartxalloccat/remove');
  static getItems = post('/rs/dataconfig/smartxalloccatitems/get_list');
  static saveItems = post('/rs/dataconfig/smartxalloccatitems/batch_save');
}

```

--------------------------------

### Edit Modal Component using TypeScript and React

Source: https://context7.com/shenluwei/pc-dianplus-mobx-v1/llms.txt

A React component for creating editable data entry forms with validation and integration of business components. It utilizes Ant Design for form elements and DianplusJS components for enhanced functionality. The component supports add and edit modes and handles form submission with validation.

```typescript
import React, { useRef, useEffect } from 'react';
import { Dialog as Modal, Easy, Select as DjSelect, DataProvider } from '@dianplusjs/dp-components';
import { Form, Row, Col, Button, Input, DatePicker } from 'antd';
import { T } from '@dianplusjs/utils';

const { GoodsModal, WarehouseModal } = Easy;

const warehouseDs = DataProvider.find('ModalTable')
  .create('warehouse')
  .setExtraParams({ statuses: '1', channelCtrl: 1 });

interface EditModalProps {
  visible: boolean;
  onClose: () => void;
  onOk: (value: any, type: string) => void;
  mode: string;
  value: any;
}

const EditModal: React.FC<EditModalProps> = (props) => {
  const { visible, onClose, onOk, mode, value } = props;
  const formRef = useRef<any>();

  useEffect(() => {
    if (value && formRef.current) {
      formRef.current.setFieldsValue(value);
    }
  }, [value]);

  const handleOk = async () => {
    try {
      const fieldsValue = await formRef.current?.validateFields();
      if (!fieldsValue) return;
      await onOk(fieldsValue, mode);
    } catch (error) {
      console.error('Form validation failed:', error);
    }
  };

  const formLayout = { labelCol: { span: 6 }, wrapperCol: { span: 12 } };

  return (
    <Modal
      visible={visible}
      onCancel={onClose}
      maskClosable={false}
      title={mode === 'add' ? T('Add') : T('Edit')}
      width={800}
      footer={
        <div>
          <Button size="large" onClick={onClose}>{T('Cancel')}</Button>
          <Button size="large" onClick={handleOk} type="primary">{T('OK')}</Button>
        </div>
      }
    >
      <Form ref={formRef}>
        <Row>
          <Col span={12}>
            <Form.Item
              {...formLayout}
              label={T('Name')}
              required
              name="name"
              rules={[{ required: true, message: T('Name is required') }Д]}
            >
              <Input placeholder={T('Name')} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              {...formLayout}
              label={T('Valid Period')}
              name="dates"
            >
              <DatePicker.RangePicker allowClear />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              {...formLayout}
              label={T('Product')}
              required
              name="spuId"
              rules={[{ required: true, message: T('Product is required') }]}
            >
              <DjSelect.KeySelect
                placeholder={T('Select product')}
                isMultiple={false}
                dataSource={DataProvider.find('ModalTable').create('goodsCode')}
                disabled={mode === 'modify'}
              >
                <GoodsModal />
              </DjSelect.KeySelect>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item {...formLayout} label={T('Warehouse')} name="storageId">
              <DjSelect.KeySelect
                placeholder={T('Select warehouse')}
                isMultiple
                dataSource={warehouseDs}
              >
                <WarehouseModal isShowStatuses />
              </DjSelect.KeySelect>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default EditModal;

```

--------------------------------

### Render Large Datasets with BigTable in React

Source: https://context7.com/shenluwei/pc-dianplus-mobx-v1/llms.txt

The BigTable component is designed for efficiently rendering large datasets. It supports features like frozen rows and columns, and virtual scrolling to improve performance. This component uses Ant Design for UI elements and MobX for state management, along with a custom translation utility 'T'.

```typescript
import React, { useContext } from 'react';
import { Space } from 'antd';
import { Link } from 'react-router-dom';
import { T } from '@dianplusjs/utils';
import { BigTable } from '@dianplusjs/dp-components';
import { MobXProviderContext } from 'mobx-react';
import type { BigTableColumn } from '@dianplusjs/dp-components';

interface MainTableProps {
  edit: (record: any) => void;
  remove: (record: any) => void;
}

const MainTable: React.FC<MainTableProps> = ({ edit, remove }) => {
  const { mainStore } = useContext<Record<string, any>>(MobXProviderContext);
  const { listData } = mainStore;

  const columns: BigTableColumn[] = [
    {
      title: T('Name'),
      key: 'name',
      dataIndex: ['name'],
      width: 150,
      render: (text) => <div title={text}>{text}</div>,
    },
    {
      title: T('Description'),
      key: 'descs',
      dataIndex: ['descs'],
      render: (text) => <div title={text}>{text}</div>,
    },
    {
      title: T('Creator'),
      width: 120,
      key: 'createName',
      dataIndex: ['createName'],
    },
    {
      title: T('Create Time'),
      width: 150,
      key: 'createDate',
      dataIndex: ['createDate'],
    },
    {
      title: T('Actions'),
      width: 150,
      key: 'actions',
      render: (text, record) => (
        <Space>
          <Link target="_blank" to={`/edit/${record.id}`}>{T('Edit')}</Link>
          <a onClick={() => edit(record)}>{T('Modal Edit')}</a>
          <a style={{ color: 'red' }} onClick={() => remove(record)}>{T('Delete')}</a>
        </Space>
      ),
    },
  ];

  return (
    <div style={{ height: window.innerHeight - 220 }}>
      <BigTable
        options={{ frozen: { rowCount: 1, colCount: 1, trailingColCount: 1 } }}
        columns={columns}
        rowKey={(r) => r.id}
        dataSource={listData || []}
      />
    </div>
  );
};

export default MainTable;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.