zant-admin 1.0.1 → 2.0.0

package/src/components/MainPage.vue

@@ -17,32 +17,10 @@
         }"
       >
         <div class="logo">
-          <span
-            v-if="!collapsed"
-            :class="
-              formConfig.themeClass == 'light'
-                ? 'text-color-primary'
-                : 'text-color-white '
-            "
-          >
-            <div class="flex-row">
-              <img
-                src="@/assets/imgs/logo.png"
-                alt=""
-                width="30px"
-                class="margin-right-10"
-              />{{ config.projectName }}
-            </div>
+          <span v-if="!collapsed" :class="formConfig.themeClass == 'light' ? 'text-color-primary' : 'text-color-white '">
+            <div class="flex-row"><img src="@/assets/imgs/logo.png" alt="" width="30px" class="margin-right-10" />{{ config.projectName }}</div>
           </span>
-          <span
-            v-else
-            :class="
-              formConfig.themeClass == 'light'
-                ? 'text-color-primary'
-                : 'text-color-white '
-            "
-            ><img src="@/assets/imgs/logo.png" alt="" width="30px"
-          /></span>
+          <span v-else :class="formConfig.themeClass == 'light' ? 'text-color-primary' : 'text-color-white '"><img src="@/assets/imgs/logo.png" alt="" width="30px" /></span>
         </div>
         <a-menu
           v-model:openKeys="openmenuKey"
@@ -66,22 +44,13 @@
         >
           <div class="flex-row">
             <div class="flex-item text-align-left">
-              <menu-unfold-outlined
-                v-if="collapsed"
-                class="trigger"
-                @click="() => (collapsed = !collapsed)"
-              />
-              <menu-fold-outlined
-                v-else
-                class="trigger"
-                @click="() => (collapsed = !collapsed)"
-              />
+              <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
+              <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
               <a class="text-color-black" @click="reload">
-                <UndoOutlined :style="{ fontSize: '16px' }" />
+                <UndoOutlined :style="{ fontSize: '18px' }" />
               </a>
               <!-- 面包屑导航 -->
               <a-breadcrumb class="breadcrumb" v-if="breadcrumbItems.length > 0">
-
                 <a-breadcrumb-item v-for="item in breadcrumbItems" :key="item.key">
                   {{ item.title }}
                 </a-breadcrumb-item>
@@ -91,16 +60,25 @@
               <a-space :size="18">
                 <a-dropdown>
                   <a class="text-color-black" @click.prevent>
-                    <a-avatar
-                      :size="35"
-                      :style="{
-                        backgroundColor: '#1677ff',
-                        verticalAlign: 'middle',
-                        margin: '0 0 5px 0',
-                      }"
-                    >
-                      {{ username }}
-                    </a-avatar>
+                    <div class="flex-row">
+                      <div class="flex-item">
+                        <a-avatar
+                          :size="35"
+                          :style="{
+                            backgroundColor: '#1677ff',
+                            verticalAlign: 'middle',
+                            margin: '0 0 5px 0',
+                          }"
+                        >
+                          {{ username?.charAt(0) }}
+                        </a-avatar>
+                      </div>
+
+                      <div class="flex-item margin-left-10 text-align-left">
+                        <div class="username">{{ username }}</div>
+                        <div class="userphone">{{ mobile }}</div>
+                      </div>
+                    </div>
                   </a>
                   <template #overlay>
                     <a-menu @click="avatardropdownonClick">
@@ -109,11 +87,7 @@
                     </a-menu>
                   </template>
                 </a-dropdown>
-                <a
-                  class="text-color-black"
-                  @click.prevent
-                  @click="toggleFullScreen"
-                >
+                <a class="text-color-black" @click.prevent @click="toggleFullScreen">
                   <a-tooltip :title="isFullScreen ? '退出全屏' : '进入全屏'">
                     <FullscreenOutlined v-if="isFullScreen" />
                     <FullscreenExitOutlined v-else />
@@ -126,80 +100,51 @@
                   <template #overlay>
                     <a-menu @click="dropdownonLanguageClick">
                       <a-menu-item key="zhCN">
-                        <span
-                          :class="
-                            config.dayjsLocale == 'zh-cn'
-                              ? 'text-color-primary'
-                              : ''
-                          "
-                          >简体中文</span
-                        >
+                        <span :class="config.dayjsLocale == 'zh-cn' ? 'text-color-primary' : ''">简体中文</span>
                       </a-menu-item>
                       <a-menu-item key="enUS">
-                        <span
-                          :class="
-                            config.dayjsLocale == 'en'
-                              ? 'text-color-primary'
-                              : ''
-                          "
-                          >English</span
-                        >
+                        <span :class="config.dayjsLocale == 'en' ? 'text-color-primary' : ''">English</span>
                       </a-menu-item>
                     </a-menu>
                   </template>
                 </a-dropdown>
                 <a class="text-color-black" @click.prevent @click="showDrawer">
-                  <MoreOutlined />
+                  <SettingOutlined />
                 </a>
               </a-space>
             </div>
           </div>
         </a-layout-header>
         <!-- 选项卡组件 -->
-        <div class="zc-layout-content-tabs">
-          <div
-            class="zc-layout-content-tabs-left"
-            @wheel.prevent="onWheelScroll"
-            ref="scrollContainer"
-          >
-            <a-tag
-              v-for="pane in panes"
-              :key="pane.key"
-              :class="selectmenuKey[0] == pane.key ? 'tag-select' : 'tag'"
-              :closable="pane.closable"
-              :bordered="false"
-              @close="tagdelete(pane)"
-              @click="tagchange(pane)"
-            >
-              {{ pane.title }}
-            </a-tag>
-          </div>
-          <div class="zc-layout-content-tabs-right">
-            <a-dropdown class="zc-layout-content-tabs-right-dropdown">
-              <a class="ant-dropdown-link" @click.prevent>
-                <DownOutlined />
-              </a>
-              <template #overlay>
-                <a-menu @click="dropdownonClick">
-                  <a-menu-item key="1">
-                    <ArrowLeftOutlined /> 关闭左侧
-                  </a-menu-item>
-                  <a-menu-item key="2">
-                    <ArrowRightOutlined /> 关闭右侧
-                  </a-menu-item>
-                  <a-menu-item key="3">
-                    <CloseOutlined /> 关闭其它
-                  </a-menu-item>
-                  <a-menu-item key="4">
-                    <CloseCircleOutlined /> 全部关闭
-                  </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
+        <div :class="['zc-layout-content-tabs', { collapsed: collapsed }]">
+          <div class="flex-row">
+            <div class="zc-layout-content-tabs-left">
+              <div class="my-tabs-wrapper" @wheel.prevent="onWheelScroll" ref="scrollContainer">
+                <a-tabs v-model:activeKey="selectmenuKey[0]" hide-add type="editable-card" size="small" @edit="tagdelete" @tabClick="tagchange">
+                  <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable" class="tag"> </a-tab-pane>
+                </a-tabs>
+              </div>
+            </div>
+
+            <div class="zc-layout-content-tabs-right">
+              <a-dropdown>
+                <a class="text-color-black" @click.prevent>
+                  <MoreOutlined :style="{ color: 'black', fontSize: '18px' }" />
+                </a>
+                <template #overlay>
+                  <a-menu @click="dropdownonClick">
+                    <a-menu-item key="1"> <ArrowLeftOutlined /> 关闭左侧 </a-menu-item>
+                    <a-menu-item key="2"> <ArrowRightOutlined /> 关闭右侧 </a-menu-item>
+                    <a-menu-item key="3"> <CloseOutlined /> 关闭其它 </a-menu-item>
+                    <a-menu-item key="4"> <CloseCircleOutlined /> 全部关闭 </a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+            </div>
           </div>
         </div>
         <!-- 路由视图部分 -->
