Added subscription page

web/src/App.vue

@@ -12,6 +12,11 @@
 import TopToolbar from "@/components/TopToolbar";
 import BottomNav from "@/components/BottomNav";
 
+function initStore(store) {
+  store.dispatch('FETCH_SUBSCRIPTIONS');
+  store.dispatch("FETCH_COLLECTIONS");
+}
+
 export default {
   components: {
     TopToolbar,
@@ -19,14 +24,15 @@ export default {
   },
 
   created() {
-    this.$vuetify.theme.dark = true;
-    this.$vuetify.theme.themes.dark.primary = '#d02f2f';
+    this.$vuetify.theme.dark = this.$store.state.isDarkMode;
+    this.$vuetify.theme.themes.dark.primary = '#ae51e3';
+    this.$vuetify.theme.themes.light.primary = '#d73964';
+
+    initStore(this.$store);
   },
 
   computed: {
-    isDarkMode() {
-      return true;
-    }
+
   }
 }
 </script>

web/src/components/BottomNav.vue

@@ -9,17 +9,17 @@
   >
     <v-btn :to="{path:'/dashboard'}" value="dashboard">
       <span>首页</span>
-      <v-icon>dashboard</v-icon>
+      <v-icon>speed</v-icon>
     </v-btn>
 
     <v-btn :to="{path: '/'}" value="subscription">
       <span>订阅</span>
-      <v-icon>favorite</v-icon>
+      <v-icon>mdi-cloud</v-icon>
     </v-btn>
 
     <v-btn :to="{path: '/user'}" value="user">
       <span>我的</span>
-      <v-icon>settings</v-icon>
+      <v-icon>mdi-account</v-icon>
     </v-btn>
 
 

web/src/components/TopToolbar.vue

@@ -34,7 +34,7 @@
     >
       <v-app-bar-nav-icon @click.stop="toggleMenu"></v-app-bar-nav-icon>
 
-      <v-toolbar-title>SubStore</v-toolbar-title>
+      <v-toolbar-title>{{title}}</v-toolbar-title>
 
     </v-app-bar>
 
@@ -56,6 +56,12 @@ export default {
     doNothing: function () {
 
     }
+  },
+
+  computed: {
+    title: function () {
+      return this.$store.state.title;
+    }
   }
 }
 </script>

web/src/main.js

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

web/src/router/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import Router from 'vue-router';
+import store from "../store";
 
 import Subscription from "@/views/Subscription";
 import Dashboard from "@/views/Dashboard";
@@ -14,19 +15,29 @@ const router = new Router({
         {
             path: "/",
             name: "subscriptions",
-            component: Subscription
+            component: Subscription,
+            meta: {title: "订阅"}
         },
         {
             path: "/dashboard",
             name: "dashboard",
-            component: Dashboard
+            component: Dashboard,
+            meta: {title: "首页"}
         },
         {
             path: "/user",
             name: "user",
-            component: User
+            component: User,
+            meta: {title: "我的"}
         }
     ]
 });
 
+router.beforeEach((to, from, next) => {
+    const {meta} = to;
+    document.title = to.meta.title
+    store.commit("SET_NAV_TITLE", meta.title);
+    next();
+})
+
 export default router;

web/src/store/index.js

@@ -0,0 +1,56 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import {axios} from "@/utils";
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+    state: {
+        title: "Sub-Store",
+        isDarkMode: false,
+
+        subscriptions: {},
+        collections: {},
+
+        settings: {}
+    },
+
+    mutations: {
+        // UI
+        SET_NAV_TITLE(state, title) {
+            state.title = title;
+        },
+        SET_DARK_MODE(state, isDarkMode) {
+            state.isDarkMode = isDarkMode
+        },
+
+        // Data
+        SET_SUBSCRIPTIONS(state, subscriptions) {
+            state.subscriptions = subscriptions;
+        },
+        SET_COLLECTIONS(state, collections) {
+            state.collections = collections;
+        }
+    },
+
+    actions: {
+        // fetch subscriptions
+        async FETCH_SUBSCRIPTIONS({commit}) {
+            axios.get("/sub").then(resp => {
+                const {data} = resp.data;
+                commit("SET_SUBSCRIPTIONS", data);
+            });
+        },
+        // fetch collections
+        async FETCH_COLLECTIONS({commit}) {
+            axios.get("/collection").then(resp => {
+                const {data} = resp.data;
+                commit("SET_COLLECTIONS", data);
+            });
+        }
+    },
+
+    getters: {}
+})
+
+export default store;

web/src/utils/index.js

