refactor(layout): 调整布局并添加组件

- 修改 .env 文件中的标题
- 更新 components.d.ts 文件，移除 ElTabPane 和 ElTabs，添加 ElTreeSelect
- 优化 Login 组件中的 logo 渲染
-调整 Logo 组件样式- 重构 ToolHeader 组件，添加 Logo 组件
- 更新 tsconfig.json 中的 include 路径
- 调整 useRenderLayout.tsx 中的布局渲染逻辑

common/src/components/Logo/src/Logo.vue

@@ -68,7 +68,7 @@ watch(
         :class="[
           'ml-8px pt-4px text-16px font-700 overflow-hidden overflow-ellipsis whitespace-nowrap flex-1',
           {
-            'text-[var(--logo-title-text-color)]': layout === 'classic',
+            // 'text-[var(--logo-title-text-color)]': layout === 'classic',
             'text-[var(--top-header-text-color)]':
               layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
           }

common/src/layout/components/ToolHeader.vue

@@ -9,7 +9,7 @@ import { Breadcrumb } from '../../components/Breadcrumb'
 import { useAppStore } from '../../store/modules/app'
 import { useDesign } from '../../hooks/web/useDesign'
 import Notice from '../../business-components/Notice.vue'
-import HeaderFlag from '../../business-components/HeaderFlag/Flag.vue'
+import { Logo } from '../../components/Logo'
 
 const { getPrefixCls, variables } = useDesign()
 
@@ -35,8 +35,6 @@ const layout = computed(() => appStore.getLayout)
 // 多语言图标
 // const locale = computed(() => appStore.getLocale)
 
-const isSurvey = computed(() => sessionStorage.getItem('flag')?.includes('survey'))
-
 export default defineComponent({
   name: 'ToolHeader',
   setup() {
@@ -54,10 +52,21 @@ export default defineComponent({
               <Collapse class="custom-hover" color="var(--top-header-text-color)"></Collapse>
             ) : undefined}
             {breadcrumb.value ? <Breadcrumb class="<md:hidden"></Breadcrumb> : undefined}
+
+            <Logo
+              class={[
+                // 'bg-[var(--left-menu-bg-color)] relative',
+                {
+                  'w-[var(--left-menu-min-width)]': appStore.getCollapse,
+                  'w-[var(--left-menu-max-width)]': !appStore.getCollapse
+                }
+              ]}
+              style="transition: all var(--transition-time-02);"
+            ></Logo>
           </div>
         ) : undefined}
+
         <div class="h-full flex items-center">
-          {isSurvey.value ? <HeaderFlag /> : ''}
           <Notice />
           {screenfull.value ? (
             <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>

common/src/layout/components/useRenderLayout.tsx

@@ -39,27 +39,27 @@ export const useRenderLayout = () => {
   const renderClassic = () => {
     return (
       <>
-        <div
-          class={[
-            'absolute top-0 left-0 h-full layout-border__right',
-            { '!fixed z-3000': mobile.value }
-          ]}
-        >
-          {logo.value ? (
-            <Logo
-              class={[
-                'bg-[var(--left-menu-bg-color)] relative',
-                {
-                  '!pl-0': mobile.value && collapse.value,
-                  'w-[var(--left-menu-min-width)]': appStore.getCollapse,
-                  'w-[var(--left-menu-max-width)]': !appStore.getCollapse
-                }
-              ]}
-              style="transition: all var(--transition-time-02);"
-            ></Logo>
-          ) : undefined}
-          <Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu>
-        </div>
+        {/*<div*/}
+        {/*  class={[*/}
+        {/*    'absolute top-0 left-0 h-full layout-border__right',*/}
+        {/*    { '!fixed z-3000': mobile.value }*/}
+        {/*  ]}*/}
+        {/*>*/}
+        {/*  {logo.value ? (*/}
+        {/*    <Logo*/}
+        {/*      class={[*/}
+        {/*        'bg-[var(--left-menu-bg-color)] relative',*/}
+        {/*        {*/}
+        {/*          '!pl-0': mobile.value && collapse.value,*/}
+        {/*          'w-[var(--left-menu-min-width)]': appStore.getCollapse,*/}
+        {/*          'w-[var(--left-menu-max-width)]': !appStore.getCollapse*/}
+        {/*        }*/}
+        {/*      ]}*/}
+        {/*      style="transition: all var(--transition-time-02);"*/}
+        {/*    ></Logo>*/}
+        {/*  ) : undefined}*/}
+        {/*  <Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu>*/}
+        {/*</div>*/}
         <div
           class={[
             `${prefixCls}-content`,
@@ -67,8 +67,7 @@ export const useRenderLayout = () => {
             {
               'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
                 collapse.value && !mobile.value && !mobile.value,
-              'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
-                !collapse.value && !mobile.value && !mobile.value,
+              'w-100%': !collapse.value && !mobile.value && !mobile.value,
               'fixed !w-full !left-0': mobile.value
             }
           ]}
@@ -90,8 +89,7 @@ export const useRenderLayout = () => {
                   'fixed top-0 left-0 z-10': fixedHeader.value,
                   'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
                     collapse.value && fixedHeader.value && !mobile.value,
-                  'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
-                    !collapse.value && fixedHeader.value && !mobile.value,
+                  'w-100%': !collapse.value && fixedHeader.value && !mobile.value,
                   '!w-full !left-0': mobile.value
                 }
               ]}

common/src/views/Login/Login.vue

@@ -68,11 +68,7 @@ const toLogin = () => {
             class="flex justify-between items-center text-white at-2xl:justify-end at-xl:justify-end"
           >
             <div class="flex items-center at-2xl:hidden at-xl:hidden">
-              <img
-                src="../../../../../node_modules/@common/src/assets/imgs/logo.png"
-                alt=""
-                class="w-48px h-48px mr-10px"
-              />
+              <img src="@common/src/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
               <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
             </div>
 

page/.env.base

@@ -8,7 +8,7 @@ VITE_API_BASE_PATH=/openapi
 VITE_BASE_PATH=/
 
 # 标题
-VITE_APP_TITLE=基础模版
+VITE_APP_TITLE=组件仓库
 
 # 是否全量引入element-plus样式
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false

page/.env.pro

@@ -20,7 +20,7 @@ VITE_SOURCEMAP=false
 VITE_OUT_DIR=dist-pro
 
 # 标题
-VITE_APP_TITLE=同一健康·xxx
+VITE_APP_TITLE=组件仓库
 
 # 是否包分析
 VITE_USE_BUNDLE_ANALYZER=true

page/components.d.ts

@@ -30,11 +30,10 @@ declare module 'vue' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElText: typeof import('element-plus/es')['ElText']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

tsconfig.json

@@ -32,6 +32,6 @@
       "vite-plugin-svg-icons/client"
     ]
   },
-  "include": ["src/**/*", "common/**/*","types/**/*.d.ts", "page/src/**/*", "packages/**/*"],
+  "include": ["common/**/*","types/**/*.d.ts", "page/src/**/*", "package/packages/**/*"],
   "exclude": ["dist", "node_modules"]
 }