[Style 0000] 适用于大多数页面的基本布局开发

src/components/Application/src/search/AppSearch.vue

@@ -7,7 +7,7 @@
 
   export default defineComponent({
     name: 'AppSearch',
-    setup() {
+    setup(__, { slots }) {
       const showModal = ref(false);
       const { t } = useI18n();
 
@@ -21,7 +21,7 @@
             <Tooltip>
               {{
                 title: () => t('common.searchText'),
-                default: () => <SearchOutlined />,
+                default: () => (slots.default ? slots.default() : <SearchOutlined />),
               }}
             </Tooltip>
             <AppSearchModal onClose={changeModal.bind(null, false)} visible={unref(showModal)} />

src/layouts/default/feature/SystemSelect.vue

@@ -0,0 +1,45 @@
+<template>
+  <Dropdown trigger="click">
+    <template #overlay>
+      <Menu @click="handleMenuClick">
+        <MenuItem key="采空区密闭分析">采空区密闭分析</MenuItem>
+        <MenuItem key="采空区密闭监测">采空区密闭监测</MenuItem>
+      </Menu>
+    </template>
+    <Button :class="prefixCls" type="primary">
+      {{ text }}
+      <DownOutlined />
+    </Button>
+  </Dropdown>
+</template>
+
+<script lang="ts" setup>
+  import { Button, Dropdown, Menu, MenuItem } from 'ant-design-vue';
+  import { DownOutlined } from '@ant-design/icons-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { ref } from 'vue';
+
+  const { prefixCls } = useDesign('system-select');
+  const text = ref('采空区密闭分析');
+
+  function handleMenuClick({ key }) {
+    text.value = key;
+  }
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-system-select';
+
+  .@{prefix-cls} {
+    margin-left: 10px;
+    margin-top: 10px;
+    width: 210px;
+
+    // :deep(.ant-select-selector) {
+    //   background-color: @primary-color;
+    // }
+
+    // :deep(.ant-select-single.ant-select-show-arrow .ant-select-selection-item) {
+    //   color: @white;
+    // }
+  }
+</style>

src/layouts/default/header/index.less

@@ -107,7 +107,7 @@
 
   &-action {
     display: flex;
-    min-width: 180px;
+    min-width: 100px;
     // padding-right: 12px;
     align-items: center;
 

src/layouts/default/index.vue

@@ -1,7 +1,9 @@
 <template>
+  <!-- <div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: yellow"></div> -->
   <Layout :class="prefixCls" v-bind="lockEvents">
     <LayoutFeatures />
     <LayoutHeader />
+    <SystemSelect />
     <Layout :class="[layoutClass]">
       <LayoutSideBar />
       <Layout :class="`${prefixCls}-main`">
@@ -22,6 +24,7 @@
   import MultipleTabs from './tabs/index.vue';
   import LayoutContent from './content/index.vue';
   import LayoutSideBar from './sider/index.vue';
+  import SystemSelect from './feature/SystemSelect.vue';
 
   // import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
@@ -40,6 +43,7 @@
       LayoutSideBar,
       MultipleTabs,
       Layout,
+      SystemSelect,
     },
     setup() {
       const { prefixCls } = useDesign('default-layout');
@@ -75,15 +79,25 @@
     display: flex;
     width: 100%;
     min-height: 100%;
-    background-color: @content-bg;
+    // background-color: greenyellow;
+    background-image: url('/@/assets/images/sealedGoaf/views/home/home-bg.png');
+    // background-color: @content-bg;
     flex-direction: column;
 
     > .ant-layout {
-      min-height: 100%;
+      height: 0;
+      margin: 10px;
+      background-color: transparent;
     }
 
     &-main {
       width: 100%;
+      border-top-right-radius: 10px;
+      border-bottom-right-radius: 10px;
+      // background-color: #aaaaaa32;
+      background: rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
       // 代码逻辑说明:【issues/8709】LayoutContent样式多出1px
       // margin-left: 1px;
     }

src/layouts/default/menu/index.vue

@@ -20,6 +20,10 @@
   import { useAppInject } from '/@/hooks/web/useAppInject';
   // import { useDesign } from '/@/hooks/web/useDesign';
   import { useLocaleStore } from '/@/store/modules/locale';
+  import { Button } from 'ant-design-vue';
+  import { SearchOutlined } from '@ant-design/icons-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { AppSearch } from '/@/components/Application';
 
   export default defineComponent({
     name: 'LayoutMenu',
@@ -40,6 +44,7 @@
     },
     setup(props) {
       const go = useGo();
+      const { t } = useI18n();
 
       const {
         getMenuMode,
@@ -132,17 +137,35 @@
         const { menus, ...menuProps } = unref(getCommonProps);
         // console.log(menus);
         if (!menus || !menus.length) return null;
-        return !props.isHorizontal ? (
-          <SimpleMenu {...menuProps} isSplitMenu={unref(getSplit)} items={menus} />
-        ) : (
-          <BasicMenu
-            {...(menuProps as any)}
-            isHorizontal={props.isHorizontal}
-            type={unref(getMenuType)}
-            showLogo={unref(getIsShowLogo)}
-            mode={unref(getComputedMenuMode as any)}
-            items={menus}
-          />
+        return (
+          <>
+            {!getCollapsed.value ? (
+              <AppSearch class="m-5px">
+                <Button class="w-full">
+                  {t('layout.setting.menuSearch')}
+                  <SearchOutlined />
+                </Button>
+              </AppSearch>
+            ) : (
+              <AppSearch class="m-5px">
+                <Button shape="circle">
+                  <SearchOutlined />
+                </Button>
+              </AppSearch>
+            )}
+            {!props.isHorizontal ? (
+              <SimpleMenu {...menuProps} isSplitMenu={unref(getSplit)} items={menusRef.value} />
+            ) : (
+              <BasicMenu
+                {...(menuProps as any)}
+                isHorizontal={props.isHorizontal}
+                type={unref(getMenuType)}
+                showLogo={unref(getIsShowLogo)}
+                mode={unref(getComputedMenuMode as any)}
+                items={menusRef.value}
+              />
+            )}
+          </>
         );
       }
 

src/layouts/default/menu/useLayoutMenu.ts

@@ -37,11 +37,11 @@ export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
       const { meta } = unref(currentRoute);
       const currentActiveMenu = meta.currentActiveMenu as string;
       // 顶部混合模式且顶部左侧组合菜单开始时
-      if (unref(getMenuType) === MenuTypeEnum.MIX && unref(getSplit)) { 
+      if (unref(getMenuType) === MenuTypeEnum.MIX && unref(getSplit)) {
         // 404页面时，跳转到重定向的路径
         if (unref(currentRoute).name === PAGE_NOT_FOUND_NAME_404 && unref(currentRoute)?.redirectedFrom?.path) {
           const menus = await getMenus();
-          const findItem = menus.find((item:any) => item.redirect === unref(currentRoute).path);
+          const findItem = menus.find((item: any) => item.redirect === unref(currentRoute).path);
           if (findItem) {
             // 说明是从一级菜单重定向过来的
             path = findItem.path;

src/layouts/default/sider/LayoutSider.vue

@@ -1,7 +1,6 @@
 <template>
   <Sider
     v-show="showClassSideBarRef"
-    ref="sideRef"
     breakpoint="lg"
     collapsible
     :class="getSiderClass"
@@ -10,34 +9,36 @@
     :collapsedWidth="getCollapsedWidth"
     :theme="getMenuTheme"
     @breakpoint="onBreakpointChange"
-    :trigger="getTrigger"
   >
-    <LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType" />
-    <DragBar ref="dragBarRef" />
+    <LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType" showSearch />
+    <template #trigger>
+      <LayoutTrigger />
+    </template>
   </Sider>
 </template>
 <script lang="ts">
-  import { computed, defineComponent, ref, unref, CSSProperties, h } from 'vue';
+  import { computed, defineComponent, unref, CSSProperties } from 'vue';
 
   import { Layout } from 'ant-design-vue';
   import LayoutMenu from '../menu/index.vue';
+  // import LayoutMenu from '../menu/SearchMenu.vue';
   import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
 
   import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
 
   import { useAppStore } from '@/store/modules/app';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { useDragLine, useSiderEvent } from './useLayoutSider';
+  import { useSiderEvent } from './useLayoutSider';
   import { useDesign } from '/@/hooks/web/useDesign';
 
-  import DragBar from './DragBar.vue';
+  // import DragBar from './DragBar.vue';
 
   export default defineComponent({
     name: 'LayoutSideBar',
-    components: { Sider: Layout.Sider, LayoutMenu, DragBar },
+    components: { Sider: Layout.Sider, LayoutMenu, LayoutTrigger },
     setup() {
-      const dragBarRef = ref<ElRef>(null);
-      const sideRef = ref<ElRef>(null);
+      // const dragBarRef = ref<ElRef>(null);
+      // const sideRef = ref<ElRef>(null);
 
       const { getCollapsed, getMenuWidth, getSplit, getMenuTheme, getRealWidth, getMenuHidden, getMenuFixed, getIsMixMode, toggleCollapsed } =
         useMenuSetting();
@@ -46,7 +47,7 @@
 
       const appStore = useAppStore();
 
-      useDragLine(sideRef, dragBarRef);
+      // useDragLine(sideRef, dragBarRef);
 
       const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
 
@@ -90,15 +91,13 @@
 
       // 在此处使用计算量可能会导致sider异常
       // andv 更新后，如果trigger插槽可用，则此处代码可废弃
-      const getTrigger = h(LayoutTrigger);
+      // const getTrigger = h(LayoutTrigger);
 
       return {
         prefixCls,
-        sideRef,
-        dragBarRef,
         getHiddenDomStyle,
         getSiderClass,
-        getTrigger,
+        // getTrigger,
         getCollapsedWidth,
         getMenuFixed,
         showClassSideBarRef,
@@ -117,6 +116,8 @@
   @prefix-cls: ~'@{namespace}-layout-sideBar';
 
   .@{prefix-cls} {
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
     z-index: @layout-sider-fixed-z-index;
 
     &.ant-layout-sider-dark {
@@ -148,7 +149,7 @@
     }
 
     & .ant-layout-sider-trigger {
-      height: 36px;
+      // height: 36px;
       line-height: 36px;
     }
   }

src/layouts/default/sider/index.vue

@@ -1,23 +1,21 @@
 <template>
-  <MixSider v-if="getIsMixSidebar" />
-  <Sider v-else />
+  <Sider />
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
 
   import Sider from './LayoutSider.vue';
-  import MixSider from './MixSider.vue';
 
   // import { useAppInject } from '/@/hooks/web/useAppInject';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   import { useDesign } from '/@/hooks/web/useDesign';
   export default defineComponent({
     name: 'SiderWrapper',
-    components: { Sider, MixSider },
+    components: { Sider },
     setup() {
       const { prefixCls } = useDesign('layout-sider-wrapper');
       // const { getIsMobile } = useAppInject();
-      const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting();
+      const { setMenuSetting, getCollapsed, getMenuWidth } = useMenuSetting();
 
       function handleClose() {
         setMenuSetting({
@@ -25,7 +23,7 @@
         });
       }
 
-      return { prefixCls, getCollapsed, handleClose, getMenuWidth, getIsMixSidebar };
+      return { prefixCls, getCollapsed, handleClose, getMenuWidth };
     },
   });
 </script>

src/layouts/default/tabs/index.vue

@@ -21,15 +21,7 @@
         </TabPane>
       </template>
 
-      <template #rightExtra v-if="getShowRedo || getShowQuick">
-        <div class="rightExtra">
-          <TabRedo v-if="getShowRedo" />
-          <!-- <TabContent isExtra :tabItem="$route" v-if="getShowQuick" /> -->
-          <!-- 列表页全屏 
-          <FoldButton v-if="getShowFold" />-->
-          <!-- <FullscreenOutlined /> -->
-        </div>
-      </template>
+      <template #rightExtra></template>
     </Tabs>
   </div>
 </template>
@@ -40,7 +32,6 @@
 
   import { Tabs } from 'ant-design-vue';
   import TabContent from './components/TabContent.vue';
-  import TabRedo from './components/TabRedo.vue';
 
   import { useGo } from '/@/hooks/web/usePage';
 
@@ -63,7 +54,6 @@
   export default defineComponent({
     name: 'MultipleTabs',
     components: {
-      TabRedo,
       Tabs,
       TabPane: Tabs.TabPane,
       TabContent,
@@ -80,7 +70,7 @@
 
       const { prefixCls } = useDesign('multiple-tabs');
       const go = useGo();
-      const { getShowQuick, getShowRedo, getShowFold, getTabsTheme } = useMultipleTabSetting();
+      const { getShowFold, getTabsTheme } = useMultipleTabSetting();
       const { getShowHeaderTrigger } = useMenuSetting();
       const { getHeaderTheme } = useHeaderSetting();
 
@@ -145,8 +135,6 @@
         handleChange,
         activeKeyRef,
         getTabsState,
-        getShowQuick,
-        getShowRedo,
         getShowFold,
         getShowHeaderTrigger,
         getHeaderTheme,
@@ -162,9 +150,17 @@
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-multiple-tabs';
   .@{prefix-cls} {
+    border-top-right-radius: 10px;
+    background-color: transparent;
+
     :deep(.anticon) {
       display: inline-block;
     }
+
+    :deep(.ant-tabs.ant-tabs-card .ant-tabs-nav) {
+      background-color: transparent;
+    }
+
     // 代码逻辑说明: 【issues/7345】标签样式切换到极简模式样式错乱
     .rightExtra {
       display: flex;

src/settings/projectSetting.ts

@@ -24,7 +24,7 @@ const setting: ProjectConfig = {
   showSettingButton: true,
 
   // 是否显示主题切换按钮
-  showDarkModeToggle: true,
+  showDarkModeToggle: false,
 
   // 设置按钮位置 可选项
   // SettingButtonPositionEnum.AUTO: 自动选择
@@ -87,7 +87,7 @@ const setting: ProjectConfig = {
     // 显示消息中心按钮
     showNotice: false,
     // 显示菜单搜索按钮
-    showSearch: true,
+    showSearch: false,
   },
 
   // 菜单配置
@@ -142,13 +142,13 @@ const setting: ProjectConfig = {
     // 是否可以拖拽
     canDrag: true,
     // 开启快速操作
-    showQuick: true,
+    showQuick: false,
     // 是否显示刷新按钮
-    showRedo: true,
+    showRedo: false,
     // 是否显示折叠按钮
-    showFold: true,
+    showFold: false,
     // 标签页样式
-    theme: TabsThemeEnum.CARD,
+    theme: TabsThemeEnum.SIMPLE,
   },
 
   // 动画配置
@@ -178,7 +178,7 @@ const setting: ProjectConfig = {
   showBreadCrumb: false,
 
   // 显示面包屑图标
-  showBreadCrumbIcon: true,
+  showBreadCrumbIcon: false,
 
   // 是否使用全局错误捕获
   useErrorHandle: false,

src/utils/getConfigByMenuType.ts

@@ -35,9 +35,9 @@ export function getConfigByMenuType(menuType: MenuTypeEnum): {
     sideBgColor = SIDE_BAR_BG_COLOR_LIST[0];
   } else if (menuType === MenuTypeEnum.SIDEBAR) {
     // 侧边栏导航
-    themeColor = APP_PRESET_COLOR_LIST[1];
-    headerBgColor = HEADER_PRESET_BG_COLOR_LIST[4];
-    sideBgColor = SIDE_BAR_BG_COLOR_LIST[7];
+    themeColor = APP_PRESET_COLOR_LIST[0];
+    headerBgColor = HEADER_PRESET_BG_COLOR_LIST[0];
+    sideBgColor = SIDE_BAR_BG_COLOR_LIST[0];
   }
   return {
     themeColor,