feat: 逻辑调整

src/layouts/components/navbar/components/right-side/index.vue

@@ -1,13 +1,22 @@
 <template>
   <div class="right-wrap">
     <!-- 任务中心 -->
-    <div class="relative p-6px rounded-30px flex items-center justify-center task-icon" @click="setUnread" v-if="hasOpenEnterprise">
+    <div
+      class="relative p-6px rounded-30px flex items-center justify-center task-icon"
+      @click="setUnread"
+      v-if="hasOpenEnterprise"
+    >
       <SvgIcon name="svg-taskCenter" size="20" class="color-#737478" @click="openDownloadCenter" />
       <div class="w-6px h-6px rounded-50% bg-#F64B31 absolute top-6px right-6px" v-if="hasUnreadInfo"></div>
     </div>
 
     <!-- 灵机空间入口 -->
-    <div class="agent-entry mx-16px" :class="isAgentRoute ? 'agent' : ''" @click="handleAgentClick" v-if="hasOpenEnterprise"></div>
+    <div
+      class="agent-entry mx-16px"
+      :class="isAgentRoute ? 'agent' : ''"
+      @click="handleAgentClick"
+      v-if="hasOpenEnterprise"
+    ></div>
 
     <!-- 头像设置 -->
     <Dropdown trigger="click" overlayClassName="layout-avatar-dropdown">
@@ -23,7 +32,7 @@
               <icon-right size="12" />
             </div>
           </MenuItem>
-          <MenuItem v-if="hasOpenEnterprise">
+          <MenuItem v-if="enterprises.length > 0">
             <SubMenu value="option-1" position="lt" trigger="hover" popupClassName="enterprises-dsubmenu">
               <template #title>
                 <div class="flex justify-between w-100% h-full items-center">
@@ -34,20 +43,68 @@
                   <icon-right size="12" />
                 </div>
               </template>
-              <MenuItem
-                v-for="(item, index) in enterprises"
-                :key="index"
-                class="rounded-8px hover:bg-#F2F3F5"
-                @click="onEnterpriseItemClick(item)"
-              >
-                <div
-                  class="flex items-center w-100% justify-between"
-                  :class="enterpriseInfo?.id === item.id ? '!color-#6D4CFE' : ''"
+              <div v-for="(item, index) in enterprises" :key="index">
+                <MenuItem
+                  class="rounded-8px hover:bg-#F2F3F5"
+                  @click="onEnterpriseItemClick(item)"
+                  v-if="!primary_enterprise || item.id !== primary_enterprise.id"
                 >
-                  <span>{{ item.name }}</span>
-                  <icon-check v-if="enterpriseInfo?.id === item.id" size="16" />
-                </div>
-              </MenuItem>
+                  <div
+                    class="flex items-center w-100% justify-between"
+                    :class="enterpriseInfo?.id === item.id ? '!color-#6D4CFE' : ''"
+                  >
+                    <span>{{ item.name }}</span>
+                    <icon-check v-if="enterpriseInfo?.id === item.id" size="16" />
+                  </div>
+                </MenuItem>
+
+                <template v-else>
+                  <template v-if="item.audit_status === 1">
+                    <div class="w-full h-1px bg-#E6E6E8 mb-8px" v-if="enterprises.length > 0"></div>
+                    <MenuItem class="rounded-8px hover:bg-#F2F3F5 h-36px !mb-0" @click="onCreate(item)">
+                      <div class="flex items-center">
+                        <SvgIcon size="16.5" name="svg-organization" class="color-#737478 mr-8px" />
+                        <span class="color-#211F24 mr-4px">创建企业账号</span>
+                        <div class="px-8px h-20px rounded-2px bg-#FFF7E5 flex items-center">
+                          <span class="color-#FFAE00 !text-12px !lh-20px font-400">申请中</span>
+                        </div>
+                      </div>
+                    </MenuItem>
+                  </template>
+                  <div v-else>
+                    <MenuItem class="rounded-8px hover:bg-#F2F3F5" @click="onEnterpriseItemClick(item)">
+                      <div class="flex justify-between items-center overflow-hidden">
+                        <div
+                          class="flex items-center w-100% flex-1 overflow-hidden"
+                          :class="enterpriseInfo?.id === item.id ? '!color-#6D4CFE' : ''"
+                        >
+                          <TextoverTips :context="item.name" />
+                          <img :src="icon4" width="12" height="12" class="ml-4px" />
+                        </div>
+                        <div
+                          class="px-8px h-20px rounded-2px flex items-center flex-shrink-0 ml-4px"
+                          :class="_map.get(item.subscribe_status)?.bg"
+                          v-if="[2, 3].includes(item.subscribe_status)"
+                        >
+                          <span class="!text-12px !lh-20px font-400" :class="_map.get(item.subscribe_status)?.color">{{
+                              _map.get(item.subscribe_status)?.label
+                            }}</span>
+                        </div>
+                      </div>
+                    </MenuItem>
+                  </div>
+                </template>
+              </div>
+
+              <template v-if="!primary_enterprise">
+                <div class="w-full h-1px bg-#E6E6E8 mb-8px" v-if="enterprises?.length > 0"></div>
+                <MenuItem class="rounded-8px hover:bg-#F2F3F5 h-36px !mb-0" @click="onCreate(null)">
+                  <div class="flex items-center">
+                    <SvgIcon size="16.5" name="svg-organization" class="color-#737478 mr-8px" />
+                    <span class="color-#211F24 mr-4px">创建企业账号</span>
+                  </div>
+                </MenuItem>
+              </template>
             </SubMenu>
           </MenuItem>
           <MenuItem>
