big-model-web/src/views/process/instance/component/buttons/index.vue

<template>
  <div
    class="__hover flex h-6 items-center justify-center gap-1 rounded-sm border-1 px-2 text-xs font-normal"
    :class="`${styleCpt.borderColor} ${styleCpt.bgColor} ${styleCpt.textColor}`"
  >
    <SvgIcon v-if="icon" :name="icon" :color="styleCpt.textColor" size="10" />
    {{ title }}
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'workflowButton',
})
import { computed, reactive } from 'vue'

const props = defineProps({
  icon: {},
  title: {},
  type: { default: 'main' },
})
const state: any = reactive({})
const styleCpt = computed(() => {
  const obj = {
    borderColor: '',
    bgColor: '',
    textColor: '',
  }
  switch (props.type) {
    case 'main':
      {
        obj.borderColor = 'border-[var(--czr-main-color)]'
        obj.bgColor = 'bg-[var(--czr-main-color)]'
        obj.textColor = 'text-[#ffffff]'
      }
      break
    case 'error':
      {
        obj.borderColor = 'border-[var(--czr-error-color)]'
        obj.bgColor = 'bg-[var(--czr-error-color)]/10'
        obj.textColor = 'text-[var(--czr-error-color)]'
      }
      break
  }
  return obj
})
</script>

<style lang="scss" scoped></style>