添加国家独立设置

2026-03-12 09:59:19 +08:00
parent b4efa96416
commit bfd8748554
3 changed files with 230 additions and 27 deletions
--- a/src/composables/useCountryInfo.js
+++ b/src/composables/useCountryInfo.js
@@ -0,0 +1,190 @@
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getCountryName } from '@/utils/countryUtil'
+
+/**
+ * 独立的国家信息管理 composable
+ * 每次调用都会创建独立的状态，适合需要独立国家设置的页面
+ */
+export function useCountryInfo() {
+  // 状态 - 每次调用都是独立的
+  const countryData = ref('') // 中文国家名
+  const countryDataEN = ref('') // 英文国家名
+  const isLoading = ref(false) // 是否正在获取
+  const hasInitialized = ref(false) // 是否已初始化
+
+  /**
+   * 获取 IP 国家信息
+   * @param {Function} t - 国际化函数
+   * @param {boolean} showDialog - 获取失败时是否显示弹窗
+   */
+  const fetchCountryInfo = async (t, showDialog = true) => {
+    if (isLoading.value) return
+
+    isLoading.value = true
+    try {
+      const response = await fetch('https://ipapi.co/json/')
+      if (!response.ok) {
+        throw new Error('请求失败')
+      }
+      const data = await response.json()
+
+      countryDataEN.value = data.country_name
+      countryData.value = getCountryName(data.country)
+      hasInitialized.value = true
+
+      return { success: true }
+    } catch (error) {
+      console.error('获取国家信息失败:', error)
+
+      if (showDialog && !hasInitialized.value) {
+        showCountryInputDialog(t)
+      }
+
+      return { success: false, error }
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  /**
+   * 刷新国家信息
+   * @param {Function} t - 国际化函数
+   */
+  const refreshCountry = async (t) => {
+    if (isLoading.value) return
+
+    try {
+      const result = await fetchCountryInfo(t, false)
+
+      if (result.success) {
+        ElMessage.success(t('workbenchesSetup.refreshSuccess') || t('hostsList.refreshSuccess') || '刷新成功')
+      } else {
+        ElMessageBox.confirm(
+          t('workbenchesSetup.refreshFailed') || t('hostsList.refreshFailed') || '刷新失败，是否手动输入国家？',
+          t('workbenchesSetup.enterCountryTitle') || t('hostsList.enterCountryTitle') || '提示',
+          {
+            confirmButtonText: t('workbenchesSetup.confirm') || t('hostsList.confirm') || '手动输入',
+            cancelButtonText: t('workbenchesSetup.cancel') || t('hostsList.cancel') || '取消',
+            type: 'warning',
+          }
+        ).then(() => {
+          showCountryInputDialog(t)
+        }).catch(() => {
+          // 用户取消
+        })
+      }
+    } catch (error) {
+      ElMessage.error(t('workbenchesSetup.refreshFailed') || t('hostsList.refreshFailed') || '刷新失败')
+    }
+  }
+
+  /**
+   * 显示手动输入国家的弹窗
+   * @param {Function} t - 国际化函数
+   */
+  const showCountryInputDialog = (t) => {
+    ElMessageBox.prompt(
+      t('workbenchesSetup.enterCountryPrompt') || t('hostsList.enterCountryPrompt') || '由于网络原因无法自动获取国家信息，请手动输入当前网络所在国家（中文名）',
+      t('workbenchesSetup.enterCountryTitle') || t('hostsList.enterCountryTitle') || '获取国家失败',
+      {
+        confirmButtonText: t('workbenchesSetup.confirm') || t('hostsList.confirm') || '确定',
+        cancelButtonText: t('workbenchesSetup.cancel') || t('hostsList.cancel') || '取消',
+        inputPlaceholder: t('workbenchesSetup.countryPlaceholder') || t('hostsList.countryPlaceholder') || '例如：美国、日本、英国',
+        inputValidator: (value) => {
+          if (!value || value.trim() === '') {
+            return t('workbenchesSetup.countryRequired') || t('hostsList.countryRequired') || '请输入国家名称'
+          }
+          return true
+        }
+      }
+    ).then(({ value }) => {
+      countryData.value = value.trim()
+      countryDataEN.value = value.trim()
+      hasInitialized.value = true
+      ElMessage.success(t('workbenchesSetup.countrySetSuccess') || t('hostsList.countrySetSuccess') || '国家设置成功')
+    }).catch(() => {
+      // 用户取消输入
+      if (!hasInitialized.value) {
+        countryData.value = t('workbenchesSetup.unknown') || t('hostsList.unknown') || '未知'
+        countryDataEN.value = 'Unknown'
+        hasInitialized.value = true
+      }
+    })
+  }
+
+  /**
+   * 初始化国家信息
+   * @param {Function} t - 国际化函数
+   */
+  const initCountryInfo = async (t) => {
+    if (hasInitialized.value) {
+      return
+    }
+    await fetchCountryInfo(t, true)
+  }
+
+  /**
+   * 手动设置国家信息
+   * @param {string} countryName - 国家名称
+   * @param {Function} t - 国际化函数（可选）
+   */
+  const setCountryManually = (countryName, t = null) => {
+    if (!countryName || countryName.trim() === '') {
+      return false
+    }
+
+    countryData.value = countryName.trim()
+    countryDataEN.value = countryName.trim()
+    hasInitialized.value = true
+
+    if (t) {
+      ElMessage.success(t('workbenchesSetup.countrySetSuccess') || t('hostsList.countrySetSuccess') || '国家设置成功')
+    }
+
+    return true
+  }
+
+  /**
+   * 显示编辑国家的弹窗
+   * @param {Function} t - 国际化函数
+   * @returns {Promise} 确认时 resolve 新的国家名称，取消时 reject
+   */
+  const showEditCountryDialog = (t) => {
+    return ElMessageBox.prompt(
+      t('workbenchesSetup.editCountryPrompt') || t('hostsList.editCountryPrompt') || '请输入国家名称（中文）',
+      t('workbenchesSetup.editCountryTitle') || t('hostsList.editCountryTitle') || '编辑国家',
+      {
+        confirmButtonText: t('workbenchesSetup.confirm') || t('hostsList.confirm') || '确定',
+        cancelButtonText: t('workbenchesSetup.cancel') || t('hostsList.cancel') || '取消',
+        inputPlaceholder: t('workbenchesSetup.countryPlaceholder') || t('hostsList.countryPlaceholder') || '例如：美国、日本、英国',
+        inputValue: countryData.value,
+        inputValidator: (value) => {
+          if (!value || value.trim() === '') {
+            return t('workbenchesSetup.countryRequired') || t('hostsList.countryRequired') || '请输入国家名称'
+          }
+          return true
+        }
+      }
+    ).then(({ value }) => {
+      setCountryManually(value, t)
+      return value.trim()
+    })
+  }
+
+  return {
+    // 状态
+    countryData,
+    countryDataEN,
+    isLoading,
+    hasInitialized,
+
+    // 方法
+    fetchCountryInfo,
+    refreshCountry,
+    showCountryInputDialog,
+    initCountryInfo,
+    setCountryManually,
+    showEditCountryDialog,
+  }
+}
--- a/src/views/tk/FanWorkbench.vue
+++ b/src/views/tk/FanWorkbench.vue
@@ -228,7 +228,7 @@ import { getUser } from "@/utils/storage";
 import { getCountryName } from "@/utils/countryUtil";
 import { ElMessage, ElMessageBox, ElLoading } from "element-plus";
 import { useI18n } from 'vue-i18n';
-import { useCountryStore } from '@/stores/countryStore';
+import { useCountryInfo } from '@/composables/useCountryInfo';

 // Mock API calls if not present
 // Ideally we should import these from api file, but for simplicity I will mock them or use empty callbacks
@@ -239,7 +239,14 @@ import { useCountryStore } from '@/stores/countryStore';
 import { tkbigdata, getCountryinfo } from "@/api/account";

 const { t, locale } = useI18n();
-const countryStore = useCountryStore();
+// 使用独立的国家信息管理（不与其他页面共享）
+const {
+  countryData,
+  isLoading: isRefreshingCountry,
+  initCountryInfo,
+  refreshCountry: refreshCountryInfo,
+  showEditCountryDialog
+} = useCountryInfo();

 // Component State
 const queryFormData = ref({
@@ -275,9 +282,8 @@ const streamdialogVisible = ref(false);
 const streamdialogVisibletext = ref(false);
 const filterdialogVisible = ref(false);
 const textarea = ref("");
-// 使用共享 store 的国家信息
-const countryData = computed(() => countryStore.countryData);
-const isRefreshingCountry = computed(() => countryStore.isLoading);
+// 使用独立的国家信息
+const countryDataRef = countryData;
 const userInfo = ref({});
 const options = ref([]);

@@ -326,8 +332,8 @@ const timerId = ref(null);
 onMounted(async () => {
    userInfo.value = getUser() || { tenantId: 0, id: 0 };

-    // 使用共享 store 初始化国家信息
-    await countryStore.initCountryInfo(t);
+    // 初始化独立的国家信息
+    await initCountryInfo(t);

    getCountry();
    getlist();
@@ -564,14 +570,14 @@ function openTikTok() {
    loginBigTikTok();
 }

-// 编辑国家信息 - 使用共享 store
+// 编辑国家信息
 const editCountry = () => {
-    countryStore.showEditCountryDialog(t);
+    showEditCountryDialog(t);
 };

-// 刷新国家信息 - 使用共享 store
+// 刷新国家信息
 const refreshCountry = async () => {
-    await countryStore.refreshCountry(t);
+    await refreshCountryInfo(t);
 };

 function getCountry() {
--- a/src/views/tk/Workbenches.vue
+++ b/src/views/tk/Workbenches.vue
@@ -123,7 +123,7 @@
                :title="$t('workbenchesSetup.editCountry') || '编辑国家'">
                <span class="material-icons-round text-slate-500 text-base">edit</span>
              </button>
-              <button @click="refreshCountry" :disabled="isRefreshingCountry"
+              <button @click="refreshCountryFn" :disabled="isRefreshingCountry"
                class="p-1 rounded-md hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                :title="$t('workbenchesSetup.refreshCountry') || '刷新国家'">
                <span class="material-icons-round text-slate-500 text-base" :class="{ 'animate-spin': isRefreshingCountry }">refresh</span>
@@ -312,18 +312,25 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { getCountryName } from '@/utils/countryUtil'
 import { tkaccountuseinfo, getExpiredTime } from '@/api/account'
 import { useI18n } from 'vue-i18n'
-import { useCountryStore } from '@/stores/countryStore'
+import { useCountryInfo } from '@/composables/useCountryInfo'

 const { t, locale } = useI18n()
-const countryStore = useCountryStore()
+// 使用独立的国家信息管理（不与其他页面共享）
+const {
+  countryData,
+  countryDataEN,
+  isLoading: isRefreshingCountry,
+  initCountryInfo,
+  refreshCountry,
+  showEditCountryDialog
+} = useCountryInfo()
 //导入python交互方法
 const { fetchDataConfig, fetchDataCount, loginBackStage, loginTikTok, backStageloginStatus, backStageloginStatusCopy, getTkLoginStatus } = usePythonBridge();


-//ip国家 - 使用共享 store
-const countryData = computed(() => countryStore.countryData);
-const countryDataEN = computed(() => countryStore.countryDataEN);
-const isRefreshingCountry = computed(() => countryStore.isLoading);
+//ip国家 - 使用独立的国家信息
+const countryDataRef = countryData;
+const countryDataENRef = countryDataEN;
 let country_info = ref('全部');
 let country_Lst = ref();
 //获取主播数量的定时器
@@ -417,8 +424,8 @@ onMounted(async () => {
  tkaccountuse(tkData.value[0].account, 0)
  tkaccountuse(tkData.value[1].account, 1)

-  // 使用共享 store 初始化国家信息
-  countryStore.initCountryInfo(t)
+  // 初始化独立的国家信息
+  initCountryInfo(t)

  setTimeout(() => {
    // Check if user exists before calling getExpiredTime
@@ -436,10 +443,10 @@ onMounted(async () => {
  }, 1000 * 20)
 })

-// 编辑国家信息 - 使用共享 store
+// 编辑国家信息
 const editCountry = async () => {
  try {
-    const newCountry = await countryStore.showEditCountryDialog(t);
+    const newCountry = await showEditCountryDialog(t);
    // 确认后获取该国家的列表
    if (newCountry) {
      fetchCountryList(newCountry);
@@ -449,12 +456,12 @@ const editCountry = async () => {
  }
 };

-// 刷新国家信息 - 使用共享 store
-const refreshCountry = async () => {
-  await countryStore.refreshCountry(t);
+// 刷新国家信息
+const refreshCountryFn = async () => {
+  await refreshCountry(t);
  // 刷新成功后获取国家列表
-  if (countryStore.countryData) {
-    fetchCountryList(countryStore.countryData);
+  if (countryData.value) {
+    fetchCountryList(countryData.value);
  }
 };