修复切换<视频智能分析>与<蚕茧仪评分析>Tab页后其他页面无法正常加载的问题

2025-08-22 09:57:27 +08:00
parent cdce90bb27
commit 10ca219970
7 changed files with 335 additions and 229 deletions
@@ -8,6 +8,12 @@ export namespace AuthApi {
    account?: string;
    password?: string;
  }
+  /** 注册 */
+  export interface RegisterParams {
+    account?: string;
+    code?: string;
+    password?: string;
+  }

  export interface Token {
    token: string;
@@ -39,6 +45,22 @@ export async function loginApi(data: AuthApi.LoginParams) {
  return requestClient.post<AuthApi.LoginResult>('/user/login', data);
 }

+/**
+ * 发送验证码
+ */
+export async function sendCodeApi(str: string) {
+  return requestClient.post<any>('/user/sendCode', { str });
+}
+
+/**
+ * 注册
+ */
+export async function registerApi(data: AuthApi.RegisterParams) {
+  // 密码加密
+  data.password = sha256(data.password?.toString() || '');
+  return requestClient.post<any>('/user/register', data);
+}
+
 /**
 * 刷新accessToken
 */
@@ -46,5 +46,6 @@ export const overridesPreferences = defineOverridesPreferences({
  },
  tabbar: {
    middleClickToClose: true,
+    keepAlive: false,
  },
 });
@@ -22,7 +22,7 @@ const routes: RouteRecordRaw[] = [
          authority: ['iva'],
          icon: 'mdi:video',
          title: $t('ai.intelligence_video_analysis'),
-          keepAlive: false,
+          keepAlive: true,
        },
        component: () => import('#/views/ai/iva/index.vue'),
      },
@@ -33,6 +33,7 @@ const routes: RouteRecordRaw[] = [
          authority: ['sca'],
          icon: 'mdi:ice-cream',
          title: $t('ai.silkworm_cocoon_analysis'),
+          keepAlive: false,
        },
        component: () => import('#/views/ai/sca/index.vue'),
      },
@@ -43,6 +44,7 @@ const routes: RouteRecordRaw[] = [
          authority: ['ysa'],
          icon: 'mdi:account-key-outline',
          title: $t('ai.young_silkworm_analysis'),
+          keepAlive: false,
        },
        component: () => import('#/views/ai/ysa/index.vue'),
      },
@@ -53,7 +55,7 @@ const routes: RouteRecordRaw[] = [
        meta: {
          icon: 'mdi:wall-fire',
          iframeSrc: 'http://171.212.101.199:13010/',
-          keepAlive: true,
+          keepAlive: false,
          title: '检索增强生成',
        },
      },
@@ -2,25 +2,72 @@
 import type { VbenFormSchema } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';

-import { computed, h, ref } from 'vue';
+import { computed, h, ref, useTemplateRef } from 'vue';

 import { AuthenticationRegister, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';

+import { registerApi, sendCodeApi } from '#/api';
+import { useAuthStore } from '#/store';
+
 defineOptions({ name: 'Register' });
-
 const loading = ref(false);
+const CODE_LENGTH = 4;

+const registerRef =
+  useTemplateRef<InstanceType<typeof AuthenticationRegister>>('registerRef');
+const sending = ref(false);
 const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'VbenInput',
      componentProps: {
-        placeholder: $t('authentication.usernameTip'),
+        placeholder: $t('authentication.emailTip'),
      },
-      fieldName: 'username',
-      label: $t('authentication.username'),
-      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+      fieldName: 'account',
+      label: $t('authentication.email'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.emailTip') })
+        .refine((v) => /^[^\s@]+@[^\s@][^\s.@]*\.[^\s@]+$/.test(v), {
+          message: $t('邮箱格式错误'),
+        }),
+    },
+    {
+      component: 'VbenPinInput',
+      componentProps: {
+        codeLength: CODE_LENGTH,
+        createText(countdown: number) {
+          if (sending.value) {
+            return $t('正在发送中');
+          }
+          return countdown > 0
+            ? $t('authentication.sendText', [countdown])
+            : $t('authentication.sendCode');
+        },
+        placeholder: $t('authentication.code'),
+        async handleSendCode() {
+          sending.value = true;
+          try {
+            const formApi = registerRef.value?.getFormApi();
+            if (!formApi) throw new Error('formApi is not ready');
+
+            await formApi.validateField('account');
+            const isPhoneReady = await formApi.isFieldValid('account');
+            if (!isPhoneReady) throw new Error('邮箱不可为空');
+
+            const { account } = await formApi.getValues();
+            await sendCodeApi(account);
+          } finally {
+            sending.value = false;
+          }
+        },
+      },
+      fieldName: 'code',
+      label: $t('authentication.code'),
+      rules: z.string().length(CODE_LENGTH, {
+        message: $t('authentication.codeTip', [CODE_LENGTH]),
+      }),
    },
    {
      component: 'VbenInputPassword',
@@ -80,15 +127,32 @@ const formSchema = computed((): VbenFormSchema[] => {
    },
  ];
 });
