項目架構

目錄結構設計

src/
├── components/          # 組件目錄（按業(yè)務(wù)模塊劃分）
│   ├── ckfp/          # 出口發(fā)票模塊
│   │   ├── ckgd/      # 出口關(guān)單
│   │   ├── jxfp/      # 進(jìn)項發(fā)票
│   │   └── xxckfp/    # 銷(xiāo)項發(fā)票
│   ├── txrp/          # 退稅申報模塊
│   ├── txhx/          # 核銷(xiāo)模塊
│   ├── wmqtsb/        # 外貿其他申報
│   └── layout/        # 布局組件
├── reducers/          # Redux狀態(tài)管理
│   ├── index.js      # 根reducer
│   ├── common.js     # 通用狀態(tài)
│   └── userReducer.js # 用戶(hù)狀態(tài)
├── servers/           # 服務(wù)層（API調用）
├── utils/            # 工具函數
│   ├── store.js     # Redux store配置
│   ├── router.js    # 路由配置
│   ├── fetch.js     # HTTP請求封裝
│   └── zjUrl.js     # API接口配置
└── public/           # 靜態(tài)資源

架構設計理念

1. 分層架構

• 表現層 - React組件，負責UI渲染
• 業(yè)務(wù)層 - 業(yè)務(wù)邏輯處理，狀態(tài)管理
• 數據層 - API調用，數據持久化

2. 模塊化設計

• 按業(yè)務(wù)功能劃分模塊
• 每個(gè)模塊獨立封裝
• 模塊間低耦合，高內聚

3. 組件化開(kāi)發(fā)

• 基礎組件復用
• 業(yè)務(wù)組件封裝
• 布局組件統一

核心架構組件

1. 路由架構

// 多級路由配置
<Route path="/" component={cklayout}>
    <IndexRoute component={Home} />
    <Route path="ckgd" component={ckgd} />
    <Route path="jxfp" component={jxfp}>
        <Route path="ptfpgl" component={ptfpgl} />
    </Route>
</Route>

2. 狀態(tài)管理架構

// Redux store結構
{
    user: { token, menus, account },
    common: { loading, error },
    // 各業(yè)務(wù)模塊狀態(tài)
}

3. 數據流架構

Action → Reducer → Store → Component → View

設計模式應用

1. 容器組件模式

// 容器組件負責數據獲取和狀態(tài)管理
class CkgdContainer extends Component {
    state = { data: [], loading: true }
    
    componentDidMount() {
        this.fetchData();
    }
    
    render() {
        return <CkgdComponent data={this.state.data} />;
    }
}

2. 高階組件模式

// 權限控制高階組件
const withAuth = (WrappedComponent) => {
    return class extends Component {
        componentDidMount() {
            if (!this.props.token) {
                this.props.history.push('/login');
            }
        }
        
        render() {
            return this.props.token ? <WrappedComponent {...this.props} /> : null;
        }
    };
};

3. 渲染屬性模式

// 數據提供者組件
class DataProvider extends Component {
    state = { data: null }
    
    render() {
        return this.props.children(this.state.data);
    }
}

// 使用
<DataProvider>
    {data => <MyComponent data={data} />}
</DataProvider>

架構優(yōu)勢

1. 可維護性 - 清晰的目錄結構，便于維護
2. 可擴展性 - 模塊化設計，易于擴展新功能
3. 可測試性 - 組件分離，便于單元測試
4. 團隊協(xié)作 - 分工明確，減少沖突