cfc/cfc-frontend/pages/orchestration/index.vue

<template>
  <view class="container">
    <!-- 标题栏 -->
    <view class="header">
      <text class="title">流程编排</text>
      <text class="subtitle">创建和管理你的任务流程</text>
    </view>

    <!-- 新建按钮 -->
    <view class="create-btn" @click="handleCreate">
      <text class="create-icon">+</text>
      <text>新建流程</text>
    </view>

    <!-- 流程列表 -->
    <view class="flow-list">
      <view
        v-for="flow in flowList"
        :key="getKey(flow)"
        class="flow-card"
        @click="handleEdit(flow)"
      >
        <view class="flow-header">
          <text class="flow-name">{{ flow.name }}</text>
          <view class="flow-status" :class="'status-' + flow.status">
            {{ getStatusText(flow.status) }}
          </view>
        </view>
        <view class="flow-desc">
          <text v-if="flow.description">{{ flow.description }}</text>
          <text v-else class="empty">暂无描述</text>
        </view>
        <view class="flow-meta">
          <text class="meta-item">版本 {{ flow.version }}</text>
          <text class="meta-item">节点 {{ getNodeCount(flow) }}个</text>
          <text class="meta-item">{{ formatTime(flow.createdAt) }}</text>
        </view>
        <view class="flow-actions" @click.stop>
          <button v-if="flow.status === 'draft'" class="btn btn-publish" @click="handlePublish(flow)">发布</button>
          <button v-if="flow.status === 'published'" class="btn btn-archive" @click="handleArchive(flow)">归档</button>
          <button v-if="flow.status === 'draft'" class="btn btn-delete" @click="handleDelete(flow)">删除</button>
          <button class="btn btn-run" @click="handleRun(flow)">运行</button>
        </view>
      </view>

      <view v-if="!loading && flowList.length === 0" class="empty-state">
        <text class="empty-icon">📋</text>
        <text class="empty-text">暂无编排流程</text>
        <text class="empty-hint">点击新建开始你的第一个流程</text>
      </view>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
import { getOrchestrationFlowList, publishOrchestrationFlow, archiveOrchestrationFlow, deleteOrchestrationFlow, startOrchestrationExecution } from '../../utils/api.js'
import { parseDate, formatDateTime } from '../../utils/format.js'

export default {
  data() {
    return {
      flowList: [],
      loading: false
    }
  },
  onLoad() {
    this.loadFlows()
  },
  onShow() {
    if (!this._onLoadFired) {
      this.loadFlows()
    }
    this._onLoadFired = true
  },
  methods: {
    async loadFlows() {
      this.loading = true
      try {
        const res = await getOrchestrationFlowList({ page: 1, pageSize: 50 })
        this.flowList = res.data.list || []
      } catch (e) {
        console.error('加载流程列表失败', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    getKey(flow) {
      return flow.id
    },
    getStatusText(status) {
      const map = {
        draft: '草稿',
        published: '已发布',
        archived: '已归档'
      }
      return map[status] || status
    },
    getNodeCount(flow) {
      try {
        const cfg = JSON.parse(flow.configJson || '{}')
        return cfg.nodes ? cfg.nodes.length : 0
      } catch (e) {
        return 0
      }
    },
    formatTime(t) {
      if (!t) return '-'
      var d = parseDate(t)
      if (!d) return t.substring(0, 10)
      return formatDateTime(d)
    },
    handleCreate() {
      uni.navigateTo({ url: '/pages/orchestration/editor' })
    },
    handleEdit(flow) {
      uni.navigateTo({ url: '/pages/orchestration/editor?id=' + flow.id })
    },
    async handlePublish(flow) {
      uni.showLoading({ title: '发布中...' })
      try {
        await publishOrchestrationFlow(flow.id)
        uni.showToast({ title: '发布成功', icon: 'success' })
        this.loadFlows()
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: e.message || '发布失败', icon: 'none' })
      }
    },
    async handleArchive(flow) {
      uni.showLoading({ title: '归档中...' })
      try {
        await archiveOrchestrationFlow(flow.id)
        uni.showToast({ title: '归档成功', icon: 'success' })
        this.loadFlows()
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: e.message || '归档失败', icon: 'none' })
      }
    },
    handleDelete(flow) {
      uni.showModal({
        title: '确认删除',
        content: '删除后无法恢复，确定要删除这个流程吗？',
        success: (res) => {
          if (res.confirm) {
            this.doDelete(flow)
          }
        }
      })
    },
    async doDelete(flow) {
      uni.showLoading({ title: '删除中...' })
      try {
        await deleteOrchestrationFlow(flow.id)
        uni.showToast({ title: '删除成功', icon: 'success' })
        this.loadFlows()
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: e.message || '删除失败', icon: 'none' })
      }
    },
    handleRun(flow) {
      // 弹出家庭成员选择
      this.showRunDialog(flow)
    },
    showRunDialog(flow) {
      // 这里简化处理，直接跳转到执行详情页
      // 实际项目中应先选择家庭成员
      uni.navigateTo({
        url: '/pages/orchestration/editor?flowId=' + flow.id + '&action=run'
      })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF7ED 0%, #F8F8F8 100%);
  padding-bottom: 40rpx;
}
.header {
  padding: 40rpx 30rpx 30rpx;
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  color: #fff;
}
.title {
  display: block;
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.subtitle {
  display: block;
  font-size: 26rpx;
  opacity: 0.9;
}
.create-btn {
  margin: 30rpx;
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  color: #fff;
  border-radius: 50rpx;
  padding: 28rpx 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(249, 115, 22, 0.3);
}
.create-icon {
  font-size: 44rpx;
  margin-right: 12rpx;
  font-weight: 300;
}
.flow-list {
  padding: 0 30rpx;
}
.flow-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}
.flow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}
.flow-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #1E293B;
  flex: 1;
}
.flow-status {
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  margin-left: 16rpx;
}
.status-draft { background: #F1F5F9; color: #64748B; }
.status-published { background: #DCFCE7; color: #16A34A; }
.status-archived { background: #FEF3C7; color: #D97706; }
.flow-desc {
  font-size: 26rpx;
  color: #64748B;
  margin-bottom: 16rpx;
  line-height: 1.5;
}
.empty { color: #94A3B8; }
.flow-meta {
  display: flex;
  margin-bottom: 20rpx;
}
.meta-item {
  font-size: 22rpx;
  color: #94A3B8;
  margin-right: 24rpx;
}
.flow-actions {
  display: flex;
  gap: 16rpx;
  flex-wrap: wrap;
}
.btn {
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  border: none;
}
.btn::after { border: none; }
.btn-publish { background: #F97316; color: #fff; }
.btn-archive { background: #F59E0B; color: #fff; }
.btn-delete { background: #EF4444; color: #fff; }
.btn-run { background: #10B981; color: #fff; }
.empty-state {
  text-align: center;
  padding: 100rpx 0;
}
.empty-icon {
  display: block;
  font-size: 80rpx;
  margin-bottom: 20rpx;
}
.empty-text {
  display: block;
  font-size: 28rpx;
  color: #94A3B8;
  margin-bottom: 10rpx;
}
.empty-hint {
  display: block;
  font-size: 24rpx;
  color: #CBD5E1;
}
.loading {
  text-align: center;
  padding: 60rpx;
  color: #94A3B8;
}
</style>