+async function handleSubmit(value: Recordable<any>) {
+  loading.value = true;
+  try {
+    const params = {
+      account: value.account,
+      code: value.code,
+      password: value.password,
+    };
+    const { accessToken } = await registerApi(params);

-function handleSubmit(value: Recordable<any>) {
-  // eslint-disable-next-line no-console
-  console.log('register submit:', value);
+    if (accessToken) {
+      // 注册成功后，把 token 交给 authStore 走统一流程
+      const authStore = useAuthStore();
+      authStore.authLogin({ account: value.account, password: value.password });
+    }
+  } catch (error) {
+    console.error('注册失败', error);
+  } finally {
+    loading.value = false;
+  }
 }
 </script>

 <template>
  <AuthenticationRegister
+    ref="registerRef"
    :form-schema="formSchema"
    :loading="loading"
    @submit="handleSubmit"
@@ -345,152 +345,154 @@ function onListItemClick(video: any) {
 </script>

 <template>
-  <BaseModal />
-  <CreateVideoTaskModal />
-  <div class="flex h-full w-full bg-gray-50">
-    <!-- 左侧：筛选 + 列表 -->
-    <div class="flex w-64 flex-col border-r bg-white p-4">
-      <!-- 按钮组 -->
-      <div class="mb-4 flex justify-between space-x-2">
-        <Button type="primary" @click="createTask" class="flex-1">
-          新建任务
-        </Button>
-        <Button @click="refreshList" class="flex-1"> 刷新列表 </Button>
-      </div>
-      <!-- 筛选框 -->
-      <input
-        v-model="filterKeyword"
-        placeholder="筛选分析任务"
-        class="focus:ring-primary mb-4 rounded-md border px-3 py-2 focus:outline-none focus:ring-2"
-      />
-      <!-- 列表 -->
-      <div class="flex-1 space-y-2 overflow-auto">
-        <div
-          v-for="item in list"
-          :key="item.v_id"
-          @click="selectItem(item)"
-          class="cursor-pointer rounded border p-3 hover:bg-gray-100"
-          :class="{ 'bg-gray-100': item.v_id === selectedItem?.v_id }"
-        >
-          <div class="text-base font-medium">{{ item.v_name }}</div>
-          <div class="text-sm text-gray-400">{{ item.v_a_time }}</div>
+  <div class="flex h-full w-full flex-col">
+    <BaseModal />
+    <CreateVideoTaskModal />
+    <div class="flex h-full w-full bg-gray-50">
+      <!-- 左侧：筛选 + 列表 -->
+      <div class="flex w-64 flex-col border-r bg-white p-4">
+        <!-- 按钮组 -->
+        <div class="mb-4 flex justify-between space-x-2">
+          <Button type="primary" @click="createTask" class="flex-1">
+            新建任务
+          </Button>
+          <Button @click="refreshList" class="flex-1"> 刷新列表 </Button>
        </div>
-      </div>
-    </div>
-
-    <!-- 右侧：Tab 内容区 -->
-    <div class="flex flex-1 flex-col overflow-hidden p-6">
-      <!-- Tab 标题 -->
-      <div class="mb-4 flex shrink-0 space-x-4 border-b">
-        <button
-          v-for="tab in tabs"
-          :key="tab.key"
-          @click="activeTab = tab.key as 'detail' | 'video'"
-          class="px-4 py-2"
-          :class="[
-            activeTab === tab.key
-              ? 'border-primary text-primary border-b-2'
-              : 'hover:text-primary text-gray-500',
-          ]"
-        >
-          {{ tab.label }}
-        </button>
-      </div>
-
-      <!-- Tab 内容（滚动区域） -->
-      <div class="flex-1 overflow-auto">
-        <div
-          v-if="!selectedItem"
-          class="flex h-full items-center justify-center text-gray-400"
-        >
-          请先选择左侧列表中的分析任务
-        </div>
-        <template v-else>
+        <!-- 筛选框 -->
+        <input
+          v-model="filterKeyword"
+          placeholder="筛选分析任务"
+          class="focus:ring-primary mb-4 rounded-md border px-3 py-2 focus:outline-none focus:ring-2"
+        />
+        <!-- 列表 -->
+        <div class="flex-1 space-y-2 overflow-auto">
          <div
-            v-show="activeTab === 'detail'"
-            class="flex h-full flex-col gap-4"
+            v-for="item in list"
+            :key="item.v_id"
+            @click="selectItem(item)"
+            class="cursor-pointer rounded border p-3 hover:bg-gray-100"
+            :class="{ 'bg-gray-100': item.v_id === selectedItem?.v_id }"
          >
-            <!-- 主内容区域：左右结构 -->
-            <div class="flex flex-1 gap-4">
-              <!-- 左侧 -->
-              <div class="flex w-72 flex-col gap-4">
-                <!-- 视频基础信息展示 -->
-                <div
-                  class="w-full rounded border bg-white p-4"
-                  id="video_base_info"
-                >
+            <div class="text-base font-medium">{{ item.v_name }}</div>
+            <div class="text-sm text-gray-400">{{ item.v_a_time }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧：Tab 内容区 -->
+      <div class="flex flex-1 flex-col overflow-hidden p-6">
+        <!-- Tab 标题 -->
+        <div class="mb-4 flex shrink-0 space-x-4 border-b">
+          <button
+            v-for="tab in tabs"
+            :key="tab.key"
+            @click="activeTab = tab.key as 'detail' | 'video'"
+            class="px-4 py-2"
+            :class="[
+              activeTab === tab.key
+                ? 'border-primary text-primary border-b-2'
+                : 'hover:text-primary text-gray-500',
+            ]"
+          >
+            {{ tab.label }}
+          </button>
+        </div>
+
+        <!-- Tab 内容（滚动区域） -->
+        <div class="flex-1 overflow-auto">
+          <div
+            v-if="!selectedItem"
+            class="flex h-full items-center justify-center text-gray-400"
+          >
+            请先选择左侧列表中的分析任务
+          </div>
+          <template v-else>
+            <div
+              v-show="activeTab === 'detail'"
+              class="flex h-full flex-col gap-4"
+            >
+              <!-- 主内容区域：左右结构 -->
+              <div class="flex flex-1 gap-4">
+                <!-- 左侧 -->
+                <div class="flex w-72 flex-col gap-4">
+                  <!-- 视频基础信息展示 -->
                  <div
-                    v-for="(value, key) in showInfoStr"
-                    :key="key"
-                    class="mb-2 flex text-sm text-gray-700"
+                    class="w-full rounded border bg-white p-4"
+                    id="video_base_info"
                  >
-                    <div class="w-32 font-medium text-gray-900">
-                      {{ key }}：
-                    </div>
-                    <div class="flex-1 break-all text-gray-600">
-                      {{ value || '—' }}
+                    <div
+                      v-for="(value, key) in showInfoStr"
+                      :key="key"
+                      class="mb-2 flex text-sm text-gray-700"
+                    >
+                      <div class="w-32 font-medium text-gray-900">
+                        {{ key }}：
+                      </div>
+                      <div class="flex-1 break-all text-gray-600">
+                        {{ value || '—' }}
+                      </div>
                    </div>
                  </div>
+
+                  <!-- 下：空白卡片 -->
+                  <div class="h-[300px] flex-1 rounded border bg-white p-4">
+                    <EchartsUI ref="chartRef2" />
+                  </div>
                </div>

-                <!-- 下：空白卡片 -->
-                <div class="h-[300px] flex-1 rounded border bg-white p-4">
-                  <EchartsUI ref="chartRef2" />
-                </div>
-              </div>
-
-              <!-- 右侧 -->
-              <div class="flex flex-1 flex-col gap-4">
-                <!-- 上：四个统计卡片 -->
-                <AnalysisOverview
-                  :items="overviewItems"
-                  class="grid grid-cols-4 gap-4"
-                />
-                <!-- 下：折线图区域 -->
-                <div class="flex-1 rounded border bg-white p-4">
-                  <EchartsUI ref="chartRef1" />
+                <!-- 右侧 -->
+                <div class="flex flex-1 flex-col gap-4">
+                  <!-- 上：四个统计卡片 -->
+                  <AnalysisOverview
+                    :items="overviewItems"
+                    class="grid grid-cols-4 gap-4"
+                  />
+                  <!-- 下：折线图区域 -->
+                  <div class="flex-1 rounded border bg-white p-4">
+                    <EchartsUI ref="chartRef1" />
+                  </div>
                </div>
              </div>
            </div>
-          </div>
-          <div v-show="activeTab === 'video'" class="flex h-full space-x-4">
-            <!-- 左侧视频区域 -->
-            <div class="flex-1 overflow-hidden rounded bg-black">
-              <video
-                ref="videoEl"
-                class="video-js vjs-default-skin h-full w-full"
-                preload="auto"
-                controls
-              ></video>
-            </div>
+            <div v-show="activeTab === 'video'" class="flex h-full space-x-4">
+              <!-- 左侧视频区域 -->
+              <div class="flex-1 overflow-hidden rounded bg-black">
+                <video
+                  ref="videoEl"
+                  class="video-js vjs-default-skin h-full w-full"
+                  preload="auto"
+                  controls
+                ></video>
+              </div>

-            <!-- 右侧时间点列表 -->
-            <div
-              class="flex w-1/4 flex-col overflow-auto rounded-md border bg-white"
-            >
-              <!-- 列表标题 -->
+              <!-- 右侧时间点列表 -->
              <div
-                class="flex justify-between border-b p-3 text-sm font-medium text-gray-700"
+                class="flex w-1/4 flex-col overflow-auto rounded-md border bg-white"
              >
-                <span>事件</span>
-                <span>时间点</span>
-              </div>
-
-              <!-- 列表内容 -->
-              <div class="flex-1">
+                <!-- 列表标题 -->
                <div
-                  v-for="(video, index) in detailList"
-                  :key="index"
-                  @click="onListItemClick(video)"
-                  class="flex cursor-pointer justify-between border-b p-3 text-sm hover:bg-gray-100"
+                  class="flex justify-between border-b p-3 text-sm font-medium text-gray-700"
                >
-                  <span>{{ video.action }}</span>
-                  <span>{{ video.time }}</span>
+                  <span>事件</span>
+                  <span>时间点</span>
+                </div>
+
+                <!-- 列表内容 -->
+                <div class="flex-1">
+                  <div
+                    v-for="(video, index) in detailList"
+                    :key="index"
+                    @click="onListItemClick(video)"
+                    class="flex cursor-pointer justify-between border-b p-3 text-sm hover:bg-gray-100"
+                  >
+                    <span>{{ video.action }}</span>
+                    <span>{{ video.time }}</span>
+                  </div>
                </div>
              </div>
            </div>
-          </div>
-        </template>
+          </template>
+        </div>
      </div>
    </div>
  </div>
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { EchartsUIType } from '@vben/plugins/echarts';

-import { onMounted, ref, watch } from 'vue';
+import { onActivated, onDeactivated, onMounted, ref, watch } from 'vue';

 import { useVbenModal } from '@vben/common-ui';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
@@ -144,112 +144,127 @@ function refreshLineChart() {
    },
  });
 }