-        <a-layout-content :style="{ margin: '8px' }">
+        <a-layout-content :style="{ margin: '120px 8px 8px 8px' }">
           <router-view v-slot="{ Component, route }">
             <keep-alive v-if="route.meta.cache">
               <component :is="Component" />
@@ -209,6 +154,7 @@
         </a-layout-content>
       </a-layout>
     </a-layout>
+    <!-- 顶部菜单布局 -->
     <a-layout v-else>
       <a-layout-header
         class="zc-layout-header-top"
@@ -222,61 +168,40 @@
         <div class="flex-row">
           <div class="flex-item-9">
             <div class="flex-row">
-              <div
-                class="flex-item-1"
-                style="line-height: 32px; height: 32px; margin: 16px"
-              >
+              <div class="flex-item-1" style="line-height: 32px; height: 32px; margin: 16px">
                 <a-flex>
-                  <img
-                    src="@/assets/imgs/logo.png"
-                    alt=""
-                    width="30px"
-                    class="margin-right-10"
-                  />
-                  <span
-                    :class="
-                      formConfig.themeClass == 'light'
-                        ? 'text-color-primary'
-                        : 'text-color-white '
-                    "
-                    style="font-size: 16px"
-                    >{{ config.projectName }}</span
-                  >
+                  <img src="@/assets/imgs/logo.png" alt="" width="30px" class="margin-right-10" />
+                  <span :class="formConfig.themeClass == 'light' ? 'text-color-primary' : 'text-color-white '" style="font-size: 16px">{{ config.projectName }}</span>
                 </a-flex>
               </div>
               <div class="flex-item-9">
-                <a-menu
-                  v-model:selectedKeys="selectmenuKey"
-                  mode="horizontal"
-                  :theme="formConfig.themeClass"
-                  :items="menuItems"
-                  @click="menuclick"
-                ></a-menu>
+                <a-menu v-model:selectedKeys="selectmenuKey" mode="horizontal" :theme="formConfig.themeClass" :items="menuItems" @click="menuclick"></a-menu>
               </div>
             </div>
-
           </div>
           <div class="flex-item-1 text-align-right padding-right-20">
             <a-space :size="18">
               <a-dropdown>
-                <a
-                  :class="
-                    formConfig.themeClass == 'light'
-                      ? 'text-color-black'
-                      : 'text-color-white'
-                  "
-                  @click.prevent
-                >
-                  <a-avatar
-                    :size="35"
-                    :style="{
-                      backgroundColor: '#1677ff',
-                      verticalAlign: 'middle',
-                      margin: '0 0 5px 0',
-                    }"
-                  >
-                    {{ username }}
-                  </a-avatar>
+                <a :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'" @click.prevent>
+                  <div class="flex-row">
+                    <div class="flex-item">
+                      <a-avatar
+                        :size="35"
+                        :style="{
+                          backgroundColor: '#1677ff',
+                          verticalAlign: 'middle',
+                          margin: '0 0 5px 0',
+                        }"
+                      >
+                        {{ username?.charAt(0) }}
+                      </a-avatar>
+                    </div>
+
+                    <div class="flex-item margin-left-10 text-align-left">
+                      <div class="username" :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'">{{ username }}</div>
+                      <div class="userphone" :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'">{{ mobile }}</div>
+                    </div>
+                  </div>
                 </a>
                 <template #overlay>
                   <a-menu @click="avatardropdownonClick">
@@ -285,120 +210,70 @@
                   </a-menu>
                 </template>
               </a-dropdown>
