front / rider-admin · Files

<template>
  <div>
    <a-card title="调度规则" :bordered="false" class="list-table-card">
      <div class="list-toolbar">
        <div class="list-toolbar-left">
          <a-select
            v-if="isAdmin"
            v-model:value="selectedCityId"
            placeholder="选择租户"
            class="list-filter"
            @change="handleCityChange"
          >
            <a-select-option v-for="c in cityList" :key="c.id" :value="c.id">{{ c.name }}</a-select-option>
          </a-select>
          <div v-else class="managed-city-pill">当前租户：{{ currentCityName || `租户#${selectedCityId}` }}</div>
        </div>
        <div class="list-toolbar-right">
          <a-button type="primary" :disabled="!selectedCityId" @click="createTemplate">新增模板</a-button>
        </div>
      </div>

      <div v-if="selectedCityId" class="plan-layout dispatch-layout">
        <div class="plan-sidebar">
          <div class="plan-sidebar-header">
            <div>
              <div class="plan-sidebar-title">规则模板</div>
              <div class="plan-sidebar-subtitle">按城市维护多套抢派规则</div>
            </div>
          </div>
          <a-spin :spinning="loadingTemplates">
            <div class="plan-list">
              <button
                v-for="item in templateList"
                :key="item.id"
                type="button"
                class="plan-item"
                :class="{ active: item.id === selectedTemplateId }"
                @click="selectTemplate(item.id)"
              >
                <div class="plan-item-top">
                  <span class="plan-item-name">{{ item.name }}</span>
                  <a-tag v-if="item.isActive === 1" color="green">生效中</a-tag>
                </div>
                <div class="plan-item-bottom">
                  <span>{{ item.autoDispatch === 1 ? '自动派单开启' : '仅抢单' }}</span>
                  <span>抢单 {{ item.grabTimeout || 0 }} 分钟</span>
                </div>
              </button>
              <a-empty v-if="!templateList.length" description="当前城市暂无调度规则模板" />
            </div>
          </a-spin>
        </div>

        <div class="plan-content">
          <template v-if="editorVisible">
            <div class="plan-content-top">
              <div class="soft-note-card plan-note-card">
                <strong>配置说明</strong>
                <p>当前页面仅配置自营抢派模式与自营骑手内部优先级，不包含第三方运力相关维度。</p>
              </div>

              <div class="plan-toolbar">
                <div class="plan-toolbar-meta">
                  <span class="plan-toolbar-eyebrow">当前编辑</span>
                  <strong>{{ form.name || '未命名模板' }}</strong>
                </div>
                <a-space wrap>
                  <a-button @click="openCopyModal" :disabled="!form.id">复制模板</a-button>
                  <a-button @click="activateTemplate" :disabled="form.isActive === 1">激活模板</a-button>
                  <a-popconfirm title="确认删除当前模板？" @confirm="deleteTemplate">
                    <a-button danger :disabled="form.isActive === 1">删除模板</a-button>
                  </a-popconfirm>
                </a-space>
                <div class="plan-toolbar-submit">
                  <span class="plan-toolbar-tip">完成配置后保存当前模板</span>
                  <a-button type="primary" class="plan-save-button" @click="saveTemplate" :loading="saving">保存模板</a-button>
                </div>
              </div>
            </div>

            <div class="plan-content-body">
              <div class="plan-section">
                <div class="plan-section-head">
                  <div class="plan-section-chip">基础</div>
                  <div class="soft-section-header">
                    <div class="soft-section-heading">
                      <h3 class="soft-section-title">模板基础信息</h3>
                      <p class="soft-section-subtitle">维护模板名称和当前生效状态。</p>
                    </div>
                  </div>
                </div>
                <a-row :gutter="[16, 4]" class="plan-form-grid">
                  <a-col :span="12">
                    <a-form-item label="模板名称">
                      <a-input v-model:value="form.name" placeholder="如：默认规则模板" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="当前状态">
                      <a-tag :color="form.isActive === 1 ? 'green' : 'default'">
                        {{ form.isActive === 1 ? '生效中' : '未生效' }}
                      </a-tag>
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>

              <div class="plan-section">
                <div class="plan-section-head">
                  <div class="plan-section-chip">抢派</div>
                  <div class="soft-section-header">
                    <div class="soft-section-heading">
                      <h3 class="soft-section-title">自营抢派模式</h3>
                      <p class="soft-section-subtitle">配置抢单时长、可见范围、持单上限和自动派单。</p>
                    </div>
                  </div>
                </div>
                <a-row :gutter="[16, 4]" class="plan-form-grid">
                  <a-col :span="8">
                    <a-form-item label="启用抢单模式">
                      <a-switch v-model:checked="grabEnabledChecked" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="抢单时间（分钟）">
                      <a-input-number v-model:value="form.grabTimeout" :min="1" style="width:100%" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="单人最大抢单量">
                      <a-input-number v-model:value="form.grabMaxPerRider" :min="1" style="width:100%" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="[16, 4]" class="plan-form-grid plan-form-grid-compact">
                  <a-col :span="12">
                    <a-form-item label="抢单可见范围">
                      <a-radio-group v-model:value="form.grabScope" class="grab-scope-group">
                        <a-radio :value="1" class="grab-scope-option">
                          <div class="grab-scope-card">
                            <strong>订单所属区域骑手</strong>
                            <span>优先限制在订单所属区域内的自营骑手可见</span>
                          </div>
                        </a-radio>
                        <a-radio :value="2" class="grab-scope-option">
                          <div class="grab-scope-card">
                            <strong>全部自营骑手</strong>
                            <span>放开到当前城市下全部自营骑手参与抢单</span>
                          </div>
                        </a-radio>
                      </a-radio-group>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="同步自动派单">
                      <a-switch v-model:checked="autoDispatchChecked" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>

              <div class="plan-section">
                <div class="plan-section-head">
                  <div class="plan-section-chip">优先级</div>
                  <div class="soft-section-header">
                    <div class="soft-section-heading">
                      <h3 class="soft-section-title">自营骑手内部派单优先级</h3>
                      <p class="soft-section-subtitle">按条件顺序依次决策，暂不接入拖拽，使用上下移动调整顺序。</p>
                    </div>
                  </div>
                </div>

                <div class="soft-dashed-block dispatch-condition-list">
                  <div
                    v-for="(item, index) in form.conditions"
                    :key="item.conditionType"
                    class="dispatch-condition-row"
                    :class="{ disabled: item.enabled !== 1 }"
                  >
                    <div class="dispatch-condition-rank">{{ Number(index) + 1 }}</div>

                    <div class="dispatch-condition-content">
                      <div class="dispatch-condition-main">
                        <div class="dispatch-condition-title-wrap">
                          <div class="dispatch-condition-title">
                            <strong>{{ item.conditionDesc || item.conditionType }}</strong>
                            <a-tag v-if="item.enabled === 1" color="processing">启用</a-tag>
                            <a-tag v-else>停用</a-tag>
                          </div>
                          <div class="dispatch-condition-meta">条件编码：{{ item.conditionType }}</div>
                        </div>
                        <div class="dispatch-condition-actions">
                          <a-switch :checked="item.enabled === 1" @change="(checked:boolean) => item.enabled = checked ? 1 : 0" />
                          <a-button size="small" @click="moveCondition(Number(index), -1)" :disabled="Number(index) === 0">上移</a-button>
                          <a-button size="small" @click="moveCondition(Number(index), 1)" :disabled="Number(index) === form.conditions.length - 1">下移</a-button>
                        </div>
                      </div>

                      <div class="dispatch-condition-body">
                        <div v-if="item.hasThreshold" class="dispatch-condition-input">
                          <span class="dispatch-condition-label">阈值</span>
                          <a-input-number v-model:value="item.thresholdValue" :min="0" :step="0.1" style="width:160px" />
                        </div>
                        <div v-else class="dispatch-condition-label">当前条件无需阈值配置</div>
                        <div class="dispatch-condition-order">优先级：{{ Number(index) + 1 }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <a-empty v-else description="请选择或创建一个模板后开始配置" />
        </div>
      </div>

      <a-empty v-else description="请先选择租户" />
    </a-card>

    <a-modal v-model:open="copyVisible" title="复制模板" @ok="confirmCopy" :confirmLoading="saving">
      <div class="soft-page-stack">
        <div class="soft-note-card">
          <strong>复制说明</strong>
          <p>复制后会生成一份新模板，条件和抢派模式配置会一并复制。</p>
        </div>
        <a-form layout="vertical">
          <a-form-item label="新模板名称">
            <a-input v-model:value="copyName" placeholder="请输入新模板名称" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { dispatchRuleApi } from '@/api'
import { useRoleSelectedCity } from '@/composables/useRoleSelectedCity'

const {
  isAdmin,
  cityList,
  selectedCityId,
  currentCityName,
  loadCities,
} = useRoleSelectedCity()
const templateList = ref<any[]>([])
const selectedTemplateId = ref<number | null>(null)
const loadingTemplates = ref(false)
const saving = ref(false)
const copyVisible = ref(false)
const copyName = ref('')
const creatingNew = ref(false)

const form = reactive<any>({
  id: null,
  cityId: undefined,
  name: '',
  isActive: 0,
  grabEnabled: 1,
  grabTimeout: 30,
  grabScope: 1,
  grabMaxPerRider: 3,
  autoDispatch: 1,
  conditions: [],
})

const defaultConditions = [
  { conditionType: 'distance', conditionDesc: '订单优先发给距离取单地址较近的骑手', enabled: 1, thresholdValue: 5, sortOrder: 0, hasThreshold: true },
  { conditionType: 'detour', conditionDesc: '订单优先发给顺路距离较短的骑手', enabled: 1, thresholdValue: 2, sortOrder: 1, hasThreshold: true },
  { conditionType: 'wait', conditionDesc: '订单优先发给等待新订单时间较长的骑手', enabled: 1, thresholdValue: 10, sortOrder: 2, hasThreshold: true },
  { conditionType: 'currentLoad', conditionDesc: '订单优先发给当前持单量较少的骑手', enabled: 1, thresholdValue: 3, sortOrder: 3, hasThreshold: true },
  { conditionType: 'daily', conditionDesc: '订单优先发给当日总接单量较少的骑手', enabled: 1, thresholdValue: 20, sortOrder: 4, hasThreshold: true },
  { conditionType: 'direction', conditionDesc: '订单优先发给目的地与骑手当前方向一致的骑手', enabled: 1, thresholdValue: 0, sortOrder: 5, hasThreshold: false },
  { conditionType: 'rookie', conditionDesc: '订单优先发给新手骑手', enabled: 1, thresholdValue: 7, sortOrder: 6, hasThreshold: true },
  { conditionType: 'praise', conditionDesc: '订单优先发给好评率更高的骑手', enabled: 1, thresholdValue: 95, sortOrder: 7, hasThreshold: true },
  { conditionType: 'areaMatch', conditionDesc: '订单优先发给当前所在区域与订单区域匹配的骑手', enabled: 1, thresholdValue: 0, sortOrder: 8, hasThreshold: false },
]

const grabEnabledChecked = computed({
  get: () => form.grabEnabled === 1,
  set: (val: boolean) => { form.grabEnabled = val ? 1 : 0 }
})

const autoDispatchChecked = computed({
  get: () => form.autoDispatch === 1,
  set: (val: boolean) => { form.autoDispatch = val ? 1 : 0 }
})

const editorVisible = computed(() => !!form.id || creatingNew.value)

async function loadDispatchCities() {
  await loadCities()
  if (selectedCityId.value) {
    await loadTemplates()
  }
}

async function handleCityChange() {
  resetForm()
  await loadTemplates()
}

async function loadTemplates(preferId?: number | null) {
  if (!selectedCityId.value) return
  loadingTemplates.value = true
  try {
    const res: any = await dispatchRuleApi.list(isAdmin.value ? selectedCityId.value : undefined)
    templateList.value = res.data || []
    if (!templateList.value.length) {
      resetForm()
      return
    }
    const targetId = preferId
      || templateList.value.find((item: any) => item.isActive === 1)?.id
      || templateList.value[0]?.id
    selectTemplate(targetId)
  } finally {
    loadingTemplates.value = false
  }
}

function selectTemplate(id: number) {
  creatingNew.value = false
  selectedTemplateId.value = id
  const current = templateList.value.find((item: any) => item.id === id)
  if (!current) return
  Object.assign(form, {
    id: current.id,
    cityId: current.cityId,
    name: current.name,
    isActive: current.isActive,
    grabEnabled: current.grabEnabled,
    grabTimeout: current.grabTimeout,
    grabScope: current.grabScope,
    grabMaxPerRider: current.grabMaxPerRider,
    autoDispatch: current.autoDispatch,
    conditions: normalizeConditions(current.conditions),
  })
}

function normalizeConditions(conditions: any[]) {
  const currentMap = new Map((conditions || []).map((item: any) => [item.conditionType, item]))
  return defaultConditions.map((base, index) => {
    const found = currentMap.get(base.conditionType)
    return {
      ...base,
      ...found,
      sortOrder: found?.sortOrder ?? index,
      thresholdValue: found?.thresholdValue ?? base.thresholdValue,
      enabled: found?.enabled ?? base.enabled,
    }
  }).sort((a, b) => a.sortOrder - b.sortOrder)
}

function createTemplate() {
  if (!selectedCityId.value) {
    message.error('请先选择租户')
    return
  }
  creatingNew.value = true
  selectedTemplateId.value = null
  Object.assign(form, {
    id: null,
    cityId: selectedCityId.value,
    name: '',
    isActive: 0,
    grabEnabled: 1,
    grabTimeout: 30,
    grabScope: 1,
    grabMaxPerRider: 3,
    autoDispatch: 1,
    conditions: normalizeConditions([]),
  })
}

function openCopyModal() {
  copyName.value = `${form.name || '新模板'}-副本`
  copyVisible.value = true
}

async function confirmCopy() {
  if (!form.id) return
  if (!copyName.value.trim()) {
    message.error('请输入新模板名称')
    return
  }
  saving.value = true
  try {
    const res: any = await dispatchRuleApi.copy(form.id, copyName.value.trim(), isAdmin.value ? selectedCityId.value : undefined)
    message.success('复制成功')
    copyVisible.value = false
    await loadTemplates(res.data)
  } finally {
    saving.value = false
  }
}

async function activateTemplate() {
  if (!form.id) return
  await dispatchRuleApi.activate(form.id, isAdmin.value ? selectedCityId.value : undefined)
  message.success('已激活模板')
  await loadTemplates(form.id)
}

async function deleteTemplate() {
  if (!form.id) return
  await dispatchRuleApi.del(form.id, isAdmin.value ? selectedCityId.value : undefined)
  message.success('删除成功')
  await loadTemplates()
}

async function saveTemplate() {
  if (!selectedCityId.value) {
    message.error('请选择租户')
    return
  }
  if (!form.name?.trim()) {
    message.error('请输入模板名称')
    return
  }
  if (!form.grabTimeout || form.grabTimeout < 1) {
    message.error('抢单时间必须大于0')
    return
  }
  if (!form.grabMaxPerRider || form.grabMaxPerRider < 1) {
    message.error('单人最大抢单量必须大于0')
    return
  }

  saving.value = true
  try {
    const payload = {
      id: form.id || undefined,
      cityId: selectedCityId.value,
      name: form.name,
      grabEnabled: form.grabEnabled,
      grabTimeout: form.grabTimeout,
      grabScope: form.grabScope,
      grabMaxPerRider: form.grabMaxPerRider,
      autoDispatch: form.autoDispatch,
      conditions: (form.conditions || []).map((item: any, index: number) => ({
        conditionType: item.conditionType,
        enabled: item.enabled,
        thresholdValue: item.hasThreshold ? (item.thresholdValue ?? 0) : 0,
        sortOrder: index,
      })),
    }
    const res: any = await dispatchRuleApi.save({
      ...payload,
      cityId: selectedCityId.value,
    })
    message.success('保存成功')
    await loadTemplates(res.data)
  } finally {
    saving.value = false
  }
}

function moveCondition(index: number, offset: number) {
  const target = index + offset
  if (target < 0 || target >= form.conditions.length) return
  const list = [...form.conditions]
  const temp = list[index]
  list[index] = list[target]
  list[target] = temp
  list.forEach((item, idx) => { item.sortOrder = idx })
  form.conditions = list
}

function resetForm() {
  creatingNew.value = false
  Object.assign(form, {
    id: null,
    cityId: selectedCityId.value,
    name: '',
    isActive: 0,
    grabEnabled: 1,
    grabTimeout: 30,
    grabScope: 1,
    grabMaxPerRider: 3,
    autoDispatch: 1,
    conditions: [],
  })
  selectedTemplateId.value = null
}

onMounted(loadDispatchCities)
</script>

<style scoped>
.dispatch-layout {
  margin-top: 8px;
}

.plan-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  min-height: 640px;
}

