✨ 修改插件runner为browserview

feature/src/App.vue

@@ -1,28 +1,32 @@
 <template>
   <div class="main-container">
     <div class="slider-bar">
-      <div class="top">
-        <div class="menu-item avatar">
-          <a-avatar shape="square" :size="30">
-            <template #icon><UserOutlined /></template>
-          </a-avatar>
-        </div>
-        <div class="menu-item" @click="changeMenu('market')">
-          <AppstoreOutlined :class="active === 'market' && 'active'" style="font-size: 24px;" />
-        </div>
-        <div class="menu-item" @click="changeMenu('installed')">
-          <HeartOutlined :class="active === 'installed' && 'active'" style="font-size: 24px;" />
-        </div>
-        <div class="menu-item" @click="changeMenu('settings')">
-          <SettingOutlined :class="active === 'installed' && 'active'" style="font-size: 24px;" />
-        </div>
-        <div class="menu-item" @click="changeMenu('dev')">
-          <BugOutlined :class="active === 'installed' && 'active'" style="font-size: 24px;" />
-        </div>
-      </div>
-      <div class="menu-item bottom" @click="changeMenu('more')">
-        <MenuOutlined style="font-size: 24px;" />
-      </div>
+      <a-menu v-model:selectedKeys="active" mode="horizontal" @select="({key}) => changeMenu(key)">
+        <a-menu-item key="market">
+          <template #icon>
+            <AppstoreOutlined />
+          </template>
+          插件市场
+        </a-menu-item>
+        <a-menu-item key="installed">
+          <template #icon>
+            <HeartOutlined />
+          </template>
+          已安装
+        </a-menu-item>
+        <a-menu-item key="settings">
+          <template #icon>
+            <SettingOutlined />
+          </template>
+          设置
+        </a-menu-item>
+        <a-menu-item key="user">
+          <template #icon>
+            <UserOutlined />
+          </template>
+          账户
+        </a-menu-item>
+      </a-menu>
     </div>
     <router-view />
   </div>
@@ -30,10 +34,23 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { HeartOutlined, UserOutlined, SearchOutlined, MenuOutlined, AppstoreOutlined, SettingOutlined, BugOutlined } from "@ant-design/icons-vue";
-
-const active = ref("market");
+import { useRouter } from "vue-router";
+import {
+  HeartOutlined,
+  UserOutlined,
+  AppstoreOutlined,
+  SettingOutlined,
+} from "@ant-design/icons-vue";
+import { useStore } from "vuex";
+const router = useRouter();
+const active = ref(["market"]);
+const changeMenu = (key: any) => {
+  router.push(key);
+};
 
+const store = useStore();
+const init = () => store.dispatch("init");
+init();
 </script>
 <style lang="less">
 * {
@@ -45,43 +62,10 @@ const active = ref("market");
   display: flex;
   align-items: flex-start;
   background: #F2EFEF;
+  flex-direction: column;
 
   .slider-bar {
-    -webkit-app-region: drag;
-    width: 60px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: column;
-    padding-top: 15px;
-    height: 100vh;
-    background-image: linear-gradient(to top right, rgba(255, 159, 180, 0.3), rgba(255, 159, 180, 0.2));
-    color: #7D7170;
-    box-sizing: border-box;
-
-    .top {
-      display: flex;
-      align-items: center;
-      flex-direction: column;
-    }
-
-    .menu-item {
-      cursor: pointer;
-      margin-bottom: 40px;
-      -webkit-app-region: no-drag;
-
-      .active {
-        color: #ff4ea4;
-      }
-
-      &.avatar {
-        margin-bottom: 30px;
-      }
-
-      &.bottom {
-        margin-bottom: 20px;
-      }
-    }
+    width: 100%;
   }
 }
 </style>