# CommandsList 组件

## 📦 组件说明

`CommandsList.vue` 是一个通用的指令列表展示组件，专门用于在任务状态页面中展示任务的执行指令详情。

## ✨ 特性

- ✅ **撑满父元素** - 组件宽高自动撑满父容器（100% width & height）
- ✅ **自适应表格** - 表格列宽自动分配，无需手动设置每列宽度
- ✅ **返回导航** - 内置返回按钮，支持返回上级页面
- ✅ **加载状态** - 支持loading状态显示
- ✅ **美观样式** - 现代化UI设计，带有斑马纹、边框等
- ✅ **数据格式化** - 自动格式化JSON、时间等数据
- ✅ **状态标签** - 彩色标签区分不同状态和类型
- ✅ **独立封装** - 完全独立的组件，可在其他页面复用

## 📋 Props 参数

| 参数名 | 类型 | 默认值 | 必填 | 说明 |
|--------|------|--------|------|------|
| visible | Boolean | false | 否 | 是否显示组件 |
| title | String | '指令列表' | 否 | 页面标题 |
| loading | Boolean | false | 否 | 数据加载状态 |
| data | Array | [] | 否 | 指令列表数据 |

## 🎯 Events 事件

| 事件名 | 参数 | 说明 |
|--------|------|------|
| back | 无 | 点击返回按钮时触发 |

## 💻 使用示例

### 基础用法

```vue
<template>
    <div class="page-container">
        <!-- 列表页面 -->
        <div v-show="!showDetail">
            <Button @click="handleShowDetail">查看详情</Button>
        </div>

        <!-- 详情页面 - 使用 CommandsList 组件 -->
        <CommandsList 
            v-show="showDetail"
            :visible="showDetail"
            :title="detailTitle"
            :loading="detailLoading"
            :data="detailData"
            @back="handleBack" />
    </div>
</template>

<script>
import CommandsList from './components/CommandsList.vue'

export default {
    components: {
        CommandsList
    },
    data() {
        return {
            showDetail: false,
            detailTitle: '指令列表',
            detailLoading: false,
            detailData: []
        }
    },
    methods: {
        async handleShowDetail() {
            this.showDetail = true
            this.detailLoading = true
            
            try {
                // 获取数据
                const res = await this.fetchData()
                this.detailData = res.data
            } catch (error) {
                this.$Message.error('获取数据失败')
            } finally {
                this.detailLoading = false
            }
        },
        handleBack() {
            this.showDetail = false
        }
    }
}
</script>

<style scoped>
.page-container {
    width: 100%;
    height: 100%;
}
</style>
```

### 在 task_status.vue 中的实际应用

```vue
<template>
    <div class="content-view">
        <!-- 任务列表主页面 -->
        <div v-show="!showCommandsView" class="task-list-view">
            <!-- 任务列表内容 -->
        </div>

        <!-- 指令列表详情页面 -->
        <CommandsList 
            v-show="showCommandsView" 
            :visible="showCommandsView"
            :title="commandsModal.title"
            :loading="commandsModal.loading"
            :data="commandsModal.data"
            @back="backToTaskList" />
    </div>
</template>

<script>
import CommandsList from './components/CommandsList.vue'

export default {
    components: {
        CommandsList
    },
    data() {
        return {
            showCommandsView: false,
            commandsModal: {
                loading: false,
                title: '指令列表',
                data: []
            }
        }
    },
    methods: {
        async showCommands(row) {
            this.showCommandsView = true
            this.commandsModal.loading = true
            this.commandsModal.title = `指令列表 - 任务ID: ${row.id} (${row.taskName})`
            
            try {
                const res = await taskStatusServer.getCommands(row.id)
                this.commandsModal.data = res.data || []
            } catch (error) {
                this.$Message.error('获取指令列表失败')
                this.commandsModal.data = []
            } finally {
                this.commandsModal.loading = false
            }
        },
        backToTaskList() {
            this.showCommandsView = false
        }
    }
}
</script>
```

