Add some components

web/src/App.vue

@@ -5,6 +5,25 @@
       <router-view></router-view>
     </v-content>
     <BottomNav></BottomNav>
+    <v-snackbar
+        :value="successMessage"
+        app
+        bottom
+        color="success"
+        elevation="20"
+    >
+      {{ successMessage }}
+    </v-snackbar>
+
+    <v-snackbar
+        :value="errorMessage"
+        app
+        bottom
+        color="error"
+        elevation="20"
+    >
+      {{ errorMessage }}
+    </v-snackbar>
   </v-app>
 </template>
 
@@ -32,7 +51,25 @@ export default {
   },
 
   computed: {
+    successMessage: function () {
+      return this.$store.state.successMessage;
+    },
+    errorMessage: function () {
+      return this.$store.state.errorMessage;
+    }
+  },
 
+  watch: {
+    successMessage: function () {
+      setTimeout(() => {
+        this.$store.commit("SET_SUCCESS_MESSAGE", "");
+      }, 1000);
+    },
+    errorMessage: function () {
+      setTimeout(() => {
+        this.$store.commit("SET_ERROR_MESSAGE", "");
+      }, 1000);
+    }
   }
 }
 </script>

web/src/components/BottomNav.vue

@@ -1,5 +1,4 @@
 <template>
-
   <v-bottom-navigation
       app
       color="primary"

web/src/main.js

@@ -1,11 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
+import Clipboard from 'v-clipboard';
 import vuetify from './plugins/vuetify';
 import router from './router';
 import store from './store';
 
 Vue.config.productionTip = false
-
+Vue.use(Clipboard);
 new Vue({
     vuetify,
     router,

web/src/router/index.js

@@ -5,6 +5,8 @@ import store from "../store";
 import Subscription from "@/views/Subscription";
 import Dashboard from "@/views/Dashboard";
 import User from "@/views/User";
+import SubEditor from "@/views/SubEditor";
+import CollectionEditor from "@/views/CollectionEditor";
 
 Vue.use(Router);
 
@@ -29,6 +31,18 @@ const router = new Router({
             name: "user",
             component: User,
             meta: {title: "我的"}
+        },
+        {
+            path: "/sub-edit/:name",
+            name: "sub-editor",
+            component: SubEditor,
+            meta: {title: "订阅编辑"}
+        },
+        {
+            path: "/collection-edit/:name",
+            name: "collection-edit",
+            component: CollectionEditor,
+            meta: {title: "订阅编辑"}
         }
     ]
 });

web/src/store/index.js

