feat: 新增新标签页、侧边栏页

simply-none · Jun 7, 2024 · 6068fbe · 6068fbe
1 parent 895fd98
commit 6068fbe
Show file tree

Hide file tree

Showing 27 changed files with 1,775 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
   "scripts": {
     "dev": "vite",
     "dev:content": "vite --host --mode content",
+    "dev:newTab": "vite --host --mode newTab",
     "build:content": "vite build src/content --mode content",
     "dev:popup": "vite --host --mode popup",
     "dev:options": "vite --host --mode options",

diff --git a/src/manifest.ts b/src/manifest.ts
@@ -18,6 +18,7 @@ const manifest: chrome.runtime.Manifest = {
     "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
   },
   permissions: [
+    "sidePanel",
     "webNavigation",
     "webRequest",
     "contextMenus", // 右键菜单
@@ -58,11 +59,18 @@ const manifest: chrome.runtime.Manifest = {
   ],
   action: {
     default_popup: 'src/popup/index.html',
+    "default_title": "点击打开侧面板",
   },
   options_ui: {
     page: 'src/options/index.html',
     open_in_tab: false,
   },
+  side_panel: {
+    default_path: 'src/popup/index.html',
+  },
+  chrome_url_overrides: {
+    "newtab": "src/newTab/index.html",
+  },
 }
 
 export default manifest
diff --git a/src/newTab/App.vue b/src/newTab/App.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useRoute, useRouter } 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)
+
+const route = useRoute()
+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')
+  console.log('跳转啊')
+  // name && router.push({
+  //   name: name
+  // })
+})
+
+</script>
+
+<template>
+  <el-config-provider :locale="locale">
+    <router-view v-slot="{ Component }">
+      <component :is="Component" />
+    </router-view>
+  </el-config-provider>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/newTab/assets/Bing.svg b/src/newTab/assets/Bing.svg
diff --git a/src/newTab/assets/DuckDuckGo.svg b/src/newTab/assets/DuckDuckGo.svg
diff --git a/src/newTab/assets/baidu.svg b/src/newTab/assets/baidu.svg
diff --git a/src/newTab/assets/github.svg b/src/newTab/assets/github.svg
diff --git a/src/newTab/assets/google.svg b/src/newTab/assets/google.svg
diff --git a/src/newTab/assets/icon.ico b/src/newTab/assets/icon.ico
diff --git a/src/newTab/assets/sougou.svg b/src/newTab/assets/sougou.svg
diff --git a/src/newTab/assets/zhihu.svg b/src/newTab/assets/zhihu.svg
diff --git a/src/newTab/index.html b/src/newTab/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>词搜 - 背单词</title>
+    <style>
+      html, body, #app {
+        width: 100%;
+        height: 100%;
+        min-width: 765px;
+        min-height: 567px;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/src/newTab/layout/Index.vue b/src/newTab/layout/Index.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-row class="layout-container">
+    <el-col :span="6">
+      <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
+        <el-menu-item :index="route.path" v-for="route in menuRoutes" :key="route.path" @click="getMenuItem">
+          <el-icon><icon-menu /></el-icon>
+          <span>{{ route.label }}</span>
+        </el-menu-item>
+      </el-menu>
+    </el-col>
+    <el-col :span="18">
+      <!-- <slot name="main">
+        主体
+      </slot> -->
+      <router-view v-slot="{ Component }">
+        <component :is="Component" />
+      </router-view>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts" setup>
+import { ElMenu, ElMenuItem, ElCol, ElRow, ElIcon } from 'element-plus';
+import {
+  Document,
+  Menu as IconMenu,
+  Location,
+  Setting,
+} from '@element-plus/icons-vue'
+import { ref } from 'vue'
+import { useRouter, RouterView } from 'vue-router';
+import type { MenuItemRegistered } from 'element-plus'
+
+import { menuRoutes } from '../router';
+
+const router = useRouter()
+
+const getMenuItem = (e: MenuItemRegistered) => {
+  console.log(e, 'e')
+  router.push({
+    path: e.index as string
+  })
+}
+
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+</script>
+
+<style lang="scss" scoped>
+.el-menu {
+  height: 100%;
+}
+
+.layout-container {
+  height: 100%;
+  width: 100%;
+}
+
+.el-row {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: nowrap;
+  position: relative;
+}
+
+.el-col-6 {
+  width: 160px;
+  min-width: 160px;
+  flex: 0;
+}
+
+.el-col-18 {
+  flex: 1;
+  max-width: calc(100% - 160px);
+}
+</style>