diff --git a/public/bg/eat_bg@2x.webp b/public/bg/eat_bg@2x.webp new file mode 100644 index 0000000..3b08746 Binary files /dev/null and b/public/bg/eat_bg@2x.webp differ diff --git a/public/bg/eat_top_bg.webp b/public/bg/eat_top_bg.webp new file mode 100644 index 0000000..c6d1905 Binary files /dev/null and b/public/bg/eat_top_bg.webp differ diff --git a/src/widgets/eat/Middle.tsx b/src/widgets/eat/Middle.tsx new file mode 100644 index 0000000..71ff2ce --- /dev/null +++ b/src/widgets/eat/Middle.tsx @@ -0,0 +1,143 @@ +import clsx from 'clsx' +import dayjs from 'dayjs' +import { defineComponent, ref } from 'vue' + +export default defineComponent(() => { + const list = [ + '猪脚饭', + '汉堡薯条', + '麻辣烫', + '烧腊饭', + '黄焖鸡米饭', + '煲仔饭 ', + '酸辣粉', + '肠粉', + '沙县小吃', + '热干面', + '重庆小面 ', + '兰州拉面', + '凉皮', + '生煎', + '锅贴', + '炒饭', + '冒菜', + '鸭血粉丝汤', + '胡辣汤', + '砂锅粥', + '螺蛳粉', + '水饺', + '茶餐厅', + '馄饨抄手', + '披萨', + '桂林米粉', + '川菜', + '湘菜', + '粤菜', + '日本料理', + '韩国料理', + '焗饭', + '泡面', + '麻辣香锅', + '沙拉轻食', + '馄饨', + '拉面', + '烩面', + '热干面', + '刀削面', + '油泼面', + '炸酱面', + '炒面', + '米线', + '酸辣粉', + '土豆粉', + '螺狮粉', + '凉皮儿', + '麻辣烫', + '肉夹馍', + '羊肉汤', + '炒饭', + '盖浇饭', + '卤肉饭', + '烤肉饭', + '黄焖鸡米饭', + '驴肉火烧', + '川菜', + '麻辣香锅', + '火锅', + '酸菜鱼', + '烤串', + '披萨', + '烤鸭', + '汉堡', + '炸鸡', + '寿司', + '蟹黄包', + '煎饼果子', + '生煎', + '炒年糕' + ] + const text = ref('') + return () => ( +
{ + text.value = '' + }} + > +
+ eat_bg +
+
+
+ + + {text.value} + +
+ {!text.value && ( + <> + 今天吃什么 + {dayjs().format('MM.DD')} + {dayjs().format('ddd')} + + )} +
+
+ ) +}) diff --git a/src/widgets/eat/Modal.tsx b/src/widgets/eat/Modal.tsx new file mode 100644 index 0000000..9890740 --- /dev/null +++ b/src/widgets/eat/Modal.tsx @@ -0,0 +1,12 @@ +import { defineComponent } from 'vue' + +export default defineComponent(() => { + return () => ( +
+ ) +}) diff --git a/src/widgets/eat/index.ts b/src/widgets/eat/index.ts new file mode 100644 index 0000000..c8ca18d --- /dev/null +++ b/src/widgets/eat/index.ts @@ -0,0 +1,20 @@ +import asyncLoader from '@/utils/asyncLoader' +import type { Widget } from '..' + +export default { + name: 'todayEat', + label: '今天吃什么', + description: '今天吃什么呢？', + icon: '/icons/today_eat.png', + modal: null, + list: [ + + { + w: 2, + h: 2, + label: '中', + component: asyncLoader(() => import('./Middle')) + }, + + ] +} as Widget diff --git a/src/widgets/index.ts b/src/widgets/index.ts index 5b8c45c..7a008ca 100644 --- a/src/widgets/index.ts +++ b/src/widgets/index.ts @@ -3,6 +3,7 @@ import calendar from './calendar' import weather from './weather' import weApply from './weApply' import gameNews from './gameNews' +import eat from './eat' export interface Widget { name: string // 小组件类型唯一标识 label: string // 小组件名称 @@ -17,4 +18,4 @@ export interface Widget { }[] // 不同尺寸小组件块 } -export default [calendar, weather, weApply, gameNews] as Widget[] +export default [calendar, weather, weApply, gameNews, eat] as Widget[] diff --git a/src/widgets/video/Large.tsx b/src/widgets/video/Large.tsx index 118526b..b83de91 100644 --- a/src/widgets/video/Large.tsx +++ b/src/widgets/video/Large.tsx @@ -1,172 +1,9 @@ -import { defineComponent, ref, watch, type VNodeRef } from 'vue' -import { useWeApplyStore } from './useWeApplyStore' -import { addIcons, OhVueIcon } from 'oh-vue-icons' -import { HiChevronDown } from 'oh-vue-icons/icons' -import clsx from 'clsx' -addIcons(HiChevronDown) +import { defineComponent } from 'vue' + export default defineComponent(() => { - const store = useWeApplyStore() - const gameRef = ref(null) - const isGameBottom = ref(false) - const isWorkBottom = ref(false) - const workRef = ref(null) - const computIsBottom = (ref: any) => { - if (ref) { - const { scrollTop, clientHeight, scrollHeight } = ref - return scrollTop + clientHeight >= scrollHeight - } - } - const handleGameScroll = () => { - const isAtBottom = computIsBottom(gameRef.value) - console.log(isAtBottom ? '已滚动到底部！' : '未滚动到底部。') - if (isAtBottom) { - isGameBottom.value = true - } else { - isGameBottom.value = false - } - } - const handleWorkScroll = () => { - const isAtBottom = computIsBottom(workRef.value) - console.log(isAtBottom ? '已滚动到底部！' : '未滚动到底部。') - if (isAtBottom) { - isWorkBottom.value = true - } else { - isWorkBottom.value = false - } - } - watch(gameRef, (val, _, onCleanup) => { - console.log(val) - if (!val) return - val.addEventListener('scroll', handleGameScroll) - // if (val + gameRef.value.clientHeight >= gameRef.value.scrollHeight) { - // isGameBottom.value = true - // } else { - // isGameBottom.value = false - // } - onCleanup(() => { - val.removeEventListener('scroll', handleGameScroll) - }) - }) - watch(workRef, (val, _, onCleanup) => { - console.log(val) - if (!val) return - - val.addEventListener('scroll', handleWorkScroll) - // if (val + gameRef.value.clientHeight >= gameRef.value.scrollHeight) { - // isGameBottom.value = true - // } else { - // isGameBottom.value = false - // } - onCleanup(() => { - val.removeEventListener('scroll', handleWorkScroll) - }) - }) return () => ( -
-
- {!isGameBottom.value && ( -
{ - e.stopPropagation() - e.preventDefault() - if (gameRef.value) { - gameRef.value.scrollTop += 40 - } - }} - > - -
- )} - -
{ - console.log('wheel') - }} - > - {store.state.list - .filter((val) => val.type === 'game') - .map((item) => ( -
- game icon -
- {item.name} - - {item.des} - -
-
- ))} -
-
-
- {!isWorkBottom.value && ( -
{ - e.stopPropagation() - e.preventDefault() - if (workRef.value) { - workRef.value.scrollTop += 20 - } - }} - > - -
- )} - -
{ - console.log('wheel') - handleWorkScroll() - }} - > - {store.state.list - .filter((val) => val.type === 'work') - .map((item) => ( -
- game icon -
- {item.name} - - {item.des} - -
-
- ))} -
-
+
+ large
) }) diff --git a/src/widgets/video/Middle.tsx b/src/widgets/video/Middle.tsx new file mode 100644 index 0000000..53edc23 --- /dev/null +++ b/src/widgets/video/Middle.tsx @@ -0,0 +1,10 @@ +import { defineComponent } from 'vue' + +export default defineComponent(() => { + + return () => ( +
+ middle +
+ ) +}) diff --git a/src/widgets/video/Modal.tsx b/src/widgets/video/Modal.tsx new file mode 100644 index 0000000..9890740 --- /dev/null +++ b/src/widgets/video/Modal.tsx @@ -0,0 +1,12 @@ +import { defineComponent } from 'vue' + +export default defineComponent(() => { + return () => ( +
+ ) +}) diff --git a/src/widgets/video/Small.tsx b/src/widgets/video/Small.tsx new file mode 100644 index 0000000..bf0a763 --- /dev/null +++ b/src/widgets/video/Small.tsx @@ -0,0 +1,14 @@ +import { defineComponent } from 'vue' + +export default defineComponent(() => { + return () => ( +
+ +
+ ) +}) diff --git a/src/widgets/video/index.ts b/src/widgets/video/index.ts index 372edf2..46a5db7 100644 --- a/src/widgets/video/index.ts +++ b/src/widgets/video/index.ts @@ -2,12 +2,24 @@ import asyncLoader from '@/utils/asyncLoader' import type { Widget } from '..' export default { - name: 'video', - label: '视频', - description: '热门视频', - icon: '/icons/recommendedIcon.png', - modal: null, + name: 'gameNews', + label: '游戏资讯', + description: '游戏资讯', + icon: '/icons/game_news_icon.png', + modal: asyncLoader(() => import('./Modal')), list: [ + { + w: 2, + h: 1, + label: '小', + component: asyncLoader(() => import('./Small')) + }, + { + w: 2, + h: 2, + label: '中', + component: asyncLoader(() => import('./Middle')) + }, { w: 4, h: 2, diff --git a/src/widgets/video/useWeApplyStore.ts b/src/widgets/video/useWeApplyStore.ts deleted file mode 100644 index 805c66b..0000000 --- a/src/widgets/video/useWeApplyStore.ts +++ /dev/null @@ -1,29 +0,0 @@ -import request from "@/utils/request" -import { defineStore } from "pinia" -import { reactive } from "vue" -type WeApplyType = { - id: string; - name: string; - url: string; - icon: string; - des: string; - type: string; -} -export const useWeApplyStore = defineStore('weApply', () => { - const state = reactive({ - list: [] as WeApplyType[] - }) - const getWeApplyList = async () => { - return request('GET', '/api/app/weApplys').then(res => { - return res - }) - } - const getList = async () => { - state.list = await getWeApplyList() - } - getList() - return { - state, - getList - } -}) \ No newline at end of file