✨ 修改插件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>

feature/src/router/index.ts

@@ -1,12 +1,23 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
 import Market from "../views/market/index.vue";
+import Installed from "../views/installed/index.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
-    path: "/",
-    name: "Market",
+    path: "/market",
+    name: "market",
     component: Market,
-  }
+  },
+  {
+    path: "/installed",
+    name: "installed",
+    component: Installed,
+  },
+  {
+    path: "/:catchAll(.*)",
+    name: "market",
+    component: Market,
+  },
 ];
 
 const router = createRouter({

feature/src/store/index.ts

@@ -35,7 +35,6 @@ export default createStore({
           origin.isloading = false;
         }
       );
-
       commit("commonUpdate", {
         localPlugins,
         totalPlugins,
@@ -64,8 +63,17 @@ export default createStore({
           }
         }
       );
+      const localPlugins = (window as any).rubick.getLocalPlugins();
+
       commit("commonUpdate", {
         totalPlugins,
+        localPlugins,
+      });
+    },
+    updateLocalPlugin({ commit }) {
+      const localPlugins = (window as any).rubick.getLocalPlugins();
+      commit("commonUpdate", {
+        localPlugins,
       });
     },
   },

feature/src/views/installed/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="installed">
+    <div class="installed-list">
+      <div :class="currentSelect === index ? 'item active' : 'item'" :key="index" v-for="(plugin, index) in localPlugins">
+        <img :src="plugin.logo" />
+        <div class="info">
+          <div class="title">{{ plugin.pluginName }} <span class="desc">v{{ plugin.version }}</span></div>
+          <div class="desc">{{ plugin.description }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="plugin-detail">
+      <div class="plugin-top">
+        <div class="left">
+          <div class="title">
+            {{ pluginDetail.pluginName }}
+            <a-tag>{{ pluginDetail.version }}</a-tag>
+          </div>
+          <div class="desc">
+            开发者：{{`${pluginDetail.author || '未知'}`}}
+          </div>
+          <div class="desc">
+            {{pluginDetail.description}}
+          </div>
+        </div>
+        <div class="right">
+          <a-button type="danger" size="small" shape="round" @click="deletePlugin(pluginDetail)">移除</a-button>
+        </div>
+      </div>
+      <a-tabs default-active-key="1">
+        <a-tab-pane key="1" tab="功能关键字">
+          <div class="feature-container">
+            <div class="desc-item" :key="index" v-for="(item, index) in pluginDetail.features">
+              <div>{{item.explain}}</div>
+              <a-tag
+                :key="cmd"
+                @click="openPlugin({cmd, plugin: pluginDetail, feature: item, router: $router})"
+                v-for="cmd in item.cmds"
+              >
+                {{cmd}}
+              </a-tag>
+            </div>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="详情介绍">
+          <div class="detail-container" v-html="readme"></div>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useStore } from "vuex";
+import { computed, ref } from "vue";
+import path from "path";
+import MarkdownIt from "markdown-it";
+
+const { remote } = window.require("electron");
+const fs = window.require("fs");
+const md = new MarkdownIt();
+
+const appPath = remote.app.getPath("cache");
+const baseDir = path.join(appPath, "./rubick-plugins");
+
+const store = useStore();
+const localPlugins = computed(() => store.state.localPlugins);
+const updateLocalPlugin = () => store.dispatch("updateLocalPlugin");
+
+const currentSelect = ref(0);
+
+const pluginDetail = computed(() => {
+  return localPlugins.value[currentSelect.value] || {};
+});
+
+const readme = computed(() => {
+  if(!pluginDetail.value.name) return "";
+  const str = fs.readFileSync(
+    path.resolve(baseDir, "node_modules", pluginDetail.value.name, "readme.md"),
+    "utf-8"
+  );
+  return md.render(str);
+});
+
+const deletePlugin = async (plugin) => {
+  await window.rubick.deletePlugin(plugin);
+  updateLocalPlugin();
+};
+</script>
+
+<style lang="less">
+.installed {
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+  background: #F3EFEF;
+  height: calc(~"100vh - 46px");
+  display: flex;
+  .installed-list {
+    width: 40%;
+    background: #fff;
+    height: 100%;
+    padding: 10px 0;
+    border-right: 1px solid #eee;
+    .item {
+      padding: 10px 20px;
+      display: flex;
+      align-items: center;
+      img {
+        width: 40px;
+        height: 40px;
+        margin-right: 20px;
+      }
+      .desc {
+        color: #999;
+      }
+      &.active {
+        background: #eee;
+      }
+    }
+  }
+  .plugin-detail {
+    padding: 20px 20px 0 20px;
+    box-sizing: border-box;
+    width: 60%;
+    height: 100%;
+    background: #fff;
+    .plugin-top {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      .title {
+        font-size: 20px;
+        display: flex;
+        align-items: center;
+      }
+      .desc {
+        font-size: 13px;
+        color: #999;
+      }
+    }
+    .detail-container, .feature-container {
+      height: 380px;
+      overflow: auto;
+      img {
+        width: 100%;
+      }
+    }
+    .desc-item {
+      border-bottom: 1px solid #ddd;
+      padding: 10px 0;
+      .desc-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .desc-info {
+        color: #999;
+      }
+    }
+  }
+}
+</style>

feature/src/views/market/index.vue

@@ -78,8 +78,7 @@ const state = reactive({
 });
 
 const store = useStore();
-const init = () => store.dispatch("init");
-init();
+
 const totalPlugins = computed(() => store.state.totalPlugins);
 
 const { searchValue, current } = toRefs(state);
@@ -93,6 +92,7 @@ const { searchValue, current } = toRefs(state);
   width: 100%;
   overflow: hidden;
   background: #F3EFEF;
+  height: calc(~"100vh - 46px");
   .left-menu {
     width: 200px;
     height: 100vh;
@@ -116,7 +116,7 @@ const { searchValue, current } = toRefs(state);
   .container {
     background: #fff;
     width: calc(~'100% - 200px');
-    height: 100vh;
+    height: 100%;
     box-sizing: border-box;
     padding: 10px 20px;
     position: relative;