-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request !177 from 码匠君/develop
- Loading branch information
Showing
31 changed files
with
1,323 additions
and
1,245 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,7 @@ | ||
| name: CI Create Release | ||
|
|
||
| on: | ||
| workflow_dispatch: | ||
| push: | ||
| # Sequence of patterns matched against refs/tags | ||
| tags: | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
185 changes: 87 additions & 98 deletions
185
packages/ui/src/components/layouts/common/header/HAppTabsView.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,121 +1,110 @@ | ||
| <script setup lang="ts"> | ||
| import { defineOptions, watch } from 'vue'; | ||
| import { useRoute } from 'vue-router'; | ||
| import { useTabsStore } from '/@/stores'; | ||
| defineOptions({ name: 'HAppTabsView' }); | ||
| const route = useRoute(); | ||
| const store = useTabsStore(); | ||
| watch( | ||
| () => route.path, | ||
| () => { | ||
| store.smartTab(route); | ||
| }, | ||
| { immediate: true } | ||
| ); | ||
| </script> | ||
|
|
||
| <template> | ||
| <q-toolbar> | ||
| <q-tabs shrink inline-label outside-arrows mobile-arrows dense active-color="primary"> | ||
| <q-route-tab | ||
| v-for="(tab, i) in tabs" | ||
| :key="i" | ||
| class="tab-tabview" | ||
| v-for="(tab, i) in store.tabs" | ||
| :tabindex="i" | ||
| :name="(tab.name as string)" | ||
| :label="(tab.meta.title as string)" | ||
| :icon="(tab.meta.icon as string)" | ||
| :to="tab.path"> | ||
| <q-icon v-if="isNotLastTab(i)" size="xs" name="mdi-close-circle" class="q-ml-md" @click="onCloseTab(tab)" /> | ||
| <q-icon v-else size="xs" name="mdi-lock-outline" class="q-ml-md" /> | ||
| :to="tab.path" | ||
| :key="tab.path" | ||
| :name="tab.path"> | ||
| <template v-slot> | ||
| <q-icon size="1.1rem" v-if="tab.meta.icon" :name="tab.meta.icon as string" /> | ||
| <span class="tab-label">{{ tab.meta['title'] }}</span> | ||
| <q-icon v-if="store.isLocked(tab)" name="mdi-lock-outline" /> | ||
| <q-icon v-else name="close" class="tab-close" @click.prevent.stop="store.closeTab(tab)" /> | ||
| <q-menu touch-position context-menu> | ||
| <q-list v-if="i === store.activatedTabIndex" dense bordered separator> | ||
| <q-item :disable="store.disableRefreshCurrentTab" clickable v-close-popup v-ripple> | ||
| <q-item-section @click="store.refreshCurrent()">刷新当前</q-item-section> | ||
| </q-item> | ||
| <q-item clickable v-close-popup v-ripple> | ||
| <q-item-section @click="store.closeOtherTabs()">关闭其它</q-item-section> | ||
| </q-item> | ||
| <q-item :disable="store.disableCloseLeftTabs" clickable v-close-popup v-ripple> | ||
| <q-item-section @click="store.closeLeftTabs()">关闭左侧</q-item-section> | ||
| </q-item> | ||
| <q-item :disable="store.disableCloseRightTabs" clickable v-close-popup v-ripple> | ||
| <q-item-section @click="store.closeRightTabs()">关闭右侧</q-item-section> | ||
| </q-item> | ||
| </q-list> | ||
| <q-list dense bordered separator> | ||
| <q-item clickable v-close-popup v-ripple> | ||
| <q-item-section @click="store.closeAllTabs()">关闭所有</q-item-section> | ||
| </q-item> | ||
| </q-list> | ||
| </q-menu> | ||
| </template> | ||
| </q-route-tab> | ||
| </q-tabs> | ||
| <q-space /> | ||
| <q-btn-dropdown size="sm" color="red"> | ||
| <q-list> | ||
| <h-list-item :disable="disableRefreshCurrentTab" label="刷新当前" icon="mdi-refresh" @click="onRefresh"></h-list-item> | ||
| <h-list-item | ||
| label="关闭当前" | ||
| :disable="disableCloseCurrentTab" | ||
| icon="mdi-close" | ||
| @click="onCloseCurrentTab()"></h-list-item> | ||
| <h-list-item | ||
| label="关闭其它" | ||
| icon="mdi-format-horizontal-align-center" | ||
| @click="onCloseOtherTabs()"></h-list-item> | ||
| <h-list-item | ||
| <HListItem | ||
| label="刷新当前" | ||
| :disable="store.disableRefreshCurrentTab" | ||
| icon="mdi-refresh" | ||
| @click="store.refreshCurrent()" /> | ||
| <HListItem label="关闭其它" icon="mdi-format-horizontal-align-center" @click="store.closeOtherTabs()" /> | ||
| <HListItem | ||
| label="关闭左侧" | ||
| :disable="disableCloseLeftTabs" | ||
| :disable="store.disableCloseLeftTabs" | ||
| icon="mdi-format-horizontal-align-right" | ||
| @click="onCloseLeftTabs()"></h-list-item> | ||
| <h-list-item | ||
| @click="store.closeLeftTabs()" /> | ||
| <HListItem | ||
| label="关闭右侧" | ||
| :disable="disableCloseRightTabs" | ||
| :disable="store.disableCloseRightTabs" | ||
| icon="mdi-format-horizontal-align-left" | ||
| @click="onCloseRightTabs()"></h-list-item> | ||
| @click="store.closeRightTabs()" /> | ||
| <HListItem label="关闭所有" :disable="false" icon="mdi-broom" @click="store.closeAllTabs()" /> | ||
| </q-list> | ||
| </q-btn-dropdown> | ||
| </q-toolbar> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent, watch, inject, computed } from 'vue'; | ||
| import { useRoute } from 'vue-router'; | ||
| import { storeToRefs } from 'pinia'; | ||
| import type { Tab } from '/@/lib/declarations'; | ||
| import { useTabsStore } from '/@/stores'; | ||
| import { refreshTabInjectionKey } from '/@/lib/symbol'; | ||
| <style lang="scss" scoped> | ||
| .tab-tabview { | ||
| padding: 0 8px; | ||
| } | ||
| export default defineComponent({ | ||
| name: 'HAppTabsView', | ||
| .tab-label { | ||
| margin: 0 7px; | ||
| white-space: nowrap; | ||
| max-width: 150px; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
| setup(props) { | ||
| const route = useRoute(); | ||
| .tab-close { | ||
| display: inline-flex; | ||
| font-size: 20px; | ||
| border-radius: 4px; | ||
| padding: 2px; | ||
| opacity: 0.5; | ||
| transition: all 0.3s; | ||
| const store = useTabsStore(); | ||
| const { | ||
| tabs, | ||
| isNotLastTab, | ||
| disableCloseCurrentTab, | ||
| disableCloseRightTabs, | ||
| disableCloseLeftTabs, | ||
| disableRefreshCurrentTab | ||
| } = storeToRefs(store); | ||
| const { closeTab, smartTab, closeCurrentTab, closeOtherTabs, closeLeftTabs, closeRightTabs } = store; | ||
| const refreshTab = inject<Function>(refreshTabInjectionKey); | ||
| watch( | ||
| () => route.path, | ||
| () => { | ||
| smartTab(route); | ||
| }, | ||
| { immediate: true } | ||
| ); | ||
| const onCloseTab = (tab: Tab) => { | ||
| closeTab(tab); | ||
| }; | ||
| const onCloseCurrentTab = () => { | ||
| closeCurrentTab(); | ||
| }; | ||
| const onCloseOtherTabs = () => { | ||
| closeOtherTabs(); | ||
| }; | ||
| const onCloseLeftTabs = () => { | ||
| closeLeftTabs(); | ||
| }; | ||
| const onCloseRightTabs = () => { | ||
| closeRightTabs(); | ||
| }; | ||
| const onRefresh = () => { | ||
| refreshTab && refreshTab(); | ||
| }; | ||
| return { | ||
| onCloseTab, | ||
| onCloseCurrentTab, | ||
| onCloseOtherTabs, | ||
| onCloseLeftTabs, | ||
| onCloseRightTabs, | ||
| onRefresh, | ||
| tabs, | ||
| isNotLastTab, | ||
| disableCloseCurrentTab, | ||
| disableCloseRightTabs, | ||
| disableCloseLeftTabs, | ||
| disableRefreshCurrentTab | ||
| }; | ||
| &:hover { | ||
| opacity: 3; | ||
| background-color: #b7bcd1; | ||
| } | ||
| }); | ||
| </script> | ||
| } | ||
| </style> |
Oops, something went wrong.