.plan-sidebar,
.plan-content {
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 18px;
}

.plan-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.plan-content-top {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 6px;
  background: var(--bg-color);
}

.plan-content-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.plan-sidebar-header,
.plan-toolbar,
.soft-section-header,
.dispatch-condition-main,
.dispatch-condition-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plan-sidebar-title,
.plan-item-name,
.soft-section-title {
  font-family: var(--font-display);
  color: var(--text-dark);
}

.plan-sidebar-title {
  font-size: 16px;
  font-weight: 700;
}

.plan-sidebar-subtitle,
.plan-item-bottom,
.soft-section-subtitle,
.dispatch-condition-label,
.dispatch-condition-order,
.managed-city-pill {
  color: var(--text-soft);
  font-size: 12px;
}

.managed-city-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
}

.plan-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.plan-item {
  border: 1px solid var(--line);
  background: var(--panel-strong);
  border-radius: 18px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
}

.plan-item.active {
  border-color: var(--brand);
  background: var(--panel-tint);
  box-shadow: var(--shadow-sm);
}

.plan-item-top,
.plan-item-bottom {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.plan-item-bottom {
  margin-top: 6px;
}

.plan-note-card,
.plan-section,
.plan-toolbar {
  margin-bottom: 0;
}

.plan-toolbar {
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel-strong);
  box-shadow: var(--shadow-sm);
}

