完成日历小组件
This commit is contained in:
expdsn
parent
c9cdd4d727
commit
9cd6da6b82
|
|
@ -61,9 +61,9 @@ export default defineComponent(() => {
|
|||
style="grid-template-columns:repeat(auto-fill, var(--block-size));grid-auto-rows:var(--block-size)"
|
||||
ref={container}
|
||||
>
|
||||
{layout.currentPage.list.map((block, idx) => (
|
||||
<BlockWrapper key={block.id} idx={idx} block={block} />
|
||||
))}
|
||||
{layout.currentPage.list.map(
|
||||
(block, idx) => block?.id && <BlockWrapper key={block.id} idx={idx} block={block} />
|
||||
)}
|
||||
{settings.state.showAdder && (
|
||||
<div class="w-full h-full flex justify-center items-center p-[var(--block-padding)] relative operation-button">
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -1,5 +1,113 @@
|
|||
import { defineComponent } from 'vue'
|
||||
|
||||
import dayjs from 'dayjs'
|
||||
import { Lunar } from 'lunar-typescript'
|
||||
import { useCalendarStore } from './useCalendarStore'
|
||||
import clsx from 'clsx'
|
||||
import { dayList } from './Modal'
|
||||
export default defineComponent(() => {
|
||||
return () => <div class="w-full h-full bg-red-50">大</div>
|
||||
const store = useCalendarStore()
|
||||
return () => (
|
||||
<div
|
||||
class="w-full h-full flex items-center backdrop-blur"
|
||||
style={{
|
||||
background: 'rgba(118,215,242,.4)'
|
||||
}}
|
||||
>
|
||||
<div class={'w-1/2 h-full flex flex-col overflow-hidden '}>
|
||||
<div
|
||||
class={'w-full h-[44px] text-[16px] text-white flex items-center justify-center '}
|
||||
style={{
|
||||
background: '#ffffff linear-gradient(225deg,#76d7f2 0%,#5aebb0 100%)'
|
||||
}}
|
||||
>
|
||||
{dayjs().format('MM')}月
|
||||
</div>
|
||||
<div
|
||||
class={'h-0 flex-1 bg-white flex items-center justify-center text-[#333] text-[22px] '}
|
||||
>
|
||||
<div
|
||||
class={'w-full h-full flex flex-col items-center justify-between py-2 text-[20px]'}
|
||||
>
|
||||
<span class={'text-[42px] leading-[40px] font-bold'}>{dayjs().format('DD')}</span>
|
||||
<div class={'flex gap-x-2 text-[14px] font-medium'}>
|
||||
<span>{dayjs().format('ddd')}</span>
|
||||
<span>
|
||||
{Lunar.fromDate(dayjs().toDate()).getMonthInChinese()}月
|
||||
{Lunar.fromDate(dayjs().toDate()).getDayInChinese()}
|
||||
</span>
|
||||
</div>
|
||||
<div class={'w-full h-0 border-dashed border-[#999] border-[1px]'}></div>
|
||||
<div class={'w-full flex gap-x-5 justify-center'}>
|
||||
<div class={'flex gap-x-1 items-center'}>
|
||||
<div
|
||||
class={
|
||||
'w-[24px] h-[24px] flex items-center justify-center bg-[#ff8686] rounded-full text-white font-medium text-[12px]'
|
||||
}
|
||||
>
|
||||
宜
|
||||
</div>
|
||||
<span class={'text-[12px] flex flex-col text-[#666]'}>
|
||||
{Lunar.fromDate(dayjs().toDate())
|
||||
.getDayYi()
|
||||
.filter((_, index) => index < 1)
|
||||
.map((item) => (
|
||||
<span>{item}</span>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
<div class={'flex gap-x-1 items-center'}>
|
||||
<div
|
||||
class={
|
||||
'w-[24px] h-[24px] flex items-center justify-center bg-[#5ac195] rounded-full text-white font-medium text-[12px]'
|
||||
}
|
||||
>
|
||||
忌
|
||||
</div>
|
||||
<span class={'text-[12px] flex flex-col text-[#666]'}>
|
||||
{Lunar.fromDate(dayjs().toDate())
|
||||
.getDayJi()
|
||||
.filter((_, index) => index < 1)
|
||||
.map((item) => (
|
||||
<span>{item}</span>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class={'w-1/2 h-full flex flex-col '}>
|
||||
<div class={'h-[44px] bg-[#76d7f2] px-[30px] items-center flex justify-between '}>
|
||||
{dayList.map((item) => (
|
||||
<span class={'text-white'}>{item}</span>
|
||||
))}
|
||||
</div>
|
||||
<div class={'h-0 flex-1 w-full'}>
|
||||
<div class={'w-full h-full grid grid-cols-7 gap-1 px-[30px] py-2 '}>
|
||||
{store.dayList
|
||||
.filter(
|
||||
(_, index) =>
|
||||
index <
|
||||
(store.dayList.reduce((acc, cur) => (cur!.type !== 1 ? acc + 1 : acc), 0) > 35
|
||||
? 42
|
||||
: 35)
|
||||
)
|
||||
.map((el, key) => (
|
||||
<div
|
||||
class={clsx(
|
||||
'text-[12px] flex items-center justify-center h-[18px] w-[20px] text-white ',
|
||||
el.day.isSame(dayjs(), 'day') && 'bg-[#00aada] rounded-lg',
|
||||
{
|
||||
'opacity-40': el.type === 1 || el.type === -1
|
||||
}
|
||||
)}
|
||||
>
|
||||
{el.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,5 +1,72 @@
|
|||
import { defineComponent } from 'vue'
|
||||
|
||||
import dayjs from 'dayjs'
|
||||
import { Lunar } from 'lunar-typescript'
|
||||
export default defineComponent(() => {
|
||||
return () => <div class="w-full h-full bg-red-50">中</div>
|
||||
return () => (
|
||||
<div class="w-full h-full flex gap-x-2 items-center bg-[#f0f0f0] ">
|
||||
<div class={'w-full h-full flex flex-col rounded-lg overflow-hidden '}>
|
||||
<div
|
||||
class={'w-full h-[44px] text-[16px] text-white flex items-center justify-center '}
|
||||
style={{
|
||||
background: '#ffffff linear-gradient(225deg,#76d7f2 0%,#5aebb0 100%)'
|
||||
}}
|
||||
>
|
||||
{dayjs().format('MM')}月
|
||||
</div>
|
||||
<div
|
||||
class={'h-0 flex-1 bg-white flex items-center justify-center text-[#333] text-[22px] '}
|
||||
>
|
||||
<div
|
||||
class={'w-full h-full flex flex-col items-center justify-between py-2 text-[20px]'}
|
||||
>
|
||||
<span class={'text-[42px] leading-[40px] font-bold'}>{dayjs().format('DD')}</span>
|
||||
<div class={'flex gap-x-2 text-[14px] font-medium'}>
|
||||
<span>{dayjs().format('ddd')}</span>
|
||||
<span>
|
||||
{Lunar.fromDate(dayjs().toDate()).getMonthInChinese()}月
|
||||
{Lunar.fromDate(dayjs().toDate()).getDayInChinese()}
|
||||
</span>
|
||||
</div>
|
||||
<div class={'w-full h-0 border-dashed border-[#999] border-[1px]'}></div>
|
||||
<div class={'w-full flex gap-x-5 justify-center'}>
|
||||
<div class={'flex gap-x-1 items-center'}>
|
||||
<div
|
||||
class={
|
||||
'w-[24px] h-[24px] flex items-center justify-center bg-[#ff8686] rounded-full text-white font-medium text-[12px]'
|
||||
}
|
||||
>
|
||||
宜
|
||||
</div>
|
||||
<span class={'text-[12px] flex flex-col text-[#666]'}>
|
||||
{Lunar.fromDate(dayjs().toDate())
|
||||
.getDayYi()
|
||||
.filter((_, index) => index < 1)
|
||||
.map((item) => (
|
||||
<span>{item}</span>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
<div class={'flex gap-x-1 items-center'}>
|
||||
<div
|
||||
class={
|
||||
'w-[24px] h-[24px] flex items-center justify-center bg-[#5ac195] rounded-full text-white font-medium text-[12px]'
|
||||
}
|
||||
>
|
||||
忌
|
||||
</div>
|
||||
<span class={'text-[12px] flex flex-col text-[#666]'}>
|
||||
{Lunar.fromDate(dayjs().toDate())
|
||||
.getDayJi()
|
||||
.filter((_, index) => index < 1)
|
||||
.map((item) => (
|
||||
<span>{item}</span>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,5 +1,175 @@
|
|||
import { defineComponent } from 'vue'
|
||||
import { computed, defineComponent } from 'vue'
|
||||
import { useCalendarStore } from './useCalendarStore'
|
||||
import dayjs from 'dayjs'
|
||||
import { Lunar, Solar } from 'lunar-typescript'
|
||||
import { DatePicker } from 'ant-design-vue'
|
||||
import { FaChevronLeft } from 'oh-vue-icons/icons'
|
||||
import { addIcons, OhVueIcon } from 'oh-vue-icons'
|
||||
import clsx from 'clsx'
|
||||
addIcons(FaChevronLeft)
|
||||
export const dayList = ['一', '二', '三', '四', '五', '六', '日']
|
||||
|
||||
export default defineComponent(() => {
|
||||
return () => <div class="w-full h-full bg-red-50">日历弹框</div>
|
||||
const store = useCalendarStore()
|
||||
const lunar = computed(() => Lunar.fromDate(store.state.select.toDate()))
|
||||
const solar = computed(() => Solar.fromDate(store.state.select.toDate()))
|
||||
return () => (
|
||||
<div class="w-full h-full bg-white/90 flex backdrop-blur-lg">
|
||||
<div class={'w-[186px] rounded-br-2xl flex flex-col'}>
|
||||
<div
|
||||
class={
|
||||
'w-full h-[48px] rounded-tr-2xl flex items-center justify-center text-white font-bold text-[16px]'
|
||||
}
|
||||
style={{
|
||||
background: 'linear-gradient(225deg,#76d7f2 0%,#5aebb0 100%)'
|
||||
}}
|
||||
>
|
||||
{store.state.select.format('MM')}月
|
||||
</div>
|
||||
<div class={'flex-1 h-0 bg-white rounded-br-2xl'}>
|
||||
<div
|
||||
class={'w-full h-full flex-shrink-0 pb-2 flex flex-col items-center overflow-y-scroll'}
|
||||
>
|
||||
<span class={'text-[48px] font-extrabold pt-2'}>{store.state.select.format('D')}</span>
|
||||
<span>{store.state.select.format('ddd')}</span>
|
||||
<span>
|
||||
本年第{store.state.select.diff(store.state.select.set('date', 1).set('months', 0), 'weeks')}周，第
|
||||
{store.state.select.diff(store.state.select.set('date', 1).set('month', 0), 'day')}天
|
||||
</span>
|
||||
<div class={'w-[138px] h-[1px] flex-shrink-0 my-7 bg-black/10 relative'}></div>
|
||||
<div class={'w-full flex flex-col gap-y-3 justify-center items-center px-6'}>
|
||||
<div class={'flex items-center w-full justify-between '}>
|
||||
<div
|
||||
class={
|
||||
'bg-[#ff8686] w-[64px] rounded-md text-white h-[30px] flex justify-center items-center'
|
||||
}
|
||||
>
|
||||
星座
|
||||
</div>
|
||||
<span class={'text-[#666] text-[14px]'}>{solar.value.getXingZuo()}座</span>
|
||||
</div>
|
||||
<div class={'flex w-full gap-x-5'}>
|
||||
<div
|
||||
class={
|
||||
'rounded-full bg-[#ff8686] w-[30px] h-[30px] flex items-center justify-center text-white'
|
||||
}
|
||||
>
|
||||
宜
|
||||
</div>
|
||||
<div class={'flex flex-col text-[#666] text-[14px]'}>
|
||||
{lunar.value.getDayYi().map((item: any) => {
|
||||
return <div class={'flex items-center'}>{item}，</div>
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div class={'flex w-full gap-x-5'}>
|
||||
<div
|
||||
class={
|
||||
'rounded-full bg-[#5ac195] w-[30px] h-[30px] flex items-center justify-center text-white'
|
||||
}
|
||||
>
|
||||
忌
|
||||
</div>
|
||||
<div class={'flex flex-col text-[#666] text-[14px]'}>
|
||||
{lunar.value.getDayJi().map((item: any) => {
|
||||
return <div class={'flex items-center'}>{item}，</div>
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class={'flex flex-1 bg flex-col py-4'}>
|
||||
<div class={'flex gap-x-4 ml-5 '}>
|
||||
<div
|
||||
class={'bg-black/10 p-1 rounded-md cursor-pointer hover:bg-white/50'}
|
||||
onClick={() => {
|
||||
store.state.select = store.state.select.subtract(1, 'month')
|
||||
}}
|
||||
>
|
||||
<OhVueIcon name={FaChevronLeft.name} fill="#666"></OhVueIcon>
|
||||
</div>
|
||||
<div
|
||||
class={
|
||||
'bg-black/[.1] hover:bg-white/50 text-[#333] text-[14px] cursor-pointer items-center rounded-30 overflow-hidden relative w-[108px] flex justify-center py-[2px] rounded-xl'
|
||||
}
|
||||
>
|
||||
<DatePicker
|
||||
class={'w-full absolute left-0 top-0 opacity-0 '}
|
||||
picker="year"
|
||||
onChange={(e) => {
|
||||
store.state.select = store.state.select.set('M', dayjs(e).get('M'))
|
||||
}}
|
||||
/>
|
||||
{store.state.select.format('YYYY')}
|
||||
</div>
|
||||
<div
|
||||
class={
|
||||
'bg-black/[.1] hover:bg-white/50 cursor-pointer text-[#333] text-[14px] items-center rounded-30 overflow-hidden relative w-[108px] flex justify-center py-[2px] rounded-xl'
|
||||
}
|
||||
>
|
||||
<DatePicker
|
||||
class={'w-full absolute left-0 top-0 opacity-0 '}
|
||||
picker="month"
|
||||
onChange={(e) => {
|
||||
store.state.select = store.state.select.set('M', dayjs(e).get('M'))
|
||||
}}
|
||||
/>
|
||||
{store.state.select.format('MM')}
|
||||
</div>
|
||||
<div
|
||||
class={'bg-black/10 rounded-md p-1 rotate-180 hover:bg-white/50 cursor-pointer'}
|
||||
onClick={() => {
|
||||
store.state.select = store.state.select.add(1, 'month')
|
||||
}}
|
||||
>
|
||||
<OhVueIcon name={FaChevronLeft.name} fill="#666"></OhVueIcon>
|
||||
</div>
|
||||
</div>
|
||||
<div class={'flex-1 h-0 w-full '}>
|
||||
<div class={'w-full h-full grid grid-cols-7 grid-rows-auto gap-x-6 gap-y-2 p-2'}>
|
||||
{dayList.map((item) => {
|
||||
return (
|
||||
<div key={item} class="flex justify-center items-center ">
|
||||
<span class="text-[16px] font-bold text-[#333333] dark:text-white">{item}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{store.dayList
|
||||
.filter(
|
||||
(_, index) =>
|
||||
index <
|
||||
(store.dayList.reduce((acc, cur) => (cur!.type !== 1 ? acc + 1 : acc), 0) > 35
|
||||
? 42
|
||||
: 35)
|
||||
)
|
||||
|
||||
.map((el, key) => (
|
||||
<div
|
||||
onClick={() => {
|
||||
store.state.select = el.day
|
||||
}}
|
||||
class={clsx(
|
||||
'flex justify-center items-center flex-col rounded-lg border-[1px] cursor-pointer',
|
||||
{
|
||||
' opacity-40': el.type === 1 || el.type === -1,
|
||||
'border-[#76d7f2] border-solid border-[1px] bg-[#F5FDFF]': el.day.isSame(
|
||||
dayjs(),
|
||||
'day'
|
||||
),
|
||||
'border-transparent border-solid': !el.day.isSame(dayjs(), 'day') && !el.day.isSame(store.state.select, 'day'),
|
||||
'border-[#76d7f2] border-solid border-[1px]': !el.day.isSame(dayjs(), 'day') && el.day.isSame(store.state.select, 'day'),
|
||||
}
|
||||
)}
|
||||
>
|
||||
<span class={'text-[14px] text-[#333]'}>{el.label}</span>
|
||||
<span class={'text-[12px] text-[#666]'}>{el.lunar.getDayInChinese()}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -23,14 +23,18 @@ export default defineComponent(() => {
|
|||
{dayjs().format('DD')}
|
||||
</div>
|
||||
</div>
|
||||
<div class={' flex-1 flex justify-center '}>
|
||||
<div class={' flex flex-col'}>
|
||||
<span class={"text-[14px] text-[#333] tracking-tight"}>{dayjs().format('YYYY年MM月')}</span>
|
||||
<span class={"text-[12px] text-[#999]"}>
|
||||
<span class={'text-[14px] text-[#333] tracking-tight'}>
|
||||
{dayjs().format('YYYY年MM月')}
|
||||
</span>
|
||||
<span class={'text-[12px] text-[#999]'}>
|
||||
{Lunar.fromDate(dayjs().toDate()).getMonthInChinese() +
|
||||
'月' +
|
||||
Lunar.fromDate(dayjs().toDate()).getDayInChinese()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue