Added subscription page

2025-08-09 23:59:01 +08:00 · 2020-08-23 00:56:35 +08:00 · 2020-08-23 00:56:35 +08:00 · 0a11261eee
commit 0a11261eee
parent 72bb2f4edb
17 changed files with 401 additions and 65 deletions
--- a/backend/.idea/workspace.xml
+++ b/backend/.idea/workspace.xml
@ -20,20 +20,23 @@
  </component>
  <component name="ChangeListManager">
    <list default="true" id="8b97a098-48b2-4e64-a9ef-522fe2d30b52" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/../web/src/router/index.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/../web/src/views/Dashboard.vue" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/../web/src/views/Subscription.vue" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/../web/src/views/User.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/../web/src/store/index.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/../web/src/utils/index.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/../web/src/views/CollectionEditor.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/../web/src/views/PopUpProxyList.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/../web/src/views/SubEditor.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/sub-store.js" beforeDir="false" afterPath="$PROJECT_DIR$/sub-store.js" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/../web/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/../web/package-lock.json" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/../web/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/../web/package.json" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/../web/src/App.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/App.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../web/src/assets/logo.svg" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/assets/logo.svg" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/../web/src/components/BottomNav.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/components/BottomNav.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/../web/src/components/TopToolbar.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/components/TopToolbar.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/../web/src/main.js" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/main.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../web/src/plugins/vuetify.js" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/plugins/vuetify.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../web/src/router/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/router/index.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../web/src/views/Dashboard.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/views/Dashboard.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../web/src/views/Subscription.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/views/Subscription.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../web/src/views/User.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/views/User.vue" afterDir="false" />
    </list>
    <option name="SHOW_DIALOG" value="false" />
    <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -55,6 +58,22 @@
    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
    <property name="WebServerToolWindowFactoryState" value="false" />
    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="node.js.detected.package.eslint" value="true" />
+    <property name="node.js.detected.package.tslint" value="true" />
+    <property name="node.js.path.for.package.eslint" value="project" />
+    <property name="node.js.path.for.package.tslint" value="project" />
+    <property name="node.js.selected.package.eslint" value="(autodetect)" />
+    <property name="node.js.selected.package.tslint" value="(autodetect)" />
+  </component>
+  <component name="RunManager">
+    <configuration name="sub-store.js" type="NodeJSConfigurationType" temporary="true" nameIsGenerated="true" path-to-js-file="$PROJECT_DIR$/sub-store.js" working-dir="$PROJECT_DIR$">
+      <method v="2" />
+    </configuration>
+    <recent_temporary>
+      <list>
+        <item itemvalue="Node.js.sub-store.js" />
+      </list>
+    </recent_temporary>
  </component>
  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
  <component name="TaskManager">
@ -66,7 +85,8 @@
      <updated>1597827738046</updated>
      <workItem from="1597827739128" duration="775000" />
      <workItem from="1597902241253" duration="776000" />
-      <workItem from="1598004165212" duration="170000" />
+      <workItem from="1598004165212" duration="400000" />
+      <workItem from="1598099373952" duration="2155000" />
    </task>
    <servers />
  </component>
@ -85,4 +105,86 @@
    </option>
    <option name="oldMeFiltersMigrated" value="true" />
  </component>