.plan-toolbar-meta,
.plan-toolbar-submit {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plan-toolbar-meta {
  min-width: 0;
}

.plan-toolbar-meta strong {
  color: var(--text-dark);
  font-size: 15px;
  line-height: 1.4;
}

.plan-toolbar-eyebrow,
.plan-toolbar-tip {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.5;
}

.plan-toolbar-submit {
  margin-left: auto;
  align-items: flex-end;
}

.plan-save-button {
  min-width: 108px;
  height: 36px;
  padding-inline: 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #8c7cf0, #a98ff7 55%, #e5b5dc);
  box-shadow: var(--shadow-sm);
}

.plan-save-button:hover,
.plan-save-button:focus {
  background: linear-gradient(135deg, #8372ee, #a188f6 55%, #e2add7);
}

.plan-section {
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel-strong);
}

.plan-section-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.plan-section-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--panel-strong);
  border: 1px solid var(--line-strong);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
}

.soft-section-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.soft-section-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
}

.soft-section-subtitle {
  margin: 0;
  line-height: 1.6;
}

.plan-form-grid {
  margin-bottom: 4px;
}

.plan-form-grid-compact {
  margin-bottom: 0;
}

:deep(.plan-form-grid .ant-form-item) {
  margin-bottom: 14px;
}

