feat: 项目下拉列表增加”+新建项目“ (#31313)

* feat: 项目下拉列表增加"+新建项目"

* fix: 新建项目权限

frontend/src/assets/style/arco-reset.less

@@ -545,6 +545,7 @@
   box-shadow: 0 3px 14px 2px rgb(0 0 0 / 5%), 0 8px 10px 1px rgb(0 0 0 / 6%), 0 5px 5px -3px rgb(0 0 0 / 10%);
   .arco-select-dropdown-header {
     margin-bottom: 4px;
+    border-bottom: 1px solid var(--color-text-n8);
   }
   .arco-dropdown-list,
   .arco-select-dropdown-list,

frontend/src/components/pure/navbar/index.vue

@@ -25,6 +25,18 @@
           <template #arrow-icon>
             <icon-caret-down />
           </template>
+          <template v-if="hasAnyPermission(['ORGANIZATION_PROJECT:READ+ADD'])" #header>
+            <a-button
+              class="select-header-button mb-[4px] h-[28px] w-full justify-start pl-[7px] pr-0"
+              type="text"
+              @click="projectVisible = true"
+            >
+              <template #icon>
+                <MsIcon type="icon-icon_add_outlined" />
+              </template>
+              {{ t('settings.navbar.createProject') }}
+            </a-button>
+          </template>
           <a-tooltip
             v-for="project of appStore.projectList"
             :key="project.id"
@@ -157,6 +169,7 @@
   </div>
   <TaskCenterModal v-model:visible="taskCenterVisible" />
   <MessageCenterDrawer v-model:visible="messageCenterVisible" />
+  <AddProjectModal :visible="projectVisible" @cancel="projectVisible = false" />
 </template>
 
 <script lang="ts" setup>
@@ -169,6 +182,7 @@
   import MessageCenterDrawer from '@/components/business/ms-message/MessageCenterDrawer.vue';
   import TopMenu from '@/components/business/ms-top-menu/index.vue';
   import TaskCenterModal from './taskCenterModal.vue';
+  import AddProjectModal from '@/views/setting/organization/project/components/addProjectModal.vue';
 
   import { getMessageUnReadCount } from '@/api/modules/message';
   import { switchProject } from '@/api/modules/project-management/project';
@@ -179,7 +193,7 @@
   import useLocale from '@/locale/useLocale';
   import useAppStore from '@/store/modules/app';
   import useUserStore from '@/store/modules/user';
-  import { getFirstRouteNameByPermission } from '@/utils/permission';
+  import { getFirstRouteNameByPermission, hasAnyPermission } from '@/utils/permission';
 
   import { IconInfoCircle } from '@arco-design/web-vue/es/icon';
 
@@ -220,6 +234,7 @@
     }
   );
 
+  const projectVisible = ref(false);
   const showProjectSelect = computed(() => {
     const { getRouteLevelByKey } = usePathMap();
     // 非项目级别页面不需要展示项目选择器
@@ -306,6 +321,9 @@
   .navbar {
     @apply flex h-full justify-between bg-transparent;
   }
+  .select-header-button.arco-btn-text:not(:disabled):hover {
+    background-color: rgb(var(--primary-1)) !important;
+  }
   .center-side {
     @apply flex flex-1 items-center;
   }

frontend/src/locale/en-US/settings.ts

@@ -31,4 +31,5 @@ export default {
   'settings.copySettings.message': 'Copy succeeded, please paste to file src/settings.json.',
   'settings.close': 'Close',
   'settings.color.tooltip': '10 gradient colors generated according to the theme color',
+  'settings.navbar.createProject': 'Create project',
 };

frontend/src/locale/zh-CN/settings.ts

@@ -31,4 +31,5 @@ export default {
   'settings.copySettings.message': '复制成功，请粘贴到 src/settings.json 文件中',
   'settings.close': '关闭',
   'settings.color.tooltip': '根据主题颜色生成的 10 个梯度色（将配置复制到项目中，主题色才能对亮色 / 暗黑模式同时生效）',
+  'settings.navbar.createProject': '新建项目',
 };