@@ -0,0 +1,10 @@
+import Axios from 'axios';
+export const axios = Axios.create({
+    // baseURL: 'http://sub.store/api',
+    baseURL: 'http://127.0.0.1:3000/api',
+    timeout: 1000
+});
+
+export function isEmptyObj(obj) {
+    return Object.keys(obj).length === 0;
+}

web/src/views/CollectionEditor.vue

@@ -0,0 +1,13 @@
+<template>
+<v-container></v-container>
+</template>
+
+<script>
+export default {
+name: "CollectionEditor"
+}
+</script>
+
+<style scoped>
+
+</style>

web/src/views/Dashboard.vue

@@ -1,6 +1,5 @@
 <template>
   <v-container>
-    <h1 class="headline">首页</h1>
   </v-container>
 </template>
 

web/src/views/PopUpProxyList.vue

@@ -0,0 +1,13 @@
+<template>
+<v-container></v-container>
+</template>
+
+<script>
+export default {
+  name: "PopUpProxyList"
+}
+</script>
+
+<style scoped>
+
+</style>

web/src/views/SubEditor.vue

@@ -0,0 +1,13 @@
+<template>
+<v-container></v-container>
+</template>
+
+<script>
+export default {
+name: "SubEditor"
+}
+</script>
+
+<style scoped>
+
+</style>

web/src/views/Subscription.vue

@@ -1,9 +1,112 @@
 <template>
-  <v-container>
-    <h1 class="headline">订阅</h1>
+  <v-container fluid>
+    <v-spacer></v-spacer>
+    <v-list inset dense>
+      <v-subheader>单个订阅</v-subheader>
+      <v-list-item
+          v-for="item in subscriptions"
+          :key="item.name"
+      >
+        <v-list-item-avatar>
+          <v-img
+              src="https://avatars2.githubusercontent.com/u/21050064?s=460&u=40a74913dd0a3d00670d05148c3a08c787470021&v=4"></v-img>
+        </v-list-item-avatar>
+        <v-list-item-content>
+          <v-list-item-title v-text="item.name" class="font-weight-medium"></v-list-item-title>
+          <v-list-item-title v-text="item.url"></v-list-item-title>
+        </v-list-item-content>
+        <v-list-item-action>
+          <v-btn icon>
+            <v-icon>mdi-dots-vertical</v-icon>
+          </v-btn>
+        </v-list-item-action>
+      </v-list-item>
+    </v-list>
+    <v-divider></v-divider>
+    <v-list inset dense>
+      <v-subheader>组合订阅</v-subheader>
+      <v-list-item
+          v-for="item in collections"
+          :key="item.name"
+          dense
+      >
+        <v-list-item-avatar>
+          <v-img
+              src="https://avatars2.githubusercontent.com/u/21050064?s=460&u=40a74913dd0a3d00670d05148c3a08c787470021&v=4"></v-img>
+        </v-list-item-avatar>
+        <v-list-item-content>
+          <v-list-item-title v-text="item.name" class="font-weight-medium"></v-list-item-title>
+          <v-chip-group
+              column
+          >
+            <v-chip
+                v-for="subs in item.subscriptions"
+                :key="subs"
+                small
+                class="ma-2"
+                label
+            >
+              {{ subs }}
+            </v-chip>
+          </v-chip-group>
+        </v-list-item-content>
+        <v-list-item-action>
+          <v-btn icon>
+            <v-icon>mdi-dots-vertical</v-icon>
+          </v-btn>
+        </v-list-item-action>
+      </v-list-item>
+    </v-list>
+    <v-fab-transition>
+      <v-speed-dial
+          v-model="opened"
+          direction="top"
+          right
+          fab
+          absolute
+          bottom
+          small
+          transition="slide-y-reverse-transition"
+      >
+        <template #activator>
+          <v-btn
+              fab
+          >
+            <v-icon v-if="opened">mdi-close</v-icon>
+            <v-icon v-else>apps</v-icon>
+          </v-btn>
+        </template>
+        <v-btn
+            fab
+            color="primary"
+        >
+          <v-icon>mdi-plus</v-icon>
+        </v-btn>
+      </v-speed-dial>
+    </v-fab-transition>
   </v-container>
 </template>
 
+<script>
+export default {
+  data: () => {
+    return {
+      opened: false
+    }
+  },
+
+  computed: {
+    subscriptions: function () {
+      const subs = this.$store.state.subscriptions;
+      return Object.keys(subs).map(k => subs[k]);
+    },
+    collections: function () {
+      const cols = this.$store.state.collections;
+      return Object.keys(cols).map(k => cols[k]);
+    }
+  }
+}
+</script>
 
 <style scoped>
 

web/src/views/User.vue

@@ -1,6 +1,5 @@
 <template>
   <v-container>
-    <h1 class="headline">用户</h1>
   </v-container>
 </template>