### Project Build and Development Scripts

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

Provides command-line scripts for managing the project's build process and development server. This includes installing dependencies, logging into a private npm registry, starting the development server, building for production, and analyzing bundle sizes.

```bash
# Install dependencies (requires private npm registry login)
npm login
npm install

# Start development server on http://localhost:8190
npm run start

# Build for production and create zip archive
npm run prod

# Development build with watch mode
npm run dev

# Analyze bundle size
npm run analyze

```

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

### Feature Module Router Configuration

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

Sets up React Router for feature-level navigation within modules. This example shows how to define routes for a main list view and an edit view within the 'hooks-demo' module, including permission registration.

```APIDOC
## Feature Module Router Configuration

### Description
Sets up React Router for feature-level navigation within modules. This example shows how to define routes for a main list view and an edit view within the 'hooks-demo' module, including permission registration.

### Method
N/A (Component Definition)

### Endpoint
N/A (Client-side Routing)

### Parameters
N/A

### Request Example
N/A

### Response
N/A

### Error Handling
N/A
```

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

### API Manager for Data Operations (TypeScript)

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

Provides a centralized API endpoint management class using the Http utility from '@dianplusjs/utils'. It defines static methods for common CRUD operations like get, add, modify, and remove, with examples of usage for fetching paginated data. Dependencies include '@dianplusjs/utils'.

```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 modifyStatue = 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');
}

// Usage in store
import APIManager from '../api/api-manager';

// Fetch paginated data
APIManager.getPage({ brandId: '123', currentPage: 1, showCount: 20 })
  .then((res) => {
    const { results, pagination } = res.resultObject || {};
    console.log('Data:', results);
  })
  .catch((err) => {
    console.error('Error:', err.toString());
  });
```

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

### Application Entry and Menu Configuration

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

Configures the main application entry point, including routing and the menu system. It defines pages using AsyncComponent for lazy loading and integrates with the dp-components library for rendering menus and handling internationalization.

```APIDOC
## Application Entry and Menu Configuration

### Description
Configures the main application entry point, including routing and the menu system. It defines pages using AsyncComponent for lazy loading and integrates with the dp-components library for rendering menus and handling internationalization.

### Method
N/A (Initialization Script)

### Endpoint
N/A (Client-side Initialization)

### Parameters
N/A

### Request Example
N/A

### Response
N/A

### Error Handling
N/A
```

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

### Application Entry and Menu Configuration (TypeScript)

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

Configures the main application entry point, defining the routing and menu system. It uses AsyncComponent for lazy loading pages and integrates with the Menu component for UI rendering, including internationalization options. Dependencies include '@dianplusjs/dp-components'.

```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;

// Define menu pages with module and page IDs
const pages = [
  ...m('20', [  // Module ID: '20'
    ['2010', AsyncComponent(() => import('./modules/m1/hooks-demo'))], // Page ID: '2010'
  ]),
];

// Render application with menu configuration
render({
  pages,
  getDefaultPage: () => page('20', '2010'),
  componentFolder: (window as any)._path,
  domRender: (content) => {
    return Menu.render(content, {
      allowAppDownLoad: false,
      type: 'default',
      i18nOpen: true,
      i18nOptions: {
        defaultLocale: 'zh_CN',
        sysCode: 'smartx',
      },
    });
  },
  beforeRender: (moduleId, menuId, options) => {
    console.log('beforeRender called', moduleId, menuId, options);
  },
});
```

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

### Page Navigation Patterns

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

Demonstrates two primary navigation patterns: opening new windows using `window.open` for creating or editing records, and in-page navigation using React Router's `Link` component. It also covers extracting route parameters using `useParams` hook and the `withRouter` HOC.

