工具栏

• @\components\myAside.vue(template)

<-template-> 
<-div v-if="asideshow.segtool" style="padding: 15px;border-radius: 5px;animation: hideToShow 1s ease-in-out"
         class=".tool-container shadow-box background-opacity"->  
        <-div style="font-family: 'Microsoft YaHei';margin-bottom: 10px;" @click="showdiaWindows()"->  Tools <-/div->

            <-el-card
              v-for="card in cards"
              :key="card.id"
              class="menu-item"
              :class="{ 'active': isOpen(card.id) }"
              @click="toggleDropdown(card.id)"
              :body-style="{ padding: '8px' }"
            ->
              <-div class="menu-title" :class="{ 'selected-title': openedMenus === card.id }"->
                <-img :src="card.icon" class="menu-icon" :alt="`Icon ${card.id}`" /-> {{ card.title }}
              <-/div->
              <-div class="small-blue-font" v-if="isOpen(card.id)"->{{card.description}}<-/div->
              <-div class="button-container" v-if="isOpen(card.id)"->
                <-el-button
                  v-for="button in card.buttons"
                  :key="button.action"
                  class="button-title"
                  @click.prevent="executeAction(button.action)"
                ->
                  {{ button.label }}
                <-/el-button->

              <-FileUpload v-if="isOpen(1)" /->
              <-ShowFile v-else-if="isOpen(2)" /->


              <-/div->
            <-/el-card->
    <-/div->  
<-/template->

• ```javascript
  <-script setup->
  const cards = [
  {
  id: 1,
  title: ‘Upload Image’,
  icon: SunflowerIcon, // Use the imported image
  description: “Please upload CT or MR NIfTI images.”,
  buttons: []
  },
  {
  id: 2,
  title: ‘Files’,
  icon: YitaoIcon, // Use the imported image
  description: “Please select a NIfTI image for slicing.”,
  buttons: []
  }
  ];

const toggleDropdown = (menuId) =-> {
if (openedMenus.value !== menuId) {
openedMenus.value = menuId;
}
};

const isOpen = (menuId) =-> openedMenus.value === menuId;

const executeAction = (actionName) =-> {
if(actionName === ‘Action1_1’){

}
activeButton.value = actionName;
console.log(${actionName} 执行了！);
};

<-/script->

- `@\components\myAside.vue(style)`

```css
<-style scpoe->
  .tool-container {  
      background: linear-gradient(-45deg, #cccccc, #d9d9d9, #b3b3b3, #e6e6e6, #bfbfbf);  
      /*background: var(--background);*/
      background-size: 400% 400%;  
      animation: gradientBG 10s ease infinite;  
      display: flex;  
      flex-direction: column;  
      align-items: center;  
      border-radius: 10px;  
      position: relative;  
      overflow: hidden;  
  }

    .shadow-box {
        box-shadow: 0 1px 20px -6px var(--borderColor);
        transition: all 0.3s ease;
    }


    .shadow-box:hover {
        box-shadow: 0 5px 10px 5px var(--borderHoverColor);
    }

  .menu-item {  
      margin-bottom: 5px;  
      border: 2px solid #d3d3d3; 
      border-radius: 10px;  
      transition: border-color 0.3s; 
      box-shadow: none;
      padding: 0px; 
  }  

  .menu-title {   
      background-color: white;  
      transition: background-color 0.3s;
      font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
      font-weight: bold;  
  }

  .selected-title {
    color: blue; 
  }

  .active {  
    border: 2px solid blue; 
  }  

  .button-container {  
      padding: 5px;
      display: flex;  
      flex-direction: column; /* 使按钮按列排列 */  
      align-items: flex-start; /* 可选：左对齐 */   
  }  

  .button-container .el-button {
    margin-left: 0; 
  }

  .button-title {  
      margin-top: 5px;
      width: 100%;
      font-family: Arial, sans-serif;  
      background-color: #EDEEF1;  
      font-weight: normal;  
  }  

  .small-blue-font {
    margin-top: 3px;
    margin-bottom: 3px;
    color: blue; /* 字体颜色 */
    font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
    font-size: 12px; /* 较小的字号 */
    display: flex;
    justify-content: center;
    align-items: center;
  }


<-/style->