自定义还上传动态壁纸白屏;历史反馈弹窗显示异常

This commit is contained in:
expdsn 2024-11-20 11:09:54 +08:00
parent e5d031e56c
commit eac8854337
8 changed files with 56 additions and 18 deletions

View File

@ -165,6 +165,7 @@ export default defineComponent(() => {
<div <div
onClick={() => { onClick={() => {
layout.changeBackground(item.url) layout.changeBackground(item.url)
background.state.isCustom = false
}} }}
class="h-[156px] relative cursor-pointer group w-full flex-grow-0 rounded-xl overflow-hidden" class="h-[156px] relative cursor-pointer group w-full flex-grow-0 rounded-xl overflow-hidden"
> >

View File

@ -1,16 +1,18 @@
import upload, { localPrefix, uploadLocal } from '@/utils/upload' import upload, { localPrefix, uploadLocal } from '@/utils/upload'
import clsx from 'clsx' import clsx from 'clsx'
import { defineComponent, ref, toRef } from 'vue' import { computed, defineComponent, ref, toRef } from 'vue'
import useBackgroundStore from './useBackgroundStore' import useBackgroundStore from './useBackgroundStore'
import useResource from './useResource' import useResource from './useResource'
import useLayoutStore from '../useLayoutStore' import useLayoutStore from '../useLayoutStore'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { BgContent } from '.'
export default defineComponent(() => { export default defineComponent(() => {
const dragging = ref(false) const dragging = ref(false)
const fileInput = ref<HTMLInputElement | null>(null) const fileInput = ref<HTMLInputElement | null>(null)
const backgroundStore = useBackgroundStore() const backgroundStore = useBackgroundStore()
const tempFile = ref<File | null>(null) const tempFile = ref<File | null>(null)
const layout = useLayoutStore()
const tempBackground = ref('') const tempBackground = ref('')
const handleDrop = (e: DragEvent) => { const handleDrop = (e: DragEvent) => {
e.preventDefault() e.preventDefault()
@ -21,6 +23,15 @@ export default defineComponent(() => {
tempBackground.value = URL.createObjectURL(file) tempBackground.value = URL.createObjectURL(file)
tempFile.value = file tempFile.value = file
} }
const showImg = computed(() => {
if (tempBackground.value) {
return tempBackground.value
}
if (backgroundStore.state.isCustom) {
return layout.background.video? layout.background.video: layout.background.image
}
return ''
})
return () => ( return () => (
<div class={'w-full h-full flex flex-col items-center pt-5 pb-10 gap-y-4'}> <div class={'w-full h-full flex flex-col items-center pt-5 pb-10 gap-y-4'}>
<div class="flex flex-col text-center gap-y-1"> <div class="flex flex-col text-center gap-y-1">
@ -47,16 +58,28 @@ export default defineComponent(() => {
dragging.value ? 'border-[#3f80ff] bg-[#6b9dff1a]' : 'border-transparent bg-[#ebebeb]' dragging.value ? 'border-[#3f80ff] bg-[#6b9dff1a]' : 'border-transparent bg-[#ebebeb]'
)} )}
style={ // style={
tempBackground.value // tempBackground.value
? { // ? {
backgroundImage: `url(${tempBackground.value})`, // backgroundImage: `url(${tempBackground.value})`,
backgroundSize: 'cover', // backgroundSize: 'cover',
backgroundRepeat: 'no-repeat' // backgroundRepeat: 'no-repeat'
} // }
: {} // : backgroundStore.state.isCustom
} // ? {
// backgroundImage: `url(${backgroundStore.tag})`,
// backgroundSize: 'cover',
// backgroundRepeat: 'no-repeat'
// }
// : null
// }
> >
<div class={'absolute top-0 left-0 w-full h-full'}>
<BgContent
image={showImg.value}
video={showImg.value.split('.').pop() === 'mp4' ? tempBackground.value : undefined}
></BgContent>
</div>
<div class={'w-full h-full absolute left-0 top-0 bottom-0 right-0 group'}> <div class={'w-full h-full absolute left-0 top-0 bottom-0 right-0 group'}>
<div <div
class={clsx( class={clsx(
@ -96,7 +119,7 @@ export default defineComponent(() => {
if (tempFile.value) { if (tempFile.value) {
uploadLocal(tempFile.value).then((res) => { uploadLocal(tempFile.value).then((res) => {
useLayoutStore().changeBackground(res) useLayoutStore().changeBackground(res)
backgroundStore.state.isCustom = true
tempFile.value = null tempFile.value = null
tempBackground.value = '' tempBackground.value = ''
message.success('应用成功') message.success('应用成功')

View File

@ -2,7 +2,7 @@ import { defineComponent, nextTick, reactive, ref, Transition, watch } from 'vue
import useLayoutStore from '../useLayoutStore' import useLayoutStore from '../useLayoutStore'
import useSettingsStore from '@/settings/useSettingsStore' import useSettingsStore from '@/settings/useSettingsStore'
const BgContent = defineComponent({ export const BgContent = defineComponent({
props: { props: {
image: { image: {
type: String, type: String,

View File

@ -3,6 +3,9 @@ import { reactive, ref, watch } from 'vue'
export default defineStore('background', () => { export default defineStore('background', () => {
const tag = ref(localStorage.getItem('backgroundTag') || '') const tag = ref(localStorage.getItem('backgroundTag') || '')
const state = reactive({
isCustom: false,
})
const resource = reactive({ const resource = reactive({
type: 'image', type: 'image',
brief: '', brief: '',
@ -29,6 +32,9 @@ export default defineStore('background', () => {
) )
return { return {
tag, tag,
resource resource,
state
} }
}, {
persist: true
}) })

View File

@ -81,7 +81,9 @@ export default defineComponent(() => {
{ {
title: '问题描述', title: '问题描述',
customRender: ({ record }) => ( customRender: ({ record }) => (
<div class="w-[200px] break-all">{record.description}</div> <div class="w-[200px] break-all overflow-hidden text-ellipsis whitespace-nowrap" title={record.description}>
{record.description}
</div>
) )
}, },
{ {
@ -169,9 +171,11 @@ export default defineComponent(() => {
<input <input
v-model={data.qq} v-model={data.qq}
placeholder="QQ号" placeholder="QQ号"
maxlength={15}
class={'p-2 rounded-lg ' + (isGame.value ? 'bg-white/10' : 'bg-black/5')} class={'p-2 rounded-lg ' + (isGame.value ? 'bg-white/10' : 'bg-black/5')}
/> />
<input <input
maxlength={12}
v-model={data.phone} v-model={data.phone}
placeholder="手机号" placeholder="手机号"
class={'p-2 rounded-lg ' + (isGame.value ? 'bg-white/10' : 'bg-black/5')} class={'p-2 rounded-lg ' + (isGame.value ? 'bg-white/10' : 'bg-black/5')}

View File

@ -90,7 +90,7 @@ export default defineComponent(() => {
)} )}
> >
<OhVueIcon name="md-stars-twotone" fill="white" scale={1.3} /> <OhVueIcon name="md-stars-twotone" fill="white" scale={1.3} />
</div> </div>
<svg <svg
width="200" width="200"

View File

@ -31,7 +31,7 @@ export default defineComponent(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
store.state.list.filter(val => val.title.includes(searchText.value)).sort((a, _) => { store.state.list.filter(val => val.title.includes(searchText.value)).sort((a, _) => {
return !a.isCompleted ? -1 : 1 return !a.isCompleted ? -1 : 1
}).map((item, idx) => ( }).map((item, _) => (
<div <div
key={item.id} key={item.id}
onClick={() => { onClick={() => {
@ -47,7 +47,11 @@ export default defineComponent(() => {
)} )}
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
const idx = store.state.list.findIndex(val => val.id === item.id)
if (idx !== -1) {
store.state.list[idx].isCompleted = !item.isCompleted store.state.list[idx].isCompleted = !item.isCompleted
}
}}> }}>
{ {
!item.isCompleted && !item.isCompleted &&

View File

@ -53,7 +53,7 @@ export default defineStore("work", () => {
const time = useTimeStore() const time = useTimeStore()
const remainingTime = computed(() => { const remainingTime = computed(() => {
return dayjs(state.beginTime).add(1, 'minute').diff(dayjs(time.date), 'second') return dayjs(state.beginTime).add(15, 'minute').diff(dayjs(time.date), 'second')
}) })
const stopTomatoTime = () => { const stopTomatoTime = () => {