1

src/entrypoints/options/style.css

@@ -79,7 +79,8 @@ button:focus-visible {
 }
 
 #app {
-  /* max-width: 1280px; */
+  margin: auto;
+  max-width: 1280px;
   width: 100%;
   height: 100vh;
 }

src/entrypoints/sidepanel/main.ts

@@ -1,15 +1,17 @@
-import {createApp} from 'vue';
-import './style.css';
-import App from './App.vue';
-import '@/../node_modules/element-plus/dist/index.css'
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import locale from 'element-plus/es/locale/lang/zh-cn'; // 中文语言
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import { createApp } from "vue";
+import "./style.css";
+import App from "./App.vue";
+import "@/../node_modules/element-plus/dist/index.css";
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import locale from "element-plus/es/locale/lang/zh-cn"; // 中文语言
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 
-const app = createApp(App).use(ElementPlus, {locale: locale, size: 'small'});
+const app = createApp(App);
+app.use(ElementPlus, { locale: locale, size: "small" });
+app.use(store);
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-    app.component(key, component)
+  app.component(key, component);
 }
 
-app.mount('#app')
+app.mount("#app");

src/entrypoints/sidepanel/style.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -20,68 +24,21 @@
   box-sizing: border-box;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: #535bf2;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
+html,body {
+  height: 100%;
   min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-
-button:hover {
-  border-color: #646cff;
-}
-
-/* button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-} */
-
-.card {
-  padding: 2em;
+  min-height: 100%;
+  /*background-color: #ffffff;*/
+  background-color: #F6F6F8;
+  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 }
 
 #app {
+  margin: auto;
   max-width: 1280px;
   width: 100%;
-  height: 100vh;
+  height: 100%;
+  padding: 4px;
 }
 
 /* 自定义滚动条样式 */
@@ -122,12 +79,4 @@ pre::-webkit-scrollbar-thumb:hover {
     color: #213547;
     background-color: #ffffff;
   }
-
-  a:hover {
-    color: #747bff;
-  }
-
-  button {
-    background-color: #f9f9f9;
-  }
 }