From d37541d1add157b57accf041bf4b8d5754278013 Mon Sep 17 00:00:00 2001
From: lizhong <LZ0203162@yeah.net>
Date: Wed, 29 Mar 2023 08:51:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A6=96=E9=A1=B5=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E6=8C=89=E9=92=AE=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=88=B0?=
 =?UTF-8?q?=E7=BF=BB=E8=AF=91=E9=A1=B5=E7=9A=84=E7=99=BB=E5=BD=95=E6=A0=A1?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/inspectionProfiles/Project_Default.xml |  16 +
 .idea/vcs.xml                                |   6 +
 .idea/workspace.xml                          | 152 ++++++
 assets/style/public.scss                     |   3 +
 components/Header/Index.vue                  | 113 +++-
 composables/useUserInfo.ts                   |  22 +-
 layouts/tabLayout.vue                        |  10 +-
 middleware/auth.ts                           |  16 +
 nuxt.config.ts                               |   3 +-
 pages/comment.vue                            |   4 +-
 pages/index.vue                              |  35 +-
 pages/translate.vue                          | 511 +++++++++++--------
 pages/warning.vue                            |   6 +-
 utils/http.ts                                |   1 +
 14 files changed, 625 insertions(+), 273 deletions(-)
 create mode 100644 .idea/inspectionProfiles/Project_Default.xml
 create mode 100644 .idea/vcs.xml
 create mode 100644 .idea/workspace.xml
 create mode 100644 middleware/auth.ts

diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..61743fe
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,16 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myCustomPropertiesEnabled" value="true" />
+      <option name="myIgnoreVendorSpecificProperties" value="false" />
+      <option name="myCustomPropertiesList">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="marginleft" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 0000000..dc3d2aa
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,152 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="dc5c5f4b-3a26-4616-b023-f4f048553ff8" name="Changes" comment="">
+      <change afterPath="$PROJECT_DIR$/middleware/auth.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/style/public.scss" beforeDir="false" afterPath="$PROJECT_DIR$/assets/style/public.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/Header/Index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/components/Header/Index.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/composables/useUserInfo.ts" beforeDir="false" afterPath="$PROJECT_DIR$/composables/useUserInfo.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/layouts/tabLayout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/layouts/tabLayout.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/nuxt.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/nuxt.config.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/comment.vue" beforeDir="false" afterPath="$PROJECT_DIR$/pages/comment.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/pages/index.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/translate.vue" beforeDir="false" afterPath="$PROJECT_DIR$/pages/translate.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/warning.vue" beforeDir="false" afterPath="$PROJECT_DIR$/pages/warning.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/utils/http.ts" beforeDir="false" afterPath="$PROJECT_DIR$/utils/http.ts" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="vue3" />
+        <option value="Vue Single File Component" />
+        <option value="TypeScript File" />
+      </list>
+    </option>
+  </component>
+  <component name="MarkdownSettingsMigration">
+    <option name="stateVersion" value="1" />
+  </component>
+  <component name="ProblemsViewState">
+    <option name="selectedTabId" value="CurrentFile" />
+  </component>
+  <component name="ProjectId" id="2MjTN74LI0n1OsXZwajBOlsAacO" />
+  <component name="ProjectViewState">
+    <option name="autoscrollToSource" value="true" />
+    <option name="compactDirectories" value="true" />
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+    <option name="sortByType" value="true" />
+  </component>
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;WebServerToolWindowFactoryState&quot;: &quot;true&quot;,
+    &quot;WebServerToolWindowPanel.toolwindow.highlight.mappings&quot;: &quot;true&quot;,
+    &quot;WebServerToolWindowPanel.toolwindow.highlight.symlinks&quot;: &quot;true&quot;,
+    &quot;WebServerToolWindowPanel.toolwindow.show.date&quot;: &quot;false&quot;,
+    &quot;WebServerToolWindowPanel.toolwindow.show.permissions&quot;: &quot;false&quot;,
+    &quot;WebServerToolWindowPanel.toolwindow.show.size&quot;: &quot;false&quot;,
+    &quot;last_opened_file_path&quot;: &quot;/Users/lizhong/Desktop/workspace/ReptileFront/reptileFront_nuxt/assets/images&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;yarn&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;reference.settings.ide.settings.file-colors&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;/Applications/WebStorm.app/Contents/plugins/javascript-impl/jsLanguageServicesImpl/external&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  }
+}</component>
+  <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/assets/images" />
+      <recent name="$PROJECT_DIR$/pages" />
+      <recent name="$PROJECT_DIR$/api" />
+      <recent name="$PROJECT_DIR$" />
+      <recent name="$PROJECT_DIR$/src/assets/images" />
+    </key>
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/pages" />
+      <recent name="$PROJECT_DIR$/pages/case" />
+      <recent name="$PROJECT_DIR$/composables" />
+      <recent name="$PROJECT_DIR$" />
+      <recent name="$PROJECT_DIR$/src/assets" />
+    </key>
+  </component>
+  <component name="RunManager" selected="npm.generate">
+    <configuration name="build" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
+      <package-json value="$PROJECT_DIR$/package.json" />
+      <command value="run" />
+      <scripts>
+        <script value="build" />
+      </scripts>
+      <node-interpreter value="project" />
+      <envs />
+      <method v="2" />
+    </configuration>
+    <configuration name="dev" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
+      <package-json value="$PROJECT_DIR$/package.json" />
+      <command value="run" />
+      <scripts>
+        <script value="dev" />
+      </scripts>
+      <node-interpreter value="project" />
+      <envs />
+      <method v="2" />
+    </configuration>
+    <configuration name="generate" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
+      <package-json value="$PROJECT_DIR$/package.json" />
+      <command value="run" />
+      <scripts>
+        <script value="generate" />
+      </scripts>
+      <node-interpreter value="project" />
+      <envs />
+      <method v="2" />
+    </configuration>
+    <recent_temporary>
+      <list>
+        <item itemvalue="npm.generate" />
+        <item itemvalue="npm.dev" />
+        <item itemvalue="npm.build" />
+      </list>
+    </recent_temporary>
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="dc5c5f4b-3a26-4616-b023-f4f048553ff8" name="Changes" comment="" />
+      <created>1678279948733</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1678279948733</updated>
+      <workItem from="1678279949799" duration="13481000" />
+      <workItem from="1678294815425" duration="48333000" />
+      <workItem from="1678438152030" duration="8000" />
+      <workItem from="1678438167690" duration="42000" />
+      <workItem from="1678438231436" duration="25025000" />
+      <workItem from="1678713468939" duration="2210000" />
+      <workItem from="1678803633686" duration="12386000" />
+      <workItem from="1679292964552" duration="641000" />
+      <workItem from="1679313612567" duration="917000" />
+      <workItem from="1679622933773" duration="4483000" />
+      <workItem from="1679887069532" duration="713000" />
+      <workItem from="1679913811172" duration="1597000" />
+      <workItem from="1680008447811" duration="223000" />
+      <workItem from="1680009330616" duration="7707000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/assets/style/public.scss b/assets/style/public.scss
index b113ff0..345bbd3 100644
--- a/assets/style/public.scss
+++ b/assets/style/public.scss
@@ -5,6 +5,9 @@
   margin: 0 auto;
   max-width: 1940px;
 }
