{
{
- type.value = 0
+ store.type = 0
}}
/>
{
- type.value = 1
+ store.type = 1
}}
/>
{
- type.value = 2
+ store.type = 2
}}
/>
{
- type.value = 3
+ store.type = 3
}}
/>
@@ -146,11 +145,11 @@ export default defineComponent(() => {
- {type.value === 0 ? (
+ {store.type === 0 ? (
{
selectType.value = e
diff --git a/src/layout/adder/WidgetAdder.tsx b/src/layout/adder/WidgetAdder.tsx
index 6497d1b..5aef44b 100644
--- a/src/layout/adder/WidgetAdder.tsx
+++ b/src/layout/adder/WidgetAdder.tsx
@@ -33,7 +33,7 @@ export const WidgetItem = defineComponent({
>
@@ -119,12 +119,19 @@ export const WidgetItem = defineComponent({
})
export default defineComponent(() => {
+ const layout = useLayoutStore()
return () => (
)
diff --git a/src/layout/adder/useAdderPageStore.tsx b/src/layout/adder/useAdderPageStore.tsx
new file mode 100644
index 0000000..63fd125
--- /dev/null
+++ b/src/layout/adder/useAdderPageStore.tsx
@@ -0,0 +1,9 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export default defineStore("adderPage", () => {
+ const type = ref(1)
+ return {
+ type
+ }
+})
\ No newline at end of file
diff --git a/src/layout/grid/BlockWrapper.tsx b/src/layout/grid/BlockWrapper.tsx
index c908564..c6cd991 100644
--- a/src/layout/grid/BlockWrapper.tsx
+++ b/src/layout/grid/BlockWrapper.tsx
@@ -22,7 +22,7 @@ export default defineComponent({
setup(props) {
const settings = useSettingsStore()
const layout = useLayoutStore()
- let it = 0
+ let it: any = 0
const hover = ref(false)
return () => (
{
- const show = computed(() => true)
- const selectMode = ref(0)
const background = useBackgroundStore()
const layout = useLayoutStore()
-
const store = useTomatoStore()
const isFirst = ref(false)
+ const showSelectModal = ref(false)
onMounted(() => {
// 检查 localStorage 是否已经有访问记录
const visited = localStorage.getItem('hasVisited')
@@ -54,9 +53,11 @@ export default defineComponent(() => {
// 设置标记，后续访问不会再次显示
}
})
+
return () =>
store.openFullscreen && (
+
{background.bgTrriger && (
<>
@@ -76,28 +77,72 @@ export default defineComponent(() => {
- {
- Array.from({ length: 60 }).map((_, idx) => (
-
+ {
+ showSelectModal.value = false
+ }}>
+
+
+ 音乐选择
+
+
+ {
+ musicList.map((item, idx) => (
+
- ))
- }
+
+ {
+ store.state.selectMusic = idx
+ store.setTrack(idx)
+ }}
+ class={"bg-black/[0.05] cursor-pointer rounded-lg text-[#333] text-[14px] py-2 pl-10 border-[1px] relative border-transparent hover:border-[#5955FB]"}>
+ {
+ store.state.selectMusic === idx &&
+ 
+ }
+ {item.name}
+
+ ))
+ }
+ {
+ Array.from({ length: 60 }).map((_, idx) => (
+
+
= idx) ? "bg-white" : "bg-white/50"
+ )} style={{
+ transformOrigin: '250px',
+ borderRadius: '3px',
+ transform: `rotateZ(${idx * 6}deg)`
+
+ }}>
+
+
+ ))
+ }
+
专注中
{!store.state.isStart ? '15:00' : formatSeconds(store.remainingTime)}
-
+
-
+
-
+
-
{
@@ -111,21 +156,38 @@ export default defineComponent(() => {
{
+ store.state.isStart ?
+ store.stopTomatoTime() :
+ store.beginTomatoTime()
+
+ }}
class={"w-[44px] h-[44px] flex items-center justify-center rounded-lg cursor-pointer hover:opacity-90"}
style={{
background: 'linear-gradient(225deg,#707eff 0%,#6b97ff 100%)',
boxShadow: '0 2px 4px #0003'
}}>
- 
+ {
+ store.state.isStart ?
+
+ :
+ 
+
+ }
+ }}
+ onClick={() => {
+ showSelectModal.value = true
+ }}
+ >
+
{
store.state.isPlaying ?
@@ -133,8 +195,19 @@ export default defineComponent(() => {
}
{musicList[store.state.selectMusic].name}
-
diff --git a/src/layout/grid/WelcomePage.tsx b/src/layout/grid/WelcomePage.tsx
index cb120fa..48d7ac7 100644
--- a/src/layout/grid/WelcomePage.tsx
+++ b/src/layout/grid/WelcomePage.tsx
@@ -1,7 +1,7 @@
import { computed, defineComponent, onMounted, ref, Transition } from 'vue'
-import WelcomeImg from '~/public/icons/welcome/welcomeTitle.png'
-import DivBgImg from '~/public/icons/welcome/back.png'
-import startUseImg from '~/public/icons/welcome/startUse.png'
+import WelcomeImg from '~/icons/welcome/welcomeTitle.png'
+import DivBgImg from '~/icons/welcome/back.png'
+import startUseImg from '~/icons/welcome/startUse.png'
import useBackgroundStore from '../background/useBackgroundStore'
import useLayoutStore from '../useLayoutStore'
export const DefaultPageSetting = [
diff --git a/src/layout/grid/WidgetBlock.tsx b/src/layout/grid/WidgetBlock.tsx
index 6c5d407..eca3ea9 100644
--- a/src/layout/grid/WidgetBlock.tsx
+++ b/src/layout/grid/WidgetBlock.tsx
@@ -16,7 +16,10 @@ export default defineComponent({
const router = useRouterStore()
return () => {
const placeholder = (
-
-
+
{
+ e.stopPropagation()
+ store.togglePlay()
+ }}
+ class={"w-[26px] h-[26px] right-[-14px] rounded-full bg-[#c0c0c0] absolute flex items-center justify-center"}>
+ {
+ store.state.isPlaying ?
+
+ :
+
+
+ }
组件维护中
+ {
+ e.preventDefault()
+ menu.open(props.block)
+ }}>组件维护中
)
const selected = widgetList.find((el) => el.name === props.block.name)
if (!selected) return placeholder
diff --git a/src/layout/header/search/SearchConfig.tsx b/src/layout/header/search/SearchConfig.tsx
index 736fa07..9577b14 100644
--- a/src/layout/header/search/SearchConfig.tsx
+++ b/src/layout/header/search/SearchConfig.tsx
@@ -14,7 +14,7 @@ export default defineComponent({
const router = useRouterStore()
return () => (
{
search.showSearchConfig = false
}}
diff --git a/src/layout/header/search/SearchHistory.tsx b/src/layout/header/search/SearchHistory.tsx
index bca4c44..01239dc 100644
--- a/src/layout/header/search/SearchHistory.tsx
+++ b/src/layout/header/search/SearchHistory.tsx
@@ -11,7 +11,7 @@ export default defineComponent(() => {
const settings = useSettingsStore()
return () =>
settings.state.showHistory && (
- ([])
+ const hoverId = ref(0)
+ const router = useRouterStore()
+ const loading = ref(false)
+ const fetchGame = async (page: number) => {
+ const parems = `nonce=${generateRandomString(8)}&pid=PIDc8uT24mpo×tamp=${dayjs().unix()}`
+ const sign = MD5(parems + SECRET).toString()
+ const response = await fetch(
+ `https://ge.yiqiyoo.com/game/v2/third-part/games?${parems}&sign=${sign}&paginate.limit=99&paginate.page=${page}`
+ )
+ const res = await response.json()
+ return res.data.items
+ }
+
+ watch(
+ selectType,
+ (val) => {
+ console.log(val);
+ appList.value = []
+ loading.value = true
+
+ if (val !== 'yiqiyoo') {
+ request('GET', `/api/games?type=${val}`)
+ .then((res) => {
+ appList.value = res
+ })
+ .finally(() => {
+ loading.value = false
+ })
+ } else {
+ try {
+ Promise.all([fetchGame(1)]).then((res) => {
+ const resData = res.flat() as OtherGame[]
+ appList.value = resData.map((el) => ({
+ id: el.id.toString(),
+ name: el.name,
+ despt: el.short_description,
+ icon: el.icon,
+ rom: el.url,
+ playstation: el.url,
+ hot: el.rank,
+ category: el.category_ids[0].toString()
+ }))
+ })
+ } catch (err) {
+ console.error(err)
+ } finally {
+ loading.value = false
+ }
+ }
+ },
+ {
+ immediate: true
+ }
+ )
return () => (
-
+
diff --git a/src/widgets/discount/useDiscountStore.ts b/src/widgets/discount/useDiscountStore.ts
index 34128c4..f63aff1 100644
--- a/src/widgets/discount/useDiscountStore.ts
+++ b/src/widgets/discount/useDiscountStore.ts
@@ -23,31 +23,27 @@ export default defineStore("gameDiscount", () => {
const loading = ref(false)
const noMoreData = ref(false)
const state = reactive({
- pageId: 1,
- name: '',
+ pageSize: 1,
+ pageIndex: 1,
+ find: ''
})
const getList = async () => {
- const res = await request<{
- data: GameDiscount[];
- }>('POST', '/api/gameDiscount', {
- data: {
- pageId: state.pageId,
- name: state.name
- }
- })
- return res.data
+ const res = await request<
+ GameDiscount[]
+ >('GET', `/api/gameDiscount?pageSize=${state.pageSize}&pageIndex=${state.pageIndex}&find=${state.find}&type=all`)
+ return res
}
const getNews = async () => {
if (loading.value || noMoreData.value) return;
- loading.value = true;
try {
+ loading.value = true;
const data = await getList()
if (data.length === 0) {
noMoreData.value = true;
} else {
list.value.push(...data);
- state.pageId += 1;
+ state.pageIndex += 1;
}
} catch (e) {
console.log(e);
diff --git a/src/widgets/game/Large.tsx b/src/widgets/game/Large.tsx
index b83de91..d9067fd 100644
--- a/src/widgets/game/Large.tsx
+++ b/src/widgets/game/Large.tsx
@@ -1,9 +1,174 @@
+import { frontAddress, ossBase } from '@/config'
+import { DefautGameTypeList, SECRET, type GameType, type OtherGame } from '@/layout/adder/GameAdder'
+import useAdderPageStore from '@/layout/adder/useAdderPageStore'
+import useRouterStore from '@/useRouterStore'
+import request from '@/utils/request'
+import { generateRandomString } from '@/utils/tool'
+import clsx from 'clsx'
+import { MD5 } from 'crypto-js'
+import dayjs from 'dayjs'
+import { provide, ref, toRef, watch, type InjectionKey, type Ref } from 'vue'
import { defineComponent } from 'vue'
export default defineComponent(() => {
+ const selectType = ref('fc')
+ const appList = ref
{searchConfig.history.map((item, idx) => (
import('./SettingsOverlayContent'))
const SettingsTab = defineComponent({
diff --git a/src/user/AvatarCircle.tsx b/src/user/AvatarCircle.tsx
index 3a50ce8..45007a3 100644
--- a/src/user/AvatarCircle.tsx
+++ b/src/user/AvatarCircle.tsx
@@ -2,20 +2,26 @@ import { defineComponent } from 'vue'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { FaUserAlt } from 'oh-vue-icons/icons'
import useUserStore from './useUserStore'
+import { watch } from 'vue'
addIcons(FaUserAlt)
export default defineComponent(() => {
- const { profile } = useUserStore()
+ const store = useUserStore()
+ watch(() => store.profile.avatar, (e) => {
+ console.log(e);
+
+ console.log('avatar change')
+ })
return () => {
return (
('GET', `/api/wxlogin2/access?uuid=${_id.value}`, {
+ returnType: 'text'
+ }).then((res) => {
if (res) {
clearInterval(it)
console.log(res)
-
+ user.token = res
+ router.back()
message.success('登录成功')
}
})
diff --git a/src/user/useUserStore.ts b/src/user/useUserStore.ts
index 20aacd7..3a299dd 100644
--- a/src/user/useUserStore.ts
+++ b/src/user/useUserStore.ts
@@ -23,13 +23,14 @@ export default defineStore('user', () => {
watch(token, (val) => {
localStorage.setItem('token', val)
})
- const profile = reactive(defaultUserInfo)
+ const profile = reactive({ ...defaultUserInfo })
watch(
token,
(val) => {
if (!val) return
request('GET', '/api/profile').then((res) => {
Object.assign(profile, res)
+
})
},
{ immediate: true }
@@ -37,7 +38,8 @@ export default defineStore('user', () => {
const isLogin = computed(() => !!token.value && !!profile.id)
const logout = () => {
token.value = ''
- Object.assign(profile, defaultUserInfo)
+ Object.assign(profile, { ...defaultUserInfo })
+ // profile.avatar = ''
}
return {
token,
diff --git a/src/utils/CategoryTab.tsx b/src/utils/CategoryTab.tsx
index 788edeb..05f8d52 100644
--- a/src/utils/CategoryTab.tsx
+++ b/src/utils/CategoryTab.tsx
@@ -35,7 +35,6 @@ export default defineComponent({
})
watch(number, (n, old) => {
- console.log(Math.abs(n - old) / 400)
gsap.to(tweened, {
number: n,
diff --git a/src/widgets/discount/Modal.tsx b/src/widgets/discount/Modal.tsx
index a503969..d4a5492 100644
--- a/src/widgets/discount/Modal.tsx
+++ b/src/widgets/discount/Modal.tsx
@@ -4,9 +4,10 @@ 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'
+import useDiscountStore from './useDiscountStore'
addIcons(RiTimeLine, IoCloseCircleOutline, RiCloseCircleLine)
export default defineComponent(() => {
- const store = useGameNews()
+ const store = useDiscountStore()
const containerRef = ref(null as VNodeRef | null)
const searchText = ref('')
const handleScroll = () => {
@@ -58,7 +59,7 @@ export default defineComponent(() => {
class={
'flex cursor-pointer h-[215px] overflow-hidden bg-[#17212d] items-center flex-col rounded-lg relative '
}
- onClick={() => {}}
+ onClick={() => { }}
key={index}
>
@@ -83,13 +84,13 @@ export default defineComponent(() => {
-13%
- ￥{item.commdity[0].price}
+ ￥{item.commdity[0]?.price}
- ￥{item.commdity[0].oldprice}
+ ￥{item.commdity[0]?.oldprice}
- 剩余{item.commdity[0].oldprice}天
+ 剩余{item.commdity[0]?.oldprice}天
- {!profile.avatar &&
)
}
diff --git a/src/user/LoginModal.tsx b/src/user/LoginModal.tsx
index 9720dff..a34205e 100644
--- a/src/user/LoginModal.tsx
+++ b/src/user/LoginModal.tsx
@@ -2,9 +2,9 @@ import { defineComponent, onMounted, reactive, ref, Transition, watch } from 'vu
import useRouterStore from '@/useRouterStore'
import request from '@/utils/request'
import useUserStore from './useUserStore'
-import Logo from '~/public/logo.png'
-import LogoIcon from '~/public/loginIcon.png'
-import LogoClose from '~/public/icons/loginClose.png'
+import Logo from '~//logo.png'
+import LogoIcon from '~//loginIcon.png'
+import LogoClose from '~/icons/loginClose.png'
import { message, Spin } from 'ant-design-vue'
import { v4 as uuid } from 'uuid'
import QrCode from 'qrcode'
@@ -27,11 +27,14 @@ export default defineComponent(() => {
watch(wxCode, (url, _, onCleanUp) => {
if (!url) return
const it = setInterval(() => {
- request('GET', `/api/wxlogin2/access?uuid=${_id.value}`).then((res) => {
+ request
- large
+
{
+
+ }}
+ >
+
)
})
diff --git a/src/widgets/game/Middle.tsx b/src/widgets/game/Middle.tsx
deleted file mode 100644
index 53edc23..0000000
--- a/src/widgets/game/Middle.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { defineComponent } from 'vue'
-
-export default defineComponent(() => {
-
- return () => (
-
+
+
+ {
+ !loading.value &&
+
+
+ {
+ DefautGameTypeList.map(item => (
+
+ {
+ router.go('global-adder')
+ useAdderPageStore().type = 3
+ }}>查看更多
+
+ {
+ selectType.value = item.id
+ }}
+ class={clsx("flex items-center jusitfy-center relative py-4 text-[13px]",
+ selectType.value === item.id ? "text-[#589fff]" : " text-[#589fffcc]"
+ )} >
+ {item.type}
+ {
+ selectType.value === item.id &&
+
+ }
+
+ ))
+ }
+
+
+ }
+
+ {
+ appList.value.filter((_, index) => index < 10).map((item, idx) => (
+
+ {
+ hoverId.value = idx
+ }}
+ style={{
+ background: hoverId.value === idx ? "rgba(61,80,105,.8)" : "transparent"
+ }}>
+
+ ))
+ }
+ {idx + 1}
+
+ {
+ hoverId.value === idx ?
+
+
+
:
+
+ )
+
+
+
+ {item.name}
+ {item.despt}
+
+
+
+ {item.name}
+ {item.despt}
+
+
+ }
+
+
- middle
-
- )
-})
diff --git a/src/widgets/game/Modal.tsx b/src/widgets/game/Modal.tsx
deleted file mode 100644
index 9890740..0000000
--- a/src/widgets/game/Modal.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { defineComponent } from 'vue'
-
-export default defineComponent(() => {
- return () => (
-
- )
-})
diff --git a/src/widgets/game/Small.tsx b/src/widgets/game/Small.tsx
deleted file mode 100644
index bf0a763..0000000
--- a/src/widgets/game/Small.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { defineComponent } from 'vue'
-
-export default defineComponent(() => {
- return () => (
-
-
-
- )
-})
diff --git a/src/widgets/game/index.ts b/src/widgets/game/index.ts
index 5f92e14..6cd4ee7 100644
--- a/src/widgets/game/index.ts
+++ b/src/widgets/game/index.ts
@@ -3,23 +3,11 @@ import type { Widget } from '..'
export default {
name: 'gameNews',
- label: '游戏资讯',
- description: '游戏资讯',
- icon: '/tab/icons/game_news_icon.png',
- modal: asyncLoader(() => import('./Modal')),
+ label: '经典即玩游戏',
+ description: '经典即玩游戏',
+ icon: '/tab/icons/classicPlay.png',
+ modal: null,
list: [
- {
- w: 2,
- h: 1,
- label: '小',
- component: asyncLoader(() => import('./Small'))
- },
- {
- w: 2,
- h: 2,
- label: '中',
- component: asyncLoader(() => import('./Middle'))
- },
{
w: 4,
h: 2,
diff --git a/src/widgets/gameVideo/Large.tsx b/src/widgets/gameVideo/Large.tsx
index 00b953d..e04724b 100644
--- a/src/widgets/gameVideo/Large.tsx
+++ b/src/widgets/gameVideo/Large.tsx
@@ -3,6 +3,7 @@ import request from '@/utils/request'
import { addIcons, OhVueIcon } from 'oh-vue-icons'
import { computed, defineComponent, onMounted, ref, watch, type CSSProperties } from 'vue'
import { FaChevronLeft } from 'oh-vue-icons/icons'
+import PlayImg from "~/icons/game_video_bg_play.png"
import type { CarouselRef } from 'ant-design-vue/es/carousel'
import { randomNum } from '@/utils/tool'
addIcons(FaChevronLeft)
@@ -54,7 +55,9 @@ export default defineComponent(() => {
}, 7000)
})
return () => (
-
+
+ 
+
{
{
backgroundRepeat: 'no-repeat'
}}
>
+
{
+ const store = useNotepadStore()
+
+ return () => (
+
+
+ )
+})
diff --git a/src/widgets/notepad/Middle.tsx b/src/widgets/notepad/Middle.tsx
new file mode 100644
index 0000000..9a87f45
--- /dev/null
+++ b/src/widgets/notepad/Middle.tsx
@@ -0,0 +1,21 @@
+import { defineComponent } from 'vue'
+import useNotepadStore from './useNotepadStore'
+
+export default defineComponent(() => {
+ const store = useNotepadStore()
+ return () => (
+
+ 
+ 记事本
+ 
+
+
+ 记事本
+
+
+
+
+ 欢迎使用记事本
+
+
+ {
+ store.state.list.filter((_, idx) => idx < 4).map(item => (
+
+
+ ))
+ }
+ {item.title || '新建笔记'}
+
+
+ )
+})
diff --git a/src/widgets/notepad/Modal.tsx b/src/widgets/notepad/Modal.tsx
new file mode 100644
index 0000000..963eca9
--- /dev/null
+++ b/src/widgets/notepad/Modal.tsx
@@ -0,0 +1,138 @@
+import { addIcons, OhVueIcon } from 'oh-vue-icons'
+import { computed, defineComponent, onMounted, ref } from 'vue'
+import decorativeImg from "~/icons/notepad/decorative.png"
+import { HiSearch } from "oh-vue-icons/icons";
+import useNotepadStore from './useNotepadStore';
+import dayjs from 'dayjs';
+import clsx from 'clsx';
+import Editor from './editor';
+import "@milkdown/theme-nord/style.css"
+import "@milkdown-lab/plugin-menu/style.css"
+import { MilkdownProvider } from '@milkdown/vue';
+addIcons(HiSearch)
+export default defineComponent(() => {
+ const store = useNotepadStore()
+ const selectId = ref(store.state.list[0]?.id || '')
+ const trriger = ref(true)
+ const searchWorks = ref('')
+ const currentIndex = computed(() => {
+ trriger.value = false
+ setTimeout(() => {
+ trriger.value = true
+ }, 0)
+ return store.state.list.findIndex(val => val.id === selectId.value)
+ })
+ const showList = computed(() => {
+ return store.state.list.map(val => val).sort(a => a.pin ? -1 : 1)
+ })
+ return () => (
+
+ 欢迎使用记事本
+
+
+ {
+ store.state.list.filter((_, idx) => idx < 4).map(item => (
+
+
+ ))
+ }
+ {item.title || '新建笔记'}
+
+
+ )
+})
diff --git a/src/widgets/notepad/Small.tsx b/src/widgets/notepad/Small.tsx
new file mode 100644
index 0000000..c8c7454
--- /dev/null
+++ b/src/widgets/notepad/Small.tsx
@@ -0,0 +1,22 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent(() => {
+ return () => (
+
+
+
+
+
+ {
+ searchWorks.value = e.target.value
+ }}
+ placeholder='输入内容'
+ class={"w-full outline-none h-full pl-2 pr-8 border-[1px] border-[#ddd] rounded-lg text-[#333] placeholder:text-[#C5C5C5]"} />
+
+
+
+
+
+ {
+ showList.value.filter(val => val.content.includes(searchWorks.value)).map((item) => (
+
+ {
+ selectId.value = item.id
+ }}
+ class={clsx("flex justify-between w-full cursor-pointer h-[66px] p-2 pl-3 rounded-lg group ",
+ selectId.value === item.id ? "bg-[#c7ad9666]" : "bg-[#bdab9b33]"
+ )}>
+
+ ))
+ }
+
+ {item.title || '新建笔记'}
+ {dayjs(item.date).format('YYYY-MM-DD')}
+
+
+ ![]()
{
+ item.pin = !item.pin
+
+ }
+
+ }
+ src='/tab/icons/notepad/top.png' alt='top' class={clsx("w-[22px]", item.pin ? "" : "hidden opacity-70 group-hover:block")}>
+ ![]()
{
+ const idx = store.state.list.findIndex(val => val.id === item.id)
+ if (idx !== -1) {
+ store.state.list.splice(idx, 1)
+ // if (index === showList.value.length - 1) {
+ // selectId.value = showList.value[index - 2]?.id || ''
+ // } else {
+ // selectId.value = showList.value[index + 1]?.id || ''
+ // }
+ // selectId.value = showList.value[index - 1 > 0 ? index - 1 : (showList.value.length - 1)]?.id || ''
+ }
+
+ }}
+ src='/tab/icons/notepad/delete.png' alt='delete' class={"hidden group-hover:block w-[22px] opacity-70"}>
+
+
+
+
+
+ 
+
+
+
+ {
+ if (store.state.list[currentIndex.value]) {
+ store.state.list[currentIndex.value].title = e.target.value
+ }
+ }}
+ type="text" class={"w-full border-b-[1px] pb-[3px] border-b-[#bdab9b] outline-none "}
+ value={store.state.list[currentIndex.value]?.title || ''} />
+
+
+
+
+ {
+ trriger.value &&
+
+ {
+ if (store.state.list[currentIndex.value]) {
+ store.state.list[currentIndex.value].content = e
+ }
+ }}>
+
+ }
+
+
+
+
+
+
+
+
+ )
+})
diff --git a/src/widgets/notepad/editor.tsx b/src/widgets/notepad/editor.tsx
new file mode 100644
index 0000000..a54869a
--- /dev/null
+++ b/src/widgets/notepad/editor.tsx
@@ -0,0 +1,72 @@
+import { Milkdown, useEditor } from '@milkdown/vue';
+import { defaultValueCtx, Editor, rootCtx } from '@milkdown/kit/core';
+import { nord } from '@milkdown/theme-nord'
+import { commonmark } from '@milkdown/kit/preset/commonmark'
+import { gfm } from '@milkdown/kit/preset/gfm';
+import { defineComponent, watch} from 'vue';
+import { menu, menuConfigCtx, type MenuConfigItem } from '@milkdown-lab/plugin-menu'
+import { listener, listenerCtx } from '@milkdown/kit/plugin/listener';
+
+
+const menuItems: MenuConfigItem[][] = [
+ [
+ {
+ type: 'button',
+ content: 'B',
+ // commandKey
+ key: 'ToggleStrong',
+ },
+ {
+ type: 'button',
+ content: 'I',
+ key: 'ToggleEmphasis',
+ },
+ {
+ type: 'button',
+ content: 'S',
+ key: 'ToggleStrikeThrough',
+ },
+ ],
+]
+export default defineComponent({
+ props: {
+ modelValue: {
+ type: String,
+ default: '',
+ }
+ },
+ emits: ['update:modelValue'],
+ setup: (props, ct) => {
+
+ useEditor((root) => {
+ return Editor.make()
+ .config(nord)
+ .config((ctx) => {
+ const listener = ctx.get(listenerCtx);
+ ctx.set(menuConfigCtx.key, {
+ attributes: { class: 'milkdown-menu', 'data-menu': 'true' },
+ items: menuItems,
+ })
+ ctx.set(rootCtx, document.querySelector('#app'))
+ listener.markdownUpdated((ctx, markdown, prevMarkdown) => {
+ if (markdown !== prevMarkdown) {
+ ct.emit('update:modelValue', markdown)
+ }
+ })
+ ctx.set(rootCtx, root)
+ ctx.set(defaultValueCtx, props.modelValue || ' ')
+ })
+ .use(listener)
+ .use(commonmark)
+ .use(gfm)
+ .use(menu)
+
+
+ })
+ return () => (
+
+
+
+
+ 记事本
+
+
+ 立即创建
+
+
+ 》
+
+
-
+
${timeInMinutes} 分钟`; + }, + }, + xAxis: { + type: 'category', + data: Array.from({ length: 7 }).map((_, idx) => (dayjs().subtract(idx, 'day').format('MM月DD日'))).reverse(), + }, + yAxis: { + type: 'value', + }, + series: [ + { + type: 'line', + data: Array.from({ length: 7 }).map((_, idx) => (dayjs().subtract(idx, 'day').format('MM月DD日'))) + .reverse() + .map(item => store.state.timeList.reduce((pre, cur) => { + if (dayjs(cur).isSame(dayjs(item, "MM月DD日"), 'day')) { + return pre + 1 + } + return 0 + }, 0) * 15), + lineStyle: { + color: '#C876FB', // 线条的颜色 + width: 2, // 线条宽度 + }, + itemStyle: { + color: '#FF8688', // 数据点的颜色 + }, + showSymbol: false, // 默认不显示数据点 + // hover 时显示数据点 + emphasis: { + itemStyle: { + color: '#FF8688', // 悬停时数据点的颜色 + + }, + showSymbol: true, // 悬停时显示数据点 + }, + }, + ], + }; + + myChart.setOption(option); + + }; + + onMounted(() => { + initChart(); + window.addEventListener('resize', myChart?.resize as any); + setTimeout(() => { + + }, 1000) + gsap.to(precent1, { duration: 1, number: Number(100) || 0 }) + gsap.to(precent2, { duration: 1, number: Number(100) || 0 }) + + }); + + onBeforeUnmount(() => { + window.removeEventListener('resize', myChart?.resize as any); + myChart?.dispose(); + }); + + return () => ( +
停止计时
:
diff --git a/src/widgets/work/useTomatoStore.ts b/src/widgets/work/useTomatoStore.ts
index 95ad1ce..4441f4a 100644
--- a/src/widgets/work/useTomatoStore.ts
+++ b/src/widgets/work/useTomatoStore.ts
@@ -42,78 +42,97 @@ export const musicList = [
export default defineStore("work", () => {
const state = reactive({
list: [] as TomatoTarget[],
- timeList: [] as TomatoTime[],
+ timeList: [] as number[],
isPlaying: false as boolean,
selectMusic: 0,
isStart: false as boolean,
- beginTime: -1 as number
-
+ beginTime: -1 as number,
+ })
+ const audio = new Audio()
+ const time = useTimeStore()
+ const remainingTime = computed(() => {
+ if (!state.isStart) {
+ return 0
+ }
+ return dayjs(state.beginTime).add(1, 'minute').diff(dayjs(time.date), 'second')
})
- const time = useTimeStore()
- const beginTomatoTime = () => {
- state.beginTime = dayjs().valueOf()
- state.isStart = true
- playMusic()
- }
const stopTomatoTime = () => {
state.isStart = false
state.beginTime = -1
stopMusic()
- }
- const remainingTime = computed(() => {
- const totalTime = TOTAL_TIME
-
- return dayjs(state.beginTime).add(15, 'minute').diff(dayjs(time.date), 'second')
- })
- const playAudio = computed(() => {
- const audio = new Audio(musicList[state.selectMusic].music)
- return audio
- })
- watch(() => remainingTime, (val) => {
- if (val.value < 0) {
- state.isPlaying = false
- state.isStart = false
- state.beginTime = -1
- state.timeList.push({
- date: dayjs().valueOf(),
- finishTime: TOTAL_TIME
- })
+ if (remainingTime.value <= 0) {
+ state.timeList.push(
+ dayjs().valueOf()
+ )
}
- })
- // watch(() => state.isPlaying, (val) => {
- // if (val) {
- // playAudio.value.play()
- // } else {
- // playAudio.value.pause()
-
- // }
- // })
- const playMusic = () => {
- state.isPlaying = true
- playAudio.value.play()
}
-
- const pauseMusic = () => {
- state.isPlaying = false
- playAudio.value.pause()
+ const togglePlay = () => {
+ if (state.isPlaying) {
+ audio.pause()
+ } else {
+ audio.play()
+ }
+ state.isPlaying = !state.isPlaying
+ }
+ const setTrack = (trackIndex: number) => {
+ state.selectMusic = trackIndex
+ audio.src = musicList[trackIndex].music
+ audio.loop = true
+ audio.load()
+ if (state.isPlaying) {
+ audio.play()
+ }
}
const stopMusic = () => {
+ audio.pause()
+ audio.currentTime = 0
state.isPlaying = false
- playAudio.value.pause()
- playAudio.value.currentTime = 0
}
+ const beginTomatoTime = () => {
+ state.beginTime = dayjs().valueOf()
+ state.isStart = true
+ setTrack(state.selectMusic)
+ togglePlay()
+
+ }
+ watch(remainingTime, (val) => {
+ if (val <= 0) {
+ stopTomatoTime()
+
+ }
+ })
const openShowModel = ref()
const openFullscreen = ref(false)
+ const todayHour = computed(() => {
+ return state.timeList.filter(val => dayjs(val).isSame(dayjs(), 'day')).length
+ })
+ const yestodayHour = computed(() => {
+ return state.timeList.filter(val => dayjs(val).isSame(dayjs().subtract(1, 'day'), 'day')).length
+ })
+ const todayFinishTarget = computed(() => {
+ return state.list.filter(val => dayjs(val.finishTime).isSame(dayjs(), 'day') && val.isCompleted).length
+ })
+ const yesFinishTarget = computed(() => {
+ return state.list.filter(val => dayjs(val.finishTime).isSame(dayjs().subtract(1, 'day'), 'day') && val.isCompleted).length
+
+ })
+
return {
state,
openShowModel,
openFullscreen,
beginTomatoTime,
remainingTime,
- playMusic,
- pauseMusic,
+ togglePlay,
stopMusic,
- stopTomatoTime
+ stopTomatoTime,
+ todayHour,
+ yestodayHour,
+ todayFinishTarget,
+ yesFinishTarget,
+ setTrack
}
-})
\ No newline at end of file
+}, {
+ persist: true
+})
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 0000000..4e753be
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,12 @@
+/* eslint-disable no-undef */
+/* Copyright 2021, Milkdown by Mirone. */
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+ darkMode: 'class',
+ theme: {
+ extend: {}
+ },
+
+ plugins: [require('@tailwindcss/typography')]
+}
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index da89b54..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
- content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
- darkMode: 'selector',
- theme: {
- fontFamily: {
- 'din': 'DIN-Black'
- }
- }
-}
diff --git a/vite.config.ts b/vite.config.ts
index 45b5c4d..01946b1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -31,7 +31,7 @@ export default defineConfig({
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
- '~': fileURLToPath(new URL('./', import.meta.url))
+ '~': fileURLToPath(new URL('./public', import.meta.url))
}
},
build: {
+
+
)
})
diff --git a/src/widgets/work/Modal.tsx b/src/widgets/work/Modal.tsx
index 421a779..af1732a 100644
--- a/src/widgets/work/Modal.tsx
+++ b/src/widgets/work/Modal.tsx
@@ -1,11 +1,11 @@
import clsx from 'clsx'
import { defineComponent, ref } from 'vue'
-import PlusIcon from '~/public/icons/work/tomato_work_add_icon.png'
-import DataImg from '~/public/icons/work/dataImg.png'
-import DateImg from '~/public/icons/work/dateImg.png'
-import ListImg from '~/public/icons/work/listImg.png'
-import AddImg from '~/public/icons/work/addTarget.png'
-import DownImg from "~/public/icons/work/selectDown1.0.3.png"
+import PlusIcon from '~/icons/work/tomato_work_add_icon.png'
+import DataImg from '~/icons/work/dataImg.png'
+import DateImg from '~/icons/work/dateImg.png'
+import ListImg from '~/icons/work/listImg.png'
+import AddImg from '~/icons/work/addTarget.png'
+import DownImg from "~/icons/work/selectDown1.0.3.png"
import { v4 as uuid } from "uuid"
import List from './modal_view/list'
import { DatePicker, Modal, TimePicker } from 'ant-design-vue'
@@ -13,6 +13,7 @@ import type { TomatoTarget } from './useTomatoStore'
import dayjs from 'dayjs'
import useTomatoStore from './useTomatoStore'
import Calendar from './modal_view/calendar'
+import DataDetail from './modal_view/DataDetail'
const workTab = [
{
title: '目标列表',
@@ -235,7 +236,7 @@ export default defineComponent(() => {
) : select.value === 1 ? (
+
+ 无目标
+
+ {
+ store.state.beginTime < 0 ? '15:00' : formatSeconds(store.remainingTime)
+ }
+
+ 你今日已完成
+
+
+
+ {store.state.timeList.filter(val => dayjs(val).isSame(dayjs(), 'day')).length}
+
+ 个番茄时
+
+
+
+
+
+
+
+
+
+
+ {
+ e.stopPropagation()
+ store.openFullscreen = true
+ }}
+ class={"w-[42px] h-[42px] bg-white/40 backdrop-blur-md flex items-center justify-center rounded-xl"}>
+
+
+ {
+ e.stopPropagation()
+ if (store.state.isStart) {
+ store.stopTomatoTime()
+ } else {
+ store.beginTomatoTime()
+ store.openFullscreen = true
+
+ }
+ }}>
+ {
+ store.state.isStart ?
+
+ :
+
+
+ }
+
+ {
+ setTimeout(() => {
+ store.openShowModel = null
+
+ }, 300)
+ }}>
+ 
+
+ 数据详情
+
-
+ 
+
)
})
diff --git a/src/widgets/work/index.ts b/src/widgets/work/index.ts
index 9be53cf..f3394fa 100644
--- a/src/widgets/work/index.ts
+++ b/src/widgets/work/index.ts
@@ -2,23 +2,24 @@ import asyncLoader from '@/utils/asyncLoader'
import type { Widget } from '..'
export default {
- name: 'work',
+ name: 'tomato_work',
label: '番茄工作法',
description: '番茄记事法',
icon: '/tab/icons/work/tomato_work_icon.png',
modal: asyncLoader(() => import('./Modal')),
list: [
+ {
+ w: 4,
+ h: 2,
+ label: '大',
+ component: asyncLoader(() => import('./Large'))
+ },
{
w: 2,
h: 1,
label: '小',
component: asyncLoader(() => import('./Small'))
},
- {
- w: 4,
- h: 2,
- label: '大',
- component: asyncLoader(() => import('./Large'))
- }
+
]
} as Widget
diff --git a/src/widgets/work/modal_view/DataDetail.tsx b/src/widgets/work/modal_view/DataDetail.tsx
new file mode 100644
index 0000000..e4f7ff7
--- /dev/null
+++ b/src/widgets/work/modal_view/DataDetail.tsx
@@ -0,0 +1,202 @@
+import { computed, defineComponent, onBeforeUnmount, onMounted, reactive, ref } from "vue";
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from 'echarts/core';
+import { LineChart, PieChart, } from 'echarts/charts';
+// 引入柱状图图表，图表后缀都为 Chart
+import { BarChart } from 'echarts/charts';
+// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+import {
+ TitleComponent,
+ TooltipComponent,
+ GridComponent,
+ DatasetComponent,
+ TransformComponent
+} from 'echarts/components';
+// 标签自动布局、全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer } from 'echarts/renderers';
+import useTomatoStore from "../useTomatoStore";
+import dayjs from "dayjs";
+import gsap from 'gsap'
+import { Progress } from "ant-design-vue";
+
+// 注册必须的组件
+echarts.use([
+ PieChart,
+ TitleComponent,
+ LineChart,
+ TooltipComponent,
+ GridComponent,
+ DatasetComponent,
+ TransformComponent,
+ BarChart,
+ LabelLayout,
+ UniversalTransition,
+ CanvasRenderer
+]);
+
+// 接下来的使用就跟之前一样，初始化图表，设置配置项
+
+export default defineComponent(() => {
+ const chart = ref(null);
+ const leftChat = ref(null)
+ const store = useTomatoStore()
+ const precent1 = reactive({
+ number: 0
+ })
+ const precent2 = reactive({
+ number: 0
+ })
+ let myChart: echarts.ECharts | null = null;
+
+ const initChart = () => {
+ myChart = echarts.init(chart.value);
+ const option = {
+
+ tooltip: {
+ trigger: 'axis',
+ formatter: (params: any) => {
+ const dataPoint = params[0];
+ const timeInMinutes = dataPoint.value;
+ // 使用 HTML 标签格式化 tooltip 内容
+ return `${dataPoint.name}
+
+
+ 番茄时
+
+
+ 立即使用
+
+
+ 
+
+
+ ${timeInMinutes} 分钟`; + }, + }, + xAxis: { + type: 'category', + data: Array.from({ length: 7 }).map((_, idx) => (dayjs().subtract(idx, 'day').format('MM月DD日'))).reverse(), + }, + yAxis: { + type: 'value', + }, + series: [ + { + type: 'line', + data: Array.from({ length: 7 }).map((_, idx) => (dayjs().subtract(idx, 'day').format('MM月DD日'))) + .reverse() + .map(item => store.state.timeList.reduce((pre, cur) => { + if (dayjs(cur).isSame(dayjs(item, "MM月DD日"), 'day')) { + return pre + 1 + } + return 0 + }, 0) * 15), + lineStyle: { + color: '#C876FB', // 线条的颜色 + width: 2, // 线条宽度 + }, + itemStyle: { + color: '#FF8688', // 数据点的颜色 + }, + showSymbol: false, // 默认不显示数据点 + // hover 时显示数据点 + emphasis: { + itemStyle: { + color: '#FF8688', // 悬停时数据点的颜色 + + }, + showSymbol: true, // 悬停时显示数据点 + }, + }, + ], + }; + + myChart.setOption(option); + + }; + + onMounted(() => { + initChart(); + window.addEventListener('resize', myChart?.resize as any); + setTimeout(() => { + + }, 1000) + gsap.to(precent1, { duration: 1, number: Number(100) || 0 }) + gsap.to(precent2, { duration: 1, number: Number(100) || 0 }) + + }); + + onBeforeUnmount(() => { + window.removeEventListener('resize', myChart?.resize as any); + myChart?.dispose(); + }); + + return () => ( +
+
+ )
+})
\ No newline at end of file
diff --git a/src/widgets/work/modal_view/calendar.tsx b/src/widgets/work/modal_view/calendar.tsx
index 490689b..6d46ff9 100644
--- a/src/widgets/work/modal_view/calendar.tsx
+++ b/src/widgets/work/modal_view/calendar.tsx
@@ -1,6 +1,6 @@
import { useCalendarStore } from "@/widgets/calendar/useCalendarStore";
import { DatePicker } from "ant-design-vue";
-import DownImg from "~/public/icons/work/selectDown1.0.3.png"
+import DownImg from "~/icons/work/selectDown1.0.3.png"
import clsx from "clsx";
import dayjs from "dayjs";
import { defineComponent, ref } from "vue";
diff --git a/src/widgets/work/modal_view/data.tsx b/src/widgets/work/modal_view/data.tsx
deleted file mode 100644
index 9a88bab..0000000
--- a/src/widgets/work/modal_view/data.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { defineComponent } from "vue";
-
-export default defineComponent(() => {
- return () => (
-
+
+
+
+
+
+
+
+
+ 相比昨天
+ {(store.todayHour - store.yestodayHour) >= 0 ? "+" : ''}{(store.todayHour - store.yestodayHour) * 100}%
+
+
+ 今日专注时长
+ {(store.todayHour * 0.15).toFixed(2)}
+ h
+
+
+
+
+
+
+
+
+
+ 相比昨天
+ {(store.todayFinishTarget - store.yesFinishTarget) >= 0 ? "+" : ''}{(store.todayFinishTarget - store.yesFinishTarget) * 100}%
+
+
+ 今日完成目标数
+ {store.todayFinishTarget}
+ 个
+
+
+
+ 专注时长历史趋势
+
+
+
+
+
+ 您的趋势向上，为了美好的明天，继续努力吧！
+
-
-
- )
-})
\ No newline at end of file
diff --git a/src/widgets/work/modal_view/list.tsx b/src/widgets/work/modal_view/list.tsx
index 5462391..fd3ff17 100644
--- a/src/widgets/work/modal_view/list.tsx
+++ b/src/widgets/work/modal_view/list.tsx
@@ -1,10 +1,10 @@
import { computed, defineComponent, ref } from 'vue'
import useTomatoStore from '../useTomatoStore'
-import NoDataImg from "~/public/icons/work/noData.png"
-import StopImg from "~/public/icons/work/tomotoIconEnd.png"
+import NoDataImg from "~/icons/work/noData.png"
+import StopImg from "~/icons/work/tomotoIconEnd.png"
import clsx from 'clsx'
import dayjs from 'dayjs'
-import PlayImg from "~/public/icons/work/work_page-play.png"
+import PlayImg from "~/icons/work/work_page-play.png"
export default defineComponent(() => {
const store = useTomatoStore()
const searchText = ref('')
@@ -86,7 +86,9 @@ export default defineComponent(() => {
- 你今日已完成 {store.state.list.filter(val => dayjs(val.finishTime).isSame(dayjs(), 'day') && val.isCompleted).length}个番茄时
+ 你今日已完成
+ {store.state.timeList.filter(val => dayjs(val).isSame(dayjs(), 'day')).length}
+ 个番茄时
不积跬步无以至千里、千里之行始于足下。
{
@@ -99,7 +101,6 @@ export default defineComponent(() => {
store.stopTomatoTime()
}}
>
-