From 37a0e8312425fce2227437b4799cf2e30f23972e Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 30 Nov 2023 15:18:10 +0800
Subject: [PATCH] =?UTF-8?q?fix=20=E8=A7=84=E5=88=99=E5=AF=BC=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@core/utils/navigator.ts                  | 22 ++----
 src/components/cards/TmdbSelectorCard.vue     |  1 -
 src/components/form/ImportCodeForm.vue        | 39 ++++++++++
 src/views/setting/AccountSettingSearch.vue    | 63 +++++++++-------
 src/views/setting/AccountSettingSubscribe.vue | 74 ++++++++++++-------
 5 files changed, 134 insertions(+), 65 deletions(-)
 create mode 100644 src/components/form/ImportCodeForm.vue

diff --git a/src/@core/utils/navigator.ts b/src/@core/utils/navigator.ts
index 518afbdd..fd914a66 100644
--- a/src/@core/utils/navigator.ts
+++ b/src/@core/utils/navigator.ts
@@ -1,13 +1,10 @@
-// 请求和获取剪切板内容
+// 请求和获取剪贴板内容
 export async function getClipboardContent() {
-  try {
+  if (navigator.clipboard && window.isSecureContext) {
     return await navigator.clipboard.readText()
   }
-  catch (error) {
-    console.error('Unable to read clipboard using navigator.clipboard:', error)
-
-    // Fallback for older browsers or non-secure context
-    const input = document.createElement('input')
+  else {
+    const input = document.createElement('textarea')
     document.body.appendChild(input)
     input.select()
     document.execCommand('paste')
@@ -17,16 +14,13 @@ export async function getClipboardContent() {
   }
 }
 
-// 将内容复制到剪切板，兼容非安全域场景
+// 将内容复制到剪贴板，兼容非安全域场景
 export async function copyToClipboard(content: string) {
-  try {
+  if (navigator.clipboard && window.isSecureContext) {
     await navigator.clipboard.writeText(content)
   }
-  catch (error) {
-    console.error('Unable to write to clipboard using navigator.clipboard:', error)
-
-    // Fallback for older browsers or non-secure context
-    const input = document.createElement('input')
+  else {
+    const input = document.createElement('textarea')
     input.value = content
     document.body.appendChild(input)
     input.select()
diff --git a/src/components/cards/TmdbSelectorCard.vue b/src/components/cards/TmdbSelectorCard.vue
index a81ed91e..a64f2190 100644
--- a/src/components/cards/TmdbSelectorCard.vue
+++ b/src/components/cards/TmdbSelectorCard.vue
@@ -25,7 +25,6 @@ const tmdbKeyword = ref<HTMLElement | null>(null)
 
 // 选中条目
 function selectMedia(item: TmdbItem) {
-  console.log(item)
   emit('update:modelValue', item.tmdbid)
   emit('close')
 }
diff --git a/src/components/form/ImportCodeForm.vue b/src/components/form/ImportCodeForm.vue
new file mode 100644
index 00000000..1346f657
--- /dev/null
+++ b/src/components/form/ImportCodeForm.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+// 输入参数
+const props = defineProps({
+  title: String,
+})
+
+// 定义事件
+const emit = defineEmits(['update:modelValue', 'close'])
+
+// 代码
+const codeString = ref('')
+
+// 导入
+function handleImport() {
+  emit('update:modelValue', codeString.value)
+  emit('close')
+}
+</script>
+
+<template>
+  <VCard
+    :title="props.title"
+    class="rounded-t"
+  >
+    <DialogCloseBtn @click="emit('close')" />
+    <VCardText class="pt-2">
+      <VTextarea v-model="codeString" />
+    </VCardText>
+    <VCardActions>
+      <VSpacer />
+      <VBtn
+        variant="tonal"
+        @click="handleImport"
+      >
+        导入
+      </VBtn>
+    </VCardActions>
+  </VCard>
+</template>
diff --git a/src/views/setting/AccountSettingSearch.vue b/src/views/setting/AccountSettingSearch.vue
index 9b8ed473..1ee561d3 100644
--- a/src/views/setting/AccountSettingSearch.vue
+++ b/src/views/setting/AccountSettingSearch.vue
@@ -3,7 +3,8 @@ import { useToast } from 'vue-toast-notification'
 import api from '@/api'
 import FilterRuleCard from '@/components/cards/FilterRuleCard.vue'
 import type { Site } from '@/api/types'
-import { copyToClipboard, getClipboardContent } from '@/@core/utils/navigator'
+import { copyToClipboard } from '@/@core/utils/navigator'
+import ImportCodeForm from '@/components/form/ImportCodeForm.vue'
 
 // 规则卡片类型
 interface FilterCard {
@@ -31,6 +32,12 @@ const defaultFilterRules = ref({
   exclude: '',
 })
 
+// 导入代码弹窗
+const importCodeDialog = ref(false)
+
+// 导入的代码
+const importCodeString = ref('')
+
 // 查询已设置优先级规则
 async function queryCustomFilters() {
   try {
@@ -240,35 +247,30 @@ function shareRules() {
     .map(card => card.rules.join('&'))
     .join('>')
 
-  // 复制到剪切板
+  // 复制到剪贴板
   try {
     copyToClipboard(value)
-    $toast.success('优先级规则已复制到剪切板')
+    $toast.success('优先级规则已复制到剪贴板')
   }
   catch (error) {
     $toast.error('优先级规则复制失败！')
   }
 }
 
-// 导入规则
-async function importRules() {
-  try {
-    // 从剪切板读取
-    const value = await getClipboardContent()
-    // 分割成数组
-    const groups = value.split('>')
-    // 生成规则卡片
-    filterCards.value = groups?.map((group: string, index: number) => {
-      return {
-        pri: (index + 1).toString(),
-        rules: group.split('&'),
-      }
-    })
-  }
-  catch (error) {
-    $toast.error('从剪切板读取数据失败！')
-  }
-}
+// 监听导入代码变化
+watchEffect(() => {
+  if (!importCodeString.value)
+    return
+
+  // 将导入的代码转换为规则卡片
+  const groups = importCodeString.value.split('>')
+  filterCards.value = groups.map((group: string, index: number) => {
+    return {
+      pri: (index + 1).toString(),
+      rules: group.split('&'),
+    }
+  })
+})
 
 onMounted(() => {
   queryCustomFilters()
@@ -322,16 +324,16 @@ onMounted(() => {
                   <template #prepend>
                     <VIcon icon="mdi-share" />
                   </template>
-                  <VListItemTitle>分享规则</VListItemTitle>
+                  <VListItemTitle>分享</VListItemTitle>
                 </VListItem>
                 <VListItem
                   variant="plain"
-                  @click="importRules"
+                  @click="importCodeDialog = true"
                 >
                   <template #prepend>
                     <VIcon icon="mdi-import" />
                   </template>
-                  <VListItemTitle>从剪切板导入</VListItemTitle>
+                  <VListItemTitle>导入</VListItemTitle>
                 </VListItem>
               </VList>
             </VMenu>
@@ -405,6 +407,17 @@ onMounted(() => {
       </VCard>
     </VCol>
   </VRow>
+  <VDialog
+    v-model="importCodeDialog"
+    width="60rem"
+    scrollable
+  >
+    <ImportCodeForm
+      v-model="importCodeString"
+      title="导入优先级规则"
+      @close="importCodeDialog = false"
+    />
+  </VDialog>
 </template>
 
 <style lang="scss">
diff --git a/src/views/setting/AccountSettingSubscribe.vue b/src/views/setting/AccountSettingSubscribe.vue
index d0bc4e98..d0a82cff 100644
--- a/src/views/setting/AccountSettingSubscribe.vue
+++ b/src/views/setting/AccountSettingSubscribe.vue
@@ -3,7 +3,8 @@ import { useToast } from 'vue-toast-notification'
 import api from '@/api'
 import FilterRuleCard from '@/components/cards/FilterRuleCard.vue'
 import type { Site } from '@/api/types'
-import { copyToClipboard, getClipboardContent } from '@/@core/utils/navigator'
+import { copyToClipboard } from '@/@core/utils/navigator'
+import ImportCodeForm from '@/components/form/ImportCodeForm.vue'
 
 // 规则卡片类型
 interface FilterCard {
@@ -28,12 +29,21 @@ const allSites = ref<Site[]>([])
 // 选中订阅站点
 const selectedRssSites = ref<number[]>([])
 
+// 当前规则类型
+const currentRuleType = ref('SubscribeFilterRules')
+
 // 包含与排除规则
 const defaultFilterRules = ref({
   include: '',
   exclude: '',
 })
 
+// 导入代码弹窗
+const importCodeDialog = ref(false)
+
+// 导入的代码
+const importCodeString = ref('')
+
 // 查询用户选中的订阅站点
 async function querySelectedRssSites() {
   try {
@@ -262,10 +272,10 @@ function shareRules(ruleType: string) {
     .map(card => card.rules.join('&'))
     .join('>')
 
-  // 复制到剪切板
+  // 复制到剪贴板
   try {
     copyToClipboard(value)
-    $toast.success('优先级规则已复制到剪切板')
+    $toast.success('优先级规则已复制到剪贴板')
   }
   catch (error) {
     $toast.error('优先级规则复制失败！')
@@ -274,28 +284,31 @@ function shareRules(ruleType: string) {
 
 // 导入规则
 async function importRules(ruleType: string) {
+  currentRuleType.value = ruleType
+  importCodeString.value = ''
+  importCodeDialog.value = true
+}
+
+// 监听导入代码变化
+watchEffect(() => {
+  if (!importCodeString.value)
+    return
+  if (!currentRuleType.value)
+    return
   let filterCards: Ref<FilterCard[]>
-  if (ruleType === 'SubscribeFilterRules')
+  if (currentRuleType.value === 'SubscribeFilterRules')
     filterCards = subscribeFilterCards
   else
     filterCards = bestVersionFilterCards
-  try {
-  // 从剪切板读取
-    const value = await getClipboardContent()
-    // 分割成数组
-    const groups = value.split('>')
-    // 生成规则卡片
-    filterCards.value = groups?.map((group: string, index: number) => {
-      return {
-        pri: (index + 1).toString(),
-        rules: group.split('&'),
-      }
-    })
-  }
-  catch (error) {
-    $toast.error('从剪切板读取数据失败！')
-  }
-}
+  // 将导入的代码转换为规则卡片
+  const groups = importCodeString.value.split('>')
+  filterCards.value = groups.map((group: string, index: number) => {
+    return {
+      pri: (index + 1).toString(),
+      rules: group.split('&'),
+    }
+  })
+})
 
 onMounted(() => {
   querySites()
@@ -350,7 +363,7 @@ onMounted(() => {
                   <template #prepend>
                     <VIcon icon="mdi-share" />
                   </template>
-                  <VListItemTitle>分享规则</VListItemTitle>
+                  <VListItemTitle>分享</VListItemTitle>
                 </VListItem>
                 <VListItem
                   variant="plain"
@@ -359,7 +372,7 @@ onMounted(() => {
                   <template #prepend>
                     <VIcon icon="mdi-import" />
                   </template>
-                  <VListItemTitle>从剪切板导入</VListItemTitle>
+                  <VListItemTitle>导入</VListItemTitle>
                 </VListItem>
               </VList>
             </VMenu>
@@ -416,7 +429,7 @@ onMounted(() => {
                   <template #prepend>
                     <VIcon icon="mdi-share" />
                   </template>
-                  <VListItemTitle>分享规则</VListItemTitle>
+                  <VListItemTitle>分享</VListItemTitle>
                 </VListItem>
                 <VListItem
                   variant="plain"
@@ -425,7 +438,7 @@ onMounted(() => {
                   <template #prepend>
                     <VIcon icon="mdi-import" />
                   </template>
-                  <VListItemTitle>从剪切板导入</VListItemTitle>
+                  <VListItemTitle>导入</VListItemTitle>
                 </VListItem>
               </VList>
             </VMenu>
@@ -499,6 +512,17 @@ onMounted(() => {
       </VCard>
     </VCol>
   </VRow>
+  <VDialog
+    v-model="importCodeDialog"
+    width="60rem"
+    scrollable
+  >
+    <ImportCodeForm
+      v-model="importCodeString"
+      title="导入优先级规则"
+      @close="importCodeDialog = false"
+    />
+  </VDialog>
 </template>
 
 <style lang="scss">