-              <a
-                :class="
-                  formConfig.themeClass == 'light'
-                    ? 'text-color-black'
-                    : 'text-color-white'
-                "
-                @click.prevent
-                @click="toggleFullScreen"
-              >
+              <a :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'" @click.prevent @click="toggleFullScreen">
                 <a-tooltip :title="isFullScreen ? '退出全屏' : '进入全屏'">
                   <FullscreenOutlined v-if="isFullScreen" />
                   <FullscreenExitOutlined v-else />
                 </a-tooltip>
               </a>
               <a-dropdown>
-                <a
-                  :class="
-                    formConfig.themeClass == 'light'
-                      ? 'text-color-black'
-                      : 'text-color-white'
-                  "
-                  @click.prevent
-                >
+                <a :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'" @click.prevent>
                   <GlobalOutlined />
                 </a>
                 <template #overlay>
                   <a-menu @click="dropdownonLanguageClick">
                     <a-menu-item key="zhCN">
-                      <span
-                        :class="
-                          config.locale.locale == 'zh-cn'
-                            ? 'text-color-primary'
-                            : ''
-                        "
-                        >简体中文</span
-                      >
+                      <span :class="config.locale.locale == 'zh-cn' ? 'text-color-primary' : ''">简体中文</span>
                     </a-menu-item>
                     <a-menu-item key="enUS">
-                      <span
-                        :class="
-                          config.locale.locale == 'en'
-                            ? 'text-color-primary'
-                            : ''
-                        "
-                        >English</span
-                      >
+                      <span :class="config.locale.locale == 'en' ? 'text-color-primary' : ''">English</span>
                     </a-menu-item>
                   </a-menu>
                 </template>
               </a-dropdown>
-              <a
-                :class="
-                  formConfig.themeClass == 'light'
-                    ? 'text-color-black'
-                    : 'text-color-white'
-                "
-                @click.prevent
-                @click="showDrawer"
-              >
-                <MoreOutlined />
+              <a :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'" @click.prevent @click="showDrawer">
+                <SettingOutlined />
               </a>
             </a-space>
           </div>
         </div>
       </a-layout-header>
       <!-- 选项卡组件 -->
-      <div class="zc-layout-content-tabs">
-        <div
-          class="zc-layout-content-tabs-left"
-          @wheel.prevent="onWheelScroll"
-          ref="scrollContainer"
-        >
-          <a-tag
-            v-for="pane in panes"
-            :key="pane.key"
-            :class="selectmenuKey[0] == pane.key ? 'tag-select' : 'tag'"
-            :closable="pane.closable"
-            :bordered="false"
-            @close="tagdelete(pane)"
-            @click="tagchange(pane)"
-          >
-            {{ pane.title }}
-          </a-tag>
-        </div>
-        <div class="zc-layout-content-tabs-right">
-          <a-dropdown class="zc-layout-content-tabs-right-dropdown">
-            <a class="ant-dropdown-link" @click.prevent>
-              <DownOutlined />
-            </a>
-            <template #overlay>
-              <a-menu @click="dropdownonClick">
-                <a-menu-item key="1">
-                  <ArrowLeftOutlined /> 关闭左侧
-                </a-menu-item>
-                <a-menu-item key="2">
-                  <ArrowRightOutlined /> 关闭右侧
-                </a-menu-item>
-                <a-menu-item key="3"> <CloseOutlined /> 关闭其它 </a-menu-item>
-                <a-menu-item key="4">
-                  <CloseCircleOutlined /> 全部关闭
-                </a-menu-item>
-              </a-menu>
-            </template>
-          </a-dropdown>
+      <div :class="['zc-layout-content-tabs', 'top-layout', { collapsed: collapsed }]">
+        <div class="flex-row">
+          <div class="zc-layout-content-tabs-left">
+            <div class="my-tabs-wrapper" @wheel.prevent="onWheelScroll" ref="scrollContainer">
+              <a-tabs v-model:activeKey="selectmenuKey[0]" hide-add type="editable-card" size="small" @edit="tagdelete" @tabClick="tagchange">
+                <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable" class="tag"> </a-tab-pane>
+              </a-tabs>
+            </div>
+          </div>
+
+          <div class="zc-layout-content-tabs-right">
+            <a-dropdown>
+              <a class="text-color-black" @click.prevent>
+                <MoreOutlined :style="{ color: 'black', fontSize: '18px' }" />
+              </a>
+              <template #overlay>
+                <a-menu @click="dropdownonClick">
+                  <a-menu-item key="1"> <ArrowLeftOutlined /> 关闭左侧 </a-menu-item>
+                  <a-menu-item key="2"> <ArrowRightOutlined /> 关闭右侧 </a-menu-item>
+                  <a-menu-item key="3"> <CloseOutlined /> 关闭其它 </a-menu-item>
+                  <a-menu-item key="4"> <CloseCircleOutlined /> 全部关闭 </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </div>
         </div>
       </div>