## 📊 数据格式

### 指令数据结构（data 数组元素）

```javascript
{
    id: 123,                           // 指令ID
    sequence: 1,                       // 序号
    command_type: 'browser',           // 指令类型：browser/search/fill/click/wait/screenshot/extract
    command_name: '打开浏览器',        // 指令名称
    command_params: '{"url":"..."}',   // 指令参数（JSON字符串）
    status: 'success',                 // 状态：pending/running/success/failed/skipped
    result: '{"data":"..."}',          // 执行结果（JSON字符串）
    error_message: null,               // 错误信息
    retry_count: 0,                    // 重试次数
    execution_time: 1.23,              // 执行时长（秒）
    create_time: '2025-10-29 10:00:00', // 创建时间
}
```

## 🎨 样式特性

### 布局特性
- **弹性布局** - 使用 flexbox 实现头部+内容区域布局
- **100%撑满** - 宽高100%，自动撑满父容器
- **自适应列宽** - 表格列宽自动分配，无需手动设置

### 视觉效果
- **现代化头部** - 带返回按钮和标题的导航栏
- **美观表格** - 斑马纹、边框、悬停效果
- **彩色标签** - 不同状态使用不同颜色区分
- **格式化显示** - JSON自动格式化，代码高亮
- **错误高亮** - 错误信息红色背景突出显示
- **滚动优化** - 美化的滚动条样式

### 响应式
- 表格自动适应父容器宽度
- 内容区域独立滚动
- 头部固定不滚动

## 🔧 自定义样式

如果需要自定义样式，可以在父组件中使用深度选择器：

```vue
<style scoped>
/* 修改组件内部样式 */
.my-page >>> .commands-list-container {
    background: #f5f5f5;
}

/* 修改表格样式 */
.my-page >>> .commands-body .ivu-table {
    font-size: 14px;
}
</style>
```

## 📌 注意事项

1. **父容器要求** - 父容器必须有明确的宽高，否则组件无法正确撑满
2. **v-show控制** - 建议使用 `v-show` 而不是 `v-if`，以保持状态
3. **数据格式** - JSON字段支持字符串和对象两种格式，组件会自动处理
4. **时间格式** - 时间字段应为标准的日期时间字符串
5. **状态映射** - 组件内部已定义状态和类型的颜色映射，可根据需要修改

## 🚀 特色功能

### 1. 自动JSON格式化
组件会自动格式化 `command_params` 和 `result` 字段的JSON数据，提供更好的可读性。

### 2. 智能状态标签
根据不同的指令类型和状态，自动显示对应颜色的标签：

**指令类型颜色**：
- browser - 蓝色
- search - 青色
- fill - 深蓝色
- click - 紫色
- wait - 橙色
- screenshot - 洋红色
- extract - 绿色

**状态颜色**：
- pending（待执行） - 灰色
- running（执行中） - 蓝色
- success（成功） - 绿色
- failed（失败） - 红色
- skipped（已跳过） - 橙色

### 3. 错误信息高亮
错误信息使用红色背景和左边框高亮显示，便于快速定位问题。

### 4. 时间格式化
自动格式化时间为 `YYYY-MM-DD HH:mm:ss` 格式，统一时间显示样式。

## 📝 更新日志

### v1.0.0 (2025-10-29)
- ✅ 初始版本发布
- ✅ 实现基础功能
- ✅ 移除所有列宽限制，实现表格自动撑满
- ✅ 优化样式和交互
- ✅ 完善组件文档

## 🤝 贡献

如需改进此组件，请遵循以下原则：
1. 保持组件的通用性和独立性
2. 确保样式不依赖外部全局样式
3. 维护良好的代码注释
4. 更新此文档说明

## 📄 许可

此组件为项目内部组件，仅供项目内使用。