```typescript
import { Link } from 'react-router-dom';
import { T } from '@dianplusjs/utils';

// New window navigation (for create/edit forms)
// Note: No '/' between location.href and 'edit'
<Button onClick={() => window.open(`${window.location.href}edit/-1`)}>
  {T('新开页新增')}
</Button>

<Button onClick={() => window.open(`${window.location.href}edit/${record.id}`)}>
  {T('新开页编辑')}
</Button>

// In-page navigation with React Router
<Link to="/edit/-1">{T('新增')}</Link>
<Link to={`/edit/${record.id}`}>{T('编辑')}</Link>
<Link target="_blank" to={`/edit/${record.id}`}>{T('新开页编辑')}</Link>

// Route parameter extraction
import { useParams, withRouter } from 'react-router-dom';
import { RouteComponentProps } from 'react-router';

// Using useParams hook
const EditController: FC = () => {
  const { id } = useParams<{ id: string }>();
  const isAddMode = id === '-1';

  useEffect(() => {
    if (!isAddMode) {
      loadData(id);
    }
  }, [id]);
};

// Using withRouter HOC
interface EditProps extends RouteComponentProps<{ id: string }> {}

const Edit: FC<EditProps> = (props) => {
  useEffect(() => {
    const { id } = props.match.params;
    loadData(id);
  }, []);
};

export default withRouter(Edit);
```

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

### Dihog Build Configuration

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

Defines the build configuration for the project using a dihog.json file. It specifies entry points, output paths, proxy settings, Babel plugins, and server configurations for development and production builds. It also includes alias mappings and SWC compiler settings.

```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": 8190
  },
  "node": {
    "fs": "empty"
  },
  "djTheme": false,
  "djDialog": true,
  "swc": true
}

```

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

### Feature Module Router Configuration (TypeScript)

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

Sets up React Router for navigation within a feature module, defining routes for main list and edit pages. It uses HashRouter for routing and registers permissions using a 'batch' function. Dependencies include 'react-router-dom'.

```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';

// Register permissions
batch();

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

export default Index;
```

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

### React Controller for Data Management with MobX and Ant Design

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

A React functional component that acts as a main controller for a data management interface. It utilizes MobX for state management (via `useLocalStore` and `Provider`) and Ant Design components for UI elements such as buttons, modals, and pagination. It integrates custom components like `AppLayout`, `AuthComponent`, `Search`, `MainTable`, and `EditModal` to provide a comprehensive user experience for displaying, adding, editing, and deleting data. The component handles asynchronous operations, state updates, and user interactions, including pagination and search filtering.

```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';

let searchParam: any = {
  brandId: window.currentBrandId,
  showCount: 20,
};

const Main: FC = observer(() => {
  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) => {
    searchParam = {
      ...searchParam,
      ...mainStore.queryParams,
      currentPage: current,
      showCount: pageSize,
      totalResult: pagination.totalResult,
    };
    mainStore.getPage(searchParam);
  };

  const handleSearch = (values: any) => {
    searchParam = { ...searchParam, ...values };
    mainStore.getPage(searchParam);
  };

  const remove = (id: any) => {
    Modal.confirm({
      content: T('确定删除吗？'),
      onOk: async () => {
        mainStore.remove({ entId: window.currentEntId, id });
      },
    });
  };

  return (
    <Provider mainStore={mainStore}>
      <AppLayout loading={isLoading}>
        <AppLayout.Header title={T('品类结构')} menuDisplayMode="default" />
        <AppLayout.Filter>
          <Search onSearch={handleSearch} />
        </AppLayout.Filter>
        <AppLayout.Operations>
          <Space>
            <AuthComponent functionId={ACTION_CODE.ADD_HAND}>
              <Button type="primary" onClick={() => window.open(`${window.location.href}edit/-1`)}>
                {T('新开页新增')}
              </Button>
            </AuthComponent>
            <Button type="primary" onClick={() => { setMode('add'); setVisible(true); }}>
              {T('模态框新增')}
            </Button>
          </Space>
          <Pagination
            showQuickJumper
            showSizeChanger
            onShowSizeChange={onChangePage}
            defaultPageSize={pagination.showCount}
            current={pagination.currentPage}
            showTotal={(total) => `共${total}条`}
            total={pagination.totalResult}
            pageSizeOptions={['20', '50', '100', '500']}
            onChange={onChangePage}
            style={{ float: 'right', margin: '15px 5px' }}
          />
        </AppLayout.Operations>
        <AppLayout.Content style={{ marginTop: 10 }}>
          <MainTable
            edit={(record) => { setCurrentInfo(record); setVisible(true); setMode('modify'); }}
            copy={(value) => mainStore.add(value)}
            remove={(value) => remove(value.id)}
          />
          <EditModal
            visible={visible}
            mode={mode}
            onClose={() => setVisible(false)}
            value={currentInfo}
            onOk={async (value: any, type: string) => {
              if (type === 'add') {
                await mainStore.add(value);
              } else {
                await mainStore.modify(value);
              }
              setVisible(false);
            }}
          />
        </AppLayout.Content>
      </AppLayout>
    </Provider>
  );
});

export default Main;

```

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

