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

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
onClick={() => {
layout.changeBackground(item.url)
background.state.isCustom = false
}}
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 clsx from 'clsx'
import { defineComponent, ref, toRef } from 'vue'
import { computed, defineComponent, ref, toRef } from 'vue'
import useBackgroundStore from './useBackgroundStore'
import useResource from './useResource'
import useLayoutStore from '../useLayoutStore'
import { message } from 'ant-design-vue'
import { BgContent } from '.'
export default defineComponent(() => {
const dragging = ref(false)
const fileInput = ref<HTMLInputElement | null>(null)
const backgroundStore = useBackgroundStore()
const tempFile = ref<File | null>(null)
const layout = useLayoutStore()
const tempBackground = ref('')
const handleDrop = (e: DragEvent) => {
e.preventDefault()
@ -21,6 +23,15 @@ export default defineComponent(() => {
tempBackground.value = URL.createObjectURL(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 () => (
<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">
@ -47,16 +58,28 @@ export default defineComponent(() => {
dragging.value ? 'border-[#3f80ff] bg-[#6b9dff1a]' : 'border-transparent bg-[#ebebeb]'
)}
style={
tempBackground.value
? {
backgroundImage: `url(${tempBackground.value})`,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat'
}
: {}
}
// style={
// tempBackground.value
// ? {
// backgroundImage: `url(${tempBackground.value})`,
// backgroundSize: 'cover',
// 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={clsx(
@ -96,7 +119,7 @@ export default defineComponent(() => {
if (tempFile.value) {
uploadLocal(tempFile.value).then((res) => {
useLayoutStore().changeBackground(res)
backgroundStore.state.isCustom = true
tempFile.value = null
tempBackground.value = ''
message.success('应用成功')

View File

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

View File

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

View File

@ -81,7 +81,9 @@ export default defineComponent(() => {
{
title: '问题描述',
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
v-model={data.qq}
placeholder="QQ号"
maxlength={15}
class={'p-2 rounded-lg ' + (isGame.value ? 'bg-white/10' : 'bg-black/5')}
/>
<input
maxlength={12}
v-model={data.phone}
placeholder="手机号"
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} />
</div>
<svg
width="200"

View File

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

View File

@ -53,7 +53,7 @@ export default defineStore("work", () => {
const time = useTimeStore()
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 = () => {