-           <!-- 面包屑导航 -->
-            <a-breadcrumb class="breadcrumb-top" v-if="breadcrumbItems.length > 0">
-              <a-breadcrumb-item v-for="item in breadcrumbItems" :key="item.key">
-                {{ item.title }}
-              </a-breadcrumb-item>
-            </a-breadcrumb>
+      <!-- 面包屑导航 -->
+      <a-breadcrumb class="breadcrumb-top" v-if="breadcrumbItems.length > 0">
+        <a-breadcrumb-item v-for="item in breadcrumbItems" :key="item.key">
+          {{ item.title }}
+        </a-breadcrumb-item>
+      </a-breadcrumb>
       <!-- 路由视图部分 -->
-      <a-layout-content :style="{ margin: '8px' }">
+      <a-layout-content :style="{ margin: '120px 8px 8px 8px' }">
         <router-view v-slot="{ Component, route }">
           <keep-alive v-if="route.meta.cache">
             <component :is="Component" />
@@ -412,20 +287,14 @@
       <a-form name="config_form" :model="formConfig">
         <div class="blockquote">主题</div>
         <div class="padding-10">
-          <a-radio-group
-            v-model:value="formConfig.themeClass"
-            @change="themeClasschangeTheme"
-          >
+          <a-radio-group v-model:value="formConfig.themeClass" @change="themeClasschangeTheme">
             <a-radio value="dark">黑</a-radio>
             <a-radio value="light">白</a-radio>
           </a-radio-group>
         </div>
         <div class="blockquote">导航模式</div>
         <div class="padding-10">
-          <a-radio-group
-            v-model:value="formConfig.navigationMode"
-            @change="navigationModechangeTheme"
-          >
+          <a-radio-group v-model:value="formConfig.navigationMode" @change="navigationModechangeTheme">
             <a-radio value="side">侧边菜单布局</a-radio>
             <a-radio value="top">顶部菜单布局</a-radio>
           </a-radio-group>
@@ -435,12 +304,7 @@
           <a-row>
             <a-col :span="12">表格边框</a-col>
             <a-col :span="12">
-              <a-switch
-                v-model:checked="formConfig.tableBordered"
-                checked-children="边框开"
-                un-checked-children="边框关"
-                @change="tableBorderedchangeTheme"
-              />
+              <a-switch v-model:checked="formConfig.tableBordered" checked-children="边框开" un-checked-children="边框关" @change="tableBorderedchangeTheme" />
             </a-col>
           </a-row>
         </div>
@@ -458,6 +322,7 @@ import zhCN from 'ant-design-vue/es/locale/zh_CN'
 import enUS from 'ant-design-vue/es/locale/en_US'
 const user = useUserStore()
 const username = user.userInfo.name
+const mobile = user.userInfo.mobile
 // 菜单状态
 const menu = menuStore()
 const config = configStore()
@@ -526,43 +391,43 @@ const menuclick = ({ item, key }) => {
   updateMenuPanes(current)
 }
 // 点击 Tag 切换选项卡
