v4.1.4

2025-04-05 19:42:07 +08:00 · 2023-08-01 16:20:43 +08:00 · 2023-08-01 16:20:43 +08:00 · 20757214d8
commit 20757214d8
parent 8277cbc4b8
22 changed files with 159 additions and 103 deletions
--- a/.npmrc
+++ b/.npmrc
@ -1,4 +1,4 @@
-package-lock=false
+package-lock=true
 prefer-offline=true
 save-exact=true
 engine-strict=true
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,19 @@
 # CHANGE LOG

+## 4.1.4
+
+该版本后，不会做破坏性更新了。版本功能趋于稳定，后续更新不会那么频繁了。。。。。
+
+### Feats
+
+- 新增版权信息开关
+- 做了一些小小的细节更新
+
+### Fixes
+
+- 修复获取部分元素高度不准确导致布局一些小问题
+- 修复底部版权信息展示问题
+
 ## 4.1.3

 ### Feats
--- a/src/appConfig/routerConfig.ts
+++ b/src/appConfig/routerConfig.ts
@ -30,11 +30,12 @@ import type { LayoutInst } from 'naive-ui'
 */
 export const LAYOUT_CONTENT_REF = ref<LayoutInst>()

-/** 是否启用路由切换时顶部加载条 */
-export const SETUP_ROUTER_LOADING_BAR = true
-
-/** 是否启用路由守卫, 如果设置为 false 则不会触发路由切换校验 */
-export const SETUP_ROUTER_GUARD = true
+export const SETUP_ROUTER_ACTION = {
+  /** 是否启用路由切换时顶部加载条 */
+  setupRouterLoadingBar: true,
+  /** 是否启用路由守卫, 如果设置为 false 则不会触发路由切换校验 */
+  setupRouterGuard: true,
+} as const

 /**
 *
--- a/src/components/RayIcon/index.tsx
+++ b/src/components/RayIcon/index.tsx
@ -12,6 +12,7 @@
 import './index.scss'

 import { call } from '@/utils/vue/index'
+import { completeSize } from '@/utils/element'

 import type { PropType } from 'vue'
 import type { MaybeArray } from '@/types/modules/utils'
@ -69,11 +70,11 @@ const RayIcon = defineComponent({
    const cssVars = computed(() => {
      const cssVar = {
        '--ray-icon-width': props.width
-          ? props.width + 'px'
-          : props.size + 'px',
+          ? completeSize(props.width)
+          : completeSize(props.size),
        '--ray-icon-height': props.height
-          ? props.height + 'px'
-          : props.size + 'px',
+          ? completeSize(props.height)
+          : completeSize(props.size),
        '--ray-icon-depth': props.depth,
        '--ray-icon-cursor': props.cursor,
      }
--- a/src/components/RayIframe/src/index.tsx
+++ b/src/components/RayIframe/src/index.tsx
@ -142,7 +142,9 @@ const RayIframe = defineComponent({
      return iframeEl
    }

-    expose()
+    expose({
+      iframeInst: iframeRef,
+    })

    onMounted(() => {
      on(getIframeRef(), 'load', iframeLoadSuccess.bind(this))
--- a/src/components/RayTable/src/props.ts
+++ b/src/components/RayTable/src/props.ts
@ -36,8 +36,8 @@ const rayTableProps = {
     *
     * 可以自定义渲染
     */