:deep(.plan-form-grid .ant-form-item-label > label) {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}

:deep(.plan-form-grid .ant-form-item-control-input) {
  min-height: 40px;
}

:deep(.grab-scope-group) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

:deep(.grab-scope-option) {
  margin-inline-end: 0;
}

:deep(.grab-scope-option .ant-radio) {
  display: none;
}

:deep(.grab-scope-option) {
  margin: 0;
}

:deep(.grab-scope-option > span:last-child) {
  width: 100%;
  padding-inline-start: 0;
}

.grab-scope-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 88px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  transition: all 0.2s ease;
}

.grab-scope-card strong {
  color: var(--text-dark);
  font-size: 14px;
}

.grab-scope-card span {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.6;
}

:deep(.grab-scope-option-checked .grab-scope-card),
:deep(.grab-scope-option.ant-radio-wrapper-checked .grab-scope-card) {
  border-color: var(--brand);
  background: var(--panel-tint);
  box-shadow: var(--shadow-sm);
}

:deep(.grab-scope-option:hover .grab-scope-card) {
  border-color: var(--brand);
}

.dispatch-condition-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dispatch-condition-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel-strong);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.dispatch-condition-row.disabled {
  opacity: 0.76;
}

.dispatch-condition-rank {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  background: var(--panel-strong);
  border: 1px solid var(--line-strong);
}

.dispatch-condition-content {
  min-width: 0;
}

.dispatch-condition-title-wrap {
  min-width: 0;
}

.dispatch-condition-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dispatch-condition-meta {
  margin-top: 6px;
  color: var(--text-soft);
  font-size: 12px;
}

.dispatch-condition-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dispatch-condition-body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.dispatch-condition-input {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 960px) {
  .plan-layout {
    grid-template-columns: 1fr;
  }

  .plan-content-top {
    position: static;
    padding-bottom: 0;
    background: transparent;
  }

  .plan-section {
    padding: 16px;
  }

  :deep(.plan-form-grid .ant-col) {
    max-width: 100%;
    flex: 0 0 100%;
  }

  :deep(.grab-scope-group) {
    grid-template-columns: 1fr;
  }

  .plan-toolbar,
  .soft-section-header,
  .dispatch-condition-main,
  .dispatch-condition-body,
  .plan-toolbar-submit {
    flex-direction: column;
    align-items: flex-start;
  }

  .plan-save-button {
    width: 100%;
  }

  .dispatch-condition-row {
    grid-template-columns: 1fr;
  }

  .dispatch-condition-rank {
    width: 40px;
    height: 40px;
  }
}
</style>