From f9ac8d4406c8a7d644f9993dfb1e0cc923c62810 Mon Sep 17 00:00:00 2001
From: pdsuwwz <pdsu.wwz@foxmail.com>
Date: Fri, 16 Jun 2023 18:57:41 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=82=EF=B8=8F=20feat:=20layout=20=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   4 +-
 src/components/Footer/index.vue               |   2 +-
 src/components/Layout/LayoutArea.vue          | 102 +++++-----
 src/components/Layout/LayoutSection.vue       |  35 ++--
 src/components/Navigation/Avatar.vue          |   2 +-
 src/components/Navigation/ChangeTheme.vue     |   4 +-
 src/components/Navigation/NavBar.vue          |  12 +-
 src/components/Navigation/Side/SideAction.vue |   2 +-
 .../{Footer/octocat.vue => Octocat.vue}       |   4 +-
 .../HomeFront/components/QuickStart.vue       |  92 ++++++++-
 .../HomeFront/pages/dashboard-console.vue     | 181 +++++++++++-------
 src/modules/HomeFront/pages/overview.vue      | 170 ++++++----------
 .../components/ContainerLayout.vue            |  24 +++
 src/modules/UserAccount/pages/login.vue       |   3 +-
 src/router/frontend/index.ts                  |  21 +-
 src/widgets/WorkTabs/TabsBack.vue             |  55 ++++++
 src/widgets/WorkTabs/TabsController.vue       |  55 ++++++
 src/widgets/WorkTabs/index.vue                |  13 +-
 18 files changed, 492 insertions(+), 289 deletions(-)
 rename src/components/{Footer/octocat.vue => Octocat.vue} (93%)
 create mode 100644 src/widgets/WorkTabs/TabsBack.vue
 create mode 100644 src/widgets/WorkTabs/TabsController.vue

diff --git a/components.d.ts b/components.d.ts
index 6d4c640..bb6a786 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -19,6 +19,7 @@ declare module 'vue' {
     LayoutSection: typeof import('./src/components/Layout/LayoutSection.vue')['default']
     LayoutView: typeof import('./src/components/Layout/LayoutView.vue')['default']
     LayoutWork: typeof import('./src/components/Layout/LayoutWork.vue')['default']
+    NAutoComplete: typeof import('naive-ui')['NAutoComplete']
     NAvatar: typeof import('naive-ui')['NAvatar']
     NavBar: typeof import('./src/components/Navigation/NavBar.vue')['default']
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
@@ -47,7 +48,8 @@ declare module 'vue' {
     NStatistic: typeof import('naive-ui')['NStatistic']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NThing: typeof import('naive-ui')['NThing']
-    Octocat: typeof import('./src/components/Footer/octocat.vue')['default']
+    NTooltip: typeof import('naive-ui')['NTooltip']
+    Octocat: typeof import('./src/components/Octocat.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SearchCorporation: typeof import('./src/components/SearchSelect/SearchCorporation.vue')['default']
diff --git a/src/components/Footer/index.vue b/src/components/Footer/index.vue
index 3125ec7..9059e5a 100644
--- a/src/components/Footer/index.vue
+++ b/src/components/Footer/index.vue
@@ -24,7 +24,7 @@
   </footer>
 </template>
 <script lang="ts">
-import Octocat from './octocat.vue'
+import Octocat from '@/components/Octocat.vue'
 
 export default defineComponent({
   name: 'MyFooter',
diff --git a/src/components/Layout/LayoutArea.vue b/src/components/Layout/LayoutArea.vue
index ff47e37..765c608 100644
--- a/src/components/Layout/LayoutArea.vue
+++ b/src/components/Layout/LayoutArea.vue
@@ -2,38 +2,41 @@
   <div class="layout-area-container bg-#f0f2f5 dark:bg-#1e1e20">
     <div class="layout-area-container__top">
       <slot name="top"></slot>
+      <TabsController />
     </div>
     <div class="layout-area-container__bottom">
-      <div class="layout-area-container__bottom__inner">
-        <aside
-          v-if="$slots.side"
-          :class="[
-            'side-layout-area-menu-bar',
-            'b-r-#dcdfe6 b-r b-r-solid',
-            'dark:b-r-#444',
-          ]"
-        >
-          <div class="layout-area-menu-bar__inner">
-            <slot name="side"></slot>
-          </div>
-        </aside>
-        <section class="content-section-container bg-#f0f2f5 dark:bg-#1e1e20">
-          <main class="main-content-box">
-            <slot name="content"></slot>
-          </main>
-        </section>
-      </div>
+      <!-- <aside
+        v-if="$slots.side"
+        :class="[
+          'side-layout-area-menu-bar',
+          'b-r-#dcdfe6 b-r b-r-solid',
+          'dark:b-r-#444',
+        ]"
+      >
+        <div class="layout-area-menu-bar__inner">
+          <slot name="side"></slot>
+        </div>
+      </aside> -->
+      <section
+        class="flex-1"
+        :class="{
+          'overflow-y-auto': false
+        }"
+      >
+        <slot name="content"></slot>
+      </section>
+      <MyFooter show-border />
     </div>
-    <MyFooter show-border />
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import TabsController from '@/widgets/WorkTabs/TabsController.vue'
 
 /**
  * 上下左右布局，顶部导航 + (底部左侧侧边栏 + 底部右侧内容区域)
  */
-export default defineComponent({
+defineOptions({
   name: 'LayoutArea'
 })
 </script>
@@ -50,46 +53,41 @@ $headerHeight: 48px;
   overflow: hidden;
 
   .layout-area-container__top {
-
+    z-index: 1;
   }
 
   .layout-area-container__bottom {
     display: flex;
+    flex-direction: column;
     flex: 1;
-    position: relative;
+    overflow-y: auto;
 
-    .layout-area-container__bottom__inner {
-      position: absolute;
-      inset: 1px 0 0;
-      display: flex;
+    .side-layout-area-menu-bar {
+      position: relative;
+      flex-direction: column;
+      width: 256px;
+      transition: width 0.28s;
 
-      .side-layout-area-menu-bar {
-        position: relative;
-        flex-direction: column;
-        width: 256px;
-        transition: width 0.28s;
-
-        .layout-area-menu-bar__inner {
-          position: absolute;
-          inset: 0;
-          overflow-x: hidden;
-          overflow-y: auto;
-          padding: 24px;
-          scroll-behavior: smooth;
-        }
+      .layout-area-menu-bar__inner {
+        position: absolute;
+        inset: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        padding: 24px;
+        scroll-behavior: smooth;
       }
+    }
 
-      .content-section-container {
-        display: flex;
-        flex: auto;
-        flex-direction: column;
-        min-width: 0;
+    .content-section-container {
+      display: flex;
+      flex: auto;
+      flex-direction: column;
+      min-width: 0;
 
-        .main-content-box {
-          flex: auto;
-          position: relative;
-          overflow: auto;
-        }
+      .main-content-box {
+        flex: auto;
+        position: relative;
+        overflow: auto;
       }
     }
   }
diff --git a/src/components/Layout/LayoutSection.vue b/src/components/Layout/LayoutSection.vue
index 0d168de..7fd15cd 100644
--- a/src/components/Layout/LayoutSection.vue
+++ b/src/components/Layout/LayoutSection.vue
@@ -1,22 +1,14 @@
 <template>
   <div class="layout-section-container">
     <div
-      v-if="!title && !$slots.head"
+      v-if="$slots.title"
       class="layout-section-container__header"
     >
-      <div class="layout-section-container__header-head c-#303133 dark:c-#fff text_nowrap">
-        <h1
-          v-if="title"
-          :title="title"
-          class="layout-section-container__header-title text_nowrap"
-        >
-          {{ title }}
-        </h1>
-        <slot name="head"></slot>
-      </div>
-      <div class="layout-section-container__header-action">
-        <slot name="action"></slot>
-      </div>
+      <h1
+        class="layout-section-container__header-title c-#303133 dark:c-#fff text_nowrap"
+      >
+        <slot name="title"></slot>
+      </h1>
     </div>
     <div class="layout-section-container__content">
       <div
@@ -68,16 +60,11 @@ export default defineComponent({
     display: flex;
     justify-content: space-between;
     align-items: center;
-    min-height: 40px;
+    padding: 8px 0;
 
-    .layout-section-container__header-head {
-
-      .layout-section-container__header-title {
-        height: 18px;
-        font-size: 18px;
-        line-height: 18px;
-        font-weight: 500;
-      }
+    .layout-section-container__header-title {
+      font-size: 18px;
+      font-weight: 500;
     }
 
     .layout-section-container__header-action {
@@ -90,6 +77,8 @@ export default defineComponent({
     flex-direction: column;
     position: relative;
     flex: auto;
+    min-height: 0;
+    overflow-y: auto;
 
     .content-divider {
       height: 1px;
diff --git a/src/components/Navigation/Avatar.vue b/src/components/Navigation/Avatar.vue
index 14bb4e0..c49f5d1 100644
--- a/src/components/Navigation/Avatar.vue
+++ b/src/components/Navigation/Avatar.vue
@@ -66,7 +66,7 @@ export default defineComponent({
   cursor: pointer;
   user-select: none;
   outline: none;
-  padding: 0 12px;
+  padding: 0 6px;
 
   img {
     width: 24px;
diff --git a/src/components/Navigation/ChangeTheme.vue b/src/components/Navigation/ChangeTheme.vue
index a9867d8..64a1447 100644
--- a/src/components/Navigation/ChangeTheme.vue
+++ b/src/components/Navigation/ChangeTheme.vue
@@ -67,6 +67,8 @@ const handleChange = (_theme) => {
 
 <style lang="scss" scoped>
 .navigation-change-theme {
-  padding-left: 12px;
+  display: flex;
+  align-items: center;
+  padding: 0 6px;
 }
 </style>
diff --git a/src/components/Navigation/NavBar.vue b/src/components/Navigation/NavBar.vue
index 3a190bc..507c49f 100644
--- a/src/components/Navigation/NavBar.vue
+++ b/src/components/Navigation/NavBar.vue
@@ -18,10 +18,9 @@
         :auth="isAuth"
       />
       <div style="flex: 1;"></div>
-      <template v-if="isAuth">
-        <NavigationSideAction />
-        <NavigationAvatar />
-      </template>
+      <NavigationSideAction v-if="isAuth" />
+      <Octocat />
+      <NavigationAvatar v-if="isAuth" />
       <NavigationChangeTheme />
     </div>
   </header>
@@ -33,6 +32,8 @@ import NavigationAvatar from '@/components/Navigation/Avatar.vue'
 import NavigationChangeTheme from '@/components/Navigation/ChangeTheme.vue'
 import NavigationSideLogo from '@/components/Navigation/Side/SideLogo.vue'
 
+import Octocat from '@/components/Octocat.vue'
+
 defineOptions({
   name: 'NavigationNavBar'
 })
@@ -72,7 +73,8 @@ $headerHeight: 48px;
   .navbar-header-box {
     display: flex;
     height: 100%;
-    padding: 0 16px;
+    padding-left: 16px;
+    padding-right: 6px;
   }
 }
 </style>
diff --git a/src/components/Navigation/Side/SideAction.vue b/src/components/Navigation/Side/SideAction.vue
index 89c530d..bbc5afa 100644
--- a/src/components/Navigation/Side/SideAction.vue
+++ b/src/components/Navigation/Side/SideAction.vue
@@ -49,7 +49,7 @@ export default defineComponent({
     .action-item {
       height: 100%;
       line-height: inherit;
-      padding: 0 12px;
+      padding: 0 6px;
       margin-right: 5px;
 
       &:last-child {
diff --git a/src/components/Footer/octocat.vue b/src/components/Octocat.vue
similarity index 93%
rename from src/components/Footer/octocat.vue
rename to src/components/Octocat.vue
index 226e6b4..c171515 100644
--- a/src/components/Footer/octocat.vue
+++ b/src/components/Octocat.vue
@@ -1,6 +1,6 @@
 <template>
   <a
-    class="octocat-link c-#71717a dark:c-#666 hover-c-#3f3f46 dark:hover-c-#f6f5f7"
+    class="octocat-link c-#3f3f46 dark:c-#bbb hover-c-#000 dark:hover-c-#f6f5f7"
     target="_blank"
     :href="link"
   >
@@ -32,6 +32,8 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
 .octocat-link {
+  display: flex;
+  align-items: center;
   width: 22px;
   margin: 0 6px;
   transition: 0.2s color;
diff --git a/src/modules/HomeFront/components/QuickStart.vue b/src/modules/HomeFront/components/QuickStart.vue
index 20d2d87..9839356 100644
--- a/src/modules/HomeFront/components/QuickStart.vue
+++ b/src/modules/HomeFront/components/QuickStart.vue
@@ -1,15 +1,99 @@
 <template>
-  <div>
-    QuickStart
-  </div>
+  <n-grid
+    :x-gap="6"
+    :y-gap="6"
+    cols="xs:2 s:3 m:2"
+    responsive="screen"
+    class="justify-between"
+  >
+    <n-gi
+      v-for="(cardConfigItem, index) in cardConfigOptions"
+      :key="index"
+    >
+      <n-card
+        hoverable
+        @click="handlePreviewUrl(cardConfigItem)"
+      >
+        <div
+          class="flex flex-col justify-center items-center h-full cursor-pointer"
+        >
+          <n-icon
+            :size="30"
+            :component="cardConfigItem.icon"
+          />
+          <span>{{ cardConfigItem.title }}</span>
+        </div>
+      </n-card>
+    </n-gi>
+  </n-grid>
 </template>
 
 
 <script lang="ts" setup>
+import {
+  Dashboard as IconDashboard,
+  ReportMoney as IconReportMoney
+} from '@vicons/tabler'
+import {
+  TeamOutlined as IconTeamOutlined,
+  ProfileOutlined as IconProfileOutlined
+} from '@vicons/antd'
+
+
+
 defineOptions({
   name: 'QuickStart'
 })
-const inputValue = ref('')
+
+const route = useRoute()
+const router = useRouter()
+
+
+type CardConfig = {
+  title: string
+  icon: Component
+  routeName: string
+}
+
+const cardConfigOptions = shallowRef<Array<CardConfig>>([
+  {
+    title: '仪表盘',
+    icon: IconDashboard,
+    routeName: 'DashboardMonitor'
+  },
+  {
+    title: '成员管理',
+    icon: IconTeamOutlined,
+    routeName: 'MemberTeamManageRoot'
+  },
+  {
+    title: '资料管理',
+    icon: IconProfileOutlined,
+    routeName: 'MaterialPrepareManageRoot'
+  },
+  {
+    title: '成本核算',
+    icon: IconReportMoney,
+    routeName: 'CostBudgetManageRoot'
+  },
+  {
+    title: '系统管理',
+    icon: IconReportMoney,
+    routeName: 'CostBudgetManageRoot'
+  },
+  {
+    title: '基础组件',
+    icon: IconReportMoney,
+    routeName: 'CostBudgetManageRoot'
+  }
+])
+
+const handlePreviewUrl = (cardItem: CardConfig) => {
+  router.push({
+    name: cardItem.routeName
+  })
+}
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modules/HomeFront/pages/dashboard-console.vue b/src/modules/HomeFront/pages/dashboard-console.vue
index a303b0f..f7fa548 100644
--- a/src/modules/HomeFront/pages/dashboard-console.vue
+++ b/src/modules/HomeFront/pages/dashboard-console.vue
@@ -1,96 +1,131 @@
+
 <template>
-  <n-grid
-    :x-gap="8"
-    :y-gap="8"
-    cols="5"
-    item-responsive
-    responsive="screen"
-    class="p-16px"
-  >
-    <n-gi
-      span="xs:5 m:3"
-    >
-      <n-card
-        hoverable
-        :bordered="false"
-        title="项目技术栈"
-      >
-        <TechStack />
-      </n-card>
-    </n-gi>
-    <n-gi
-      span="xs:5 m:2"
-    >
-      <n-card
-        hoverable
-        :bordered="false"
-        class="h-full"
-        title="快速访问"
-      >
-        <QuickStart />
-      </n-card>
-      <!-- m 以下：不显示<br>
-      m 到 l：占据空间 1<br>
-      l 以上：占据空间 2 -->
-    </n-gi>
-
-    <n-gi
-      span="xs:5 m:3"
+  <div class="h-full flex-1 b b-#dcdfe6 dark:b-#444 b-solid">
+    <n-grid
+      :x-gap="6"
+      :y-gap="6"
+      cols="xs:1 s:2 m:3 l:4"
+      responsive="screen"
     >
-      <n-card
-        class="h-full"
-        hoverable
-        :bordered="false"
-        title="实时动态"
+      <n-gi
+        v-for="(cardConfigItem, index) in cardConfigOptions"
+        :key="index"
       >
-        <DynamicActivity />
-      </n-card>
-      <!-- m 以下：不显示<br>
-      m 到 l：占据空间 1<br>
-      l 以上：占据空间 2 -->
-    </n-gi>
-    <n-gi
-      span="xs:5 m:2"
-    >
-      <n-card
-        class="h-full"
-        hoverable
-        :bordered="false"
-        title="公告/通知"
-      >
-        <NoticeBoard />
-      </n-card>
-      <!-- m 以下：不显示<br>
-      m 到 l：占据空间 1<br>
-      l 以上：占据空间 2 -->
-    </n-gi>
-  </n-grid>
+        <n-card
+          hoverable
+          :bordered="false"
+          class="cursor-pointer"
+          @click="handlePreviewUrl(cardConfigItem)"
+        >
+          <template #header>
+            <n-icon
+              :size="30"
+              :component="cardConfigItem.icon"
+            />
+          </template>
+          {{ cardConfigItem.title }}
+        </n-card>
+      </n-gi>
+    </n-grid>
+
+    <div>
+      {{ overviewData.content }}
+    </div>
+  </div>
 </template>
 
+<script lang="ts" setup>
+import { useResultStore } from '@/modules/Result/store'
 
+import {
+  Dashboard as IconDashboard,
+  ReportMoney as IconReportMoney
+} from '@vicons/tabler'
+import {
+  TeamOutlined as IconTeamOutlined,
+  ProfileOutlined as IconProfileOutlined
+} from '@vicons/antd'
 
-<script lang="ts" setup>
-import TechStack from '@/modules/HomeFront/components/TechStack.vue'
-import QuickStart from '@/modules/HomeFront/components/QuickStart.vue'
-import DynamicActivity from '@/modules/HomeFront/components/DynamicActivity.vue'
-import NoticeBoard from '@/modules/HomeFront/components/NoticeBoard.vue'
 
 /**
- * Dashboard Console 主控制台
+ * 项目整体概况 类似驾驶舱
  */
 defineOptions({
-  name: 'DashboardConsole'
+  name: 'GroupProjectOverview'
 })
 
+const resultStore = useResultStore()
 const route = useRoute()
 const router = useRouter()
 
-const pageTitle = ref('Dashboard Console 主控制台')
+const overviewData = computed(() => resultStore.overviewData)
 
-const inputValue = ref(pageTitle.value)
+
+async function init () {
+  const { error, data } = await resultStore.getResultOverview({
+    projectId: route.params.projectId
+  })
+
+  if (error) return
+
+  console.log('overview', data)
+}
+
+init()
+
+type CardConfig = {
+  title: string
+  icon: Component
+  routeName: string
+}
+
+const cardConfigOptions = shallowRef<Array<CardConfig>>([
+  {
+    title: '仪表盘',
+    icon: IconDashboard,
+    routeName: 'DashboardIndex'
+  },
+  {
+    title: '成员管理页面',
+    icon: IconTeamOutlined,
+    routeName: 'MemberTeamManageRoot'
+  },
+  {
+    title: '资料管理页面',
+    icon: IconProfileOutlined,
+    routeName: 'MaterialPrepareManageRoot'
+  },
+  {
+    title: '成本核算管理页面',
+    icon: IconReportMoney,
+    routeName: 'CostBudgetManageRoot'
+  }
+])
+
+const handlePreviewUrl = (cardItem: CardConfig) => {
+  router.push({
+    name: cardItem.routeName
+  })
+}
 
 
 </script>
 
 <style lang="scss" scoped>
+.wrap-result-overview-content {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 360px) 528px;
+  grid-gap: 16px;
+  padding-bottom: 16px;
+
+  .grid-last {
+    grid-column-start: span 2;
+  }
+
+  .fitting-operate {
+    color: $color-primary;
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/src/modules/HomeFront/pages/overview.vue b/src/modules/HomeFront/pages/overview.vue
index dd04f39..32d239e 100644
--- a/src/modules/HomeFront/pages/overview.vue
+++ b/src/modules/HomeFront/pages/overview.vue
@@ -1,88 +1,88 @@
 <template>
-  <div class="h-full flex-1 b b-#dcdfe6 dark:b-#444 b-solid">
-    <n-page-header
-      @back="handlerPreviewDetail"
-    >
-      <template #title>
-        <a
-          href="javascript:;"
-          style="text-decoration: none; color: inherit"
-          @click="handlerPreviewDetail()"
-        >返回项目列表</a>
-      </template>
-    </n-page-header>
-
+  <LayoutSection class="p-16px">
     <n-grid
-      :x-gap="6"
-      :y-gap="6"
-      cols="xs:1 s:2 m:3 l:4"
+      :x-gap="8"
+      :y-gap="8"
+      cols="5"
+      item-responsive
       responsive="screen"
     >
       <n-gi
-        v-for="(cardConfigItem, index) in cardConfigOptions"
-        :key="index"
+        span="xs:5 m:3"
       >
         <n-card
-          hoverable
           :bordered="false"
-          class="cursor-pointer"
-          @click="handlePreviewUrl(cardConfigItem)"
+          title="项目技术栈"
         >
-          <template #header>
-            <n-icon
-              :size="30"
-              :component="cardConfigItem.icon"
-            />
-          </template>
-          {{ cardConfigItem.title }}
+          <TechStack />
         </n-card>
       </n-gi>
-    </n-grid>
+      <n-gi
+        span="xs:5 m:2"
+      >
+        <n-card
+          :bordered="false"
+          class="h-full"
+          title="快速访问"
+        >
+          <QuickStart />
+        </n-card>
+        <!-- m 以下：不显示<br>
+        m 到 l：占据空间 1<br>
+        l 以上：占据空间 2 -->
+      </n-gi>
 
-    <div>
-      {{ overviewData.content }}
-    </div>
-  </div>
+      <n-gi
+        span="xs:5 m:3"
+      >
+        <n-card
+          class="h-full"
+          :bordered="false"
+          title="实时动态"
+        >
+          <DynamicActivity />
+        </n-card>
+        <!-- m 以下：不显示<br>
+        m 到 l：占据空间 1<br>
+        l 以上：占据空间 2 -->
+      </n-gi>
+      <n-gi
+        span="xs:5 m:2"
+      >
+        <n-card
+          class="h-full"
+          :bordered="false"
+          title="公告/通知"
+        >
+          <NoticeBoard />
+        </n-card>
+        <!-- m 以下：不显示<br>
+        m 到 l：占据空间 1<br>
+        l 以上：占据空间 2 -->
+      </n-gi>
+    </n-grid>
+  </LayoutSection>
 </template>
 
-<script lang="ts" setup>
-import { useResultStore } from '@/modules/Result/store'
 
-import {
-  Dashboard as IconDashboard,
-  ReportMoney as IconReportMoney
-} from '@vicons/tabler'
-import {
-  TeamOutlined as IconTeamOutlined,
-  ProfileOutlined as IconProfileOutlined
-} from '@vicons/antd'
 
+<script lang="ts" setup>
+import TechStack from '@/modules/HomeFront/components/TechStack.vue'
+import QuickStart from '@/modules/HomeFront/components/QuickStart.vue'
+import DynamicActivity from '@/modules/HomeFront/components/DynamicActivity.vue'
+import NoticeBoard from '@/modules/HomeFront/components/NoticeBoard.vue'
 
 /**
- * 项目整体概况 类似驾驶舱
+ * Dashboard Console 主控制台
  */
 defineOptions({
-  name: 'GroupProjectOverview'
+  name: 'DashboardConsole'
 })
 
-const resultStore = useResultStore()
 const route = useRoute()
 const router = useRouter()
 
-const overviewData = computed(() => resultStore.overviewData)
-
-
-async function init () {
-  const { error, data } = await resultStore.getResultOverview({
-    projectId: route.params.projectId
-  })
-
-  if (error) return
-
-  console.log('overview', data)
-}
-
-init()
+const pageTitle = ref('Dashboard Console 主控制台')
 
 
 const handlerPreviewDetail = () => {
@@ -91,59 +91,9 @@ const handlerPreviewDetail = () => {
   })
 }
 
-type CardConfig = {
-  title: string
-  icon: Component
-  routeName: string
-}
-
-const cardConfigOptions = shallowRef<Array<CardConfig>>([
-  {
-    title: '仪表盘',
-    icon: IconDashboard,
-    routeName: 'DashboardIndex'
-  },
-  {
-    title: '成员管理页面',
-    icon: IconTeamOutlined,
-    routeName: 'MemberTeamManageRoot'
-  },
-  {
-    title: '资料管理页面',
-    icon: IconProfileOutlined,
-    routeName: 'MaterialPrepareManageRoot'
-  },
-  {
-    title: '成本核算管理页面',
-    icon: IconReportMoney,
-    routeName: 'CostBudgetManageRoot'
-  }
-])
-
-const handlePreviewUrl = (cardItem: CardConfig) => {
-  router.push({
-    name: cardItem.routeName
-  })
-}
 
 
 </script>
 
 <style lang="scss" scoped>
-.wrap-result-overview-content {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, 360px) 528px;
-  grid-gap: 16px;
-  padding-bottom: 16px;
-
-  .grid-last {
-    grid-column-start: span 2;
-  }
-
-  .fitting-operate {
-    color: $color-primary;
-    cursor: pointer;
-  }
-}
 </style>
diff --git a/src/modules/UserAccount/components/ContainerLayout.vue b/src/modules/UserAccount/components/ContainerLayout.vue
index d550693..546b6b1 100644
--- a/src/modules/UserAccount/components/ContainerLayout.vue
+++ b/src/modules/UserAccount/components/ContainerLayout.vue
@@ -41,13 +41,26 @@
                   text
                   tag="a"
                   type="primary"
+                  tabindex="-1"
                   @click="handleClickLink(formItem.link)"
                 >
                   {{ formItem.link.text }}
                 </n-button>
               </div>
             </template>
+
+            <n-auto-complete
+              v-if="formItem.type === 'email'"
+              v-model:value="formData[formItem.attrs.path]"
+              v-bind="getInputItemAttrs(formItem)"
+              :input-props="{
+                autocomplete: 'disabled'
+              }"
+              :options="getEmailAutoCompleteOptions(formData[formItem.attrs.path])"
+              blur-after-select
+            />
             <n-input
+              v-else
               v-model:value="formData[formItem.attrs.path]"
               v-bind="getInputItemAttrs(formItem)"
             >
@@ -191,6 +204,17 @@ function getActionItemEvent (on: any) {
   return onEvent
 }
 
+
+const getEmailAutoCompleteOptions = (valueRef) => {
+  return ['@admin.com', '@test.com', '@qq.com'].map((suffix) => {
+    const prefix = valueRef.split('@')[0]
+    return {
+      label: prefix + suffix,
+      value: prefix + suffix
+    }
+  })
+}
+
 function handleClickLink (link: any) {
   link.click.call(proxy.$parent, boxForm.value)
 }
diff --git a/src/modules/UserAccount/pages/login.vue b/src/modules/UserAccount/pages/login.vue
index d8f29e0..bb8b095 100755
--- a/src/modules/UserAccount/pages/login.vue
+++ b/src/modules/UserAccount/pages/login.vue
@@ -88,6 +88,7 @@ const configLogin = computed(() => {
           }
         },
         label: '邮箱',
+        type: 'email',
         prefixIcon: IconUserFa,
         placeholder: '123456@admin.com'
       },
@@ -104,7 +105,7 @@ const configLogin = computed(() => {
         link: {
           text: '忘记密码？',
           click () {
-            console.log(proxy, '忘记密码？')
+            window.open('https://github.com/pdsuwwz/vue3-tab-demo', '_blank')
           }
         },
         type: 'password',
diff --git a/src/router/frontend/index.ts b/src/router/frontend/index.ts
index 32f08fb..a8b2a2c 100644
--- a/src/router/frontend/index.ts
+++ b/src/router/frontend/index.ts
@@ -539,16 +539,27 @@ export const routesHomeFrontend: RouteRecordRaw = {
       path: ':projectId',
       name: 'GroupProjectDetail',
       redirect: {
-        name: 'GroupProjectOverview'
+        name: 'GroupProjectOverviewRoot'
       },
       children: [
         {
           path: 'overview', // overview 类似驾驶舱
-          name: 'GroupProjectOverview',
-          meta: {
-            title: '项目整体概况'
+          name: 'GroupProjectOverviewRoot',
+          component: LayoutWorkTabs,
+          redirect: {
+            name: 'GroupProjectOverview'
           },
-          component: () => import('@/modules/HomeFront/pages/overview.vue')
+          children: [
+            {
+              path: '',
+              name: 'GroupProjectOverview',
+              meta: {
+                title: '项目整体概况',
+                cacheSpaceKey: CacheSpaceKeys.dashboard
+              },
+              component: () => import('@/modules/HomeFront/pages/overview.vue')
+            }
+          ]
         },
         {
           path: 'dashboard',
diff --git a/src/widgets/WorkTabs/TabsBack.vue b/src/widgets/WorkTabs/TabsBack.vue
new file mode 100644
index 0000000..b2186fc
--- /dev/null
+++ b/src/widgets/WorkTabs/TabsBack.vue
@@ -0,0 +1,55 @@
+<template>
+  <div
+    id="tabs-back-box"
+    @click="handleJumpToHome()"
+  >
+    <n-popover
+      trigger="hover"
+      placement="top-start"
+    >
+      <template #trigger>
+        <n-icon
+          :component="ArrowBackUp"
+        />
+      </template>
+      返回首页
+    </n-popover>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ArrowBackUp } from '@vicons/tabler'
+
+
+/**
+ * 返回首页 - 🏠
+ */
+defineOptions({
+  name: 'TabsBack'
+})
+
+
+const router = useTabRouter()
+
+const handleJumpToHome = () => {
+  router.push('/')
+}
+</script>
+
+<style lang="scss" scoped>
+#tabs-back-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 32px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, "PingFang SC";
+  font-weight: 400;
+  background-color: transparent;
+  padding: 0 11px 0 12px;
+  border-radius: 8px 8px 0 0;
+  margin-right: 2px;
+  z-index: 0;
+  cursor: pointer;
+}
+</style>
diff --git a/src/widgets/WorkTabs/TabsController.vue b/src/widgets/WorkTabs/TabsController.vue
new file mode 100644
index 0000000..a18aa05
--- /dev/null
+++ b/src/widgets/WorkTabs/TabsController.vue
@@ -0,0 +1,55 @@
+<template>
+  <div
+    v-if="showTabs"
+    class="work-tabs__controller bg-#fff dark:bg-#333333"
+  >
+    <TabsBack v-if="!showOutset" />
+    <TabsOutset v-if="showOutset" />
+    <TabsHeader />
+    <TabsOptions />
+  </div>
+</template>
+
+
+<script lang="ts" setup>
+import TabsBack from './TabsBack.vue'
+import TabsOutset from './TabsOutset.vue'
+import TabsHeader from './Tabs.vue'
+import TabsOptions from './TabsOptions.vue'
+
+defineOptions({
+  name: 'TabsController'
+})
+
+const route = useRoute()
+
+const showTabs = computed(() => route.name !== 'GroupProjectList')
+const showOutset = computed(() => route.name !== 'GroupProjectOverview')
+</script>
+
+<style lang="scss" scoped>
+
+.work-tabs__controller {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  user-select: none;
+  padding: 16px 21px 0 24px;
+  position: relative;
+  border-top: 1px solid rgb(0 21 41 / 8%);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    pointer-events: none;
+    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 8%);
+  }
+}
+
+
+</style>
diff --git a/src/widgets/WorkTabs/index.vue b/src/widgets/WorkTabs/index.vue
index 3b23109..15d761b 100644
--- a/src/widgets/WorkTabs/index.vue
+++ b/src/widgets/WorkTabs/index.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="work-tabs-container">
-    <div class="work-tabs__controller bg-#fff dark:bg-#333333">
-      <TabsOutset v-if="showOutset" />
-      <TabsHeader />
-      <TabsOptions />
-    </div>
+    <!-- <TabsController /> -->
 
     <div class="work-tabs__content">
       <TabContent />
@@ -14,9 +10,8 @@
 
 
 <script lang="ts" setup>
-import TabsOutset from './TabsOutset.vue'
-import TabsHeader from './Tabs.vue'
-import TabsOptions from './TabsOptions.vue'
+
+import TabsController from './TabsController.vue'
 import TabContent from './Content.vue'
 
 defineOptions({
@@ -25,8 +20,6 @@ defineOptions({
 
 const route = useRoute()
 
-const showOutset = computed(() => route.path.includes('/group-project'))
-
 </script>
 
 <style lang="scss" scoped>