优化tabs效果，更新ui库

longjiahui · Mar 1, 2023 · cb81c4a · cb81c4a
1 parent 91057eb
commit cb81c4a
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 59 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@anfo/huiconsole-web-sdk": "^0.0.0",
-    "@anfo/ui": "^1.1.7",
+    "@anfo/ui": "^1.1.9",
     "@ant-design/icons-vue": "^6.1.0",
     "ant-design-vue": "^3.2.15",
     "axios": "^1.3.2",

diff --git a/ui/src/main.js b/ui/src/main.js
@@ -9,4 +9,12 @@ app.use(router)
 import plugins from '@/scripts/plugins'
 app.use(plugins)
 
-app.mount('#app')
+app.mount('#app')
+
+import { fileAPI } from '@/scripts/api'
+import { mutations } from '@/store'
+
+// fetch huiconsoleConfig
+fileAPI['huiconsole.config.json']().then(data=>{
+    mutations.setHuiConsoleConfig(data)  
+})
diff --git a/ui/src/store.js b/ui/src/store.js
@@ -43,11 +43,6 @@ export const mutations = {
     }
 }
 
-// fetch huiconsoleConfig
-fileAPI['huiconsole.config.json']().then(data=>{
-    mutations.setHuiConsoleConfig(data)  
-})
-
 export const getters = reactive({
     isLoading: computed(()=>state.loadingCounter > 0),
     myInfo: utils.createAsyncComputed(()=>state.token, async ()=>{

diff --git a/ui/src/views/Layout.vue b/ui/src/views/Layout.vue
@@ -104,17 +104,15 @@
             </template>
             <template #tabs="{ tabs, currentTabID, setContext}">
                 <div class="main-tabs card h h-s p-s align-stretch">
-                        <div class="h h-s" v-if="tabs.length !== 1">
+                    <transition name="anfo-fade" mode="out-in">
+                        <div class="f-1 h h-s" v-if="tabs.length > 0">
                             <transition name="anfo-fade" mode="out-in">
                                 <div v-if="tabs.length > 1">
                                     <a-tooltip placement="left" title="清除全部标签">
                                         <DeleteOutlined class="clickable" @click="setContext({tabs: []})" />
                                     </a-tooltip>
                                 </div>
-                                <div v-else-if="!tabs?.length > 0" class="p-h-s">没有打开的标签页</div>
                             </transition>
-                        </div>
-                        <div class="f-1">
                             <anfo-orderable-container channel="tabs" :datas="tabs"
                                 @update:datas="val=>{
                                     val.forEach(i=>i.component = tabs.find(t=>t.id === i.id)?.component)
@@ -130,12 +128,16 @@
                                         <div class="f-1" style="word-break: break-all;">
                                             {{ t.menu?.name }}
                                         </div>
-                                        <div class="tab-delete" @click.stop="tabs.splice(i, 1)"><CloseOutlined/></div>
+                                        <div class="tab-delete" @click.stop="handleDeleteTab(tabs, i, setContext)"><CloseOutlined/></div>
                                     </div>
                                 </template>
                             </anfo-orderable-container>
                         </div>
-                    </div>
+                        <div v-else class="h h-s">
+                            <div class="p-h-s">没有打开的标签页</div>
+                        </div>
+                    </transition>
+                </div>
             </template>
             <template #content="{ currentTab, iframeTabs, componentTabs, currentTabID, menus }">
                 <div class="main-pages f-1">
@@ -150,24 +152,19 @@
                             v-show="currentTabID === t.id" :class="['size-full overflow-hidden', t?.menu?.isTransparent ? '':'card']">
                             <component :is="t.component"></component>
                         </div>
-                        <!-- <transition name="anfo-fade" appear>
-                            <div v-if="!currentTab"
-                                style="background: linear-gradient(45deg, whitesmoke, darken(whitesmoke, 5%))!important;"
-                                class="card size-full v v-m align-center justify-center">
-                                <h1 class="title">HUI CONSOLE</h1>
-                                <p class="desc">[email protected]</p>
-                                <div>欢迎使用 <span class="title">HUI CONSOLE</span></div>
-                                <div @click="openTab(configMenusMenuItem)" class="clickable" v-if="!(menus?.length > 0)">
-                                    还没有菜单数据，点击创建
-                                </div>
-                            </div>
-                        </transition> -->
                     </div>
             </template>
         </hui-console>
     </div>
 </template>
 
+<script setup>
+function handleDeleteTab(tabs, i, setContext){
+    tabs.splice(i, 1)
+    setContext({tabs})
+}
+</script>
+
 <style lang="scss" scoped>
 $navHeight: 48px;
 .sidebar{

diff --git a/ui/src/views/LayoutLegacy.vue b/ui/src/views/LayoutLegacy.vue
@@ -95,37 +95,39 @@
             </template>
             <template #tabs="{ tabs, currentTabID, setContext }">
                 <div class="main-tabs h h-s align-stretch">
-                    <div class="h h-s p-l-s" v-if="tabs?.length !== 1">
-                        <transition name="anfo-fade" mode="out-in">
-                            <div v-if="tabs?.length > 1">
-                                <a-tooltip placement="left" title="清除全部标签">
-                                    <DeleteOutlined class="clickable" @click="setContext({tabs: []})" />
-                                </a-tooltip>
-                            </div>
-                            <div v-else-if="!tabs?.length > 0" class="p-h-s">没有打开的标签页</div>
-                        </transition>
-                    </div>
-                    <div class="f-1">
-                        <anfo-orderable-container channel="tabs" :datas="tabs"
-                            @update:datas="val=>{
-                                val.forEach(i=>i.component = tabs.find(t=>t.id === i.id)?.component)
-                                tabs = val
-                            }"
-                            :data-key="d=>d.id" isHorizontal>
-                            <template #="{ data: t, i }">
-                                <div @click="setContext({currentTabID: t.id})"
-                                style="height: 100%"
-                                    :class="['main-tab p-h-m h h-s', t.id === currentTabID ? 'is-current':'']">
-                                    <!-- {{ t.id }} -->
-                                    <div v-if="t.menu?.icon"><component :is="t.menu?.icon"></component></div>
-                                    <div class="f-1" style="word-break: break-all;">
-                                        {{ t.menu?.name }}
-                                    </div>
-                                    <div class="tab-delete" @click.stop="tabs.splice(i, 1)"><CloseOutlined/></div>
+                    <transition name="anfo-fade" mode="out-in">
+                        <div class="f-1 h" v-if="tabs.length > 0">
+                            <transition name="anfo-fade" mode="out-in">
+                                <div class="p-h-s" v-if="tabs.length > 1">
+                                    <a-tooltip placement="left" title="清除全部标签">
+                                        <DeleteOutlined class="clickable" @click="setContext({tabs: []})" />
+                                    </a-tooltip>
                                 </div>
-                            </template>
-                        </anfo-orderable-container>
-                    </div>
+                            </transition>
+                            <anfo-orderable-container channel="tabs" :datas="tabs"
+                                @update:datas="val=>{
+                                    val.forEach(i=>i.component = tabs.find(t=>t.id === i.id)?.component)
+                                    tabs = val
+                                }"
+                                :data-key="d=>d.id" isHorizontal>
+                                <template #="{ data: t, i }">
+                                    <div @click="setContext({currentTabID: t.id})"
+                                    style="height: 100%"
+                                        :class="['main-tab p-h-s h h-s', t.id === currentTabID ? 'is-current':'']">
+                                        <!-- {{ t.id }} -->
+                                        <div v-if="t.menu?.icon"><component :is="t.menu?.icon"></component></div>
+                                        <div class="f-1" style="word-break: break-all;">
+                                            {{ t.menu?.name }}
+                                        </div>
+                                        <div class="tab-delete" @click.stop="handleDeleteTab(tabs, i, setContext)"><CloseOutlined/></div>
+                                    </div>
+                                </template>
+                            </anfo-orderable-container>
+                        </div>
+                        <div v-else class="h h-s">
+                            <div class="p-h-s">没有打开的标签页</div>
+                        </div>
+                    </transition>
                 </div>
             </template>
             <template #content="{ currentTab, iframeTabs, componentTabs, currentTabID, menus }">
@@ -158,6 +160,13 @@
     </div>
 </template>
 
+<script setup>
+function handleDeleteTab(tabs, i, setContext){
+    tabs.splice(i, 1)
+    setContext({tabs})
+}
+</script>
+
 <style lang="scss" scoped>
 $primaryColor: #2d60b1;
 .page-layout{