diff --git a/package.json b/package.json index cbe5b3c..2d75726 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "oh-vue-icons": "^1.0.0-rc3", "pinia": "^2.1.7", "pinia-plugin-persistedstate": "^3.2.3", + "sortablejs": "^1.15.3", "ua-parser-js": "^1.0.38", "uuid": "^10.0.0", "v-viewer": "^3.0.13", @@ -34,6 +35,7 @@ "@tsconfig/node20": "^20.1.4", "@types/ali-oss": "^6.16.11", "@types/node": "^20.14.5", + "@types/sortablejs": "^1.15.8", "@types/ua-parser-js": "^0.7.39", "@types/uuid": "^10.0.0", "@vitejs/plugin-vue": "^5.0.5", diff --git a/src/App.vue b/src/App.vue index bab5a9e..e77fa30 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,11 +8,15 @@ import SettingsOverlay from './settings/SettingsOverlay' import Sider from './layout/sider' import LoginModal from './user/LoginModal' import { computed } from 'vue' +import asyncLoader from './utils/asyncLoader' +import useLayoutStore from './layout/useLayoutStore' +const Grid = asyncLoader(() => import('./layout/grid')) const settings = useSettingsStore() const blockSize = computed(() => settings.state.blockSize + 'rem') const blockPadding = computed(() => settings.state.blockPadding + 'rem') const mainWidth = computed(() => settings.state.mainWidth + '%') -const blockRadius = computed(() => settings.state.blockRadius + 'rem') +const blockRadius = computed(() => settings.state.blockRadius) +const layout = useLayoutStore() diff --git a/src/GlobalModal.tsx b/src/GlobalModal.tsx index cde59aa..f510692 100644 --- a/src/GlobalModal.tsx +++ b/src/GlobalModal.tsx @@ -6,7 +6,7 @@ import asyncLoader from './utils/asyncLoader' addIcons(MdClose, MdOpeninfull, MdClosefullscreen) const SearchPage = asyncLoader(() => import('@/layout/header/search/SearchPage')) -const noFullList: RouteStr[] = ['global-search'] +const noFullList: RouteStr[] = ['global-search', 'global-adder'] export default defineComponent(() => { const router = useRouterStore() @@ -21,7 +21,7 @@ export default defineComponent(() => { full.value = false }) return () => ( -
+
{/* 背景遮罩 */} {show.value && ( diff --git a/src/layout/grid/index.tsx b/src/layout/grid/index.tsx new file mode 100644 index 0000000..c9b55c0 --- /dev/null +++ b/src/layout/grid/index.tsx @@ -0,0 +1,81 @@ +import { defineComponent, onMounted } from 'vue' +import useLayoutStore from '../useLayoutStore' +import { OhVueIcon, addIcons } from 'oh-vue-icons' +import { MdAdd } from 'oh-vue-icons/icons' +import useRouterStore from '@/useRouterStore' +import Sortable from 'sortablejs' + +addIcons(MdAdd) + +export default defineComponent(() => { + const layout = useLayoutStore() + const router = useRouterStore() + let container: HTMLDivElement | null = null + onMounted(() => { + if (!container) return + new Sortable(container, { + animation: 400, + scroll: true, + scrollSensitivity: 200, + scrollSpeed: 10, + invertSwap: true, + invertedSwapThreshold: 1, + filter: '.operation-button', + ghostClass: 'opacity-20', + dragClass: 'dragging-block', + onStart: (e) => { + // layout.moving.id = e.item.id + // layout.moving.type = e.item.dataset?.type || '' + }, + onMove: (e) => { + if (e.related.className.includes('operation-button') && e.willInsertAfter) return false + }, + onEnd: (e) => { + // const oldPath = e.from.dataset.path + // const newPath = e.to.dataset.path + // if (e.oldIndex === undefined || e.newIndex === undefined || !oldPath || !newPath) return + // const oldIndex = e.oldIndex + // const newIndex = e.newIndex + // const oldList = useSortList(oldPath as any) + // const newList = useSortList(newPath as any) + // const item = oldList[oldIndex] + // if (!item || !isReactive(oldList) || !isReactive(newList)) return + // oldList.splice(oldIndex, 1) + // newList.splice(newIndex, 0, item) + // layout.moving.id = '' + // layout.moving.type = '' + } + }) + }) + return () => ( +
{ + const h = (e.target as any).scrollTop + if (h > 60) { + // 需要移动搜索框和时间 + layout.isCompact = true + } else { + layout.isCompact = false + } + }} + > +
(container = el as any)} + > +
+
{ + router.path = 'global-adder' + }} + > + +
+
+
+
+ ) +}) diff --git a/src/layout/header/GlobalTime.tsx b/src/layout/header/GlobalTime.tsx index a24b96b..884c8ad 100644 --- a/src/layout/header/GlobalTime.tsx +++ b/src/layout/header/GlobalTime.tsx @@ -2,6 +2,7 @@ import useSettingsStore from '@/settings/useSettingsStore' import useTimeStore from '@/utils/useTimeStore' import { Lunar } from 'lunar-typescript' import { computed, defineComponent, Transition } from 'vue' +import useLayoutStore from '../useLayoutStore' export default defineComponent({ setup() { @@ -28,21 +29,39 @@ export default defineComponent({ dayWeek } }) - const settings = useSettingsStore() + const layout = useLayoutStore() return () => ( -
+
{settings.state.showDate && ( -
{text.value.timeStr}
+
+ {text.value.timeStr} +
)} {settings.state.showTime && ( -
+
{text.value.dateStr}
-
星期{info.value.dayWeek}
-
{info.value.day}
+ {!layout.isCompact &&
星期{info.value.dayWeek}
} + {!layout.isCompact &&
{info.value.day}
}
)} diff --git a/src/layout/header/index.tsx b/src/layout/header/index.tsx index 51dbded..2af68ff 100644 --- a/src/layout/header/index.tsx +++ b/src/layout/header/index.tsx @@ -9,25 +9,8 @@ export default defineComponent({ setup() { return () => ( <> -
- -
- -
- -
+ + ) } diff --git a/src/layout/header/search/index.tsx b/src/layout/header/search/index.tsx index b7c3431..588b940 100644 --- a/src/layout/header/search/index.tsx +++ b/src/layout/header/search/index.tsx @@ -5,15 +5,18 @@ import useSearchConfigStore from './useSearchConfigStore' import SearchConfig from './SearchConfig' import SearchHistory from './SearchHistory' import SearchSuggestion from './SearchSuggestion' +import useLayoutStore from '@/layout/useLayoutStore' export default defineComponent(() => { const settings = useSettingsStore() const search = useSearchStore() const searchConfig = useSearchConfigStore() + const layout = useLayoutStore() return () => (
diff --git a/src/layout/layout.types.ts b/src/layout/layout.types.ts index c14f24b..abfae6b 100644 --- a/src/layout/layout.types.ts +++ b/src/layout/layout.types.ts @@ -42,5 +42,4 @@ export interface Layout { Block | null ] simple: boolean - loading: boolean } diff --git a/src/layout/sider/index.tsx b/src/layout/sider/index.tsx index bcf3c8b..22bfed6 100644 --- a/src/layout/sider/index.tsx +++ b/src/layout/sider/index.tsx @@ -5,6 +5,7 @@ import { OhVueIcon, addIcons } from 'oh-vue-icons' import { PxHeadset, PxAddBox, PxCheck } from 'oh-vue-icons/icons' import useRouterStore from '@/useRouterStore' import useLayoutStore from '../useLayoutStore' +import useUserStore from '@/user/useUserStore' initIcons() addIcons(PxHeadset, PxAddBox, PxCheck) @@ -57,6 +58,7 @@ export default defineComponent(() => { const selected = ref(icons[0]) const router = useRouterStore() const layout = useLayoutStore() + const user = useUserStore() const label = ref('') watch( selected, @@ -66,106 +68,114 @@ export default defineComponent(() => { { immediate: true } ) return () => ( -
-
- -
-