feat: 完善新标签页

preScript.cjs

@@ -51,4 +51,4 @@ function clearDir(path) {
 }
 
 clearDir('./dist')
-clearDir('./public/assets/content')
+// clearDir('./public/assets/content')

src/newTab/App.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter, RouterView } from 'vue-router';
 import { onMounted, computed, watch, ref } from 'vue';
 import { ElConfigProvider } from 'element-plus';
 
-import Layout from './layout/Index.vue'
-
 import zhCn from 'element-plus/es/locale/lang/zh-cn.mjs'
 
 const locale = computed(() => zhCn)
@@ -15,11 +13,11 @@ const router = useRouter()
 onMounted(() => {
   console.log(route, route.query, 'route')
   console.log(import.meta.env, 'import.meta')
-  // const name = route.query.name as string || (import.meta.env.DEV ? 'learn' : 'Home')
+  const name = route.query.name as string || (import.meta.env.DEV ? 'Home' : 'Home')
   console.log('跳转啊')
-  // name && router.push({
-  //   name: name
-  // })
+  name && router.push({
+    name: name
+  })
 })
 
 </script>

src/newTab/index.html

@@ -4,13 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/icon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>词搜 - 背单词</title>
+    <title>新标签页</title>
     <style>
       html, body, #app {
         width: 100%;
         height: 100%;
-        min-width: 765px;
-        min-height: 567px;
         margin: 0;
       }
     </style>

src/newTab/router/index.ts

@@ -1,5 +1,4 @@
 