+
+onDeactivated(() => {
+  // 离开路由时清理状态
+  selectedItem.value = null;
+  showInfoStr.value = {};
+});
+
+onActivated(() => {
+  // 回来的时候重新刷新一次列表
+  loadList();
+});
 </script>

 <template>
-  <BaseModal />
-  <CreateYSATaskModal />
-  <div class="flex h-full w-full bg-gray-50">
-    <!-- 左侧：筛选 + 列表 -->
-    <div class="flex w-64 flex-col border-r bg-white p-4">
-      <!-- 按钮组 -->
-      <div class="mb-4 flex justify-between space-x-2">
-        <Button type="primary" @click="createTask" class="flex-1">
-          新建任务
-        </Button>
-        <Button @click="refreshList" class="flex-1"> 刷新列表 </Button>
-      </div>
-      <!-- 筛选框 -->
-      <input
-        v-model="filterKeyword"
-        placeholder="筛选分析任务"
-        class="focus:ring-primary mb-4 rounded-md border px-3 py-2 focus:outline-none focus:ring-2"
-      />
-      <!-- 列表 -->
-      <div class="flex-1 space-y-2 overflow-auto">
-        <div
-          v-for="item in list"
-          :key="item.v_id"
-          @click="selectItem(item)"
-          class="cursor-pointer rounded border p-3 hover:bg-gray-100"
-          :class="{ 'bg-gray-100': item.id === selectedItem?.id }"
-        >
-          <div class="text-base font-medium">{{ item.name }}</div>
-          <div class="text-sm text-gray-400">{{ item.upload_datetime }}</div>
+  <div class="flex h-full w-full flex-col">
+    <BaseModal />
+    <CreateYSATaskModal />
+    <div class="flex h-full w-full bg-gray-50">
+      <!-- 左侧：筛选 + 列表 -->
+      <div class="flex w-64 flex-col border-r bg-white p-4">
+        <!-- 按钮组 -->
+        <div class="mb-4 flex justify-between space-x-2">
+          <Button type="primary" @click="createTask" class="flex-1">
+            新建任务
+          </Button>
+          <Button @click="refreshList" class="flex-1"> 刷新列表 </Button>
+        </div>
+        <!-- 筛选框 -->
+        <input
+          v-model="filterKeyword"
+          placeholder="筛选分析任务"
+          class="focus:ring-primary mb-4 rounded-md border px-3 py-2 focus:outline-none focus:ring-2"
+        />
+        <!-- 列表 -->
+        <div class="flex-1 space-y-2 overflow-auto">
+          <div
+            v-for="item in list"
+            :key="item.v_id"
+            @click="selectItem(item)"
+            class="cursor-pointer rounded border p-3 hover:bg-gray-100"
+            :class="{ 'bg-gray-100': item.id === selectedItem?.id }"
+          >
+            <div class="text-base font-medium">{{ item.name }}</div>
+            <div class="text-sm text-gray-400">{{ item.upload_datetime }}</div>
+          </div>
        </div>
      </div>
