Commit bcf448a55f4a5c6306e469a6d6e1cc0966446e6a
1 parent
71709f42
fix(background): 修复生产环境与开发环境保存的静态资源路径不一致
Showing
11 changed files
with
176 additions
and
105 deletions
| @@ -7,11 +7,12 @@ export const useGlobSetting = (): Readonly<GlobConfig> => { | @@ -7,11 +7,12 @@ export const useGlobSetting = (): Readonly<GlobConfig> => { | ||
| 7 | VITE_GLOB_API_URL, | 7 | VITE_GLOB_API_URL, |
| 8 | VITE_GLOB_APP_SHORT_NAME, | 8 | VITE_GLOB_APP_SHORT_NAME, |
| 9 | VITE_GLOB_API_URL_PREFIX, | 9 | VITE_GLOB_API_URL_PREFIX, |
| 10 | - VITE_GLOB_UPLOAD_URL, | 10 | + VITE_GLOB_UPLOAD_URL, |
| 11 | VITE_GLOB_WEB_SOCKET, | 11 | VITE_GLOB_WEB_SOCKET, |
| 12 | - VITE_GLOB_CONTENT_SECURITY_POLICY, | 12 | + VITE_GLOB_CONTENT_SECURITY_POLICY, |
| 13 | + VITE_GLOB_PUBLIC_PATH | ||
| 13 | } = getAppEnvConfig(); | 14 | } = getAppEnvConfig(); |
| 14 | - | 15 | + |
| 15 | if (!/[a-zA-Z_]*/.test(VITE_GLOB_APP_SHORT_NAME)) { | 16 | if (!/[a-zA-Z_]*/.test(VITE_GLOB_APP_SHORT_NAME)) { |
| 16 | console.warn( | 17 | console.warn( |
| 17 | `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.` | 18 | `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.` |
| @@ -24,10 +25,11 @@ export const useGlobSetting = (): Readonly<GlobConfig> => { | @@ -24,10 +25,11 @@ export const useGlobSetting = (): Readonly<GlobConfig> => { | ||
| 24 | apiUrl: VITE_GLOB_API_URL, | 25 | apiUrl: VITE_GLOB_API_URL, |
| 25 | shortName: VITE_GLOB_APP_SHORT_NAME, | 26 | shortName: VITE_GLOB_APP_SHORT_NAME, |
| 26 | urlPrefix: VITE_GLOB_API_URL_PREFIX, | 27 | urlPrefix: VITE_GLOB_API_URL_PREFIX, |
| 27 | - uploadUrl: VITE_GLOB_UPLOAD_URL, | 28 | + uploadUrl: VITE_GLOB_UPLOAD_URL, |
| 28 | socketUrl: VITE_GLOB_WEB_SOCKET, | 29 | socketUrl: VITE_GLOB_WEB_SOCKET, |
| 29 | securityPolicy: VITE_GLOB_CONTENT_SECURITY_POLICY, | 30 | securityPolicy: VITE_GLOB_CONTENT_SECURITY_POLICY, |
| 31 | + publicPath: VITE_GLOB_PUBLIC_PATH | ||
| 30 | }; | 32 | }; |
| 31 | - | 33 | + |
| 32 | return glob as Readonly<GlobConfig>; | 34 | return glob as Readonly<GlobConfig>; |
| 33 | }; | 35 | }; |
| @@ -80,7 +80,7 @@ const selectBgOptions = ref<Array<SelectOption>>([]) | @@ -80,7 +80,7 @@ const selectBgOptions = ref<Array<SelectOption>>([]) | ||
| 80 | 80 | ||
| 81 | const selectValue = ref('') | 81 | const selectValue = ref('') |
| 82 | 82 | ||
| 83 | -//TODO待封装 成传文件夹名字获取下面所有图片 | 83 | +// TODO待封装 成传文件夹名字获取下面所有图片 |
| 84 | const getFetchImages = () => { | 84 | const getFetchImages = () => { |
| 85 | const imagesModules = import.meta.globEager('@/assets/external/headbackground/*') | 85 | const imagesModules = import.meta.globEager('@/assets/external/headbackground/*') |
| 86 | selectBgOptions.value = Object.keys(imagesModules).map(item => ({ | 86 | selectBgOptions.value = Object.keys(imagesModules).map(item => ({ |
| @@ -34,7 +34,8 @@ export function getAppEnvConfig() { | @@ -34,7 +34,8 @@ export function getAppEnvConfig() { | ||
| 34 | VITE_GLOB_UPLOAD_URL, | 34 | VITE_GLOB_UPLOAD_URL, |
| 35 | VITE_GLOB_WEB_SOCKET, | 35 | VITE_GLOB_WEB_SOCKET, |
| 36 | VITE_GLOB_ALARM_NOTIFY_DURATION, | 36 | VITE_GLOB_ALARM_NOTIFY_DURATION, |
| 37 | - VITE_GLOB_CONTENT_SECURITY_POLICY | 37 | + VITE_GLOB_CONTENT_SECURITY_POLICY, |
| 38 | + VITE_GLOB_PUBLIC_PATH | ||
| 38 | } = ENV; | 39 | } = ENV; |
| 39 | 40 | ||
| 40 | if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) { | 41 | if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) { |
| @@ -51,7 +52,8 @@ export function getAppEnvConfig() { | @@ -51,7 +52,8 @@ export function getAppEnvConfig() { | ||
| 51 | VITE_GLOB_UPLOAD_URL, | 52 | VITE_GLOB_UPLOAD_URL, |
| 52 | VITE_GLOB_WEB_SOCKET, | 53 | VITE_GLOB_WEB_SOCKET, |
| 53 | VITE_GLOB_ALARM_NOTIFY_DURATION, | 54 | VITE_GLOB_ALARM_NOTIFY_DURATION, |
| 54 | - VITE_GLOB_CONTENT_SECURITY_POLICY | 55 | + VITE_GLOB_CONTENT_SECURITY_POLICY, |
| 56 | + VITE_GLOB_PUBLIC_PATH | ||
| 55 | }; | 57 | }; |
| 56 | } | 58 | } |
| 57 | 59 |
src/utils/external/useSyncAssetsFile.ts
0 → 100644
| 1 | +import { useGlobSetting } from "@/hooks/external/setting" | ||
| 2 | +import { SelectOption } from "naive-ui" | ||
| 3 | +import { ProjectRuntimeEnvEnum } from "../../../build/external/envEnum" | ||
| 4 | + | ||
| 5 | +export const useSyncAssetsFile = () => { | ||
| 6 | + const { publicPath } = useGlobSetting() | ||
| 7 | + const staticDir = 'static' | ||
| 8 | + const isDev = [ProjectRuntimeEnvEnum.DEV, ProjectRuntimeEnvEnum.DEV_ALONE].includes(import.meta.env.MODE as ProjectRuntimeEnvEnum) | ||
| 9 | + const jpgModules = import.meta.glob('../../assets/**/*.jpg') | ||
| 10 | + const pngModules = import.meta.glob('../../assets/**/*.png') | ||
| 11 | + const imagesModules = { ...jpgModules, ...pngModules } | ||
| 12 | + | ||
| 13 | + const getFileInfo = (filePath: string) => { | ||
| 14 | + const filePathArr = filePath.split('/') | ||
| 15 | + const fileName = filePathArr.at(-1) | ||
| 16 | + const fileExt = fileName?.split('.').at(-1) | ||
| 17 | + return { fileName, fileExt } | ||
| 18 | + } | ||
| 19 | + | ||
| 20 | + const buildFilePath = (fileExt: string, fileName: string) => { | ||
| 21 | + return `${publicPath}${staticDir}/${fileExt}/${fileName}` | ||
| 22 | + } | ||
| 23 | + | ||
| 24 | + const setPath = (filePath: string) => { | ||
| 25 | + if (isDev && filePath) { | ||
| 26 | + const { fileExt, fileName } = getFileInfo(filePath) | ||
| 27 | + return buildFilePath(fileExt!, fileName!) | ||
| 28 | + } | ||
| 29 | + return filePath | ||
| 30 | + } | ||
| 31 | + | ||
| 32 | + const getPath = (filePath: string) => { | ||
| 33 | + if (isDev && filePath) { | ||
| 34 | + const { fileName } = getFileInfo(filePath) | ||
| 35 | + const imagesKeys = Object.keys(imagesModules) | ||
| 36 | + const path = imagesKeys.find(key => key.includes(fileName!)) | ||
| 37 | + return `/src/${path?.replaceAll('../', '')}` | ||
| 38 | + } | ||
| 39 | + | ||
| 40 | + return filePath ?? '' | ||
| 41 | + } | ||
| 42 | + | ||
| 43 | + const transformPath = (filesPath: string[]) => { | ||
| 44 | + const _filesPath: SelectOption[] = [] | ||
| 45 | + | ||
| 46 | + for (const file of filesPath) { | ||
| 47 | + const { fileExt, fileName } = getFileInfo(file) | ||
| 48 | + _filesPath.push({ | ||
| 49 | + label: fileName, | ||
| 50 | + value: buildFilePath(fileExt!, fileName!) | ||
| 51 | + }) | ||
| 52 | + } | ||
| 53 | + | ||
| 54 | + return _filesPath | ||
| 55 | + } | ||
| 56 | + | ||
| 57 | + return { setPath, getPath, transformPath } | ||
| 58 | +} |
src/views/chart/ContentConfigurations/components/CanvasPage/external/SelectBackgroundImage.vue
0 → 100644
| 1 | +<script lang="ts" setup> | ||
| 2 | +import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'; | ||
| 3 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'; | ||
| 4 | +import { NEllipsis, NImage, NSelect, NSpace, NText, SelectOption } from 'naive-ui'; | ||
| 5 | +import { computed, h } from 'vue'; | ||
| 6 | +import { useSyncAssetsFile } from '@/utils/external/useSyncAssetsFile'; | ||
| 7 | + | ||
| 8 | +const chartEditStore = useChartEditStore() | ||
| 9 | +const canvasConfig = chartEditStore.getEditCanvasConfig | ||
| 10 | + | ||
| 11 | +const { transformPath, setPath, getPath } = useSyncAssetsFile() | ||
| 12 | +const getSelectBgOptions = computed(() => { | ||
| 13 | + const imagesModules = import.meta.globEager('@/assets/external/background/*') | ||
| 14 | + return transformPath(Object.keys(imagesModules)) | ||
| 15 | +}) | ||
| 16 | + | ||
| 17 | +const renderOption = (option: SelectOption) => { | ||
| 18 | + return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [ | ||
| 19 | + h(NImage, { width: 50, src: getPath(option.value as string), previewDisabled: true, class: 'select-image' } as Recordable), | ||
| 20 | + h(NEllipsis, null, () => option.label) | ||
| 21 | + ]) | ||
| 22 | +} | ||
| 23 | + | ||
| 24 | +const handleUpdateValue = (value: string, _option: SelectOption) => { | ||
| 25 | + chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, setPath(value)) | ||
| 26 | +} | ||
| 27 | + | ||
| 28 | +</script> | ||
| 29 | + | ||
| 30 | + | ||
| 31 | +<template> | ||
| 32 | + <NSpace> | ||
| 33 | + <NText>背景选择</NText> | ||
| 34 | + <NSelect size="small" placeholder="请选择您要使用的背景" style="width: 250px" :value="canvasConfig.backgroundImage" | ||
| 35 | + :options="getSelectBgOptions" :render-label="renderOption" @update-value="handleUpdateValue" /> | ||
| 36 | + </NSpace> | ||
| 37 | +</template> | ||
| 38 | + | ||
| 39 | +<style lang="scss" scoped> | ||
| 40 | +</style> |
| @@ -3,34 +3,21 @@ | @@ -3,34 +3,21 @@ | ||
| 3 | <n-form inline :label-width="45" size="small" label-placement="left"> | 3 | <n-form inline :label-width="45" size="small" label-placement="left"> |
| 4 | <n-form-item label="宽度"> | 4 | <n-form-item label="宽度"> |
| 5 | <!-- 尺寸选择 --> | 5 | <!-- 尺寸选择 --> |
| 6 | - <n-input-number | ||
| 7 | - size="small" | ||
| 8 | - v-model:value="canvasConfig.width" | ||
| 9 | - :disabled="editCanvas.lockScale" | ||
| 10 | - :validator="validator" | ||
| 11 | - @update:value="changeSizeHandle" | ||
| 12 | - ></n-input-number> | 6 | + <n-input-number size="small" v-model:value="canvasConfig.width" :disabled="editCanvas.lockScale" |
| 7 | + :validator="validator" @update:value="changeSizeHandle"></n-input-number> | ||
| 13 | </n-form-item> | 8 | </n-form-item> |
| 14 | <n-form-item label="高度"> | 9 | <n-form-item label="高度"> |
| 15 | - <n-input-number | ||
| 16 | - size="small" | ||
| 17 | - v-model:value="canvasConfig.height" | ||
| 18 | - :disabled="editCanvas.lockScale" | ||
| 19 | - :validator="validator" | ||
| 20 | - @update:value="changeSizeHandle" | ||
| 21 | - ></n-input-number> | 10 | + <n-input-number size="small" v-model:value="canvasConfig.height" :disabled="editCanvas.lockScale" |
| 11 | + :validator="validator" @update:value="changeSizeHandle"></n-input-number> | ||
| 22 | </n-form-item> | 12 | </n-form-item> |
| 23 | </n-form> | 13 | </n-form> |
| 24 | - | ||
| 25 | - <div class="upload-box"> | ||
| 26 | - <n-upload | ||
| 27 | - v-model:file-list="uploadFileListRef" | ||
| 28 | - :show-file-list="false" | ||
| 29 | - :customRequest="customRequest" | ||
| 30 | - :onBeforeUpload="beforeUploadHandle" | ||
| 31 | - > | 14 | + |
| 15 | + <n-card class="upload-box"> | ||
| 16 | + <n-upload v-model:file-list="uploadFileListRef" :show-file-list="false" :customRequest="customRequest" | ||
| 17 | + :onBeforeUpload="beforeUploadHandle"> | ||
| 32 | <n-upload-dragger> | 18 | <n-upload-dragger> |
| 33 | - <img v-if="canvasConfig.backgroundImage" class="upload-show" :src="canvasConfig.backgroundImage" alt="背景" /> | 19 | + <!-- THINGS_KIT 路径转换,同步生产环境与开发环境的保存的静态资源文件路径不一致 --> |
| 20 | + <img v-if="canvasConfig.backgroundImage" class="upload-show" :src="getPath(canvasConfig.backgroundImage)" alt="背景" /> | ||
| 34 | <div class="upload-img" v-show="!canvasConfig.backgroundImage"> | 21 | <div class="upload-img" v-show="!canvasConfig.backgroundImage"> |
| 35 | <img src="@/assets/images/canvas/noImage.png" /> | 22 | <img src="@/assets/images/canvas/noImage.png" /> |
| 36 | <n-text class="upload-desc" depth="3"> | 23 | <n-text class="upload-desc" depth="3"> |
| @@ -39,42 +26,22 @@ | @@ -39,42 +26,22 @@ | ||
| 39 | </div> | 26 | </div> |
| 40 | </n-upload-dragger> | 27 | </n-upload-dragger> |
| 41 | </n-upload> | 28 | </n-upload> |
| 42 | - </div> | 29 | + </n-card> |
| 43 | <n-space vertical :size="12"> | 30 | <n-space vertical :size="12"> |
| 44 | <n-space> | 31 | <n-space> |
| 45 | - <n-text>背景选择</n-text> | ||
| 46 | - <n-select | ||
| 47 | - size="small" | ||
| 48 | - placeholder="请选择您要使用的背景" | ||
| 49 | - style="width: 250px" | ||
| 50 | - v-model:value="bgSelectValue" | ||
| 51 | - :options="selectBgOptions" | ||
| 52 | - @update:value="selectBgValueHandle" | ||
| 53 | - /> | ||
| 54 | - </n-space> | ||
| 55 | - <n-space> | 32 | + <!-- THINGS_KIT 新增预置背景选择 --> |
| 33 | + <SelectBackgroundImage /> | ||
| 56 | <n-text>背景颜色</n-text> | 34 | <n-text>背景颜色</n-text> |
| 57 | <div class="picker-height"> | 35 | <div class="picker-height"> |
| 58 | - <n-color-picker | ||
| 59 | - v-if="!switchSelectColorLoading" | ||
| 60 | - size="small" | ||
| 61 | - style="width: 250px" | ||
| 62 | - v-model:value="canvasConfig.background" | ||
| 63 | - :showPreview="true" | ||
| 64 | - :swatches="swatchesColors" | ||
| 65 | - ></n-color-picker> | 36 | + <n-color-picker v-if="!switchSelectColorLoading" size="small" style="width: 250px" |
| 37 | + v-model:value="canvasConfig.background" :showPreview="true" :swatches="swatchesColors"></n-color-picker> | ||
| 66 | </div> | 38 | </div> |
| 67 | </n-space> | 39 | </n-space> |
| 68 | <n-space> | 40 | <n-space> |
| 69 | <n-text>应用类型</n-text> | 41 | <n-text>应用类型</n-text> |
| 70 | - <n-select | ||
| 71 | - size="small" | ||
| 72 | - style="width: 250px" | ||
| 73 | - v-model:value="selectColorValue" | ||
| 74 | - :disabled="!canvasConfig.backgroundImage" | ||
| 75 | - :options="selectColorOptions" | ||
| 76 | - @update:value="selectColorValueHandle" | ||
| 77 | - /> | 42 | + <n-select size="small" style="width: 250px" v-model:value="selectColorValue" |
| 43 | + :disabled="!canvasConfig.backgroundImage" :options="selectColorOptions" | ||
| 44 | + @update:value="selectColorValueHandle" /> | ||
| 78 | </n-space> | 45 | </n-space> |
| 79 | <n-space> | 46 | <n-space> |
| 80 | <n-text>背景控制</n-text> | 47 | <n-text>背景控制</n-text> |
| @@ -88,14 +55,9 @@ | @@ -88,14 +55,9 @@ | ||
| 88 | <n-space> | 55 | <n-space> |
| 89 | <n-text>适配方式</n-text> | 56 | <n-text>适配方式</n-text> |
| 90 | <n-button-group> | 57 | <n-button-group> |
| 91 | - <n-button | ||
| 92 | - v-for="item in previewTypeList" | ||
| 93 | - :key="item.key" | ||
| 94 | - :type="canvasConfig.previewScaleType === item.key ? 'primary' : 'tertiary'" | ||
| 95 | - ghost | ||
| 96 | - size="small" | ||
| 97 | - @click="selectPreviewType(item.key)" | ||
| 98 | - > | 58 | + <n-button v-for="item in previewTypeList" :key="item.key" |
| 59 | + :type="canvasConfig.previewScaleType === item.key ? 'primary' : 'tertiary'" ghost size="small" | ||
| 60 | + @click="selectPreviewType(item.key)"> | ||
| 99 | <n-tooltip :show-arrow="false" trigger="hover"> | 61 | <n-tooltip :show-arrow="false" trigger="hover"> |
| 100 | <template #trigger> | 62 | <template #trigger> |
| 101 | <n-icon class="select-preview-icon" size="18"> | 63 | <n-icon class="select-preview-icon" size="18"> |
| @@ -115,13 +77,8 @@ | @@ -115,13 +77,8 @@ | ||
| 115 | 77 | ||
| 116 | <!-- 主题选择和全局配置 --> | 78 | <!-- 主题选择和全局配置 --> |
| 117 | <n-tabs class="tabs-box" size="small" type="segment"> | 79 | <n-tabs class="tabs-box" size="small" type="segment"> |
| 118 | - <n-tab-pane | ||
| 119 | - v-for="item in globalTabList" | ||
| 120 | - :key="item.key" | ||
| 121 | - :name="item.key" | ||
| 122 | - size="small" | ||
| 123 | - display-directive="show:lazy" | ||
| 124 | - > | 80 | + <n-tab-pane v-for="item in globalTabList" :key="item.key" :name="item.key" size="small" |
| 81 | + display-directive="show:lazy"> | ||
| 125 | <template #tab> | 82 | <template #tab> |
| 126 | <n-space> | 83 | <n-space> |
| 127 | <span>{{ item.title }}</span> | 84 | <span>{{ item.title }}</span> |
| @@ -139,16 +96,21 @@ | @@ -139,16 +96,21 @@ | ||
| 139 | <script setup lang="ts"> | 96 | <script setup lang="ts"> |
| 140 | import { ref, nextTick, watch } from 'vue' | 97 | import { ref, nextTick, watch } from 'vue' |
| 141 | import { backgroundImageSize } from '@/settings/designSetting' | 98 | import { backgroundImageSize } from '@/settings/designSetting' |
| 142 | -import { swatchesColors } from '@/settings/chartThemes/index' | 99 | +import { swatchesColors } from '@/settings/chartThemes' |
| 143 | import { FileTypeEnum } from '@/enums/fileTypeEnum' | 100 | import { FileTypeEnum } from '@/enums/fileTypeEnum' |
| 144 | import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | 101 | import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' |
| 145 | import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d' | 102 | import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d' |
| 146 | import { StylesSetting } from '@/components/Pages/ChartItemSetting' | 103 | import { StylesSetting } from '@/components/Pages/ChartItemSetting' |
| 147 | -import { SelectOption, UploadCustomRequestOptions } from 'naive-ui' | 104 | +import { UploadCustomRequestOptions } from 'naive-ui' |
| 148 | import { fileToUrl, loadAsyncComponent } from '@/utils' | 105 | import { fileToUrl, loadAsyncComponent } from '@/utils' |
| 149 | import { PreviewScaleEnum } from '@/enums/styleEnum' | 106 | import { PreviewScaleEnum } from '@/enums/styleEnum' |
| 150 | import { icon } from '@/plugins' | 107 | import { icon } from '@/plugins' |
| 151 | 108 | ||
| 109 | +// THINGS_KIT 路径转换,同步生产环境与开发环境的保存的静态资源文件路径不一致 | ||
| 110 | +import SelectBackgroundImage from './external/SelectBackgroundImage.vue' | ||
| 111 | +import { useSyncAssetsFile } from '@/utils/external/useSyncAssetsFile' | ||
| 112 | +const { getPath } = useSyncAssetsFile() | ||
| 113 | + | ||
| 152 | const { ColorPaletteIcon } = icon.ionicons5 | 114 | const { ColorPaletteIcon } = icon.ionicons5 |
| 153 | const { ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon | 115 | const { ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon |
| 154 | 116 | ||
| @@ -162,21 +124,6 @@ const selectColorValue = ref(0) | @@ -162,21 +124,6 @@ const selectColorValue = ref(0) | ||
| 162 | 124 | ||
| 163 | const ChartThemeColor = loadAsyncComponent(() => import('./components/ChartThemeColor/index.vue')) | 125 | const ChartThemeColor = loadAsyncComponent(() => import('./components/ChartThemeColor/index.vue')) |
| 164 | 126 | ||
| 165 | -//背景选择配置项 | ||
| 166 | -const bgSelectValue = ref('') | ||
| 167 | - | ||
| 168 | -const selectBgOptions = ref<Array<SelectOption>>([]) | ||
| 169 | - | ||
| 170 | -//TODO待封装 成传文件夹名字获取下面所有图片 | ||
| 171 | -const getFetchImages = () => { | ||
| 172 | - const imagesModules = import.meta.globEager('@/assets/external/background/*') | ||
| 173 | - selectBgOptions.value = Object.keys(imagesModules).map(item => ({ | ||
| 174 | - label: imagesModules[item]?.default.split('/').at(-1), | ||
| 175 | - value: imagesModules[item]?.default | ||
| 176 | - })) | ||
| 177 | -} | ||
| 178 | -getFetchImages() | ||
| 179 | - | ||
| 180 | // 默认应用类型 | 127 | // 默认应用类型 |
| 181 | const selectColorOptions = [ | 128 | const selectColorOptions = [ |
| 182 | { | 129 | { |
| @@ -266,12 +213,6 @@ const selectColorValueHandle = (value: number) => { | @@ -266,12 +213,6 @@ const selectColorValueHandle = (value: number) => { | ||
| 266 | canvasConfig.selectColor = value == 0 | 213 | canvasConfig.selectColor = value == 0 |
| 267 | } | 214 | } |
| 268 | 215 | ||
| 269 | -//选择背景 | ||
| 270 | -const selectBgValueHandle = (value: string) => { | ||
| 271 | - bgSelectValue.value = value | ||
| 272 | - canvasConfig.backgroundImage = value | ||
| 273 | -} | ||
| 274 | - | ||
| 275 | // 清除背景 | 216 | // 清除背景 |
| 276 | const clearImage = () => { | 217 | const clearImage = () => { |
| 277 | chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, undefined) | 218 | chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, undefined) |
| @@ -318,49 +259,65 @@ const selectPreviewType = (key: PreviewScaleEnum) => { | @@ -318,49 +259,65 @@ const selectPreviewType = (key: PreviewScaleEnum) => { | ||
| 318 | <style lang="scss" scoped> | 259 | <style lang="scss" scoped> |
| 319 | $uploadWidth: 326px; | 260 | $uploadWidth: 326px; |
| 320 | $uploadHeight: 193px; | 261 | $uploadHeight: 193px; |
| 262 | + | ||
| 321 | @include go(canvas-setting) { | 263 | @include go(canvas-setting) { |
| 322 | padding-top: 20px; | 264 | padding-top: 20px; |
| 265 | + | ||
| 323 | .upload-box { | 266 | .upload-box { |
| 324 | cursor: pointer; | 267 | cursor: pointer; |
| 325 | margin-bottom: 20px; | 268 | margin-bottom: 20px; |
| 269 | + | ||
| 326 | @include deep() { | 270 | @include deep() { |
| 271 | + .n-card__content { | ||
| 272 | + padding: 0; | ||
| 273 | + overflow: hidden; | ||
| 274 | + } | ||
| 275 | + | ||
| 327 | .n-upload-dragger { | 276 | .n-upload-dragger { |
| 328 | padding: 5px; | 277 | padding: 5px; |
| 329 | width: $uploadWidth; | 278 | width: $uploadWidth; |
| 330 | - background-color: rgba(0, 0, 0, 0); | ||
| 331 | } | 279 | } |
| 332 | } | 280 | } |
| 281 | + | ||
| 333 | .upload-show { | 282 | .upload-show { |
| 334 | width: -webkit-fill-available; | 283 | width: -webkit-fill-available; |
| 335 | height: $uploadHeight; | 284 | height: $uploadHeight; |
| 336 | border-radius: 5px; | 285 | border-radius: 5px; |
| 337 | } | 286 | } |
| 287 | + | ||
| 338 | .upload-img { | 288 | .upload-img { |
| 339 | display: flex; | 289 | display: flex; |
| 340 | flex-direction: column; | 290 | flex-direction: column; |
| 341 | align-items: center; | 291 | align-items: center; |
| 292 | + | ||
| 342 | img { | 293 | img { |
| 343 | height: 150px; | 294 | height: 150px; |
| 344 | } | 295 | } |
| 296 | + | ||
| 345 | .upload-desc { | 297 | .upload-desc { |
| 346 | padding: 10px 0; | 298 | padding: 10px 0; |
| 347 | } | 299 | } |
| 348 | } | 300 | } |
| 349 | } | 301 | } |
| 302 | + | ||
| 350 | .icon-position { | 303 | .icon-position { |
| 351 | padding-top: 2px; | 304 | padding-top: 2px; |
| 352 | } | 305 | } |
| 306 | + | ||
| 353 | .picker-height { | 307 | .picker-height { |
| 354 | min-height: 35px; | 308 | min-height: 35px; |
| 355 | } | 309 | } |
| 310 | + | ||
| 356 | .clear-btn { | 311 | .clear-btn { |
| 357 | padding-left: 2.25em; | 312 | padding-left: 2.25em; |
| 358 | padding-right: 2.25em; | 313 | padding-right: 2.25em; |
| 359 | } | 314 | } |
| 315 | + | ||
| 360 | .select-preview-icon { | 316 | .select-preview-icon { |
| 361 | - padding-right: 0.68em; | ||
| 362 | - padding-left: 0.68em; | 317 | + padding-right: .68em; |
| 318 | + padding-left: .68em; | ||
| 363 | } | 319 | } |
| 320 | + | ||
| 364 | .tabs-box { | 321 | .tabs-box { |
| 365 | margin-top: 20px; | 322 | margin-top: 20px; |
| 366 | } | 323 | } |
| 1 | import { toRaw } from 'vue' | 1 | import { toRaw } from 'vue' |
| 2 | import { DragKeyEnum, MouseEventButton } from '@/enums/editPageEnum' | 2 | import { DragKeyEnum, MouseEventButton } from '@/enums/editPageEnum' |
| 3 | -import { createComponent } from '@/packages' | 3 | +// THINGS_KIT 覆盖原始创建组件方法 |
| 4 | +import { createComponent } from '@/packages/external/override' | ||
| 4 | import { ConfigType } from '@/packages/index.d' | 5 | import { ConfigType } from '@/packages/index.d' |
| 5 | import { CreateComponentType, CreateComponentGroupType, PickCreateComponentType } from '@/packages/index.d' | 6 | import { CreateComponentType, CreateComponentGroupType, PickCreateComponentType } from '@/packages/index.d' |
| 6 | import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook' | 7 | import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook' |
| @@ -76,6 +76,7 @@ import { EditRule } from './components/EditRule' | @@ -76,6 +76,7 @@ import { EditRule } from './components/EditRule' | ||
| 76 | import { EditBottom } from './components/EditBottom' | 76 | import { EditBottom } from './components/EditBottom' |
| 77 | import { EditShapeBox } from './components/EditShapeBox' | 77 | import { EditShapeBox } from './components/EditShapeBox' |
| 78 | import { EditTools } from './components/EditTools' | 78 | import { EditTools } from './components/EditTools' |
| 79 | +import { useSyncAssetsFile } from '@/utils/external/useSyncAssetsFile' | ||
| 79 | 80 | ||
| 80 | const chartEditStore = useChartEditStore() | 81 | const chartEditStore = useChartEditStore() |
| 81 | const { handleContextMenu } = useContextMenu() | 82 | const { handleContextMenu } = useContextMenu() |
| @@ -130,17 +131,19 @@ const filterShow = computed(() => { | @@ -130,17 +131,19 @@ const filterShow = computed(() => { | ||
| 130 | }) | 131 | }) |
| 131 | 132 | ||
| 132 | // 背景 | 133 | // 背景 |
| 134 | +// THINGS_KIT 路径转换,同步生产环境与开发环境的保存的静态资源文件路径不一致 | ||
| 135 | +const { getPath } = useSyncAssetsFile() | ||
| 133 | const rangeStyle = computed(() => { | 136 | const rangeStyle = computed(() => { |
| 134 | // 设置背景色和图片背景 | 137 | // 设置背景色和图片背景 |
| 135 | const background = chartEditStore.getEditCanvasConfig.background | 138 | const background = chartEditStore.getEditCanvasConfig.background |
| 136 | const backgroundImage = chartEditStore.getEditCanvasConfig.backgroundImage | 139 | const backgroundImage = chartEditStore.getEditCanvasConfig.backgroundImage |
| 137 | const selectColor = chartEditStore.getEditCanvasConfig.selectColor | 140 | const selectColor = chartEditStore.getEditCanvasConfig.selectColor |
| 138 | const backgroundColor = background ? background : undefined | 141 | const backgroundColor = background ? background : undefined |
| 139 | - | ||
| 140 | const computedBackground = selectColor | 142 | const computedBackground = selectColor |
| 141 | ? { background: backgroundColor } | 143 | ? { background: backgroundColor } |
| 142 | - : { background: `url(${backgroundImage}) no-repeat center center / cover !important` } | ||
| 143 | - | 144 | + // : { background: `url(${backgroundImage}) no-repeat center center / cover !important` } |
| 145 | + // THINGS_KIT 路径转换,同步生产环境与开发环境的保存的静态资源文件路径不一致 | ||
| 146 | + : { background: `url(${getPath(backgroundImage!)}) no-repeat center center / cover !important` } | ||
| 144 | // @ts-ignore | 147 | // @ts-ignore |
| 145 | return { | 148 | return { |
| 146 | ...computedBackground, | 149 | ...computedBackground, |
| @@ -113,7 +113,8 @@ export const useSyncRemote = () => { | @@ -113,7 +113,8 @@ export const useSyncRemote = () => { | ||
| 113 | const canvasImage: HTMLCanvasElement = await html2canvas(range, { | 113 | const canvasImage: HTMLCanvasElement = await html2canvas(range, { |
| 114 | backgroundColor: null, | 114 | backgroundColor: null, |
| 115 | allowTaint: true, | 115 | allowTaint: true, |
| 116 | - useCORS: true | 116 | + useCORS: true, |
| 117 | + logging: false | ||
| 117 | }) | 118 | }) |
| 118 | 119 | ||
| 119 | // 上传预览图 | 120 | // 上传预览图 |
| @@ -150,6 +150,8 @@ export interface GlobConfig { | @@ -150,6 +150,8 @@ export interface GlobConfig { | ||
| 150 | socketUrl: string; | 150 | socketUrl: string; |
| 151 | // upgrade your http policy to https | 151 | // upgrade your http policy to https |
| 152 | securityPolicy: string; | 152 | securityPolicy: string; |
| 153 | + // assets file prefix | ||
| 154 | + publicPath: string | ||
| 153 | } | 155 | } |
| 154 | export interface GlobEnvConfig { | 156 | export interface GlobEnvConfig { |
| 155 | // Site title | 157 | // Site title |
| @@ -168,4 +170,6 @@ export interface GlobEnvConfig { | @@ -168,4 +170,6 @@ export interface GlobEnvConfig { | ||
| 168 | VITE_GLOB_ALARM_NOTIFY_DURATION: string; | 170 | VITE_GLOB_ALARM_NOTIFY_DURATION: string; |
| 169 | // content security policy | 171 | // content security policy |
| 170 | VITE_GLOB_CONTENT_SECURITY_POLICY: string | 172 | VITE_GLOB_CONTENT_SECURITY_POLICY: string |
| 173 | + // public assets file prefix | ||
| 174 | + VITE_GLOB_PUBLIC_PATH: string | ||
| 171 | } | 175 | } |