-import { children } from 'node_modules/cheerio/lib/api/traversing'
 import { createRouter, createWebHistory } from 'vue-router'
 
 export const menuRoutes = [

src/newTab/views/home/Index.vue

@@ -1,15 +1,17 @@
 <template>
-  <div class="jq-nt-home" @keyup.enter="toTarget">
-    <el-image class="jq-nt-home-ico" src="../../assets/icon.ico" />
+  <div class="jq-nt-home" @keyup.enter="toTarget" @click="inputFocus">
+    <el-image class="jq-nt-home-ico" :src="icon" />
     <el-input ref="inputRef" v-model="keyword" placeholder="请输入关键字" class="jq-nt-home-search">
       <template #prepend>
-        <el-select v-model="select" placeholder="" style="width: 115px" value-key="label">
-          <template slot="prefix">
-            <el-image :src="select.icon"/>
-          </template>
-          <el-option v-for="item in searchOptions" :key="item.label" :label="item.label" :value="item">
-            <el-image :src="item.icon" slot="label"/>
+        <el-select v-model="select" placeholder="" style="width: 115px" value-key="icon"
+          popper-class="jq-nt-home-select-ops">
+
+          <el-option v-for="item in searchOptions" :key="item.label" :value="item">
+            <el-image :src="item.icon" slot="label" />
           </el-option>
+          <template #prefix>
+            <el-image :src="select.icon" />
+          </template>
         </el-select>
       </template>
       <template #append>
@@ -20,9 +22,21 @@
 </template>
 
 <script setup lang="ts">
+import icon from 'public/icon.ico'
+import googleSvg from '../../assets/google.svg?url'
+import baiduSvg from '../../assets/baidu.svg?url'
+import bingSvg from '../../assets/Bing.svg?url'
+import sougouSvg from '../../assets/sougou.svg?url'
+import zhihuSvg from '../../assets/zhihu.svg?url'
+import githubSvg from '../../assets/github.svg?url'
+import duckgoSvg from '../../assets/DuckDuckGo.svg?url'
+import three60Svg from '../../assets/360so.svg?url'
+import yandexSvg from '../../assets/yandex.svg?url'
+
 import { Ref, nextTick, onMounted, ref, watch } from 'vue'
 import { ElInput } from 'element-plus'
 import { Search } from '@element-plus/icons-vue'
+import { getLocalStorage, setLocalStorage } from '@/utils/storage'
 
 interface SearchOption {
   label: string;
@@ -33,66 +47,96 @@ interface SearchOption {
 const searchOptions: Ref<SearchOption[]> = ref([
   {
     label: '谷歌',
-    icon: '../../assets/google.svg',
+    icon: googleSvg,
     searchPrefix: 'https://www.google.com/search?q=',
   },
   {
     label: '百度',
-    icon: '../../assets/baidu.svg',
+    icon: baiduSvg,
     searchPrefix: 'https://www.baidu.com/s?wd=',
   },
   {
     label: '必应',
-    icon: '../../assets/Bing.svg',
+    icon: bingSvg,
     searchPrefix: 'https://cn.bing.com/search?q=',
   },
   {
     label: '搜狗',
-      icon: '../../assets/sougou.svg',
+    icon: sougouSvg,
     searchPrefix: 'https://www.sogou.com/web?query=',
   },
+  {
+    label: '360',
+    icon: three60Svg,
+    searchPrefix: 'https://www.so.com/s?ie=utf-8&q=',
+  },
   {
     label: '知乎',
-    icon: '../../assets/zhihu.svg',
+    icon: zhihuSvg,
     searchPrefix: 'https://www.zhihu.com/search?type=content&q=',
   },
   {
     label: 'Github',
-    icon: '../../assets/github.svg',
+    icon: githubSvg,
     searchPrefix: 'https://github.com/search?q=',
   },
   {
     label: 'Duckduckgo',
-    icon: '../../assets/DuckDuckGo.svg',
+    icon: duckgoSvg,
     searchPrefix: 'https://duckduckgo.com/?q=',
+  },
+  {
+    label: 'Yandex',
+    icon: yandexSvg,
+    searchPrefix: 'https://yandex.com/search/?text=',
   }
 ])
 
 const inputRef: Ref<InstanceType<typeof ElInput> | undefined> = ref()
 
-const input1 = ref('')
-const input2 = ref('')
 const keyword = ref('')
 const select: Ref<SearchOption> = ref(searchOptions.value[0])
 
-watch(select, (val) => {
-  console.log(val, 'keyword')
-  console.log(inputRef.value)
+const newTabPrefix = 'newTab:'
 
+const getSelectSearch = async () => {
+  let selectSearch = ''
+  const items = await getLocalStorage(newTabPrefix + 'selectSeach')
+  if (items) {
+    selectSearch = items[newTabPrefix + 'selectSeach']
+  }
+  select.value = searchOptions.value.find(item => item.label === selectSearch) || searchOptions.value[0]
+}
+
+const setSelectSearch = () => {
+  setLocalStorage({
+    [newTabPrefix + 'selectSeach']: select.value.label
+  })
+}
+
+watch(select, (val) => {
+  if (!val) {
+    return false
+  }
+  inputRef.value?.focus()
+  setSelectSearch()
 })
 
+
+
 const inputFocus = async () => {
   await nextTick()
   inputRef.value?.focus()
   console.log(inputRef)
 }
 
 onMounted(async () => {
+  // await必须在函数内才有效，直接定义在onMounted内无效
   inputFocus()
+  getSelectSearch()
 })
 
 const toTarget = () => {
-  console.log('hhhh')
   window.open(select.value.searchPrefix + keyword.value)
 }
 
@@ -127,12 +171,57 @@ const toTarget = () => {
 
       &__wrapper {
         height: 100%;
+        display: flex;
+        justify-content: center;
+
+        .el-select__selection {
+          display: none;
+        }
+
+        .el-select__suffix {
+          display: none;
+        }
+
+        .el-image {
+          width: 32px;
+        }
       }
     }
 
     .el-input-group__append {
       width: 2em;
+
+      .el-icon {
+        width: 2em;
+
+        svg {
+          height: 2em;
+          width: 2em;
+        }
+      }
     }
   }
 }
+
+:global(.el-popper.jq-nt-home-select-ops) {
+  color: red;
+  width: 6em;
+  // display: block !important;
+}
+
+:global(.el-select-dropdown.jq-nt-home-select-ops) {
+  min-width: 6em !important;
+
+}
+
+:global(.el-popper.jq-nt-home-select-ops .el-image) {
+  width: 20px;
+}
+
+:global(.el-popper.jq-nt-home-select-ops .el-select-dropdown__item) {
+  display: flex;
+  padding: 0;
+  align-content: center;
+  justify-content: center;
+}
 </style>