### API Manager

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

Provides a centralized class for managing API endpoints. It utilizes the `Http` utility from `@dianplusjs/utils` to define and export API methods such as `getPage`, `add`, `modify`, `remove`, etc., for interacting with backend services.

```APIDOC
## API Manager

### Description
Provides a centralized class for managing API endpoints. It utilizes the `Http` utility from `@dianplusjs/utils` to define and export API methods such as `getPage`, `add`, `modify`, `remove`, etc., for interacting with backend services.

### Method
POST

### Endpoint
- `/rs/dataconfig/smartxalloccat/get_page`
- `/rs/dataconfig/smartxalloccat/add`
- `/rs/dataconfig/smartxalloccat/modify`
- `/rs/dataconfig/smartxalloccat/modify_by_query`
- `/rs/dataconfig/smartxalloccat/get_dto_by_id`
- `/rs/dataconfig/smartxalloccat/remove`
- `/rs/dataconfig/smartxalloccatitems/get_list`
- `/rs/dataconfig/smartxalloccatitems/batch_save`

### Parameters
N/A (Parameters are defined within the usage context of each method)

### Request Example
```json
{
  "brandId": "123",
  "currentPage": 1,
  "showCount": 20
}
```

### Response
#### Success Response (200)
- **resultObject** (object) - Contains results and pagination info.
  - **results** (array) - Array of data items.
  - **pagination** (object) - Pagination details.

#### Response Example
```json
{
  "resultObject": {
    "results": [
      {
        "id": "1",
        "name": "Example Item"
      }
    ],
    "pagination": {
      "currentPage": 1,
      "showCount": 20,
      "totalCount": 100
    }
  }
}
```

### Error Handling
- Errors are typically caught using `.catch()` on the Promise returned by the API call. The error object may contain details about the failure.
```

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

### Search Form Component with Ant Design

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

Implements a reusable search form using the SearchForm component from @dianplusjs/dp-components and Ant Design's Input and Select components. It allows users to input search criteria like goods name, category, price range, and status. The component takes an onSearch callback to handle query submissions.

```typescript
import React, { useRef } from 'react';
import { Input, Select } 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 (
    <div>
      <SearchForm ref={searchFormRef} onQuery={handleQuery} compactQuery={false}>
        <SearchForm.Item label="商品" required tip="商品名称" name="goodsName" initialValue="">
          <Input placeholder="请输入商品名称" />
        </SearchForm.Item>
        <SearchForm.Item label="分类" required tip="请选择分类" name="categoryId" initialValue="">
          <Input placeholder="请输入分类" />
        </SearchForm.Item>
        <SearchForm.Item label="价格范围" tip="请输入价格范围" name="priceRange" initialValue="">
          <Input placeholder="请输入价格范围" />
        </SearchForm.Item>
        <SearchForm.Item
          label="状态"
          name="status"
          rules={[{ required: true, message: '请选择状态' }]}
        >
          <Select placeholder="搜索条件1">
            <Select.Option key={1} value={1}>{1}</Select.Option>
            <Select.Option key={2} value={2}>{2}</Select.Option>
          </Select>
        </SearchForm.Item>
      </SearchForm>
    </div>
  );
};

export default Search;

```

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

