alichs-in-dubai 前端项目分析报告

基于 Zustand 状态管理的完整架构分析

---

📊 项目概览

项目	信息
位置	~/workspace/alichs-in-dubai
框架	Razzle 4.2.17 + React 18.0.1
路由	React Router 6.26.2
状态	Zustand 4.4.7 + zustand-pub 1.0.0-beta.19
UI	Ant Design 5.21.6
样式	Less 4.1.0 + Scss 1.89.0

---

🗂️ 目录结构

alichs-in-dubai/
├── src/
│   ├── actions/           # Redux actions（已弃用）
│   ├── components/        # 可复用组件
│   ├── containers/        # 容器组件
│   ├── reducers/          # Redux reducers（已弃用）
│   ├── routes/            # 路由配置
│   ├── stores/            # ✅ Zustand 状态管理
│   │   ├── index.js       # PubStore 配置
│   │   ├── globalStore.js # 全局状态
│   │   ├── authStore.js   # 认证状态
│   │   ├── userStore.js   # 用户状态
│   │   ├── webseriesStore.js # Web Series 状态
│   │   └── bsfusionStore.js  # BS Fusion 状态
│   ├── styles/            # 全局样式
│   ├── util/              # 工具函数
│   ├── widgets/           # 业务组件
│   ├── index.js           # 入口文件
│   └── client.js          # 客户端入口
├── config/                # 配置文件
└── package.json

---

🛣️ 路由结构

路由规则

模式	路径前缀	说明
普通页面	无前缀	PC端普通页面
移动端H5	/m	移动端H5页面
管理后台	/admin	管理后台页面

路由组织

routes/
├── index.js              # 路由入口
├── home.js               # 首页路由
├── m/                    # 移动端路由
│   ├── index.js
│   └── ...
└── admin/                # 管理后台路由
    ├── index.js
    └── ...

---

🎯 Zustand 状态管理

1. PubStore 配置（跨应用共享）

// src/stores/index.js
import PubStore from 'zustand-pub';

// 创建共享 store
const pubStore = new PubStore('yuntun');

export default pubStore;

2. Store 结构

全局状态（globalStore.js）：

import pubStore from './index';
import { create } from 'zustand';

const globalStoreDef = (set) => ({
  isDrawerOpen: false,
  drawerFormType: '',
  drawerProps: {},
  
  setDrawerVisible: (visible, info) => {
    const updates = { isDrawerOpen: visible };
    if (info) {
      updates.drawerFormType = info?.type || '';
      updates.drawerProps = info?.data || {};
    }
    set(updates);
  },
});

const globalStore = pubStore.defineStore('global', globalStoreDef);
export const useGlobalStore = create(globalStore);

3. 使用方式

import { useGlobalStore } from '@/stores/globalStore';

function MyComponent() {
  const { isDrawerOpen, setDrawerVisible } = useGlobalStore();
  
  const handleOpenDrawer = () => {
    setDrawerVisible(true, {
      type: 'form-type',
      data: { title: '标题' }
    });
  };
  
  return (
    <Button onClick={handleOpenDrawer}>
      {isDrawerOpen ? '关闭' : '打开'} Drawer
    </Button>
  );
}

4. Store 列表

Store	文件	功能
globalStore	globalStore.js	全局状态（Drawer等）
authStore	authStore.js	认证状态（登录/登出）
userStore	userStore.js	用户信息状态
webseriesStore	webseriesStore.js	Web Series 数据
bsfusionStore	bsfusionStore.js	BS Fusion 数据

---

💻 代码风格

1. ES6+ 特性

使用情况：

• ✅ const / let 替代 var
• ✅ 箭头函数 () => {}
• ✅ async/await 处理异步
• ✅ 模板字符串
• ✅ 解构赋值
• ✅ 展开运算符

2. React 组件

容器组件模式：

// containers/ExampleContainer.js
import { connect } from 'react-redux';
import Example from '../components/Example';

const mapStateToProps = (state) => ({
  data: state.example.data
});

const mapDispatchToProps = (dispatch) => ({
  fetchData: () => dispatch({ type: 'FETCH_DATA' })
});

export default connect(mapStateToProps, mapDispatchToProps)(Example);