@@ -70,8 +127,7 @@
 
 <script setup>
 import { Dropdown, Menu, MenuItem, SubMenu } from 'ant-design-vue';
-import { useRouter } from "vue-router";
-// import router from '@/router';
+import { useRouter } from 'vue-router'; // import router from '@/router';
 import { useEnterpriseStore } from '@/stores/modules/enterprise';
 import { useSidebarStore } from '@/stores/modules/side-bar';
 import { useUserStore } from '@/stores';
@@ -83,6 +139,8 @@ import DownloadCenterModal from '../task-center-modal';
 import icon1 from '@/assets/option.svg';
 import icon2 from '@/assets/exit.svg';
 import icon3 from '@/assets/change.svg';
+import icon4 from './img/admin.png';
+import TextoverTips from '@/components/text-over-tips/index.vue';
 
 const props = defineProps({
   isAgentRoute: {
@@ -91,18 +149,23 @@ const props = defineProps({
   },
 });
 
+const _map = new Map([
+  [2, { label: '试用中', bg: 'bg-#F0EDFF', color: 'color-#6D4CFE' }],
+  [3, { label: '已到期', bg: 'bg-#F2F3F5', color: 'color-#55585F' }],
+]);
+
 const enterpriseStore = useEnterpriseStore();
 const userStore = useUserStore();
 const sideBarStore = useSidebarStore();
 const route = useRoute();
 const router = useRouter();
 
-const hasUnreadInfo = computed(() => sideBarStore.unreadInfo.length);
-const hasOpenEnterprise  = computed(() => enterpriseStore.isOpenEnterprise);
-
 const exitAccountModalRef = ref(null);
 const downloadCenterModalRef = ref(null);
 
+const hasUnreadInfo = computed(() => sideBarStore.unreadInfo.length);
+const hasOpenEnterprise = computed(() => enterpriseStore.isOpenEnterprise);
+const primary_enterprise = computed(() => userStore.userInfo?.primary_enterprise);
 const enterprises = computed(() => {
   return userStore.userInfo?.enterprises ?? [];
 });
@@ -131,6 +194,12 @@ const setUnread = () => {
 const handleAgentClick = () => {
   props.isAgentRoute ? handleUserHome() : router.push({ name: 'AgentIndex' });
 };
+const onCreate = (item) => {
+  if (item && item.id === primary_enterprise.value.id) {
+    enterpriseStore.setEnterpriseInfo(item);
+  }
+  router.push({ name: 'Trial' });
+};
 </script>
 
 <style scoped lang="scss">
@@ -144,32 +213,45 @@ const handleAgentClick = () => {
     border: 1px solid var(--BG-300, #e6e6e8);
     background: var(--BG-white, #fff);
     padding: 12px 0px;
+
     .ant-dropdown-menu-item {
       padding: 0 12px;
-      margin-bottom: 4px;
+      margin-bottom: 8px;
+      font-family: $font-family-regular;
+      color: var(--Text-1, #211f24);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
 
       .ant-dropdown-menu-title-content {
         display: flex;
-        height: 40px;
+        height: 32px;
         width: 100%;
         padding: 10px 24px;
         align-items: center;
+
         .ant-dropdown-menu-submenu {
           width: 100%;
+
           .ant-dropdown-menu-submenu-title {
             padding: 0;
+
             &:hover {
               background: none;
             }
+
             .ant-dropdown-menu-title-content {
               padding: 0 !important;
             }
           }
+
           .ant-dropdown-menu-submenu-arrow {
             display: none;
           }
         }
       }
+
       .menu-item-text {
         color: var(--Text-2, #3c4043);
         font-family: $font-family-regular;
@@ -178,11 +260,14 @@ const handleAgentClick = () => {
         font-weight: 400;
         line-height: 22px;
       }
+
       .ant-dropdown-menu-title-content {
         border-radius: 8px !important;
       }
+
       &:not(.ant-dropdown-menu-item):hover {
         background-color: transparent;
+
         .ant-dropdown-menu-title-content {
           background: var(--BG-200, #f2f3f5);
         }
@@ -190,21 +275,28 @@ const handleAgentClick = () => {
     }
   }
 }
+
 .layout-avatar-dropdown,
 .enterprises-dsubmenu {
   width: 200px;
+
   .ant-dropdown-menu {
-    padding: 12px 4px;
+    padding: 8px 4px;
+    margin: 0;
+
     .ant-dropdown-menu-item {
       padding: 0 !important;
+
       .ant-dropdown-menu-title-content {
         padding: 0 12px !important;
       }
     }
   }
+
   .ant-dropdown-option-suffix {
     display: none;
   }
+
   // .enterprises-doption {
   //   .ant-dropdown-menu-title-content {
   //     padding: 0 !important;