+
+
![]()
+
+
-
+
diff --git a/src/store/globalConfig.ts b/src/store/globalConfig.ts
index 5f3aba8..d5a5c5c 100644
--- a/src/store/globalConfig.ts
+++ b/src/store/globalConfig.ts
@@ -20,6 +20,7 @@ export const useGlobalConfig = defineStore('global', {
textSize: 30,
patternColor: '#1b66c9',
patternList: defaultPatternList as number[],
+ background:{}, // 背景颜色或图片
},
musicList: defaultMusicList as IMusic[],
imageList: defaultImageList as IImage[],
@@ -93,8 +94,11 @@ export const useGlobalConfig = defineStore('global', {
// 获取是否显示奖品列表
getIsShowPrizeList(state) {
return state.globalConfig.isSHowPrizeList;
- }
-
+ },
+ // 获取背景图片设置
+ getBackground(state){
+ return state.globalConfig.theme.background
+ },
},
actions: {
// 设置rowCount
@@ -208,6 +212,10 @@ export const useGlobalConfig = defineStore('global', {
setIsShowPrizeList(isShowPrizeList: boolean) {
this.globalConfig.isSHowPrizeList = isShowPrizeList;
},
+ // 设置背景图片
+ setBackground(background:{}){
+ this.globalConfig.theme.background = background
+ },
// 重置所有配置
reset() {
this.globalConfig = {
@@ -225,6 +233,7 @@ export const useGlobalConfig = defineStore('global', {
textSize: 30,
patternColor: '#1b66c9',
patternList: defaultPatternList as number[],
+ background:{}, // 背景图片
},
musicList: defaultMusicList as IMusic[],
imageList: defaultImageList as IImage[],
diff --git a/src/utils/color.ts b/src/utils/color.ts
index 0fa9767..28960f4 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -39,3 +39,33 @@ export function rgba(color: string, opacity: number) {
return rgbaStr
}
+
+export function rgbToHex(color:string) {
+ // 去掉字符串中的空格
+ color = color.replace(/\s+/g, '');
+
+ // 匹配rgba或rgb格式的字符串
+ const rgbaMatch = color.match(/^rgba?\((\d+),(\d+),(\d+),?(\d*\.?\d+)?\)$/i);
+ if (!rgbaMatch) {
+ throw new Error('Invalid color format');
+ }
+
+ const r = parseInt(rgbaMatch[1], 10);
+ const g = parseInt(rgbaMatch[2], 10);
+ const b = parseInt(rgbaMatch[3], 10);
+ const a = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : undefined;
+
+ // 将RGB值转换为十六进制
+ let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+
+ // 如果提供了alpha值，则将其转换为十六进制并附加到结果中
+ if (a !== undefined) {
+ let alphaHex = Math.round(a * 255).toString(16).toUpperCase();
+ if (alphaHex.length === 1) {
+ alphaHex = "0" + alphaHex; // 确保alpha值是两位数
+ }
+ hex += alphaHex;
+ }
+
+ return hex;
+}
\ No newline at end of file
diff --git a/src/views/Config/Global/FaceConfig.vue b/src/views/Config/Global/FaceConfig.vue
index 8bb5f16..02c6d62 100644
--- a/src/views/Config/Global/FaceConfig.vue
+++ b/src/views/Config/Global/FaceConfig.vue
@@ -12,11 +12,24 @@ import PatternSetting from './components/PatternSetting.vue'
const globalConfig = useStore().globalConfig
const personConfig = useStore().personConfig
-const prizeConfig= useStore().prizeConfig
-const { getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList } = storeToRefs(globalConfig)
+const prizeConfig = useStore().prizeConfig
+const { getTopTitle: topTitle,
+ getTheme: localTheme,
+ getPatterColor: patternColor,
+ getPatternList: patternList,
+ getCardColor: cardColor,
+ getLuckyColor: luckyCardColor,
+ getTextColor: textColor,
+ getCardSize: cardSize,
+ getTextSize: textSize,
+ getRowCount: rowCount,
+ getIsShowPrizeList: isShowPrizeList,
+ getBackground: backgroundImage,
+ getImageList: imageList
+} = storeToRefs(globalConfig)
const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
const colorPickerRef = ref()
-const resetDataDialogRef=ref()
+const resetDataDialogRef = ref()
interface ThemeDaType {
[key: string]: any
}
@@ -33,13 +46,13 @@ const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value))
const patternColorValue = ref(structuredClone(patternColor.value))
const themeList = ref(Object.keys(daisyuiThemes))
const daisyuiThemeList = ref
(daisyuiThemes)
+const backgroundImageValue = ref(backgroundImage.value)
const formData = ref({
rowCount: rowCountValue,
})
const formErr = ref({
rowCount: '',
})
-
const schema = zod.object({
rowCount: zod.number({
required_error: '必填项',
@@ -85,7 +98,7 @@ const resetPattern = () => {
globalConfig.resetPatternList()
}
-const resetData=()=>{
+const resetData = () => {
globalConfig.reset();
personConfig.reset();
prizeConfig.resetDefault();
@@ -138,19 +151,21 @@ watch(patternColorValue, (val: string) => {
watch(textColorValue, (val: string) => {
globalConfig.setTextColor(val)
}, { deep: true })
-
watch(cardSizeValue, (val: { width: number; height: number; }) => {
globalConfig.setCardSize(val)
}, { deep: true }),
watch(isShowPrizeListValue, () => {
globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
})
+watch(backgroundImageValue, (val: {}) => {
+ globalConfig.setBackground(val)
+})
onMounted(() => {
})
-