xyyd
/
xyyd-fatfox
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge commit '5c3bd6b7b3d480bfaef1f5cc40995bb94a4388a5' into weather

This commit is contained in:
expdsn 2024-09-29 15:30:46 +08:00
parent 36881f1fd3 5c3bd6b7b3
commit 1eb9a6e0d6
14 changed files with 128 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/GlobalModal.tsx
View File

@ -3,6 +3,7 @@ import { computed, defineComponent, ref, Transition, watch } from 'vue'
import { OhVueIcon, addIcons } from 'oh-vue-icons' import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { MdClose, MdOpeninfull, MdClosefullscreen } from 'oh-vue-icons/icons' import { MdClose, MdOpeninfull, MdClosefullscreen } from 'oh-vue-icons/icons'
import asyncLoader from './utils/asyncLoader' import asyncLoader from './utils/asyncLoader'
import widgetList from '@/widgets'
addIcons(MdClose, MdOpeninfull, MdClosefullscreen) addIcons(MdClose, MdOpeninfull, MdClosefullscreen)
const SearchPage = asyncLoader(() => import('@/layout/header/search/SearchPage')) const SearchPage = asyncLoader(() => import('@/layout/header/search/SearchPage'))
const AdderPage = asyncLoader(() => import('@/layout/adder/AdderPage')) const AdderPage = asyncLoader(() => import('@/layout/adder/AdderPage'))
@ -79,6 +80,20 @@ export default defineComponent(() => {
<SearchPage /> <SearchPage />
) : router.path === 'global-adder' ? ( ) : router.path === 'global-adder' ? (
<AdderPage /> <AdderPage />
) : router.path.startsWith('widget-') ? (
(() => {
const name = router.path.split('-')[1]
const selected = widgetList.find((el) => el.name === name)
if (!selected)
return (
<div class="w-full h-full flex justify-center items-center text-black/80">
组件维护中
</div>
)
const compo = selected.modal
console.log(compo)
return <compo />
})()
) : null} ) : null}
</Transition> </Transition>
</div> </div>

12
src/index.html Normal file
View File

@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>要什么服务器，直接 oss</div>
<script src="/test.js" />
</body>
</html>

13
src/layout/GlobalMenu.tsx
View File