+body{
+  overflow-y: hidden;
+}
 
 // =================================
 // ==============scrollbar==========
diff --git a/components/Header/Index.vue b/components/Header/Index.vue
index b59abc0..34e1693 100644
--- a/components/Header/Index.vue
+++ b/components/Header/Index.vue
@@ -4,30 +4,46 @@
     <ApplicationAppLogo/>
     <el-menu
       :default-active="$route.meta.parentPath || $route.path"
-      class="el-menu-demo"
       mode="horizontal"
       :ellipsis="false"
       router
     >
-      <el-menu-item @click="handleChange(item)" v-for="item in routes"  :index="item.path"
+      <el-menu-item @click="handleChange(item)" v-for="item in routes" :index="item.path"
                     :key="item.path">{{ item.name }}
       </el-menu-item>
     </el-menu>
 
-    <div class="login-action-wrap">
+    <div class="login-action-wrap flex items-center">
+      <el-popover popper-class="search-popper" v-if="activeRoute === '/'"  placement="bottom-end" :width="434" trigger="click">
+        <template #reference>
+          <el-icon>
+            <el-icon-search />
+          </el-icon>
+        </template>
+        <div>
+          <el-input
+            v-model="keyword"
+            placeholder="请输入关键字"
+            :suffix-icon="ElIconSearch"
+          />
+        </div>
+      </el-popover>
+      <el-divider v-if="activeRoute === '/'" direction="vertical" style="border-left: 1px solid #000"/>
       <div class="login-btn cursor-pointer" v-if="!token" @click="setLoginVisible(true)">登录</div>
       <el-dropdown popper-class="login-popper" @command="handleCommand" v-else trigger="click">
         <div class="el-dropdown-link text-xl" style="line-height: 100px;">
-      {{ userInfo.mobile }}
-      <el-icon class="el-icon--right"><ElIconCaretBottom/></el-icon>
-    </div>
+          {{ userInfo.mobile }}
+          <el-icon class="el-icon--right">
+            <ElIconCaretBottom/>
+          </el-icon>
+        </div>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item command="0">OCR识别</el-dropdown-item>
-            <el-dropdown-item command="1">优化翻译</el-dropdown-item>
-            <el-dropdown-item command="2">翻译文本</el-dropdown-item>
-            <el-dropdown-item command="3">翻译文件</el-dropdown-item>
-            <el-dropdown-item command="4">退出登录</el-dropdown-item>
+            <el-dropdown-item command="4">OCR识别</el-dropdown-item>
+            <el-dropdown-item command="3">优化翻译</el-dropdown-item>
+            <el-dropdown-item command="1">翻译文本</el-dropdown-item>
+            <el-dropdown-item command="2">翻译文件</el-dropdown-item>
+            <el-dropdown-item command="5">退出登录</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -50,9 +66,9 @@ const store = useAppStore()
 const {setLoginVisible, setInfo, setToken} = useUserInfo()
 const token = computed(() => useUserInfo().$state.token);
 const userInfo = ref()
-
-function handleCommand(command:string) {
-  if (command === '4') {
+const keyword = ref('')
+function handleCommand(command: string) {
+  if (command === '5') {
     ElMessageBox.confirm(
       '确定要退出登录吗？',
       '提示',
@@ -73,11 +89,18 @@ function handleCommand(command:string) {
           message: '已取消退出登录',
         })
       })
+  }else {
+    router.push({
+      path: '/translate',
+      query:{
+        type: command
+      }
+    })
   }
 }
 
 