### Permission Control with AuthComponent

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

Enables role-based access control using AuthComponent from @dianplusjs/dp-components. Permissions are defined and registered using Auth.register from @dianplusjs/utils. This pattern allows wrapping UI elements like buttons with permission checks.

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

// Wrap buttons with permission control
<AuthComponent functionId={ACTION_CODE.ADD_HAND}>
  <Button type="primary" onClick={handleAdd}>
    {T('新增')}
  </Button>
</AuthComponent>

// auth.tsx - Define and register permissions
import { Auth } from '@dianplusjs/utils';

export const ACTION_CODE = {
  ADD_HAND: 'ADD_HAND',
  EDIT_HAND: 'EDIT_HAND',
  DELETE_HAND: 'DELETE_HAND',
  EXPORT: 'EXPORT',
  IMPORT: 'IMPORT',
};

export const batch = () => {
  Auth.register([
    { functionId: ACTION_CODE.ADD_HAND, functionName: '新增' },
    { functionId: ACTION_CODE.EDIT_HAND, functionName: '编辑' },
    { functionId: ACTION_CODE.DELETE_HAND, functionName: '删除' },
    { functionId: ACTION_CODE.EXPORT, functionName: '导出' },
    { functionId: ACTION_CODE.IMPORT, functionName: '导入' },
  ]);
};

// Call batch() in feature index
import { batch } from './auth';
batch();
```

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

### Internationalization with T Function

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

Implements multi-language support using the T utility function from @dianplusjs/utils. This function handles simple text translation and translation with parameters, making it versatile for UI elements, validation messages, page titles, and dialogs. Configuration for i18n is done in src/index.tsx.

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

// Simple text translation
<Button>{T('提交')}</Button>

// Translation with parameters
<p>{T('欢迎用户', { name: '张三' })}</p>

// In validation messages
rules={[{ required: true, message: T('请输入用户名') }]}

// In page titles
<AppLayout.Header title={T('品类结构')} />

// In confirmation dialogs
Modal.confirm({
  content: T('确定删除吗？'),
  onOk: async () => { /* delete action */ },
});

// Configuration in src/index.tsx
render({
  domRender: (content) => {
    return Menu.render(content, {
      i18nOpen: true,
      i18nOptions: {
        defaultLocale: 'zh_CN',
        sysCode: 'smartx',
      },
    });
  },
});
```

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

### BigTable Data Grid with Ant Design

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

Displays data in a table format using the BigTable component from @dianplusjs/dp-components. It supports frozen columns and integrates with Ant Design components for rendering cells and actions. The component expects an array of columns and data, with row keys defined by a function. It utilizes MobX for state management.

```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';
import { MainStoreType } from '../type';

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

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

  const columns: BigTableColumn[] = [
    {
      title: T('名称'),
      key: 'name',
      dataIndex: ['name'],
      render: (text) => <div title={text}>{text}</div>,
    },
    {
      title: T('描述'),
      key: 'descs',
      dataIndex: ['descs'],
      render: (text) => <div title={text}>{text}</div>,
    },
    {
      title: T('创建人'),
      width: 120,
      key: 'createName',
      dataIndex: ['createName'],
      render: (text) => <div>{text}</div>,
    },
    {
      title: T('创建时间'),
      width: 150,
      key: 'createDate',
      dataIndex: ['createDate'],
      render: (text) => <div>{text}</div>,
    },
    {
      title: T('操作'),
      width: 150,
      key: 'midCat',
      dataIndex: ['op'],
      render: (text, record) => (
        <Space style={{ marginLeft: 10 }}>
          <Link target="_blank" to={`/edit/${record.id}`}>
            {T('新开页编辑')}
          </Link>
          <a onClick={() => edit(record)}>{T('模态框编辑')}</a>
          <a onClick={() => copy(record)}>{T('复制')}</a>
          <a style={{ color: 'red' }} onClick={() => remove(record)}>
            {T('删除')}
          </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.