zhihu 页面

package-lock.json

@@ -1114,12 +1114,37 @@
         "glob-to-regexp": "^0.3.0"
       }
     },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "requires": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "dependencies": {
+        "@nodelib/fs.stat": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmmirror.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+          "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="
+        }
+      }
+    },
     "@nodelib/fs.stat": {
       "version": "1.1.3",
       "resolved": "https://registry.npm.taobao.org/@nodelib/fs.stat/download/@nodelib/fs.stat-1.1.3.tgz",
       "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
       "dev": true
     },
+    "@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      }
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
       "resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -2442,8 +2467,7 @@
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npm.taobao.org/atob/download/atob-2.1.2.tgz",
-      "integrity": "sha1-bZUX654DDSQ2ZmZR6GvZ9vE1M8k=",
-      "dev": true
+      "integrity": "sha1-bZUX654DDSQ2ZmZR6GvZ9vE1M8k="
     },
     "autoprefixer": {
       "version": "9.8.6",
@@ -2542,8 +2566,7 @@
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
     },
     "balloon-css": {
       "version": "1.2.0",
@@ -2745,7 +2768,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz",
       "integrity": "sha1-PH/L9SnYcibz0vUrlm/1Jx60Qd0=",
-      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -3578,8 +3600,7 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
     "concat-stream": {
       "version": "1.6.2",
@@ -3897,6 +3918,32 @@
       "resolved": "https://registry.nlark.com/crypto-js/download/crypto-js-4.1.1.tgz",
       "integrity": "sha1-nkhbzwNSEEG9hYRHhrg/t2GXNs8="
     },
+    "css": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/css/-/css-3.0.0.tgz",
+      "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
+      "requires": {
+        "inherits": "^2.0.4",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "source-map-resolve": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmmirror.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
+          "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
+          "requires": {
+            "atob": "^2.1.2",
+            "decode-uri-component": "^0.2.0"
+          }
+        }
+      }
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npm.taobao.org/css-color-names/download/css-color-names-0.0.4.tgz",
@@ -4165,8 +4212,7 @@
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npm.taobao.org/decode-uri-component/download/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
-      "dev": true
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
     },
     "deep-equal": {
       "version": "1.1.1",
@@ -5370,6 +5416,14 @@
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
       "dev": true
     },
+    "fastq": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmmirror.com/fastq/-/fastq-1.13.0.tgz",
+      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
     "faye-websocket": {
       "version": "0.10.0",
       "resolved": "https://registry.npm.taobao.org/faye-websocket/download/faye-websocket-0.10.0.tgz",
@@ -5673,8 +5727,7 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/fs.realpath/download/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fsevents": {
       "version": "2.1.3",
@@ -5735,7 +5788,6 @@
       "version": "7.1.6",
       "resolved": "https://registry.npm.taobao.org/glob/download/glob-7.1.6.tgz",
       "integrity": "sha1-FB8zuBp8JJLhJVlDB0gMRmeSeKY=",
-      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -6331,7 +6383,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npm.taobao.org/inflight/download/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -6340,8 +6391,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npm.taobao.org/inherits/download/inherits-2.0.4.tgz",
-      "integrity": "sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w=",
-      "dev": true
+      "integrity": "sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w="
     },
     "inquirer": {
       "version": "7.3.3",
@@ -6653,8 +6703,7 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/is-extglob/download/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
-      "dev": true
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
     },
     "is-fullwidth-code-point": {
       "version": "3.0.0",
@@ -6666,7 +6715,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npm.taobao.org/is-glob/download/is-glob-4.0.1.tgz",
       "integrity": "sha1-dWfb6fL14kZ7x3q4PEopSCQHpdw=",
-      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -6993,6 +7041,11 @@
       "integrity": "sha1-B8BQNKbDSfoG4k+jWqdttFgM5N0=",
       "dev": true
     },
