diff --git a/public/icons/hotspot/baidu_info.png b/public/icons/hotspot/baidu_info.png new file mode 100644 index 0000000..02132cb Binary files /dev/null and b/public/icons/hotspot/baidu_info.png differ diff --git a/public/icons/hotspot/bilibili_info.png b/public/icons/hotspot/bilibili_info.png new file mode 100644 index 0000000..8b69036 Binary files /dev/null and b/public/icons/hotspot/bilibili_info.png differ diff --git a/public/icons/hotspot/hot_tab_bg.png b/public/icons/hotspot/hot_tab_bg.png new file mode 100644 index 0000000..0e74564 Binary files /dev/null and b/public/icons/hotspot/hot_tab_bg.png differ diff --git a/public/icons/hotspot/weibo_info.png b/public/icons/hotspot/weibo_info.png new file mode 100644 index 0000000..62a2786 Binary files /dev/null and b/public/icons/hotspot/weibo_info.png differ diff --git a/public/icons/热搜榜@2x.png b/public/icons/热搜榜@2x.png new file mode 100644 index 0000000..aac358b Binary files /dev/null and b/public/icons/热搜榜@2x.png differ diff --git a/src/layout/grid/BlockWrapper.tsx b/src/layout/grid/BlockWrapper.tsx index 4c4be32..ba1fe5d 100644 --- a/src/layout/grid/BlockWrapper.tsx +++ b/src/layout/grid/BlockWrapper.tsx @@ -26,7 +26,7 @@ export default defineComponent({ const hover = ref(false) return () => (
-
- {props.block.link ? ( - props.block.link.startsWith('id:') ? ( - // 文件夹 - +
+
+ {props.block.link ? ( + props.block.link.startsWith('id:') ? ( + // 文件夹 + + ) : ( + // 链接 + + ) ) : ( - // 链接 - - ) - ) : ( - // 小组件 - + // 小组件 + + )} +
+ {settings.state.showBlockLabel && ( +
+ {layout.getLabel(props.block)} +
)}
- {settings.state.showBlockLabel && ( -
- {layout.getLabel(props.block)} -
- )}
) } diff --git a/src/main.css b/src/main.css index d0ce42b..d5a92a6 100644 --- a/src/main.css +++ b/src/main.css @@ -165,7 +165,13 @@ body { scrollbar-width: none; -ms-overflow-style: none; } - +.hover-move { + transform: translateY(0); + animation: none; + transition-duration: 0.3s; + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} .hover-move:hover { transform: translateY(-4px); } diff --git a/src/widgets/constellation/Modal.tsx b/src/widgets/constellation/Modal.tsx index a2958cc..604590b 100644 --- a/src/widgets/constellation/Modal.tsx +++ b/src/widgets/constellation/Modal.tsx @@ -56,7 +56,8 @@ export default defineComponent(() => { } > { + onClick={(e) => { + e.stopPropagation() page.value = (page.value % 2) + 1 }} class={clsx( diff --git a/src/widgets/discount/Modal.tsx b/src/widgets/discount/Modal.tsx index 3b84059..a503969 100644 --- a/src/widgets/discount/Modal.tsx +++ b/src/widgets/discount/Modal.tsx @@ -2,17 +2,17 @@ import { defineComponent, ref, watch, type VNodeRef } from 'vue' import useGameNews from './useDiscountStore' import { RiTimeLine } from 'oh-vue-icons/icons' import { addIcons, OhVueIcon } from 'oh-vue-icons' +import { IoCloseCircleOutline, RiCloseCircleLine } from 'oh-vue-icons/icons' import dayjs from 'dayjs' -addIcons(RiTimeLine) +addIcons(RiTimeLine, IoCloseCircleOutline, RiCloseCircleLine) export default defineComponent(() => { const store = useGameNews() const containerRef = ref(null as VNodeRef | null) - + const searchText = ref('') const handleScroll = () => { const container = containerRef.value if (container.scrollTop + container.clientHeight >= container.scrollHeight - 50) { - store.getNews() } } @@ -24,46 +24,74 @@ export default defineComponent(() => { }} >
- +
+ { + searchText.value = e.target.value + }} + onKeydown={(e: any) => { + if (e.key === 'Enter') { + store.getNews() + } + }} + > + +
-
-
+
+
{store.list.map((item, index) => { return (
{ - }} + onClick={() => {}} key={index} > - +
- - {item.gameid} - - - {item.name} - -
- +
+ {item.name} +
+ + {item.typename} + +
+
+
+ -13% +
+ + ￥{item.commdity[0].price} + + + ￥{item.commdity[0].oldprice} + + + 剩余{item.commdity[0].oldprice}天 + +
diff --git a/src/widgets/discount/useDiscountStore.ts b/src/widgets/discount/useDiscountStore.ts index f681ec3..34128c4 100644 --- a/src/widgets/discount/useDiscountStore.ts +++ b/src/widgets/discount/useDiscountStore.ts @@ -1,9 +1,17 @@ import request from "@/utils/request"; import { defineStore } from "pinia"; -import { ref, type VNodeRef } from "vue"; - +import { reactive, ref, type VNodeRef } from "vue"; +type CommdityType = { + commodityClass: string; + img: string; + price: string; + oldprice: string; + royaltyrate: string + url: string; +} export interface GameDiscount { + commdity: CommdityType[]; gameid: string; status: number; typeid: string; @@ -12,30 +20,34 @@ export interface GameDiscount { } export default defineStore("gameDiscount", () => { const list = ref([]) - const page = ref(1) const loading = ref(false) const noMoreData = ref(false) - const containerRef = ref(null) - + const state = reactive({ + pageId: 1, + name: '', + }) const getList = async () => { const res = await request<{ data: GameDiscount[]; - }>('GET', `/api/gameDiscount?page=${page.value}&page_size=16`) + }>('POST', '/api/gameDiscount', { + data: { + pageId: state.pageId, + name: state.name + } + }) return res.data } const getNews = async () => { if (loading.value || noMoreData.value) return; loading.value = true; - try { const data = await getList() - if (data.length === 0) { noMoreData.value = true; } else { list.value.push(...data); - page.value++; + state.pageId += 1; } } catch (e) { console.log(e); @@ -51,6 +63,6 @@ export default defineStore("gameDiscount", () => { loading, noMoreData, getNews, - containerRef + state, } }) \ No newline at end of file diff --git a/src/widgets/hotspot/Large.tsx b/src/widgets/hotspot/Large.tsx index b83de91..8238048 100644 --- a/src/widgets/hotspot/Large.tsx +++ b/src/widgets/hotspot/Large.tsx @@ -1,9 +1,72 @@ import { defineComponent } from 'vue' +import useHotspotStore, { PlatformList } from './useHotspotStore' +import clsx from 'clsx' +import jump from '@/utils/jump' export default defineComponent(() => { + const store = useHotspotStore() return () => ( -
- large +
+
+ {[...PlatformList.entries()].map(([key, value]) => ( +
{ + store.type = key + e.stopPropagation() + }} + class={clsx( + ' py-2 cursor-pointer bg rounded-xl flex gap-x-1 relative', + store.type === key ? 'text-[#4162ce] font-bold' : '' + )} + > + {value} + {store.type === key && ( + bg + )} +
+ ))} +
+
+
+ {store.hotMap + .get(store.type) + ?.filter((_, idx) => idx < 5) + .map((item, index) => ( +
{ + jump(item.url) + }} + > +
+ + {index + 1}. + + + {item.title} + +
+ {item.hotScore} +
+ ))} +
+
) }) diff --git a/src/widgets/hotspot/Middle.tsx b/src/widgets/hotspot/Middle.tsx index 53edc23..faaa59d 100644 --- a/src/widgets/hotspot/Middle.tsx +++ b/src/widgets/hotspot/Middle.tsx @@ -1,10 +1,82 @@ import { defineComponent } from 'vue' +import useHotspotStore, { PlatformList } from './useHotspotStore' +import clsx from 'clsx' +import { BiCaretRightFill } from 'oh-vue-icons/icons' +import jump from '@/utils/jump' +import { addIcons, OhVueIcon } from 'oh-vue-icons' +addIcons(BiCaretRightFill) export default defineComponent(() => { - + const store = useHotspotStore() return () => ( -
- middle +
+
+
+ {[...PlatformList.entries()] + .filter((_, idx) => idx === 0) + .map(([key, value]) => ( +
{ + store.type = key + e.stopPropagation() + }} + class={clsx( + ' py-2 cursor-pointer bg rounded-xl flex gap-x-1 relative', + store.type === key ? 'text-[#4162ce] font-bold' : '' + )} + > + {value} + {store.type === key && ( + bg + )} +
+ ))} +
+
+ +
+
+
+
+ {store.hotMap + .get(store.type) + ?.filter((_, idx) => idx < 5) + .map((item, index) => ( +
{ + jump(item.url) + }} + > +
+ + {index + 1}. + + + {item.title} + +
+ {item.hotScore} +
+ ))} +
+
) }) diff --git a/src/widgets/hotspot/Modal.tsx b/src/widgets/hotspot/Modal.tsx index 9890740..fb102af 100644 --- a/src/widgets/hotspot/Modal.tsx +++ b/src/widgets/hotspot/Modal.tsx @@ -1,12 +1,76 @@ import { defineComponent } from 'vue' +import useHotspotStore, { PlatformList } from './useHotspotStore' +import clsx from 'clsx' +import jump from '@/utils/jump' export default defineComponent(() => { + const store = useHotspotStore() return () => ( -
+
+
+ +
+
+
+
+ {[...PlatformList.entries()].map(([key, value]) => ( +
{ + store.type = key + }} + class={clsx( + 'w-full py-3 cursor-pointer pl-3 bg rounded-xl flex gap-x-1', + + store.type === key + ? 'bg-[#ffffff] text-[#4162ce] font-bold' + : 'hover:bg-[#ffffff] text-[#666]' + )} + > + + {value}热点 +
+ ))} +
+
+
+ {store.hotMap.get(store.type)?.map((item, index) => ( +
{ + jump(item.url) + }} + > +
+ + {index + 1} + + + {item.title} + +
+ {item.hotScore} +
+ ))} +
+
+
+
+
) }) diff --git a/src/widgets/hotspot/Small.tsx b/src/widgets/hotspot/Small.tsx index bf0a763..2704692 100644 --- a/src/widgets/hotspot/Small.tsx +++ b/src/widgets/hotspot/Small.tsx @@ -1,14 +1,25 @@ + import { defineComponent } from 'vue' export default defineComponent(() => { return () => (
- + +
+
+ 热点折扣 +
+ 立即查看 +
+ +
+
+
+
) }) + diff --git a/src/widgets/hotspot/useHotspotStore.ts b/src/widgets/hotspot/useHotspotStore.ts new file mode 100644 index 0000000..34f4b76 --- /dev/null +++ b/src/widgets/hotspot/useHotspotStore.ts @@ -0,0 +1,49 @@ +import useLayoutStore from '@/layout/useLayoutStore' +import request from '@/utils/request' +import { defineStore } from 'pinia' +import { computed, ref, watch } from 'vue' + +type HotType = { + desc: string + hotScore: string + index: number + picurl: string + title: string + url: string +} +export const PlatformList = new Map([ + ['baidu', '百度'], + ['weibo', '微博'], + ['bilibili', 'B站'] +] as const) + +export default defineStore('hotspot', () => { + const hotMap = ref>(new Map()) + const type = ref('baidu') + const addHotType = (key: string, hotType: HotType[]) => { + if (hotMap.value.has(key)) { + // 如果 key 已存在，向对应的数组中添加新元素 + return + } else { + // 如果 key 不存在，初始化一个新的数组并设置该 key + hotMap.value.set(key, hotType); + } + }; + const getNews = async (type: string) => { + const res = await request<{ + data: HotType[] + }>('GET', `/api/hotList?type=${type}`) + addHotType(type, res.data) + } + + watch(type, val => { + if (hotMap.value.has(val)) return + getNews(val) + }) + getNews(type.value) + + return { + hotMap, + type + } +}) diff --git a/src/widgets/video/useVideoStore.tsx b/src/widgets/video/useVideoStore.tsx index 6e2bb3b..fc596da 100644 --- a/src/widgets/video/useVideoStore.tsx +++ b/src/widgets/video/useVideoStore.tsx @@ -1,10 +1,29 @@ import useLayoutStore from '@/layout/useLayoutStore' +import request from '@/utils/request' import { defineStore } from 'pinia' import { computed, ref, watch } from 'vue' +type HotType = { + desc: string + hotScore: string + index: number + picurl: string + title: string + url: string +} +export const PlatformList = new Map([ + ['baidu', '百度'], + ['weibo', '微博'], + ['bilibili', 'B站'] +] as const) + export default defineStore('video', () => { const videoList = ref([]) const layout = useLayoutStore() + const type = ref('baidu') + const getNews = async (type: string) => { + const res = request('GET', `/api/hotList?type=${type}`) + } watch( () => layout.state.current, (val) => {