-watchEffect(()=>{
+watchEffect(() => {
   console.log('useUserInfo().$state.info>>>>>>> header', useUserInfo().$state.info)
   userInfo.value = useUserInfo().$state.info;
 })
@@ -90,9 +113,9 @@ function handleChange(val: any) {
     store.setHomeBanner(false)
   } else {
     store.setMenuTheme('light')
-    if(val.meta.hasOwnProperty('homeBanner') && val.meta.homeBanner){
+    if (val.meta.hasOwnProperty('homeBanner') && val.meta.homeBanner) {
       store.setHomeBanner(true)
-    }else{
+    } else {
       store.setHomeBanner(false)
     }
   }
@@ -105,9 +128,9 @@ watch(() => route, (val) => {
     store.setHomeBanner(false)
   } else {
     store.setMenuTheme('light')
-    if(val.meta.hasOwnProperty('homeBanner') && val.meta.homeBanner){
+    if (val.meta.hasOwnProperty('homeBanner') && val.meta.homeBanner) {
       store.setHomeBanner(true)
-    }else{
+    } else {
       store.setHomeBanner(false)
     }
   }
@@ -129,6 +152,7 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
 
     .el-menu-item {
       border-bottom: unset;
+      padding: 0 17px;
       //font-size: 20px;
       transition: font-size .5s;
       background-color: unset;
@@ -189,9 +213,7 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
   font-weight: 400;
   //@apply ;
 }
-.login-action-wrap {
-  padding-right: 30px;
-}
+
 .is-host {
   * {
     color: $white;
@@ -199,12 +221,15 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
 }
 </style>
 <style lang="scss">
-.login-popper {
+.login-popper.el-dropdown__popper.el-popper {
+  border-radius: 8px;
+  box-shadow: 0 2px 11px 4px rgba(202, 202, 202, 0.5);
 
   .el-dropdown-menu {
-    @apply  shadow-2xl;
+    @apply shadow-2xl;
     padding: 0 0;
   }
+
   .el-dropdown-menu__item {
     width: 176px;
     padding: 20px 0;
@@ -212,7 +237,7 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
     line-height: 1;
     //border-bottom: 1px solid #eee;
     @apply text-base block relative;
-    &:after{
+    &:after {
       content: '';
       position: absolute;
       height: 1px;
@@ -221,9 +246,47 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
       right: 12px;
       bottom: 0;
     }
+
     &:last-of-type:after {
       height: 0;
     }
   }
+
+  .el-popper__arrow {
+    @apply hidden;
+  }
+}
+
+.search-popper.el-popper {
+  margin-top: 20px;
+  padding: 0;
+  background: unset;
+  border-radius: 30px;
+  height: 56px;
+  border: none;
+  .el-popper__arrow {
+    display: none;
+  }
+  .el-input {
+    height: 100%;
+    margin: 0;
+    border-radius: 30px;
+    font-size: 20px;
+  }
+  .el-input__wrapper {
+    padding: 0 30px;
+    height: 56px;
+    border-radius: 30px;
+    border: none;
+    box-shadow: unset;
+    .el-input__inner {
+      height: 56px;
+      box-shadow: unset;
+      line-height: 56px;
+    }
+    .el-icon {
+      color: #134A9B;
+    }
+  }
 }
 </style>
diff --git a/composables/useUserInfo.ts b/composables/useUserInfo.ts
index 6c726d5..aa0ea3e 100644
--- a/composables/useUserInfo.ts
+++ b/composables/useUserInfo.ts
@@ -5,12 +5,14 @@ export interface UserState {
   token: string;
   info: any;
   loginVisible: boolean;
+  redirect: any
 }
 const useUserInfo = defineStore('user', {
   state: (): UserState => ({
     token: '',
     info: {},
     loginVisible: false,
+    redirect: {}
   }),
 
   actions: {
@@ -20,21 +22,26 @@ const useUserInfo = defineStore('user', {
     setInfo(info: any):void {
       this.info = info;
     },
-    setLoginVisible(val: boolean):void {
+    setLoginVisible(val: boolean, redirect?: {} | boolean):void {
       this.loginVisible = val;
+      if (redirect) {
+        this.redirect = redirect;
+      }else {
+        this.redirect = false;
+      }
     },
 
-    async login(data: any, redirect?: string){
+    async login(data: any){
       const { commonApi } = useApi()
       const res = await commonApi.login(data);
-      // this.setInfo(res.data)
-      // this.setToken(res.data.token)
-      // this.setLoginVisible(false)
       this.token = res.data.userinfo.token;
       this.loginVisible = false
       this.info = res.data.userinfo
-      if(redirect) {
-        useRouter().push(redirect)
+      if(this.redirect) {
+        useRouter().push(this.redirect)
+        this.redirect = false;
+      }else {
+        location.reload()
       }
       return res;
     }
@@ -42,6 +49,7 @@ const useUserInfo = defineStore('user', {
   },
   getters:{
     getLoginVisible:(state)=> state.loginVisible,
+    getToken:(state)=> state.token,
   },
   persist: process.client && {
     storage: localStorage,
diff --git a/layouts/tabLayout.vue b/layouts/tabLayout.vue
index 252ef47..ce0ad98 100644
--- a/layouts/tabLayout.vue
+++ b/layouts/tabLayout.vue
@@ -1,8 +1,10 @@
 <template>
   <Header />
-  <BannerSearch v-if="store.getMenuTheme === 'dark'&&store.getHomeBanner == false" />
-  <BannerSimple :title="store.getBannerTitle" v-else-if="store.getMenuTheme === 'light'&&store.getHomeBanner == false" />
-  <BannerHomeBanner v-else></BannerHomeBanner>
+  <template v-if="!route.meta.hiddenBanner">
+    <BannerSearch v-if="store.getMenuTheme === 'dark'&&store.getHomeBanner == false" />
+    <BannerSimple :title="store.getBannerTitle" v-else-if="store.getMenuTheme === 'light'&&store.getHomeBanner == false" />
+    <BannerHomeBanner v-else></BannerHomeBanner>
+  </template>
 <!--  <div :style="`transition:margin .2s;height: 500px;background-color: tan;margin-top: ${store.getMenuTheme === 'dark' ? '-100px': 0}`"></div>-->
   <slot />
   <Footer />
@@ -13,7 +15,7 @@
 <script setup>
 
 const store = useAppStore()
-
+const route = useRoute()
 const loginStatus = ref(useUserInfo().getLoginVisible)
 
 watchEffect(()=>{
diff --git a/middleware/auth.ts b/middleware/auth.ts
new file mode 100644
index 0000000..01fab78
--- /dev/null
+++ b/middleware/auth.ts
@@ -0,0 +1,16 @@
+import {
+  defineNuxtRouteMiddleware,
+  navigateTo,
+} from "#app";
+
+// import useUserStore from "@/store/user.store";
+
+export default defineNuxtRouteMiddleware((to, form) => {
+  const { getToken,setLoginVisible } = useUserInfo();
+  console.log(getToken, 'getToken')
+  if (!getToken) {
+    setLoginVisible(true)
+  }else {
+    setLoginVisible(false)
+  }
+});
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 984f20b..982e09a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -11,7 +11,8 @@ export default defineNuxtConfig({
     '@element-plus/nuxt',
   ],
   plugins:[
-    {src: '~~/plugins/persits', mode: 'client'}
+    {src: '~~/plugins/persits', mode: 'client'},
+    // {src: '~~/plugins/router.js', mode: 'client'},
   ],
   // routeRules: {
   //   "/": { static: true }, // ssr
diff --git a/pages/comment.vue b/pages/comment.vue
index 6a1a473..487131e 100644
--- a/pages/comment.vue
+++ b/pages/comment.vue
@@ -86,7 +86,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {randomUUID} from '~~/utils';
 definePageMeta({
   name: '通报评议',
@@ -147,7 +147,7 @@ console.log('_tabs[0].children[0].id>>>', tabs.value[0].children[0].id);
 
 function handleChange(data) {
   current.value = data;
-  setBannerTitle(data.title);
+  setBannerTitle(data.name);
 }
 
 handleChange(tabs.value[0].children[0]);
diff --git a/pages/index.vue b/pages/index.vue
index 3bb962f..92c38f5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mai-ocr-wrap flex justify-center">
-    <div class="mai-ocr-item flex" @click="goTranslate">智能OCR</div>
-    <div class="mai-ocr-item flex">识别</div>
+    <div class="mai-ocr-item flex cursor-pointer" @click="goTranslate(4)">智能OCR</div>
+    <div class="mai-ocr-item flex cursor-pointer" @click="goTranslate(2)">识别</div>
   </div>
   <div :class="classList.news">
     <CommonTitle title="热门资讯"/>
@@ -141,6 +141,9 @@ definePageMeta({
   homeBanner:true,
   order: 1,
 })
+useHead({
+  title:'首页'
+})
 const hotInformLoading = ref(true)
 const hotTbtLoading = ref(true)
 const hotRuleLoading = ref(true)
@@ -149,9 +152,7 @@ const {prefixCls: prefixNews} = useDesign('news-wrap');
 const {prefixCls: prefixInform} = useDesign('inform-wrap');
 const {prefixCls: prefixRule} = useDesign('rule-wrap');
 const {prefixCls: prefixCase} = useDesign('case-wrap');
-useHead({
-  title:'首页'
-})
+const {getToken, setLoginVisible} = useUserInfo()
 const classList = reactive({
   news: [`${prefixNews} mai-section`],
   inform: [`${prefixInform} mai-section`],
@@ -199,13 +200,23 @@ function changeCurrentData(data: InformationDto) {
   newsHilight.value = Object.assign({}, data);
   newsHilight.value.image = import.meta.env.VITE_GLOB_ORIGIN + newsHilight.value.image
 }
-function goTranslate(){
-  // router.push({
-  //   path:'/translate',
-  //   query:{
-  //     a:1
-  //   }
-  // })
+function goTranslate(type: number){
+  if (!getToken) {
+    setLoginVisible(true, {
+      path:'/translate',
+      query: {
+        type: type
+      }
+    })
+  }else {
+    setLoginVisible(false, false)
+    router.push({
+      path:'/translate',
+      query: {
+        type: type
+      }
+    })
+  }
 }
 getData()
 
diff --git a/pages/translate.vue b/pages/translate.vue
index acd1142..a4dd7e0 100644
--- a/pages/translate.vue
+++ b/pages/translate.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="wrap">
-    <el-radio-group fill="#022950" v-model="radio1">
+    <el-radio-group fill="#022950" v-model="radio1" @change="changeTranslate">
       <el-radio-button :label="1" size="large" @click="reset" border>翻译文本</el-radio-button>
       <el-radio-button :label="2" size="large" @click="reset" border>翻译文件</el-radio-button>
       <el-radio-button :label="3" size="large" @click="reset" border>优化翻译</el-radio-button>
       <el-radio-button :label="4" size="large" @click="reset" border>OCR识别</el-radio-button>
     </el-radio-group>
-    <div class="change-wrap" >
-      <el-select v-model="value" class="m-2" popper-class="popper" @click="selectClick1"  placeholder="请选择语言" size="large">
+    <div class="change-wrap">
+      <el-select v-model="value" class="m-2" popper-class="popper" @click="selectClick1"
+                 placeholder="请选择语言" size="large">
         <el-option
           v-for="item in options"
           :key="item.value"
@@ -15,35 +16,38 @@
           :value="item.value"/>
       </el-select>
       <img src="../assets/images/zhuanhuan.png" alt="">
-      <el-select v-model="value2" class="m-2" popper-class="popper" @click="selectClick2" placeholder="请选择语言" size="large">
+      <el-select v-model="value2" class="m-2" popper-class="popper" @click="selectClick2"
+                 placeholder="请选择语言" size="large">
         <el-option
           v-for="item in options2"
           :key="item.value"
           :label="item.label"
           :value="item.value"/>
       </el-select>
-      <el-button v-if="radio1==1||radio1==3"  @click="translate">翻译</el-button>
-      <el-button v-if="radio1==4||radio1==2"  @click="translate2">识别</el-button>
-      <div class="select_wrap" v-if="xiala" ref="tanchuang1">
+      <el-button v-if="radio1==1||radio1==3" @click="translate">翻译</el-button>
+      <el-button v-if="radio1==4||radio1==2" @click="translate2">识别</el-button>
+      <div class="select_wrap" v-if="currentLangModalStatus" ref="tanchuang1">
         <el-input placeholder="搜索语言"></el-input>
         <div class="hr"></div>
         <div class="language_wrap">
           <el-scrollbar class="scrollbar">
             <div class="language_box" v-for="(value,key,index) in language" :key="index">
-              <div class="firstWord">{{key}}</div>
-              <span class="language" v-for="(item2,index) in value" @click="selectLanguage(item2)" :key="index">{{item2.name}}</span>
+              <div class="firstWord">{{ key }}</div>
+              <span class="language" v-for="(item2,index) in value" @click="selectLanguage(item2)"
+                    :key="index">{{ item2.name }}</span>
             </div>
           </el-scrollbar>
         </div>
       </div>
-      <div class="select_wrap" v-if="xiala2" ref="tanchuang2">
+      <div class="select_wrap" v-if="targetLangModalStatus" ref="tanchuang2">
         <el-input placeholder="搜索语言"></el-input>
         <div class="hr"></div>
         <div class="language_wrap">
           <el-scrollbar class="scrollbar">
             <div class="language_box" v-for="(value,key,index) in language" :key="index">
-              <div class="firstWord">{{key}}</div>
-              <span class="language" v-for="(item2,index) in value" @click="selectLanguage2(item2)" :key="index">{{item2.name}}</span>
+              <div class="firstWord">{{ key }}</div>
+              <span class="language" v-for="(item2,index) in value" @click="selectLanguage2(item2)"
+                    :key="index">{{ item2.name }}</span>
             </div>
           </el-scrollbar>
         </div>
@@ -51,45 +55,46 @@
     </div>
     <div class="import-wrap">
       <div class="importBox1">
-        <span class="importTitle" v-if="radio1==1||radio1==3">{{value||'检测源语言'}}</span>
+        <span class="importTitle" v-if="radio1==1||radio1==3">{{ value || '检测源语言' }}</span>
         <span class="importTitle" v-if="radio1==2||radio1==4">见识别文件</span>
         <el-input
-        v-if="radio1==1||radio1==3"
+          v-if="radio1==1||radio1==3"
           v-model="textarea"
           :rows="2"
           type="textarea"
           placeholder="输入翻译"/>
-          <el-upload
+        <el-upload
           v-if="radio1==2||radio1==4"
           ref="upload"
-            class="upload-demo"
-            drag
-            limit="1"
-            :before-upload="brforeUpload"
-            :on-change="uploadChange"
-            :on-success="uploadSuccess"
-            :on-error="uploadError"
-            action="/api/common/upload">
-            <img style="width:64px;height:64px;marginLeft:45px" src="../assets/images/fileIcon.png" alt="">
-            <div class="el-upload__text">
-              点击文件上传
+          class="upload-demo"
+          drag
+          limit="1"
+          :before-upload="beforeUpload"
+          :on-change="uploadChange"
+          :on-success="uploadSuccess"
+          :on-error="uploadError"
+          action="/api/common/upload">
+          <img style="width:64px;height:64px;marginLeft:45px" src="../assets/images/fileIcon.png"
+               alt="">
+          <div class="el-upload__text">
+            点击文件上传
+          </div>
+          <div class="el-upload__text2">
+            支持扩展名：XML、TXT、DOC、DOCX、PDF或JPG格式
+          </div>
+          <!-- <template #tip>
+            <div class="el-upload__tip">
+              jpg/png files with a size less than 500kb
             </div>
-            <div class="el-upload__text2">
-              支持扩展名：XML、TXT、DOC、DOCX、PDF或JPG格式
-            </div>
-            <!-- <template #tip>
-              <div class="el-upload__tip">
-                jpg/png files with a size less than 500kb
-              </div>
-            </template> -->
-          </el-upload>
+          </template> -->
+        </el-upload>
       </div>
       <!-- <div class="importBox3" v-if="radio1==2||radio1==3">
         <el-button class="button1">英语</el-button>
         <el-button class="button2" @click="translate2">翻译</el-button>
       </div> -->
       <div class="importBox2">
-        <span class="importTitle">{{value2||'英语（美式）'}}</span>
+        <span class="importTitle">{{ value2 || '英语（美式）' }}</span>
         <el-input
           v-model="textarea2"
           :rows="2"
@@ -105,7 +110,8 @@
         <el-row>
           <el-col :span="9">
             <el-form-item label="选择日期">
-              <el-date-picker type="daterange" v-model="searchData.selecttime" placeholder="请选择日期"/>
+              <el-date-picker type="daterange" v-model="searchData.selecttime"
+                              placeholder="请选择日期"/>
             </el-form-item>
           </el-col>
           <el-col :span="9">
@@ -120,7 +126,7 @@
             </el-form-item>
           </el-col>
         </el-row>
-        
+
       </el-form>
       <el-table v-loading="loading" size="large" border :data="content" :empty-text="'暂无数据'"
                 :header-cell-style="{background: '#f5f5f5', color:'#333333'}">
@@ -153,36 +159,45 @@
 </template>
 <script lang="ts" setup>
 import dayjs from "dayjs";
-import { onClickOutside } from "@vueuse/core"
-import { genFileId } from 'element-plus'
+import {onClickOutside} from "@vueuse/core"
+
+definePageMeta({
+  name: '翻译',
+  hidden: true,
+  hiddenBanner: true,
+  middleware: ['auth']
+})
+const {prefixCls} = useDesign('mai-wrap');
+const router = useRouter()
+const route = useRoute()
 
 const {translateApi} = useApi()
 
 const textarea = ref('')
 const textarea2 = ref('')
-const xiala = ref(false)
-const xiala2 = ref(false)
+const currentLangModalStatus = ref(false)
+const targetLangModalStatus = ref(false)
 // const textarea2 = ref('')
-const radio1 = ref(1)
+const radio1 = ref(route.query?.type ?? 1)
 const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 6, 0)
 const currentTab = ref({});
 let language = reactive({})
 
 const options = reactive([
-  {value:'zh',lable:'中文（简体）'},
-  {value:"en",lable:'英文'},
+  {value: 'zh', lable: '中文（简体）'},
+  {value: "en", lable: '英文'},
 ])
 const options2 = reactive([
-  {value:'zh',lable:'中文（简体）'},
-  {value:"en",lable:'英文'},
+  {value: 'zh', lable: '中文（简体）'},
+  {value: "en", lable: '英文'},
 ])
 const value2 = ref('')
 const value = ref('')
 const abbreviation1 = ref('')
 const abbreviation2 = ref('en')
 const searchData = ref({
-  selecttime:'',
-  name:''
+  selecttime: '',
+  name: ''
 })
 const loading = ref(true);
 const content = ref([]);
@@ -192,57 +207,50 @@ const upload = ref()
 const fileUrl = ref('')
 
 
-definePageMeta({
-  name: '翻译',
-  hidden:true,
-  // headerHost: false,
-  // homeBanner:true,
-  // order: 1,
+watchEffect(()=>{
+  radio1.value = route.query?.type ?? 1;
 })
-//   const props = defineProps(['title']);
-  const {prefixCls} = useDesign('mai-wrap');
-
-// watch(radio1, ()=>{
-//   value.value = ''
-//   value2.value = ''
-//   abbreviation1.value = ''
-//   abbreviation2.value = ''
-//   textarea.value = ''
-//   textarea2.value = ''
-  
-// })
-function brforeUpload(file:any){
+
+function changeTranslate(val: any){
+  router.replace({
+    path:route.path,
+    query: {
+      type: val
+    }
+  })
+}
+function beforeUpload(file: any) {
   console.log(file)
 
 }
-function uploadChange(){
-  
+
+function uploadChange() {
+
 }
-function uploadSuccess(response:any){
+
+function uploadSuccess(response: any) {
   ElMessage.success(response.msg)
   console.log(typeof response.data.url)
   fileUrl.value = response.data.url
 }
-function uploadError(response:any){
+
+function uploadError(response: any) {
   ElMessage.error(response.msg)
 }
-// function handleExceed(files:any){
-//   upload.value!.clearFiles()
-//   const file = files[0]
-//   file.uid = genFileId()
-//   upload.value!.handleStart(file)
-// }
+
 function resetData(flag: boolean = true) {
   searchData.value = {
-    selecttime:'',
-    name:''
+    selecttime: '',
+    name: ''
   }
   flag && getList(currentTab.value)
 }
-function goYouHua(){
+
+function goYouHua() {
   radio1.value = 3
 }
-function reset(){
+
+function reset() {
   value.value = ''
   value2.value = ''
   abbreviation1.value = ''
@@ -250,6 +258,7 @@ function reset(){
   textarea.value = ''
   textarea2.value = ''
 }
+
 function onChangePage(val: number) {
   setCurrentPage(val)
   getList(currentTab.value)
@@ -257,49 +266,64 @@ function onChangePage(val: number) {
 
 function selectClick1() {
   // debugger
-  xiala.value = !xiala.value
+  currentLangModalStatus.value = !currentLangModalStatus.value
 }
 
 function selectClick2() {
-  xiala2.value = !xiala2.value
+  targetLangModalStatus.value = !targetLangModalStatus.value
 }
-function selectLanguage(item:any) {
+
+function selectLanguage(item: any) {
   console.log(item)
-  if(xiala.value){
+  if (currentLangModalStatus.value) {
     value.value = item.name
     abbreviation1.value = item.abbreviation
-    xiala.value = false
+    currentLangModalStatus.value = false
   }
 }
-function selectLanguage2(item:any) {
+
+function selectLanguage2(item: any) {
   console.log(item)
-  if(xiala2.value){
+  if (targetLangModalStatus.value) {
     value2.value = item.name
     abbreviation2.value = item.abbreviation
-    xiala2.value = false
+    targetLangModalStatus.value = false
   }
-  
-  
+
+
 }
 
 async function translate() {
-  if(radio1.value==1){
-    const {data:data} = await translateApi.translateText({content:textarea.value,source:abbreviation1.value,target:abbreviation2.value})
+  if (radio1.value == 1) {
+    const {data: data} = await translateApi.translateText({
+      content: textarea.value,
+      source: abbreviation1.value,
+      target: abbreviation2.value
+    })
     textarea2.value = data
   }
-  if(radio1.value==3){
-    const {data:data} = await translateApi.translateOptimizeText({content:textarea.value,source:abbreviation1.value,target:abbreviation2.value})
+  if (radio1.value == 3) {
+    const {data: data} = await translateApi.translateOptimizeText({
+      content: textarea.value,
+      source: abbreviation1.value,
+      target: abbreviation2.value
+    })
     textarea2.value = data
   }
-  // console.log(data)
 }
+
 async function translate2() {
-  const {data:data} = await translateApi.translateFile({file:fileUrl.value,source:abbreviation1.value,target:abbreviation2.value})
+  const {data: data} = await translateApi.translateFile({
+    file: fileUrl.value,
+    source: abbreviation1.value,
+    target: abbreviation2.value
+  })
   // console.log(data)
   // textarea2.value = data
 }
+
 async function allLanguage() {
-  const {data:data} = await translateApi.getAllLanguage({})
+  const {data: data} = await translateApi.getAllLanguage({})
   language = data
 }
 
@@ -308,9 +332,9 @@ async function getList(data: any) {
     loading.value = true;
     const searchParams = {
       ...searchData.value,
-      start_date:'',
+      start_date: '',
       end_date: '',
-      type:0
+      type: 0
     }
     if (searchData.value.selecttime) {
       searchParams.start_date = dayjs(searchData.value.selecttime[1]).format('YYYY-DD-MM hh:mm:ss')
@@ -318,7 +342,7 @@ async function getList(data: any) {
       // @ts-ignore
       delete searchParams.selecttime;
     }
-    searchParams.type = radio1.value
+    searchParams.type = radio1.value as number
     const {data: listDatas} = await translateApi.getTranslateList({
       ...searchParams,
       page: current.value,
@@ -331,73 +355,82 @@ async function getList(data: any) {
   }
 }
 
-  onClickOutside(tanchuang1, ()=>{
-        xiala.value = false
+onClickOutside(tanchuang1, () => {
+  currentLangModalStatus.value = false
 
-  })
-  onClickOutside(tanchuang2, ()=>{
-    xiala2.value = false
-  })
-  getList(currentTab.value)
-  allLanguage()
+})
+onClickOutside(tanchuang2, () => {
+  targetLangModalStatus.value = false
+})
+getList(currentTab.value)
+allLanguage()
 </script>
 <style lang="scss">
-.popper{
+.popper {
   display: none !important;
 }
 </style>
 <style lang="scss" scoped>
-.wrap{
-  padding: 0 244px;
+* {
+  --el-color-primary: #022950
+}
+.wrap {
+  padding: 0 244px 50px 244px;
   background-color: #EEF1F9;
-  padding-bottom: 50px;
 }
-.el-radio-group{
+
+.el-radio-group {
   margin-top: 42px;
   margin-bottom: 76px;
 }
-.el-radio-button{
+
+.el-radio-button {
   border-radius: 16px;
-  margin-right:12px ;
+  margin-right: 12px;
   border: 0px;
   outline: none;
   width: 218px;
   height: 61px;
 }
-::v-deep .el-radio-button__inner{
-    width: 218px;
-    height: 61px;
-    border: 0px;
-    outline: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 20px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #333333;
-    border-radius: 16px !important;
-    
-  }
-::v-deep .el-input__wrapper{
-    width: 218px;
-    height: 61px;
-    background: #FFFFFF;
-    border-radius: 16px;
-    border-color:#ffffff ;
+
+:deep(.el-radio-button__inner) {
+  width: 218px;
+  height: 61px;
+  border: 0px;
+  outline: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  font-weight: 400;
+  color: #333333;
+  border-radius: 16px !important;
+
 }
-::v-deep .el-input__inner{
-  text-align: center;
+
+:deep(.el-input__wrapper) {
+  width: 218px;
+  height: 61px;
+  background: #FFFFFF;
+  border-radius: 16px;
+  border-color: #ffffff;
 }
-.change-wrap{
+
+:deep(.el-input__inner) {
+  //text-align: center;
+}
+
+.change-wrap {
   display: flex;
   align-items: center;
   margin-bottom: 24px;
   position: relative;
-  ::v-deep .el-input__wrapper{
+
+  :deep(.el-input__wrapper) {
     font-size: 20px !important;
   }
-  .el-button{
+
+  .el-button {
     width: 218px;
     height: 61px;
     background: #022950;
@@ -406,13 +439,15 @@ async function getList(data: any) {
     font-size: 20px;
     margin-left: 24px;
   }
-  img{
+
+  img {
     width: 55px;
     height: 44px;
     margin: 0 28px 0 34px;
   }
 }
-::v-deep .el-textarea__inner{
+
+:deep(.el-textarea__inner) {
   width: 100%;
   height: 239px;
   border-radius: 16px;
@@ -420,63 +455,73 @@ async function getList(data: any) {
   padding-top: 17px;
   padding-left: 37px;
 }
-.el-textarea{
+
+.el-textarea {
   border-radius: 16px;
   margin-top: 17px;
   font-size: 36px;
 }
-.import-wrap{
+
+.import-wrap {
   display: flex;
   justify-content: center;
   // align-items: center;
-  .importBox1{
+  .importBox1 {
     flex: 1;
     margin-right: 32px;
   }
-  .importBox3{
+
+  .importBox3 {
     flex: 0.25;
     margin-right: 22px;
-    .el-button{
+
+    .el-button {
       width: 150px;
       height: 55px;
       margin: 0;
       border-radius: 8px;
       font-size: 20px;
     }
-    .button1{
+
+    .button1 {
       margin-bottom: 24px;
       color: #BABABA;
       background-color: #fff;
 
     }
-    .button2{
+
+    .button2 {
       color: #fff;
       background-color: #022950;
     }
   }
-  .importBox2{
+
+  .importBox2 {
     flex: 1;
   }
 }
-.importTitle{
+
+.importTitle {
   width: 120px;
-height: 28px;
-font-size: 20px;
-font-family: PingFangSC-Regular, PingFang SC;
-font-weight: 400;
-color: #333333;
-line-height: 28px;
-margin-left: 10px;
-}
-.el-select{
+  height: 28px;
+  font-size: 20px;
+  font-weight: 400;
+  color: #333333;
+  line-height: 28px;
+  margin-left: 10px;
+}
+
+.el-select {
   margin: 0;
 }
-.jilu-wrap{
+
+.jilu-wrap {
   display: flex;
   justify-content: space-between;
   font-size: 20px;
   margin-top: 30px;
-  .jilu{
+
+  .jilu {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -485,47 +530,56 @@ margin-left: 10px;
     background: #E8EBF5;
     border-radius: 16px;
     color: #333333;
-    img{
+
+    img {
       width: 20px;
       height: 20px;
       margin-right: 12px;
     }
   }
-  .first{
+
+  .first {
     color: #E60B0B;
     cursor: pointer;
   }
 }
-.yangliu-mai-wrap-content{
+
+.yangliu-mai-wrap-content {
   margin: 30px 0 0 0;
   width: 100%;
 }
+
 // .dynamicInfo {
 //   margin-top: 0;
 //   padding-bottom: 100px;
 // }
-::v-deep .el-table__inner-wrapper{
+:deep(.el-table__inner-wrapper) {
   font-size: 20px;
 
-  }
-::v-deep .el-table__header-wrapper{
+}
+
+:deep(.el-table__header-wrapper) {
   height: 80px;
 }
-::v-deep .el-table__header{
+
+:deep(.el-table__header) {
   height: 80px;
 }
-::v-deep .el-table__empty-block{
+
+:deep(.el-table__empty-block) {
   height: 300px !important;
 }
+
 :deep(.el-form) {
   margin-bottom: 43px;
+
   .el-form-item__label {
     height: 60px;
     line-height: 60px !important;
     padding-right: 16px;
     @apply text-xl;
   }
-  
+
   .el-input__wrapper {
     border-radius: 10px;
     height: 60px;
@@ -534,106 +588,120 @@ margin-left: 10px;
     background-color: #ffffff;
     @apply text-xl;
   }
+
   .el-icon {
     font-size: 20px;
   }
+
   .el-range-input {
     font-size: 20px;
   }
+
   .el-button {
     width: 150px;
     height: 60px;
     box-shadow: unset;
     @apply text-xl rounded-xl;
-    &--primary{
+    &--primary {
 
       background-color: #022950;
     }
   }
 }
-::v-deep .el-upload{
+
+:deep(.el-upload) {
   margin-top: 17px;
-border-radius: 16px;
+  border-radius: 16px;
 }
-::v-deep .el-upload-dragger{
+
+:deep(.el-upload-dragger) {
   height: 239px;
-border-radius: 16px;
+  border-radius: 16px;
 }
-::v-deep .el-upload{
+
+:deep(.el-upload) {
   height: 239px;
-border-radius: 16px;
-}
-.el-upload__text{
-font-size: 16px;
-font-family: PingFangSC-Semibold, PingFang SC;
-font-weight: 600;
-color: #333333;
-line-height: 22px;
-margin-bottom: 49px;
-display: flex;
-justify-content: center;
-align-items: center;
-}
-.el-upload__text2{
-font-size: 14px;
-font-family: PingFangSC-Regular, PingFang SC;
-font-weight: 400;
-color: #999999;
-line-height: 20px;
-display: flex;
-justify-content: center;
-align-items: center;
-}
-::v-deep .el-table__cell {
-    padding: 26px 0 !important;
-}
-.select_wrap{
+  border-radius: 16px;
+}
+
+.el-upload__text {
+  font-size: 16px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #333333;
+  line-height: 22px;
+  margin-bottom: 49px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.el-upload__text2 {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #999999;
+  line-height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+:deep(.el-table__cell) {
+  padding: 26px 0 !important;
+}
+
+.select_wrap {
   width: 100%;
   // width: 1436px;
   padding-left: 32px;
   padding-right: 40px;
   height: 774px;
   background: #FFFFFF;
-  box-shadow: 0px 0px 22px 7px rgba(224,224,224,0.5);
+  box-shadow: 0px 0px 22px 7px rgba(224, 224, 224, 0.5);
   border-radius: 16px;
   position: absolute;
   top: 65px;
   left: 0;
   z-index: 100;
-  ::v-deep .el-input__inner {
+
+  :deep(.el-input__inner) {
     text-align: left;
     font-size: 24px;
-    font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
     color: #CACACA;
   }
-  .hr{
+
+  .hr {
     width: 100%;
     height: 1px;
     background: #D8D8D8;
   }
-  .scrollbar{
-    ::v-deep .el-scrollbar__bar{
+
+  .scrollbar {
+    :deep(.el-scrollbar__bar) {
       width: 13px !important;
       border-radius: 6.5px !important;
     }
   }
-  .language_wrap{
+
+  .language_wrap {
     height: 698px;
     overflow-y: auto;
     padding-bottom: 64px;
-    .language_box{
+
+    .language_box {
       padding: 0 5px;
-      .firstWord{
+
+      .firstWord {
         font-size: 18px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #999999;
         margin-top: 24px;
       }
-      .language{
+
+      .language {
         font-size: 20px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #333333;
         margin-top: 20px;
@@ -644,10 +712,11 @@ align-items: center;
     }
   }
 }
-::v-deep .el-input__wrapper {
+
+:deep(.el-input__wrapper) {
   border: none !important;
   box-shadow: none !important;
   // padding: 0px; //前边边距去掉
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/warning.vue b/pages/warning.vue
index cb5856d..ad77ebd 100644
--- a/pages/warning.vue
+++ b/pages/warning.vue
@@ -35,6 +35,7 @@
         :pages="pagesRef"
         @change="onChangePage"
       />
+<!--      OnCl-->
     </div>
   </div>
 </template>
@@ -43,7 +44,7 @@
 
 import dayjs from "dayjs";
 import {randomUUID} from '~~/utils';
-
+import {onClickOutside} from "@vueuse/core";
 definePageMeta({
   name: '预警信息',
   headerHost: true,
@@ -53,6 +54,9 @@ useHead({
   title:'预警信息'
 })
 
+onClickOutside(ref, ()=>{
+
+})
 const { warningApi } = useApi()
 const {prefixCls} = useDesign('mai-wrap');
 const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 4, 0)
diff --git a/utils/http.ts b/utils/http.ts
index 862ba2d..5a8dce6 100644
--- a/utils/http.ts
+++ b/utils/http.ts
@@ -27,6 +27,7 @@ function transform(error: any) {
   }
 }
 
+console.log($fetch)
 /**
  * api请求封装
  * @param { String } url 请求地址