+    "klona": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/klona/-/klona-2.0.5.tgz",
+      "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ=="
+    },
     "launch-editor": {
       "version": "2.2.1",
       "resolved": "https://registry.npm.taobao.org/launch-editor/download/launch-editor-2.2.1.tgz",
@@ -7319,8 +7372,7 @@
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npm.taobao.org/merge2/download/merge2-1.4.1.tgz",
-      "integrity": "sha1-Q2iJL4hekHRVpv19xVwMnUBJkK4=",
-      "dev": true
+      "integrity": "sha1-Q2iJL4hekHRVpv19xVwMnUBJkK4="
     },
     "methods": {
       "version": "1.1.2",
@@ -7447,7 +7499,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npm.taobao.org/minimatch/download/minimatch-3.0.4.tgz",
       "integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=",
-      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -7567,8 +7618,7 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.2.tgz",
-      "integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk=",
-      "dev": true
+      "integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -7739,8 +7789,7 @@
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/normalize-path/download/normalize-path-3.0.0.tgz",
-      "integrity": "sha1-Dc1p/yOhybEf0JeDFmRKA4ghamU=",
-      "dev": true
+      "integrity": "sha1-Dc1p/yOhybEf0JeDFmRKA4ghamU="
     },
     "normalize-range": {
       "version": "0.1.2",
@@ -8012,7 +8061,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npm.taobao.org/once/download/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -8274,8 +8322,7 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/path-is-absolute/download/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
     },
     "path-is-inside": {
       "version": "1.0.2",
@@ -9182,6 +9229,11 @@
       "integrity": "sha1-M0WUG0FTy50ILY7uTNogFqmu9/Y=",
       "dev": true
     },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/randombytes/download/randombytes-2.1.0.tgz",
@@ -9558,6 +9610,11 @@
       "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=",
       "dev": true
     },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
+    },
     "rgb-regex": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/rgb-regex/download/rgb-regex-1.0.1.tgz",
@@ -9595,6 +9652,14 @@
       "integrity": "sha1-hEDsz5nqPnC9QJ1JqriOEMGJpFU=",
       "dev": true
     },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "run-queue": {
       "version": "1.0.3",
       "resolved": "https://registry.npm.taobao.org/run-queue/download/run-queue-1.0.3.tgz",
@@ -9667,8 +9732,7 @@
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz",
-      "integrity": "sha1-KBYjTiN4vdxOU1T6tcqold9xANk=",
-      "dev": true
+      "integrity": "sha1-KBYjTiN4vdxOU1T6tcqold9xANk="
     },
     "schema-utils": {
       "version": "2.7.1",
@@ -10553,6 +10617,113 @@
         }
       }
     },