+  <component name="WindowStateProjectService">
+    <state width="840" height="374" key="GridCell.Tab.0.bottom" timestamp="1598115358068">
+      <screen x="0" y="0" width="1792" height="1120" />
+    </state>
+    <state width="840" height="374" key="GridCell.Tab.0.bottom/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358068" />
+    <state width="840" height="303" key="GridCell.Tab.0.bottom/70.23.1722.1097@70.23.1722.1097" timestamp="1598100552976" />
+    <state width="840" height="374" key="GridCell.Tab.0.center" timestamp="1598115358067">
+      <screen x="0" y="0" width="1792" height="1120" />
+    </state>
+    <state width="840" height="374" key="GridCell.Tab.0.center/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358067" />
+    <state width="840" height="303" key="GridCell.Tab.0.center/70.23.1722.1097@70.23.1722.1097" timestamp="1598100552975" />
+    <state width="840" height="374" key="GridCell.Tab.0.left" timestamp="1598115358067">
+      <screen x="0" y="0" width="1792" height="1120" />
+    </state>
+    <state width="840" height="374" key="GridCell.Tab.0.left/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358067" />
+    <state width="840" height="303" key="GridCell.Tab.0.left/70.23.1722.1097@70.23.1722.1097" timestamp="1598100552974" />
+    <state width="840" height="374" key="GridCell.Tab.0.right" timestamp="1598115358068">
+      <screen x="0" y="0" width="1792" height="1120" />
+    </state>
+    <state width="840" height="374" key="GridCell.Tab.0.right/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358068" />
+    <state width="840" height="303" key="GridCell.Tab.0.right/70.23.1722.1097@70.23.1722.1097" timestamp="1598100552975" />
+    <state width="840" height="374" key="GridCell.Tab.1.bottom" timestamp="1598115358069">
+      <screen x="0" y="0" width="1792" height="1120" />
+    </state>
+    <state width="840" height="374" key="GridCell.Tab.1.bottom/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358069" />
+    <state width="840" height="374" key="GridCell.Tab.1.bottom/70.23.1722.1097@70.23.1722.1097" timestamp="1598099904581" />
+    <state width="840" height="374" key="GridCell.Tab.1.center" timestamp="1598115358069">
+      <screen x="0" y="0" width="1792" height="1120" />
+    </state>
+    <state width="840" height="374" key="GridCell.Tab.1.center/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358069" />
+    <state width="840" height="374" key="GridCell.Tab.1.center/70.23.1722.1097@70.23.1722.1097" timestamp="1598099904581" />
+    <state width="840" height="374" key="GridCell.Tab.1.left" timestamp="1598115358069">
+      <screen x="0" y="0" width="1792" height="1120" />
+    </state>
+    <state width="840" height="374" key="GridCell.Tab.1.left/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358069" />
+    <state width="840" height="374" key="GridCell.Tab.1.left/70.23.1722.1097@70.23.1722.1097" timestamp="1598099904581" />
+    <state width="840" height="374" key="GridCell.Tab.1.right" timestamp="1598115358069">
+      <screen x="0" y="0" width="1792" height="1120" />
+    </state>
+    <state width="840" height="374" key="GridCell.Tab.1.right/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358069" />
+    <state width="840" height="374" key="GridCell.Tab.1.right/70.23.1722.1097@70.23.1722.1097" timestamp="1598099904581" />
+    <state width="840" height="374" key="GridCell.Tab.2.bottom" timestamp="1598115358071">
+      <screen x="0" y="0" width="1792" height="1120" />
+    </state>
+    <state width="840" height="374" key="GridCell.Tab.2.bottom/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358071" />
+    <state width="840" height="374" key="GridCell.Tab.2.bottom/70.23.1722.1097@70.23.1722.1097" timestamp="1598099904582" />
+    <state width="840" height="374" key="GridCell.Tab.2.center" timestamp="1598115358070">
+      <screen x="0" y="0" width="1792" height="1120" />
+    </state>
+    <state width="840" height="374" key="GridCell.Tab.2.center/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358070" />
+    <state width="840" height="374" key="GridCell.Tab.2.center/70.23.1722.1097@70.23.1722.1097" timestamp="1598099904582" />
+    <state width="840" height="374" key="GridCell.Tab.2.left" timestamp="1598115358070">
+      <screen x="0" y="0" width="1792" height="1120" />
+    </state>
+    <state width="840" height="374" key="GridCell.Tab.2.left/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358070" />
+    <state width="840" height="374" key="GridCell.Tab.2.left/70.23.1722.1097@70.23.1722.1097" timestamp="1598099904581" />
+    <state width="840" height="374" key="GridCell.Tab.2.right" timestamp="1598115358070">
+      <screen x="0" y="0" width="1792" height="1120" />
+    </state>
+    <state width="840" height="374" key="GridCell.Tab.2.right/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358070" />
+    <state width="840" height="374" key="GridCell.Tab.2.right/70.23.1722.1097@70.23.1722.1097" timestamp="1598099904582" />
+    <state width="840" height="374" key="GridCell.Tab.3.bottom" timestamp="1598115358072">
+      <screen x="0" y="0" width="1792" height="1120" />
+    </state>
+    <state width="840" height="374" key="GridCell.Tab.3.bottom/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358072" />
+    <state width="840" height="374" key="GridCell.Tab.3.bottom/70.23.1722.1097@70.23.1722.1097" timestamp="1598099904582" />
+    <state width="840" height="374" key="GridCell.Tab.3.center" timestamp="1598115358071">
+      <screen x="0" y="0" width="1792" height="1120" />
+    </state>
+    <state width="840" height="374" key="GridCell.Tab.3.center/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358071" />
+    <state width="840" height="374" key="GridCell.Tab.3.center/70.23.1722.1097@70.23.1722.1097" timestamp="1598099904582" />
+    <state width="840" height="374" key="GridCell.Tab.3.left" timestamp="1598115358071">
+      <screen x="0" y="0" width="1792" height="1120" />
+    </state>
+    <state width="840" height="374" key="GridCell.Tab.3.left/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358071" />
+    <state width="840" height="374" key="GridCell.Tab.3.left/70.23.1722.1097@70.23.1722.1097" timestamp="1598099904582" />
+    <state width="840" height="374" key="GridCell.Tab.3.right" timestamp="1598115358072">
+      <screen x="0" y="0" width="1792" height="1120" />
+    </state>
+    <state width="840" height="374" key="GridCell.Tab.3.right/0.0.1792.1120@0.0.1792.1120" timestamp="1598115358072" />
+    <state width="840" height="374" key="GridCell.Tab.3.right/70.23.1722.1097@70.23.1722.1097" timestamp="1598099904582" />
+  </component>
 </project>