-const tagchange = pane => {
-  const current = panes.value.find(x => x.key === pane.key)
+const tagchange = key => {
+  const current = panes.value.find(x => x.key === key)
   if (current) {
     updateMenuPanes(current)
   }
 }
+
 // 删除 Tag
-const tagdelete = pane => {
-  if (pane.key == selectmenuKey.value[0]) {
-    console.log(JSON.stringify(panes.value))
-    const index = panes.value.findIndex(item => item.key === pane.key)
-    let nextPane = null
-    //如果有下一条
-    if (index + 1 < panes.value.length) {
-      // 有下一个
-      nextPane = panes.value[index + 1]
-    } else if (index - 1 >= 0) {
-      // 有上一个
-      nextPane = panes.value[index - 1]
-    }
-    if (nextPane) {
-      updateMenuPanes(nextPane)
+const tagdelete = (key, action) => {
+  if (action === 'add') {
+    //add();
+  } else {
+    if (key == selectmenuKey.value[0]) {
+      const index = panes.value.findIndex(item => item.key === key)
+      let nextPane = null
+      //如果有下一条
+      if (index + 1 < panes.value.length) {
+        // 有下一个
+        nextPane = panes.value[index + 1]
+      } else if (index - 1 >= 0) {
+        // 有上一个
+        nextPane = panes.value[index - 1]
+      }
+      if (nextPane) {
+        updateMenuPanes(nextPane)
+      }
     }
+    panes.value = panes.value.filter(x => x.key !== key)
+    menu.tagmenus = panes.value
   }
-  panes.value = panes.value.filter(x => x.key !== pane.key)
-  menu.tagmenus = panes.value
 }
 // 下拉菜单点击事件
 const dropdownonClick = ({ key }) => {
-  const index = panes.value.findIndex(
-    item => item.key === selectmenuKey.value[0],
-  )
+  const index = panes.value.findIndex(item => item.key === selectmenuKey.value[0])
   switch (key) {
     case '1':
-      panes.value = panes.value.filter(
-        (item, i) => i >= index || item.key === 0,
-      )
+      panes.value = panes.value.filter((item, i) => i >= index || item.key === 0)
       menu.tagmenus = panes.value
       break
     case '2':
@@ -570,9 +435,7 @@ const dropdownonClick = ({ key }) => {
       menu.tagmenus = panes.value
       break
     case '3':
-      panes.value = panes.value.filter(
-        x => x.key === selectmenuKey.value[0] || x.key === 0,
-      )
+      panes.value = panes.value.filter(x => x.key === selectmenuKey.value[0] || x.key === 0)
       menu.tagmenus = panes.value
       break
     case '4':
@@ -659,10 +522,7 @@ function findParentKeys(menuArray, targetKey, parentKeys = []) {
 
     // 如果有子菜单，递归查找
     if (item.children && item.children.length > 0) {
-      const result = findParentKeys(item.children, targetKey, [
-        ...parentKeys,
-        item.key,
-      ])
+      const result = findParentKeys(item.children, targetKey, [...parentKeys, item.key])
       if (result) {
         return result
       }
@@ -798,25 +658,29 @@ const generateBreadcrumbItems = () => {
       title: item.title,
       path: item.path,
       type: item.type,
-      url: item.url
+      url: item.url,
     }))
   }
 }
 
 // 监听选中菜单项变化，更新面包屑
-watch(selectmenuKey, () => {
-  generateBreadcrumbItems()
-}, { immediate: true })
+watch(
+  selectmenuKey,
+  () => {
+    generateBreadcrumbItems()
+  },
+  { immediate: true },
+)
 
 // 组件挂载时恢复路由状态
 onMounted(() => {
   // 检查是否有持久化的选中菜单项
   if (selectmenuKey.value && selectmenuKey.value.length > 0 && selectmenuKey.value[0] !== 0) {
     const currentKey = selectmenuKey.value[0]
-    
+
     // 在tagmenus中查找对应的pane
     const savedPane = panes.value.find(pane => pane.key === currentKey)
-    
+
     if (savedPane) {
       // 如果找到了对应的pane，恢复路由状态
       updateMenuPanes(savedPane)
@@ -893,65 +757,82 @@ provide('menuclick', menuclick)
   padding: 0 !important;
 }
 .zc-layout-content-tabs {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
   align-items: center;
-  margin-top: 69px;
+  position: fixed;
+  top: 64px;
+  left: 200px;
+  right: 0;
+  z-index: 100;
+  background: #fff;
+  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+  transition: left 0.3s ease;
 }
-.tag {
-  background-color: #fff;
-  color: #999999;
-  height: 30px;
-  line-height: 30px;
-  cursor: pointer;
-  font-size: 14px;
-  padding: 0 15px;
-}
-.tag-select {
-  background-color: #fff;
-  color: #1677ff;
-  height: 30px;
-  line-height: 30px;
-  cursor: pointer;
-  font-size: 14px;
-  padding: 0 15px;
+
+.zc-layout-content-tabs.collapsed {
+  left: 80px;
+}
+
+.zc-layout-content-tabs.top-layout {
+  left: 0;
 }
 .zc-layout-content-tabs-left {
-  flex: 0.95;
-  padding-left: 10px;
-  white-space: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
-  /* 确保只有横向滑动 */
-  width: 100%;
-  /* 父容器宽度 */
-  -ms-overflow-style: none;
-  /* 适用于 IE 和 Edge */
-  scrollbar-width: none;
-  /* 适用于 Firefox */
-}
-.zc-layout-content-tabs-left::-webkit-scrollbar {
-  display: none;
-  /* 隐藏 Webkit 浏览器中的滚动条 */
+  flex: 0.99;
+  width: 90%;
 }
 .zc-layout-content-tabs-right {
-  flex: 0.05;
+  flex: 0.01;
   text-align: right;
-  padding-right: 10px;
+  padding-right: 15px;
+}
+
+/* 使用深度选择器修改所有标签项的样式 */
+.my-tabs-wrapper :deep(.ant-tabs-tab) {
+  border-radius: 4px !important; /* 圆角 */
+  color: #999999 !important;
+  background-color: #f5f5f5 !important;
+  border: 0px !important;
+  margin-right: 4px;
+  margin: 8px;
+  padding: 5px 10px !important;
+}
+/* 修改激活标签的样式 */
+.my-tabs-wrapper :deep(.ant-tabs-tab-active .ant-tabs-tab-btn .ant-tabs-tab-remove) {
+  color: #1890ff !important;
+}
+.my-tabs-wrapper :deep(.ant-tabs-tab-active .ant-tabs-tab-remove) {
+  color: #1890ff !important;
 }
-.zc-layout-content-tabs-right-dropdown {
-  background-color: white;
-  padding: 8px 10px;
-  border-radius: 4px;
+/* 标签悬停效果 */
+.my-tabs-wrapper :deep(.ant-tabs-tab:hover, .ant-tabs-tab-remove:hover) {
+  color: #1890ff !important;
 }
+.my-tabs-wrapper :deep(.ant-tabs-content-holder) {
+  display: none !important;
+}
+.my-tabs-wrapper :deep(.ant-tabs-nav) {
+  margin: 0px !important;
+  border-bottom: none !important; /* 移除底部分割线 */
+}
+.my-tabs-wrapper :deep(.ant-tabs-tab-remove) {
+  margin-left: 0px !important;
+}
+
 .breadcrumb {
   display: inline-block;
   margin-left: 16px;
-  vertical-align: middle;
 }
 .breadcrumb-top {
   margin-top: 8px;
   padding-left: 16px;
 }
+
+.username {
+  line-height: 1.2;
+  margin-bottom: 2px;
+}
+
+.userphone {
+  line-height: 1.2;
+  margin-bottom: 4px;
+}
 </style>