Merge remote-tracking branch 'origin/main' into multi-tenant

2024-12-06 18:37:56 +08:00
parent f66454256b a0886abd38
commit 5be94b499d
181 changed files with 6304 additions and 5882 deletions
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import {
  ProLayout,
-  WaterMark,
  getMenuData,
  clearMenuItem,
-  type MenuDataItem,
+  MenuDataItem,
 } from 'antdv-pro-layout';
 import RightContent from './components/RightContent.vue';
 import Tabs from './components/Tabs.vue';
@@ -12,26 +11,25 @@ import GlobalMask from '@/components/GlobalMask/index.vue';
 import { scriptUrl } from '@/assets/js/icon_font_8d5l8fzk5b87iudi';
 import {
  computed,
-  reactive,
-  watch,
+  nextTick,
  onMounted,
  onUnmounted,
-  nextTick,
+  reactive,
+  watch,
 } from 'vue';
+import { useRouter } from 'vue-router';
 import useLayoutStore from '@/store/modules/layout';
+import useAppStore from '@/store/modules/app';
 import useRouterStore from '@/store/modules/router';
 import useTabsStore from '@/store/modules/tabs';
-import useAlarmStore from '@/store/modules/alarm';
-import useAppStore from '@/store/modules/app';
-import { useRouter } from 'vue-router';
-import { MENU_PATH_INLINE } from '@/constants/menu-constants';
-const { proConfig, waterMarkContent } = useLayoutStore();
 import useI18n from '@/hooks/useI18n';
+import useAlarmStore from '@/store/modules/alarm';
 import { getServerTime } from '@/api';
+import { MENU_PATH_INLINE } from '@/constants/menu-constants';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-
 import { parseDateToStr } from '@/utils/date-utils';
 import { parseUrlPath } from '@/plugins/file-static-url';
+const { proConfig, waterMarkContent } = useLayoutStore();
 const { t, currentLocale } = useI18n();
 const routerStore = useRouterStore();
 const tabsStore = useTabsStore();
@@ -39,7 +37,7 @@ const appStore = useAppStore();
 const router = useRouter();

 /**菜单面板 */
-let layoutState = reactive({
+const layoutState = reactive({
  collapsed: false, // 是否展开菜单面板
  openKeys: ['/'], // 打开菜单key
  selectedKeys: ['/index'], // 选中高亮菜单key
@@ -247,7 +245,7 @@ onUnmounted(() => {
 </script>

 <template>
-  <WaterMark :content="waterMarkContent" :z-index="100">
+  <a-watermark :content="waterMarkContent" :z-index="100">
    <ProLayout
      v-model:collapsed="layoutState.collapsed"
      v-model:selectedKeys="layoutState.selectedKeys"
@@ -290,10 +288,10 @@ onUnmounted(() => {
        </RouterLink>
      </template>

-      <!--插槽-顶部左侧，只对side布局有效-->
+      <!--插槽-渲染顶部内容区域，仅布局side有效-->
      <template #headerContentRender></template>

-      <!--插槽-顶部右侧-->
+      <!--插槽-渲染顶部内容右端区域-->
      <template #headerContentRightRender>
        <RightContent />
      </template>
@@ -364,7 +362,7 @@ onUnmounted(() => {

    <!-- 全局遮罩 -->
    <GlobalMask />
-  </WaterMark>
+  </a-watermark>
 </template>

 <style lang="less" scoped>
@@ -413,6 +411,19 @@ onUnmounted(() => {
  }
 }

+.theme-light.theme-menu-light .app-name {
+  color: #141414 !important;
+}
+.theme-light.theme-menu-dark .app-name {
+  color: #fff !important;
+}
+.theme-dark.theme-menu-light .app-name {
+  color: #fff !important;
+}
+.theme-dark.theme-menu-dark .app-name {
+  color: #fff !important;
+}
+
 .footer {
  z-index: 16;
  margin: 0px;
@@ -427,6 +438,7 @@ onUnmounted(() => {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
+    align-items: center;
    padding: 4px 16px;
    background: #fff;
    box-shadow: 0 1px 4px #0015291f;
@@ -434,6 +446,10 @@ onUnmounted(() => {
    height: 32px;
  }

+  [data-theme='dark'] &-fixed {
+    background: #141414;
+  }
+
  & #serverTimeDom {
    color: inherit;
    opacity: 0.85;
--- a/src/layouts/components/RightContent.vue
+++ b/src/layouts/components/RightContent.vue
@@ -1,20 +1,25 @@
 <script setup lang="ts">
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import svgLight from '@/assets/svg/light.svg';
+import svgDark from '@/assets/svg/dark.svg';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { viewTransitionTheme } from 'antdv-pro-layout';
+import { ProModal } from 'antdv-pro-modal';
+import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useFullscreen } from '@vueuse/core';
+import { hasPermissions } from '@/plugins/auth-user';
 import useI18n from '@/hooks/useI18n';
+import useLayoutStore from '@/store/modules/layout';
 import useAppStore from '@/store/modules/app';
 import useUserStore from '@/store/modules/user';
 import useAlarmStore from '@/store/modules/alarm';
 import useMaskStore from '@/store/modules/mask';
-import { hasPermissions } from '@/plugins/auth-user';
 import { dbClear } from '@/utils/cache-db-utils';
 import { CACHE_DB_TABLE_DND } from '@/constants/cache-keys-constants';
 import { TENANTADMIN_ROLE_KEY } from '@/constants/admin-constants';
-
-import { ref } from 'vue';
 const { isFullscreen, toggle } = useFullscreen();
 const { t, changeLocale, optionsLocale } = useI18n();
+const layoutStore = useLayoutStore();
 const maskStore = useMaskStore();
 const userStore = useUserStore();
 const appStore = useAppStore();
@@ -64,6 +69,13 @@ function fnClickAlarm() {
  router.push({ name: 'ActiveAlarm_2088' });
 }

+/**改变主题色 */
+function fnClickTheme(e: any) {
+  viewTransitionTheme(isDarkMode => {
+    layoutStore.changeConf('theme', isDarkMode ? 'light' : 'dark');
+  }, e);
+}
+
 /**改变多语言 */
 function fnChangeLocale(e: any) {
  changeLocale(e.key);
@@ -92,7 +104,7 @@ function fnChangeLocale(e: any) {

    <!-- 锁屏操作 -->
    <span v-perms:has="['system:setting:lock']">
-      <a-tooltip placement="bottom">
+      <a-tooltip placement="bottomRight">
        <template #title>{{ t('loayouts.rightContent.lock') }}</template>
        <a-button type="text" style="color: inherit" @click="fnClickLock()">
          <template #icon>
@@ -101,10 +113,11 @@ function fnChangeLocale(e: any) {
        </a-button>
        <ProModal
          :drag="true"
+          :center-y="true"
          :width="400"
          :minHeight="200"
          :mask-closable="false"
-          v-model:visible="lockConfirm"
+          v-model:open="lockConfirm"
          :title="t('loayouts.rightContent.lockTip')"
          @ok="fnClickLockToPage()"
        >
@@ -128,7 +141,7 @@ function fnChangeLocale(e: any) {
      </a-tooltip>
    </span>

-    <a-tooltip placement="bottom">
+    <a-tooltip placement="bottomRight">
      <template #title>{{ t('loayouts.rightContent.fullscreen') }}</template>
      <a-button type="text" style="color: inherit" @click="toggle">
        <template #icon>
@@ -138,14 +151,27 @@ function fnChangeLocale(e: any) {
      </a-button>
    </a-tooltip>

+    <a-tooltip placement="bottomRight">
+      <template #title>{{ t('loayouts.rightContent.theme') }}</template>
+      <a-button type="text" @click="fnClickTheme">
+        <template #icon>
+          <img
+            v-if="layoutStore.proConfig.theme === 'dark'"
+            :src="svgDark"
+            class="theme-icon"
+          />
+          <img v-else :src="svgLight" class="theme-icon" />
+        </template>
+      </a-button>
+    </a-tooltip>
+
    <a-dropdown
-      placement="bottom"
+      placement="bottomRight"
      trigger="click"
      v-if="appStore.i18nOpen && hasPermissions(['system:setting:i18n'])"
    >
-      <a-button size="small" type="default">
-        {{ t('i18n') }}
-        <DownOutlined />
+      <a-button type="text" style="color: inherit">
+        <template #icon> <TranslationOutlined /> </template>
      </a-button>
      <template #overlay>
        <a-menu @click="fnChangeLocale">
@@ -213,4 +239,11 @@ function fnChangeLocale(e: any) {
    overflow: hidden;
  }
 }
+
+.theme-icon {
+  width: 18px;
+  height: 18px;
+  margin-bottom: 4px;
+  color: inherit;
+}
 </style>
--- a/src/layouts/components/Tabs.vue
+++ b/src/layouts/components/Tabs.vue
@@ -4,9 +4,9 @@ import { computed, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import useTabsStore from '@/store/modules/tabs';
 import useI18n from '@/hooks/useI18n';
-const { t } = useI18n();
 const tabsStore = useTabsStore();
 const router = useRouter();
+const { t } = useI18n();

 defineProps({
  /**标签栏宽度 */
@@ -112,7 +112,7 @@ watch(router.currentRoute, v => tabsStore.tabOpen(v), { immediate: true });
    <a-tabs
      class="tabs"
      :class="{ 'tabs-fixed': fixedHeader }"
-      :style="{ width: width, top: headerRender === false ? 0 : undefined }"
+      :style="{ width: fixedHeader ? width : '100%', top: headerRender === false ? 0 : undefined }"
      hide-add
      tab-position="top"
      type="editable-card"
@@ -150,7 +150,7 @@ watch(router.currentRoute, v => tabsStore.tabOpen(v), { immediate: true });
          </a-tooltip>
          <a-tooltip placement="topRight">
            <template #title>{{ t('loayouts.tabs.more') }}</template>
-            <a-dropdown trigger="click" placement="bottomRight">
+            <a-dropdown placement="bottomRight" trigger="click">
              <a-button type="ghost" shape="circle" size="small">
                <template #icon><DownOutlined /></template>
              </a-button>
@@ -199,7 +199,18 @@ watch(router.currentRoute, v => tabsStore.tabOpen(v), { immediate: true });
  }
 }

+[data-theme='dark'] .tabs {
+  background: #141414;
+}
+
 .tabs :deep(.ant-tabs-nav:before) {
  border-bottom: none;
 }
+.tabs :deep(.ant-tabs-nav-list .ant-tabs-tab) {
+  border-radius: 8px;
+}
+.tabs :deep(.ant-tabs-nav-list .ant-tabs-tab.ant-tabs-tab-active) {
+  border-bottom-right-radius: unset;
+  border-bottom-left-radius: unset;
+}
 </style>