save
This commit is contained in:
expdsn
parent
3c2b441832
commit
528cd07ee8
17
src/App.vue
17
src/App.vue
|
|
@ -34,13 +34,24 @@ const layout = useLayoutStore()
|
|||
<SettingsOverlay />
|
||||
<SettingsButton />
|
||||
|
||||
<Sider v-if="!layout.state.simple" />
|
||||
<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" />
|
||||
<div class="fixed z-40 right-[14%] top-8" v-if="!layout.state.simple">
|
||||
<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 />
|
||||
|
|
|
|||
|
|
@ -24,9 +24,10 @@ export default defineComponent(() => {
|
|||
watch(router, () => {
|
||||
full.value = false
|
||||
})
|
||||
|
||||
return () => (
|
||||
<div
|
||||
class="fixed left-0 top-0 z-50 w-full"
|
||||
class="fixed left-0 top-0 z-50 w-full"
|
||||
onContextmenu={(e) => e.stopPropagation()}
|
||||
onKeydown={(e) => e.stopPropagation()}
|
||||
>
|
||||
|
|
@ -42,10 +43,10 @@ export default defineComponent(() => {
|
|||
)}
|
||||
</Transition>
|
||||
{/* 弹框主体 */}
|
||||
<Transition name="modal">
|
||||
<Transition >
|
||||
{show.value && (
|
||||
<div
|
||||
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden transition-all"
|
||||
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden "
|
||||
style={{
|
||||
width: full.value ? '100%' : '984px',
|
||||
height: full.value ? '100vh' : '580px',
|
||||
|
|
|
|||
|
|
@ -44,40 +44,73 @@ export default defineComponent({
|
|||
color: 'white',
|
||||
transitionDuration: '.4s',
|
||||
left: layout.isCompact ? '20px' : '50%',
|
||||
top: layout.isCompact ? '20px' : layout.state.simple?'100px':'50px',
|
||||
top: layout.isCompact ? '20px' : layout.state.simple ? '100px' : '50px',
|
||||
transform: layout.isCompact ? '' : 'translate(-50%,0)'
|
||||
}}
|
||||
>
|
||||
<Transition>
|
||||
{settings.state.showTime && (
|
||||
<div
|
||||
class={
|
||||
'transition-all ' +
|
||||
(layout.isCompact ? 'text-[1.4rem] leading-[1.4rem]' : 'text-[8vh] leading-[4rem]')
|
||||
}
|
||||
>
|
||||
{text.value.timeStr}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{
|
||||
layout.state.simple ?
|
||||
settings.state.simpleModeShowString.includes('showTime') &&
|
||||
<div
|
||||
class={
|
||||
'transition-all ' +
|
||||
(layout.isCompact ? 'text-[1.4rem] leading-[1.4rem]' : 'text-[8vh] leading-[4rem]')
|
||||
}
|
||||
>
|
||||
{text.value.timeStr}
|
||||
</div>
|
||||
:
|
||||
settings.state!.showTime &&
|
||||
<div
|
||||
class={
|
||||
'transition-all ' +
|
||||
(layout.isCompact ? 'text-[1.4rem] leading-[1.4rem]' : 'text-[8vh] leading-[4rem]')
|
||||
}
|
||||
>
|
||||
{text.value.timeStr}
|
||||
</div>
|
||||
}
|
||||
</Transition>
|
||||
<Transition>
|
||||
{settings.state.showTime && (
|
||||
<div
|
||||
class={'flex items-center gap-4 mt-4 ' + (layout.isCompact ? '' : 'justify-center')}
|
||||
>
|
||||
{settings.state.timeOptions.includes('date') && <div>{text.value.dateStr}</div>}
|
||||
<Transition>
|
||||
{!layout.isCompact && settings.state.timeOptions.includes('week') && (
|
||||
<div>星期{info.value.dayWeek}</div>
|
||||
)}
|
||||
</Transition>
|
||||
<Transition>
|
||||
{!layout.isCompact && settings.state.timeOptions.includes('lunal') && (
|
||||
<div>{info.value.day}</div>
|
||||
)}
|
||||
</Transition>
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
layout.state.simple ?
|
||||
settings.state.simpleModeShowString.includes('showDate') &&
|
||||
<div
|
||||
class={'flex items-center gap-4 mt-4 ' + (layout.isCompact ? '' : 'justify-center')}
|
||||
>
|
||||
{settings.state.timeOptions.includes('date') && <div>{text.value.dateStr}</div>}
|
||||
<Transition>
|
||||
{!layout.isCompact && settings.state.timeOptions.includes('week') && (
|
||||
<div>星期{info.value.dayWeek}</div>
|
||||
)}
|
||||
</Transition>
|
||||
<Transition>
|
||||
{!layout.isCompact && settings.state.timeOptions.includes('lunal') && (
|
||||
<div>{info.value.day}</div>
|
||||
)}
|
||||
</Transition>
|
||||
</div>
|
||||
:
|
||||
settings.state!.showTime &&
|
||||
<div
|
||||
class={'flex items-center gap-4 mt-4 ' + (layout.isCompact ? '' : 'justify-center')}
|
||||
>
|
||||
{settings.state.timeOptions.includes('date') && <div>{text.value.dateStr}</div>}
|
||||
<Transition>
|
||||
{!layout.isCompact && settings.state.timeOptions.includes('week') && (
|
||||
<div>星期{info.value.dayWeek}</div>
|
||||
)}
|
||||
</Transition>
|
||||
<Transition>
|
||||
{!layout.isCompact && settings.state.timeOptions.includes('lunal') && (
|
||||
<div>{info.value.day}</div>
|
||||
)}
|
||||
</Transition>
|
||||
</div>
|
||||
}
|
||||
|
||||
</Transition>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,16 +1,50 @@
|
|||
import { addIcons, OhVueIcon } from "oh-vue-icons";
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { BiEyeFill } from "oh-vue-icons/icons";
|
||||
import { BiEyeSlashFill } from "oh-vue-icons/icons";
|
||||
import { BiEyeSlashFill, MdMorevert } from "oh-vue-icons/icons";
|
||||
import useLayoutStore from "../useLayoutStore";
|
||||
import clsx from "clsx";
|
||||
import useSettingsStore from "@/settings/useSettingsStore";
|
||||
addIcons(BiEyeFill, BiEyeSlashFill)
|
||||
import useSettingsStore, { SimpleShowStringType } from "@/settings/useSettingsStore";
|
||||
import { Dropdown, type MenuProps } from "ant-design-vue";
|
||||
addIcons(BiEyeFill, BiEyeSlashFill, MdMorevert)
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||
1st menu item
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||
2nd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: (
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||
3rd menu item (disabled)
|
||||
</a>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
danger: true,
|
||||
label: 'a danger item',
|
||||
},
|
||||
];
|
||||
export default defineComponent(() => {
|
||||
const layoutStore = useLayoutStore()
|
||||
const settingStore = useSettingsStore()
|
||||
const show = ref(false)
|
||||
|
||||
const showOptions = ref(false)
|
||||
return () => (
|
||||
<div class={"fixed w-[200px] h-[50px] text-white right-0 top-0 z-10 "}
|
||||
|
||||
|
|
@ -28,11 +62,53 @@ export default defineComponent(() => {
|
|||
: '-top-[30px]'
|
||||
: 'top-5'
|
||||
)}>
|
||||
<span class={"px-2 py-1 hover:bg-black/20 rounded cursor-pointer"}
|
||||
onClick={() => {
|
||||
layoutStore.state.simple = !layoutStore.state.simple
|
||||
}}
|
||||
>{layoutStore.state.simple ? '极简' : '常规'}</span>
|
||||
<div class={"hover:bg-black/30 p-1 rounded"}>
|
||||
<span class={"cursor-pointer relative"} onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
showOptions.value = !showOptions.value
|
||||
}}>
|
||||
{
|
||||
layoutStore.state.simple &&
|
||||
<OhVueIcon name={MdMorevert.name} fill="white" class={"opacity-60"}></OhVueIcon>
|
||||
|
||||
}
|
||||
{
|
||||
showOptions.value
|
||||
&&
|
||||
<div class={"z-[100] bg-white/50 backdrop-blur-md p-2 w-[140px] absolute flex flex-col right-5 top-0 rounded-lg gap-y-1"}
|
||||
|
||||
v-outside-click={() => {
|
||||
showOptions.value = false
|
||||
}}>
|
||||
{
|
||||
SimpleShowStringType.map(item => (
|
||||
<div class={clsx("flex items-center whitespace-nowrap py-1 rounded hover:text-[#333] justify-center",
|
||||
settingStore.state.simpleModeShowString.includes(item.value) ?
|
||||
"bg-black/20 text-[#333] " : "text-[#666]"
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
settingStore.state.simpleModeShowString.includes(item.value) ?
|
||||
settingStore.state.simpleModeShowString = settingStore.state.simpleModeShowString.filter(el => el !== item.value)
|
||||
:
|
||||
settingStore.state.simpleModeShowString.push(item.value)
|
||||
}}
|
||||
>
|
||||
<span class={""}>{item.label}</span>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
</span>
|
||||
<span class={"px-2 py-[7px] hover:bg-black/20 opacity-60 rounded cursor-pointer"}
|
||||
onClick={() => {
|
||||
layoutStore.state.simple = !layoutStore.state.simple
|
||||
}}
|
||||
>{layoutStore.state.simple ? '极简' : '常规'}</span>
|
||||
</div>
|
||||
|
||||
<div onClick={() => {
|
||||
settingStore.state.showTop = settingStore.state.showTop === 'auto' ? 'show' : 'auto'
|
||||
}}>
|
||||
|
|
|
|||
|
|
@ -163,19 +163,16 @@ body {
|
|||
.modal-enter-active,
|
||||
.modal-leave-active {
|
||||
transition:
|
||||
transform 0.3s ease-in-out,
|
||||
opacity 0.3s ease-in-out;
|
||||
transform 2s ease-in-out,
|
||||
opacity 2s ease-in-out;
|
||||
}
|
||||
|
||||
.modal-enter-from {
|
||||
transform: translate(-50%, -60%);
|
||||
opacity: 0;
|
||||
}
|
||||
.modal-leave-to {
|
||||
transform: translate(-50%, -40%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 设置框动画 */
|
||||
.settings-enter-active,
|
||||
.settings-leave-active {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,32 @@ import { computed, reactive } from 'vue'
|
|||
|
||||
export type VisibleState = 'show' | 'auto' | ''
|
||||
export type TimeUnit = 'date' | 'week' | '12hour' | 'lunal' | 'second'
|
||||
|
||||
|
||||
export const SimpleShowStringType = [{
|
||||
label: "侧边栏",
|
||||
value: 'showSider',
|
||||
},
|
||||
{
|
||||
label: "底部栏",
|
||||
value: 'showDock',
|
||||
|
||||
},
|
||||
{
|
||||
label: "时间",
|
||||
value: 'showTime',
|
||||
|
||||
}, {
|
||||
label: "日期",
|
||||
value: 'showDate',
|
||||
|
||||
}, {
|
||||
label: "AI助手",
|
||||
value: 'showPet',
|
||||
}
|
||||
]
|
||||
type SimpleValueType = typeof SimpleShowStringType[number]['value'];
|
||||
|
||||
export default defineStore(
|
||||
'settings',
|
||||
() => {
|
||||
|
|
@ -33,7 +59,9 @@ export default defineStore(
|
|||
// 侧边栏
|
||||
siderDirection: 'left' as 'left' | 'right',
|
||||
// 禁用快捷键
|
||||
disabledShortcut: false
|
||||
disabledShortcut: false,
|
||||
// 极简模式显式
|
||||
simpleModeShowString: ['showTime', 'showDate'] as SimpleValueType[]
|
||||
})
|
||||
return { state, blockInner: computed(() => state.blockSize - 2 * state.blockPadding) }
|
||||
},
|
||||
|
|
|
|||
|
|
@ -91,7 +91,6 @@ export default defineStore("work", () => {
|
|||
|
||||
}
|
||||
watch(remainingTime, (val) => {
|
||||
console.log(val);
|
||||
|
||||
if (val < 0) {
|
||||
stopTomatoTime()
|
||||
|
|
|
|||
Loading…
Reference in New Issue