-    </div>

-    <!-- 右侧：Tab 内容区 -->
-    <div class="flex flex-1 flex-col overflow-hidden p-6">
-      <div
-        v-if="!selectedItem"
-        class="flex h-full items-center justify-center text-gray-400"
-      >
-        请先选择左侧列表中的分析任务
-      </div>
-      <template v-else>
-        <div class="flex h-full flex-col gap-4">
-          <!-- 主内容区域：左右结构 -->
-          <div class="flex flex-1 gap-4">
-            <!-- 左侧 -->
-            <div class="flex w-72 flex-col gap-4">
-              <!-- 视频基础信息展示 -->
-              <div
-                class="w-full rounded border bg-white p-4"
-                id="video_base_info"
-              >
+      <!-- 右侧：Tab 内容区 -->
+      <div class="flex flex-1 flex-col overflow-hidden p-6">
+        <div
+          v-if="!selectedItem"
+          class="flex h-full items-center justify-center text-gray-400"
+        >
+          请先选择左侧列表中的分析任务
+        </div>
+        <template v-else>
+          <div class="flex h-full flex-col gap-4">
+            <!-- 主内容区域：左右结构 -->
+            <div class="flex flex-1 gap-4">
+              <!-- 左侧 -->
+              <div class="flex w-72 flex-col gap-4">
+                <!-- 视频基础信息展示 -->
                <div
