v3.25.0【优化】密码加密随机盐;【优化】java依赖版本;【优化】后端依赖库;【优化】单号生成器;【优化】防重复提交;【优化】sa-base.yaml健康检查邮箱;【新增】前端夜间模式;【优化】标签页issue;【优化】字典int回显bug

2025-11-10 12:43:48 +08:00 · 2025-08-05 20:10:13 +08:00
parent 97df843072
commit 075e7ad134
147 changed files with 2412 additions and 1772 deletions
--- a/smart-admin-web-javascript/src/App.vue
+++ b/smart-admin-web-javascript/src/App.vue
@@ -12,7 +12,7 @@
  <a-config-provider
    :locale="antdLocale"
    :theme="{
-      algorithm: compactFlag ? theme.compactAlgorithm : theme.defaultAlgorithm,
+      algorithm: themeAlgorithm,
      token: {
        colorPrimary: themeColors[colorIndex].primaryColor,
        colorLink: themeColors[colorIndex].primaryColor,
@@ -48,12 +48,10 @@
  import { messages } from '/@/i18n';
  import { useAppConfigStore } from '/@/store/modules/system/app-config';
  import { useSpinStore } from '/@/store/modules/system/spin';
-  import { theme } from 'ant-design-vue';
+  import { Popover, theme } from 'ant-design-vue';
  import { themeColors } from '/@/theme/color.js';
-  import { Popover } from 'ant-design-vue';
  import SmartCopyIcon from '/@/components/framework/smart-copy-icon/index.vue';
-  import _ from 'lodash';
-  const slots = useSlots();
+
  const antdLocale = computed(() => messages[useAppConfigStore().language].antdLocale);
  const dayjsLocale = computed(() => messages[useAppConfigStore().language].dayjsLocale);
  dayjs.locale(dayjsLocale);
@@ -61,16 +59,24 @@
  // 全局loading
  let spinStore = useSpinStore();
  const spinning = computed(() => spinStore.loading);
-  // 是否紧凑
-  const compactFlag = computed(() => useAppConfigStore().compactFlag);
  // 主题颜色
  const colorIndex = computed(() => {
    return useAppConfigStore().colorIndex;
  });
+  // 主题
+  const themeAlgorithm = computed(() => {
+    let themeArray = [];
+    themeArray.push(useAppConfigStore().darkModeFlag ? theme.darkAlgorithm : theme.defaultAlgorithm);
+    if (useAppConfigStore().compactFlag) {
+      themeArray.push(theme.compactAlgorithm);
+    }
+    return themeArray;
+  });
  // 圆角
  const borderRadius = computed(() => {
    return useAppConfigStore().borderRadius;
  });
+
  function transformCellText({ text, column, record, index }) {
    if (column && column.textEllipsisFlag === true) {
      return h(
@@ -78,7 +84,14 @@
        { placement: 'bottom' },
        {
          default: () =>
-            h('div', { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, id: `${column.dataIndex}${index}` }, text),
+            h(
+              'div',
+              {
+                style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
+                id: `${column.dataIndex}${index}`,
+              },
+              text
+            ),
          content: () =>
            h('div', { style: { display: 'flex' } }, [
              h('div', text),
@@ -91,9 +104,24 @@
    }
  }

+  const { useToken } = theme;
+  const { token } = useToken();
 </script>
-<style scoped lang="less">
+<style lang="less">
+  @color-bg-container: v-bind('token.colorBgContainer');
+
  :deep(.ant-table-column-sorters) {
    align-items: flex-start !important;
  }
+
+  .smart-query-form {
+    background-color: @color-bg-container;
+    padding: 5px 10px;
+    margin-bottom: 10px;
+  }
+
+  .smart-detail-header {
+    background-color: @color-bg-container;
+    padding: 10px;
+  }
 </style>
--- a/smart-admin-web-javascript/src/components/support/table-operator/index.vue
+++ b/smart-admin-web-javascript/src/components/support/table-operator/index.vue
@@ -74,13 +74,13 @@
  watch(
    () => props.modelValue,
    (value) => {
-      newColumn.forEach(item=>{
-        value.forEach(itemNewColumns=>{
-          if(item.dataIndex==itemNewColumns.dataIndex){
-            Object.assign(item,itemNewColumns)
+      newColumn.forEach((item) => {
+        value.forEach((itemNewColumns) => {
+          if (item.dataIndex === itemNewColumns.dataIndex) {
+            Object.assign(item, itemNewColumns);
          }
-        })
-      })
+        });
+      });
    },
    {
      deep: true,
@@ -90,6 +90,7 @@

  //构建用户的数据列
  async function buildUserTableColumns() {
+
    if (!props.tableId) {
      return;
    }
@@ -127,6 +128,7 @@

  // 处理退出全屏
  function handleExitFullScreen() {
+    document.querySelector('#smartAdminHeader').style.display = 'block';
    fullScreenFlag.value = false;
    useAppConfigStore().exitFullScreen();
    document.removeEventListener('fullscreenchange', handleFullscreenChange);
@@ -137,6 +139,7 @@

  //判断各种浏览器 -全屏
  function launchElementFullScreen(element) {
+    document.querySelector('#smartAdminHeader').style.display = 'none';
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
@@ -179,28 +182,29 @@
  // ----------------- 弹窗 修改表格列 -------------------

  const smartTableColumnModal = ref();
+
  function showModal() {
    smartTableColumnModal.value.show(newColumn, props.tableId);
  }

  // 将弹窗修改的列数据，赋值给原表格 列数组
  function updateColumn(changeColumnArray) {
-    let obj={}
+    let obj = {};
    // 如果为空数组代表恢复默认，使用原始表格数据
    //合并列
-    if(_.isEmpty(changeColumnArray)){
+    if (_.isEmpty(changeColumnArray)) {
      obj = mergeColumn(_.cloneDeep(originalColumn), changeColumnArray);
-    }else{
+    } else {
      obj = mergeColumn(_.cloneDeep(newColumn), changeColumnArray);
    }
    const newColumns = obj.newColumns;
-    newColumn.forEach(item=>{
-      obj.newColumns.forEach(itemNewColumns=>{
-        if(item.dataIndex==itemNewColumns.dataIndex){
-          Object.assign(item,itemNewColumns)
+    newColumn.forEach((item) => {
+      obj.newColumns.forEach((itemNewColumns) => {
+        if (item.dataIndex === itemNewColumns.dataIndex) {
+          Object.assign(item, itemNewColumns);
        }
-      })
-    })
+      });
+    });
    emit(
      'update:modelValue',
      newColumns.filter((e) => e.showFlag)
@@ -217,6 +221,6 @@
        buildUserTableColumns();
      }
    },
-    { immediate: true }
+    { immediate: false }
  );
 </script>
--- a/smart-admin-web-javascript/src/config/app-config.js
+++ b/smart-admin-web-javascript/src/config/app-config.js
@@ -16,6 +16,8 @@ export const appDefaultConfig = {
  sideMenuWidth: 200,
  //标签页位置
  pageTagLocation: 'center',
+  // 夜间模式
+  darkModeFlag: false,
  // 菜单主题
  sideMenuTheme: 'dark',
  // 主题颜色索引
--- a/smart-admin-web-javascript/src/i18n/lang/en-US/index.js
+++ b/smart-admin-web-javascript/src/i18n/lang/en-US/index.js
@@ -17,6 +17,7 @@ export default {
  'setting.table.yHeight': 'Table Height',
  'setting.pagetag.location': 'TagPage Position',
  'setting.color': 'Theme Color',
+  'setting.darkmode': 'Dark Mode',
  'setting.menu.layout': 'Menu Layout',
  'setting.menu.width': 'Menu Width',
  'setting.menu.theme': 'Menu Theme',
--- a/smart-admin-web-javascript/src/i18n/lang/zh-CN/index.js
+++ b/smart-admin-web-javascript/src/i18n/lang/zh-CN/index.js
@@ -17,6 +17,7 @@ export default {
  'setting.table.yHeight': '表格高度',
  'setting.pagetag.location': '标签页位置',
  'setting.color': '主题颜色',
+  'setting.darkmode': '夜间模式',
  'setting.menu.layout': '菜单布局',
  'setting.menu.width': '菜单宽度',
  'setting.menu.theme': '菜单主题',
--- a/smart-admin-web-javascript/src/layout/components/header-user-space/header-message.vue
+++ b/smart-admin-web-javascript/src/layout/components/header-user-space/header-message.vue
@@ -252,7 +252,6 @@
  }

  .dropdown-tabs {
-    background-color: @base-bg-color;
    border-radius: 4px;
  }

--- a/smart-admin-web-javascript/src/layout/components/header-user-space/header-setting.vue
+++ b/smart-admin-web-javascript/src/layout/components/header-user-space/header-setting.vue
@@ -13,7 +13,7 @@
    <a-form layout="horizontal" :label-col="{ span: 8 }">
      <a-form-item label="语言/Language">
        <a-select v-model:value="formState.language" @change="changeLanguage" style="width: 120px">
-          <a-select-option v-for="item in i18nList" :key="item.value" :value="item.value">{{ item.text }}</a-select-option>
+          <a-select-option v-for="item in i18nList" :key="item.value" :value="item.value">{{ item.text }} </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('setting.color')">
@@ -51,12 +51,6 @@
        <a-input @change="changePageWidth" v-model:value="formState.pageWidth" />
        像素（px）或者 百分比
      </a-form-item>
-      <a-form-item :label="$t('setting.compact')">
-        <a-radio-group v-model:value="formState.compactFlag" button-style="solid" @change="changeCompactFlag">
-          <a-radio-button :value="false">默认</a-radio-button>
-          <a-radio-button :value="true">紧凑</a-radio-button>
-        </a-radio-group>
-      </a-form-item>
      <a-form-item :label="$t('setting.menu.layout')">
        <a-radio-group @change="changeLayout" button-style="solid" v-model:value="formState.layout">
          <a-radio-button v-for="item in $smartEnumPlugin.getValueDescList('LAYOUT_ENUM')" :key="item.value" :value="item.value">
@@ -70,6 +64,12 @@
          <a-radio-button value="light">Light</a-radio-button>
        </a-radio-group>
      </a-form-item>
+      <a-form-item :label="$t('setting.compact')">
+        <a-radio-group v-model:value="formState.compactFlag" button-style="solid" @change="changeCompactFlag">
+          <a-radio-button :value="false">默认</a-radio-button>
+          <a-radio-button :value="true">紧凑</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
      <a-form-item :label="$t('setting.pagetag.location')">
        <a-radio-group v-model:value="formState.pageTagLocation" button-style="solid" @change="changePageTagLocation">
          <a-radio-button value="top">顶部</a-radio-button>
@@ -92,7 +92,6 @@
      <a-form-item :label="$t('setting.bread')">
        <a-switch
          @change="changeBreadCrumbFlag"
-          :disabled="formState.pageTagLocation === 'top'"
          v-model:checked="formState.breadCrumbFlag"
          checked-children="显示"
          un-checked-children="隐藏"
@@ -115,23 +114,26 @@
          un-checked-children="默认不展开"
        />
      </a-form-item>
+      <a-form-item :label="$t('setting.darkmode')">
+        <a-switch @change="changeDarkMode" v-model:checked="formState.darkModeFlag" checked-children="开启" un-checked-children="关闭" />
+      </a-form-item>
      <br />
      <br />
    </a-form>

    <div class="footer">
      <a-button style="margin-right: 8px" type="primary" @click="copy">复制配置信息</a-button>
-      <a-button type="block" danger @click="reset">恢复默认配置 </a-button>
+      <a-button type="primary" danger @click="reset">恢复默认配置</a-button>
    </div>
  </a-drawer>
 </template>
 <script setup>
-  import { ref, reactive, h, watch } from 'vue';
+  import { h, reactive, ref, watch } from 'vue';
  import { i18nList } from '/@/i18n/index';
  import { useI18n } from 'vue-i18n';
  import localStorageKeyConst from '/@/constants/local-storage-key-const';
  import { LAYOUT_ENUM } from '/@/constants/layout-const';
-  import { localRead, localSave } from '/@/utils/local-util';
+  import { localSave } from '/@/utils/local-util';
  import { useAppConfigStore } from '/@/store/modules/system/app-config';
  import { Modal } from 'ant-design-vue';
  import { appDefaultConfig } from '/@/config/app-config';
@@ -203,6 +205,8 @@
    sideMenuWidth: appConfigStore.sideMenuWidth,
    // 菜单主题
    sideMenuTheme: appConfigStore.sideMenuTheme,
+    // 夜间模式
+    darkModeFlag: appConfigStore.darkModeFlag,
    // 页面紧凑
    compactFlag: appConfigStore.compactFlag,
    // 页面圆角
@@ -229,21 +233,8 @@

  let formState = reactive({ ...formValue });

-  watch(
-    () => formState.pageTagLocation,
-    () => {
-      if (formState.pageTagLocation === 'top') {
-        formState.breadCrumbFlag = false;
-      } else {
-        formState.breadCrumbFlag = true;
-      }
-    },
-    {
-      immediate: true,
-    }
-  );
-
  const { locale } = useI18n();
+
  function changeLanguage(languageValue) {
    locale.value = languageValue;
    appConfigStore.$patch({
@@ -293,6 +284,7 @@
      compactFlag: e.target.value,
    });
  }
+
  function changeBorderRadius(e) {
    appConfigStore.$patch({
      borderRadius: e,
@@ -310,6 +302,7 @@
      pageTagFlag: e,
    });
  }
+
  function changeFlatPattern(e) {
    appConfigStore.$patch({
      flatPattern: e,
@@ -345,6 +338,12 @@
      watermarkFlag: e,
    });
  }
+
+  function changeDarkMode(e) {
+    appConfigStore.$patch({
+      darkModeFlag: e,
+    });
+  }
 </script>
 <style lang="less" scoped>
  .footer {
@@ -354,9 +353,9 @@
    width: 100%;
    border-top: 1px solid #e9e9e9;
    padding: 10px 16px;
-    background: #fff;
    text-align: left;
-    z-index: 1;
+    z-index: 99999;
+    background-color: white;
  }

  .color-container {
--- a/smart-admin-web-javascript/src/layout/components/page-tag/components/antd-tab.vue
+++ b/smart-admin-web-javascript/src/layout/components/page-tag/components/antd-tab.vue
@@ -9,7 +9,7 @@
 -->
 <template>
  <!-- 标签页，共两部分：1、标签 ；2、标签操作区 -->
-  <a-row style="border-bottom: 1px solid #eeeeee; position: relative" v-show="pageTagFlag">
+  <a-row style="position: relative" v-show="pageTagFlag">
    <a-dropdown :trigger="['contextmenu']">
      <div class="smart-page-tag">
        <a-tabs style="width: 100%" type="card" :tab-position="mode" v-model:activeKey="selectedKey" size="small" @tabClick="selectTab">
@@ -138,18 +138,17 @@
 <style scoped lang="less">
  @smart-page-tag-operate-width: 40px;
  @color-primary: v-bind('token.colorPrimary');
+  @color-primary-bg: v-bind('token.colorPrimaryBg');

  .smart-page-tag-operate {
    width: @smart-page-tag-operate-width;
    height: @smart-page-tag-operate-width;
-    background-color: #ffffff;
    font-size: 17px;
    text-align: center;
    vertical-align: middle;
    line-height: @smart-page-tag-operate-width;
    padding-right: 10px;
    cursor: pointer;
-    color: #606266;

    .smart-page-tag-operate-icon {
      width: 20px;
@@ -167,6 +166,7 @@

  .smart-page-tag-operate:hover {
    color: @color-primary;
+    background-color: @color-primary-bg;
  }

  .smart-page-tag {
@@ -180,7 +180,6 @@
    padding-right: 20px;
    padding-left: 20px;
    user-select: none;
-    background: #fff;
    width: calc(100% - @smart-page-tag-operate-width);

    .smart-page-tag-close {
@@ -193,11 +192,11 @@

    :deep(.ant-tabs-nav) {
      margin: 0;
+      &::before{
+        border-bottom: none !important;
+      }
    }

-    :deep(.ant-tabs-nav::before) {
-      border-bottom: 1px solid #ffffff;
-    }

    :deep(.ant-tabs-small > .ant-tabs-nav .ant-tabs-tab) {
      padding: 5px 8px 3px 15px;
@@ -209,12 +208,16 @@
    }

    :deep(.ant-tabs-tab-active) {
+      background-color: @color-primary-bg;
+
      .smart-page-tag-close {
        color: @color-primary;
      }
    }
+
    :deep(.ant-tabs-nav .ant-tabs-tab:hover) {
-      background-color: white;
+      background-color: @color-primary-bg;
+
      .smart-page-tag-close {
        color: @color-primary;
      }
--- a/smart-admin-web-javascript/src/layout/components/page-tag/components/chrome-tab.vue
+++ b/smart-admin-web-javascript/src/layout/components/page-tag/components/chrome-tab.vue
@@ -9,7 +9,7 @@
 -->
 <template>
  <!-- 标签页，共两部分：1、标签 ；2、标签操作区 -->
-  <a-row style="border-bottom: 1px solid #eeeeee; position: relative" v-show="pageTagFlag">
+  <a-row style="position: relative" v-show="pageTagFlag">
    <a-dropdown :trigger="['contextmenu']">
      <div class="smart-page-tag">
        <a-tabs style="width: 100%" :tab-position="mode" v-model:activeKey="selectedKey" size="small" @tabClick="selectTab">
@@ -51,259 +51,215 @@
 </template>

 <script setup>
-import { AppstoreOutlined, CloseOutlined } from '@ant-design/icons-vue';
-import { computed, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
-import { useAppConfigStore } from '/@/store/modules/system/app-config';
-import { useUserStore } from '/@/store/modules/system/user';
-import { theme } from 'ant-design-vue';
+  import { AppstoreOutlined, CloseOutlined } from '@ant-design/icons-vue';
+  import { computed, ref, watch } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
+  import { useAppConfigStore } from '/@/store/modules/system/app-config';
+  import { useUserStore } from '/@/store/modules/system/user';
+  import { theme } from 'ant-design-vue';

-//标签页 是否显示
-const pageTagFlag = computed(() => useAppConfigStore().$state.pageTagFlag);
+  //标签页 是否显示
+  const pageTagFlag = computed(() => useAppConfigStore().$state.pageTagFlag);

-const router = useRouter();
-const route = useRoute();
-const mode = ref('top');
-const tagNav = computed(() => useUserStore().getTagNav || []);
-const selectedKey = ref(route.name);
+  const router = useRouter();
+  const route = useRoute();
+  const mode = ref('top');
+  const tagNav = computed(() => useUserStore().getTagNav || []);
+  const selectedKey = ref(route.name);

-watch(
-  () => route.name,
-  (newValue, oldValue) => {
-    selectedKey.value = newValue;
-  },
-  { immediate: true }
-);
+  watch(
+    () => route.name,
+    (newValue, oldValue) => {
+      selectedKey.value = newValue;
+    },
+    { immediate: true }
+  );

-//选择某个标签页
-function selectTab(name) {
-  if (selectedKey.value === name) {
-    return;
-  }
-  // 寻找tag
-  let tag = tagNav.value.find((e) => e.menuName === name);
-  if (!tag) {
-    router.push({ name: HOME_PAGE_NAME });
-    return;
-  }
-  // router.push({ name, query: Object.assign({ _keepAlive: 1 }, tag.menuQuery) });
-  router.push({ name, query: tag.menuQuery });
-}
-
-//通过菜单关闭
-function closeByMenu(closeAll) {
-  let find = tagNav.value.find((e) => e.menuName === selectedKey.value);
-  if (!find || closeAll) {
-    closeTag(null, true);
-  } else {
-    closeTag(find, true);
-  }
-}
-
-//直接关闭
-function closeTag(item, closeAll) {
-  // 关闭单个tag
-  if (item && !closeAll) {
-    let goName = HOME_PAGE_NAME;
-    let goQuery = undefined;
-    if (item.fromMenuName && item.fromMenuName !== item.menuName && tagNav.value.some((e) => e.menuName === item.fromMenuName)) {
-      goName = item.fromMenuName;
-      goQuery = item.fromMenuQuery;
-    } else {
-      // 查询左侧tag
-      let index = tagNav.value.findIndex((e) => e.menuName === item.menuName);
-      if (index > 0) {
-        // 查询左侧tag
-        let leftTagNav = tagNav.value[index - 1];
-        goName = leftTagNav.menuName;
-        goQuery = leftTagNav.menuQuery;
-      }
+  //选择某个标签页
+  function selectTab(name) {
+    if (selectedKey.value === name) {
+      return;
    }
-    // router.push({ name: goName, query: Object.assign({ _keepAlive: 1 }, goQuery) });
-    router.push({ name: goName, query: goQuery });
-  } else if (!item && closeAll) {
-    // 关闭所有tag
-    router.push({ name: HOME_PAGE_NAME });
+    // 寻找tag
+    let tag = tagNav.value.find((e) => e.menuName === name);
+    if (!tag) {
+      router.push({ name: HOME_PAGE_NAME });
+      return;
+    }
+    // router.push({ name, query: Object.assign({ _keepAlive: 1 }, tag.menuQuery) });
+    router.push({ name, query: tag.menuQuery });
  }
-  // 关闭其他tag不做处理 直接调用closeTagNav
-  useUserStore().closeTagNav(item ? item.menuName : null, closeAll);
-}

-const { useToken } = theme;
-const { token } = useToken();
-const borderRadius = 8 + 'px';
+  //通过菜单关闭
+  function closeByMenu(closeAll) {
+    let find = tagNav.value.find((e) => e.menuName === selectedKey.value);
+    if (!find || closeAll) {
+      closeTag(null, true);
+    } else {
+      closeTag(find, true);
+    }
+  }
+
+  //直接关闭
+  function closeTag(item, closeAll) {
+    // 关闭单个tag
+    if (item && !closeAll) {
+      let goName = HOME_PAGE_NAME;
+      let goQuery = undefined;
+      if (item.fromMenuName && item.fromMenuName !== item.menuName && tagNav.value.some((e) => e.menuName === item.fromMenuName)) {
+        goName = item.fromMenuName;
+        goQuery = item.fromMenuQuery;
+      } else {
+        // 查询左侧tag
+        let index = tagNav.value.findIndex((e) => e.menuName === item.menuName);
+        if (index > 0) {
+          // 查询左侧tag
+          let leftTagNav = tagNav.value[index - 1];
+          goName = leftTagNav.menuName;
+          goQuery = leftTagNav.menuQuery;
+        }
+      }
+      // router.push({ name: goName, query: Object.assign({ _keepAlive: 1 }, goQuery) });
+      router.push({ name: goName, query: goQuery });
+    } else if (!item && closeAll) {
+      // 关闭所有tag
+      router.push({ name: HOME_PAGE_NAME });
+    }
+    // 关闭其他tag不做处理 直接调用closeTagNav
+    useUserStore().closeTagNav(item ? item.menuName : null, closeAll);
+  }
+
+  const { useToken } = theme;
+  const { token } = useToken();
+  const borderRadius = 8 + 'px';
 </script>

 <style scoped lang="less">
-@smart-page-tag-operate-width: 40px;
-@color-primary: v-bind('token.colorPrimary');
+  @smart-page-tag-operate-width: 40px;
+  @color-primary: v-bind('token.colorPrimary');
+  @color-primary-bg: v-bind('token.colorPrimaryBg');

-.smart-page-tag-operate {
-  width: @smart-page-tag-operate-width;
-  height: @smart-page-tag-operate-width;
-  background-color: #ffffff;
-  font-size: 17px;
-  text-align: center;
-  vertical-align: middle;
-  line-height: @smart-page-tag-operate-width;
-  padding-right: 10px;
-  cursor: pointer;
-  color: #606266;
+  .smart-page-tag-operate {
+    width: @smart-page-tag-operate-width;
+    height: @smart-page-tag-operate-width;
+    font-size: 17px;
+    text-align: center;
+    vertical-align: middle;
+    line-height: @smart-page-tag-operate-width;
+    padding-right: 10px;
+    cursor: pointer;

-  .smart-page-tag-operate-icon {
-    width: 20px;
-    height: 20px;
-    transition: all 1s;
-    transform-origin: 10px 20px;
-  }
-
-  .smart-page-tag-operate-icon:hover {
-    width: 20px;
-    height: 20px;
-    transform: rotate(360deg);
-  }
-}
-
-.smart-page-tag-operate:hover {
-  color: @color-primary;
-}
-
-.smart-page-tag {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  align-content: center;
-  align-items: flex-end;
-  justify-content: space-between;
-  min-height: @page-tag-height;
-  padding-right: 20px;
-  padding-left: 20px;
-  user-select: none;
-  background: #fff;
-  width: calc(100% - @smart-page-tag-operate-width);
-
-  .smart-page-tag-close {
-    margin-left: 5px;
-    font-size: 12px;
-    color: #666666;
-  }
-
-  /**  覆盖 ant design vue的 tabs 样式，变小一点 **/
-
-  :deep(.ant-tabs-nav) {
-    margin: 0;
-    //   padding: 0 0 2px 0;
-    min-height: 35px;
-    min-width: 120px;
-    box-sizing: border-box;
-  }
-
-  :deep(.ant-tabs-nav::before) {
-    border-bottom: 1px solid #ffffff;
-  }
-
-  :deep(.ant-tabs-small > .ant-tabs-nav .ant-tabs-tab) {
-    padding: 5px 18px 3px 24px;
-    border-radius: v-bind(borderRadius) v-bind(borderRadius) 0 0;
-    margin: 0 -10px;
-    &:nth-child(1) {
-      margin-left: 0 !important;
+    .smart-page-tag-operate-icon {
+      width: 20px;
+      height: 20px;
+      transition: all 1s;
+      transform-origin: 10px 20px;
    }
-    &:nth-last-child(2) {
-      margin-right: 0 !important;

+    .smart-page-tag-operate-icon:hover {
+      width: 20px;
+      height: 20px;
+      transform: rotate(360deg);
    }
  }
-  .smart-page-tag-content {
-    display: inline-block;
-    min-width: 100px;
-    &::after {
-      content: '';
-      position: absolute;
-      width: 1px;
-      height: 16px;
-      position: absolute;
-      right: 9px;
-      z-index: -2;
-      top: 10px;
-      background: #eeeeee;
-    }
-    .smart-page-tag-icon{
-        margin-right:5px;
-    }
+
+  .smart-page-tag-operate:hover {
+    color: @color-primary;
  }
-  :deep(.ant-tabs-tab-active) {
+
+  .smart-page-tag {
    position: relative;
-    background-size: 60% 100%;
-    & + .ant-tabs-tab {
-      margin-left: -50px;
+    box-sizing: border-box;
+    display: flex;
+    align-content: center;
+    align-items: flex-end;
+    justify-content: space-between;
+    min-height: @page-tag-height;
+    padding-right: 20px;
+    padding-left: 20px;
+    user-select: none;
+    width: calc(100% - @smart-page-tag-operate-width);
+
+    .smart-page-tag-close {
+      margin-left: 5px;
+      font-size: 12px;
+      color: #666666;
    }

-    &::before {
-      content: '';
-      background: url(/@/assets/images/nav/active_bg2.svg) no-repeat left;
-      width: 50%;
-      height: 35px;
-      //   background-size: 130%;
-      z-index: -1;
-      position: absolute;
-      left: -4px;
-      bottom: 0;
+    /**  覆盖 ant design vue的 tabs 样式，变小一点 **/
+
+    :deep(.ant-tabs-nav) {
+      margin: 0;
+      //   padding: 0 0 2px 0;
+      min-height: 35px;
+      min-width: 120px;
+      box-sizing: border-box;
+      &::before{
+        border-bottom: none !important;
+      }
    }
-    &::after {
-      content: '';
-      background: url(/@/assets/images/nav/active_bg2.svg) no-repeat left;
-      width: 50%;
-      height: 35px;
-      transform: scaleX(-1);
-      //   background-size: 130%;
-      z-index: -1;
-      position: absolute;
-      right: -4px;
-      bottom: 0;
+
+    :deep(.ant-tabs-small > .ant-tabs-nav .ant-tabs-tab) {
+      padding: 5px 18px 3px 24px;
+      border-radius: v-bind(borderRadius) v-bind(borderRadius) 0 0;
+      margin: 0 -10px;
+
+      &:nth-child(1) {
+        margin-left: 0 !important;
+      }
+
+      &:nth-last-child(2) {
+        margin-right: 0 !important;
+      }
    }
+
    .smart-page-tag-content {
-      &::before {
+      display: inline-block;
+      min-width: 100px;
+
+      &::after {
        content: '';
        position: absolute;
-        height: 35px;
-        background: #e9efff;
-        width: 60%;
-        left: 0;
-        right: 0;
-        // top: 0;
-        bottom: 0;
-        margin: auto;
-        z-index: -1;
+        width: 1px;
+        height: 16px;
+        position: absolute;
+        right: 9px;
+        z-index: -2;
+        top: 10px;
+        background: #eeeeee;
      }
-      &::after {
-        display: none;
+
+      .smart-page-tag-icon {
+        margin-right: 5px;
      }
    }
-    .smart-page-tag-close {
-      color: @color-primary;
-    }
-  }
-  :deep(.ant-tabs-ink-bar) {
-    display: none;
-  }
-  :deep(.ant-tabs-nav .ant-tabs-tab:hover) {
-    &:not(.ant-tabs-tab-active) {
+
+    :deep(.ant-tabs-tab-active) {
+      position: relative;
+      background-size: 60% 100%;
+
+      & + .ant-tabs-tab {
+        margin-left: -50px;
+      }
+
      &::before {
        content: '';
-        background: url(/@/assets/images/nav/active_bg2_default.svg) no-repeat left;
+        mask: url(/@/assets/images/nav/active_bg2.svg) no-repeat left;
+        background-color: @color-primary-bg;
        width: 50%;
        height: 35px;
        //   background-size: 130%;
-        z-index: -2;
+        z-index: -1;
        position: absolute;
        left: -4px;
        bottom: 0;
      }
+
      &::after {
        content: '';
-        background: url(/@/assets/images/nav/active_bg2_default.svg) no-repeat left;
+        mask: url(/@/assets/images/nav/active_bg2.svg) no-repeat left;
+        background-color: @color-primary-bg;
        width: 50%;
        height: 35px;
        transform: scaleX(-1);
@@ -313,13 +269,13 @@ const borderRadius = 8 + 'px';
        right: -4px;
        bottom: 0;
      }
+
      .smart-page-tag-content {
-        color:rgba(0,0,0,.88);
        &::before {
          content: '';
          position: absolute;
          height: 35px;
-          background: #dee1e6;
+          background: @color-primary-bg;
          width: 60%;
          left: 0;
          right: 0;
@@ -328,15 +284,76 @@ const borderRadius = 8 + 'px';
          margin: auto;
          z-index: -1;
        }
+
        &::after {
          display: none;
        }
      }
+
+      .smart-page-tag-close {
+        color: @color-primary;
+      }
    }

-    .smart-page-tag-close {
-      color: @color-primary;
+    :deep(.ant-tabs-ink-bar) {
+      display: none;
+    }
+
+    :deep(.ant-tabs-nav .ant-tabs-tab:hover) {
+      &:not(.ant-tabs-tab-active) {
+        &::before {
+          content: '';
+          mask: url(/@/assets/images/nav/active_bg2_default.svg) no-repeat left;
+          background-color: @color-primary-bg;
+          width: 50%;
+          height: 35px;
+          //   background-size: 130%;
+          z-index: -2;
+          position: absolute;
+          left: -4px;
+          bottom: 0;
+        }
+
+        &::after {
+          content: '';
+          mask: url(/@/assets/images/nav/active_bg2_default.svg) no-repeat left;
+          background-color: @color-primary-bg;
+          width: 50%;
+          height: 35px;
+          transform: scaleX(-1);
+          //   background-size: 130%;
+          z-index: -1;
+          position: absolute;
+          right: -4px;
+          bottom: 0;
+        }
+
+        .smart-page-tag-content {
+          color: @color-primary;
+
+          &::before {
+            content: '';
+            position: absolute;
+            height: 35px;
+            background: @color-primary-bg;
+            width: 60%;
+            left: 0;
+            right: 0;
+            // top: 0;
+            bottom: 0;
+            margin: auto;
+            z-index: -1;
+          }
+
+          &::after {
+            display: none;
+          }
+        }
+      }
+
+      .smart-page-tag-close {
+        color: @color-primary;
+      }
    }
  }
-}
 </style>
--- a/smart-admin-web-javascript/src/layout/components/page-tag/components/default-tab.vue
+++ b/smart-admin-web-javascript/src/layout/components/page-tag/components/default-tab.vue
@@ -9,16 +9,17 @@
 -->
 <template>
  <!-- 标签页，共两部分：1、标签 ；2、标签操作区 -->
-  <a-row style="border-bottom: 1px solid #eeeeee; position: relative" v-show="pageTagFlag">
+  <a-row style=" position: relative" v-show="pageTagFlag">
    <a-dropdown :trigger="['contextmenu']">
      <div class="smart-page-tag">
        <a-tabs style="width: 100%" :tab-position="mode" v-model:activeKey="selectedKey" size="small" @tabClick="selectTab">
          <a-tab-pane v-for="item in tagNav" :key="item.menuName">
            <template #tab>
-              <span>
+              <span class="smart-page-tag-span">
+                <home-outlined v-if="item.menuName === HOME_PAGE_NAME" class="smart-page-tag-close smart-page-tag-icon" />
+                <component class="smart-page-tag-icon" v-else :is="$antIcons[item.menuIcon]" />
                {{ item.menuTitle }}
                <close-outlined @click.stop="closeTag(item, false)" v-if="item.menuName !== HOME_PAGE_NAME" class="smart-page-tag-close" />
-                <home-outlined style="font-size: 12px" v-if="item.menuName === HOME_PAGE_NAME" class="smart-page-tag-close" />
              </span>
            </template>
          </a-tab-pane>
@@ -137,18 +138,17 @@
 <style scoped lang="less">
  @smart-page-tag-operate-width: 40px;
  @color-primary: v-bind('token.colorPrimary');
+  @color-primary-bg: v-bind('token.colorPrimaryBg');

  .smart-page-tag-operate {
    width: @smart-page-tag-operate-width;
    height: @smart-page-tag-operate-width;
-    background-color: #ffffff;
    font-size: 17px;
    text-align: center;
    vertical-align: middle;
    line-height: @smart-page-tag-operate-width;
    padding-right: 10px;
    cursor: pointer;
-    color: #606266;

    .smart-page-tag-operate-icon {
      width: 20px;
@@ -168,6 +168,14 @@
    color: @color-primary;
  }

+  .smart-page-tag-span:first-child {
+    padding-right: 15px;
+
+    .smart-page-tag-icon {
+      font-size: 12px;
+    }
+  }
+
  .smart-page-tag {
    position: relative;
    box-sizing: border-box;
@@ -179,9 +187,12 @@
    padding-right: 20px;
    padding-left: 20px;
    user-select: none;
-    background: #fff;
    width: calc(100% - @smart-page-tag-operate-width);

+    .smart-page-tag-icon {
+      margin-right: 4px;
+    }
+
    .smart-page-tag-close {
      margin-left: 5px;
      font-size: 10px;
@@ -194,10 +205,9 @@
      margin: 0;
      padding: 0 0 2px 0;
      max-height: 32px;
-    }
-
-    :deep(.ant-tabs-nav::before) {
-      border-bottom: 1px solid #ffffff;
+      &::before{
+        border-bottom: none !important;
+      }
    }

    :deep(.ant-tabs-small > .ant-tabs-nav .ant-tabs-tab) {
@@ -207,13 +217,16 @@
    }

    :deep(.ant-tabs-tab-active) {
-      background-color: #eeeeee;
+      background-color: @color-primary-bg;
+
      .smart-page-tag-close {
        color: @color-primary;
      }
    }
+
    :deep(.ant-tabs-nav .ant-tabs-tab:hover) {
-      background-color: #eeeeee;
+      background-color: @color-primary-bg;
+
      .smart-page-tag-close {
        color: @color-primary;
      }
--- a/smart-admin-web-javascript/src/layout/components/page-tag/index.vue
+++ b/smart-admin-web-javascript/src/layout/components/page-tag/index.vue
@@ -8,7 +8,7 @@
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012
 -->
 <template>
-  <div id="smartAdminPageTag">
+  <div id="smartAdminPageTag" class="page-tag-div">
    <DefaultTab v-if="pageTagStyle === PAGE_TAG_ENUM.DEFAULT.value" />
    <AntdTab v-if="pageTagStyle === PAGE_TAG_ENUM.ANTD.value" />
    <ChromeTab v-if="pageTagStyle === PAGE_TAG_ENUM.CHROME.value" />
@@ -22,6 +22,15 @@
  import AntdTab from './components/antd-tab.vue';
  import ChromeTab from './components/chrome-tab.vue';
  import { PAGE_TAG_ENUM } from '/@/constants/layout-const.js';
+  import { theme } from 'ant-design-vue';

  const pageTagStyle = computed(() => useAppConfigStore().$state.pageTagStyle);
+  const { useToken } = theme;
+  const { token } = useToken();
 </script>
+<style lang="less" scoped>
+  @color-border-secondary: v-bind('token.colorBorderSecondary');
+  .page-tag-div{
+    border-bottom: 1px solid @color-border-secondary;
+  }
+</style>
--- a/smart-admin-web-javascript/src/layout/components/side-expand-menu/recursion-menu.vue
+++ b/smart-admin-web-javascript/src/layout/components/side-expand-menu/recursion-menu.vue
@@ -43,6 +43,7 @@
  import _ from 'lodash';
  import menuEmitter from './side-expand-menu-mitt';
  import { useUserStore } from '/@/store/modules/system/user';
+  import { theme } from 'ant-design-vue';

  // 选中的顶级菜单
  let topMenu = ref({});
@@ -83,12 +84,20 @@
  }

  defineExpose({ updateSelectKeyAndOpenKey });
+
+  const { useToken } = theme;
+  const { token } = useToken();
 </script>
 <style scoped lang="less">
+  @color-bg-container: v-bind('token.colorBgContainer');
+  @color-border-secondary: v-bind('token.colorBorderSecondary');
+
  .recursion-container {
    height: 100vh;
-    background: #ffffff;
+    background-color: @color-bg-container;
  }
+  .recursion-container ::-webkit-scrollbar { width: 0 !important }
+
  .bottom-menu{
    overflow: auto;
    display: flex;
@@ -102,8 +111,7 @@
    justify-content: center;
    height: @header-user-height;
    font-size: 16px;
-    color: #515a6e;
-    border-bottom: 1px solid #f3f3f3;
-    border-right: 1px solid #f3f3f3;
+    border-bottom: 1px solid  @color-border-secondary;
+    border-right: 1px solid  @color-border-secondary;
  }
 </style>
--- a/smart-admin-web-javascript/src/layout/components/top-expand-menu/recursion-menu.vue
+++ b/smart-admin-web-javascript/src/layout/components/top-expand-menu/recursion-menu.vue
@@ -12,14 +12,13 @@
    <!-- 顶部logo区域 -->
    <div class="logo" @click="onGoHome" :style="sideMenuWidth" v-if="!collapsed">
      <img class="logo-img" :src="logoImg" />
-      <div class="title smart-logo title-light" v-if="isLight">{{ websiteName }}</div>
-      <div class="title smart-logo title-dark" v-if="!isLight">{{ websiteName }}</div>
+      <div class="title" >{{ websiteName }}</div>
    </div>
    <div class="min-logo" @click="onGoHome" v-if="collapsed">
      <img class="logo-img" :src="logoImg" />
    </div>
    <!-- 次级菜单展示 -->
-    <a-menu :selectedKeys="selectedKeys" :theme="theme" :openKeys="openKeys" mode="inline">
+    <a-menu :selectedKeys="selectedKeys" theme="light" :openKeys="openKeys" mode="inline">
      <template v-for="item in topMenu.children" :key="item.menuId">
        <template v-if="item.visibleFlag">
          <template v-if="$lodash.isEmpty(item.children)">
@@ -123,25 +122,25 @@

  defineExpose({ updateSelectKeyAndOpenKey });

-  const isLight = computed(() => useAppConfigStore().$state.sideMenuTheme === 'light');
-  const color = computed(() => {
-    let isLight = useAppConfigStore().$state.sideMenuTheme === 'light';
-    return {
-      background: isLight ? '#FFFFFF' : '#001529',
-    };
+  const darkModeFlag = computed(() => useAppConfigStore().$state.darkModeFlag);
+
+  const logoHeight = computed(() => {
+    if(useAppConfigStore().$state.compactFlag){
+      return '40px';
+    }else{
+      return '46px';
+    }
  });
 </script>
 <style scoped lang="less">
  .recursion-container {
    height: 100%;
-    background-color: v-bind('color.background');
  }

  .min-logo {
-    height: @header-user-height;
-    line-height: @header-user-height;
+    height: v-bind(logoHeight);
+    line-height: v-bind(logoHeight);
    padding: 0px 15px 0px 15px;
-    // background-color: v-bind('color.background');

    width: 80px;
    z-index: 21;
@@ -158,15 +157,15 @@
    display: flex;
    align-items: center;
    justify-content: center;
-    height: @header-user-height;
+    height: v-bind(logoHeight);
    font-size: 16px;
    color: #515a6e;
    border-bottom: 1px solid #f3f3f3;
    border-right: 1px solid #f3f3f3;
  }
  .logo {
-    height: @header-user-height;
-    line-height: @header-user-height;
+    height: v-bind(logoHeight);
+    line-height: v-bind(logoHeight);
    padding: 0px 15px 0px 15px;
    width: 100%;
    z-index: 100;
@@ -174,6 +173,7 @@
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
+    background-color: #001529;

    .logo-img {
      width: 30px;
@@ -186,7 +186,7 @@
      overflow: hidden;
      word-wrap: break-word;
      white-space: nowrap;
-      color: v-bind('theme === "light" ? "#001529": "#ffffff"');
+      color: #ffffff;
    }
  }
 </style>
--- a/smart-admin-web-javascript/src/layout/components/top-expand-menu/top-menu.vue
+++ b/smart-admin-web-javascript/src/layout/components/top-expand-menu/top-menu.vue
@@ -10,7 +10,7 @@
 <template>
  <div class="top-menu-container">
    <!-- 一级菜单展示 -->
-    <a-menu :selectedKeys="selectedKeys" mode="horizontal" :theme="theme">
+    <a-menu :selectedKeys="selectedKeys" mode="horizontal" theme="dark">
      <template v-for="item in menuTree" :key="item.menuId">
        <template v-if="item.visibleFlag">
          <a-menu-item :key="item.menuId.toString()" @click="onSelectMenu(item)">
@@ -29,13 +29,10 @@
  import { computed, ref } from 'vue';
  import { MENU_TYPE_ENUM } from '/@/constants/system/menu-const';
  import { router } from '/@/router';
-  import { useAppConfigStore } from '/@/store/modules/system/app-config';
  import { useUserStore } from '/@/store/modules/system/user';

  import menuEmitter from './top-expand-menu-mitt';

-  const websiteName = computed(() => useAppConfigStore().websiteName);
-  const theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
  const menuTree = computed(() => useUserStore().getMenuTree || []);

  const props = defineProps({
@@ -108,15 +105,15 @@
    width: v-bind('menuInfo.width');
    flex-shrink: 0;
  }
-  .ant-menu-dark {
-    background: #1677ff;
-    color: #fff;
-  }
-  .ant-menu-light {
-    background: #1677ff;
-    color: #fff;
-  }
-  :deep(.ant-menu-item-selected){
+  //.ant-menu-dark {
+  //  background: #1677ff;
+  //  color: #fff;
+  //}
+  //.ant-menu-light {
+  //  background: #1677ff;
+  //  color: #fff;
+  //}
+  :deep(.ant-menu-item-selected) {
    background: #0958d9 !important;
    color: #fff !important;
  }
@@ -145,7 +142,7 @@
      overflow: hidden;
      word-wrap: break-word;
      white-space: nowrap;
-      color: v-bind('theme === "light" ? "#001529": "#ffffff"');
+      color: #ffffff;
    }
  }
 </style>
--- a/smart-admin-web-javascript/src/layout/components/top-menu/index.vue
+++ b/smart-admin-web-javascript/src/layout/components/top-menu/index.vue
@@ -48,6 +48,7 @@
  import HeaderAvatar from '../header-user-space/header-avatar.vue';
  import HeaderSetting from '../header-user-space/header-setting.vue';
  import HeaderMessage from '../header-user-space/header-message.vue';
+  import { theme } from 'ant-design-vue';

  // 设置
  const headerSetting = ref();
@@ -96,9 +97,14 @@
  function onGoHome() {
    router.push({ name: HOME_PAGE_NAME });
  }
+
+  const { useToken } = theme;
+  const { token } = useToken();
 </script>

 <style lang="less" scoped>
+  @color-border-secondary: v-bind('token.colorBorderSecondary');
+
  .header-main {
    display: flex;
    flex-direction: row;
@@ -107,7 +113,7 @@
    padding-left: 16px;
    height: 48px;
    z-index: 21;
-    border-bottom: 1px solid rgb(238, 238, 238);
+    border-bottom: 1px solid @color-border-secondary;

    .logo {
      min-width: 192px;
--- a/smart-admin-web-javascript/src/layout/side-expand-layout.vue
+++ b/smart-admin-web-javascript/src/layout/side-expand-layout.vue
@@ -105,6 +105,7 @@
  import { useRouter } from 'vue-router';
  import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
  import { LAYOUT_ELEMENT_IDS } from '/@/layout/layout-const.js';
+  import { theme as antDesignTheme } from 'ant-design-vue';
  const appConfigStore = useAppConfigStore();

  const windowHeight = ref(window.innerHeight);
@@ -139,7 +140,7 @@
  watch(
    pageTagLocation,
    (newVal) => {
-      if (newVal == 'top') {
+      if (newVal === 'top') {
        nextTick(() => {
          sizeComputed();
        });
@@ -200,8 +201,14 @@
  function goHome() {
    router.push({ name: HOME_PAGE_NAME });
  }
+
+  const { useToken } = antDesignTheme;
+  const { token } = useToken();
 </script>
 <style scoped lang="less">
+  @color-bg-container: v-bind('token.colorBgContainer');
+  @color-border-secondary: v-bind('token.colorBorderSecondary');
+
  :deep(.ant-layout-header) {
    height: auto;
  }
@@ -210,14 +217,14 @@
  }

  .smart-layout-header {
-    background: #fff;
+    background: @color-bg-container;
    padding: 0;
    z-index: 21;
  }

  .smart-layout-header-user {
    height: @header-user-height;
-    border-bottom: 1px solid #f6f6f6;
+    border-bottom: 1px solid @color-border-secondary;
  }

  .smart-layout-header-left {
@@ -237,7 +244,7 @@
    }

    .home-button:hover {
-      background-color: #efefef;
+      background-color: @color-bg-container;
    }

    .location-breadcrumb {
@@ -301,7 +308,7 @@
      background-color: inherit;
      min-height: auto;
      position: relative;
-      padding: 10px 10px 0px 10px;
+      padding: 5px 10px 0px 10px;
      height: calc(100% - v-bind(dueHeight) px);
      overflow-x: hidden;
    }
--- a/smart-admin-web-javascript/src/layout/side-layout.vue
+++ b/smart-admin-web-javascript/src/layout/side-layout.vue
@@ -62,7 +62,11 @@
          :url="item.meta.frameUrl"
        />
        <!--非iframe使用router-view-->
-        <div v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name != e.name)" style="height: 100%;" class="admin-content">
+        <div
+          v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name != e.name)"
+          style="height: 100%"
+          class="admin-content"
+        >
          <router-view v-slot="{ Component }">
            <keep-alive :include="keepAliveIncludes">
              <component :is="Component" :key="route.name" />
@@ -94,7 +98,7 @@
 </template>

 <script setup>
-  import { computed, onMounted, ref, watch } from 'vue';
+  import { computed, onMounted, ref, watch, nextTick } from 'vue';
  import { useAppConfigStore } from '../store/modules/system/app-config';
  import HeaderUserSpace from './components/header-user-space/index.vue';
  import MenuLocationBreadcrumb from './components/menu-location-breadcrumb/index.vue';
@@ -109,7 +113,8 @@
  import { useRouter } from 'vue-router';
  import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
  import { LAYOUT_ELEMENT_IDS } from '/@/layout/layout-const.js';
-  import { nextTick } from 'vue';
+  import { theme as antDesignTheme } from 'ant-design-vue';
+
  const appConfigStore = useAppConfigStore();

  const windowHeight = ref(window.innerHeight);
@@ -133,7 +138,7 @@
  const pageTagLocation = computed(() => useAppConfigStore().$state.pageTagLocation);
  // 多余高度
  const dueHeight = computed(() => {
-    let due = 40;
+    let due = 45;
    if (useAppConfigStore().$state.pageTagFlag) {
      due = due + 40;
    }
@@ -146,7 +151,7 @@
  watch(
    pageTagLocation,
    (newVal) => {
-      if (newVal == 'top') {
+      if (newVal === 'top') {
        nextTick(() => {
          sizeComputed();
        });
@@ -158,6 +163,7 @@
  );

  const rightWidth = ref(0);
+
  function sizeComputed() {
    const tagParentElement = document.querySelector('.location-breadcrumb');
    const tagsElement = tagParentElement.querySelector('.ant-tabs-nav-list');
@@ -201,6 +207,7 @@
  };

  const router = useRouter();
+
  function goHome() {
    router.push({ name: HOME_PAGE_NAME });
  }
@@ -211,9 +218,14 @@

  // ----------------------- keep-alive相关 -----------------------
  let { route, keepAliveIncludes, iframeNotKeepAlivePageFlag, keepAliveIframePages } = smartKeepAlive();
+
+  const { useToken } = antDesignTheme;
+  const { token } = useToken();
 </script>

 <style lang="less" scoped>
+  @color-border-secondary: v-bind('token.colorBorderSecondary');
+  @color-bg-container: v-bind('token.colorBgContainer');
  :deep(.ant-layout-header) {
    height: auto;
  }
@@ -223,14 +235,14 @@
  }

  .layout-header {
-    background: #fff;
+    background: @color-bg-container;
    padding: 0;
    z-index: 21;
  }

  .layout-header-user {
    height: @header-user-height;
-    border-bottom: 1px solid #f6f6f6;
+    border-bottom: 1px solid @color-border-secondary;
  }

  .layout-header-left {
@@ -242,6 +254,7 @@
      overflow: hidden;
      display: flex;
    }
+
    .collapsed-button {
      margin-left: 10px;
      line-height: @header-user-height;
@@ -255,7 +268,7 @@
    }

    .home-button:hover {
-      background-color: #efefef;
+      background-color: @color-bg-container;
    }

    .location-breadcrumb {
@@ -280,6 +293,7 @@
      height: 100vh;
      overflow-x: hidden;
      overflow-y: scroll;
+
      &.fixed-side {
        position: fixed;
        height: 100vh;
@@ -291,10 +305,12 @@
    .side-menu::-webkit-scrollbar {
      width: 4px;
    }
+
    .side-menu::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.2);
    }
+
    .side-menu::-webkit-scrollbar-track {
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
@@ -338,7 +354,7 @@
      min-height: auto;
      position: relative;
      overflow-x: hidden;
-      padding: 10px 10px 0px 10px;
+      padding: 5px 10px 0px 10px;
      height: calc(100% - v-bind(dueHeight) px);
    }
  }
--- a/smart-admin-web-javascript/src/layout/top-expand-layout.vue
+++ b/smart-admin-web-javascript/src/layout/top-expand-layout.vue
@@ -10,7 +10,7 @@
 <template>
  <a-layout class="admin-layout" style="min-height: 100%">
    <!-- 侧边菜单 side-menu -->
-    <a-layout-sider :theme="theme" class="side-menu" :collapsed="collapsed" :trigger="null">
+    <a-layout-sider theme="light" class="side-menu" :collapsed="collapsed" :trigger="null">
      <!-- 左侧菜单 -->
      <TopExpandMenu :collapsed="collapsed" />
    </a-layout-sider>
@@ -62,7 +62,11 @@
          :url="item.meta.frameUrl"
        />
        <!--非iframe使用router-view-->
-        <div v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name != e.name)" style="height: 100%;" class="admin-content">
+        <div
+          v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name != e.name)"
+          style="height: 100%"
+          class="admin-content"
+        >
          <router-view v-slot="{ Component }">
            <keep-alive :include="keepAliveIncludes">
              <component :is="Component" :key="route.name" />
@@ -71,7 +75,9 @@
        </div>
      </a-layout-content>
      <!-- footer 版权公司信息 -->
-      <a-layout-footer class="smart-layout-footer" v-show="footerFlag"> <SmartFooter /></a-layout-footer>
+      <a-layout-footer class="smart-layout-footer" v-show="footerFlag">
+        <SmartFooter />
+      </a-layout-footer>
      <!---- 回到顶部 --->
      <a-back-top :target="backTopTarget" :visibilityHeight="80" />
    </a-layout>
@@ -96,6 +102,7 @@
  import SideHelpDoc from './components/side-help-doc/index.vue';
  import { useRouter } from 'vue-router';
  import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
+  import { theme as antDesignTheme } from 'ant-design-vue';

  const windowHeight = ref(window.innerHeight);

@@ -125,7 +132,7 @@
  watch(
    pageTagLocation,
    (newVal) => {
-      if (newVal == 'top') {
+      if (newVal === 'top') {
        nextTick(() => {
          sizeComputed();
        });
@@ -136,6 +143,7 @@
    }
  );
  const rightWidth = ref(0);
+
  function sizeComputed() {
    const tagParentElement = document.querySelector('.location-breadcrumb');
    const tagsElement = tagParentElement.querySelector('.ant-tabs-nav-list');
@@ -149,6 +157,7 @@
    ro.observe(tagsElement);
    ro.observe(parentElement);
  }
+
  //是否隐藏菜单
  const collapsed = ref(false);

@@ -183,27 +192,36 @@
  // ----------------------- keep-alive相关 -----------------------
  let { route, keepAliveIncludes, iframeNotKeepAlivePageFlag, keepAliveIframePages } = smartKeepAlive();
  const router = useRouter();
+
  function goHome() {
    router.push({ name: HOME_PAGE_NAME });
  }
+
+  const { useToken } = antDesignTheme;
+  const { token } = useToken();
+  console.log(33,token.value)
 </script>
 <style scoped lang="less">
+  @color-border-secondary: v-bind('token.colorBorderSecondary');
+  @color-bg-container: v-bind('token.colorBgContainer');
+
  :deep(.ant-layout-header) {
    height: auto;
  }
+
  :deep(.layout-header) {
    height: auto;
  }

  .smart-layout-header {
-    background: #fff;
+    background: @color-bg-container;
    padding: 0;
    z-index: 21;
  }

  .smart-layout-header-user {
    height: @header-user-height;
-    border-bottom: 1px solid #f6f6f6;
+    border-bottom: 1px solid @color-border-secondary;
  }

  .smart-layout-header-left {
@@ -223,7 +241,7 @@
    }

    .home-button:hover {
-      background-color: #efefef;
+      background-color: @color-bg-container;
    }

    .location-breadcrumb {
@@ -252,13 +270,16 @@
        top: 0;
      }
    }
+
    .side-menu::-webkit-scrollbar {
      width: 4px;
    }
+
    .side-menu::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.2);
    }
+
    .side-menu::-webkit-scrollbar-track {
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
@@ -270,6 +291,7 @@
      height: 100vh;
      max-width: 100px;
      width: auto !important;
+
      &.fixed-side {
        position: fixed;
        height: 100vh;
@@ -300,7 +322,7 @@
      background-color: inherit;
      min-height: auto;
      position: relative;
-      padding: 10px 10px 0px 10px;
+      padding: 5px 10px 0px 10px;
      height: calc(100% - v-bind(dueHeight) px);
      overflow-x: hidden;
    }
--- a/smart-admin-web-javascript/src/layout/top-layout.vue
+++ b/smart-admin-web-javascript/src/layout/top-layout.vue
@@ -9,9 +9,11 @@
    <a-layout-content :id="LAYOUT_ELEMENT_IDS.content" class="admin-layout-content">
      <!---标签页-->
      <div class="page-tag-div" v-show="(pageTagFlag && !fullScreenFlag) || breadCrumbFlag" :id="LAYOUT_ELEMENT_IDS.header">
-        <MenuLocationBreadcrumb v-if="pageTagLocation !== 'top'" />
        <PageTag />
      </div>
+      <div class="bread-crumb-div" v-if="breadCrumbFlag">
+        <MenuLocationBreadcrumb />
+      </div>

      <!--不keepAlive的iframe使用单个iframe组件-->
      <IframeIndex v-if="iframeNotKeepAlivePageFlag" :key="route.name" :name="route.name" :url="route.meta.frameUrl" />
@@ -26,7 +28,11 @@
      />

      <!--非iframe使用router-view-->
-      <div v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name !== e.name)" :style="{height: contentBoxHeight+'px'}" class="admin-content">
+      <div
+        v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name !== e.name)"
+        :style="{ height: contentBoxHeight + 'px' }"
+        class="admin-content"
+      >
        <router-view v-slot="{ Component }">
          <keep-alive :include="keepAliveIncludes">
            <component :is="Component" :key="route.name" />
@@ -58,6 +64,7 @@
  import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
  import { LAYOUT_ELEMENT_IDS } from '/@/layout/layout-const.js';
  import MenuLocationBreadcrumb from './components/menu-location-breadcrumb/index.vue';
+  import { theme as antDesignTheme } from 'ant-design-vue';

  const windowHeight = ref(window.innerHeight);
  //主题颜色
@@ -78,42 +85,48 @@
  const footerFlag = computed(() => useAppConfigStore().$state.footerFlag);
  // 是否显示水印
  const watermarkFlag = computed(() => useAppConfigStore().$state.watermarkFlag);
-  // 标签页位置
-  const pageTagLocation = computed(() => useAppConfigStore().$state.pageTagLocation);
  // 面包屑
  const breadCrumbFlag = computed(() => useAppConfigStore().$state.breadCrumbFlag);
  // 页面宽度
  const pageWidth = computed(() => useAppConfigStore().$state.pageWidth);

-  let contentBoxHeight=ref()
-  // 多余高度
-  const dueHeight = computed(() => {
-    if (fullScreenFlag.value) {
-      return '0';
+  let contentBoxHeight = ref();
+  // 页面内容区域的高度
+  const contentTop = computed(() => {
+    let due = 45;
+    let existComponentCount = 0;
+    if (useAppConfigStore().$state.pageTagFlag) {
+      existComponentCount++;
    }
-
-    let due = '45px';
-    if (useAppConfigStore().$state.pageTagFlag || useAppConfigStore().$state.breadCrumbFlag) {
-      due = '85px';
+    if (useAppConfigStore().$state.breadCrumbFlag) {
+      existComponentCount++;
+      due = 40;
    }
-    if (
-      useAppConfigStore().$state.pageTagFlag &&
-      useAppConfigStore().$state.pageTagLocation === 'center' &&
-      useAppConfigStore().$state.breadCrumbFlag
-    ) {
-      due = '125px';
-    }
-    return due;
+    return due + existComponentCount * 40 + 'px';
  });

-  watch(() => dueHeight.value, () => {
-    let dom=document.querySelector('.admin-layout-content')
-    contentBoxHeight.value=dom.offsetHeight - 20 - dueHeight.value.split('px')[0]
+  // 面包屑高度
+  const breadCrumbTop = computed(() => {
+    if (useAppConfigStore().$state.pageTagFlag) {
+      return '88px';
+    } else {
+      return '45px';
+    }
  });
+
+  watch(
+    () => contentTop.value,
+    () => {
+      let dom = document.querySelector('.admin-layout-content');
+      contentBoxHeight.value = dom.offsetHeight - 20 - contentTop.value.split('px')[0];
+    }
+  );
+
  onMounted(() => {
-    let dom=document.querySelector('.admin-layout-content')
-    contentBoxHeight.value=dom.offsetHeight - 20 - dueHeight.value.split('px')[0]
+    let dom = document.querySelector('.admin-layout-content');
+    contentBoxHeight.value = dom.offsetHeight - 20 - contentTop.value.split('px')[0];
  });
+
  //页面初始化的时候加载水印
  onMounted(() => {
    if (watermarkFlag.value) {
@@ -140,6 +153,7 @@
  };

  const router = useRouter();
+
  function goHome() {
    router.push({ name: HOME_PAGE_NAME });
  }
@@ -150,9 +164,14 @@

  // ----------------------- keep-alive相关 -----------------------
  let { route, keepAliveIncludes, iframeNotKeepAlivePageFlag, keepAliveIframePages } = smartKeepAlive();
+
+  const { useToken } = antDesignTheme;
+  const { token } = useToken();
 </script>

 <style lang="less" scoped>
+  @color-border-secondary: v-bind('token.colorBorderSecondary');
+  @color-bg-container: v-bind('token.colorBgContainer');
  .admin-layout {
    min-height: 100%;

@@ -174,11 +193,12 @@
      overflow-x: hidden;
      padding: 10px 0;
      width: v-bind(pageWidth);
-      margin-top: v-bind(dueHeight);
+      margin-top: v-bind(contentTop);
      margin-left: auto;
      margin-right: auto;

      .page-tag-div {
+        background: @color-bg-container;
        position: fixed;
        top: 48px;
        width: v-bind(pageWidth);
@@ -186,6 +206,15 @@
        line-height: 40px;
        z-index: 3;
      }
+
+      .bread-crumb-div {
+        position: fixed;
+        top: v-bind(breadCrumbTop);
+        width: v-bind(pageWidth);
+        height: 40px;
+        line-height: 40px;
+        z-index: 3;
+      }
    }
  }

--- a/smart-admin-web-javascript/src/main.js
+++ b/smart-admin-web-javascript/src/main.js
@@ -30,8 +30,6 @@ import 'ant-design-vue/dist/reset.css';
 import '/@/theme/index.less';
 import { localRead } from '/@/utils/local-util.js';
 import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';
-import { Table } from 'ant-design-vue';
-import { useAppConfigStore } from '/@/store/modules/system/app-config';
 import '/@/utils/ployfill';
 import { useDictStore } from '/@/store/modules/system/dict.js';
 import { dictApi } from '/@/api/support/dict-api.js';
--- a/smart-admin-web-javascript/src/store/modules/system/dict.js
+++ b/smart-admin-web-javascript/src/store/modules/system/dict.js
@@ -39,7 +39,7 @@ export const useDictStore = defineStore({

      // 是数字的话，需要特殊处理
      if (_.isNumber(dataValue)) {
-        let target = _.find(dict, { dataValue: dataValue });
+        let target = _.find(dict, { dataValue: String(dataValue) });
        return target ? target.dataLabel : '';
      }

--- a/smart-admin-web-javascript/src/store/modules/system/user.js
+++ b/smart-admin-web-javascript/src/store/modules/system/user.js
@@ -204,6 +204,7 @@ export const useUserStore = defineStore({
        // @ts-ignore
        findTag.fromMenuName = from.name;
        findTag.fromMenuQuery = from.query;
+        findTag.menuQuery = route.query;
      } else {
        // @ts-ignore
        this.tagNav.push({
@@ -212,7 +213,7 @@ export const useUserStore = defineStore({
          // @ts-ignore
          menuTitle: route.meta.title,
          menuQuery: route.query,
-          menuIcon:route.meta?.icon,
+          menuIcon:route.meta.icon,
          // @ts-ignore
          fromMenuName: from.name,
          fromMenuQuery: from.query,
--- a/smart-admin-web-javascript/src/theme/smart-admin.less
+++ b/smart-admin-web-javascript/src/theme/smart-admin.less
@@ -65,11 +65,6 @@
  margin-bottom: 10px;
 }
 /******************************** 查询表格样式 ********************************/
-.smart-query-form {
-  background-color: #ffffff;
-  padding: 5px 10px;
-  margin-bottom: 10px;
-}

 .smart-table-operate {
  .ant-btn {
--- a/smart-admin-web-javascript/src/views/business/oa/enterprise/enterprise-detail.vue
+++ b/smart-admin-web-javascript/src/views/business/oa/enterprise/enterprise-detail.vue
@@ -8,7 +8,7 @@
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012 
 -->
 <template>
-  <div class="detail-header">
+  <div class="smart-detail-header">
    <a-page-header :title="detail.enterpriseName" :avatar="{ src: logo }">
      <template #extra>
        <a-button @click="showUpdate" type="primary">编辑</a-button>
@@ -126,9 +126,3 @@
  });
 </script>

-<style lang="less" scoped>
-  .detail-header {
-    background-color: #fff;
-    padding: 10px;
-  }
-</style>
--- a/smart-admin-web-javascript/src/views/support/code-generator/components/form/code-generator-table-config-form-basic.vue
+++ b/smart-admin-web-javascript/src/views/support/code-generator/components/form/code-generator-table-config-form-basic.vue
@@ -136,7 +136,7 @@
 </template>

 <script setup>
-  import { message } from 'ant-design-vue';
+  import { message, theme } from 'ant-design-vue';
  import dayjs from 'dayjs';
  import _ from 'lodash';
  import { computed, inject, reactive, ref } from 'vue';
@@ -279,9 +279,13 @@
      '常量类：' + formData.moduleName + 'Const.java', //
    ];
  });
+
+  const { useToken } = theme;
+  const { token } = useToken();
 </script>

 <style lang="less" scoped>
+  @color-fill-tertiary: v-bind('token.colorFillTertiary');
  .preview-title {
    font-weight: 600;
    margin: 5px 0px;
@@ -289,7 +293,7 @@

  .preview-block {
    font-size: 14px;
-    background-color: #f9f9f9;
    padding: 10px 5px;
+    background-color: @color-fill-tertiary;
  }
 </style>
--- a/smart-admin-web-javascript/src/views/support/code-generator/components/form/code-generator-table-config-form-delete.vue
+++ b/smart-admin-web-javascript/src/views/support/code-generator/components/form/code-generator-table-config-form-delete.vue
@@ -122,7 +122,6 @@

  .preview-block {
    font-size: 14px;
-    background-color: #f9f9f9;
    padding: 10px 5px;
  }
 </style>
--- a/smart-admin-web-javascript/src/views/support/code-generator/components/preview/code-generator-preview-modal.vue
+++ b/smart-admin-web-javascript/src/views/support/code-generator/components/preview/code-generator-preview-modal.vue
@@ -182,7 +182,6 @@

  .preview-block {
    font-size: 12px;
-    background-color: #f9f9f9;
    padding: 10px 5px;
  }

--- a/smart-admin-web-javascript/src/views/support/dict/components/dict-data-form-modal.vue
+++ b/smart-admin-web-javascript/src/views/support/dict/components/dict-data-form-modal.vue
@@ -21,7 +21,7 @@
        <a-input-number style="width: 100%" v-model:value="form.sortOrder" :min="0" :max="1000" />
      </a-form-item>
      <a-form-item label="备注" name="remark">
-        <a-textarea v-model="form.remark" style="width: 100%; height: 100px; outline: none" />
+        <a-textarea v-model:value="form.remark" style="width: 100%; height: 100px; outline: none" />
      </a-form-item>
    </a-form>
  </a-modal>
--- a/smart-admin-web-javascript/src/views/system/account/index.vue
+++ b/smart-admin-web-javascript/src/views/system/account/index.vue
@@ -24,6 +24,7 @@
  import { ACCOUNT_MENU } from '/@/views/system/account/account-menu.js';
  import { useRoute } from 'vue-router';
  import { useUserStore } from '/@/store/modules/system/user.js';
+  import { theme as antDesignTheme } from 'ant-design-vue';

  // 菜单展示
  let menuList = computed(() => {
@@ -77,26 +78,27 @@
      selectMenu(menuId);
    }
  );
+  const { useToken } = antDesignTheme;
+  const { token } = useToken();
 </script>
 <style lang="less" scoped>
+  @color-bg-container: v-bind('token.colorBgContainer');
+
  .account-container {
    display: flex;
    height: 100%;
-    background-color: white;
-    padding: 20px 0;

    .account-menu-list {
      width: 180px;
      height: calc(100% - 100);
-      border-right: solid 1px #efefef;
    }

    .account-content {
      flex: 1;
      margin-left: 10px;
-      background: #ffffff;
      padding: 20px;
      border-radius: 8px;
+      background-color: @color-bg-container;
    }
  }
 </style>
--- a/smart-admin-web-javascript/src/views/system/employee/components/employee-list/index.vue
+++ b/smart-admin-web-javascript/src/views/system/employee/components/employee-list/index.vue
@@ -394,9 +394,6 @@
  }
 </script>
 <style scoped lang="less">
-  .employee-container {
-    height: 100%;
-  }
  .header {
    display: flex;
    align-items: center;
--- a/smart-admin-web-javascript/src/views/system/home/components/changelog-card.vue
+++ b/smart-admin-web-javascript/src/views/system/home/components/changelog-card.vue
@@ -16,7 +16,7 @@
        <li class="un-read">
          <a class="content" @click="goDetail(item)">
            <a-badge status="geekblue" />
-            {{ $smartEnumPlugin.getDescByValue('CHANGE_LOG_TYPE_ENUM', item.type) }}：{{ item.version }} 版本
+            {{ $smartEnumPlugin.getDescByValue('CHANGE_LOG_TYPE_ENUM', item.type) }}：{{ item.updateVersion }} 版本
          </a>
          <span class="time"> {{ item.publicDate }}</span>
        </li>
--- a/smart-admin-web-javascript/src/views/system/home/components/echarts/category.vue
+++ b/smart-admin-web-javascript/src/views/system/home/components/echarts/category.vue
@@ -86,7 +86,6 @@
    .category-main {
      width: 800px;
      height: 280px;
-      background: #fff;
    }
  }
 </style>
--- a/smart-admin-web-javascript/src/views/system/home/components/echarts/gauge.vue
+++ b/smart-admin-web-javascript/src/views/system/home/components/echarts/gauge.vue
@@ -112,7 +112,6 @@
    .gauge-main {
      width: 260px;
      height: 260px;
-      background: #fff;
    }
  }
 </style>
--- a/smart-admin-web-javascript/src/views/system/home/components/echarts/gradient.vue
+++ b/smart-admin-web-javascript/src/views/system/home/components/echarts/gradient.vue
@@ -204,7 +204,6 @@
    .gradient-main {
      width: 1200px;
      height: 300px;
-      background: #fff;
    }
  }
 </style>
--- a/smart-admin-web-javascript/src/views/system/home/components/echarts/pie.vue
+++ b/smart-admin-web-javascript/src/views/system/home/components/echarts/pie.vue
@@ -72,7 +72,6 @@
    .pie-main {
      width: 260px;
      height: 260px;
-      background: #fff;
    }
  }
 </style>
--- a/smart-admin-web-javascript/src/views/system/home/home-header.vue
+++ b/smart-admin-web-javascript/src/views/system/home/home-header.vue
@@ -9,13 +9,13 @@
  *
 -->
 <template>
-  <div class="user-header">
+  <a-card class="user-header">
    <a-page-header :title="welcomeSentence">
      <template #subTitle>
-        <span style="color: #666; margin-left: 20px">所属部门：{{ departmentName }} </span>
+        <a-typography-text type="secondary" style="margin-left: 20px">所属部门： {{ departmentName }}</a-typography-text>
      </template>
      <template #extra>
-        <p style="color: #333">{{ dayInfo }}</p>
+        <a-typography-text type="secondary">{{ dayInfo }}</a-typography-text>
      </template>
      <a-row class="content">
        <span class="left-content">
@@ -34,7 +34,7 @@
        </div>
      </a-row>
    </a-page-header>
-  </div>
+  </a-card>
 </template>
 <script setup>
  import { computed } from 'vue';
@@ -123,11 +123,16 @@
 <style scoped lang="less">
  .user-header {
    width: 100%;
-    background-color: #fff;
-    margin-bottom: 10px;
+    margin-bottom: 5px;
+    padding: 0;
+
+    :deep(.ant-card-body) {
+      padding: 0;
+    }

    .left-content {
      width: calc(100% - 420px);
+
      h3 {
        color: rgba(0, 0, 0, 0.75);
      }
@@ -136,6 +141,7 @@
    .content {
      display: flex;
      justify-content: space-between;
+
      .weather {
        width: 400px;
      }
@@ -157,6 +163,7 @@
      padding: 5px 0 0 0;
      margin: 6px 0 0 0;
    }
+
    .sentence:hover {
      cursor: pointer;
      text-decoration: underline;