--- a/backend/sub-store.js
+++ b/backend/sub-store.js
@ -21,12 +21,12 @@ if (!$.read(COLLECTIONS_KEY)) $.write({}, COLLECTIONS_KEY);
 // BACKEND API
 const $app = express();

-$app.route("/sub/:name")
+$app.route("/api/sub/:name")
    .get(getSub)
    .patch(updateSub)
    .delete(deleteSub);

-$app.route("/sub")
+$app.route("/api/sub")
    .get(getAllSubs)
    .post(newSub)
    .delete(deleteAllSubs);
@ -36,11 +36,11 @@ $app.get("/download/:name", downloadSub);

 // collections
 $app.get("/download/collection/:name", downloadCollection);
-$app.route("/collection/:name")
+$app.route("/api/collection/:name")
    .get(getCollection)
    .patch(updateCollection)
    .delete(deleteCollection);
-$app.route("/collection")
+$app.route("/api/collection")
    .get(getAllCollections)
    .post(newCollection)
    .delete(deleteAllCollections);
@ -203,8 +203,21 @@ async function updateSub(req, res) {
            ...sub
        };
        // allow users to update the subscription name
-        delete allSubs[name];
-        allSubs[sub.name || name] = newSub;
+        if (name !== sub.name) {
+            // we need to find out all collections refer to this name
+            const allCols = $.read(COLLECTIONS_KEY);
+            for (const k of Object.keys(allCols)) {
+                const idx = allCols[k].subscriptions.indexOf(name);
+                if (idx !== -1) {
+                    allCols[k].subscriptions[idx] = sub.name;
+                }
+            }
+            // update subscriptions
+            delete allSubs[name];
+            allSubs[sub.name] = newSub;
+        } else {
+            allSubs[name] = newSub;
+        }
        $.write(allSubs, SUBS_KEY);
        res.json({
            status: "success",
@ -232,7 +245,7 @@ async function getAllSubs(req, res) {
    const allSubs = $.read(SUBS_KEY);
    res.json({
        status: "success",
-        data: Object.keys(allSubs)
+        data: allSubs
    });
 }

@ -349,7 +362,7 @@ async function getAllCollections(req, res) {
    const allCols = $.read(COLLECTIONS_KEY);
    res.json({
        status: "success",
-        data: Object.keys(allCols)
+        data: allCols
    });
 }

@ -2059,6 +2072,12 @@ function API(name = "untitled", debug = false) {
 /*********************************** Mini Express *************************************/
 function express(port = 3000) {
    const {isNode} = ENV();
+    const DEFAULT_HEADERS = {
+        "Content-Type": "text/plain;charset=UTF-8",
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept"
+    };
+

    // node support
    if (isNode) {
@ -2068,6 +2087,10 @@ function express(port = 3000) {
        app.use(bodyParser.json({verify: rawBodySaver}));
        app.use(bodyParser.urlencoded({verify: rawBodySaver, extended: true}));
        app.use(bodyParser.raw({verify: rawBodySaver, type: '*/*'}));
+        app.use((req, res, next) => {
+            res.set(DEFAULT_HEADERS);
+            next();
+        })

        // adapter
        app.start = () => {
@ -2184,9 +2207,7 @@ function express(port = 3000) {
    function Response() {
        let statusCode = "200";
        const {isQX, isLoon, isSurge} = ENV();
-        const headers = {
-            "Content-Type": "text/plain;charset=UTF-8",
-        };
+        const headers = DEFAULT_HEADERS;
        return new (class {
            status(code) {
                statusCode = code;
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -2485,34 +2485,11 @@
      "dev": true
    },
    "axios": {
-      "version": "0.19.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
-      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
+      "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
      "requires": {
-        "follow-redirects": "1.5.10"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "follow-redirects": {
-          "version": "1.5.10",
-          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-          "requires": {
-            "debug": "=3.1.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
+        "follow-redirects": "^1.10.0"
      }
    },
    "babel-eslint": {
@ -5496,8 +5473,7 @@
    "follow-redirects": {
      "version": "1.13.0",
      "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.0.tgz?cache=0&sync_timestamp=1597057976909&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.13.0.tgz",
-      "integrity": "sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs=",
-      "dev": true
+      "integrity": "sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs="
    },
    "for-in": {
      "version": "1.0.2",
@ -11168,6 +11144,11 @@
        "loader-utils": "^1.2.0"
      }
    },
+    "vuex": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",
+      "integrity": "sha512-w7oJzmHQs0FM9LXodfskhw9wgKBiaB+totOdb8sNzbTB2KDCEEwEs29NzBZFh/lmEK1t5tDmM1vtsO7ubG1DFw=="
+    },
    "watchpack": {
      "version": "1.7.4",
      "resolved": "https://registry.npm.taobao.org/watchpack/download/watchpack-1.7.4.tgz?cache=0&sync_timestamp=1597081659128&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwatchpack%2Fdownload%2Fwatchpack-1.7.4.tgz",
--- a/web/package.json
+++ b/web/package.json
@ -8,13 +8,14 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
-    "axios": "^0.19.2",
+    "axios": "^0.20.0",
    "core-js": "^3.6.5",
    "lodash": "^4.17.20",
    "material-design-icons-iconfont": "^5.0.1",
    "vue": "^2.6.11",
    "vue-router": "^3.4.3",
-    "vuetify": "^2.2.11"
+    "vuetify": "^2.2.11",
+    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
--- a/web/src/App.vue
+++ b/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>
--- a/web/src/components/BottomNav.vue
+++ b/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>


--- a/web/src/components/TopToolbar.vue
+++ b/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>
--- a/web/src/main.js
+++ b/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')
--- a/web/src/router/index.js
+++ b/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;
--- a/web/src/store/index.js
+++ b/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;
--- a/web/src/utils/index.js
+++ b/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;
+}
--- a/web/src/views/CollectionEditor.vue
+++ b/web/src/views/CollectionEditor.vue
@ -0,0 +1,13 @@
+<template>
+<v-container></v-container>
+</template>
+
+<script>
+export default {
+name: "CollectionEditor"
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/web/src/views/Dashboard.vue
+++ b/web/src/views/Dashboard.vue
@ -1,6 +1,5 @@
 <template>
  <v-container>
-    <h1 class="headline">首页</h1>
  </v-container>
 </template>

--- a/web/src/views/PopUpProxyList.vue
+++ b/web/src/views/PopUpProxyList.vue
@ -0,0 +1,13 @@
+<template>
+<v-container></v-container>
+</template>
+
+<script>
+export default {
+  name: "PopUpProxyList"
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/web/src/views/SubEditor.vue
+++ b/web/src/views/SubEditor.vue
@ -0,0 +1,13 @@
+<template>
+<v-container></v-container>
+</template>
+
+<script>
+export default {
+name: "SubEditor"
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/web/src/views/Subscription.vue
+++ b/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>

--- a/web/src/views/User.vue
+++ b/web/src/views/User.vue
@ -1,6 +1,5 @@
 <template>
  <v-container>
-    <h1 class="headline">用户</h1>
  </v-container>
 </template>