修复拖动

sub-store-org · Jan 29, 2024 · 1e869ae · 1e869ae
1 parent f7b588c
commit 1e869ae
Show file tree

Hide file tree

Showing 4 changed files with 165 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.118",
+  "version": "2.14.121",
   "private": true,
   "scripts": {
     "dev": "vite --host",

diff --git a/src/views/File.vue b/src/views/File.vue
@@ -1,11 +1,10 @@
 <template>
   <div
-    style="overflow: hidden"
+    style="overflow: hidden; -webkit-user-select: none; user-select: none"
     @touchstart="onTouchStart"
     @touchmove="onTouchMove"
     @touchend="onTouchEnd"
   >
-
     <!-- 浮动按钮 -->
     <Teleport to="body">
       <div v-if="hasFiles" class="drag-btn-wrapper">
@@ -17,19 +16,37 @@
             bottom: bottomSafeArea + 48 + 12 + 8,
             right: 16,
           }"
-          :style="{ cursor: 'pointer', right: '16px', bottom: `${bottomSafeArea + 48 + 36 + (!isMobile() ? (isSimpleMode ? 44 : 48) : 0) }px` }"
+          :style="{
+            cursor: 'pointer',
+            right: '16px',
+            bottom: `${
+              bottomSafeArea +
+              48 +
+              36 +
+              (!isMobile() ? (isSimpleMode ? 44 : 48) : 0)
+            }px`,
+          }"
         >
           <!-- 刷新 -->
-          <div v-if="showFloatingRefreshButton" class="drag-btn refresh" @click="refresh">
+          <div
+            v-if="showFloatingRefreshButton"
+            class="drag-btn refresh"
+            @click="refresh"
+          >
             <font-awesome-icon icon="fa-solid fa-arrow-rotate-right" />
           </div>
 
           <!-- 加号 -->
-          <router-link to="/edit/files/UNTITLED" class="router-link">
+          <div
+            @touchmove="onTa"
+            @touchend="enTa"
+            @click="editFile"
+            class="router-link"
+          >
             <div class="drag-btn">
               <font-awesome-icon icon="fa-solid fa-plus" />
             </div>
-          </router-link>
+          </div>
         </nut-drag>
       </div>
     </Teleport>
@@ -69,10 +86,7 @@
       </div>
     </div>
     <!-- 没有数据 -->
-    <div
-      v-if="!isLoading && fetchResult && !hasFiles"
-      class="no-data-wrapper"
-    >
+    <div v-if="!isLoading && fetchResult && !hasFiles" class="no-data-wrapper">
       <nut-empty image="empty">
         <template #description>
           <h3>{{ $t(`filePage.emptySub.title`) }}</h3>
@@ -133,7 +147,27 @@ import { useSubsStore } from "@/store/subs";
 import { initStores } from "@/utils/initApp";
 import { useI18n } from "vue-i18n";
 import { useBackend } from "@/hooks/useBackend";
-import { isMobile } from '@/utils/isMobile';
+import { isMobile } from "@/utils/isMobile";
+
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+const as = ref(false);
+
+const onTa = () => {
+  as.value = true;
+};
+
+const enTa = () => {
+  setTimeout(() => {
+    as.value = false;
+  }, 100);
+};
+
+const editFile = () => {
+  if (as.value) return;
+  router.push("/edit/files/UNTITLED");
+};
 
 const { env } = useBackend();
 const { showNotify } = useAppNotifyStore();
@@ -142,7 +176,13 @@ const { t } = useI18n();
 const subsStore = useSubsStore();
 const globalStore = useGlobalStore();
 const { hasFiles, files } = storeToRefs(subsStore);
-const { isSimpleMode, isLoading, fetchResult, bottomSafeArea, showFloatingRefreshButton } = storeToRefs(globalStore);
+const {
+  isSimpleMode,
+  isLoading,
+  fetchResult,
+  bottomSafeArea,
+  showFloatingRefreshButton,
+} = storeToRefs(globalStore);
 const swipeDisabled = ref(false);
 const touchStartY = ref(null);
 const touchStartX = ref(null);
@@ -174,13 +214,10 @@ const refresh = () => {
 };
 
 let dragData = null;
