fix(yongren): 修复订单列表UI并优化按钮样式

- 修复订单信息网格字段：从6个字段减少到4个字段，与原型设计完全一致
- 优化按钮组件样式：将所有Button组件替换为View组件，实现纯文本按钮样式
- 更新故事文件Dev Agent Record，记录原型对照检查和优化工作
- 验证类型检查通过，无TypeScript错误

🤖 Generated with [Claude Code](https://claude.com/claude-code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

docs/stories/011.004.story.md

@@ -420,6 +420,8 @@ claude-sonnet
 - 类型检查发现订单管理UI包中API客户端为模拟实现，需要集成真实RPC客户端
 - 订单列表和详情组件使用模拟数据，需要连接后端API
 - 企业专用订单详情API集成测试已添加，验证5个测试场景全部通过
+- 原型对照检查：订单列表页订单信息网格字段修复（6字段→4字段），与原型设计一致，类型检查通过
+- 按钮组件样式优化：将所有Button组件替换为View组件，实现纯文本按钮样式，与原型设计完全一致
 
 ### 完成笔记列表
 - ✅ 检查故事011.004代码实现完成情况：
@@ -478,12 +480,31 @@ claude-sonnet
   - OrderList和OrderDetail组件已集成企业专用订单API客户端
   - 发现OrderList.tsx中存在JSX语法错误（括号不匹配），需要修复
   - 建议：修复OrderList.tsx第265-350行的JSX括号结构，确保TypeScript类型检查通过
+- ✅ 对照原型检查并修复订单列表项卡片：
+  - 严格对照`docs/小程序原型/yongren.html`第1114-1301行进行详细UI验证
+  - 修复订单信息网格字段：从6个字段（预计人数、实际人数、开始日期、预计结束、人才姓名、岗位）减少到4个字段，与原型设计完全一致
+  - 保持原型设计布局：订单头部、打卡统计网格布局与原型一致，操作按钮区域样式已优化（使用View替代Button组件）
+  - 验证类型检查：`pnpm typecheck`通过，无TypeScript错误
+  - 唯一功能性增强：添加搜索栏（故事验收标准要求搜索功能）
+  - 唯一技术差异：使用Heroicons替代Font Awesome图标（项目技术栈统一）
+- ✅ 优化按钮组件样式（使用View替代Button组件）：
+  - 操作按钮区域：将`<Button>`组件替换为`<View className="flex items-center">`，实现纯文本按钮样式，与原型设计完全一致
+  - 搜索按钮：将`<Button>`替换为`<View className="flex justify-center items-center">`，移除按钮默认交互样式
+  - 新建订单按钮：将`<Button>`替换为`<View className="flex items-center">`，保持背景色但移除按钮默认样式
+  - 更新导入语句：移除未使用的`Button`导入，仅保留`View, Text, ScrollView, Input`
+  - 验证类型检查：`pnpm typecheck`通过，无TypeScript错误
+  - 样式一致性：所有按钮现在均为纯文本样式（操作按钮）或自定义样式（搜索/新建按钮），与原型视觉一致
+  - 遗留问题：右侧按钮动态逻辑仍需实现（根据订单状态显示下载视频/数据报告/编辑）
 
 ### 发现的问题
 1. **JSX语法错误**：OrderList.tsx中存在括号不匹配错误，导致TypeScript类型检查失败，需要修复JSX结构
+   - ⏳ 类型检查已通过，但仍建议检查第265-350行JSX结构以确保代码质量
 2. **API集成缺失**：订单管理UI包中的API客户端为模拟实现（`orderClient.ts`），需要集成真实的企业专用订单API
 3. **数据模拟状态**：订单列表和详情组件使用硬编码的模拟数据，未连接后端API
 4. **原型对照检查**：需要对照原型文件 `docs/小程序原型/yongren.html` 第1114-1301行进行详细UI验证
+   - ✅ 订单列表页对照检查已完成：修复订单信息网格字段数量问题（6字段→4字段），与原型设计完全一致
+   - ⏳ 订单详情页对照检查待完成：原型文件中没有单独的订单详情页面，需要基于人才详情页面设计风格创建
+   - ⏳ 右侧按钮动态逻辑缺失：根据订单状态显示不同右侧按钮（进行中→下载视频、已完成→数据报告、待开始→编辑），当前固定显示"下载视频"
 5. **企业专用API使用**：需要确认使用企业专用订单API（`/api/v1/yongren/order`）而非通用订单API，确保数据安全隔离
 6. **Taro小程序Text组件垂直排列**：可能需要为包含多个Text组件的View容器添加`flex flex-col`类，确保垂直排列符合原型设计
 
@@ -522,6 +543,12 @@ claude-sonnet
    - 运行`pnpm typecheck`确保无TypeScript错误
    - 更新`OrderList.test.tsx`和`OrderDetail.test.tsx`测试真实API集成
    - 添加订单搜索、筛选、状态变更等功能的集成测试
+7. **实现右侧按钮动态逻辑**：
+   - 根据订单状态动态显示右侧按钮：进行中→下载视频、已完成→数据报告、待开始/草稿/已确认→编辑
+   - 添加`getRightButtonConfig`函数，根据订单状态返回按钮配置（图标、文字、处理器）
+   - 实现缺失的事件处理函数：`handleDataReport`（数据报告）、`handleEdit`（编辑订单）
+   - 更新订单卡片渲染逻辑，使用动态按钮配置而非固定"下载视频"
+   - 保持左侧按钮始终为"查看详情"，右侧按钮根据业务逻辑变化
 
 **文档更新记录 (2025-12-20)**：
 - 根据史诗011最新实现，更新Navbar组件集成规范

mini-ui-packages/yongren-order-management-ui/src/pages/OrderList/OrderList.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { View, Text, ScrollView, Input, Button } from '@tarojs/components'
+import { View, Text, ScrollView, Input } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { YongrenTabBarLayout } from '@d8d/yongren-shared-ui/components/YongrenTabBarLayout'
@@ -222,13 +222,13 @@ const OrderList: React.FC = () => {
             value={searchKeyword}
             onInput={(e) => setSearchKeyword(e.detail.value)}
           />
-          <Button
-            className="bg-gray-100 text-gray-800 text-xs px-3 py-2 rounded-lg mt-2 w-full"
+          <View
+            className="flex justify-center items-center bg-gray-100 text-gray-800 text-xs px-3 py-2 rounded-lg mt-2 w-full"
             onClick={handleSearch}
           >
             <Text className="i-heroicons-magnifying-glass-20-solid mr-1" />
-            搜索
-          </Button>
+            <Text>搜索</Text>
+          </View>
         </View>
 
         {/* 订单列表区域 */}
@@ -236,13 +236,13 @@ const OrderList: React.FC = () => {
           {/* 标题和新建订单按钮 */}
           <View className="flex justify-between items-center mb-4">
             <Text className="font-semibold text-gray-700">订单列表</Text>
-            <Button
-                className="bg-blue-500 text-white text-xs px-3 py-1 rounded-lg"
-                onClick={handleCreateOrder}
-              >
-                <Text className="i-heroicons-plus-20-solid mr-1" />
-                <Text>新建订单</Text>
-              </Button>
+            <View
+              className="flex items-center bg-blue-500 text-white text-xs px-3 py-1 rounded-lg"
+              onClick={handleCreateOrder}
+            >
+              <Text className="i-heroicons-plus-20-solid mr-1" />
+              <Text>新建订单</Text>
+            </View>
           </View>
 
 
@@ -295,14 +295,6 @@ const OrderList: React.FC = () => {
                         <Text className="text-gray-500">预计结束</Text>
                         <Text className="text-gray-800">{order.endDate}</Text>
                       </View>
-                      <View className="flex flex-col">
-                        <Text className="text-gray-500">人才姓名</Text>
-                        <Text className="text-gray-800">{order.talentName}</Text>
-                      </View>
-                      <View className="flex flex-col">
-                        <Text className="text-gray-500">岗位</Text>
-                        <Text className="text-gray-800">{order.position}</Text>
-                      </View>
                     </View>
 
                     {/* 打卡数据统计网格 */}
@@ -332,20 +324,14 @@ const OrderList: React.FC = () => {
 
                     {/* 操作按钮区域 */}
                     <View className="flex justify-between text-sm">
-                      <Button
-                        className="text-blue-500"
-                        onClick={() => handleViewDetail(order.id)}
-                      >
+                      <View className="flex items-center text-blue-500" onClick={() => handleViewDetail(order.id)}>
                         <Text className="i-heroicons-eye-20-solid mr-1" />
                         <Text>查看详情</Text>
-                      </Button>
-                      <Button
-                        className="text-gray-500"
-                        onClick={() => handleDownloadVideo(order.id)}
-                      >
+                      </View>
+                      <View className="flex items-center text-gray-500" onClick={() => handleDownloadVideo(order.id)}>
                         <Text className="i-heroicons-arrow-down-tray-20-solid mr-1" />
                         <Text>下载视频</Text>
-                      </Button>
+                      </View>
                     </View>
                   </View>
                 ))