注意： 部分旧代码还在使用 Redux，新代码应该使用 Zustand。

3. Zustand 模式

创建 Store：

import { create } from 'zustand';
import pubStore from './index';

// 方式1：使用 PubStore（推荐）
const storeDef = (set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
});

const store = pubStore.defineStore('myStore', storeDef);
export const useMyStore = create(store);

// 方式2：直接创建（不共享）
export const useMyStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

4. 样式规范

混合使用 Less 和 Scss：

• Less： Ant Design 组件样式
• Scss： 自定义样式
• CSS Modules： 部分组件

---

🚀 开发指南

1. 新增页面

步骤：

1. 创建组件：src/widgets/NewWidget/
2. 创建容器：src/containers/NewContainer.js
3. 创建路由：src/routes/new.js
4. 添加到路由入口：src/routes/index.js

2. 新增状态管理

使用 Zustand：

1. 创建 Store：src/stores/newStore.js
2. 使用 PubStore（如果需要跨应用共享）：

   import pubStore from './index';
   import { create } from 'zustand';
   
   const storeDef = (set) => ({
     data: null,
     setData: (data) => set({ data }),
   });
   
   const store = pubStore.defineStore('newStore', storeDef);
   export const useNewStore = create(store);
   

3. 在组件中使用：

   import { useNewStore } from '@/stores/newStore';
   
   function MyComponent() {
     const { data, setData } = useNewStore();
     // ...
   }
   

3. 命名规范

类型	规范	示例
组件	PascalCase	UserProfile
容器	PascalCase + Container	UserProfileContainer
Store	camelCase + Store	userStore
Hook	use + PascalCase	useUserStore
Action	camelCase	setUserData

---

📝 关键文件

文件	位置	说明
入口文件	src/index.js	服务器端入口
客户端入口	src/client.js	客户端入口
路由入口	src/routes/index.js	路由配置
Store 入口	src/stores/index.js	PubStore 配置
全局状态	src/stores/globalStore.js	全局状态管理
配置	config/	环境配置

---

🔄 迁移建议

从 Redux 迁移到 Zustand

步骤：

1. 保留 Redux 旧代码（暂时不删除）
2. 新功能使用 Zustand
3. 逐步迁移旧代码：
   • 将 Redux reducer 转换为 Zustand store
   • 更新组件中的 connect/useSelector
   • 测试功能正常后删除 Redux 代码

示例迁移：

Redux (旧)：

// reducers/user.js
const initialState = {
  user: null,
  loading: false
};

export const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    default:
      return state;
  }
};

// 组件中
import { useSelector, useDispatch } from 'react-redux';
const user = useSelector((state) => state.user.user);
const dispatch = useDispatch();
dispatch({ type: 'SET_USER', payload: userData });

Zustand (新)：

// stores/userStore.js
import { create } from 'zustand';

export const useUserStore = create((set) => ({
  user: null,
  loading: false,
  setUser: (user) => set({ user }),
}));

// 组件中
import { useUserStore } from '@/stores/userStore';
const { user, setUser } = useUserStore();
setUser(userData);

---

🚀 快速开始

1. 启动开发服务器

cd ~/workspace/alichs-in-dubai
pnpm dev

2. 构建生产版本

pnpm build

3. 启动生产服务器

pnpm start

---

📊 项目统计

统计项	数量
组件	~50+
容器	~30+
路由	~20+
Zustand Stores	5+
旧 Redux	保留但不再使用

---

⚠️ 注意事项

1. 状态管理

• ✅ 新代码使用 Zustand
• ⚠️ 旧代码可能还有 Redux
• ✅ 跨应用共享使用 zustand-pub

2. PubStore Key

const pubStore = new PubStore('yuntun');

重要： 所有微应用必须使用相同的 key（'yuntun'）才能共享状态。

3. 微前端集成

主应用配置：

// 主应用
pubStore.defineStore('global', globalStoreDef);

微应用配置：

// 微应用
const globalStore = pubStore.getStore('global');
export const useGlobalStore = create(globalStore);

---

📚 相关文档

• Zustand 官方文档
• zustand-pub 文档
• 项目地址

---

最后更新： 2026-03-24 维护者： Schwarz (中书省+工部)