-                  v-for="(value, key) in showInfoStr"
-                  :key="key"
-                  class="mb-2 flex text-sm text-gray-700"
+                  class="w-full rounded border bg-white p-4"
+                  id="video_base_info"
                >
-                  <div class="w-32 font-medium text-gray-900">{{ key }}：</div>
-                  <div class="flex-1 break-all text-gray-600">
-                    {{ value || '—' }}
+                  <div
+                    v-for="(value, key) in showInfoStr"
+                    :key="key"
+                    class="mb-2 flex text-sm text-gray-700"
+                  >
+                    <div class="w-32 font-medium text-gray-900">
+                      {{ key }}：
+                    </div>
+                    <div class="flex-1 break-all text-gray-600">
+                      {{ value || '—' }}
+                    </div>
                  </div>
                </div>
-              </div>

-              <!-- 下：空白卡片 -->
-              <div class="flex-1 rounded border bg-white p-4">
-                <EchartsUI ref="chartRef2" />
-              </div>
-            </div>
-
-            <!-- 右侧 -->
-            <div class="flex flex-1 flex-col gap-4">
-              <!-- 上：左右两个图片显示 -->
-              <div class="flex flex-1 gap-4">
-                <!-- 左图 -->
-                <div
-                  class="flex flex-1 items-center justify-center rounded border bg-white p-4"
-                >
-                  <img
-                    :src="selectedItem?.image_pre"
-                    alt="左图"
-                    class="object-contain"
-                  />
-                </div>
-                <!-- 右图 -->
-                <div
-                  class="flex flex-1 items-center justify-center rounded border bg-white p-4"
-                >
-                  <img
-                    :src="selectedItem?.image_after"
-                    alt="右图"
-                    class="object-contain"
-                  />
+                <!-- 下：空白卡片 -->
+                <div class="flex-1 rounded border bg-white p-4">
+                  <EchartsUI ref="chartRef2" />
                </div>
              </div>
-              <!-- 下：柱状图区域 -->
-              <div class="flex-1 rounded border bg-white p-4">
-                <EchartsUI ref="chartRef1" />
+
+              <!-- 右侧 -->
+              <div class="flex flex-1 flex-col gap-4">
+                <!-- 上：左右两个图片显示 -->
+                <div class="flex flex-1 gap-4">
+                  <!-- 左图 -->
+                  <div
+                    class="flex flex-1 items-center justify-center rounded border bg-white p-4"
+                  >
+                    <img
+                      :src="selectedItem?.image_pre"
+                      alt="左图"
+                      class="object-contain"
+                    />
+                  </div>
+                  <!-- 右图 -->
+                  <div
+                    class="flex flex-1 items-center justify-center rounded border bg-white p-4"
+                  >
+                    <img
+                      :src="selectedItem?.image_after"
+                      alt="右图"
+                      class="object-contain"
+                    />
+                  </div>
+                </div>
+                <!-- 下：柱状图区域 -->
+                <div class="flex-1 rounded border bg-white p-4">
+                  <EchartsUI ref="chartRef1" />
+                </div>
              </div>
            </div>
          </div>
-        </div>
-      </template>
+        </template>
+      </div>
    </div>
  </div>
 </template>