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

右键快捷编辑缺少编辑主页功能和刷新功能

This commit is contained in:
expdsn 2024-11-15 20:32:15 +08:00
parent 368be88b5d
commit 9c32a9129e
11 changed files with 195 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/bg/del_icon_img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 765 B

90
src/App.vue
View File

@ -17,6 +17,8 @@ import WelcomePage from './layout/grid/WelcomePage'
import TomatoPage from './layout/grid/TomatoPage'
import useRouterStore from './useRouterStore'
import BackupRecovery from './user/BackupRecovery'
import { ConfigProvider } from 'ant-design-vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
const Grid = asyncLoader(() => import('./layout/grid'))
const Fox = asyncLoader(() => import('./fox'))
const settings = useSettingsStore()
@ -28,51 +30,53 @@ const router = useRouterStore()
const layout = useLayoutStore()
</script>
<template>
<div class="fixed left-0 top-0 w-full h-screen style-root" @contextmenu.prevent>
<Header />
<Background
@dblclick="
() => {
layout.state.simple = !layout.state.simple
}
"
/>
<GLobalModal />
<SettingsOverlay />
<SettingsButton />
<ConfigProvider :locale="zhCN">
<div class="fixed left-0 top-0 w-full h-screen style-root" @contextmenu.prevent>
<Header />
<Background
@dblclick="
() => {
layout.state.simple = !layout.state.simple
}
"
/>
<GLobalModal />
<SettingsOverlay />
<SettingsButton />
<Sider
v-if="
!layout.state.simple ||
(layout.state.simple && settings.state.simpleModeShowString.includes('showSider'))
"
/>
<LoginModal v-if="router.path === 'global-login'" />
<Transition>
<Grid v-if="layout.ready && !layout.state.simple" />
</Transition>
<Dock
v-if="
!layout.state.simple ||
(layout.state.simple && settings.state.simpleModeShowString.includes('showDock'))
"
/>
<div
class="fixed z-40 right-[14%] top-8"
v-if="
!layout.state.simple ||
(layout.state.simple && settings.state.simpleModeShowString.includes('showPet'))
"
>
<Fox />
<Sider
v-if="
!layout.state.simple ||
(layout.state.simple && settings.state.simpleModeShowString.includes('showSider'))
"
/>
<LoginModal v-if="router.path === 'global-login'" />
<Transition>
<Grid v-if="layout.ready && !layout.state.simple" />
</Transition>
<Dock
v-if="
!layout.state.simple ||
(layout.state.simple && settings.state.simpleModeShowString.includes('showDock'))
"
/>
<div
class="fixed z-40 right-[14%] top-8"
v-if="
!layout.state.simple ||
(layout.state.simple && settings.state.simpleModeShowString.includes('showPet'))
"
>
<Fox />
</div>
<DirModal />
<GlobalMenu />
<WelcomePage></WelcomePage>
<TomatoPage></TomatoPage>
<BackupRecovery v-if="router.path === 'global-backup'"></BackupRecovery>
</div>
<DirModal />
<GlobalMenu />
<WelcomePage></WelcomePage>
<TomatoPage></TomatoPage>
<BackupRecovery v-if="router.path === 'global-backup'"></BackupRecovery>
</div>
</ConfigProvider>
</template>
<style lang="less">

22
src/layout/GlobalMenu.tsx
View File

