Merge remote-tracking branch 'origin/dev_pro2.0' into dev_pro2.0

云

4 小时以前 5367b3b4d92588c4e76728e6bd4ad6aae0cbb967

 src/views/mes/workbench/components/WorkstationPanel.vue

@@ -7,10 +7,14 @@

defineProps<{
  workstation?: MesMdWorkstationApi.Workstation;
  /** 是否已上工 */
  isClockIn?: boolean;
}>();

const emit = defineEmits<{
  change: [];
  'clock-in': [];
  'clock-out': [];
}>();
</script>

@@ -61,6 +65,32 @@
        <span class="ws-panel__meta-label">地点</span>
        <span class="ws-panel__meta-value">{{ workstation.address ?? '—' }}</span>
      </div>
    </div>

    <!-- 上工/下工 -->
    <div v-if="workstation" class="ws-panel__clock">
      <div v-if="isClockIn" class="ws-panel__clock-status">
        <IconifyIcon icon="lucide:check-circle" class="ws-panel__clock-icon" />
        <span>已上工</span>
      </div>
      <button
        v-if="!isClockIn"
        type="button"
        class="ws-panel__clock-btn ws-panel__clock-btn--in"
        @click="emit('clock-in')"
      >
        <IconifyIcon class="ws-panel__clock-btn-icon" icon="lucide:play" />
        上工
      </button>
      <button
        v-else
        type="button"
        class="ws-panel__clock-btn ws-panel__clock-btn--out"
        @click="emit('clock-out')"
      >
        <IconifyIcon class="ws-panel__clock-btn-icon" icon="lucide:pause" />
        下工
      </button>
    </div>
  </section>
</template>
@@ -262,4 +292,65 @@
  text-overflow: ellipsis;
  white-space: nowrap;
}

// --- 上工/下工 ---
.ws-panel__clock {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ws-panel__clock-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #a5d6a7;
}

.ws-panel__clock-icon {
  font-size: 18px;
}

.ws-panel__clock-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.ws-panel__clock-btn-icon {
  font-size: 16px;
}

.ws-panel__clock-btn--in {
  background: #4caf50;
  color: #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%);

  &:hover {
    background: #43a047;
  }
}

.ws-panel__clock-btn--out {
  background: rgb(255 255 255 / 18%);
  color: #ffcdd2;
  border: 1px solid rgb(255 255 255 / 28%);

  &:hover {
    background: rgb(255 255 255 / 28%);
  }
}
</style>