riku
2025-08-13 bf42ef43fccdf3d3486eec84ad4073b0c7650aba
src/components/ToolBar.vue
@@ -1,17 +1,30 @@
<template>
  <div class="layout" >
  <div class="layout">
    <el-row v-if="title">
      <el-col :span=" 16 " class="title">{{ title }}</el-col>
      <el-col :span=" 8 ">
      <el-col :span="16" class="title">{{ title }}</el-col>
      <el-col :span="8">
        <el-row justify="end" class="btn-group">
          <el-button v-for="(b, i) in buttons" :key=" i " :type=" b.color ? b.color : 'primary' " size="small">{{ b.name
          }}</el-button>
          <el-button
            v-for="(b, i) in buttons"
            :key="i"
            :type="b.color ? b.color : 'primary'"
            size="small"
            plain
            @click="b.click"
            >{{ b.name }}</el-button
          >
        </el-row>
      </el-col>
    </el-row>
    <el-row class="tag-group" v-if="title">
      <el-space>
        <el-tag v-for="(d, i) in descriptions" :key=" i " type="info" size="small">{{ d.name + ": " + d.value }}</el-tag>
        <el-tag
          v-for="(d, i) in descriptions"
          :key="i"
          :type="d.type"
          size="small"
          >{{ d.name + ': ' + d.value }}</el-tag
        >
      </el-space>
    </el-row>
  </div>
@@ -27,28 +40,31 @@
      type: Array,
      default: () => [
        {
          name: "",
          value: "",
        },
      ],
          name: '',
          value: ''
        }
      ]
    },
    buttons: {
      type: Array,
      default: () => [
        {
          name: "",
          color: "primary",
        },
      ],
    },
  },
          name: '',
          color: 'primary',
          click: () => {}
        }
      ]
    }
  }
};
</script>
<style scoped>
.layout {
  /* background-color: beige; */
  height: var(--height-toolbar);
  /* border-bottom: 1px solid var(--el-color-info-light-7); */
  border-bottom: 1px solid var(--el-color-info-light-7);
  box-shadow: 6px 4px 4px rgba(0, 0, 0, 0.12);
  margin-bottom: 4px;
}
.cell-item {