wms-vue/src/views/modules/labelSetting/components/HorizontalToolbar.vue

<template>
  <div class="horizontal-toolbar">
    <!-- 最左侧区域：设计工具 -->
    <div class="toolbar-section tools-section">
      <div class="toolbar-item">
        <label class="item-label">设计工具:</label>
        <div class="tools-horizontal">
          <ToolItem
            v-for="tool in tools"
            :key="tool.type"
            :tool="tool"
            :horizontal="true"
            @dragstart="handleDragStart"
          />
        </div>
      </div>
    </div>

    <!-- 中间区域：基本设置 -->
    <div class="toolbar-section middle-section">
      <!-- 标签编号 -->
      <div class="toolbar-item">
        <label class="item-label">标签编号:</label>
        <el-input
          v-model="labelNoValue"
          placeholder="输入标签编号"
          size="small"
          style="width: 120px;"
          @input="$emit('update:labelNo', $event)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import ToolItem from './ToolItem.vue'

export default {
  name: 'HorizontalToolbar',
  components: {
    ToolItem
  },
  props: {
    labelNo: String
  },
  computed: {
    labelNoValue: {
      get() {
        return this.labelNo
      },
      set(value) {
        this.$emit('update:labelNo', value)
      }
    },
    tools() {
      return [
        {
          type: 'text',
          icon: 'el-icon-document',
          label: '文本',
          color: '#409EFF'
        },
        {
          type: 'barcode',
          icon: 'el-icon-tickets',
          label: '条码',
          rotate: true,
          color: '#67C23A'
        },
        {
          type: 'qrcode',
          icon: 'el-icon-menu',
          label: '二维码',
          color: '#E6A23C'
        },
        {
          type: 'onecode',
          icon: 'el-icon-more',
          label: '一维码',
          color: '#F56C6C'
        },
        {
          type: 'pic',
          icon: 'el-icon-picture',
          label: '图片',
          color: '#909399'
        },
        {
          type: 'hLine',
          icon: 'el-icon-minus',
          label: '横线',
          color: '#606266'
        },
        {
          type: 'vLine',
          icon: 'el-icon-minus',
          label: '竖线',
          rotate: true,
          color: '#909399'
        },
        {
          type: 'serialNumber',
          icon: 'el-icon-setting',
          label: '流水号',
          color: '#909399'
        }
      ]
    }
  },
  methods: {
    handleDragStart(tool) {
      this.$emit('drag-start', tool)
    }
  }
}
</script>

<style scoped>
.horizontal-toolbar {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  gap: 30px;
  min-height: 60px;
  flex-wrap: wrap;
}

.toolbar-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.tools-section {
  flex: 0 0 auto;
  border-right: 1px solid #e4e7ed;
  padding-right: 20px;
  margin-right: 1px;
}

.middle-section {
  flex: 1;
  justify-content: flex-start;
}

.right-section {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.toolbar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.item-label {
  font-size: 13px;
  color: #606266;
  font-weight: 500;
  min-width: fit-content;
}



.tools-horizontal {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .horizontal-toolbar {
    gap: 20px;
    padding: 10px 15px;
  }

  .toolbar-section {
    gap: 15px;
  }


}

@media (max-width: 1024px) {
  .horizontal-toolbar {
    flex-wrap: wrap;
    gap: 15px;
    padding: 8px 12px;
  }

  .toolbar-section {
    gap: 12px;
  }

  .right-section {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .horizontal-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
  }

  .toolbar-section {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .toolbar-item {
    flex: 1;
    min-width: 200px;
  }
}
</style>