@@ -9,6 +9,9 @@ const store = new Vuex.Store({
         title: "Sub-Store",
         isDarkMode: false,
 
+        successMessage: "",
+        errorMessage: "",
+
         subscriptions: {},
         collections: {},
 
@@ -24,29 +27,55 @@ const store = new Vuex.Store({
             state.isDarkMode = isDarkMode
         },
 
-        // Data
-        SET_SUBSCRIPTIONS(state, subscriptions) {
-            state.subscriptions = subscriptions;
+        SET_SUCCESS_MESSAGE(state, msg) {
+            state.successMessage = msg;
+        },
+
+        SET_ERROR_MESSAGE(state, msg) {
+            state.errorMessage = msg;
         },
-        SET_COLLECTIONS(state, collections) {
-            state.collections = collections;
-        }
     },
 
     actions: {
         // fetch subscriptions
-        async FETCH_SUBSCRIPTIONS({commit}) {
+        async FETCH_SUBSCRIPTIONS({state}) {
             axios.get("/sub").then(resp => {
                 const {data} = resp.data;
-                commit("SET_SUBSCRIPTIONS", data);
+                state.subscriptions = data;
             });
         },
         // fetch collections
-        async FETCH_COLLECTIONS({commit}) {
+        async FETCH_COLLECTIONS({state}) {
             axios.get("/collection").then(resp => {
                 const {data} = resp.data;
-                commit("SET_COLLECTIONS", data);
+                state.collections = data;
             });
+        },
+        // update subscriptions
+        async UPDATE_SUBSCRIPTION({commit}, {name, sub}) {
+            axios.patch(`/sub/${name}`, sub).then(() => {
+                commit("FETCH_SUBSCRIPTIONS");
+            });
+        },
+        // new subscription
+        async NEW_SUBSCRIPTION() {
+
+        },
+        // delete subscription
+        async DELETE_SUBSCRIPTION() {
+
+        },
+        // update collection
+        async UPDATE_COLLECTION() {
+
+        },
+        // new collection
+        async NEW_COLLECTION() {
+
+        },
+        // delete collection
+        async DELETE_COLLECTION() {
+
         }
     },
 

web/src/views/Subscription.vue

@@ -1,33 +1,53 @@
 <template>
   <v-container fluid>
     <v-spacer></v-spacer>
-    <v-list inset dense>
+    <v-list dense>
       <v-subheader>单个订阅</v-subheader>
       <v-list-item
-          v-for="item in subscriptions"
-          :key="item.name"
+          v-for="sub in subscriptions"
+          :key="sub.name"
+          @click="preview(sub)"
       >
         <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-title v-text="sub.name" class="font-weight-medium"></v-list-item-title>
+          <v-list-item-title v-text="sub.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-menu bottom left>
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn
+                  icon
+                  v-bind="attrs"
+                  v-on="on"
+              >
+                <v-icon>mdi-dots-vertical</v-icon>
+              </v-btn>
+            </template>
+
+            <v-list>
+              <v-list-item
+                  v-for="(menuItem, i) in editMenu"
+                  :key="i"
+                  @click="subscriptionMenu(menuItem.action, sub)"
+              >
+                <v-list-item-content>{{ menuItem.title }}</v-list-item-content>
+              </v-list-item>
+            </v-list>
+          </v-menu>
         </v-list-item-action>
       </v-list-item>
     </v-list>
     <v-divider></v-divider>
-    <v-list inset dense>
+    <v-list dense>
       <v-subheader>组合订阅</v-subheader>
       <v-list-item
-          v-for="item in collections"
-          :key="item.name"
+          v-for="collection in collections"
+          :key="collection.name"
+          @click="preview(collection)"
           dense
       >
         <v-list-item-avatar>
@@ -35,15 +55,15 @@
               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="collection.name" class="font-weight-medium"></v-list-item-title>
           <v-chip-group
               column
           >
             <v-chip
-                v-for="subs in item.subscriptions"
+                v-for="subs in collection.subscriptions"
                 :key="subs"
                 small
-                class="ma-2"
+                class="ma-2 ml-0 mr-1 pa-2"
                 label
             >
               {{ subs }}
@@ -51,9 +71,27 @@
           </v-chip-group>
         </v-list-item-content>
         <v-list-item-action>
-          <v-btn icon>
-            <v-icon>mdi-dots-vertical</v-icon>
-          </v-btn>
+          <v-menu bottom left>
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn
+                  icon
+                  v-bind="attrs"
+                  v-on="on"
+              >
+                <v-icon>mdi-dots-vertical</v-icon>
+              </v-btn>
+            </template>
+
+            <v-list>
+              <v-list-item
+                  v-for="(menuItem, i) in editMenu"
+                  :key="i"
+                  @click="collectionMenu(menuItem.action, collection)"
+              >
+                <v-list-item-content>{{ menuItem.title }}</v-list-item-content>
+              </v-list-item>
+            </v-list>
+          </v-menu>
         </v-list-item-action>
       </v-list-item>
     </v-list>
@@ -91,7 +129,21 @@
 export default {
   data: () => {
     return {
-      opened: false
+      opened: false,
+      editMenu: [
+        {
+          title: "复制",
+          action: "COPY"
+        },
+        {
+          title: "编辑",
+          action: "EDIT"
+        },
+        {
+          title: "删除",
+          action: "DELETE"
+        },
+      ]
     }
   },
 
@@ -104,6 +156,39 @@ export default {
       const cols = this.$store.state.collections;
       return Object.keys(cols).map(k => cols[k]);
     }
+  },
+
+  methods: {
+    subscriptionMenu(action, sub) {
+      console.log(`${action} --> ${sub.name}`);
+      switch (action) {
+        case 'COPY':
+          this.$clipboard(`http://127.0.0.1:3000/download/${sub.name}`);
+          this.$store.commit("SET_SUCCESS_MESSAGE", "成功复制订阅链接");
+          break
+        case 'EDIT':
+          this.$router.push(`/sub-edit/${sub.name}`);
+          break
+        case 'DELETE':
+          break
+      }
+    },
+    collectionMenu(action, collection) {
+      console.log(`${action} --> ${collection.name}`);
+      switch (action) {
+        case 'COPY':
+          this.$clipboard(`http://127.0.0.1:3000/download/collection/${collection.name}`);
+          this.$store.commit("SET_SUCCESS_MESSAGE", "成功复制订阅链接");
+          break
+        case 'EDIT':
+          break
+        case 'DELETE':
+          break
+      }
+    },
+    preview(item) {
+      console.log(`PREVIEW: ${item.name}`);
+    },
   }
 }
 </script>