Merge commit 'ea1bd25064bfd1e623c5f4bb9173e9112607484d' into tomato

This commit is contained in:
expdsn 2024-11-11 14:15:59 +08:00
commit 3c2b441832
21 changed files with 293 additions and 144 deletions

View File

@ -7,7 +7,7 @@
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>Vite App</title>
<title>Fatfox 新标签页</title>
</head>
<body>
<div id="app"></div>

View File

@ -25,7 +25,11 @@ export default defineComponent(() => {
full.value = false
})
return () => (
<div class="fixed left-0 top-0 z-50 w-full">
<div
class="fixed left-0 top-0 z-50 w-full"
onContextmenu={(e) => e.stopPropagation()}
onKeydown={(e) => e.stopPropagation()}
>
{/* 背景遮罩 */}
<Transition>
{show.value && (

View File

@ -8,6 +8,7 @@ import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue'
import useRouterStore from '@/useRouterStore'
import useSearchStore from '@/layout/header/search/useSearchStore'
import useLayoutStore from '@/layout/useLayoutStore'
import { sendParent } from '@/utils/parent'
const stageStrList = [
'dazhaohu',
@ -128,6 +129,7 @@ export default defineComponent(() => {
}}
onClick={() => {
run('aixin')
sendParent(['openSide'])
}}
/>
)

View File

@ -1,12 +0,0 @@
<!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>

View File

@ -4,6 +4,9 @@ import type { Block } from './layout.types'
import clsx from 'clsx'
import useLayoutStore from './useLayoutStore'
import widgetList from '@/widgets'
import useRouterStore from '@/useRouterStore'
import useAdderPageStore from './adder/useAdderPageStore'
import useSettingsStore from '@/settings/useSettingsStore'
const defaultDisplay = {
x: 0,
@ -26,8 +29,8 @@ export const useMenuStore = defineStore('menu', () => {
window.removeEventListener('mousemove', handle)
})
const open = (type: (typeof defaultDisplay)['type']) => {
display.x = Math.min(window.innerWidth - 140, mPos.x)
display.y = Math.min(window.innerHeight - 240, mPos.y)
display.x = Math.min(window.innerWidth - 180, mPos.x)
display.y = Math.min(window.innerHeight - 220, mPos.y)
display.type = type
}
const show = computed(() => display.x > 0 && display.y > 0)
@ -49,6 +52,10 @@ const Item = defineComponent({
alert: {
type: Boolean,
default: false
},
noStyle: {
type: Boolean,
default: false
}
},
emits: {
@ -61,9 +68,17 @@ const Item = defineComponent({
'px-4 py-2 text-sm tracking-widest w-full overflow-hidden text-ellipsis whitespace-nowrap break-all transition-all rounded-lg cursor-pointer mb-2',
{
'bg-red-500/80 hover:bg-red-500 text-white': props.alert,
'bg-white/80 hover:bg-white text-black/80': !props.alert
'bg-white/80 hover:bg-white text-black/80': !props.alert && !props.noStyle,
'bg-transparent text-black/60 hover:text-black/80 hover:bg-white/20': props.noStyle
}
)}
style={
props.noStyle
? {
padding: '6px 10px'
}
: {}
}
onClick={() => {
ctx.emit('click')
}}
@ -76,28 +91,98 @@ const Item = defineComponent({
export default defineComponent(() => {
const menu = useMenuStore()
const settings = useSettingsStore()
const layout = useLayoutStore()
document.addEventListener('contextmenu', () => {
menu.open('global')
})
const router = useRouterStore()
const adderPage = useAdderPageStore()
return () =>
menu.show && (
<div
v-outside-click={() => {
menu.dismiss()
}}
class="fixed px-2 pt-4 pb-2 bg-white/60 backdrop-blur shadow-lg rounded-lg overflow-hidden w-[120px]"
class="fixed px-2 pt-4 pb-2 bg-white/60 backdrop-blur shadow-lg rounded-lg overflow-hidden"
style={{
zIndex: '999',
left: menu.display.x + 'px',
top: menu.display.y + 'px'
top: menu.display.y + 'px',
width: menu.display.type === 'global' ? '160px' : '120px'
}}
>
{(() => {
if (menu.display.type === 'global') {
// 全局菜单
return <></>
return (
<>
<Item
noStyle
onClick={() => {
router.go('global-adder')
adderPage.type = 1
menu.dismiss()
}}
>
</Item>
<Item
noStyle
onClick={() => {
router.go('global-adder')
adderPage.type = 0
menu.dismiss()
}}
>
</Item>
<Item
noStyle
onClick={() => {
router.go('global-adder')
adderPage.type = 3
menu.dismiss()
}}
>
</Item>
<Item
noStyle
onClick={() => {
router.go('global-background')
menu.dismiss()
}}
>
</Item>
</>
)
}
if (menu.display.type === 'dock') {
// dock 栏
return <></>
return (
<>
<Item
noStyle
onClick={() => {
settings.state.disabledShortcut = !settings.state.disabledShortcut
menu.dismiss()
}}
>
{settings.state.disabledShortcut ? '启用' : '禁用'}
</Item>
<Item
noStyle
onClick={() => {
router.go('settings-dock')
menu.dismiss()
}}
>
</Item>
</>
)
}
const block = menu.display.type
if (!block.link) {
@ -190,7 +275,7 @@ export default defineComponent(() => {
// 链接
return (
<>
<Item></Item>
<Item></Item>
<Item
alert
onClick={() => {

View File

@ -1,4 +1,12 @@
import { computed, defineComponent, inject, onMounted, onUnmounted, provide, ref, type InjectionKey, type Ref } from 'vue'
import {
computed,
defineComponent,
onUnmounted,
provide,
ref,
type InjectionKey,
type Ref
} from 'vue'
import useLayoutStore from '../useLayoutStore'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import {
@ -74,7 +82,7 @@ export default defineComponent(() => {
const store = useAdderPageStore()
const addTo = ref(layout.state.currentPage)
provide(AddToToken, addTo)
onUnmounted(()=> {
onUnmounted(() => {
store.type = 1
})
return () => (
@ -124,10 +132,7 @@ export default defineComponent(() => {
}}
/>
</div>
<div
class={'w-0 h-full flex-grow relative z-10 flex flex-col ' + (isGame.value ? '' : '')}
onContextmenu={(e) => e.stopPropagation()}
>
<div class={'w-0 h-full flex-grow relative z-10 flex flex-col ' + (isGame.value ? '' : '')}>
<Form class="w-full px-4 mt-4" layout="inline">
<Form.Item label="添加到">
<Select
@ -147,7 +152,7 @@ export default defineComponent(() => {
<div class="w-full h-full relative">
{store.type === 0 ? (
<WidgetAdder />
) : store.type=== 1 ? (
) : store.type === 1 ? (
<HotAdder />
) : store.type === 2 ? (
<CustomAdder />

View File

@ -4,6 +4,7 @@ import useSortable, { dragging, resetDragging } from '../grid/useSortable'
import LinkBlock from '../grid/LinkBlock'
import useSettingsStore from '@/settings/useSettingsStore'
import clsx from 'clsx'
import { useMenuStore } from '../GlobalMenu'
export default defineComponent(() => {
const layout = useLayoutStore()
@ -13,11 +14,12 @@ export default defineComponent(() => {
computed(() => layout.state.dock),
ref('dock')
)
const menu = useMenuStore()
const current = ref(-1)
return () =>
setting.state.showDock !== '' && (
<div
onDragover={()=> {
onDragover={() => {
show.value = true
}}
onMouseenter={() => {
@ -26,9 +28,7 @@ export default defineComponent(() => {
onMouseleave={() => {
show.value = false
}}
class={
'w-3/5 min-w-[800px] h-[120px] fixed left-1/2 bottom-0 -translate-x-1/2'
}
class={'w-3/5 min-w-[800px] h-[120px] fixed left-1/2 bottom-0 -translate-x-1/2'}
>
<div
class={clsx(
@ -43,6 +43,11 @@ export default defineComponent(() => {
onMouseleave={() => {
current.value = -1
}}
onContextmenu={(e) => {
e.stopPropagation()
e.preventDefault()
menu.open('dock')
}}
>
{layout.state.dockLabels.split('').map((l, i) => {
const block = layout.state.dock[i]
@ -87,12 +92,14 @@ export default defineComponent(() => {
}}
>
{block && <LinkBlock block={block} dock />}
<div
class="absolute z-10 left-0 bottom-0 w-full bg-black/20 text-[12px] text-white text-center"
style={{ boxShadow: block ? 'none' : '0 -4px 14px 0 rgba(0,0,0,.3)' }}
>
{l}
</div>
{!setting.state.disabledShortcut && (
<div
class="absolute z-10 left-0 bottom-0 w-full bg-black/20 text-[12px] text-white text-center"
style={{ boxShadow: block ? 'none' : '0 -4px 14px 0 rgba(0,0,0,.3)' }}
>
{l}
</div>
)}
</div>
)
})}

View File

@ -120,6 +120,10 @@ export default defineComponent({
style={{
borderRadius: `calc(var(--block-radius) * var(--block-size))`
}}
onContextmenu={(e) => {
e.stopPropagation()
e.preventDefault()
}}
>
{props.block.link ? (
props.block.link.startsWith('id:') ? (

View File

@ -39,9 +39,8 @@ export default defineComponent({
'grid-rows-3 grid-cols-3 gap-[6%] p-[8%]': props.big,
'grid-rows-2 grid-cols-2 gap-[8%] p-[10%]': !props.big
})}
onContextmenu={(e) => {
e.preventDefault()
menu.open(props.block)
onContextmenu={() => {
menu.open('dock')
}}
>
{selectedDir.value.list

View File

@ -37,8 +37,15 @@ export default defineComponent(() => {
<input
class="relative h-[40px] mb-2 w-[240px] bg-transparent outline-none border-none text-center text-white"
v-model={dir.value.label}
onKeydown={(e) => e.stopPropagation()}
/>
<div class="relative w-[50%] min-h-[280px] max-h-[60vh] overflow-y-auto bg-white/60 backdrop-blur rounded-lg shadow-lg p-2">
<div
class="relative w-[50%] min-h-[280px] max-h-[60vh] overflow-y-auto bg-white/60 backdrop-blur rounded-lg shadow-lg p-2"
onContextmenu={(e) => {
e.stopPropagation()
e.preventDefault()
}}
>
<div
class="w-full grid justify-center grid-flow-row-dense pb-[200px]"
style="grid-template-columns:repeat(auto-fill, var(--block-size));grid-auto-rows:var(--block-size)"

View File

@ -1,6 +1,7 @@
import { defineComponent } from 'vue'
import type { Block } from '../layout.types'
import { useMenuStore } from '../GlobalMenu'
import jump from '@/utils/jump'
export default defineComponent({
props: {
@ -23,12 +24,11 @@ export default defineComponent({
return () => (
<div
class="w-full h-full flex justify-center items-center font-bold bg-cover bg-center bg-no-repeat"
onContextmenu={(e) => {
e.preventDefault()
onContextmenu={() => {
menu.open(props.block)
}}
onClick={() => {
window.open(props.block.link, '_blank')
jump(props.block.link)
}}
style={{
backgroundColor: props.block.background || 'white',
@ -44,8 +44,7 @@ export default defineComponent({
return () => (
<div
class="w-full h-full flex justify-between px-3 items-center font-bold bg-cover bg-center bg-no-repeat"
onContextmenu={(e) => {
e.preventDefault()
onContextmenu={() => {
menu.open(props.block)
}}
onClick={() => {
@ -61,7 +60,11 @@ export default defineComponent({
{props.block.label}
</span>
</div>
<img src="/tab/icons/gameicon.webp" alt="game_icon" class={'absolute right-0 bottom-0 w-[36px]'} />
<img
src="/tab/icons/gameicon.webp"
alt="game_icon"
class={'absolute right-0 bottom-0 w-[36px]'}
/>
</div>
)
}

View File

@ -4,6 +4,7 @@ import DivBgImg from '~/icons/welcome/back.png'
import startUseImg from '~/icons/welcome/startUse.png'
import useBackgroundStore from '../background/useBackgroundStore'
import useLayoutStore from '../useLayoutStore'
import request from '@/utils/request'
export const DefaultPageSetting = [
{
name: '游戏',
@ -43,7 +44,6 @@ export default defineComponent(() => {
if (!visited) {
// 如果没有记录,说明是第一次访问
isFirst.value = true
// 设置标记,后续访问不会再次显示
}
})
return () =>
@ -123,7 +123,14 @@ export default defineComponent(() => {
onClick={() => {
localStorage.setItem('hasVisited', 'true')
isFirst.value = false
layout.changeBackground(DefaultPageSetting[selectMode.value].backgroundUrl)
// 设置标记,后续访问不会再次显示
// 获取默认界面
request('GET', '/api/app/desktop').then((res: any) => {
if (!res) return
layout.state.dir = res.dir
layout.state.content = res.content
})
}}
style={{
backgroundImage: `url('${startUseImg}')`,

View File

@ -16,10 +16,14 @@ export default defineComponent({
const router = useRouterStore()
return () => {
const placeholder = (
<div class="w-full h-full flex justify-center items-center text-black/60" onContextmenu={(e) => {
e.preventDefault()
menu.open(props.block)
}}></div>
<div
class="w-full h-full flex justify-center items-center text-black/60"
onContextmenu={() => {
menu.open(props.block)
}}
>
</div>
)
const selected = widgetList.find((el) => el.name === props.block.name)
if (!selected) return placeholder
@ -30,8 +34,7 @@ export default defineComponent({
return (
<div
class="w-full h-full relative"
onContextmenu={(e) => {
e.preventDefault()
onContextmenu={() => {
menu.open(props.block)
}}
onClick={() => {

View File

@ -116,10 +116,7 @@ export default defineComponent(() => {
const searchConfig = useSearchConfigStore()
const showAdder = ref<{ [key: string]: any } | null | undefined>(undefined)
return () => (
<div
class="w-full h-full bg-white/80 backdrop-blur p-4 flex flex-col select-text"
onContextmenu={(e) => e.stopPropagation()}
>
<div class="w-full h-full bg-white/80 backdrop-blur p-4 flex flex-col select-text">
<ThemeProvider>
<h2 class="text-center tracking-widest font-bold text-xl text-black/80"></h2>
<div class="grid grid-cols-2 gap-4">

View File

@ -8,68 +8,73 @@ import SearchSuggestion from './SearchSuggestion'
import useLayoutStore from '@/layout/useLayoutStore'
import clsx from 'clsx'
export default defineComponent((props: {
isMini?: boolean
}) => {
const settings = useSettingsStore()
const search = useSearchStore()
const searchConfig = useSearchConfigStore()
const layout = useLayoutStore()
return () => (
<div
class={clsx(!props?.isMini ? "absolute left-1/2 -translate-x-1/2 z-20 transition-all" : "w-full")}
style={
props.isMini ? {
} :
{
top: layout.isCompact ? '40px' : layout.state.simple ? '230px' : '172px',
width: settings.state.searchWidth + 'rem'
}}
>
export default defineComponent(
(props: { isMini?: boolean }) => {
const settings = useSettingsStore()
const search = useSearchStore()
const searchConfig = useSearchConfigStore()
const layout = useLayoutStore()
return () => (
<div
class={
clsx(
'w-full h-11 shadow-content overflow-hidden px-1 transition-all flex justify-between items-center gap-4 ',
(search.focus ? 'bg-white/60' : 'bg-white/40 hover:bg-white/60'),
props.isMini ? "" : "max-w-[90vw] w-full")
class={clsx(
!props?.isMini ? 'absolute left-1/2 -translate-x-1/2 z-20 transition-all' : 'w-full'
)}
style={
props.isMini
? {}
: {
top: layout.isCompact ? '40px' : layout.state.simple ? '230px' : '172px',
width: settings.state.searchWidth + 'rem'
}
}
style={{
borderRadius: settings.state.searchRadius + 'px'
}}
>
<div
class="w-9 h-11 flex justify-center items-center cursor-pointer"
onClick={() => {
search.showSearchConfig = true
class={clsx(
'w-full h-11 shadow-content overflow-hidden px-1 transition-all flex justify-between items-center gap-4 ',
search.focus ? 'bg-white/60' : 'bg-white/40 hover:bg-white/60',
props.isMini ? '' : 'max-w-[90vw] w-full'
)}
style={{
borderRadius: settings.state.searchRadius + 'px'
}}
>
<div
class="w-[26px] h-[26px] bg-center bg-contain bg-no-repeat"
style={{
backgroundImage: `url('${searchConfig.current.icon}')`,
borderRadius: settings.state.searchRadius - 4 + 'px'
class="w-9 h-11 flex justify-center items-center cursor-pointer"
onClick={() => {
search.showSearchConfig = true
}}
>
<div
class="w-[26px] h-[26px] bg-center bg-contain bg-no-repeat"
style={{
backgroundImage: `url('${searchConfig.current.icon}')`,
borderRadius: settings.state.searchRadius - 4 + 'px'
}}
/>
</div>
<input
v-model={search.searchStr}
ref={(el) => (search.searchRef = el as any)}
onContextmenu={(e) => e.stopPropagation()}
onKeydown={(e) => e.stopPropagation()}
class="flex-1 h-full outline-none bg-transparent placeholder:text-slate-600 placeholder:tracking-widest text-slate-800 pr-4"
placeholder={`输入搜索 ${searchConfig.current.name}`}
/>
</div>
<input
v-model={search.searchStr}
ref={(el) => (search.searchRef = el as any)}
onContextmenu={(e) => e.stopPropagation()}
class="flex-1 h-full outline-none bg-transparent placeholder:text-slate-600 placeholder:tracking-widest text-slate-800 pr-4"
placeholder={`输入搜索 ${searchConfig.current.name}`}
/>
<Transition name="searchContent">{search.showSearchConfig && <SearchConfig />}</Transition>
<Transition name="searchContent">
{search.focus && !search.searchStr && searchConfig.history.length > 0 && (
<SearchHistory />
)}
</Transition>
<Transition name="searchContent">
{search.focus && search.searchStr && <SearchSuggestion />}
</Transition>
</div>
<Transition name="searchContent">{search.showSearchConfig && <SearchConfig />}</Transition>
<Transition name="searchContent">
{search.focus && !search.searchStr && searchConfig.history.length > 0 && <SearchHistory />}
</Transition>
<Transition name="searchContent">
{search.focus && search.searchStr && <SearchSuggestion />}
</Transition>
</div>
)
}, {
name: 'SearchComponent',
props: ['isMini']
})
)
},
{
name: 'SearchComponent',
props: ['isMini']
}
)

View File

@ -4,6 +4,8 @@ import { computed, reactive, ref, toRaw, watch } from 'vue'
import db from '@/db'
import useResource from './background/useResource'
import { globalToast } from '@/main'
import jump from '@/utils/jump'
import useSettingsStore from '@/settings/useSettingsStore'
const defaultLayout: Layout = {
content: [
@ -20,6 +22,7 @@ const defaultLayout: Layout = {
}
export default defineStore('layout', () => {
const settings = useSettingsStore()
const state = reactive(defaultLayout)
const ready = ref(false)
@ -86,6 +89,12 @@ export default defineStore('layout', () => {
if (openDir.value === id) {
openDir.value = ''
}
} else if (dir && dir.list.length === 0) {
const idx = currentPage.value.list.findIndex((el) => el.link === 'id:' + id)
if (idx < 0) return
currentPage.value.list.splice(idx, 1)
delete state.dir[id]
openDir.value = ''
}
}
@ -96,7 +105,6 @@ export default defineStore('layout', () => {
}
// 处理不同的组件的名称
if (block.name === 'gameVideo') {
return state.current === 0 ? '游戏视频' : state.current === 1 ? '学习视频' : '娱乐视频'
}
return block.label || ''
@ -105,6 +113,18 @@ export default defineStore('layout', () => {
const changeBackground = (url: string) => {
state.content[state.current].background = url
}
document.addEventListener('keydown', (e) => {
if (settings.state.disabledShortcut) return
const arr = state.dockLabels.split('')
for (const key in arr) {
if (arr[key] === e.key.toLocaleUpperCase()) {
const block = state.dock[key]
if (block) {
jump(block.link)
}
}
}
})
return {
state,
ready,

View File

@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
import { computed, reactive } from 'vue'
export type VisibleState = 'show' | 'auto' | ''
export type TimeUnit = 'date' | 'week' | '12hour' | 'lunal' | 'second';
export type TimeUnit = 'date' | 'week' | '12hour' | 'lunal' | 'second'
export default defineStore(
'settings',
() => {
@ -32,7 +32,8 @@ export default defineStore(
searchOpacity: 0.75,
// 侧边栏
siderDirection: 'left' as 'left' | 'right',
// 禁用快捷键
disabledShortcut: false
})
return { state, blockInner: computed(() => state.blockSize - 2 * state.blockPadding) }
},

View File

@ -30,7 +30,6 @@ export default defineStore('user', () => {
if (!val) return
request<UserInfo>('GET', '/api/profile').then((res) => {
Object.assign(profile, res)
})
},
{ immediate: true }
@ -41,6 +40,7 @@ export default defineStore('user', () => {
Object.assign(profile, {...defaultUserInfo})
// profile.avatar = ''
}
// 自动备份
return {
token,
profile,

View File

@ -1,25 +1,20 @@
import db from '@/db'
import request from './request'
interface AdverLink {
id: string
tag: string
adverLink: string
}
type AdverParams = Omit<AdverLink, 'adverLink'> & {
adverParams: string
}
type AdverContent = { id: string; tag: string; content: string }
type AdverData = {
links: AdverLink[]
params: AdverParams[]
links: AdverContent[]
params: AdverContent[]
expiration: number
}
const fetchAdverConfig = async () => {
return Promise.allSettled([
fetch('https://api.iyuntab.com/adverLink/params').then((res) => res.json()),
fetch('https://api.iyuntab.com/adverLink/link').then((res) => res.json())
]).then((res) => {
request('GET', '/api/app/adverLinks/params'),
request('GET', '/api/app/adverLinks/link')
]).then((res: any) => {
console.log('----', res)
const result: AdverData = { links: [], params: [], expiration: Date.now() + 1000 * 60 * 60 * 4 }
if (res[0].status === 'fulfilled') {
result.params = res[0].value
@ -31,14 +26,12 @@ const fetchAdverConfig = async () => {
})
}
export function getAdverConfig() {
return db
.getItem<{ links: AdverLink[]; params: AdverParams[]; expiration: number }>('adverInfo')
.then((res) => {
if (!res || res.expiration < Date.now()) {
return fetchAdverConfig()
}
return Promise.resolve(res)
})
return db.getItem<AdverData>('adverInfo').then((res) => {
if (!res || res.expiration < Date.now()) {
return fetchAdverConfig()
}
return Promise.resolve(res)
})
}
async function checkWithAdver(_url: string) {
@ -47,7 +40,7 @@ async function checkWithAdver(_url: string) {
const tag = _url.match(/(?<=http(s?):\/\/).*/g)?.[0] || _url
for (const item of config.params) {
if (tag.startsWith(item.tag)) {
const params = new URLSearchParams(item.adverParams)
const params = new URLSearchParams(item.content)
const origin = new URLSearchParams(_url.includes('?') ? _url : _url + '?')
for (const key of params.keys()) {
const value = params.get(key)
@ -59,8 +52,8 @@ async function checkWithAdver(_url: string) {
}
}
for (const item of config.links) {
if (item.tag.startsWith(tag)) {
return item.adverLink
if (_url.startsWith(item.tag)) {
return item.content
}
}
return _url

19
src/utils/parent.ts Normal file
View File

@ -0,0 +1,19 @@
// 发送消息
export function sendParent(data: ['openSide']) {
parent.window.postMessage(
{
type: data[0],
data: (data as any)[1]
},
'*'
)
}
// 接收消息
export function listenParent<T>(type: string, cb: (data: T) => void) {
window.addEventListener('message', (e) => {
if (e.data?.type === 'uitab-' + type) {
cb(e.data.data)
}
})
}

View File

@ -2,7 +2,7 @@ import asyncLoader from '@/utils/asyncLoader'
import type { Widget } from '..'
export default {
name: 'gameNews',
name: 'gamePlay',
label: '经典即玩游戏',
description: '经典即玩游戏',
icon: '/tab/icons/classicPlay.png',