diff --git a/components.d.ts b/components.d.ts index a08d651c..8712d3b6 100644 --- a/components.d.ts +++ b/components.d.ts @@ -11,12 +11,15 @@ declare module 'vue' { ArticleContentDialog: typeof import('./src/components/dialog/ArticleContentDialog.vue')['default'] ArticleList: typeof import('./src/components/list/ArticleList.vue')['default'] Backgorund: typeof import('./src/components/Backgorund.vue')['default'] + BackIcon: typeof import('./src/components/icon/BackIcon.vue')['default'] BaseButton: typeof import('./src/components/BaseButton.vue')['default'] BaseIcon: typeof import('./src/components/BaseIcon.vue')['default'] BaseList: typeof import('./src/components/list/BaseList.vue')['default'] ChapterName: typeof import('./src/components/toolbar/ChapterName.vue')['default'] Close: typeof import('./src/components/icon/Close.vue')['default'] CollectNotice: typeof import('./src/components/CollectNotice.vue')['default'] + Delete: typeof import('./src/components/icon/Delete.vue')['default'] + DeleteIcon: typeof import('./src/components/icon/DeleteIcon.vue')['default'] Dialog: typeof import('./src/components/dialog/Dialog.vue')['default'] DictDiglog: typeof import('./src/components/dialog/DictDiglog.vue')['default'] DictGroup: typeof import('./src/components/list/DictGroup.vue')['default'] diff --git a/package.json b/package.json index e3ca2398..9ca9f50f 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "pinia": "^2.1.6", "sentence-splitter": "^4.2.1", "tesseract.js": "^4.1.1", + "vant": "^4.8.1", "vue": "^3.3.4", "vue-activity-calendar": "^1.2.2", "vue-i18n": "9", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d46cd768..8da51e0c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -56,6 +56,9 @@ dependencies: tesseract.js: specifier: ^4.1.1 version: 4.1.2 + vant: + specifier: ^4.8.1 + version: 4.8.1(vue@3.3.4) vue: specifier: ^3.3.4 version: 3.3.4 @@ -941,6 +944,18 @@ packages: resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==} dev: false + /@vant/popperjs@1.3.0: + resolution: {integrity: sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==} + dev: false + + /@vant/use@1.6.0(vue@3.3.4): + resolution: {integrity: sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==} + peerDependencies: + vue: ^3.0.0 + dependencies: + vue: 3.3.4 + dev: false + /@vitejs/plugin-vue-jsx@3.0.2(vite@4.4.9)(vue@3.3.4): resolution: {integrity: sha512-obF26P2Z4Ogy3cPp07B4VaW6rpiu0ue4OT2Y15UxT5BZZ76haUY9guOsZV3uWh/I6xc+VeiW+ZVabRE82FyzWw==} engines: {node: ^14.18.0 || >=16.0.0} @@ -4976,6 +4991,17 @@ packages: engines: {node: '>= 0.10'} dev: true + /vant@4.8.1(vue@3.3.4): + resolution: {integrity: sha512-SkFZM3Z3Bwi5do+iQNfRgDi7b+Ka29rUUNzck06W2KoFie3CLTqSifLa5TuZCEoXPSkqR+fRH/VE5G57mmL8sg==} + peerDependencies: + vue: ^3.0.0 + dependencies: + '@vant/popperjs': 1.3.0 + '@vant/use': 1.6.0(vue@3.3.4) + '@vue/shared': 3.3.4 + vue: 3.3.4 + dev: false + /vinyl-fs@3.0.3: resolution: {integrity: sha512-vIu34EkyNyJxmP0jscNzWBSygh7VWhqun6RmqVfXePrOwi9lhvRs//dOaGOTRUQr4tx7/zd26Tk5WeSVZitgng==} engines: {node: '>= 0.10'} diff --git a/src/App.vue b/src/App.vue index b8f1cded..27185d22 100644 --- a/src/App.vue +++ b/src/App.vue @@ -14,7 +14,9 @@ import ArticleContentDialog from "@/components/dialog/ArticleContentDialog.vue"; import CollectNotice from "@/components/CollectNotice.vue"; import {SAVE_SETTING_KEY, SAVE_DICT_KEY} from "@/utils/const.ts"; import {isMobile, shakeCommonDict} from "@/utils"; -import router from "@/router.ts"; +import router, {routes} from "@/router.ts"; +import {$ref} from "vue/macros"; +import {useRoute} from "vue-router"; const store = useBaseStore() const runtimeStore = useRuntimeStore() @@ -77,18 +79,44 @@ onMounted(() => { // router.replace('/mobile') } }) +let transitionName = $ref('go') +const route = useRoute() +watch(() => route.path, (to, from) => { + // console.log('watch', to, from) + // //footer下面的5个按钮,对跳不要用动画 + let noAnimation = [ + '/pc/practice', + '/pc/dict', + '/mobile', + '/' + ] + if (noAnimation.indexOf(from) !== -1 && noAnimation.indexOf(to) !== -1) { + return transitionName = '' + } + + const toDepth = routes.findIndex(v => v.path === to) + const fromDepth = routes.findIndex(v => v.path === from) + transitionName = toDepth > fromDepth ? 'go' : 'back' + // console.log('transitionName', transitionName, toDepth, fromDepth) +}) \ No newline at end of file diff --git a/src/components/icon/DeleteIcon.vue b/src/components/icon/DeleteIcon.vue new file mode 100644 index 00000000..edf1622a --- /dev/null +++ b/src/components/icon/DeleteIcon.vue @@ -0,0 +1,12 @@ + + + + + \ No newline at end of file diff --git a/src/components/slide/SlideHorizontal.vue b/src/components/slide/SlideHorizontal.vue index a1b0aee8..1a6c4875 100644 --- a/src/components/slide/SlideHorizontal.vue +++ b/src/components/slide/SlideHorizontal.vue @@ -44,16 +44,16 @@ const state = reactive({ start: {x: 0, y: 0, time: 0}, move: {x: 0, y: 0}, wrapper: {width: 0, height: 0, childrenLength: 0}, - slideItemsWidths:[] + slideItemsWidths: [] }) -watch( - () => props.index, - (newVal) => { +watch(() => props.index, (newVal) => { if (state.localIndex !== newVal) { state.localIndex = newVal if (props.changeActiveIndexUseAnim) { GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`) + } else { + GM.$setCss(wrapperEl.value, 'transition-duration', `0ms`) } GM.$setCss(wrapperEl.value, 'transform', `translate3d(${getSlideDistance(state, SlideType.HORIZONTAL)}px, 0, 0)`) } @@ -84,9 +84,9 @@ function touchEnd(e) { function canNext(isNext) { - if (isNext){ + if (isNext) { return state.localIndex !== state.wrapper.childrenLength - 1 - }else { + } else { return state.localIndex !== 0 } } diff --git a/src/components/slide/common.js b/src/components/slide/common.js index 8d3d0427..38420856 100644 --- a/src/components/slide/common.js +++ b/src/components/slide/common.js @@ -18,7 +18,7 @@ export function slideInit(el, state, type) { if (type === SlideType.HORIZONTAL) dx1 = t else dx2 = t - console.log('start', dx1) + // console.log('start', dx1) Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`) } diff --git a/src/pages/mobile/DictDetail.vue b/src/pages/mobile/DictDetail.vue new file mode 100644 index 00000000..0d5a7e70 --- /dev/null +++ b/src/pages/mobile/DictDetail.vue @@ -0,0 +1,178 @@ + + + + + \ No newline at end of file diff --git a/src/pages/mobile/DictManage.vue b/src/pages/mobile/DictListManage.vue similarity index 95% rename from src/pages/mobile/DictManage.vue rename to src/pages/mobile/DictListManage.vue index e304d058..0bdec0a3 100644 --- a/src/pages/mobile/DictManage.vue +++ b/src/pages/mobile/DictListManage.vue @@ -9,8 +9,9 @@ import {dictionaryResources} from "@/assets/dictionary.ts"; import {DictResource, languageCategoryOptions} from "@/types.ts"; import {onMounted} from "vue"; import DictGroup from "@/components/list/DictGroup.vue"; +import router from "@/router.ts"; -let index = $ref(0) +let index = $ref(1) const store = useBaseStore() @@ -100,6 +101,11 @@ onMounted(() => { let temp1 = getData('word') wordData = temp1 }) + +function selectDict(val) { + console.log('val', val) + router.push('/mobile/set-dict-plan') +}