调整应用菜单

2025-08-18 12:42:01 +08:00 · 2025-08-18 12:42:01 +08:00 · 7eae087cf4
commit 7eae087cf4
parent 89fc3ecf74
7 changed files with 300 additions and 78 deletions
--- a/devcloud/web/src/layout/MenuLayout.vue
+++ b/devcloud/web/src/layout/MenuLayout.vue
@ -63,11 +63,10 @@
 </template>

 <script setup>
-import { computed, ref, shallowReactive } from 'vue';
+import { computed, ref } from 'vue';
 import HeaderNav from './components/HeaderNav.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useWindowSize } from '@vueuse/core'
-import { IconApps, IconBranch, IconLock, IconSettings, IconTags } from '@arco-design/web-vue/es/icon';
 import token from '@/storage/token'
 import app from '@/storage/app'
 import { watch } from 'vue';
@ -88,7 +87,7 @@ watch(width, (newWidth) => {
 }, { immediate: true });

 const currentSelectMenuItem = computed(() => {
-  return app.value.current_menu[app.value.current_system]?.menu_item || app.value.current_system
+  return app.value.system_menu.find(item => item.key === app.value.current_system)?.current_menu_item || app.value.current_system
 })

 const handleSystemChange = (system) => {
@ -106,13 +105,13 @@ const handleSystemChange = (system) => {

 // 菜单被选中
 const handleMenuClick = (key) => {
-  app.value.current_menu
+  app.value.system_menu.find(item => item.key === app.value.current_system).current_menu_item = key
  console.log(key)
 }

 // 菜单项被选中
 const handleMenuItemClick = (key) => {
-  app.value.current_menu[app.value.current_system].menu_item = key
+  app.value.system_menu.find(item => item.key === app.value.current_system).current_menu_item = key
  router.push({ name: key })
  console.log(route)
 }
@ -134,52 +133,9 @@ const handleUserOption = (option) => {
 };

 const currentMenus = computed(() => {
-  return systemMenus[app.value.current_system]
+  return app.value.system_menu.find(item => item.key === app.value.current_system)?.menus || []
 })

-const systemMenus = shallowReactive({
-  ProjectSystem: [
-    {
-      key: 'ProjectList',
-      icon: IconLock,
-      title: '项目空间'
-    },
-  ],
-  DevelopSystem: [
-    {
-      key: 'AppPage',
-      icon: IconApps,
-      title: '应用管理'
-    },
-    {
-      key: 'VersionIteration',
-      icon: IconTags,
-      title: '版本迭代'
-    },
-    {
-      key: 'PipelineTemplate',
-      icon: IconSettings,
-      title: '流水线模板'
-    }
-  ],
-  ArtifactSystem: [
-    {
-      key: 'RegistryPage',
-      icon: IconTags,
-      title: '制品仓库'
-    },
-    {
-      key: 'AssetPage',
-      icon: IconBranch,
-      title: '制品管理'
-    },
-  ]
-})
-
-
-
-
-
 </script>

 <style lang="less" scoped>
--- a/devcloud/web/src/layout/components/HeaderNav.vue
+++ b/devcloud/web/src/layout/components/HeaderNav.vue
@ -28,7 +28,7 @@
 </template>

 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import token from '@/storage/token'
 import app from '@/storage/app'
 import { useRouter } from 'vue-router';
@ -37,14 +37,13 @@ import { useRouter } from 'vue-router';
 const router = useRouter()
 const emit = defineEmits(['system-change', 'user-option-click']);

-const menuItems = ref([
-  { key: 'DashBoard', label: '工作台' },
-  { key: 'ProjectSystem', label: '项目管理' },
-  { key: 'DevelopSystem', label: '研发交付' },
-  { key: 'ArtifactSystem', label: '制品库' },
-  { key: '5', label: '测试中心' },
-  { key: '6', label: '运维中心' }
-]);
+const menuItems = computed(() => {
+  const systemMenu = app.value.system_menu || []
+  return systemMenu.map(item => ({
+    key: item.key,
+    label: item.title,
+  }))
+})

 const userOptions = ref([
  { key: 'profile', label: '个人中心', handler: () => emit('user-option-click', 'profile') },
--- a/devcloud/web/src/main.js
+++ b/devcloud/web/src/main.js
@ -8,7 +8,7 @@ const app = createApp(App)
 import ArcoVue from '@arco-design/web-vue'
 import ArcoVueIcon from '@arco-design/web-vue/es/icon'
 import '@arco-design/web-vue/dist/arco.css'
-app.use(ArcoVue)
+app.use(ArcoVue,)
 app.use(ArcoVueIcon)

 // 样式加载
--- a/devcloud/web/src/pages/project/ProjectList.vue
+++ b/devcloud/web/src/pages/project/ProjectList.vue
@ -7,12 +7,11 @@
          <template #icon><icon-plus /></template>
          新建项目空间
        </a-button>
-
-        <a-input-search v-model="searchKey" placeholder="搜索项目名称/描述" @search="handleSearch" allow-clear
-          style="width: 300px" />
      </a-space>

      <a-space :size="18">
+        <a-input-search v-model="searchKey" placeholder="搜索项目名称/描述" @search="handleSearch" allow-clear
+          style="width: 300px" />
        <a-select v-model="filterParams.status" placeholder="项目状态" style="width: 120px" allow-clear
          @change="handleSearch">
          <a-option value="active">活跃</a-option>
--- a/devcloud/web/src/pages/resource/ResourceSearch.vue
+++ b/devcloud/web/src/pages/resource/ResourceSearch.vue
@ -0,0 +1,116 @@
+<template>
+  <a-space direction="vertical" size="large" fill>
+    <div>
+      <span>OnlyCurrent: </span>
+      <a-switch v-model="rowSelection.onlyCurrent" />
+    </div>
+    <a-table row-key="name" :columns="columns" :data="data" :row-selection="rowSelection"
+      v-model:selectedKeys="selectedKeys" :pagination="pagination" />
+  </a-space>
+</template>
+
+<script>
+import { reactive, ref } from 'vue';
+
+export default {
+  setup() {
+    const selectedKeys = ref(['Jane Doe', 'Alisa Ross']);
+
+    const rowSelection = reactive({
+      type: 'checkbox',
+      showCheckedAll: true,
+      onlyCurrent: false,
+    });
+    const pagination = { pageSize: 5 }
+
+    const columns = [
+      {
+        title: 'Name',
+        dataIndex: 'name',
+      },
+      {
+        title: 'Salary',
+        dataIndex: 'salary',
+      },
+      {
+        title: 'Address',
+        dataIndex: 'address',
+      },
+      {
+        title: 'Email',
+        dataIndex: 'email',
+      },
+    ]
+    const data = reactive([{
+      key: '1',
+      name: 'Jane Doe',
+      salary: 23000,
+      address: '32 Park Road, London',
+      email: 'jane.doe@example.com'
+    }, {
+      key: '2',
+      name: 'Alisa Ross',
+      salary: 25000,
+      address: '35 Park Road, London',
+      email: 'alisa.ross@example.com'
+    }, {
+      key: '3',
+      name: 'Kevin Sandra',
+      salary: 22000,
+      address: '31 Park Road, London',
+      email: 'kevin.sandra@example.com',
+      disabled: true
+    }, {
+      key: '4',
+      name: 'Ed Hellen',
+      salary: 17000,
+      address: '42 Park Road, London',
+      email: 'ed.hellen@example.com'
+    }, {
+      key: '5',
+      name: 'William Smith',
+      salary: 27000,
+      address: '62 Park Road, London',
+      email: 'william.smith@example.com'
+    }, {
+      key: '6',
+      name: 'Jane Doe 2',
+      salary: 15000,
+      address: '32 Park Road, London',
+      email: 'jane.doe@example.com'
+    }, {
+      key: '7',
+      name: 'Alisa Ross 2',
+      salary: 28000,
+      address: '35 Park Road, London',
+      email: 'alisa.ross@example.com'
+    }, {
+      key: '8',
+      name: 'Kevin Sandra 2',
+      salary: 26000,
+      address: '31 Park Road, London',
+      email: 'kevin.sandra@example.com',
+    }, {
+      key: '9',
+      name: 'Ed Hellen 2',
+      salary: 18000,
+      address: '42 Park Road, London',
+      email: 'ed.hellen@example.com'
+    }, {
+      key: '10',
+      name: 'William Smith 2',
+      salary: 12000,
+      address: '62 Park Road, London',
+      email: 'william.smith@example.com'
+    }]);
+
+    return {
+      rowSelection,
+      columns,
+      data,
+      selectedKeys,
+      pagination
+    }
+  },
+}
+</script>
--- a/devcloud/web/src/router/index.js
+++ b/devcloud/web/src/router/index.js
@ -59,11 +59,31 @@ const router = createRouter({
        },
      ],
    },
+    // 资源管理
+    {
+      path: '/resource',
+      name: 'ResourceSystem',
+      redirect: { name: 'ResourceSearch' },
+      component: MenuLayout,
+      meta: {
+        title: '资源管理',
+      },
+      children: [
+        {
+          path: 'search',
+          name: 'ResourceSearch',
+          component: () => import('@/pages/resource/ResourceSearch.vue'),
+          meta: {
+            title: '资源检索',
+          },
+        },
+      ],
+    },
    // 研发交付
    {
      path: '/develop',
      name: 'DevelopSystem',
-      redirect: { name: 'SprintPage' },
+      redirect: { name: 'AppPage' },
      component: MenuLayout,
      meta: {
        title: '研发交付',
@ -99,7 +119,7 @@ const router = createRouter({
    {
      path: '/artifact',
      name: 'ArtifactSystem',
-      redirect: { name: 'SprintPage' },
+      redirect: { name: 'RegistryPage' },
      component: MenuLayout,
      meta: {
        title: '制品库',
--- a/devcloud/web/src/storage/app.js
+++ b/devcloud/web/src/storage/app.js
@ -4,24 +4,156 @@ export default useStorage(
  'app',
  {
    current_system: 'DashBoard',
-    current_menu: {
-      DashBoard: {
-        sub_menu: '',
-        menu_item: '1',
+    system_menu: [
+      {
+        key: 'DashBoard',
+        current_sub_menu: '',
+        current_menu_item: 'DashboardPage',
+        title: '工作台',
      },
-      ProjectSystem: {
-        sub_menu: '',
-        menu_item: '1',
+      {
+        key: 'ProjectSystem',
+        current_sub_menu: '',
+        current_menu_item: 'ProjectList',
+        title: '项目管理',
+        menus: [
+          {
+            key: 'ProjectList',
+            icon: 'IconLock',
+            title: '项目空间',
          },
-      DevelopSystem: {
-        sub_menu: '',
-        menu_item: '1',
+        ],
      },
-      ArtifactSystem: {
-        sub_menu: '',
-        menu_item: 'RegistryPage',
+      {
+        key: 'ResourceSystem',
+        current_sub_menu: '',
+        current_menu_item: 'ResourceSearch',
+        title: '资源管理',
+        menus: [
+          {
+            key: 'ResourceSearch',
+            icon: 'IconSearch',
+            title: '资源检索',
          },
+          {
+            key: 'EnvManage',
+            icon: 'IconLocation',
+            title: '环境管理',
          },
+        ],
+      },
+      {
+        key: 'DevelopSystem',
+        current_sub_menu: '',
+        current_menu_item: 'AppPage',
+        title: '研发交付',
+        menus: [
+          {
+            key: 'AppPage',
+            icon: 'IconApps',
+            title: '应用管理',
+          },
+          {
+            key: 'VersionIteration',
+            icon: 'IconTags',
+            title: '版本迭代',
+          },
+          {
+            key: 'PipelineTemplate',
+            icon: 'IconSettings',
+            title: '流水线模板',
+          },
+        ],
+      },
+      {
+        key: 'ArtifactSystem',
+        current_sub_menu: '',
+        current_menu_item: 'RegistryPage',
+        title: '制品库',
+        menus: [
+          {
+            key: 'RegistryPage',
+            icon: 'IconTags',
+            title: '制品管理',
+          },
+          {
+            key: 'AssetPage',
+            icon: 'IconBranch',
+            title: '制品管理',
+          },
+        ],
+      },
+      {
+        key: 'TestSystem',
+        current_sub_menu: '',
+        current_menu_item: 'RegistryPage',
+        title: '测试中心',
+        menus: [
+          {
+            key: 'TestApply',
+            icon: 'IconStamp',
+            title: '提测申请',
+          },
+          {
+            key: 'TestCase',
+            icon: 'IconExperiment',
+            title: '测试用例',
+          },
+          {
+            key: 'TestExecution',
+            icon: 'IconSend',
+            title: '用例执行',
+          },
+          {
+            key: 'DefectManage',
+            icon: 'IconBug',
+            title: '缺陷管理',
+          },
+          {
+            key: 'TestReport',
+            icon: 'IconDashboard',
+            title: '测试报告',
+          },
+        ],
+      },
+      {
+        key: 'SecuritySystem',
+        current_sub_menu: '',
+        current_menu_item: 'RegistryPage',
+        title: '安全合规',
+        menus: [
+          {
+            key: 'VulnerabilityScan',
+            icon: 'IconFindReplace',
+            title: '漏洞扫描',
+          },
+        ],
+      },
+      {
+        key: 'OpsSystem',
+        current_sub_menu: '',
+        current_menu_item: 'RegistryPage',
+        title: '运维中心',
+        menus: [
+          {
+            key: 'OnlineApply',
+            icon: 'IconStamp',
+            title: '上线申请',
+          },
+          {
+            key: 'DeployManage',
+            icon: 'IconLayers',
+            title: '应用部署',
+          },
+
+          {
+            key: 'MonitorAlarm',
+            icon: 'IconNotification',
+            title: '监控告警',
+          },
+        ],
+      },
+    ],
  },
  localStorage,
  { mergeDefaults: true },