diff --git a/docs/DELIVERY_FEATURE_DESIGN.md b/docs/DELIVERY_FEATURE_DESIGN.md
new file mode 100644
index 0000000..fc0219a
--- /dev/null
+++ b/docs/DELIVERY_FEATURE_DESIGN.md
@@ -0,0 +1,287 @@
+# 订单发货功能设计
+
+## 功能概述
+
+参考提供的设计图，为订单管理系统设计了一个完整的发货功能，包括发货弹窗、快递公司管理等功能。
+
+## 设计特点
+
+### 1. 🚚 **发货弹窗设计**
+
+参考原图设计，包含以下功能模块：
+
+#### 配送方式选择
+- **快递配送**：使用第三方快递公司配送
+- **无需发货**：虚拟商品或服务类订单
+- **商家送货**：商家自行配送
+
+#### 发货类型选择
+- **手动填写**：手动输入快递信息
+- **电子面单打印**：集成快递公司API自动生成面单
+
+#### 快递信息填写
+- **快递公司选择**：从预设的快递公司列表中选择
+- **快递单号输入**：手动输入或自动生成
+- **分单发货支持**：支持订单分批发货
+
+### 2. 🏢 **快递公司管理**
+
+#### 快递公司设置弹窗
+- 快递公司列表管理
+- 支持添加、编辑、删除快递公司
+- 快递公司状态启用/禁用
+- 搜索和筛选功能
+
+#### 快递公司信息
+- 快递公司名称
+- 微信快递编码
+- 快递100编码
+- 快递鸟编码
+- 排序号设置
+
+## 组件结构
+
+### 1. DeliveryModal.vue - 发货弹窗
+
+```vue
+
+
+
+
+ 快递配送
+ 无需发货
+ 商家送货
+
+
+
+
+ 手动填写
+ 电子面单打印
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### 2. ExpressSettingModal.vue - 快递公司设置
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## 功能流程
+
+### 1. 发货流程
+
+```mermaid
+graph TD
+ A[点击发货按钮] --> B[打开发货弹窗]
+ B --> C{选择配送方式}
+
+ C -->|快递配送| D[选择快递公司]
+ C -->|无需发货| E[直接完成发货]
+ C -->|商家送货| F[填写配送信息]
+
+ D --> G[输入快递单号]
+ G --> H[填写发货备注]
+ H --> I[选择发货时间]
+ I --> J[提交发货]
+
+ E --> J
+ F --> J
+
+ J --> K[更新订单状态]
+ K --> L[发货完成]
+```
+
+### 2. 快递公司管理流程
+
+```mermaid
+graph TD
+ A[设置物流公司] --> B[打开快递公司管理]
+ B --> C{操作类型}
+
+ C -->|添加| D[填写快递公司信息]
+ C -->|编辑| E[修改快递公司信息]
+ C -->|删除| F[确认删除]
+ C -->|启用/禁用| G[切换状态]
+
+ D --> H[保存快递公司]
+ E --> H
+ F --> I[删除快递公司]
+ G --> J[更新状态]
+
+ H --> K[刷新列表]
+ I --> K
+ J --> K
+```
+
+## 数据结构
+
+### 1. 发货表单数据
+
+```typescript
+interface DeliveryForm {
+ deliveryType: number; // 配送方式：0快递 1无需发货 2商家送货
+ deliveryMethod: string; // 发货类型：manual手动 print电子面单
+ expressId?: number; // 快递公司ID
+ expressName?: string; // 快递公司名称
+ trackingNumber?: string; // 快递单号
+ partialDelivery: boolean; // 是否支持分单发货
+ deliveryNote?: string; // 发货备注
+ deliveryTime: Dayjs; // 发货时间
+}
+```
+
+### 2. 快递公司数据
+
+```typescript
+interface ShopExpress {
+ expressId?: number; // 快递公司ID
+ expressName?: string; // 快递公司名称
+ wxCode?: string; // 微信快递编码
+ kuaidi100Code?: string; // 快递100编码
+ kdniaoCode?: string; // 快递鸟编码
+ sortNumber?: number; // 排序号
+ deleted?: number; // 是否删除
+}
+```
+
+## 界面设计要点
+
+### 1. 视觉层次
+
+- **主要选项突出显示**：快递配送选项使用蓝色高亮
+- **分组清晰**：配送方式、发货类型、快递信息分组显示
+- **操作按钮明确**：确认发货使用主色调按钮
+
+### 2. 交互体验
+
+- **条件显示**：根据配送方式动态显示相关字段
+- **智能默认值**：发货时间默认为当前时间
+- **表单验证**：必填字段验证和格式检查
+
+### 3. 响应式设计
+
+- **弹窗宽度适配**：发货弹窗600px，设置弹窗800px
+- **表单布局**：使用Ant Design的栅格系统
+- **移动端适配**：考虑小屏幕设备的显示效果
+
+## 集成方式
+
+### 1. 在订单列表中集成
+
+```typescript
+// 发货处理
+const handleDelivery = (record: ShopOrder) => {
+ current.value = record;
+ showDelivery.value = true;
+};
+```
+
+### 2. 在订单详情中集成
+
+```vue
+
+
+ 发货
+
+
+```
+
+## 扩展功能
+
+### 1. 电子面单集成
+
+- 集成快递公司API
+- 自动生成快递单号
+- 打印面单功能
+
+### 2. 物流跟踪
+
+- 集成物流查询API
+- 实时更新物流状态
+- 物流轨迹展示
+
+### 3. 批量发货
+
+- 支持批量选择订单
+- 批量设置快递信息
+- 批量打印面单
+
+## 技术实现
+
+### 1. 表单验证
+
+```typescript
+const rules = {
+ deliveryType: [{ required: true, message: '请选择配送方式' }],
+ expressId: [{
+ validator: (_, value) => {
+ if (form.deliveryType === 0 && !value) {
+ return Promise.reject('请选择快递公司');
+ }
+ return Promise.resolve();
+ }
+ }]
+};
+```
+
+### 2. 日期处理
+
+```typescript
+const deliveryTime = toDateString(form.deliveryTime.toDate(), 'yyyy-MM-dd HH:mm:ss');
+```
+
+### 3. 状态管理
+
+```typescript
+const updateData = {
+ ...props.data,
+ deliveryStatus: 20, // 已发货
+ deliveryType: form.deliveryType,
+ deliveryTime: deliveryTime,
+ expressId: form.expressId,
+ trackingNumber: form.trackingNumber
+};
+```
+
+## 总结
+
+这个发货功能设计具有以下优势：
+
+1. **界面友好**：参考原设计图，界面清晰直观
+2. **功能完整**：支持多种配送方式和发货类型
+3. **扩展性强**：预留了电子面单和物流跟踪的接口
+4. **易于维护**：组件化设计，代码结构清晰
+5. **用户体验好**：智能表单验证和条件显示
+
+这个设计将显著提升订单发货的效率和准确性。
diff --git a/src/views/shop/shopOrder/components/deliveryModal.vue b/src/views/shop/shopOrder/components/deliveryModal.vue
new file mode 100644
index 0000000..8b8a290
--- /dev/null
+++ b/src/views/shop/shopOrder/components/deliveryModal.vue
@@ -0,0 +1,311 @@
+
+
+
+
+
+
+
+
+ 快递配送
+
+ 无需发货
+ 商家送货
+
+
+
+
+
+
+
+ 手动填写
+
+ 电子面单打印
+
+
+
+
+
+
+
+
+
+ {{ express.expressName }}
+
+
+
+
+
+ 设置物流公司
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/shop/shopOrder/components/expressSettingModal.vue b/src/views/shop/shopOrder/components/expressSettingModal.vue
new file mode 100644
index 0000000..007c1ca
--- /dev/null
+++ b/src/views/shop/shopOrder/components/expressSettingModal.vue
@@ -0,0 +1,369 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 编辑
+
+
+ 删除
+
+
+
+
+
+