下拉按钮

packages/webview/src/components/CustomButton/ActionButton.vue

@@ -17,6 +17,7 @@
       <div v-if="isSVG" v-html="img" class="img"></div>
       <img v-else :src="img" alt="" class="img">
     </template>
+    <span v-if="item.dropItem" class="text">{{ item.text }}</span>
   </div>
 </template>
 

packages/webview/src/components/CustomButton/CustomButton.vue

@@ -21,5 +21,8 @@ const { type } = item
     width: 20px;
     height: 20px;
   }
+  .text {
+    margin-left: 8px;
+  }
 }
 </style>

packages/webview/src/components/CustomButton/StatefulButton.vue

@@ -19,6 +19,7 @@
       <img v-else :src="img" alt="" class="img">
     </template>
     {{ content }}
+    <span v-if="item.dropItem" class="text">{{ item.text }}</span>
   </div>
 </template>
 

packages/webview/src/components/Dropdown/Dropdown.vue

@@ -19,13 +19,14 @@
         <div v-if="item.type === 'downloadButton' && !item.hidden" :data-element="item.dataElement" class="drop-item" @click="downloadFile"><DownloadButton />{{ $t('header.download') }}</div>
         <div v-if="item.type === 'flattenButton' && !item.hidden" :data-element="item.dataElement" class="drop-item" @click="handleFlatten"><FlattenButton />{{ $t('header.flatten') }}</div>
         <div v-if="item.type === 'printButton' && !item.hidden" :data-element="item.dataElement" class="drop-item" @click="handlePrint"><PrintButton />{{ $t('header.print') }}</div>
+        <div v-if="item.type === 'languageButton' && !item.hidden" :data-element="item.dataElement" class="drop-item" @click="handleLanguage">
+          <Button :title="$t('header.language')"><Language /></Button>
+          {{ $t('header.language') }}
+        </div>
+        <div v-if="item.name === 'customButton' && item.dropItem && !item.hidden" :data-element="item.dataElement" class="drop-item">
+          <CustomButton :item="item" />
+        </div>
       </template>
-      <div class="drop-item" @click="handleLanguage">
-        <Button :title="$t('header.language')">
-          <Language />
-        </Button>
-        {{ $t('header.language') }}
-      </div>
     </div>
   </n-popover>
 </template>
@@ -98,3 +99,10 @@
     useViewer.openElement('languageDialog')
   }
 </script>
+
+<style>
+.drop-item .custom-button {
+  width: 100%;
+  justify-content: flex-start;
+}
+</style>

packages/webview/src/components/HeaderItems/HeaderItems.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="toolMode !== 'compare'" class="header-items">
     <template v-for="(item, index) in items" :key="`${item.type}-${item.dataElement || index}`">
-      <CustomButton v-if="item.name === 'customButton' && !item.hidden" :item="item" />
+      <CustomButton v-if="item.name === 'customButton' && !item.hidden && !item.dropItem" :item="item" />
       <ToggleElementButton v-else-if="item.type === 'toggleElementButton' && !item.hidden" :item="item" :class="{ disabled: !load }" :data-element="item.dataElement" />
       <ToolButton v-else-if="item.type === 'toolButton' && !item.hidden" :item="item" :data-element="item.dataElement" />
       <FullScreenButton v-else-if="item.type === 'fullScreenButton' && !item.hidden" :item="item" :class="{ disabled: !load }" :data-element="item.dataElement" />
@@ -57,7 +57,7 @@
 
     <div class="right-container">
       <template v-for="(item, index) in rightItems" :key="`${item.type}-${item.dataElement || index}`">
-        <CustomButton v-if="item.name === 'customButton' && !item.hidden" :item="item" :data-element="item.dataElement" />
+        <CustomButton v-if="item.name === 'customButton' && !item.hidden && !item.dropItem" :item="item" :data-element="item.dataElement" />
         <SearchButton v-else-if="item.type === 'searchButton' && !item.hidden" :item="item" :data-element="item.dataElement" />
         <ToggleRightPanelButton v-else-if="item.type === 'toggleRightPanelButton' && !item.hidden" :item="item" :disabled="!load" :data-element="item.dataElement" />
         <OpenFileButton v-else-if="item.type === 'openFileButton' && !item.hidden" :item="item" :data-element="item.dataElement" />

packages/webview/src/stores/modules/viewer.js

@@ -165,6 +165,12 @@ export const useViewerStore = defineStore({
         dataElement: 'printButton',
         element: 'printButton',
         title: 'Print'
+      },
+      {
+        type: 'languageButton',
+        dataElement: 'languageButton',
+        element: 'languageButton',
+        title: 'Language'
       }
     ],
     toolMode: 'view',