go-view/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

<template>
  <div class="go-canvas-setting">
    <n-form inline :label-width="45" size="small" label-placement="left">
      <n-form-item label="宽度">
        <!-- 尺寸选择 -->
        <n-input-number
          size="small"
          v-model:value="canvasConfig.width"
          :validator="validator"
          @update:value="chartEditStore.computedScale"
        />
      </n-form-item>
      <n-form-item label="高度">
        <n-input-number
          size="small"
          v-model:value="canvasConfig.height"
          :validator="validator"
          @update:value="chartEditStore.computedScale"
        />
      </n-form-item>
    </n-form>

    <n-card class="upload-box">
      <n-upload
        v-model:file-list="uploadFileListRef"
        :show-file-list="false"
        :customRequest="customRequest"
        :onBeforeUpload="beforeUploadHandle"
      >
        <n-upload-dragger>
          <img
            v-if="canvasConfig.backgroundImage"
            class="upload-show"
            :src="canvasConfig.backgroundImage"
            alt="背景"
          />
          <div class="upload-img" v-show="!canvasConfig.backgroundImage">
            <img src="@/assets/images/canvas/noImage.png" />
            <n-text class="upload-desc" depth="3">
              背景图需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif
              的文件
            </n-text>
          </div>
        </n-upload-dragger>
      </n-upload>
    </n-card>
    <n-space vertical :size="12">
      <n-space>
        <n-text>背景色</n-text>
        <n-color-picker
          style="width: 326px;"
          :showPreview="true"
          :swatches="swatchesColors"
          v-model:value="canvasConfig.background"
        />
      </n-space>
      <n-space>
        <n-text>使用颜色</n-text>
        <n-switch
          size="small"
          v-model:value="canvasConfig.selectColor"
          :loading="switchSelectColorLoading"
          :round="false"
          :disabled="!canvasConfig.backgroundImage"
          :onUpdate="switchSelectColorHandle"
        />
      </n-space>
      <n-space>
        <n-text>背景</n-text>
        <n-button
          size="small"
          :disabled="!canvasConfig.backgroundImage"
          @click="clearImage"
        >
          清除背景图
        </n-button>
        <n-button
          size="small"
          :disabled="!canvasConfig.background"
          @click="clearColor"
        >
          清除颜色
        </n-button>
      </n-space>
    </n-space>

    <!-- 主题选择和全局配置 -->
    <n-tabs class="tabs-box" size="small" type="segment">
      <n-tab-pane
        v-for="item in globalTabList"
        :key="item.key"
        :name="item.key"
        size="small"
        display-directive="show:lazy"
      >
        <template #tab>
          <n-space>
            <span>{{ item.title }}</span>
            <n-icon size="16" class="icon-position">
              <component :is="item.icon"></component>
            </n-icon>
          </n-space>
        </template>
        <component :is="item.render"></component>
      </n-tab-pane>
    </n-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { backgroundImageSize } from '@/settings/designSetting'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import { UploadCustomRequestOptions } from 'naive-ui'
import { fileToUrl, loadAsyncComponent } from '@/utils'
import { icon } from '@/plugins'

const { ColorPaletteIcon } = icon.ionicons5
const { ZAxisIcon } = icon.carbon

const chartEditStore = useChartEditStore()
const canvasConfig = chartEditStore.getEditCanvasConfig

const uploadFileListRef = ref()
const switchSelectColorLoading = ref(false)

const ChartThemeColor = loadAsyncComponent(() =>
  import('./components/ChartThemeColor/index.vue')
)
const ChartDataSetting = loadAsyncComponent(() =>
  import('./components/ChartDataSetting/index.vue')
)

// 页面设置
const swatchesColors = [
  '#232324',
  '#2a2a2b',
  '#313132',
  '#373739',
  '#757575',
  '#e0e0e0',
  '#eeeeee',
  '#fafafa'
]

const globalTabList = [
  {
    key: 'ChartTheme',
    title: '主题颜色',
    icon: ColorPaletteIcon,
    render: ChartThemeColor
  },
  {
    key: 'ChartSysSetting',
    title: '数据配置',
    icon: ZAxisIcon,
    render: ChartDataSetting
  }
]

// 规则
const validator = (x: number) => x > 50

// 前置处理
//@ts-ignore
const beforeUploadHandle = async ({ file }) => {
  uploadFileListRef.value = []
  const type = file.file.type
  const size = file.file.size

  if (size > 1024 * 1024 * backgroundImageSize) {
    window['$message'].warning(
      `图片超出 ${backgroundImageSize}M 限制，请重新上传！`
    )
    return false
  }
  if (type !== 'image/png' && type !== 'image/jpeg' && type !== 'image/gif') {
    window['$message'].warning('文件格式不符合，请重新上传！')
    return false
  }
  return true
}

// 清除背景
const clearImage = () => {
  chartEditStore.setEditCanvasConfig(
    EditCanvasConfigEnum.BACKGROUND_IAMGE,
    undefined
  )
  chartEditStore.setEditCanvasConfig(
    EditCanvasConfigEnum.SELECT_COLOR,
    true
  )
}

// 清除颜色
const clearColor = () => {
  chartEditStore.setEditCanvasConfig(
    EditCanvasConfigEnum.BACKGROUND,
    undefined
  )
  if (canvasConfig.backgroundImage) {
    chartEditStore.setEditCanvasConfig(
      EditCanvasConfigEnum.SELECT_COLOR,
      false
    )
  }
}

// 启用/关闭 颜色
const switchSelectColorHandle = () => {
  switchSelectColorLoading.value = true
  setTimeout(() => {
    switchSelectColorLoading.value = false
  }, 1000)
}

// 自定义上传操作
const customRequest = (options: UploadCustomRequestOptions) => {
  const {
    file,
    data,
    headers,
    withCredentials,
    action,
    onFinish,
    onError,
    onProgress
  } = options

  nextTick(() => {
    if (file.file) {
      const ImageUrl = fileToUrl(file.file)
      chartEditStore.setEditCanvasConfig(
        EditCanvasConfigEnum.BACKGROUND_IAMGE,
        ImageUrl
      )
      chartEditStore.setEditCanvasConfig(
        EditCanvasConfigEnum.SELECT_COLOR,
        false
      )
    } else {
      window['$message'].error('添加图片失败，请稍后重试！')
    }
  })
}
</script>

<style lang="scss" scoped>
$updloadWidth: 326px;
$updloadHeight: 193px;
@include go(canvas-setting) {
  padding-top: 20px;
  .upload-box {
    cursor: pointer;
    margin-bottom: 20px;
    @include deep() {
      .n-card__content {
        padding: 0;
        overflow: hidden;
      }
      .n-upload-dragger {
        padding: 5px;
        width: $updloadWidth;
      }
    }
    .upload-show {
      width: -webkit-fill-available;
      height: $updloadHeight;
      border-radius: 5px;
    }
    .upload-img {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        height: 150px;
      }
      .upload-desc {
        padding: 10px 0;
      }
    }
  }
  .icon-position {
    padding-top: 2px;
  }
  .tabs-box {
    margin-top: 30px;
  }
}
</style>