-const changeSort = async (
-  subColl: "files",
-  dataValue: any[]
-) => {
+const changeSort = async (subColl: "files", dataValue: any[]) => {
   try {
     let sortDataRes: any;
-  
+
     const nameSortArray = dataValue.map((k: { name: string }) => k.name);
     // console.log(nameSortArray);
     sortDataRes = await subApi.newSortSub(

diff --git a/src/views/Sub.vue b/src/views/Sub.vue
@@ -49,15 +49,33 @@
             bottom: bottomSafeArea + 48 + 12 + 8,
             right: 16,
           }"
-          :style="{ cursor: 'pointer', right: '16px', bottom: `${bottomSafeArea + 48 + 36 + (!isMobile() ? (isSimpleMode ? 44 : 48) : 0) }px` }"
+          :style="{
+            cursor: 'pointer',
+            right: '16px',
+            bottom: `${
+              bottomSafeArea +
+              48 +
+              36 +
+              (!isMobile() ? (isSimpleMode ? 44 : 48) : 0)
+            }px`,
+          }"
         >
           <!-- 刷新 -->
-          <div v-if="showFloatingRefreshButton" class="drag-btn refresh" @click="refresh">
+          <div
+            v-if="showFloatingRefreshButton"
+            class="drag-btn refresh"
+            @click="refresh"
+          >
             <font-awesome-icon icon="fa-solid fa-arrow-rotate-right" />
           </div>
 
           <!-- 加号 -->
-          <div class="drag-btn" @click="addSubBtnIsVisible = true">
+          <div
+            class="drag-btn"
+            @touchmove="onTa"
+            @touchend="enTa"
+            @click="setaddSubBtnIsVisible"
+          >
             <font-awesome-icon icon="fa-solid fa-plus" />
           </div>
         </nut-drag>
@@ -200,7 +218,7 @@ import { useSubsStore } from "@/store/subs";
 import { initStores } from "@/utils/initApp";
 import { useI18n } from "vue-i18n";
 import { useBackend } from "@/hooks/useBackend";
-import { isMobile } from '@/utils/isMobile';
+import { isMobile } from "@/utils/isMobile";
 
 const { env } = useBackend();
 const { showNotify } = useAppNotifyStore();
@@ -210,7 +228,13 @@ const addSubBtnIsVisible = ref(false);
 const subsStore = useSubsStore();
 const globalStore = useGlobalStore();
 const { hasSubs, hasCollections, subs, collections } = storeToRefs(subsStore);
-const { isSimpleMode, isLoading, fetchResult, bottomSafeArea, showFloatingRefreshButton } = storeToRefs(globalStore);
+const {
+  isSimpleMode,
+  isLoading,
+  fetchResult,
+  bottomSafeArea,
+  showFloatingRefreshButton,
+} = storeToRefs(globalStore);
 const swipeDisabled = ref(false);
 const touchStartY = ref(null);
 const touchStartX = ref(null);
@@ -241,6 +265,23 @@ const refresh = () => {
   initStores(true, true, true);
 };
 
+const as = ref(false);
+
+const onTa = () => {
+  as.value = true;
+};
+
+const enTa = () => {
+  setTimeout(() => {
+    as.value = false;
+  }, 100);
+};
+
+const setaddSubBtnIsVisible = () => {
+  if (as.value) return;
+  addSubBtnIsVisible.value = true;
+};
+
 let dragData = null;
 const changeSort = async (
   subColl: "subs" | "collections",

diff --git a/src/views/Sync.vue b/src/views/Sync.vue
@@ -15,9 +15,23 @@
             bottom: bottomSafeArea + 48 + 12 + 8,
             right: 16,
           }"
-          :style="{ cursor: 'pointer', right: '16px', bottom: `${bottomSafeArea + 48 + 36 + (!isMobile() ? (isSimpleMode ? 44 : 48) : 0) }px` }"
+          :style="{
+            cursor: 'pointer',
+            right: '16px',
+            bottom: `${
+              bottomSafeArea +
+              48 +
+              36 +
+              (!isMobile() ? (isSimpleMode ? 44 : 48) : 0)
+            }px`,
+          }"
         >
-          <div class="drag-btn" @click="onclickAddArtifact">
+          <div
+            class="drag-btn"
+            @touchmove="onTa"
+            @touchend="enTa"
+            @click="onclickAddArtifact"
+          >
             <font-awesome-icon icon="fa-solid fa-plus" />
           </div>
         </nut-drag>
@@ -198,18 +212,28 @@ import { useSubsApi } from "@/api/subs";
 import { useI18n } from "vue-i18n";
 import { useAppNotifyStore } from "@/store/appNotify";
 import { useBackend } from "@/hooks/useBackend";
-import { Dialog } from '@nutui/nutui';
-import { isMobile } from '@/utils/isMobile';
+import { Dialog } from "@nutui/nutui";
+import { isMobile } from "@/utils/isMobile";
 
 const { env } = useBackend();
 const subsApi = useSubsApi();
 // const { t } = useI18n();
 const globalStore = useGlobalStore();
 const artifactsStore = useArtifactsStore();
 const settingsStore = useSettingsStore();
-const { isSimpleMode, isLoading, fetchResult, bottomSafeArea, showFloatingRefreshButton } = storeToRefs(globalStore);
+const {
+  isSimpleMode,
+  isLoading,
+  fetchResult,
+  bottomSafeArea,
+  showFloatingRefreshButton,
+} = storeToRefs(globalStore);
 const { artifacts } = storeToRefs(artifactsStore);
-const { artifactStore: artifactStoreUrl, artifactStoreStatus, syncPlatform } = storeToRefs(settingsStore);
+const {
+  artifactStore: artifactStoreUrl,
+  artifactStoreStatus,
+  syncPlatform,
+} = storeToRefs(settingsStore);
 const { showNotify } = useAppNotifyStore();
 const swipeDisabled = ref(false);
 const isEditPanelVisible = ref(false);
@@ -254,9 +278,15 @@ const downloadAllIsLoading = ref(false);
 const downloadAll = async () => {
   downloadAllIsLoading.value = true;
   Dialog({
-    popClass: 'auto-dialog',
+    popClass: "auto-dialog",
     title: t(`syncPage.preview.title`),
-    content: artifactStoreUrl.value ? `${t('syncPage.download.content')}\n\n${t('syncPage.preview.content', { status: artifactStoreStatus.value || 'VALID' })}\n${t('syncPage.preview.url')}` : `${t('syncPage.download.content')}\n\n${t('syncPage.preview.content', { status: artifactStoreStatus.value || '-' })}\n${t('syncPage.preview.noUrl')}`,
+    content: artifactStoreUrl.value
+      ? `${t("syncPage.download.content")}\n\n${t("syncPage.preview.content", {
+          status: artifactStoreStatus.value || "VALID",
+        })}\n${t("syncPage.preview.url")}`
+      : `${t("syncPage.download.content")}\n\n${t("syncPage.preview.content", {
+          status: artifactStoreStatus.value || "-",
+        })}\n${t("syncPage.preview.noUrl")}`,
     noOkBtn: !artifactStoreUrl.value,
     okText: t(`syncPage.download.confirm`),
     cancelText: t(`syncPage.preview.cancel`),
@@ -269,7 +299,7 @@ const downloadAll = async () => {
         showNotify({
           title: t("myPage.notify.restore.failed"),
           type: "danger",
-          content: `${ e.message ?? e}`,
+          content: `${e.message ?? e}`,
         });
       } finally {
         downloadAllIsLoading.value = false;
@@ -286,13 +316,22 @@ const refresh = () => {
 };
 
 const preview = () => {
-  if (artifactStoreUrl.value && (!artifactStoreStatus.value ||artifactStoreStatus.value === "VALID")) {
+  if (
+    artifactStoreUrl.value &&
+    (!artifactStoreStatus.value || artifactStoreStatus.value === "VALID")
+  ) {
     window.open(artifactStoreUrl.value);
   } else {
     Dialog({
-      popClass: 'auto-dialog',
+      popClass: "auto-dialog",
       title: t(`syncPage.preview.title`),
-      content: artifactStoreUrl.value ? `${t('syncPage.preview.content', { status: artifactStoreStatus.value || 'VALID' })}\n${t('syncPage.preview.url')}` : `${t('syncPage.preview.content', { status: artifactStoreStatus.value || '-' })}\n${t('syncPage.preview.noUrl')}`,
+      content: artifactStoreUrl.value
+        ? `${t("syncPage.preview.content", {
+            status: artifactStoreStatus.value || "VALID",
+          })}\n${t("syncPage.preview.url")}`
+        : `${t("syncPage.preview.content", {
+            status: artifactStoreStatus.value || "-",
+          })}\n${t("syncPage.preview.noUrl")}`,
       noOkBtn: !artifactStoreUrl.value,
       okText: t(`syncPage.preview.confirm`),
       cancelText: t(`syncPage.preview.cancel`),
@@ -310,7 +349,20 @@ const onClickEdit = (artifact: Artifact) => {
   isEditPanelVisible.value = true;
 };
 
+const as = ref(false);
+
+const onTa = () => {
+  as.value = true;
+};
+
+const enTa = () => {
+  setTimeout(() => {
+    as.value = false;
+  }, 100);
+};
+
 const onclickAddArtifact = () => {
+  if (as.value) return;
   isEditPanelVisible.value = true;
 };