+    "stylus": {
+      "version": "0.58.1",
+      "resolved": "https://registry.npmmirror.com/stylus/-/stylus-0.58.1.tgz",
+      "integrity": "sha512-AYiCHm5ogczdCPMfe9aeQa4NklB2gcf4D/IhzYPddJjTgPc+k4D/EVE0yfQbZD43MHP3lPy+8NZ9fcFxkrgs/w==",
+      "requires": {
+        "css": "^3.0.0",
+        "debug": "^4.3.2",
+        "glob": "^7.1.6",
+        "sax": "~1.2.4",
+        "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
+          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "source-map": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.7.4.tgz",
+          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA=="
+        }
+      }
+    },
+    "stylus-loader": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/stylus-loader/-/stylus-loader-7.0.0.tgz",
+      "integrity": "sha512-WTbtLrNfOfLgzTaR9Lj/BPhQroKk/LC1hfTXSUbrxmxgfUo3Y3LpmKRVA2R1XbjvTAvOfaian9vOyfv1z99E+A==",
+      "requires": {
+        "fast-glob": "^3.2.11",
+        "klona": "^2.0.5",
+        "normalize-path": "^3.0.0"
+      },
+      "dependencies": {
+        "@nodelib/fs.stat": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmmirror.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+          "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="
+        },
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "fast-glob": {
+          "version": "3.2.11",
+          "resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.2.11.tgz",
+          "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+          "requires": {
+            "@nodelib/fs.stat": "^2.0.2",
+            "@nodelib/fs.walk": "^1.2.3",
+            "glob-parent": "^5.1.2",
+            "merge2": "^1.3.0",
+            "micromatch": "^4.0.4"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+        },
+        "micromatch": {
+          "version": "4.0.5",
+          "resolved": "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.5.tgz",
+          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+          "requires": {
+            "braces": "^3.0.2",
+            "picomatch": "^2.3.1"
+          }
+        },
+        "picomatch": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
+          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        }
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-5.5.0.tgz?cache=0&sync_timestamp=1598611878833&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-5.5.0.tgz",
@@ -12225,8 +12396,7 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/wrappy/download/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "write": {
       "version": "1.0.3",

src/api/mblog/status.js

@@ -2,7 +2,8 @@ import $axios from '../index'
 
 const statusApi = {
   statusPubApi: '/api/mblog/status',
-  statusRecommendApi: '/api/mblog/status'
+  statusRecommendApi: '/api/mblog/status',
+  answerRecommendApi: '/api/mblog/answer'
 }
 
 // 状态发布接口
@@ -14,3 +15,7 @@ export function pubStatus(statusPost) {
 export function statusRecommend(page) {
   return $axios.get(statusApi.statusRecommendApi + '/' + page)
 }
+
+export function answerRecommend(page) {
+  return $axios.get(statusApi.answerRecommendApi + '/' + page)
+}

src/api/media/video.js

@@ -3,6 +3,7 @@ import $axios from '../index'
 const videoApi = {
   videoTimelineApi: '/api/media/video/post/timeline',
   videoRecommendApi: '/api/media/video/post/recommend',
+  videoTagApi: '/api/media/video/post/tag',
   similarVideoApi: '/api/media/video/post/similar',
   videoInfoApi: '/api/media/video/post/detail',
   videoUrlApi: '/api/media/video/url',
@@ -12,7 +13,7 @@ const videoApi = {
   userVideoListApi: '/api/media/video/post/user'
 }
 
-// 视频推荐接口
+// 视频时间线
 export function videoTimeline(page) {
   return $axios.get(videoApi.videoTimelineApi + '/' + page)
 }
@@ -22,6 +23,10 @@ export function videoRecommend(page) {
   return $axios.get(videoApi.videoRecommendApi + '/' + page)
 }
 
+// 视频标签接口
+export function videoTag(tag, page) {
+  return $axios.get(videoApi.videoTagApi + '?tag=' + tag + '&page=' + page)
+}
 // 相似视频接口
 export function similarVideo(videoId) {
   return $axios.get(videoApi.similarVideoApi + '?videoId=' + videoId)

src/components/card/answer-card.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-card
+    class-name="mx-auto"
+    color="white"
+    max-width="720"
+  >
+    <v-card-title>
+      <v-avatar>
+        <img
+          :src="answer.avatarUrl"
+          alt="social"
+        >
+      </v-avatar>
+      <span class="text-body-1 font-weight-light">{{ answer.username }}</span>
+      <span class="text-body-1 font-weight-light">{{ answer.intro }}</span>
+    </v-card-title>
+
+    <v-card-text class-name="text-h5 font-weight-bold">
+      <span v-html="answer.content" />
+    </v-card-text>
+    <v-icon
+      small
+      left
+    >
+      mdi-twitter
+    </v-icon>
+  </v-card>
+</template>
+
+<script>
+
+export default {
+  name: 'AnswerCard',
+  props: {
+    answer: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

src/components/card/question-card.vue

@@ -0,0 +1,37 @@
+<template>
+  <v-card
+    class-name="mx-auto"
+    color="white"
+    max-width="720"
+  >
+    <v-card-title>
+      <span class="text-body-1 font-weight-light">{{ question.title }}</span>
+    </v-card-title>
+
+    <v-card-text class-name="text-h5 font-weight-bold">
+      <span v-html="question.detail" />
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'QuestionCard',
+  props: {
+    question: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

src/router/index.js

@@ -312,6 +312,12 @@ const routes = [
         component: () => import('@/views/home/search-result.vue'),
         meta: { title: 'HerTube 搜索结果' }
       },
+      {
+        path: '/tag/result',
+        name: 'TagResult',
+        component: () => import('@/views/home/tag-result.vue'),
+        meta: { title: 'HerTube 视频标签' }
+      },
       {
         path: '/video/:id',
         name: 'Vide',

src/views/home/tag-result.vue

@@ -0,0 +1,92 @@
+<template>
+  <v-container fill-height>
+    <div>
+      <v-row>
+        <v-col>
+          <h3>标签结果</h3>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-divider />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col
+          v-for="item in videoList"
+          :key="item.id"
+        >
+          <ItemCard :video="item" />
+        </v-col>
+      </v-row>
+      <v-row justify="center">
+        <v-pagination
+          v-model="page"
+          :length="length"
+          :total-visible="7"
+          @input="pageChange"
+        />
+      </v-row>
+    </div>
+  </v-container>
+</template>
+
+<script>
+import { videoTag } from '@/api/media/video'
+import ItemCard from '@/components/card/item-card.vue'
+
+export default {
+  name: 'TagResult',
+  components: {
+    ItemCard
+  },
+  data() {
+    return {
+      page: 1,
+      currentPage: 1,
+      size: 12,
+      length: 1,
+      videoList: []
+    }
+  },
+  created() {
+    this.page = parseInt(this.$route.query.page)
+    this.getVideos(this.$route.query.tag, this.$route.query.page)
+  },
+  methods: {
+    getVideos(tag, page) {
+      videoTag(tag, page)
+        .then(res => {
+          if (res.code === 0) {
+            const pageList = res.data
+            this.videoList = pageList.list
+            this.currentPage = pageList.currentPage
+            this.length = pageList.totalPages
+
+            // 页面跳转后滚动到页面顶部
+            this.$vuetify.goTo(0)
+          } else {
+            console.error(res.msg)
+          }
+        }).catch(error => {
+          console.error(error.message)
+        })
+    },
+    pageChange(page) {
+      if (page !== this.currentPage) {
+        this.currentPage = page
+        this.$router.push({
+          path: this.$route.path,
+          query: {
+            tag: this.$route.query.tag,
+            page: page
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/video/video.vue

@@ -27,69 +27,25 @@
       <v-row v-resize="onResize" no-gutters>
         <v-col :cols="colsWidth">
           <v-row>
-            <v-col cols="4">
+            <v-col cols="2">
               <v-btn icon @click="collectVideo">
                 <v-icon>mdi-thumb-up</v-icon>
-                <span v-text="isCollected" />
+                <span>点赞</span>
               </v-btn>
-              <v-dialog
-                v-model="collectionDialog"
-                persistent
-                max-width="600px"
-              >
-                <v-card>
-                  <v-card-title>
-                    <span class="text-h5">问题或建议</span>
-                  </v-card-title>
-                  <v-card-text>
-                    <v-container>
-                      <v-row>
-                        <v-col
-                          cols="12"
-                          sm="6"
-                        >
-                          <v-select
-                            :items="['视频封面', '视频播放', '视频内容']"
-                            label="问题分类"
-                            required
-                          />
-                        </v-col>
-                        <v-col
-                          cols="24"
-                          sm="6"
-                          md="4"
-                        >
-                          <v-text-field
-                            label="问题或建议"
-                            required
-                          />
-                        </v-col>
-                      </v-row>
-                    </v-container>
-                  </v-card-text>
-                  <v-card-actions>
-                    <v-spacer />
-                    <v-btn
-                      color="blue darken-1"
-                      text
-                      @click="collectionDialog = false"
-                    >
-                      关闭
-                    </v-btn>
-                    <v-btn
-                      color="blue darken-1"
-                      text
-                      @click="collectVideo"
-                    >
-                      提交
-                    </v-btn>
-                  </v-card-actions>
-                </v-card>
-              </v-dialog>
-
             </v-col>
-
-            <v-col cols="4">
+            <v-col cols="2">
+              <v-btn icon @click="collectVideo">
+                <v-icon>mdi-bookmark</v-icon>
+                <span>收藏</span>
+              </v-btn>
+            </v-col>
+            <v-col cols="2">
+              <v-btn icon @click="collectVideo">
+                <v-icon>mdi-repeat</v-icon>
+                <span>转发</span>
+              </v-btn>
+            </v-col>
+            <v-col cols="2">
               <v-btn icon @click="showErrDialog">
                 <v-icon>mdi-thumb-up</v-icon>
                 <span>反馈</span>
@@ -181,8 +137,7 @@
           <v-row>
             <v-col>
               <span v-for="item in videoData.tags" :key="item">
-                <!-- TODO 点击标签 button 时请求后端返回具有相同标签的所有视频并在新页面显示 -->
-                <v-btn rounded small text color="primary" dark>{{ item }}</v-btn>
+                <v-btn rounded small text color="primary" dark @click="jumpToTagPage(item)">{{ item }}</v-btn>
               </span>
             </v-col>
           </v-row>
@@ -313,6 +268,16 @@ export default {
       this.collectionDialog = false
       console.log('收藏 ' + this.videoId)
     },
+    jumpToTagPage(value) {
+      console.log('跳转到标签页: ' + value)
+      this.$router.push({
+        path: '/tag/result',
+        query: {
+          tag: value,
+          page: 1
+        }
+      })
+    },
     submitVideoErr() {
       this.showDialog = false
       console.log('提交视频错误')