@ -3,6 +3,7 @@ import { computed, defineComponent, onUnmounted, reactive } from 'vue'
import type { Block } from './layout.types' import type { Block } from './layout.types'
import clsx from 'clsx' import clsx from 'clsx'
import useLayoutStore from './useLayoutStore' import useLayoutStore from './useLayoutStore'
import widgetList from '@/widgets'
const defaultDisplay = { const defaultDisplay = {
x: 0, x: 0,
@ -102,8 +103,20 @@ export default defineComponent(() => {
const block = menu.display.type const block = menu.display.type
if (!block.link) { if (!block.link) {
// 小组件 // 小组件
const selected = widgetList.find((el) => el.name === block.name)
return ( return (
<> <>
{selected?.list.map((el) => (
<Item
onClick={() => {
block.w = el.w
block.h = el.h
menu.dismiss()
}}
>
{el.label}
</Item>
))}
<Item <Item
alert alert
onClick={() => { onClick={() => {

33
src/layout/adder/WidgetAdder.tsx
View File

@ -1,10 +1,12 @@
import { computed, defineComponent } from 'vue' import { computed, defineComponent, inject } from 'vue'
import useLayoutStore from '../useLayoutStore' import useLayoutStore from '../useLayoutStore'
import widgetList, { type Widget } from '@/widgets' import widgetList, { type Widget } from '@/widgets'
import { Button } from 'ant-design-vue' import { Button } from 'ant-design-vue'
import clsx from 'clsx' import clsx from 'clsx'
import { AddToToken } from './AdderPage'
import { v4 as uuid } from 'uuid'
export const Item = defineComponent({ export const WidgetItem = defineComponent({
props: { props: {
content: { content: {
type: Object as () => Widget, type: Object as () => Widget,
@ -14,6 +16,7 @@ export const Item = defineComponent({
setup(props) { setup(props) {
const layout = useLayoutStore() const layout = useLayoutStore()
const isGame = computed(() => layout.state.current === 0) const isGame = computed(() => layout.state.current === 0)
const addTo = inject(AddToToken)
return () => ( return () => (
<div <div
class={clsx('bg-white w-full h-full rounded-lg shadow p-4', { class={clsx('bg-white w-full h-full rounded-lg shadow p-4', {
@ -44,7 +47,29 @@ export const Item = defineComponent({
</div> </div>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
<Button size="small" type="primary"> <Button
size="small"
type="primary"
onClick={() => {
const selected = widgetList.find((el) => el.name === props.content.name)
if (!selected || !selected.list[0]) return
layout.addBlock(
{
id: uuid(),
link: '',
name: props.content.name,
label: props.content.label,
icon: '',
text: '',
background: '',
color: '',
w: selected.list[0].w,
h: selected.list[0].h
},
addTo?.value
)
}}
>
添加 添加
</Button> </Button>
</div> </div>
@ -61,7 +86,7 @@ export default defineComponent(() => {
style="grid-auto-rows: 100px" style="grid-auto-rows: 100px"
> >
{widgetList.map((el) => ( {widgetList.map((el) => (
<Item content={el} key={el.name} /> <WidgetItem content={el} key={el.name} />
))} ))}
</div> </div>
</div> </div>

3
src/layout/grid/BlockWrapper.tsx
View File

@ -5,6 +5,7 @@ import { v4 as uuid } from 'uuid'
import useLayoutStore from '../useLayoutStore' import useLayoutStore from '../useLayoutStore'
import LinkBlock from './LinkBlock' import LinkBlock from './LinkBlock'
import DirBlock from './DirBlock' import DirBlock from './DirBlock'
import WidgetBlock from './WidgetBlock'
export default defineComponent({ export default defineComponent({
props: { props: {
@ -124,7 +125,7 @@ export default defineComponent({
) )
) : ( ) : (
// 小组件 // 小组件
<div></div> <WidgetBlock block={props.block} />
)} )}
</div> </div>
<div <div

43
src/layout/grid/WidgetBlock.tsx Normal file
View File

@ -0,0 +1,43 @@
import { defineComponent } from 'vue'
import widgetList from '@/widgets'
import { useMenuStore } from '../GlobalMenu'
import type { Block } from '../layout.types'
import useRouterStore from '@/useRouterStore'
export default defineComponent({
props: {
block: {
type: Object as () => Block,
required: true
}
},
setup(props) {
const menu = useMenuStore()
const router = useRouterStore()
return () => {
const placeholder = (
<div class="w-full h-full flex justify-center items-center text-black/60">组件维护中</div>
)
const selected = widgetList.find((el) => el.name === props.block.name)
if (!selected) return placeholder
const compo = selected.list.find(
(el) => el.w === props.block.w && el.h === props.block.h
)?.component
if (!compo) return placeholder
return (
<div
class="w-full h-full relative"
onContextmenu={(e) => {
e.preventDefault()
menu.open(props.block)
}}
onClick={() => {
router.path = `widget-${props.block.name}`
}}
>
<compo />
</div>
)
}
}
})

1
src/test.js Normal file
View File

@ -0,0 +1 @@
console.log('hahaha')

5
src/useRouterStore.ts
View File

@ -1,7 +1,6 @@
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { ref } from 'vue' import { ref } from 'vue'
export type WidgetStr = 'ai' | 'calendar'
export type GlobalStr = 'search' | 'block' | 'adder' | 'login' export type GlobalStr = 'search' | 'block' | 'adder' | 'login'
export type SettingStr = export type SettingStr =
| 'user' | 'user'
@ -14,9 +13,7 @@ export type SettingStr =
| 'dock' | 'dock'
| 'reset' | 'reset'
| 'fallback' | 'fallback'
export type SettingSecond = export type RouteStr = '' | `widget-${string}` | `global-${GlobalStr}` | `settings-${SettingStr}`
| 'background'
export type RouteStr = '' | `widget-${WidgetStr}` | `global-${GlobalStr}` | `settings-${SettingStr}` | `s2-${SettingSecond}`
export default defineStore('router', () => { export default defineStore('router', () => {
const path = ref<RouteStr>('') const path = ref<RouteStr>('')

2
src/widgets/calendar/Large.tsx
View File

@ -1,5 +1,5 @@
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
export default defineComponent(() => { export default defineComponent(() => {
return () => <div class="w-full h-full bg-red-50"></div> return () => <div class="w-full h-full bg-red-50">大</div>
}) })

2
src/widgets/calendar/Middle.tsx
View File

@ -1,5 +1,5 @@
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
export default defineComponent(() => { export default defineComponent(() => {
return () => <div class="w-full h-full bg-red-50"></div> return () => <div class="w-full h-full bg-red-50">中</div>
}) })

2
src/widgets/calendar/Modal.tsx
View File

@ -1,5 +1,5 @@
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
export default defineComponent(() => { export default defineComponent(() => {
return () => <div class="w-full h-full bg-red-50"></div> return () => <div class="w-full h-full bg-red-50">日历弹框</div>
}) })

2
src/widgets/calendar/Small.tsx
View File

@ -1,5 +1,5 @@
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
export default defineComponent(() => { export default defineComponent(() => {
return () => <div class="w-full h-full bg-red-50"></div> return () => <div class="w-full h-full bg-red-50">小</div>
}) })

9
src/widgets/calendar/index.ts
View File

@ -1,3 +1,4 @@
import asyncLoader from '@/utils/asyncLoader'
import type { Widget } from '..' import type { Widget } from '..'
export default { export default {
@ -5,25 +6,25 @@ export default {
label: '日历', label: '日历',
description: '日历信息', description: '日历信息',
icon: '/icons/calendarIcon.png', icon: '/icons/calendarIcon.png',
modal: () => import('./Modal'), modal: asyncLoader(() => import('./Modal')),
list: [ list: [
{ {
w: 2, w: 2,
h: 1, h: 1,
label: '小', label: '小',
component: () => import('./Small') component: asyncLoader(() => import('./Small'))
}, },
{ {
w: 2, w: 2,
h: 2, h: 2,
label: '中', label: '中',
component: () => import('./Middle') component: asyncLoader(() => import('./Middle'))
}, },
{ {
w: 4, w: 4,
h: 2, h: 2,
label: '大', label: '大',
component: () => import('./Large') component: asyncLoader(() => import('./Large'))
} }
] ]
} as Widget } as Widget

5
src/widgets/index.ts
View File

@ -1,3 +1,4 @@
import type { Component } from 'vue'
import calendar from './calendar' import calendar from './calendar'
import weather from './weather' import weather from './weather'
export interface Widget { export interface Widget {
@ -5,12 +6,12 @@ export interface Widget {
label: string // 小组件名称 label: string // 小组件名称
description: string // 小组件描述 description: string // 小组件描述
icon: string // 小组件图标 icon: string // 小组件图标
modal: () => any // 弹框组件 modal: Component // 弹框组件
list: { list: {
w: number w: number
h: number h: number
label: string label: string
component: () => any component: Component
}[] // 不同尺寸小组件块 }[] // 不同尺寸小组件块
} }