From 199ca92fb3fafbaee73c33c859c6e88a126cc12e Mon Sep 17 00:00:00 2001 From: expdsn <18111002318@163.com> Date: Thu, 24 Oct 2024 18:08:37 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E4=BA=86=E6=B7=BB=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E5=92=8C=E8=AE=BE=E7=BD=AE=E9=A1=B9=E7=9A=84=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/GlobalMenu.tsx | 28 ++--- src/layout/adder/AdderPage.tsx | 39 +++--- src/layout/adder/CustomAdder.tsx | 2 +- src/layout/adder/HotAdder.tsx | 168 ++++++++++++++++++++++++++ src/layout/adder/WidgetAdder.tsx | 90 +++++++++----- src/layout/grid/BlockSettings.tsx | 88 +++++++------- src/settings/SettingItem.tsx | 6 +- src/utils/CategoryTab.tsx | 193 ++++++++++++++++-------------- src/widgets/gameVideo/Large.tsx | 4 +- 9 files changed, 417 insertions(+), 201 deletions(-) create mode 100644 src/layout/adder/HotAdder.tsx diff --git a/src/layout/GlobalMenu.tsx b/src/layout/GlobalMenu.tsx index f052179..2fd2ddd 100644 --- a/src/layout/GlobalMenu.tsx +++ b/src/layout/GlobalMenu.tsx @@ -106,17 +106,19 @@ export default defineComponent(() => { const selected = widgetList.find((el) => el.name === block.name) return ( <> - {selected?.list.map((el) => ( - { - block.w = el.w - block.h = el.h - menu.dismiss() - }} - > - {el.label} - - ))} + {selected?.list && + selected.list.length > 1 && + selected.list.map((el) => ( + { + block.w = el.w + block.h = el.h + menu.dismiss() + }} + > + {el.label} + + ))} { @@ -157,13 +159,11 @@ export default defineComponent(() => { { - menu.dismiss() const idx = layout.currentPage.list.findIndex((el) => el.id === block.id) if (idx < 0) return - layout.state.dir[id].list.forEach(val => { + layout.state.dir[id].list.forEach((val) => { layout.addBlock(val, layout.state.currentPage) - }) layout.currentPage.list.splice(idx, 1) delete layout.state.dir[id] diff --git a/src/layout/adder/AdderPage.tsx b/src/layout/adder/AdderPage.tsx index 7a6a998..cb30680 100644 --- a/src/layout/adder/AdderPage.tsx +++ b/src/layout/adder/AdderPage.tsx @@ -16,6 +16,7 @@ import clsx from 'clsx' import ThemeProvider from '@/utils/ThemeProvider' import WidgetAdder from './WidgetAdder' import { Form, Input, Select } from 'ant-design-vue' +import HotAdder from './HotAdder' addIcons(MdKeyboardcommandkey, FaCompass, FaPencilRuler) const ItemButton = defineComponent({ @@ -43,14 +44,14 @@ const ItemButton = defineComponent({ ctx.emit('click') }} class={ - 'py-4 px-4 mb-2 rounded text-sm cursor-pointer transition-all relative ' + + 'py-4 px-4 mb-2 rounded-lg text-sm cursor-pointer transition-all relative ' + (isGame.value ? props.active ? 'bg-[#626471] text-[#f7a94e]' - : 'hover:text-[#f7a94e] hover:bg-white/20 text-[#b4b5bb]' + : 'hover:text-[#f7a94e] hover:bg-white text-[#b4b5bb]' : props.active - ? 'bg-white text-black/80 shadow' - : 'hover:text-black/80 hover:bg-white text-black/50') + ? 'bg-white text-[#f7a94e] shadow' + : ' hover:shadow hover:bg-white text-[#333]') } > {props.active && ( @@ -60,7 +61,7 @@ const ItemButton = defineComponent({ > )} - + {props.label} ) @@ -77,17 +78,20 @@ export default defineComponent(() => { provide(AddToToken, addTo) return () => (
{ />
e.stopPropagation()} >
@@ -140,7 +141,13 @@ export default defineComponent(() => { diff --git a/src/layout/adder/CustomAdder.tsx b/src/layout/adder/CustomAdder.tsx index 2427580..ca989d5 100644 --- a/src/layout/adder/CustomAdder.tsx +++ b/src/layout/adder/CustomAdder.tsx @@ -161,7 +161,7 @@ export default defineComponent(() => {
diff --git a/src/layout/adder/HotAdder.tsx b/src/layout/adder/HotAdder.tsx new file mode 100644 index 0000000..860c252 --- /dev/null +++ b/src/layout/adder/HotAdder.tsx @@ -0,0 +1,168 @@ +import CategoryTab from '@/utils/CategoryTab' +import request from '@/utils/request' +import { computed, defineComponent, inject, onMounted, ref, watch } from 'vue' +import type { BackgroundType } from '../background/BackgroundSwtich' +import clsx from 'clsx' +import useLayoutStore from '../useLayoutStore' +import { AddToToken } from './AdderPage' +import { Button } from 'ant-design-vue' + +interface HotAppCategoryType { + id: string + name: string + ordinal: number +} +interface HotAppType { + id: string + name: string + url: string + ordinal: number + desc: string + icon: string + background: string +} +export const LinkItem = defineComponent({ + props: { + content: { + type: Object as () => HotAppType, + required: true + } + }, + setup(props) { + const layout = useLayoutStore() + const isGame = computed(() => layout.state.current === 0) + const addTo = inject(AddToToken) + return () => ( +
+
+ +
+
+ {props.content.name} +
+
+ {props.content.desc} +
+
+
+
+ +
+
+ ) + } +}) + +export default defineComponent(() => { + const layout = useLayoutStore() + const loading = ref(false) + const isGame = computed(() => layout.state.current === 0) + const appList = ref([]) + const categoryList = ref([]) + const selectType = ref('') + onMounted(() => { + console.log('hot') + request('GET', '/api/app/hotAppTypes').then((res) => { + categoryList.value = res.map((el) => ({ + id: el.id, + oridinal: el.ordinal, + type: el.name, + attr: 0 + })) + + selectType.value = res[0].id + }) + }) + watch(selectType, (val) => { + loading.value = true + + request('GET', `/api/app/hotApps?hotAppsId=${val}`) + .then((res) => { + appList.value = res + }) + .finally(() => { + setTimeout(() => { + loading.value = false + }, 200) + }) + }) + return () => ( +
+
+ { + selectType.value = e + }} + v-slots={{ + select: (text: string) => ( + + ), + unSelect: (text: string) => ( + + ) + }} + > +
+
+
+ {!loading.value ? ( +
+ {appList.value.map((el) => ( + + ))} +
+ ) : ( +
+ {Array(12) + .fill(0) + .map((el, idx) => ( +
+ ))} +
+ )} +
+
+
+ ) +}) diff --git a/src/layout/adder/WidgetAdder.tsx b/src/layout/adder/WidgetAdder.tsx index d1bb661..8952f59 100644 --- a/src/layout/adder/WidgetAdder.tsx +++ b/src/layout/adder/WidgetAdder.tsx @@ -17,19 +17,28 @@ export const WidgetItem = defineComponent({ const layout = useLayoutStore() const isGame = computed(() => layout.state.current === 0) const addTo = inject(AddToToken) + const isExist = computed(() => { + console.log(layout.state.content[layout.state.currentPage].pages) + + return ( + layout.state.content[layout.state.current].pages[layout.state.currentPage].list.findIndex( + (el) => el?.name === props.content.name + ) !== -1 + ) + }) return () => (
- -
+ +
- + 'bg-white/40 text-[#333] ': isGame.value, + 'bg-black/10 text-[#666] ': !isGame.value + } + )} + > + 已添加 + + ) : ( + + )}
) @@ -92,10 +120,10 @@ export const WidgetItem = defineComponent({ export default defineComponent(() => { return () => ( -
+
{widgetList.map((el) => ( diff --git a/src/layout/grid/BlockSettings.tsx b/src/layout/grid/BlockSettings.tsx index a8a05cd..f5fe4dc 100644 --- a/src/layout/grid/BlockSettings.tsx +++ b/src/layout/grid/BlockSettings.tsx @@ -8,52 +8,20 @@ export default defineComponent(() => { return () => (
图标大小
+ label: () =>
图标显示名称
}} > - +
图标间距
+ label: () =>
是否在桌面上显示添加图标
}} > - +
区域宽度
- }} - > - - -
图标圆角
}} @@ -67,22 +35,48 @@ export default defineComponent(() => { /> {' '}
图标区域宽度
+ }} + > + + + {/*
图标大小
+ }} + > + + */} + {/*
添加图标
+ label: () =>
图标间距
}} > - - -
显示标签
- }} - > - - + + */}
) }) diff --git a/src/settings/SettingItem.tsx b/src/settings/SettingItem.tsx index 6a067df..c1a4026 100644 --- a/src/settings/SettingItem.tsx +++ b/src/settings/SettingItem.tsx @@ -24,7 +24,7 @@ export default defineComponent({ setup(props, ctx) { return () => (
{ctx.slots.label?.()}
-
{ctx.slots.default?.()}
- {ctx.slots.end?.()} +
{ctx.slots.default?.()}
+ {/* {ctx.slots.end?.()} */}
) } diff --git a/src/utils/CategoryTab.tsx b/src/utils/CategoryTab.tsx index 9317599..b077cc5 100644 --- a/src/utils/CategoryTab.tsx +++ b/src/utils/CategoryTab.tsx @@ -1,94 +1,113 @@ -import type { BackgroundType } from "@/layout/background/BackgroundSwtich"; -import clsx from "clsx"; -import gsap from "gsap"; -import { defineComponent, reactive, ref, watch, type SlotsType, type VNode } from "vue"; - +import type { BackgroundType } from '@/layout/background/BackgroundSwtich' +import clsx from 'clsx' +import gsap from 'gsap' +import { defineComponent, reactive, ref, watch, type SlotsType, type VNode } from 'vue' +/** + * @description 背景切换组件 + * @props props:list 背景列表 + * @props selectType 选中的类型 + * @slots select 选中的元素 + * @slots unSelect 未选中的元素 + * @emits update:type 选中的类型 + */ export default defineComponent({ - props: { - list: { - type: Array, - required: true - }, - selectType: { - type: String, - required: true, - }, - + props: { + list: { + type: Array, + required: true }, - slots: {} as SlotsType<{ - select?: (text: string) => VNode[] - unSelect?: (text: string) => VNode[] - }>, - emits: ['update:type'], - setup(props, ctx) { - const tabRefs = ref<(Element | null)[]>([]) - const parentRef = ref(null) - const number = ref(0) - const tweened = reactive({ - number: 0 - }) + selectType: { + type: String, + required: true + } + }, + slots: {} as SlotsType<{ + select?: (text: string) => VNode[] + unSelect?: (text: string) => VNode[] + }>, + emits: ['update:type'], + setup(props, ctx) { + const tabRefs = ref<(any | null)[]>([]) + const parentRef = ref(null) + const number = ref(0) + const tweened = reactive({ + number: 0 + }) + watch(number, (n, old) => { + console.log(Math.abs(n - old) / 400) - watch(number, (n) => { - gsap.to(tweened, { - number: n, - duration: .5, - onUpdate: () => { - if (parentRef.value) - parentRef.value.scrollLeft = tweened.number - }, - }); - }) - - watch(() => [props.selectType], () => { - const idx = props.list.findIndex((item) => item.id === props.selectType) - if (idx === -1) return - if (tabRefs.value[idx]) { - const childRef = tabRefs.value[idx] - if (!childRef) return - if (!childRef.parentElement) return - const parentRect = childRef.parentElement.getBoundingClientRect() - const childRect = childRef.getBoundingClientRect() - const distance = childRect.left - parentRect.left - if (!parentRef.value) return - if (idx > 3) { - number.value = distance - 350 - } else { - number.value = 0 - - } - } else { - number.value = 0 - - } + gsap.to(tweened, { + number: n, + duration: Math.abs(n - old) / 400 < 0.5 ? 0.5 : Math.abs(n - old) / 400, + onUpdate: () => { + if (parentRef.value) parentRef.value.scrollLeft = tweened.number } - ) - return () => ( -
{ - e.preventDefault() - if (parentRef.value) - parentRef.value.scrollLeft += e.deltaY + }) + }) - }}> - < div class="w-full flex gap-x-2 " > - { + watch( + () => [props.selectType], + () => { + const idx = props.list.findIndex((item) => item.id === props.selectType) + if (idx === -1) return + console.log(tabRefs.value) - props.list.map((item, index) => ( - item.id === props.selectType ? -
- {ctx.slots.select?.(item.type) || } -
- :
{ - ctx.emit('update:type', item.id) - }}> - {ctx.slots.unSelect?.(item.type) || } -
- )) - } -
-
- ) - }, -}) \ No newline at end of file + if (tabRefs.value[idx]) { + const childRef = tabRefs.value[idx] + + if (!childRef) return + if (!childRef.parentElement) return + const parentRect = childRef.parentElement.getBoundingClientRect() + const childRect = childRef.getBoundingClientRect() + const distance = childRect.left - parentRect.left + if (!parentRef.value) return + if (idx > 3) { + number.value = distance - 280 + } else { + number.value = 0 + } + } else { + number.value = 0 + } + } + ) + return () => ( +
{ + e.preventDefault() + if (parentRef.value) parentRef.value.scrollLeft += e.deltaY + }} + > +
+ {props.list.map((item, index) => + item.id === props.selectType ? ( +
{ + tabRefs.value[index] = e + }} + > + {ctx.slots.select?.(item.type) || } +
+ ) : ( +
{ + tabRefs.value[index] = e + }} + onClick={() => { + ctx.emit('update:type', item.id) + }} + > + {ctx.slots.unSelect?.(item.type) || } +
+ ) + )} +
+
+ ) + } +}) diff --git a/src/widgets/gameVideo/Large.tsx b/src/widgets/gameVideo/Large.tsx index cccbd51..6d316b9 100644 --- a/src/widgets/gameVideo/Large.tsx +++ b/src/widgets/gameVideo/Large.tsx @@ -38,10 +38,10 @@ export default defineComponent(() => { watch( () => useLayoutStore().state.current, (val) => { - const type = val === 0 ? 'game' : val === 1 ? 'study' : 'entertainment' + const type = val === 0 ? 'game' : val === 1 ? 'know' : 'ent' request('GET', `/api/hotVideo?type=${type}`).then((res) => { list.value = res - currentIndex.value = randomNum(0, list.value.length) + currentIndex.value = randomNum(0, res.length) }) }, {