YouChain_WMS_Web/nc_wms_web/src/App.vue

<!--
  * 主应用页面
  *
  * @Author:    1024创新实验室-主任：卓大
  * @Date:      2022-09-12 23:46:47
  * @Wechat:    zhuda1024
  * @Email:     lab1024@163.com
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012
-->

<template>
  <a-config-provider
      :locale="antdLocale"
      :theme="{
      algorithm: compactFlag ? theme.compactAlgorithm : theme.defaultAlgorithm,
      token: {
        fontFamily:'-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji',
        fontsize: '14px',
        colorPrimary: themeColors[colorIndex].primaryColor,
        colorLink: themeColors[colorIndex].primaryColor,
        colorLinkActive: themeColors[colorIndex].activeColor,
        colorLinkHover: themeColors[colorIndex].hoverColor,
        colorIcon: themeColors[colorIndex].primaryColor,
        borderRadius: borderRadius,
      },
      components: {
        Button: {
          colorLink: themeColors[colorIndex].primaryColor,
          colorLinkActive: themeColors[colorIndex].activeColor,
          colorLinkHover: themeColors[colorIndex].hoverColor,
        },
        Icon: {
          colorIcon: themeColors[colorIndex].primaryColor,
        },
      },
    }"
      :transformCellText="transformCellText"
  >
    <!---全局loading--->
    <a-spin :spinning="spinning" tip="稍等片刻，我在拼命加载中..." size="large">
      <!--- 路由 -->
      <RouterView/>
    </a-spin>
  </a-config-provider>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import {computed, h, useSlots, watch} from 'vue';
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 {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);

// 全局loading
let spinStore = useSpinStore();
const spinning = computed(() => spinStore.loading);
// 是否紧凑
const compactFlag = computed(() => useAppConfigStore().compactFlag);
// 主题颜色
const colorIndex = computed(() => {
  return useAppConfigStore().colorIndex;
});
// 圆角
const borderRadius = computed(() => {
  return useAppConfigStore().borderRadius;
});

function transformCellText({text, column, record, index}) {
  if (column && column.textEllipsisFlag === true) {
    return h(
        Popover,
        {placement: 'bottom'},
        {
          default: () =>
              h('div', {
                style: {whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'},
                id: `${column.dataIndex}${index}`
              }, text),
          content: () =>
              h('div', {style: {display: 'flex'}}, [
                h('div', text),
                h(SmartCopyIcon, {value: document.getElementById(`${column.dataIndex}${index}`).innerText}),
              ]),
        }
    );
  } else {
    return text;
  }
}

// 监听主题颜色变化，更新CSS变量
/*watch(() => colorIndex.value, (newVal) => {
  document.documentElement.style.setProperty('--primary-color', themeColors[newVal].primaryColor);
}, { immediate: true });*/
</script>
<style scoped lang="less">
/*:deep(.ant-table-column-sorters) {
  align-items: flex-start !important;
}*/

/*:deep(.ant-table-thead > tr > th) {
  background-color: var(--primary-color) !important;
  color: black !important;
}*/

:deep(.ant-table-thead > tr > th) {
  background-color: #FAFAFA !important;
}
</style>