@ -1,6 +1,6 @@
import { defineStore } from 'pinia'
import { computed, defineComponent, onUnmounted, reactive, ref } from 'vue'
import type { Block, LayoutPages } from './layout.types'
import type { Block } from './layout.types'
import clsx from 'clsx'
import useLayoutStore from './useLayoutStore'
import widgetList from '@/widgets'
@ -21,6 +21,7 @@ export const useMenuStore = defineStore('menu', () => {
label: string
name: string
}>()
const isEditPage = ref(false)
const showEditPage = ref(false)
const mPos = {
x: 0,
@ -49,6 +50,7 @@ export const useMenuStore = defineStore('menu', () => {
display,
open,
dismiss,
isEditPage,
show,
selectPage,
showEditPage
@ -155,6 +157,15 @@ export default defineComponent(() => {
>
添加快游戏
</Item>
<Item
noStyle
onClick={() => {
menu.isEditPage = true
menu.dismiss()
}}
>
编辑主页
</Item>
<Item
noStyle
onClick={() => {
@ -164,6 +175,15 @@ export default defineComponent(() => {
>
更换壁纸
</Item>
<Item
noStyle
onClick={() => {
window.location.reload()
menu.dismiss()
}}
>
刷新
</Item>
</>
)
}

1
src/layout/background/BackgroundSwtich.tsx
View File

@ -154,7 +154,6 @@ export default defineComponent(() => {
fill={isGame.value ? 'white' : 'black'}
name={BiChevronDown.name}
class="group pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 size-4 "
aria-hidden="true"
/>
</div>
</div>

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

@ -7,6 +7,9 @@ import LinkBlock from './LinkBlock'
import DirBlock from './DirBlock'
import WidgetBlock from './WidgetBlock'
import useSettingsStore from '@/settings/useSettingsStore'
import { useMenuStore } from '../GlobalMenu'
import { block } from '@milkdown/kit/plugin/block'
import clsx from 'clsx'
export default defineComponent({
props: {
@ -22,11 +25,15 @@ export default defineComponent({
setup(props) {
const settings = useSettingsStore()
const layout = useLayoutStore()
const menu = useMenuStore()
let it: any = 0
const hover = ref(false)
return () => (
<div
class="w-full h-full p-[var(--block-padding)] relative rounded-lg"
class={clsx(
'w-full h-full p-[var(--block-padding)] relative rounded-lg ',
menu.isEditPage && 'animate-wiggle'
)}
key={props.block.id}
id={props.block.id}
style={{
@ -115,10 +122,38 @@ export default defineComponent({
}
}}
>
{menu.isEditPage && (
<div
v-outside-click={() => {
menu.isEditPage = false
}}
onClick={(e) => {
e.stopPropagation()
const idx = layout.state.content[layout.state.current].pages[
layout.state.currentPage
].list.findIndex((val) => val.id === props.block.id)
if (idx < 0) return
layout.state.content[layout.state.current].pages[
layout.state.currentPage
].list.splice(idx, 1)
}}
class={
'rounded-full cursor-pointer backdrop-blur-md absolute w-[20px] h-[20px] top-[8px] right-[12px] z-10 '
}
style={{
backgroundImage: `url('/tab/bg/del_icon_img.png')`,
backgroundSize: 'cover'
}}
></div>
)}
<div
class="w-full h-full overflow-hidden relative cursor-pointer shadow-lg hover-move"
class="w-full h-full overflow-hidden relative cursor-pointer shadow-lg hover-move "
style={{
borderRadius: `calc(var(--block-radius) * var(--block-size))`
borderRadius: `calc(var(--block-radius) * var(--block-size))`,
transition: 'transform 0.2s'
}}
onContextmenu={(e) => {
e.stopPropagation()
@ -140,7 +175,7 @@ export default defineComponent({
</div>
{settings.state.showBlockLabel && (
<div
class="absolute left-1/2 -translate-x-1/2 -bottom-3 text-sm text-white text-center w-[172px] overflow-hidden text-ellipsis whitespace-nowrap break-all font-bold"
class="absolute left-1/2 -translate-x-1/2 -bottom-3 text-sm text-white text-center w-[172px] overflow-hidden text-ellipsis whitespace-nowrap break-all font-bold"
style="text-shadow: 0 0 4px rgba(0,0,0,.6)"
>
{layout.getLabel(props.block)}

5
src/main.ts
View File

@ -2,18 +2,17 @@ import './main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
import App from './App.vue'
import getFp from './utils/getFp'
import vOutsideClick from './utils/vOutsideClick'
import dayjs from 'dayjs'
import Toast, { useToast, type PluginOptions } from 'vue-toastification'
import Toast, { useToast } from 'vue-toastification'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import 'vue-toastification/dist/index.css'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
const app = createApp(App)
export const globalToast = useToast()
dayjs.extend(customParseFormat)

18
src/widgets/weApply/Large.tsx
View File

@ -3,6 +3,7 @@ import { useWeApplyStore } from './useWeApplyStore'
import { addIcons, OhVueIcon } from 'oh-vue-icons'
import { HiChevronDown } from 'oh-vue-icons/icons'
import clsx from 'clsx'
import jump from '@/utils/jump'
addIcons(HiChevronDown)
export default defineComponent(() => {
const store = useWeApplyStore()
@ -13,7 +14,7 @@ export default defineComponent(() => {
const computIsBottom = (ref: any) => {
if (ref) {
const { scrollTop, clientHeight, scrollHeight } = ref
return scrollTop + clientHeight >= scrollHeight -8
return scrollTop + clientHeight >= scrollHeight - 8
}
}
const handleGameScroll = () => {
@ -74,7 +75,12 @@ export default defineComponent(() => {
{store.state.list
.filter((val) => val.type === 'game')
.map((item) => (
<div class={'flex gap-x-2 items-center'}>
<div
class={'flex gap-x-2 items-center'}
onClick={() => {
jump(item.url)
}}
>
<img src={item.icon} alt="game icon" class={'w-[37px] h-[37px] rounded'}></img>
<div class={'flex-1 flex flex-col overflow-hidden'}>
<span class={'text-white text-[14px]'}>{item.name}</span>
@ -107,7 +113,6 @@ export default defineComponent(() => {
if (workRef.value) {
workRef.value.scrollTop += 20
handleWorkScroll()
}
}}
>
@ -125,7 +130,12 @@ export default defineComponent(() => {
{store.state.list
.filter((val) => val.type === 'work')
.map((item) => (
<div class={'flex gap-x-2 items-center'}>
<div
class={'flex gap-x-2 items-center'}
onClick={() => {
jump(item.url)
}}
>
<img src={item.icon} alt="game icon" class={'w-[37px] h-[37px] rounded'}></img>
<div class={'flex-1 flex flex-col overflow-hidden'}>
<span class={'text-white text-[14px]'}>{item.name}</span>

99
src/widgets/work/Large.tsx
View File

@ -1,9 +1,9 @@
import { defineComponent } from 'vue'
import { formatSeconds } from '@/utils/tool'
import PlayStartImg from "~/icons/work/start.png"
import returnImg from "~/icons/work/return.png"
import endImg from "~/icons/work/tomotoIconEnd.png"
import PlusImg from "~/icons/work/tomatoIconAdd.png"
import PlayStartImg from '~/icons/work/start.png'
import returnImg from '~/icons/work/return.png'
import endImg from '~/icons/work/tomotoIconEnd.png'
import PlusImg from '~/icons/work/tomatoIconAdd.png'
import dayjs from 'dayjs'
import { Tooltip } from 'ant-design-vue'
import useTomatoStore from './useTomatoStore'
@ -11,41 +11,54 @@ import useTomatoStore from './useTomatoStore'
export default defineComponent(() => {
const store = useTomatoStore()
return () => (
<div class="w-full h-full flex relative p-6 justify-between" style={{
background: `url('https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/tomotoback.png')`,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat'
}}>
<div class={"bg-[#0000004d] absolute top-0 left-0 right-0 bottom-0 "}></div>
<div class={"w-[115px] h-full flex flex-col items-center z-10 text-white"}>
<div class={"w-full bg-white/20 text-center rounded text-[14px]"}>无目标</div>
<span class={"text-[42px] mb-1"}>
{
store.state.beginTime < 0 ? '15:00' : formatSeconds(store.remainingTime)
<div
class="w-full h-full flex relative p-6 justify-between"
style={{
background: `url('https://newfatfox.oss-cn-beijing.aliyuncs.com/admin/tomotoback.png')`,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat'
}}
>
<div class={'bg-[#0000004d] absolute top-0 left-0 right-0 bottom-0 '}></div>
<div class={'w-[115px] h-full flex flex-col items-center z-10 text-white'}>
<div
class={
'w-full bg-white/20 text-center rounded text-[14px] overflow-hidden text-ellipsis whitespace-nowrap'
}
>
{store.state.list[0] ? store.state.list[0].title : '无目标'}
</div>
<span class={'text-[42px] mb-1'}>
{store.state.beginTime < 0 ? '15:00' : formatSeconds(store.remainingTime)}
</span>
<span class={"text-[14px]"}>你今日已完成
<span class={"text-[#76e6ff] mx-1"}>
{store.state.timeList.filter(val => dayjs(val).isSame(dayjs(), 'day')).length}</span>
<span class={'text-[14px]'}>
你今日已完成
<span class={'text-[#76e6ff] mx-1'}>
{store.state.timeList.filter((val) => dayjs(val).isSame(dayjs(), 'day')).length}
</span>
</span>
<span class={"text-[14px]"}>个番茄时</span>
<span class={'text-[14px]'}>个番茄时</span>
</div>
<div class={"flex flex-col justify-end"}>
<div class={"flex gap-x-3 "}>
<Tooltip title={"沉浸模式"}>
<div class={'flex flex-col justify-end'}>
<div class={'flex gap-x-3 '}>
<Tooltip title={'沉浸模式'}>
<div
onClick={(e) => {
e.stopPropagation()
store.openFullscreen = true
}}
class={"w-[42px] h-[42px] bg-white/40 backdrop-blur-md flex items-center justify-center rounded-xl"}>
<img src={returnImg} alt="start" class={"w-[18px]"}></img>
class={
'w-[42px] h-[42px] bg-white/40 backdrop-blur-md flex items-center justify-center rounded-xl'
}
>
<img src={returnImg} alt="start" class={'w-[18px]'}></img>
</div>
</Tooltip>
<Tooltip title={"开始"}>
<div class={"w-[42px] h-[42px] bg-white/40 backdrop-blur-md flex items-center justify-center rounded-xl"}
<Tooltip title={'开始'}>
<div
class={
'w-[42px] h-[42px] bg-white/40 backdrop-blur-md flex items-center justify-center rounded-xl'
}
onClick={(e) => {
e.stopPropagation()
if (store.state.isStart) {
@ -53,30 +66,30 @@ export default defineComponent(() => {
} else {
store.beginTomatoTime()
store.openFullscreen = true
}
}}>
{
store.state.isStart ?
<img src={endImg} alt="start" class={"w-[18px]"}></img>
:
<img src={PlayStartImg} alt="start" class={"w-[18px]"}></img>
}
}}
>
{store.state.isStart ? (
<img src={endImg} alt="start" class={'w-[18px]'}></img>
) : (
<img src={PlayStartImg} alt="start" class={'w-[18px]'}></img>
)}
</div>
</Tooltip>
<Tooltip title={"添加目标"}>
<div class={"w-[42px] h-[42px] bg-white/40 backdrop-blur-md flex items-center justify-center rounded-xl"}
<Tooltip title={'添加目标'}>
<div
class={
'w-[42px] h-[42px] bg-white/40 backdrop-blur-md flex items-center justify-center rounded-xl'
}
onClick={() => {
setTimeout(() => {
store.openShowModel = null
}, 300)
}}>
<img src={PlusImg} alt="start" class={"w-[18px]"}></img>
}}
>
<img src={PlusImg} alt="start" class={'w-[18px]'}></img>
</div>
</Tooltip>
</div>
</div>
</div>

3
src/widgets/work/Modal.tsx
View File

@ -130,7 +130,8 @@ const EditContent = defineComponent(() => {
{!form.value.remindTime ? '选择时间' : dayjs(form.value.remindTime).format('HH:mm')}
<img src={DownImg} class={"w-[12px] object-cover "}></img>
<TimePicker
format={'HH:mm'}
showNow={false}
class={'absolute opacity-0 left-0 top-0 w-full h-full'}
onChange={(e) => {
form.value.remindTime = dayjs(e).valueOf()

3
src/widgets/work/modal_view/list.tsx
View File

@ -66,7 +66,8 @@ export default defineComponent(() => {
</div>
<div class={"w-[16px] hidden group-hover:flex z-10 h-[16px] absolute -right-1 -top-1 bg-[#ddd] rounded-full items-center justify-center"}
onClick={() => {
onClick={(e) => {
e.stopPropagation()
const idx = store.state.list.findIndex(val => val.id === item.id)
if (idx !== -1) {
store.state.list.splice(0, 1)

14
tailwind.config.cjs
View File

@ -5,8 +5,18 @@ module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {}
extend: {
animation: {
wiggle: 'wiggle .3s ease-in-out infinite'
},
keyframes: {
wiggle: {
'0%, 100%': { transform: 'rotate(-1deg)' },
'50%': { transform: 'rotate(1deg)' }
}
}
}
},
plugins: [require('@tailwindcss/typography')]
}