-    type: [String, Object] as PropType<string | VNodeChild>,
-    default: '',
+    type: [String, Object] as PropType<VNodeChild | string>,
+    default: null,
  },
  action: {
    /**
@ -208,7 +208,6 @@ const rayTableProps = {
    default: false,
  },
 } as const
-
 export default rayTableProps

 /**
--- a/src/layout/components/SiderBar/components/GlobalSeach/index.tsx
+++ b/src/layout/components/SiderBar/components/GlobalSeach/index.tsx
@ -61,6 +61,11 @@ const GlobalSeach = defineComponent({
        label: '切换',
        plain: true,
      },
+      {
+        icon: '↵',
+        label: '选择',
+        plain: true,
+      },
      {
        icon: 'esc',
        label: '关闭',
--- a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
+++ b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
@ -46,6 +46,7 @@ const SettingDrawer = defineComponent({
      menuTagSwitch,
      breadcrumbSwitch,
      invertSwitch,
+      footerSwitch,
    } = storeToRefs(settingStore)

    const modelShow = computed({
@ -65,6 +66,7 @@ const SettingDrawer = defineComponent({
      changeSwitcher,
      breadcrumbSwitch,
      invertSwitch,
+      footerSwitch,
    }
  },
  render() {
@ -110,6 +112,14 @@ const SettingDrawer = defineComponent({
                  }
                />
              </NDescriptionsItem>
+              <NDescriptionsItem label="版权信息">
+                <NSwitch
+                  v-model:value={this.footerSwitch}
+                  onUpdateValue={(bool: boolean) =>
+                    this.changeSwitcher(bool, 'footerSwitch')
+                  }
+                />
+              </NDescriptionsItem>
              <NDescriptionsItem label="反转色">
                <NSwitch
                  v-model:value={this.invertSwitch}
--- a/src/layout/components/SiderBar/components/TooltipIcon/index.tsx
+++ b/src/layout/components/SiderBar/components/TooltipIcon/index.tsx
@ -26,11 +26,11 @@ const TooltipIcon = defineComponent({
    },
    customClassName: {
      type: String,
-      default: '',
+      default: null,
    },
    tooltipText: {
      type: String,
-      default: '',
+      default: null,
    },
  },
  emits: ['click'],
@ -51,6 +51,7 @@ const TooltipIcon = defineComponent({
              name={this.iconName}
              size="18"
              customClassName={`tooltip-text__icon ${this.customClassName}`}
+              cursor="pointer"
              onClick={this.handleClick.bind(this)}
            />
          ),
--- a/src/layout/components/SiderBar/index.scss
+++ b/src/layout/components/SiderBar/index.scss
@ -7,10 +7,8 @@
  > .layout-header__method {
    width: 100%;

-    & .layout-header__method--icon {
-      cursor: pointer;
-      outline: none;
-      border: none;
+    & .ray-icon__reload--loading {
+      animation: elementRotate 0.8s linear infinite;
    }
  }
 }
--- a/src/layout/components/SiderBar/index.tsx
+++ b/src/layout/components/SiderBar/index.tsx
@ -12,8 +12,9 @@
 /**
 *
 * 本来想通过写数据配置化的方式实现顶部的功能小按钮, 结果事实发现...
- *
 * 但是我又不想改, 就这样吧
+ *
+ * 如果你希望自己 diy 一些东西，可以自己使用 computed 实现
 */

 import './index.scss'
@ -33,7 +34,6 @@ import screenfull from 'screenfull'
 import { useI18n } from '@/locales/useI18n'

 import type { IconEventMapOptions, IconEventMap } from './type'
-import type { SigninCallback } from '@/store/modules/signin/type'

 const SiderBar = defineComponent({
  name: 'SiderBar',
@ -43,12 +43,14 @@ const SiderBar = defineComponent({
    const { t } = useI18n()
    const { updateLocale, changeSwitcher } = settingStore

-    const { drawerPlacement, breadcrumbSwitch } = storeToRefs(settingStore)
+    const { drawerPlacement, breadcrumbSwitch, reloadRouteSwitch } =
+      storeToRefs(settingStore)
    const showSettings = ref(false)
    const spaceItemStyle = {
      display: 'flex',
    }
    const globalSearchShown = ref(false)
+    const isScreenfull = ref(screenfull.isFullscreen)

    /**
     *
@ -59,6 +61,9 @@ const SiderBar = defineComponent({
        name: 'reload',
        size: 18,
        tooltip: t('headerTooltip.Reload'),
+        iconClass: computed(() =>
+          !reloadRouteSwitch.value ? 'ray-icon__reload--loading' : '',
+        ),
      },
    ])
    /**
@ -75,7 +80,11 @@ const SiderBar = defineComponent({
      {
        name: 'fullscreen',
        size: 18,
-        tooltip: t('headerTooltip.FullScreen'),
+        tooltip: computed(() =>
+          isScreenfull.value
+            ? t('headerTooltip.CancelFullScreen')
+            : t('headerTooltip.FullScreen'),
+        ),
        eventKey: 'screen',
      },
      {
@ -92,10 +101,11 @@ const SiderBar = defineComponent({
      },
    ])
    const iconEventMap: IconEventMapOptions = {
+      // 刷新组件重新加载，手动设置 800ms loading 时长
      reload: () => {
        changeSwitcher(false, 'reloadRouteSwitch')

-        setTimeout(() => changeSwitcher(true, 'reloadRouteSwitch'), 300)
+        setTimeout(() => changeSwitcher(true, 'reloadRouteSwitch'), 800)
      },
      setting: () => {
        showSettings.value = true
@ -111,6 +121,8 @@ const SiderBar = defineComponent({
        } else {
          return (() => {
            screenfull.toggle()
+
+            isScreenfull.value = !screenfull.isFullscreen
          })()
        }
      },
@ -158,9 +170,14 @@ const SiderBar = defineComponent({
                {{
                  trigger: () => (
                    <RayIcon
-                      customClassName="layout-header__method--icon"
+                      customClassName={`${
+                        isRef(curr.iconClass)
+                          ? curr.iconClass.value
+                          : curr.iconClass
+                      }`}
                      name={curr.name}
                      size={curr.size}
+                      cursor="pointer"
                      onClick={this.handleIconClick.bind(this, curr.name)}
                    />
                  ),
@ -178,7 +195,9 @@ const SiderBar = defineComponent({
            {this.rightTooltipIconOptions.map((curr) => (
              <TootipIcon
                iconName={curr.name}
-                tooltipText={curr.tooltip}
+                tooltipText={
+                  isRef(curr.tooltip) ? curr.tooltip.value : curr.tooltip
+                }
                onClick={this.handleIconClick.bind(this, curr.name)}
              />
            ))}
@ -193,6 +212,7 @@ const SiderBar = defineComponent({
                customClassName="layout-header__method--icon"
                name="language"
                size="18"
+                cursor="pointer"
              />
            </NDropdown>
            <NDropdown
--- a/src/layout/default/FooterWrapper/index.scss
+++ b/src/layout/default/FooterWrapper/index.scss
@ -1,4 +1,4 @@
 .layout-footer-wrapper {
-  padding: 24px;
+  padding: 20px;
  text-align: center;
 }
--- a/src/layout/index.scss
+++ b/src/layout/index.scss
@ -1,23 +1,22 @@
-.layout {
-  box-sizing: border-box;
+.r-layout-full.r-layout-full {
+  position: fixed;
+  inset: 0;

-  > .layout-full {
-    height: 100%;
-  }
+  & .n-layout-scroll-container {
+    & .r-layout-full__viewer .n-layout-scroll-container {
+      overflow: hidden;

-  & .layout__view-container__layout .n-layout-scroll-container {
-    overflow: hidden;
-  }
+      & .r-layout-full__viewer-content {
+        height: var(--layout-content-height);
+        padding: 16px;

-  & .layout-content__router-view {
-    height: var(--layout-content-height);
-    padding: calc($layoutRouterViewContainer / 2);
+        & .n-scrollbar-container {
+          height: 100%;

-    & .n-scrollbar-container {
-      height: 100%;
-
-      & .n-scrollbar-content {
-        height: 100%;
+          & .n-scrollbar-content {
+            height: 100%;
+          }
+        }
      }
    }
  }
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@ -11,7 +11,7 @@

 import './index.scss'

-import { NLayout, NLayoutContent } from 'naive-ui'
+import { NLayout, NLayoutContent, NScrollbar } from 'naive-ui'
 import Menu from './components/Menu/index'
 import SiderBar from './components/SiderBar/index'
 import MenuTag from './components/MenuTag/index'
@ -28,57 +28,49 @@ const Layout = defineComponent({
  setup() {
    const layoutSiderBarRef = ref<HTMLElement>()
    const layoutMenuTagRef = ref<HTMLElement>()
+    const layoutFooterRef = ref<HTMLElement>()

    const settingStore = useSetting()

-    const { height: windowHeight } = useWindowSize()
-    const { menuTagSwitch: modelMenuTagSwitch } = storeToRefs(settingStore)
+    const { menuTagSwitch: modelMenuTagSwitch, footerSwitch } =
+      storeToRefs(settingStore)
    const { getLockAppScreen } = useAppLockScreen()
    const cssVarsRef = layoutHeaderCssVars([
      layoutSiderBarRef,
      layoutMenuTagRef,
+      layoutFooterRef,
    ])

    return {
-      windowHeight,
      modelMenuTagSwitch,
      cssVarsRef,
      getLockAppScreen,
      LAYOUT_CONTENT_REF,
      layoutSiderBarRef,
      layoutMenuTagRef,
+      layoutFooterRef,
+      footerSwitch,
    }
  },
  render() {
-    return (
-      <div
-        class={['layout']}
-        style={[`height: ${this.windowHeight}px`, this.cssVarsRef]}
-      >
-        {!this.getLockAppScreen() ? (
-          <NLayout class="layout-full" hasSider>
-            <Menu />
-            <NLayout class="layout__view-container__layout">
-              <SiderBar ref="layoutSiderBarRef" />
-              {this.modelMenuTagSwitch ? (
-                <MenuTag ref="layoutMenuTagRef" />
-              ) : (
-                ''
-              )}
-              <NLayoutContent
-                ref="LAYOUT_CONTENT_REF"
-                class="layout-content__router-view"
-                nativeScrollbar={false}
-              >
-                <ContentWrapper />
-                <FooterWrapper />
-              </NLayoutContent>
-            </NLayout>
-          </NLayout>
-        ) : (
-          ''
-        )}
-      </div>
+    return !this.getLockAppScreen() ? (
+      <NLayout class="r-layout-full" style={[this.cssVarsRef]} hasSider>
+        <Menu />
+        <NLayoutContent class="r-layout-full__viewer">
+          <SiderBar ref="layoutSiderBarRef" />
+          {this.modelMenuTagSwitch ? <MenuTag ref="layoutMenuTagRef" /> : ''}
+          <NLayoutContent
+            ref="LAYOUT_CONTENT_REF"
+            class="r-layout-full__viewer-content"
+            nativeScrollbar={false}
+          >
+            <ContentWrapper />
+          </NLayoutContent>
+          {this.footerSwitch ? <FooterWrapper ref="layoutFooterRef" /> : ''}
+        </NLayoutContent>
+      </NLayout>
+    ) : (
+      ''
    )
  },
 })
--- a/src/layout/layoutResize.ts
+++ b/src/layout/layoutResize.ts
@ -22,12 +22,13 @@ import type { Ref } from 'vue'
 export const layoutHeaderCssVars = (
  element: Ref<HTMLElement | undefined>[],
 ) => {
-  const siderBar = useElementSize(element[0])
-  const menuTag = useElementSize(element[1])
+  const siderBar = useElementBounding(element[0])
+  const menuTag = useElementBounding(element[1])
+  const footer = useElementBounding(element[2])

  return computed(() => {
    return {
-      '--layout-content-height': `calc(100% - ${siderBar.height.value}px - ${menuTag.height.value}px)`,
+      '--layout-content-height': `calc(100% - ${siderBar.height.value}px - ${menuTag.height.value}px - ${footer.height.value}px)`,
      '--layout-siderbar-height': `${siderBar.height.value}px`,
      '--layout-menutag-height': `${menuTag.height.value}px`,
    }
--- a/src/router/helper/permission.ts
+++ b/src/router/helper/permission.ts
@ -27,12 +27,7 @@ import { WHITE_ROUTES } from '@/appConfig/routerConfig'
 import { validRole } from '@/router/helper/routerCopilot'
 import { isValueType } from '@/utils/hook'

-import type {
-  Router,
-  NavigationGuardNext,
-  RouteLocationNormalized,
-} from 'vue-router'
-import type { AppMenuOption } from '@/types/modules/app'
+import type { Router, RouteLocationNormalized } from 'vue-router'
 import type { AppRouteMeta } from '@/router/type'

 /** 路由守卫 */
--- a/src/router/helper/routerCopilot.ts
+++ b/src/router/helper/routerCopilot.ts
@ -10,11 +10,7 @@
 */

 import { permissionRouter } from './permission'
-import {
-  SETUP_ROUTER_LOADING_BAR,
-  SETUP_ROUTER_GUARD,
-  SUPER_ADMIN,
-} from '@/appConfig/routerConfig'
+import { SETUP_ROUTER_ACTION, SUPER_ADMIN } from '@/appConfig/routerConfig'
 import { useSignin } from '@/store'
 import { useVueRouter } from '@/router/helper/useVueRouter'
 import { ROOT_ROUTE } from '@/appConfig/appConfig'
@ -112,11 +108,14 @@ export const setupRouterLoadingBar = (router: Router) => {
 * @remark 统一的路由相关功能配置, 虽然该方法有点蠢...
 */
 export const vueRouterRegister = (router: Router) => {
-  if (SETUP_ROUTER_LOADING_BAR) {
+  const { setupRouterLoadingBar: cfgSetupRouterLoadingBar, setupRouterGuard } =
+    SETUP_ROUTER_ACTION
+
+  if (cfgSetupRouterLoadingBar) {
    setupRouterLoadingBar(router)
  }

-  if (SETUP_ROUTER_GUARD) {
+  if (setupRouterGuard) {
    permissionRouter(router)
  }
 }
--- a/src/store/modules/setting/index.ts
+++ b/src/store/modules/setting/index.ts
@ -37,6 +37,7 @@ export const useSetting = defineStore(
      localeLanguage: getAppDefaultLanguage(),
      lockScreenSwitch: false, // 锁屏开关
      lockScreenInputSwitch: false, // 锁屏输入状态开关(预留该字段是为了方便拓展用, 但是舍弃了该字段, 改为使用 useAppLockScreen 方法)
+      footerSwitch: true, // 底部区域开关
    })

    /** 修改当前语言 */
--- a/src/store/modules/setting/type.ts
+++ b/src/store/modules/setting/type.ts
@ -13,4 +13,5 @@ export interface SettingState {
  invertSwitch: boolean
  lockScreenSwitch: boolean
  lockScreenInputSwitch: boolean
+  footerSwitch: boolean
 }
--- a/src/styles/root.scss
+++ b/src/styles/root.scss
@ -1,3 +1,14 @@
+// css vars root
 :root {
  --r-bezier: cubic-bezier(0.4, 0, 0.2, 1);
 }
+
+// animation root
+@keyframes elementRotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
--- a/src/views/multi/views/multi-menu-two/views/sub-menu/views/multi-menu-two-one/index.tsx
+++ b/src/views/multi/views/multi-menu-two/views/sub-menu/views/multi-menu-two-one/index.tsx
@ -22,7 +22,11 @@ const MultiMenuTwoOne = defineComponent({
  },
  render() {
    return (
-      <div>
+      <div
+        style={{
+          height: 'var(--layout-content-height)',
+        }}
+      >
        多级菜单2-2-1
        <NInput v-model={this.inputValue} />
      </div>
--- a/src/views/table/index.tsx
+++ b/src/views/table/index.tsx
@ -22,6 +22,7 @@ import {
  NH2,
  NUl,
  NLi,
+  NSpace,
 } from 'naive-ui'
 import RayTable from '@/components/RayTable/index'
 import RayCollapseGrid from '@/components/RayCollapseGrid/index'
@ -163,7 +164,7 @@ const TableView = defineComponent({
  },
  render() {
    return (
-      <NLayout>
+      <div>
        <NH2>RayTable 组件使用</NH2>
        <NUl alignText>
          <NLi>
@ -231,13 +232,14 @@ const TableView = defineComponent({
          style="margin-top: 18px"
          ref="tableRef"
          scrollX={2000}
-          title={h(
-            NSwitch,
-            {
-              onUpdateValue: (value: boolean) => (this.tableLoading = value),
-            },
-            {},
-          )}
+          title={
+            <NSpace align="center">
+              <span>标题插槽:</span>
+              <NSwitch
+                onUpdateValue={(value: boolean) => (this.tableLoading = value)}
+              ></NSwitch>
+            </NSpace>
+          }
          data={this.tableData}
          v-model:columns={this.actionColumns}
          pagination={{
@ -251,7 +253,7 @@ const TableView = defineComponent({
            tableFooter: () => '表格的底部内容区域插槽，有时候你可能会用上',
          }}
        </RayTable>
-      </NLayout>
+      </div>
    )
  },
 })