Support remote script

web/src/App.vue

@@ -1,6 +1,9 @@
 <template>
   <v-app>
     <TopToolbar></TopToolbar>
+    <v-content>
+      <router-view></router-view>
+    </v-content>
     <BottomNav></BottomNav>
   </v-app>
 </template>
@@ -15,16 +18,15 @@ export default {
     BottomNav
   },
 
-  props: {
-    source: String,
-  },
-
-  data: () => ({
-    drawer: null,
-  }),
-
   created() {
-    this.$vuetify.theme.dark = true
+    this.$vuetify.theme.dark = true;
+    this.$vuetify.theme.themes.dark.primary = '#d02f2f';
   },
+
+  computed: {
+    isDarkMode() {
+      return true;
+    }
+  }
 }
 </script>

web/src/assets/logo.svg

@@ -1 +1,10 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100">
+    <defs>
+        <style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style>
+    </defs>
+    <title>Artboard 46</title>
+    <polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/>
+    <polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/>
+    <polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/>
+    <polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/>
+</svg>

web/src/components/BottomNav.vue

@@ -2,24 +2,24 @@
 
   <v-bottom-navigation
       app
+      color="primary"
       fixed
       grow
       v-model="activeItem"
-      color="primary"
   >
-    <v-btn value="dashboard">
+    <v-btn :to="{path:'/dashboard'}" value="dashboard">
       <span>首页</span>
       <v-icon>dashboard</v-icon>
     </v-btn>
 
-    <v-btn value="collection">
+    <v-btn :to="{path: '/'}" value="subscription">
       <span>订阅</span>
       <v-icon>favorite</v-icon>
     </v-btn>
 
-    <v-btn value="subscription">
-      <span>机场</span>
-      <v-icon>code</v-icon>
+    <v-btn :to="{path: '/user'}" value="user">
+      <span>我的</span>
+      <v-icon>settings</v-icon>
     </v-btn>
 
 
@@ -31,7 +31,7 @@
 export default {
   data: () => {
     return {
-      activeItem: 'collection'
+      activeItem: 'subscription'
     }
   }
 }

web/src/components/TopToolbar.vue

@@ -28,9 +28,9 @@
 
     <v-app-bar
         app
-        fixed
-        dark
         color="primary"
+        dark
+        fixed
     >
       <v-app-bar-nav-icon @click.stop="toggleMenu"></v-app-bar-nav-icon>
 
@@ -50,10 +50,10 @@ export default {
   },
 
   methods: {
-    toggleMenu: function() {
+    toggleMenu: function () {
       this.showMenu = !this.showMenu;
     },
-    doNothing: function() {
+    doNothing: function () {
 
     }
   }

web/src/main.js

@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import vuetify from './plugins/vuetify';
+import router from './router';
 
 Vue.config.productionTip = false
 
 new Vue({
-  vuetify,
-  render: h => h(App)
+    vuetify,
+    router,
+    render: h => h(App)
 }).$mount('#app')

web/src/plugins/vuetify.js

@@ -4,5 +4,4 @@ import 'material-design-icons-iconfont/dist/material-design-icons.css'
 
 Vue.use(Vuetify);
 
-export default new Vuetify({
-});
+export default new Vuetify({});

web/src/router/index.js

@@ -0,0 +1,32 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+
+import Subscription from "@/views/Subscription";
+import Dashboard from "@/views/Dashboard";
+import User from "@/views/User";
+
+Vue.use(Router);
+
+const router = new Router({
+    mode: "history",
+    base: process.env.BASE_URL,
+    routes: [
+        {
+            path: "/",
+            name: "subscriptions",
+            component: Subscription
+        },
+        {
+            path: "/dashboard",
+            name: "dashboard",
+            component: Dashboard
+        },
+        {
+            path: "/user",
+            name: "user",
+            component: User
+        }
+    ]
+});
+
+export default router;

web/src/views/Dashboard.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-container>
+    <h1 class="headline">首页</h1>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "Dashboard"
+}
+</script>
+
+<style scoped>
+
+</style>

web/src/views/Subscription.vue

@@ -0,0 +1,10 @@
+<template>
+  <v-container>
+    <h1 class="headline">订阅</h1>
+  </v-container>
+</template>
+
+
+<style scoped>
+
+</style>

web/src/views/User.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-container>
+    <h1 class="headline">用户</h1>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "User"
+}
+</script>
+
+<style scoped>
+
+</style>