├── .npmrc
├── .prettierrc
├── request
    ├── urls
    │   ├── reply.js
    │   ├── category.js
    │   ├── article.js
    │   ├── comment.js
    │   └── user.js
    ├── api
    │   ├── reply.js
    │   ├── category.js
    │   ├── comment.js
    │   ├── article.js
    │   └── user.js
    ├── request.js
    └── http.js
├── boblog.png
├── static
    └── favicon.ico
├── plugins
    ├── axios-ports.js
    ├── route.js
    ├── md.js
    ├── element-ui.js
    ├── axios.js
    └── scrollTo.js
├── .env.development
├── .env.production
├── layouts
    ├── hutao.vue
    └── default.vue
├── README.md
├── .editorconfig
├── .eslintrc.js
├── lib
    ├── auth.js
    ├── utils.js
    ├── hutao.js
    └── progress-indicator.js
├── store
    ├── category.js
    └── user.js
├── components
    ├── common
    │   ├── Footer.vue
    │   ├── Header.vue
    │   └── LoginForm.vue
    └── article
    │   └── ArticleComment.vue
├── package.json
├── .gitignore
├── nuxt.config.js
├── pages
    ├── user.vue
    ├── usercenter.vue
    ├── article.vue
    ├── index.vue
    └── hutao.vue
└── assets
    └── css
        └── common.css


/.npmrc:
--------------------------------------------------------------------------------
1 | registry = https://registry.npmmirror.com
2 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/request/urls/reply.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   create: '/reply'
3 | }
4 | 


--------------------------------------------------------------------------------
/boblog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lfb/nuxtjs-blog-web/HEAD/boblog.png


--------------------------------------------------------------------------------
/request/urls/category.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   list: '/category',
3 | }
4 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lfb/nuxtjs-blog-web/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/request/urls/article.js:
--------------------------------------------------------------------------------
1 | export default {
2 |     list: '/article',
3 |     detail: '/article',
4 | }
5 | 


--------------------------------------------------------------------------------
/request/urls/comment.js:
--------------------------------------------------------------------------------
1 | 
2 | export default {
3 |   create: '/comment',
4 |   target: '/comment/target/list',
5 | }
6 | 


--------------------------------------------------------------------------------
/plugins/axios-ports.js:
--------------------------------------------------------------------------------
1 | import { setClient } from '~/request/request'
2 | 
3 | export default ({ app, store }) => {
4 |     setClient(app.$axios)
5 | }
6 | 


--------------------------------------------------------------------------------
/request/urls/user.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   login: '/user/login',
3 |   register: '/user/register',
4 |   auth: '/user/auth',
5 |   list: '/user/list'
6 | }
7 | 


--------------------------------------------------------------------------------
/.env.development:
--------------------------------------------------------------------------------
1 | # just a flag
2 | NUXT_APP_ENV = 'development'
3 | 
4 | # base api
5 | BASE_URL = 'http://localhost:5000/api/v1'
6 | BOBLOG_TOKEN = 'BOBLOG_TOKEN'
7 | 


--------------------------------------------------------------------------------
/.env.production:
--------------------------------------------------------------------------------
1 | # just a flag
2 | NUXT_APP_ENV = 'production'
3 | 
4 | # base api
5 | BASE_URL = 'https://api.boblog.com/api/v1'
6 | BOBLOG_TOKEN = 'BOBLOG_TOKEN'
7 | 
8 | 


--------------------------------------------------------------------------------
/layouts/hutao.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Nuxt />
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 | }
 9 | </script>
10 | <style lang="scss" scoped>
11 | </style>
12 | 


--------------------------------------------------------------------------------
/request/api/reply.js:
--------------------------------------------------------------------------------
 1 | import { POST } from '../http.js'
 2 | import reply from '../urls/reply'
 3 | 
 4 | // 创建回复
 5 | export function createReply(data) {
 6 |   return POST({
 7 |     url: reply.create,
 8 |     data
 9 |   })
10 | }
11 | 


--------------------------------------------------------------------------------
/request/api/category.js:
--------------------------------------------------------------------------------
 1 | import { GET } from '../http.js'
 2 | import category from '../urls/category'
 3 | 
 4 | // 获取分类列表信息
 5 | export function getCategory(params) {
 6 |   return GET({
 7 |     url: category.list,
 8 |     params
 9 |   })
10 | }
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## 博客网站
 2 | 
 3 | 基于 Nuxt.js SSR 博客项目
 4 | 
 5 | - 技术栈：Vue.js, Nuxt.js, Vuex
 6 | - UI 框架：Element-UI
 7 | - Node.js 服务端 API 接口项目：[https://github.com/lfb/nodejs-koa-blog](https://github.com/lfb/nodejs-koa-blog)
 8 | - 欢迎大家指导~
 9 | 
10 | ![image.png](./boblog.png)
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/request/api/comment.js:
--------------------------------------------------------------------------------
 1 | import { GET, POST } from '../http.js'
 2 | import comment from '../urls/comment'
 3 | 
 4 | export function createComment(data) {
 5 |   return POST({
 6 |     url: comment.create,
 7 |     data
 8 |   })
 9 | }
10 | export function getCommentTarget(params) {
11 |   return GET({
12 |     url: comment.target,
13 |     params
14 |   })
15 | }
16 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Header />
 4 |     <Nuxt />
 5 |     <Footer />
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | import Header from '@/components/common/Header'
10 | import Footer from '@/components/common/Footer'
11 | export default {
12 |   components: {
13 |     Header,
14 |     Footer
15 |   },
16 | }
17 | </script>
18 | <style lang="scss" scoped>
19 | </style>
20 | 


--------------------------------------------------------------------------------
/request/api/article.js:
--------------------------------------------------------------------------------
 1 | import { GET } from '../http.js'
 2 | import article from '../urls/article'
 3 | 
 4 | // 获取文章详情
 5 | export function getArticleDetail(params) {
 6 |   return GET({
 7 |     url: article.detail + '/' + params.id,
 8 |     params
 9 |   })
10 | }
11 | 
12 | // 获取文章列表
13 | export function getArticleList(params) {
14 |   return GET({
15 |     url: article.list,
16 |     params
17 |   })
18 | }
19 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: '@babel/eslint-parser',
 9 |     requireConfigFile: false
10 |   },
11 |   extends: [
12 |     '@nuxtjs',
13 |     'plugin:nuxt/recommended',
14 |     'prettier'
15 |   ],
16 |   plugins: [
17 |   ],
18 |   // add your custom rules here
19 |   rules: {}
20 | }
21 | 


--------------------------------------------------------------------------------
/request/api/user.js:
--------------------------------------------------------------------------------
 1 | import { GET, POST } from '../http.js'
 2 | import user from '../urls/user'
 3 | 
 4 | // 用户登录
 5 | export function login(data) {
 6 |   return POST({
 7 |     url: user.login,
 8 |     data
 9 |   })
10 | }
11 | 
12 | // 用户注册
13 | export function register(data) {
14 |   return POST({
15 |     url: user.register,
16 |     data
17 |   })
18 | }
19 | // 用户信息
20 | export function info(data) {
21 |   return GET({
22 |     url: user.auth,
23 |     data
24 |   })
25 | }
26 | 


--------------------------------------------------------------------------------
/plugins/route.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default ({ app, store, env }) => {
 3 |   app.router.beforeEach(async (to, from, next) => {
 4 |     const isLoginStatus = store.state.user.isLoginStatus
 5 |     const token = app.$cookies.get(env.BOBLOG_TOKEN)
 6 | 
 7 |     // 存在token，且未登录状态获取用户信息
 8 |     if (!isLoginStatus && token) {
 9 |       const [err] = await store.dispatch('user/userInfo')
10 |       if (!err) {
11 |         next()
12 |       }
13 | 
14 |       next()
15 |     }
16 |     next()
17 |   })
18 | }
19 | 


--------------------------------------------------------------------------------
/lib/auth.js:
--------------------------------------------------------------------------------
 1 | import Cookies from 'js-cookie'
 2 | import { Base64 } from 'js-base64'
 3 | const BOBLOG_TOKEN = process.env.BOBLOG_TOKEN
 4 | 
 5 | export function encodeToken() {
 6 |   const token = getToken()
 7 |   const base64 = Base64.encode(token + ':')
 8 |   return 'Basic ' + base64
 9 | }
10 | 
11 | export function getToken() {
12 |   return Cookies.get(BOBLOG_TOKEN)
13 | }
14 | 
15 | export function setToken(token) {
16 |   return Cookies.set(BOBLOG_TOKEN, token)
17 | }
18 | 
19 | export function removeToken() {
20 |   return Cookies.remove(BOBLOG_TOKEN)
21 | }
22 | 


--------------------------------------------------------------------------------
/request/request.js:
--------------------------------------------------------------------------------
 1 | let client
 2 | 
 3 | export function setClient(newclient) {
 4 |     client = newclient
 5 | }
 6 | 
 7 | // Request helpers
 8 | const reqMethods = [
 9 |     'request',
10 |     'delete',
11 |     'get',
12 |     'head',
13 |     'options', // url, config
14 |     'post',
15 |     'put',
16 |     'patch' // url, data, config
17 | ]
18 | const service = {}
19 | 
20 | reqMethods.forEach(method => {
21 |     service[method] = function () {
22 |         if (!client) throw new Error('apiClient not installed')
23 |         return client[method].apply(null, arguments)
24 |     }
25 | })
26 | 
27 | export default service
28 | 


--------------------------------------------------------------------------------
/lib/utils.js:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * 验证邮箱
 4 |  * @param {string} email
 5 |  * @returns {Boolean}
 6 |  */
 7 | export function validEmail(email) {
 8 |   const reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/
 9 |   return reg.test(email)
10 | }
11 | 
12 | /**
13 |  * 验证密码
14 |  * @param {string} email
15 |  * @returns {Boolean}
16 |  */
17 | export function validPassword(email) {
18 |   const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]/
19 |   return reg.test(email)
20 | }
21 | 
22 | /**
23 |  * 判断是否是数组
24 |  * @param arr
25 |  * @returns {boolean}
26 |  */
27 | export function isArray(arr) {
28 |   return Array.isArray(arr) && arr.length > 0
29 | }
30 | 


--------------------------------------------------------------------------------
/plugins/md.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | const hljs = require('highlight.js')
 3 | 
 4 | const md = require('markdown-it')({
 5 |   highlight(str, lang) {
 6 |     if (lang && hljs.getLanguage(lang)) {
 7 |       try {
 8 |         return (
 9 |           '<pre class="hljs"><code>' +
10 |           hljs.highlight(str, {
11 |             language: lang,
12 |             ignoreIllegals: true,
13 |           }).value +
14 |           '</code></pre>'
15 |         )
16 |       } catch (__) { }
17 |     }
18 | 
19 |     return (
20 |       '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>'
21 |     )
22 |   },
23 | })
24 | 
25 | Vue.prototype.$md = md;
26 | export default md;
27 | 


--------------------------------------------------------------------------------
/store/category.js:
--------------------------------------------------------------------------------
 1 | import { getCategory } from '@/request/api/category'
 2 | const state = () => ({
 3 |   categoryList: [],
 4 | })
 5 | 
 6 | const mutations = {
 7 |   SET_CATEGORY_LIST(state, data) {
 8 |     state.categoryList = data
 9 |   },
10 | 
11 | }
12 | 
13 | const actions = {
14 |   async getCategoryData({ state, commit }, params = {}) {
15 |     if (Array.isArray(state.categoryList) && state.categoryList.length > 0) {
16 |       return state.categoryList
17 |     } else {
18 |       const [err, res] = await getCategory(params)
19 |       if (!err) {
20 |         const category = res.data.data.data
21 |         commit('SET_CATEGORY_LIST', category)
22 |         return category
23 |       } else {
24 |         return err
25 |       }
26 |     }
27 |   },
28 | }
29 | 
30 | export default {
31 |   namespace: true,
32 |   state,
33 |   actions,
34 |   mutations
35 | }
36 | 


--------------------------------------------------------------------------------
/plugins/element-ui.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import {
 3 |   Icon,
 4 |   Drawer,
 5 |   Dialog,
 6 |   Button,
 7 |   Avatar,
 8 |   Dropdown,
 9 |   DropdownMenu,
10 |   DropdownItem,
11 |   Pagination,
12 |   Input,
13 |   Loading,
14 |   MessageBox,
15 |   Message,
16 | } from 'element-ui'
17 | 
18 | import locale from 'element-ui/lib/locale/lang/en'
19 | 
20 | const components = [
21 |   Icon,
22 |   Button,
23 |   Avatar,
24 |   Dialog,
25 |   Dropdown,
26 |   DropdownMenu,
27 |   DropdownItem,
28 |   Pagination,
29 |   Input,
30 |   Drawer
31 | ]
32 | const Element = {
33 |   install(Vue) {
34 |     components.forEach(component => {
35 |       Vue.component(component.name, component)
36 |     })
37 |   }
38 | }
39 | 
40 | Vue.use(Loading.directive);
41 | Vue.prototype.$loading = Loading.service;
42 | Vue.prototype.$msgbox = MessageBox;
43 | Vue.prototype.$alert = MessageBox.alert;
44 | Vue.prototype.$confirm = MessageBox.confirm;
45 | Vue.prototype.$prompt = MessageBox.prompt;
46 | Vue.prototype.$message = Message;
47 | 
48 | Vue.use(Element, { locale })
49 | 


--------------------------------------------------------------------------------
/plugins/axios.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import { removeToken, encodeToken } from "@/lib/auth";
 3 | 
 4 | export default ({ $axios, store }) => {
 5 |   $axios.onRequest(config => {
 6 |     config.baseURL = process.env.BASE_URL
 7 |     config.headers.Authorization = encodeToken()
 8 | 
 9 |     return config
10 |   })
11 | 
12 |   $axios.onResponse(res => {
13 |     if (res.status === 200 && res.data.code === 200) {
14 |       return res
15 |     } else {
16 |       Vue.prototype.$message.error(res.data.msg || '获取失败')
17 |       return Promise.reject(res)
18 |     }
19 |   })
20 | 
21 |   $axios.onError(err => {
22 |     const { response } = err || {}
23 | 
24 |     // 处理token过期无效情况，清除token，初始化store数据
25 |     if ([401, 403].includes(response?.status)) {
26 |       removeToken()
27 |       store.commit('user/SET_LOGIN_STATUS', false)
28 |       store.commit('user/SET_USERINFO', null)
29 |     }
30 | 
31 |     const msg = Array.isArray(response?.data.msg) ? response?.data?.msg.join(',') : response?.data?.msg
32 |     Vue.prototype.$message.error(msg || '获取失败')
33 |     return Promise.reject(err)
34 |   })
35 | }
36 | 


--------------------------------------------------------------------------------
/components/common/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="response-wrap footer">
 3 |     <div class="site">
 4 |       <span>© 波波博客 - BoBlog.com</span>
 5 |       <span>itbo@163.com</span>
 6 |     </div>
 7 |     <div class="copyright">
 8 |       <a
 9 |         class="copyright-link"
10 |         href="https://beian.miit.gov.cn"
11 |         target="_blank"
12 |       >
13 |         粤ICP备2020120493号
14 |       </a>
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 |   name: 'FooterIndex',
22 | }
23 | </script>
24 | 
25 | <style scoped lang="scss">
26 | .footer {
27 |   display: flex;
28 |   justify-content: space-between;
29 |   margin: 120px auto 64px;
30 | }
31 | .site {
32 |   font-size: 14px;
33 |   color: #666666;
34 | }
35 | .site span {
36 |   margin-right: 24px;
37 | }
38 | .copyright {
39 |   &-link {
40 |     font-size: 14px;
41 |     color: #666666;
42 |     text-decoration: none;
43 |   }
44 | }
45 | 
46 | @media screen and (max-width: 540px) {
47 |   .footer {
48 |     flex-direction: column;
49 |     margin: 32px auto;
50 |   }
51 |   .copyright {
52 |     margin-top: 10px;
53 |   }
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/request/http.js:
--------------------------------------------------------------------------------
 1 | import service from '~/request/request.js'
 2 | 
 3 | export function GET(config) {
 4 |     const { url = '', data = {}, ...opt } = config
 5 |     return service
 6 |         .get(url, {
 7 |             params: data,
 8 |             ...opt
 9 |         })
10 |         .then(res => {
11 |             return [null, res]
12 |         })
13 |         .catch(err => {
14 | 
15 |             return [err, null]
16 |         })
17 | }
18 | export function POST(config) {
19 |     const { url = '', data = {}, ...opt } = config
20 |     return service
21 |         .post(url, data, opt)
22 |         .then(res => {
23 |             return [null, res]
24 |         })
25 |         .catch(err => {
26 |             return [err, null]
27 |         })
28 | }
29 | 
30 | export function UPLOAD(config) {
31 |     const { url = '', data = {}, ...opt } = config
32 |     return service
33 |         .post(url, data, {
34 |             headers: {
35 |                 'Content-Type': 'multipart/form-data'
36 |             },
37 |             ...opt
38 |         })
39 |         .then(res => {
40 |             return [null, res]
41 |         })
42 |         .catch(err => {
43 |             return [err, null]
44 |         })
45 | }
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "config": {
 6 |     "nuxt": {
 7 |       "host": "localhost",
 8 |       "port": "3000"
 9 |     }
10 |   },
11 |   "scripts": {
12 |     "dev": "cross-env NODE_ENV=development nuxt",
13 |     "build": "nuxt build",
14 |     "start": "nuxt start",
15 |     "generate": "nuxt generate",
16 |     "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
17 |     "lint": "yarn lint:js"
18 |   },
19 |   "dependencies": {
20 |     "@nuxtjs/axios": "^5.13.6",
21 |     "@xunlei/vue-lazy-component": "^1.1.3",
22 |     "babel-plugin-component": "^1.1.1",
23 |     "cookie-universal-nuxt": "^2.1.5",
24 |     "core-js": "^3.15.1",
25 |     "cross-env": "^7.0.3",
26 |     "dotenv": "^10.0.0",
27 |     "element-ui": "^2.15.2",
28 |     "highlight.js": "^11.1.0",
29 |     "js-base64": "^3.6.1",
30 |     "js-cookie": "^2.2.1",
31 |     "markdown-it": "^12.1.0",
32 |     "node-sass": "^6.0.1",
33 |     "nuxt": "^2.15.7",
34 |     "sass-loader": "^10.1.1"
35 |   },
36 |   "devDependencies": {
37 |     "@babel/eslint-parser": "^7.14.7",
38 |     "@nuxtjs/eslint-config": "^6.0.1",
39 |     "@nuxtjs/eslint-module": "^3.0.2",
40 |     "eslint": "^7.29.0",
41 |     "eslint-config-prettier": "^8.3.0",
42 |     "eslint-plugin-nuxt": "^2.0.0",
43 |     "eslint-plugin-vue": "^7.12.1",
44 |     "prettier": "^2.3.2"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/lib/hutao.js:
--------------------------------------------------------------------------------
 1 | export const LEVEL_TEXT = {
 2 |   SSS: {
 3 |     level: 'SSS',
 4 |     color: '#ff9900',
 5 |     star: 5,
 6 |     text: '胡桃厨天花板级圣遗物，又称遗物级圣遗物，恭喜你，你的有效词条数已经接近满值，增伤点数极限为 5。'
 7 |   },
 8 |   SS: {
 9 |     level: 'SS',
10 |     color: '#19be6b',
11 |     star: 4,
12 |     text: '极品圣遗物，欧皇专属，很给力的圣遗物，3 的增伤值达标，下一阶段需要 4 的增伤值。'
13 |   },
14 |   S: {
15 |     level: 'S',
16 |     color: '#5cadff',
17 |     star: 3,
18 |     text: '毕业圣遗物，如果你不是胡桃厨可以休息啦！2 的增伤值达标，下一阶段需要 3 的增伤值。'
19 |   },
20 |   C: {
21 |     level: 'C',
22 |     star: 2,
23 |     color: '#808695',
24 |     text: '赶快为你的老婆多刷点圣遗物吧，都快穷的吃土了，下一阶段需要 2 的增伤值。'
25 |   }
26 | }
27 | 
28 | export const ATTRIBUTES_MAP = {
29 |   JING_TONG: 23.31,
30 |   SHENG_MING_BAI_FEN_BI: 5.83,
31 |   XIAO_SHENG_MING: 906,
32 |   BAO_SHANG: 7.77,
33 |   GONG_JI_BAI_FEN_BI: 5.83,
34 |   XIAO_GONG_JI: 41
35 | }
36 | 
37 | export const equipArray = [{
38 |   key: 'JING_TONG',
39 |   name: '精通',
40 |   value: '',
41 |   placeholder: '精通'
42 | },
43 |   {
44 |     key: 'BAO_SHANG',
45 |     name: '爆伤',
46 |     value: '',
47 |     placeholder: '暴击伤害'
48 |   },
49 |   {
50 |     key: 'SHENG_MING_BAI_FEN_BI',
51 |     name: '大生命',
52 |     value: '',
53 |     placeholder: '生命百分比'
54 |   },
55 |   {
56 |     key: 'XIAO_SHENG_MING',
57 |     name: '小生命',
58 |     value: '',
59 |     placeholder: '小生命'
60 |   },
61 |   {
62 |     key: 'GONG_JI_BAI_FEN_BI',
63 |     name: '大攻击',
64 |     value: '',
65 |     placeholder: '攻击百分比',
66 |     isUndivided: true
67 |   },
68 |   {
69 |     key: 'XIAO_GONG_JI',
70 |     name: '小攻击',
71 |     value: '',
72 |     placeholder: '小攻击',
73 |     isUndivided: true
74 |   }
75 | ]
76 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | const dotenv = require('dotenv')
 2 | const envConfig = dotenv.config({ path: `.env.${process.env.NODE_ENV}` }).parsed
 3 | 
 4 | export default {
 5 |   // Global page headers: https://go.nuxtjs.dev/config-head
 6 |   head: {
 7 |     title: 'frontend',
 8 |     htmlAttrs: {
 9 |       lang: 'en'
10 |     },
11 |     meta: [
12 |       { charset: 'utf-8' },
13 |       { name: 'viewport', content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0' },
14 |       { hid: 'description', name: 'description', content: '' },
15 |       { name: 'format-detection', content: 'telephone=no' }
16 |     ],
17 |     link: [
18 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
19 |     ]
20 |   },
21 | 
22 |   // Global CSS: https://go.nuxtjs.dev/config-css
23 |   css: [
24 |     '@/assets/css/common.css',
25 |     'element-ui/lib/theme-chalk/index.css'
26 |   ],
27 | 
28 |   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
29 |   plugins: [
30 |     '@/plugins/axios',
31 |     '@/plugins/axios-ports',
32 |     '@/plugins/md',
33 |     '@/plugins/route',
34 |     { src: '@/plugins/scrollTo', mode: 'client' },
35 |     '@/plugins/element-ui'
36 |   ],
37 | 
38 |   // Auto import components: https://go.nuxtjs.dev/config-components
39 |   // components: true,
40 | 
41 |   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
42 |   buildModules: [
43 |     // https://go.nuxtjs.dev/eslint
44 |     // '@nuxtjs/eslint-module',
45 |   ],
46 | 
47 |   // Modules: https://go.nuxtjs.dev/config-modules
48 |   modules: [
49 |     '@nuxtjs/axios',
50 |     'cookie-universal-nuxt',
51 |     ['cookie-universal-nuxt', { alias: 'cookiz' }],
52 |   ],
53 |   env: envConfig,
54 |   // Build Configuration: https://go.nuxtjs.dev/config-build
55 |   build: {
56 |     transpile: [/^element-ui/],
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/store/user.js:
--------------------------------------------------------------------------------
 1 | import { login, register, info } from '@/request/api/user'
 2 | import { setToken } from "@/lib/auth";
 3 | 
 4 | const state = () => ({
 5 |   userInfo: null,
 6 |   isLoginStatus: false
 7 | })
 8 | 
 9 | const mutations = {
10 |   SET_USERINFO(state, data) {
11 |     state.userInfo = data
12 |   },
13 |   SET_LOGIN_STATUS(state, data) {
14 |     state.isLoginStatus = data
15 |   }
16 | }
17 | 
18 | const actions = {
19 |   async userLogin({ state, commit }, params = {}) {
20 |     const [err, res] = await login(params)
21 |     if (!err) {
22 |       const user = res.data.data
23 |       commit('SET_USERINFO', {
24 |         id: user.id,
25 |         username: user.username,
26 |         email: user.email
27 |       })
28 |       commit('SET_LOGIN_STATUS', true)
29 |       setToken(user.token)
30 |       return [null, user]
31 |     } else {
32 |       return [err, null]
33 |     }
34 |   },
35 |   async userRegister({ state, commit }, params = {}) {
36 |     const [err, res] = await register(params)
37 |     if (!err) {
38 |       const user = res.data.data
39 |       commit('SET_USERINFO', {
40 |         id: user.id,
41 |         username: user.username,
42 |         email: user.email
43 |       })
44 |       commit('SET_LOGIN_STATUS', true)
45 |       setToken(user.token)
46 |       return [null, user]
47 |     } else {
48 |       return [err, null]
49 |     }
50 | 
51 |   },
52 |   async userInfo({ state, commit }, params = {}) {
53 |     if (state.isLoginStatus && state.userInfo) {
54 |       return state.userInfo
55 |     }
56 | 
57 |     const [err, res] = await info(params)
58 |     if (!err) {
59 |       const user = res.data.data
60 |       commit('SET_USERINFO', {
61 |         id: user.id,
62 |         username: user.username,
63 |         email: user.email
64 |       })
65 |       commit('SET_LOGIN_STATUS', true)
66 |       return [null, user]
67 |     } else {
68 |       return [err, null]
69 |     }
70 |   },
71 | }
72 | 
73 | export default {
74 |   namespace: true,
75 |   state,
76 |   actions,
77 |   mutations
78 | }
79 | 


--------------------------------------------------------------------------------
/plugins/scrollTo.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | Math.easeInOutQuad = function (t, b, c, d) {
 4 |     // eslint-disable-next-line no-param-reassign
 5 |     t /= d / 2
 6 |     if (t < 1) {
 7 |         return (c / 2) * t * t + b
 8 |     }
 9 |     // eslint-disable-next-line no-param-reassign
10 |     t--
11 |     return (-c / 2) * (t * (t - 2) - 1) + b
12 | }
13 | 
14 | // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
15 | const requestAnimFrame = (function () {
16 |     return (
17 |         window.requestAnimationFrame ||
18 |         window.webkitRequestAnimationFrame ||
19 |         window.mozRequestAnimationFrame ||
20 |         function (callback) {
21 |             window.setTimeout(callback, 1000 / 60)
22 |         }
23 |     )
24 | })()
25 | 
26 | // because it's so fucking difficult to detect the scrolling element, just move them all
27 | function move(amount) {
28 |     document.documentElement.scrollTop = amount
29 |     document.body.parentNode.scrollTop = amount
30 |     document.body.scrollTop = amount
31 | }
32 | 
33 | function position() {
34 |     return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
35 | }
36 | 
37 | function scrollTo(to, duration, callback) {
38 |     const start = position()
39 |     const change = to - start
40 |     const increment = 20
41 |     let currentTime = 0
42 |     // eslint-disable-next-line no-param-reassign
43 |     duration = typeof duration === 'undefined' ? 500 : duration
44 |     const animateScroll = function () {
45 |         // increment the time
46 |         currentTime += increment
47 |         // find the value with the quadratic in-out easing function
48 |         const val = Math.easeInOutQuad(currentTime, start, change, duration)
49 |         // move the document.body
50 |         move(val)
51 |         // do the animation unless its over
52 |         if (currentTime < duration) {
53 |             requestAnimFrame(animateScroll)
54 |         } else if (callback && typeof callback === 'function') {
55 |             // the animation is done so lets callback
56 |             callback()
57 |         }
58 |     }
59 |     animateScroll()
60 | }
61 | 
62 | 
63 | Vue.prototype.$scrollTo = scrollTo
64 | 
65 | export default scrollTo
66 | 


--------------------------------------------------------------------------------
/pages/user.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <Header />
  4 |     <div v-if="userInfo" class="userinfo">
  5 |       <p>昵称：{{ userInfo.username }}</p>
  6 |       <p>邮箱：{{ userInfo.email }}</p>
  7 |       <p style="text-indent: 2em">
  8 |         —— 假如生活欺骗了你，请你不要放弃，坚持下去！天是不会给绝路你的！
  9 |       </p>
 10 | 
 11 |       <div
 12 |         v-if="Array.isArray(commentList) && commentList.length > 0"
 13 |         class="comment"
 14 |       >
 15 |         <h2>评论列表：</h2>
 16 |         <ul class="comment-list">
 17 |           <li v-for="item in commentList" :key="item.id" class="comment-item">
 18 |             <p>文章：{{ item.article.title }}</p>
 19 |             <p>评论内容：{{ item.content }}</p>
 20 |             <p>评论时间：{{ item.created_at }}</p>
 21 |             <p>回复：{{ item.reply_list || '无' }}</p>
 22 |           </li>
 23 |         </ul>
 24 |         <div class="pagination">
 25 |           <el-pagination
 26 |             background
 27 |             :current-page.sync="page"
 28 |             layout="total, prev, pager, next"
 29 |             :total="count"
 30 |             @current-change="handleCurrentChange"
 31 |           />
 32 |         </div>
 33 |       </div>
 34 |     </div>
 35 |   </div>
 36 | </template>
 37 | 
 38 | <script>
 39 | import { mapState } from 'vuex'
 40 | import Header from '@/components/common/Header'
 41 | import { getCommentTarget } from '@/request/api/comment'
 42 | 
 43 | export default {
 44 |   name: 'UserIndex',
 45 |   components: {
 46 |     Header,
 47 |   },
 48 |   data() {
 49 |     return {
 50 |       page: 1,
 51 |       count: 0,
 52 |       commentList: [],
 53 |     }
 54 |   },
 55 |   computed: {
 56 |     ...mapState({
 57 |       userInfo: (state) => state.user.userInfo,
 58 |     }),
 59 |   },
 60 |   async fetch({ store }) {
 61 |     await store.dispatch('category/getCategoryData')
 62 |   },
 63 |   head() {
 64 |     return {
 65 |       title: `${this.userInfo.username} - 个人中心  - boblog.com`,
 66 |       meta: [
 67 |         {
 68 |           name: 'keywords',
 69 |           content:
 70 |             '波波,博客,波波博客,梁凤波,bo,blog,boblog,前端开发工程师,前端性能优化,JavaScript,css,html',
 71 |         },
 72 |         {
 73 |           name: 'description',
 74 |           content: '波波博客 - BoBlog.com，专注于前端开发技术，前端性能优化！',
 75 |         },
 76 |       ],
 77 |     }
 78 |   },
 79 |   mounted() {
 80 |     this.getComment()
 81 |   },
 82 |   methods: {
 83 |     async getComment() {
 84 |       const uid = this.userInfo && this.userInfo.id
 85 |       const [err, res] = await getCommentTarget({
 86 |         user_id: uid,
 87 |         is_replay: 1,
 88 |         is_article: 1,
 89 |         page: this.page,
 90 |       })
 91 |       if (!err) {
 92 |         this.isLoad = true
 93 |         this.commentList = res.data.data.data
 94 |         this.count = res.data.data.meta.count
 95 |       }
 96 |     },
 97 |     // 点击数字
 98 |     async handleCurrentChange(page) {
 99 |       this.page = page
100 |       await this.getComment()
101 |       this.$scrollTo(0)
102 |     },
103 |   },
104 | }
105 | </script>
106 | 
107 | <style scoped lang="scss">
108 | .userinfo {
109 |   width: 1024px;
110 |   margin: 32px auto;
111 |   font-size: 14px;
112 | }
113 | .comment-item {
114 |   padding: 20px 0;
115 |   border-bottom: 1px solid #f0f0f0;
116 | }
117 | </style>
118 | 


--------------------------------------------------------------------------------
/pages/usercenter.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div v-if="userInfo" class="userinfo">
  4 |       <p>昵称：{{ userInfo.username }}</p>
  5 |       <p>邮箱：{{ userInfo.email }}</p>
  6 |       <p style="text-indent: 2em">
  7 |         —— 假如生活欺骗了你，请你不要放弃，坚持下去！天是不会给绝路你的！
  8 |       </p>
  9 |       <el-button @click="logout"> 退出登录 </el-button>
 10 | 
 11 |       <div
 12 |         v-if="Array.isArray(commentList) && commentList.length > 0"
 13 |         class="comment"
 14 |       >
 15 |         <h2>评论列表：</h2>
 16 |         <ul class="comment-list">
 17 |           <li v-for="item in commentList" :key="item.id" class="comment-item">
 18 |             <p>文章：{{ item.article.title }}</p>
 19 |             <p>评论内容：{{ item.content }}</p>
 20 |             <p>评论时间：{{ item.created_at }}</p>
 21 |             <p>回复：{{ item.reply_list || '无' }}</p>
 22 |           </li>
 23 |         </ul>
 24 |         <div class="pagination">
 25 |           <el-pagination
 26 |             background
 27 |             :current-page.sync="page"
 28 |             layout="total, prev, pager, next"
 29 |             :total="count"
 30 |             @current-change="handleCurrentChange"
 31 |           />
 32 |         </div>
 33 |       </div>
 34 |     </div>
 35 |   </div>
 36 | </template>
 37 | 
 38 | <script>
 39 | import { mapState } from 'vuex'
 40 | import { getCommentTarget } from '@/request/api/comment'
 41 | import { removeToken } from '@/lib/auth'
 42 | 
 43 | export default {
 44 |   name: 'UserCenter',
 45 |   data() {
 46 |     return {
 47 |       page: 1,
 48 |       count: 0,
 49 |       commentList: [],
 50 |     }
 51 |   },
 52 |   computed: {
 53 |     ...mapState({
 54 |       userInfo: (state) => state.user.userInfo,
 55 |     }),
 56 |   },
 57 |   async fetch({ store }) {
 58 |     await store.dispatch('category/getCategoryData')
 59 |   },
 60 |   head() {
 61 |     return {
 62 |       title: `${
 63 |         this.userInfo && this.userInfo.username
 64 |       } - 个人中心  - boblog.com`,
 65 |       meta: [
 66 |         {
 67 |           name: 'keywords',
 68 |           content:
 69 |             '波波,博客,波波博客,梁凤波,bo,blog,boblog,前端开发工程师,前端性能优化,JavaScript,css,html',
 70 |         },
 71 |         {
 72 |           name: 'description',
 73 |           content: '波波博客 - BoBlog.com，专注于前端开发技术，前端性能优化！',
 74 |         },
 75 |       ],
 76 |     }
 77 |   },
 78 |   mounted() {
 79 |     this.getComment()
 80 |   },
 81 |   methods: {
 82 |     // 退出登录
 83 |     logout() {
 84 |       removeToken()
 85 |       this.$store.commit('user/SET_LOGIN_STATUS', false)
 86 |       this.$store.commit('user/SET_USERINFO', null)
 87 |       this.$router.push('/')
 88 |     },
 89 |     async getComment() {
 90 |       const uid = this.userInfo && this.userInfo.id
 91 |       const [err, res] = await getCommentTarget({
 92 |         user_id: uid,
 93 |         is_replay: 1,
 94 |         is_article: 1,
 95 |         page: this.page,
 96 |       })
 97 |       if (!err) {
 98 |         this.isLoad = true
 99 |         this.commentList = res.data.data.data
100 |         this.count = res.data.data.meta.count
101 |       }
102 |     },
103 |     // 点击数字
104 |     async handleCurrentChange(page) {
105 |       this.page = page
106 |       await this.getComment()
107 |       this.$scrollTo(0)
108 |     },
109 |   },
110 | }
111 | </script>
112 | 
113 | <style scoped lang="scss">
114 | .userinfo {
115 |   width: 1024px;
116 |   margin: 32px auto;
117 |   font-size: 14px;
118 | }
119 | .comment-item {
120 |   padding: 20px 0;
121 |   border-bottom: 1px solid #f0f0f0;
122 | }
123 | </style>
124 | 


--------------------------------------------------------------------------------
/assets/css/common.css:
--------------------------------------------------------------------------------
  1 | /*highlight.js*/
  2 | /*Syntax highlighting for the Web*/
  3 | /*@font-face {*/
  4 | /*  font-family: "Roboto";*/
  5 | /*  src: url("https://cdn.boblog.com/Roboto-Regular.ttf");*/
  6 | /*}*/
  7 | 
  8 | /*@font-face {*/
  9 | /*  font-family: "NotoSansTC";*/
 10 | /*  src: url("https://cdn.boblog.com/NotoSansTC-Regular.otf");*/
 11 | /*}*/
 12 | 
 13 | @font-face {
 14 |   font-family: "SourceCodePro-Regular";
 15 |   src: url("https://cdn.boblog.com/SourceCodePro-Regular.ttf");
 16 |   font-weight: normal;
 17 | }
 18 | /*@font-face {*/
 19 | /*  font-family: "SourceCodePro";*/
 20 | /*  src: url("https://cdn.boblog.com/SourceCodePro-Bold.ttf");*/
 21 | /*  font-weight: bold;*/
 22 | /*}*/
 23 | @font-face {
 24 |   font-family: "SourceCodePro";
 25 |   src: url("https://cdn.boblog.com/SourceCodePro-Medium.ttf");
 26 |   font-weight: 600;
 27 | }
 28 | /*@font-face {*/
 29 | /*  font-family: "JetBrainsMono";*/
 30 | /*  src: url("https://cdn.boblog.com/JetBrainsMono-VariableFont_wght.ttf");*/
 31 | /*}*/
 32 | 
 33 | /*html,*/
 34 | /*body,*/
 35 | /*div,*/
 36 | /*h1,*/
 37 | /*h2,*/
 38 | /*h3,*/
 39 | /*h4,*/
 40 | /*h5,*/
 41 | /*h6,*/
 42 | /*a,*/
 43 | /*p,*/
 44 | /*ul,*/
 45 | /*li {*/
 46 | /*  padding: 0;*/
 47 | /*  margin: 0;*/
 48 | /*  box-sizing: border-box;*/
 49 | /*}*/
 50 | 
 51 | /*a {*/
 52 | /*  color: #0164da;*/
 53 | /*  text-decoration: none;*/
 54 | /*}*/
 55 | 
 56 | /*li {*/
 57 | /*  list-style: none;*/
 58 | /*}*/
 59 | 
 60 | /*img {*/
 61 | /*  width: 100%;*/
 62 | /*}*/
 63 | 
 64 | /*pre {*/
 65 | /*  padding: 1em;*/
 66 | /*}*/
 67 | /*pre code.hljs {*/
 68 | /*  display: block;*/
 69 | /*  overflow-x: auto;*/
 70 | /*  padding: 1em*/
 71 | /*}*/
 72 | 
 73 | /*code.hljs {*/
 74 | /*  padding: 3px 5px*/
 75 | /*}*/
 76 | html, body {
 77 |   margin: 0;
 78 |   padding: 0;
 79 |   font-family: SourceCodePro-Regular;
 80 | }
 81 |  img {
 82 |    width: 100%;
 83 |  }
 84 | 
 85 | .hljs {
 86 |   box-sizing: border-box;
 87 |   color: #abb2bf;
 88 |   font-size: 13px;
 89 |   background: #282c34;
 90 |   padding: 16px;
 91 |   border-radius: 4px;
 92 |   overflow: hidden;
 93 |   overflow-x: scroll;
 94 | }
 95 | .hljs code {
 96 |   line-height: 1.5;
 97 |   box-sizing: border-box;
 98 |   font-family: SourceCodePro;
 99 |   /*font-family: "JetBrainsMono";*/
100 | }
101 | 
102 | .hljs-comment,.hljs-quote {
103 |   color: #5c6370;
104 |   font-style: italic
105 | }
106 | 
107 | .hljs-doctag,.hljs-formula,.hljs-keyword {
108 |   color: #c678dd
109 | }
110 | 
111 | .hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst {
112 |   color: #e06c75
113 | }
114 | 
115 | .hljs-literal {
116 |   color: #56b6c2
117 | }
118 | 
119 | .hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string {
120 |   color: #98c379
121 | }
122 | 
123 | .hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable {
124 |   color: #d19a66
125 | }
126 | 
127 | .hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title {
128 |   color: #61aeee
129 | }
130 | 
131 | .hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_ {
132 |   color: #e6c07b
133 | }
134 | 
135 | .hljs-emphasis {
136 |   font-style: italic
137 | }
138 | 
139 | .hljs-strong {
140 |   font-weight: 700
141 | }
142 | 
143 | .hljs-link {
144 |   text-decoration: underline
145 | }
146 | 
147 | .opacity {
148 |   opacity: 0.5;
149 | }
150 | 
151 | .pagination {
152 |   box-sizing: border-box;
153 |   width: 100%;
154 |   display: flex;
155 |   align-items: center;
156 |   justify-content: center;
157 |   padding: 15px 0;
158 | }
159 | 
160 | .response-wrap {
161 |   box-sizing: border-box;
162 |   max-width: 61.8%;
163 |   padding: 0;
164 |   margin: 0 auto;
165 | }
166 | 
167 | 
168 | .progress-indicator {
169 |   position: fixed;
170 |   top: 0;
171 |   left: 0;
172 |   height: 3px;
173 |   background-color: #0A74DA;
174 | }
175 | 
176 | @media screen and (max-width: 540px) {
177 |   .response-wrap {
178 |     max-width: 100%;
179 |     padding: 0 24px;
180 |   }
181 | }
182 | 
183 | .page-enter-active, .page-leave-active {
184 |   transition: opacity 500ms;
185 | }
186 | 
187 | .page-enter, .page-leave-active {
188 |   opacity: 0;
189 | }
190 | 


--------------------------------------------------------------------------------
/pages/article.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div v-if='article'>
  4 |       <div class="response-wrap">
  5 |         <div  class="article">
  6 |           <h1 class="title">
  7 |             {{ article.title }}
  8 |           </h1>
  9 |           <div class="info">
 10 |             <span v-if="nickname" class="author"> By {{ nickname }} </span>
 11 |             <span class="created-at">{{ article.created_at }}</span>
 12 |             <span v-if="article.category_info" class="category">
 13 |             文章分类：{{ article.category_info.name }}
 14 |           </span>
 15 |           </div>
 16 |           <div class="article-content" v-html="article.content"></div>
 17 |         </div>
 18 |         <div class="fixed-sidebar">
 19 |           <div class="fixed-scroll-top">
 20 |             <i class="el-icon-top" @click="scrollTop"></i>
 21 |           </div>
 22 |         </div>
 23 |       </div>
 24 | 
 25 |       <vue-lazy-component @after-leave="onLoadEnd">
 26 |         <ArticleComment class="response-wrap" />
 27 |         <img
 28 |           width="0"
 29 |           height="0"
 30 |           style="display: none"
 31 |           src="https://cdn.boblog.com/login-bg.png"
 32 |           alt="preload"
 33 |         />
 34 |       </vue-lazy-component>
 35 |     </div>
 36 |     <div v-else class='empty-data'>
 37 |       暂无数据
 38 |     </div>
 39 |   </div>
 40 | </template>
 41 | <script>
 42 | import { getArticleDetail } from '@/request/api/article'
 43 | import ArticleComment from '@/components/article/ArticleComment'
 44 | import { mapState } from 'vuex'
 45 | import { component as VueLazyComponent } from '@xunlei/vue-lazy-component'
 46 | 
 47 | export default {
 48 |   name: 'ArticleDetail',
 49 |   components: {
 50 |     ArticleComment,
 51 |     VueLazyComponent,
 52 |   },
 53 |   async asyncData(context) {
 54 |     const { id } = context.query
 55 |     const params = {
 56 |       id,
 57 |       is_markdown: true,
 58 |     }
 59 |     const [err, res] = await getArticleDetail(params)
 60 |     if (!err) {
 61 |       return {
 62 |         article: res.data.data,
 63 |       }
 64 |     }
 65 | 
 66 |   },
 67 |   data() {
 68 |     return {
 69 |       article: null,
 70 |       isLogin: false,
 71 |     }
 72 |   },
 73 |   async fetch({ store }) {
 74 |     await store.dispatch('category/getCategoryData')
 75 |   },
 76 |   head() {
 77 |     const article = this.article || {}
 78 |     return {
 79 |       title: article.title,
 80 |       meta: [
 81 |         { name: 'keywords', content: article.seo_keyword },
 82 |         { name: 'description', content: article.description },
 83 |       ],
 84 |     }
 85 |   },
 86 |   computed: {
 87 |     ...mapState({
 88 |       userInfo: (state) => state.user.userInfo,
 89 |       isLoginStatus: (state) => state.user.isLoginStatus,
 90 |     }),
 91 |     nickname() {
 92 |       if(this.article && this.article.admin_info) {
 93 |         return this.article.admin_info.nickname
 94 |       }
 95 |       return ''
 96 |     }
 97 |   },
 98 |   beforeDestroy() {
 99 |     if(this.progress) {
100 |       this.progress.removeProgress()
101 |       this.progress = null
102 |     }
103 | 
104 |   },
105 |   mounted() {
106 |     this.initData()
107 |   },
108 |   methods: {
109 |     initData() {
110 |       this.$nextTick(() => {
111 |         const ProgressIndicator = require('@/lib/progress-indicator')
112 |         // eslint-disable-next-line no-new
113 |         this.progress = new ProgressIndicator()
114 |       })
115 |     },
116 |     // 回到顶部
117 |     scrollTop() {
118 |       this.$scrollTo(0)
119 |     },
120 |     // 点击展开评论
121 |     onLoadEnd() {
122 |       this.$nextTick(() => {
123 |         this.progress.calculateWidthPrecent()
124 |       })
125 |     }
126 |   },
127 | }
128 | </script>
129 | 
130 | <style scoped lang="scss">
131 | ul,
132 | li {
133 |   margin: 0;
134 |   padding: 0;
135 | }
136 | .container {
137 |   box-sizing: border-box;
138 |   margin: 0 auto;
139 | }
140 | 
141 | .article {
142 |   box-sizing: border-box;
143 |   width: 100%;
144 |   margin: 80px auto 0;
145 |   padding-bottom: 80px;
146 |   border-bottom: 1px solid #e8e8e8;
147 | }
148 | 
149 | .title {
150 |   font-size: 36px;
151 |   font-weight: 600;
152 |   color: #222222;
153 |   line-height: 42px;
154 |   text-align: center;
155 | }
156 | 
157 | .info {
158 |   width: 100%;
159 |   display: flex;
160 |   align-items: center;
161 |   justify-content: center;
162 |   margin: 22px 0 48px;
163 | }
164 | 
165 | .info span {
166 |   height: 20px;
167 |   font-size: 14px;
168 |   font-weight: 400;
169 |   color: #999999;
170 |   line-height: 20px;
171 |   margin-right: 65px;
172 | 
173 |   &:last-child {
174 |     margin-right: 0;
175 |   }
176 | }
177 | .fixed-sidebar {
178 |   cursor: pointer;
179 |   position: fixed;
180 |   bottom: 32px;
181 |   right: 32px;
182 | }
183 | 
184 | @media screen and (max-width: 540px) {
185 |   .article {
186 |     margin: 32px auto 0;
187 |   }
188 |   .title {
189 |     font-size: 32px;
190 |     text-align: left;
191 |   }
192 |   .info {
193 |     flex-direction: column;
194 |     align-items: flex-start;
195 | 
196 |     & span {
197 |       margin-right: 0;
198 |     }
199 |   }
200 | }
201 | 
202 | .empty-data {
203 |   padding: 80px 0;
204 |   text-align: center;
205 |   font-size: 14px;
206 | }
207 | 
208 | </style>
209 | 
210 | 


--------------------------------------------------------------------------------
/components/common/Header.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="header">
  4 |       <div class="response-wrap header-inner">
  5 |         <a class="logo" href="/"></a>
  6 |         <div class="nav">
  7 |           <div
  8 |             v-for="(item, index) in nav"
  9 |             :key="index"
 10 |             :class="[
 11 |               'nav-item',
 12 |               {
 13 |                 'nav-item-active': navIndex === index,
 14 |               },
 15 |             ]"
 16 |             @click="jumpURL(item.router)"
 17 |           >
 18 |             {{ item.title }}
 19 |           </div>
 20 |           <div v-if="Array.isArray(categoryList) && categoryList.length">
 21 |             <el-dropdown>
 22 |               <span class="el-dropdown-link" >
 23 |                 分类<i class="el-icon-arrow-down el-icon--right"></i>
 24 |               </span>
 25 |               <el-dropdown-menu slot="dropdown">
 26 |                 <el-dropdown-item v-for="item in categoryList" :key="item.id">
 27 |                   <a class="category-links" :href="'/?category_id=' + item.id">{{ item.name }}</a>
 28 |                 </el-dropdown-item>
 29 |               </el-dropdown-menu>
 30 |             </el-dropdown>
 31 |           </div>
 32 |           <a href="https://github.com/lfb/nodejs-koa-blog" target="_blank" class="nav-item">
 33 |             Github
 34 |           </a>
 35 |         </div>
 36 |         <div class="search">
 37 |           <el-input
 38 |             v-model="keyword"
 39 |             size="small"
 40 |             :clearable="true"
 41 |             placeholder="请输入内容"
 42 |             prefix-icon="el-icon-search"
 43 |             @keyup.enter.native="onSearch"
 44 |           >
 45 |           </el-input>
 46 |         </div>
 47 |       </div>
 48 |     </div>
 49 |   </div>
 50 | </template>
 51 | 
 52 | <script>
 53 | import { mapState } from 'vuex'
 54 | 
 55 | export default {
 56 |   name: 'VHeader',
 57 |   props: {
 58 |     isCategory: {
 59 |       type: Boolean,
 60 |       default: true,
 61 |     },
 62 |   },
 63 |   data() {
 64 |     return {
 65 |       keyword: '',
 66 |       navIndex: 0,
 67 |       nav: [
 68 |         {
 69 |           title: '首页',
 70 |           router: '/',
 71 |         }
 72 |       ],
 73 |     }
 74 |   },
 75 |   computed: {
 76 |     ...mapState({
 77 |       userInfo: (state) => state.user.userInfo,
 78 |       isLoginStatus: (state) => state.user.isLoginStatus,
 79 |       categoryList: (state) => state.category.categoryList
 80 |     }),
 81 |   },
 82 |   watch: {
 83 |     isLoginStatus: {
 84 |       handler() {
 85 |         this.handleNav()
 86 |       },
 87 |     },
 88 |   },
 89 |   mounted() {
 90 |     this.handleNav()
 91 |     this.getCategory()
 92 |   },
 93 |   methods: {
 94 |     getCategory() {
 95 |       this.$store.dispatch('category/getCategoryData')
 96 |     },
 97 |     onSearch() {
 98 |       if (!this.keyword) return false
 99 |       window.location.href = `/?keyword=${this.keyword}`
100 |     },
101 |     handleNav() {
102 |       if (this.isLoginStatus) {
103 |         this.nav.splice(2, 0, {
104 |           title: '个人中心',
105 |           router: '/usercenter',
106 |         })
107 |       } else {
108 |         const index = this.nav.findIndex(
109 |           (item) => item.router === '/usercenter'
110 |         )
111 |         if (index !== -1) {
112 |           this.nav.splice(index, 1)
113 |         }
114 |       }
115 |     },
116 |     // 返回首页
117 |     goHome() {
118 |       window.location.href = '/'
119 |     },
120 |     // 跳转URL
121 |     jumpURL(router) {
122 |       const { category_id, keyword } = this.$route.query
123 |       if (category_id || keyword) {
124 |         window.location.href = router
125 |       } else {
126 |         this.$router.push(router)
127 |       }
128 |     },
129 |   },
130 | }
131 | </script>
132 | 
133 | <style scoped lang="scss">
134 | .header {
135 |   border-bottom: 1px solid #f0f0f0;
136 | }
137 | .header-inner {
138 |   box-sizing: border-box;
139 |   height: 56px;
140 |   display: flex;
141 |   align-items: center;
142 |   justify-content: space-between;
143 | }
144 | .logo {
145 |   cursor: pointer;
146 |   box-sizing: border-box;
147 |   display: block;
148 |   width: 100px;
149 |   height: 56px;
150 |   background: url('https://cdn.boblog.com/logo.png') center center no-repeat;
151 |   background-size: 100px;
152 | }
153 | .nav {
154 |   box-sizing: border-box;
155 |   flex: 1;
156 |   height: 56px;
157 |   display: flex;
158 |   margin: 0 64px;
159 |   align-items: center;
160 | }
161 | .nav-item {
162 |   box-sizing: border-box;
163 |   height: 56px;
164 |   line-height: 56px;
165 |   padding: 0 32px;
166 |   white-space: nowrap;
167 |   cursor: pointer;
168 |   display: block;
169 |   text-align: center;
170 |   font-size: 16px;
171 |   color: #222222;
172 |   text-decoration: none;
173 |   &-active {
174 |     color: #2d8cf0;
175 |   }
176 | 
177 |   &:hover {
178 |     color: #2d8cf0;
179 |     text-decoration: underline;
180 |   }
181 | }
182 | 
183 | .el-dropdown-link {
184 |   cursor: pointer;
185 |   font-size: 16px;
186 |   padding: 0 32px;
187 |   color: #222222;
188 |   white-space: nowrap;
189 | 
190 |   &:hover {
191 |     color: #2d8cf0;
192 |     text-decoration: underline;
193 |   }
194 | 
195 |   &:hover .el-icon-arrow-down {
196 |     color: #2d8cf0;
197 |   }
198 | }
199 | .el-icon-arrow-down {
200 |   font-size: 16px;
201 |   color: #222222;
202 | }
203 | 
204 | .category-links {
205 |   box-sizing: border-box;
206 |   display: block;
207 |   height: 100%;
208 |   width: 100%;
209 |   color: #222222;
210 |   font-size: 14px;
211 |   text-decoration: none;
212 | 
213 |   &:hover {
214 |     color: #2d8cf0;
215 |   }
216 | }
217 | 
218 | .search {
219 |   cursor: pointer;
220 | }
221 | 
222 | @media screen and (max-width: 540px) {
223 |   .nav {
224 |     display: none;
225 |   }
226 |   .search {
227 |     flex: 1;
228 |     margin-left: 24px;
229 |   }
230 | }
231 | </style>
232 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <ul
  4 |       v-if="article && article.data && article.data.length > 0"
  5 |       class="response-wrap article"
  6 |     >
  7 |       <li v-for="item in article.data" :key="item.id" class="article-list">
  8 |         <a :href="'/article?id=' + item.id" class="article-item" @click="(e) => jumpURL(e, item.id)">
  9 |           <div class="article-image">
 10 |             <img :src="item.img_url" :alt="item.title" />
 11 |           </div>
 12 | 
 13 |           <div class="article-item-content">
 14 |             <h1 class="article-title">
 15 |               {{ item.title }}
 16 |             </h1>
 17 |             <div class="article-description">
 18 |               {{ item.description }}
 19 |             </div>
 20 | 
 21 |             <div class="article-category">
 22 |               {{ item.category_info ? item.category_info.name : '' }}
 23 |             </div>
 24 |           </div>
 25 |         </a>
 26 |       </li>
 27 |     </ul>
 28 |     <div v-else class="empty-data">
 29 |       暂无数据
 30 |       <a v-if="isClear" href="/">清空搜索条件</a>
 31 |     </div>
 32 | 
 33 |     <div v-if="isLoad" class="response-wrap more" @click="loadMore">
 34 |       <div class="more-text">点击加载更多</div>
 35 |       <div class="more-arrow">
 36 |         <img src="https://cdn.boblog.com/arrow.png" alt="" />
 37 |       </div>
 38 |     </div>
 39 |   </div>
 40 | </template>
 41 | <script>
 42 | import { mapState } from 'vuex'
 43 | import { getArticleList } from '@/request/api/article'
 44 | 
 45 | export default {
 46 |   name: 'HomeIndex',
 47 |   async asyncData(context) {
 48 |     const { id, keyword, category_id: categoryId, page = 1 } = context.query
 49 | 
 50 |     const [err, res] = await getArticleList({
 51 |       id,
 52 |       category_id: categoryId,
 53 |       keyword,
 54 |       page,
 55 |       is_category: 1,
 56 |       is_admin: 1,
 57 |     })
 58 | 
 59 |     if (!err) {
 60 |       const isLoad = res.data.data.meta.total_pages > page
 61 |       return {
 62 |         isClear: !!keyword || !!categoryId,
 63 |         page,
 64 |         isLoad,
 65 |         categoryId,
 66 |         article: res.data.data,
 67 |       }
 68 |     }else {
 69 |       return  {
 70 |         isClear:  false,
 71 |         page: 1,
 72 |         isLoad: false,
 73 |         categoryId : "",
 74 |         article: null,
 75 |       }
 76 |     }
 77 |   },
 78 |   async fetch({ store }) {
 79 |     await store.dispatch('category/getCategoryData')
 80 |   },
 81 |   head() {
 82 |     return {
 83 |       title: '波波博客 - boblog.com - 技术博客',
 84 |       meta: [
 85 |         {
 86 |           name: 'keywords',
 87 |           content:
 88 |             '波波,博客,波波博客,梁凤波,bo,blog,boblog,前端开发工程师,前端性能优化,JavaScript,css,html',
 89 |         },
 90 |         {
 91 |           name: 'description',
 92 |           content: '波波博客 - BoBlog.com，专注于前端开发技术，前端性能优化！',
 93 |         },
 94 |       ],
 95 |     }
 96 |   },
 97 |   computed: {
 98 |     ...mapState({
 99 |       categoryList: (state) => state.category.categoryList,
100 |     }),
101 |     // 是否为空数据
102 |     isEmptyData() {
103 |       return (
104 |         this.article &&
105 |         Array.isArray(this.article.data) &&
106 |         this.article.data.length === 0
107 |       )
108 |     },
109 |   },
110 |   beforeDestroy() {
111 |     if(this.progress) {
112 |       this.progress.removeProgress()
113 |       this.progress = null
114 |     }
115 | 
116 |   },
117 |   mounted() {
118 |     this.$nextTick(() => {
119 |       const ProgressIndicator = require('@/lib/progress-indicator')
120 |       // eslint-disable-next-line no-new
121 |       this.progress = new ProgressIndicator()
122 |     })
123 |   },
124 |   methods: {
125 |     jumpURL(e, id) {
126 |       e.preventDefault()
127 |       this.$router.push('/article?id=' + id)
128 |     },
129 |     // 获取新数据
130 |     async fetchData(id) {
131 |       const [err, res] = await getArticleList({
132 |         category_id: id,
133 |         is_category: 1,
134 |         is_admin: 1,
135 |         page: this.page,
136 |       })
137 |       if (!err) {
138 |         this.categoryId = id
139 |         this.article.data.push(...res.data.data.data)
140 |         this.isLoad = res.data.data.meta.total_pages > this.page
141 |       }
142 |     },
143 |     // 加载更多分页
144 |     loadMore() {
145 |       this.page++
146 |       this.fetchData()
147 |     },
148 |   },
149 | }
150 | </script>
151 | 
152 | <style scoped lang="scss">
153 | /*文章*/
154 | .article-list {
155 |   box-sizing: border-box;
156 |   display: block;
157 |   clear: both;
158 |   padding: 32px 0;
159 |   border-bottom: 1px solid #f0f0f0;
160 | }
161 | 
162 | .article-list:hover .article-title {
163 |   color: #0164da;
164 |   text-decoration: underline;
165 | }
166 | 
167 | .article-item {
168 |   display: flex;
169 |   height: 100%;
170 |   width: 100%;
171 |   text-decoration: none;
172 |   -webkit-transition: background-color 0.35s, color 0.35s, margin 0.45s,
173 |     -webkit-transform 0.5s;
174 |   transition: background-color 0.35s, color 0.35s, margin 0.45s, transform 0.5s;
175 | }
176 | 
177 | .article-image {
178 |   width: 100px;
179 |   & img {
180 |     width: 100%;
181 |     border-radius: 4px;
182 |   }
183 | }
184 | 
185 | .article-item-content {
186 |   padding-left: 24px;
187 |   flex: 1;
188 | }
189 | 
190 | .article-title {
191 |   font-weight: bold;
192 |   font-size: 18px;
193 |   color: #404040;
194 |   padding: 0;
195 |   margin: 0;
196 | }
197 | 
198 | .article-description {
199 |   font-size: 14px;
200 |   color: #404040;
201 |   margin: 12px 0 24px;
202 | }
203 | 
204 | .article-category {
205 |   font-size: 14px;
206 |   color: #808080;
207 | }
208 | 
209 | .empty-data {
210 |   padding: 80px 0;
211 |   text-align: center;
212 |   font-size: 14px;
213 | }
214 | 
215 | .more {
216 |   cursor: pointer;
217 |   padding: 32px 0;
218 |   display: flex;
219 |   align-items: center;
220 |   justify-content: center;
221 |   flex-direction: column;
222 | }
223 | .more-text {
224 |   font-size: 16px;
225 |   font-weight: 400;
226 |   color: #222222;
227 |   line-height: 22px;
228 | }
229 | .more-arrow {
230 |   width: 16px;
231 |   margin-top: 24px;
232 | }
233 | .more-arrow img {
234 |   width: 100%;
235 | }
236 | 
237 | @media screen and (max-width: 540px) {
238 |   .article-list {
239 |     padding: 24px 0;
240 |   }
241 | 
242 |   .article-image {
243 |     width: 90px;
244 |   }
245 | }
246 | </style>
247 | 


--------------------------------------------------------------------------------
/components/common/LoginForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="form-wrap">
  3 |     <div class="form">
  4 |       <div class="form-bg">
  5 |         <img src="https://cdn.boblog.com/login-bg.png" alt="login" />
  6 |       </div>
  7 |       <div class="form-list">
  8 |         <div class="logo">
  9 |           <img src="https://cdn.boblog.com/logo.png" alt="logo" />
 10 |         </div>
 11 |         <div v-if="!isLogin" class="form-item">
 12 |           <input
 13 |             v-model="user.username"
 14 |             maxlength="16"
 15 |             class="input"
 16 |             type="text"
 17 |             placeholder="请输入你的昵称"
 18 |           />
 19 |         </div>
 20 |         <div class="form-item">
 21 |           <input
 22 |             v-model="user.email"
 23 |             class="input"
 24 |             maxlength="32"
 25 |             type="text"
 26 |             placeholder="请输入联系邮箱"
 27 |           />
 28 |         </div>
 29 |         <div class="form-item">
 30 |           <input
 31 |             v-model="user.password"
 32 |             class="input"
 33 |             maxlength="16"
 34 |             type="password"
 35 |             placeholder="请输入密码（长度6-22位之间）"
 36 |           />
 37 |         </div>
 38 |         <div class="change" @click="isLogin = !isLogin">
 39 |           {{ isLogin ? '未有账号？点击注册！' : '已有账号？点击登录！' }}
 40 |         </div>
 41 |         <button :disabled="isDisabled" class="login" @click="onClickType">
 42 |           {{ isLogin ? '登录' : '注册' }}
 43 |         </button>
 44 |         <button class="anonymous-comment" @click="onAnonymousComment">
 45 |           匿名评论
 46 |         </button>
 47 |       </div>
 48 |     </div>
 49 |   </div>
 50 | </template>
 51 | <script>
 52 | import { validEmail, validPassword } from '@/lib/utils'
 53 | import { mapState } from 'vuex'
 54 | 
 55 | export default {
 56 |   name: 'LoginForm',
 57 |   data() {
 58 |     return {
 59 |       // true-登录，false-注册
 60 |       isLogin: true,
 61 |       // 用户信息
 62 |       user: {
 63 |         username: '',
 64 |         email: '',
 65 |         password: '',
 66 |       },
 67 |     }
 68 |   },
 69 |   computed: {
 70 |     ...mapState({
 71 |       userInfo: (state) => state.user.userInfo,
 72 |       isLoginStatus: (state) => state.user.isLoginStatus,
 73 |     }),
 74 |     userId() {
 75 |       return (this.userInfo && this.userInfo.id) || 0
 76 |     },
 77 |     isDisabled() {
 78 |       if (this.isLogin === true) {
 79 |         return !this.user.email || !this.user.password
 80 |       }
 81 | 
 82 |       if (this.isLogin === false) {
 83 |         return !this.user.email || !this.user.password || !this.user.username
 84 |       }
 85 | 
 86 |       return true
 87 |     },
 88 |   },
 89 |   methods: {
 90 |     // 点击-登录 or 注册
 91 |     onClickType() {
 92 |       if (this.isLogin) {
 93 |         this.onUserLogin()
 94 |       } else {
 95 |         this.onUserRegister()
 96 |       }
 97 |     },
 98 |     // 用户登录
 99 |     async onUserLogin() {
100 |       if (!this.checkoutEmailPassword()) {
101 |         return false
102 |       }
103 | 
104 |       const [err] = await this.$store.dispatch('user/userLogin', this.user)
105 |       if (!err) {
106 |         this.onSuccess()
107 |         this.$message.success('登录成功')
108 |       }
109 |     },
110 |     // 用户注册
111 |     async onUserRegister() {
112 |       if (!this.checkoutEmailPassword()) {
113 |         return false
114 |       }
115 | 
116 |       const user = this.user
117 | 
118 |       const registerParams = {
119 |         email: user.email,
120 |         username: user.username,
121 |         password1: user.password,
122 |         password2: user.password,
123 |       }
124 |       const [err] = await this.$store.dispatch(
125 |         'user/userRegister',
126 |         registerParams
127 |       )
128 |       if (!err) {
129 |         this.onSuccess()
130 |         this.$message.success('注册成功')
131 |       }
132 |     },
133 |     // 匿名评论
134 |     onAnonymousComment() {
135 |       sessionStorage.setItem('isAnonymous', '1')
136 |       this.onSuccess()
137 |     },
138 |     // 登录注册成功的回调
139 |     onSuccess(show = false) {
140 |       this.user.email = ''
141 |       this.user.username = ''
142 |       this.$emit('on-success', show)
143 |     },
144 |     // 检测邮箱和密码是否正确
145 |     checkoutEmailPassword() {
146 |       const user = this.user
147 | 
148 |       if (this.isLogin === false && !user.username) {
149 |         this.$message.warning('请输入你的昵称!')
150 |         return false
151 |       }
152 | 
153 |       if (!validEmail(user.email)) {
154 |         this.$message.warning('请输入正确的邮箱!')
155 |         return false
156 |       }
157 | 
158 |       if (!validPassword(user.password)) {
159 |         this.$message.warning('密码长度必须在6~22位之间，包含字符、数字和 _')
160 |         return false
161 |       }
162 | 
163 |       return true
164 |     },
165 |   },
166 | }
167 | </script>
168 | <style scoped lang="scss">
169 | .form {
170 |   display: flex;
171 | }
172 | .form-bg {
173 |   width: 500px;
174 |   font-size: 0;
175 | 
176 |   img {
177 |     width: 100%;
178 |   }
179 | }
180 | .form-list {
181 |   flex: 1;
182 |   display: flex;
183 |   flex-direction: column;
184 |   align-items: center;
185 |   box-sizing: border-box;
186 | }
187 | .logo {
188 |   margin: 64px 0 68px;
189 |   width: 154px;
190 |   img {
191 |     width: 100%;
192 |   }
193 | }
194 | .input {
195 |   box-sizing: border-box;
196 |   outline: none;
197 |   padding: 16px;
198 |   width: 300px;
199 |   height: 50px;
200 |   display: flex;
201 |   align-items: center;
202 |   font-size: 14px;
203 |   font-weight: 400;
204 |   color: #222;
205 |   background: #ffffff;
206 |   margin-bottom: 16px;
207 |   border: 1px solid #cccccc;
208 |   &::placeholder {
209 |     color: #999;
210 |   }
211 | }
212 | .change {
213 |   cursor: pointer;
214 |   width: 300px;
215 |   text-align: right;
216 |   height: 20px;
217 |   font-size: 14px;
218 |   font-weight: 400;
219 |   color: #999999;
220 |   line-height: 20px;
221 |   &:hover {
222 |     color: #2d8cf0;
223 |   }
224 | }
225 | .register,
226 | .login {
227 |   cursor: pointer;
228 |   border: none;
229 |   outline: none;
230 |   width: 300px;
231 |   height: 50px;
232 |   display: flex;
233 |   align-items: center;
234 |   justify-content: center;
235 |   font-size: 16px;
236 |   font-weight: 400;
237 |   color: #ffffff;
238 |   line-height: 22px;
239 |   background: #222222;
240 |   border-radius: 25px;
241 |   margin: 32px 0 16px;
242 | }
243 | .anonymous-comment {
244 |   cursor: pointer;
245 |   outline: none;
246 |   width: 300px;
247 |   height: 50px;
248 |   display: flex;
249 |   align-items: center;
250 |   justify-content: center;
251 |   font-size: 16px;
252 |   font-weight: 400;
253 |   color: #222222;
254 |   line-height: 22px;
255 |   background: #ffffff;
256 |   border-radius: 25px;
257 |   border: 1px solid #222222;
258 | }
259 | </style>
260 | 


--------------------------------------------------------------------------------
/pages/hutao.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="wrap">
  3 |     <h1 class='title'>原神胡桃圣遗物词条收益计算</h1>
  4 | 
  5 |     <div v-for='item in equipArray' :key='item.key' class="item">
  6 |       <label :for="item.key">{{item.name}}</label>
  7 |       <el-input :id="item.key" v-model='item.value' :placeholder="item.placeholder" clearable type="number"  />
  8 |     </div>
  9 | 
 10 |     <div class="item">
 11 |       <label for="criticalHitRate" style='color: #2d8cf0'>暴击率</label>
 12 |       <el-input id="criticalHitRate" v-model='criticalHitRate' clearable type="number" placeholder="暴击率" @input='changeSubmit' />
 13 |     </div>
 14 | 
 15 |     <div v-if='result > 0 || (criticalHitRate > 0 && isSubmit)' class='result-wrap'>
 16 |       <div>
 17 |         <div :style='{color: estimateText.color}'>
 18 |           <strong>
 19 |             增伤值: {{result}}&nbsp;
 20 |             评分: {{estimateText.level}}级
 21 |             <i v-for='star in estimateText.star' :key='star' style='color: #ff9900;' class='el-icon-star-on'></i>
 22 |           </strong>
 23 |           <p v-if='result > 9' style='color: red;'>{{errorText}}</p>
 24 |           <p v-else>{{estimateText.text}}</p>
 25 |         </div>
 26 |       </div>
 27 |     </div>
 28 | 
 29 |     <div style='margin-bottom: 12px;'>
 30 |       <el-button type="primary" style='width: 100%;' @click.native='submit'>
 31 |         立即计算
 32 |       </el-button>
 33 |     </div>
 34 | 
 35 |     <div>
 36 |       <el-button style='width: 100%;' @click.native='reset'>
 37 |         重置数据
 38 |       </el-button>
 39 |     </div>
 40 | 
 41 |     <div class='margin12'>
 42 |       <div class='sub-title'><i class='el-icon-info'></i> 使用前建议先阅读以下内容：</div>
 43 |       <div class='temp-wrap'>
 44 |         <div class='temp-img'>
 45 |           <img src='https://cdn.boblog.com/571677159247_.pic.jpg' alt='原神胡桃圣遗物示例图' />
 46 |         </div>
 47 |         <div class='temp-text'>
 48 |           <div>温馨提示：是把单个圣遗物的<strong style='color: red;'>[副词条]</strong>对应填上去即可</div>
 49 |           <div class="sub-title">精通沙（生命沙、爆伤头）：</div>
 50 |           <div>0暴击率，最高增伤点为7.83，</div>
 51 |           <div>2.7—3.9暴击率，增伤点≥6.5；</div>
 52 |           <div>5.4—7.8暴击率，增伤点≥5.5；</div>
 53 |           <div>8.2—11.7暴击率，增伤点≥4.5；</div>
 54 |           <div>11.7—15.6暴击率，增伤点≥3.5；</div>
 55 |           <div>15.6—19.5暴击率，增伤点≥2.5；</div>
 56 |           <div>19.5—23.3暴击率，增伤点≥1.5。</div>
 57 |         </div>
 58 |       </div>
 59 |     </div>
 60 | 
 61 |     <div class='margin12'>
 62 |       <div class='sub-title'>
 63 |         以下是一精专武标准，决斗枪减2万伤害，匣里减1万伤害，满命满精加2万伤害
 64 |       </div>
 65 |       <strong>暴击头：</strong>
 66 |       <p>平均增伤值＞4，裸蒸发6万多</p>
 67 |       <p>平均增伤值＞5，裸蒸发7万多</p>
 68 |       <p>平均增伤值＞6，裸蒸发8万多</p>
 69 | 
 70 |       <strong>爆伤头（精通/生命百分比）：</strong>
 71 |       <p>平均增伤值＞2.4，裸蒸发6万多</p>
 72 |       <p>平均增伤值＞3.4，裸蒸发7万多</p>
 73 |       <p>平均增伤值＞4.4，裸蒸发8万多</p>
 74 |     </div>
 75 | 
 76 |     <div class='margin12'>
 77 |       <strong class='sub-title'>小程序版本上线啦，保存二维码扫描或者微信小程序搜索【老婆养成小助手】即可使用~</strong>
 78 |       <div>
 79 |         <img class='wxapp-image' src='https://cdn.boblog.com/gh_a6861ef047ae_430.jpg' alt='老婆养成小助手' />
 80 |       </div>
 81 |       <div>
 82 |         <img class='wxapp-image' src='https://cdn.boblog.com/WechatIMG35.jpeg' alt='抖音殇离' />
 83 |       </div>
 84 |     </div>
 85 | 
 86 |     <div class='margin12 author-wrap'>
 87 |       <h2 class='author'>作者：@Bobby Liang</h2>，参考数据来自于抖音：@殇离 UP主，抖音号：DouYin_Sunle，玩胡桃看他视频就够了~
 88 |     </div>
 89 |   </div>
 90 | </template>
 91 | <script>
 92 | import {ATTRIBUTES_MAP as attributesMap, equipArray, LEVEL_TEXT as levelText} from '../lib/hutao'
 93 | 
 94 | export default {
 95 |   layout: 'hutao',
 96 |   data() {
 97 |     return {
 98 |       equipArray,
 99 |       criticalHitRate: 0,
100 |       isSubmit: false,
101 |       result: 0,
102 |       estimateText: {},
103 |       errorText: '你的输入的数据有误，这个只是用来分辨单个圣遗物好坏的，请重新输入。'
104 |     }
105 |   },
106 |   head() {
107 |     return {
108 |       title: '原神胡桃圣遗物词条收益计算',
109 |       meta: [
110 |         { name: 'keywords', content: '原神，胡桃，圣遗物，魔女套，绝缘套，追忆套，圣遗物增伤计算' },
111 |         { name: 'description', content: '原神胡桃圣遗物增伤值计算算法' },
112 |       ],
113 |     }
114 |   },
115 |   methods: {
116 |     submit() {
117 |       const result = this.equipArray.reduce((prev, next) => {
118 |         const {key, value, isUndivided = false} = next
119 |         if(value) {
120 |           if(isUndivided) {
121 |             return  prev + ( value / attributesMap[key] / 2)
122 |           }
123 |           return  prev + (value / attributesMap[key])
124 |         }
125 |         return prev
126 |       }, 0).toFixed(2)
127 | 
128 |       this.result = result
129 |       this.handleEstimate(result)
130 |       if(result) {
131 |         this.$message({
132 |           message: '计算成功！',
133 |           type: 'success'
134 |         });
135 |       } else {
136 |         this.$message({
137 |           message: '请输入正确的数值！',
138 |           type: 'warning'
139 |         });
140 |       }
141 |     },
142 |     handleEstimate(result) {
143 |       // 暴击率=0
144 |       if(this.criticalHitRate <= 0) {
145 |         this.handleCriticalHitRate(7.5)
146 |       }
147 | 
148 |       // 3.9≥暴击率≥2.7：
149 |       if(this.criticalHitRate >= 2.7 && this.criticalHitRate <= 3.9) {
150 |         this.handleCriticalHitRate(7)
151 |       }
152 | 
153 |       // 7.8≥暴击率≥5.4：
154 |       if(this.criticalHitRate >= 5.4 && this.criticalHitRate <= 7.8) {
155 |         this.handleCriticalHitRate(6)
156 |       }
157 | 
158 |       // 11.7≥暴击率≥8.2：
159 |       if(this.criticalHitRate >= 8.2 && this.criticalHitRate <= 11.7) {
160 |         this.handleCriticalHitRate(5)
161 | 
162 |       }
163 | 
164 |       // 15.6≥暴击率＞11.7：
165 |       if(this.criticalHitRate >= 11.7 && this.criticalHitRate <= 15.6) {
166 |         this.handleCriticalHitRate(4)
167 |       }
168 | 
169 |       // 19.7≥暴击率＞15.6：
170 |       if(this.criticalHitRate > 15.6 && this.criticalHitRate <= 19.5) {
171 |         this.handleCriticalHitRate(3)
172 |       }
173 | 
174 |       // 23≥暴击率＞19.7：
175 |       if(this.criticalHitRate > 19.5 && this.criticalHitRate <= 23.3) {
176 |         this.handleCriticalHitRate(2)
177 |       }
178 |     },
179 |     handleCriticalHitRate(value) {
180 |       this.isSubmit = true
181 |       const result = this.result
182 |       if(result >= value) {
183 |         levelText.SSS.text = `胡桃厨天花板级圣遗物，又称遗物级圣遗物，恭喜你，你的有效词条数已经接近满值，增伤点数极限为 ${ value + 1}。`
184 |         this.estimateText = levelText.SSS
185 |       }
186 | 
187 |       if(result >= value - 1 && result < value) {
188 |         levelText.SS.text = `极品圣遗物，欧皇专属，很给力的圣遗物，${value - 1} 的增伤值达标，下一阶段需要 ${value} 的增伤值。`
189 |         this.estimateText = levelText.SS
190 |       }
191 | 
192 |       if(result >= value - 2 && result < value - 1) {
193 |         levelText.S.text = `毕业圣遗物，如果你不是胡桃厨可以休息啦！${value - 2} 的增伤值达标，下一阶段需要 ${value -1} 的增伤值。`
194 |         this.estimateText = levelText.S
195 |       }
196 | 
197 |       if(result < value - 2 || result === 0) {
198 |         levelText.C.text = `赶快为你的老婆多刷点圣遗物吧，都快穷的吃土了，下一阶段需要 ${value - 2} 的增伤值。`
199 |         this.estimateText = levelText.C
200 |       }
201 |     },
202 |     changeSubmit() {
203 |       this.isSubmit = false
204 |     },
205 |     reset() {
206 |       this.result = 0
207 |       this.criticalHitRate = 0
208 |       this.isSubmit = false
209 |       this.estimateText = {}
210 |       this.equipArray.forEach(item => item.value = '')
211 |       this.$message({
212 |         message: '重置成功！',
213 |         type: 'success'
214 |       });
215 |     }
216 |   }
217 | }
218 | 
219 | </script>
220 | <style scoped>
221 | .wrap {
222 |   width: 50%;
223 |   margin: 0 auto;
224 | }
225 | .title {
226 |   font-size: 30px;
227 |   text-align: center;
228 | }
229 | .item {
230 |   display: flex;
231 |   margin: 24px 0;
232 | }
233 | 
234 | .item label {
235 |   width: 88px;
236 |   display: block;
237 |   height: 32px;
238 |   line-height: 32px;
239 | }
240 | 
241 | .result-wrap {
242 |   margin: 24px auto;
243 |   font-size: 18px;
244 |   text-align: center;
245 | }
246 | 
247 | .sub-title {
248 |   font-size: 16px;
249 |   font-weight: bold;
250 |   margin: 18px 0;
251 | }
252 | .temp-wrap {
253 |   display: flex;
254 |   width: 100%;
255 | }
256 | 
257 | .temp-img {
258 |   flex: 6;
259 | }
260 | .wxapp-image {
261 |   width: 42%;
262 |   margin: 12px 0;
263 | }
264 | .temp-text {
265 |   flex: 4;
266 |   line-height: 2;
267 |   margin-left: 24px;
268 | }
269 | 
270 | 
271 | img {
272 |   width: 100%;
273 | }
274 | .author-wrap {
275 |   font-size: 14px;
276 | }
277 | .author {
278 |   display: inline-block;
279 |   line-height: 1;
280 |   font-size: 14px;
281 | }
282 | 
283 | @media screen and (max-width: 540px) {
284 |   .wrap {
285 |     width: 90%;
286 |     margin: 0 auto;
287 |   }
288 | 
289 | 
290 |   .temp-wrap {
291 |     flex-direction: column;
292 |   }
293 |   .wxapp-image {
294 |     width: 100%;
295 |   }
296 |   .temp-img {
297 |     flex: 1;
298 |   }
299 |   .temp-text {
300 |     flex: 1;
301 |     margin-left: 0;
302 |   }
303 |   .title {
304 |     font-size: 24px;
305 |   }
306 | 
307 | }
308 | .margin12 {
309 |   margin: 12px 0;
310 | }
311 | 
312 | </style>
313 | 


--------------------------------------------------------------------------------
/lib/progress-indicator.js:
--------------------------------------------------------------------------------
  1 | (function() {
  2 |   const root = (typeof self === 'object' && self.self === self && self) ||
  3 |     (typeof global === 'object' && global.global === global && global) ||
  4 |     this || {};
  5 | 
  6 |   // 兼容处理
  7 |   let lastTime = 0;
  8 |   const vendors = ['webkit', 'moz'];
  9 |   for (let x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
 10 |     window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
 11 |     window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // Webkit中此取消方法的名字变了
 12 |       window[vendors[x] + 'CancelRequestAnimationFrame'];
 13 |   }
 14 | 
 15 |   if (!window.requestAnimationFrame) {
 16 |     window.requestAnimationFrame = function(callback, element) {
 17 |       const currTime = new Date().getTime();
 18 |       const timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
 19 |       const id = window.setTimeout(function() {
 20 |         // eslint-disable-next-line node/no-callback-literal
 21 |         callback(currTime + timeToCall);
 22 |       }, timeToCall);
 23 |       lastTime = currTime + timeToCall;
 24 |       return id;
 25 |     };
 26 |   }
 27 |   if (!window.cancelAnimationFrame) {
 28 |     window.cancelAnimationFrame = function(id) {
 29 |       clearTimeout(id);
 30 |     };
 31 |   }
 32 | 
 33 |   const util = {
 34 |     extend(target) {
 35 |       for (let i = 1, len = arguments.length; i < len; i++) {
 36 |         for (const prop in arguments[i]) {
 37 |           if (Object.prototype.hasOwnProperty.call(arguments[i], prop)) {
 38 |             target[prop] = arguments[i][prop]
 39 |           }
 40 |         }
 41 |       }
 42 | 
 43 |       return target
 44 |     },
 45 |     getViewPortSizeHeight() {
 46 |       const w = window;
 47 |       if (w.innerWidth != null) return w.innerHeight;
 48 |       const d = w.document;
 49 |       // 表明是标准模式
 50 |       if (document.compatMode === "CSS1Compat") {
 51 |         return d.documentElement.clientHeight;
 52 |       }
 53 |       // 怪异模式
 54 |       return d.body.clientHeight;
 55 |     },
 56 |     getScrollOffsetsTop() {
 57 |       const w = window;
 58 |       if (w.pageXOffset != null) return w.pageYOffset;
 59 |       const d = w.document;
 60 |       // 表明是标准模式
 61 |       if (document.compatMode === "CSS1Compat") {
 62 |         return d.documentElement.scrollTop;
 63 |       }
 64 |       // 怪异模式
 65 |       return d.body.scrollTop;
 66 |     },
 67 |     addEvent(element, type, fn) {
 68 |       if (document.addEventListener) {
 69 |         element.addEventListener(type, fn, false);
 70 |         return fn;
 71 |       } else if (document.attachEvent) {
 72 |         const bound = function() {
 73 |           return fn.apply(element, arguments)
 74 |         }
 75 |         element.attachEvent('on' + type, bound);
 76 |         return bound;
 77 |       }
 78 |     },
 79 |     isValidListener(listener) {
 80 |       if (typeof listener === 'function') {
 81 |         return true
 82 |       } else if (listener && typeof listener === 'object') {
 83 |         return util.isValidListener(listener.listener)
 84 |       } else {
 85 |         return false
 86 |       }
 87 |     },
 88 |     indexOf(array, item) {
 89 |       if (array.indexOf) {
 90 |         return array.indexOf(item);
 91 |       }
 92 |       else {
 93 |         let result = -1;
 94 |         for (let i = 0, len = array.length; i < len; i++) {
 95 |           if (array[i] === item) {
 96 |             result = i;
 97 |             break;
 98 |           }
 99 |         }
100 |         return result;
101 |       }
102 |     },
103 |     // 移除事件
104 |     removeEvent (element, type, fn) {
105 |       if (document.removeEventListener) {
106 |         element.removeEventListener(type, fn, false);
107 |         return fn;
108 |       } else if (document.attachEvent) {
109 |         const bound = function () {
110 |           return fn.apply(element, arguments)
111 |         }
112 |         element.detachEvent('on' + type, bound);
113 |         return bound;
114 |       }
115 |     },
116 |     // 是否为id选择器
117 |     isIdSelector(selector) {
118 |       return selector.includes('#')
119 |     },
120 |     // 是否为类选择器
121 |     isClassSelector(selector) {
122 |       return selector.includes('.')
123 |     },
124 |     // 获取元素
125 |     getEle(selector) {
126 |       const doc = document
127 |       let dom = null
128 | 
129 |       if (doc.querySelector) {
130 |         dom = doc.querySelector(selector)
131 |       }
132 | 
133 |       if (!dom && util.isIdSelector(selector)) {
134 |         const ids = selector.split('#')[1]
135 |         dom = doc.getElementById(ids)
136 |       }
137 | 
138 |       if (!dom && util.isClassSelector(selector)) {
139 |         const cls = selector.split('.')[1]
140 |         const selectDom = doc.getElementsByClassName(cls)
141 |         dom = selectDom ? selectDom[0] : null
142 |       }
143 | 
144 |       return dom
145 |     },
146 |     // 移除DOM元素
147 |     removeDom (selector) {
148 |       if (selector && typeof selector === 'string') {
149 |         const dom = util.getEle(selector)
150 |         dom && dom.parentNode && dom.parentNode.removeChild(dom)
151 |       }
152 |     },
153 |     isFunction(fn) {
154 |       return typeof fn === 'function'
155 |     }
156 |   };
157 | 
158 |   function EventEmitter() {
159 |     this.__events = {}
160 |   }
161 | 
162 |   EventEmitter.prototype.on = function(eventName, listener) {
163 |     if (!eventName || !listener) return;
164 | 
165 |     if (!util.isValidListener(listener)) {
166 |       throw new TypeError('listener must be a function');
167 |     }
168 | 
169 |     const events = this.__events;
170 |     const listeners = events[eventName] = events[eventName] || [];
171 |     const listenerIsWrapped = typeof listener === 'object';
172 | 
173 |     // 不重复添加事件
174 |     if (!util.includes(listeners, listener)) {
175 |       listeners.push(listenerIsWrapped ? listener : {
176 |         listener,
177 |         once: false
178 |       });
179 |     }
180 | 
181 |     return this;
182 |   };
183 |   EventEmitter.prototype.once = function(eventName, listener) {
184 |     return this.on(eventName, {
185 |       listener,
186 |       once: true
187 |     })
188 |   };
189 |   EventEmitter.prototype.off = function(eventName, listener) {
190 |     const listeners = this.__events[eventName];
191 |     if (!listeners) return;
192 | 
193 |     let index;
194 |     for (let i = 0, len = listeners.length; i < len; i++) {
195 |       if (listeners[i] && listeners[i].listener === listener) {
196 |         index = i;
197 |         break;
198 |       }
199 |     }
200 | 
201 |     if (typeof index !== 'undefined') {
202 |       listeners.splice(index, 1, null)
203 |     }
204 | 
205 |     return this;
206 |   };
207 |   EventEmitter.prototype.emit = function(eventName, args) {
208 |     const listeners = this.__events[eventName];
209 |     if (!listeners) return;
210 | 
211 |     for (let i = 0; i < listeners.length; i++) {
212 |       const listener = listeners[i];
213 |       if (listener) {
214 |         listener.listener.apply(this, args || []);
215 |         if (listener.once) {
216 |           this.off(eventName, listener.listener)
217 |         }
218 |       }
219 | 
220 |     }
221 | 
222 |     return this;
223 | 
224 |   };
225 | 
226 |   function ProgressIndicator(options) {
227 | 
228 |     this.options = util.extend({}, this.constructor.defaultOptions, options)
229 | 
230 |     this.handlers = {};
231 | 
232 |     this.init();
233 |   }
234 | 
235 |   ProgressIndicator.VERSION = '1.0.0';
236 | 
237 |   ProgressIndicator.defaultOptions = {
238 |     color: "#0A74DA"
239 |   }
240 | 
241 |   const proto = ProgressIndicator.prototype = new EventEmitter();
242 | 
243 |   proto.constructor = ProgressIndicator;
244 | 
245 |   proto.init = function() {
246 |     this.createIndicator();
247 |     const width = this.calculateWidthPrecent();
248 |     this.setWidth(width);
249 |     this.bindScrollEvent();
250 | 
251 |   }
252 | 
253 |   proto.createIndicator = function() {
254 |     const div = document.createElement("div")
255 | 
256 |     div.id = "progress-indicator";
257 |     div.className = "progress-indicator";
258 | 
259 |     // div.style.position = "fixed"
260 |     // div.style.top = 0;
261 |     // div.style.left = 0;
262 |     // div.style.height = '3px';
263 |     // div.style.backgroundColor = this.options.color;
264 | 
265 |     this.element = div;
266 | 
267 |     document.body.appendChild(div);
268 |   }
269 | 
270 |   proto.calculateWidthPrecent = function() {
271 |     // 文档高度
272 |     this.docHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
273 | 
274 |     // 视口高度
275 |     this.viewPortHeight = util.getViewPortSizeHeight();
276 |     // 差值
277 |     this.sHeight = Math.max(this.docHeight - this.viewPortHeight, 0);
278 |     // 滚动条垂直偏移量
279 |     const scrollTop = util.getScrollOffsetsTop();
280 | 
281 |     return this.sHeight ? scrollTop / this.sHeight : 0;
282 |   }
283 | 
284 |   proto.setWidth = function(perc) {
285 |     this.element.style.width = perc * 100 + "%";
286 |   }
287 | 
288 |   proto.bindScrollEvent = function() {
289 |     const self = this;
290 |     let prev;
291 | 
292 |     this.scrollHandler = function () {
293 |       window.requestAnimationFrame(function () {
294 |         const perc = Math.min(util.getScrollOffsetsTop() / self.sHeight, 1);
295 |         // 火狐中有可能连续计算为 1，导致 end 事件被触发两次
296 |         if (perc === prev) return;
297 |         // 在达到 100% 的时候，刷新页面不 emit end 事件
298 |         if (prev && perc === 1) {
299 |           self.emit("end")
300 |         }
301 | 
302 |         prev = perc;
303 |         self.setWidth(perc);
304 |       });
305 |     }
306 | 
307 |     util.addEvent(window, "scroll", this.scrollHandler)
308 |   }
309 | 
310 |   // 移除进度条
311 |   proto.removeProgress = function (fn) {
312 |     if (util.isFunction(this.scrollHandler)) {
313 |       util.removeEvent(window, "scroll", this.scrollHandler)
314 |       util.removeDom("#progress-indicator")
315 | 
316 |       // 回调函数
317 |       util.isFunction(fn) && fn()
318 |     }
319 |   }
320 | 
321 |   if (typeof exports !== 'undefined' && !exports.nodeType) {
322 |     if (typeof module !== 'undefined' && !module.nodeType && module.exports) {
323 |       exports = module.exports = ProgressIndicator;
324 |     }
325 |     exports.ProgressIndicator = ProgressIndicator;
326 |   } else {
327 |     root.ProgressIndicator = ProgressIndicator;
328 |   }
329 | 
330 | }());
331 | 


--------------------------------------------------------------------------------
/components/article/ArticleComment.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="comment">
  4 |       <div class="comment-from">
  5 |         <div class="comment-avatar">
  6 |           <img src="https://cdn.boblog.com/avatar.png" alt="avatar" />
  7 |         </div>
  8 |         <div class="comment-textarea">
  9 |           <textarea
 10 |             ref="textarea"
 11 |             v-model="commentContent"
 12 |             class="comment-content"
 13 |             placeholder="发表评论…"
 14 |           />
 15 |           <div
 16 |             v-if="!isLoginStatus && !isAnonymousComment"
 17 |             class="comment-login"
 18 |             @click="isLogin = true"
 19 |           >
 20 |             <div class="comment-login-type">注册/登录 发表评论</div>
 21 |             <button class="comment-login-btn">注册/登录</button>
 22 |           </div>
 23 |         </div>
 24 |       </div>
 25 |       <div v-if="isLoginStatus || isAnonymousComment" class="comment-submit">
 26 |         <button class="comment-submit-btn" @click="submitComment">提交</button>
 27 |       </div>
 28 |     </div>
 29 | 
 30 |     <div v-if="count > 0" class="comment-container">
 31 |       <div class="comment-count">全部评论（{{ count }}）</div>
 32 |       <ul
 33 |         v-if="Array.isArray(commentList) && commentList.length"
 34 |         class="comment-list"
 35 |       >
 36 |         <li
 37 |           v-for="(item, index) in commentList"
 38 |           :key="item.id"
 39 |           class="comment-item"
 40 |         >
 41 |           <div class="comment-item-avatar">
 42 |             <img src="https://cdn.boblog.com/avatar.png" alt="avatar" />
 43 |           </div>
 44 |           <div class="comment-item-detail">
 45 |             <div class="comment-item-user">
 46 |               {{ (item.user_info && item.user_info.username) || '匿名评论' }}
 47 |             </div>
 48 |             <div class="comment-item-intro">
 49 |               <span class="comment-item-created">
 50 |                 {{ item.created_at }}
 51 |               </span>
 52 |               <span
 53 |                 v-show="!item.is_show_reply"
 54 |                 class="comment-item-reply-user"
 55 |                 @click="showReply(item, index)"
 56 |               >
 57 |                 回复
 58 |               </span>
 59 |             </div>
 60 |             <div class="comment-item-content">
 61 |               {{ item.content }}
 62 |             </div>
 63 |             <div v-if="item.reply_list" class="comment-item-reply-content">
 64 |               <p
 65 |                 v-for="replyItem in item.reply_list"
 66 |                 :key="replyItem.id"
 67 |                 class="comment-item-reply-content-list"
 68 |               >
 69 |                 {{
 70 |                   (replyItem.user_info && replyItem.user_info.username) ||
 71 |                   '匿名回复'
 72 |                 }}：
 73 |                 {{ replyItem.content }}
 74 |               </p>
 75 |             </div>
 76 |             <div v-if="item.is_show_reply" class="comment-item-reply">
 77 |               <textarea
 78 |                 v-model="item.reply_content"
 79 |                 class="comment-item-reply-textarea"
 80 |                 placeholder="发表回复…"
 81 |               />
 82 |               <button
 83 |                 class="comment-item-reply-btn"
 84 |                 @click="submitReply(item, index)"
 85 |               >
 86 |                 回复
 87 |               </button>
 88 |             </div>
 89 |           </div>
 90 |         </li>
 91 |       </ul>
 92 | 
 93 |       <div v-if="isLoad" class="comment-more" @click="loadMore">
 94 |         点击加载更多
 95 |       </div>
 96 |     </div>
 97 | 
 98 |     <el-dialog
 99 |       :visible.sync="isLogin"
100 |       width="880px"
101 |       top="0"
102 |       :lock-scroll="true"
103 |       :before-close="handleClose"
104 |     >
105 |       <LoginForm @on-success="loginFormSuccess" />
106 |     </el-dialog>
107 |   </div>
108 | </template>
109 | 
110 | <script>
111 | import LoginForm from '@/components/common/LoginForm'
112 | import { mapState } from 'vuex'
113 | import { getCommentTarget, createComment } from '@/request/api/comment'
114 | import { isArray } from '@/lib/utils'
115 | import { createReply } from '@/request/api/reply'
116 | 
117 | export default {
118 |   name: 'ArticleComment',
119 |   components: {
120 |     LoginForm,
121 |   },
122 |   props: {
123 |     reply: {
124 |       type: Object,
125 |       default: () => {},
126 |     },
127 |   },
128 |   data() {
129 |     return {
130 |       page: 1,
131 |       count: 0,
132 |       commentContent: '',
133 |       commentList: [],
134 |       isLoad: true,
135 |       isLogin: false,
136 |       isAnonymous: false,
137 |     }
138 |   },
139 |   computed: {
140 |     ...mapState({
141 |       userInfo: (state) => state.user.userInfo,
142 |       isLoginStatus: (state) => state.user.isLoginStatus,
143 |     }),
144 |     isAnonymousComment() {
145 |       return !this.isLoginStatus && this.isAnonymous
146 |     },
147 |     userId() {
148 |       return (this.userInfo && this.userInfo.id) || 0
149 |     },
150 |     commentEmail() {
151 |       return (this.userInfo && this.userInfo.email) || ''
152 |     },
153 |   },
154 |   mounted() {
155 |     this.getComment()
156 |   },
157 |   methods: {
158 |     handleClose() {
159 |       this.isLogin = false
160 |     },
161 |     // 提交回复
162 |     async submitReply(reply, index) {
163 |       if (!reply.reply_content) {
164 |         this.$message.warning('请填写回复内容!')
165 |         return false
166 |       }
167 | 
168 |       const [err] = await createReply({
169 |         article_id: this.$route.query.id,
170 |         user_id: this.userId,
171 |         email: this.commentEmail,
172 |         comment_id: this.commentId,
173 |         content: reply.reply_content,
174 |       })
175 |       if (!err) {
176 |         this.onSuccess()
177 |         this.$message.success('回复成功，审核通过后展示！')
178 |         this.commentList[index].reply_content = ''
179 |         this.commentList[index].is_show_reply = false
180 |       }
181 |     },
182 |     showReply(item, index) {
183 |       this.commentId = item.id
184 |       this.commentList.forEach((v, rIndex) => {
185 |         v.is_show_reply = rIndex === index
186 |       })
187 |     },
188 |     // 提交评论
189 |     async submitComment() {
190 |       if (!this.commentContent) {
191 |         this.$message.warning('请填写评论内容!')
192 |         return false
193 |       }
194 |       const [err] = await createComment({
195 |         user_id: this.userId,
196 |         article_id: this.$route.query.id,
197 |         email: this.commentEmail,
198 |         content: this.commentContent,
199 |       })
200 | 
201 |       if (!err) {
202 |         this.onSuccess()
203 |         this.$message.success('评论成功，审核通过后展示！')
204 |       }
205 |     },
206 |     // 评论|回复成功
207 |     onSuccess() {
208 |       this.commentEmail = ''
209 |       this.commentContent = ''
210 |     },
211 |     loginFormSuccess() {
212 |       this.isLogin = false
213 |       this.checkAnonymous()
214 |     },
215 |     checkAnonymous() {
216 |       this.isAnonymous = !!sessionStorage.getItem('isAnonymous')
217 |     },
218 |     // 获取评论数据
219 |     async getComment() {
220 |       const [err, res] = await getCommentTarget({
221 |         article_id: this.$route.query.id,
222 |         is_replay: 1,
223 |         is_user: 1,
224 |         status: 1,
225 |         page: this.page,
226 |       })
227 |       if (!err) {
228 |         const meta = res.data.data.meta
229 |         const data = res.data.data.data
230 | 
231 |         if (isArray(data) && meta) {
232 |           data.forEach((item) => {
233 |             item.is_show_reply = false
234 |             item.reply_content = ''
235 |           })
236 |           this.commentList.push(...data)
237 | 
238 |           this.count = meta.count
239 |           this.isLoad = meta.total_pages > this.page
240 |         }
241 |       }
242 |     },
243 |     // 加载更多
244 |     loadMore() {
245 |       this.page++
246 |       this.getComment()
247 |     },
248 |   },
249 | }
250 | </script>
251 | 
252 | <style scoped lang="scss">
253 | .comment {
254 |   box-sizing: border-box;
255 |   padding: 80px 0 120px;
256 |   width: 100%;
257 |   margin: 0 auto;
258 | 
259 |   &-list {
260 |     margin: 0;
261 |     padding: 0;
262 |   }
263 | 
264 |   .comment-from {
265 |     display: flex;
266 |     width: 100%;
267 |   }
268 | 
269 |   &-avatar {
270 |     width: 40px;
271 |     margin-right: 16px;
272 |     & img {
273 |       width: 100%;
274 |     }
275 |   }
276 | 
277 |   &-textarea {
278 |     position: relative;
279 |     flex: 1;
280 |   }
281 | 
282 |   &-login {
283 |     position: absolute;
284 |     width: 100%;
285 |     height: 100%;
286 |     top: 0;
287 |     left: 0;
288 |     z-index: 100;
289 |     display: flex;
290 |     align-items: center;
291 |     justify-content: center;
292 |     flex-direction: column;
293 | 
294 |     &-type {
295 |       font-size: 18px;
296 |       font-weight: 500;
297 |       color: #222222;
298 |     }
299 | 
300 |     &-btn {
301 |       cursor: pointer;
302 |       resize: none;
303 |       outline: none;
304 |       border: none;
305 |       width: 120px;
306 |       height: 44px;
307 |       display: flex;
308 |       align-items: center;
309 |       justify-content: center;
310 |       font-size: 16px;
311 |       font-weight: 400;
312 |       color: #fff;
313 |       line-height: 22px;
314 |       margin-top: 16px;
315 |       background: #222222;
316 |     }
317 |   }
318 |   &-content {
319 |     resize: none;
320 |     outline: none;
321 |     box-sizing: border-box;
322 |     padding: 16px;
323 |     font-size: 14px;
324 |     color: #222;
325 |     width: 100%;
326 |     height: 130px;
327 |     background: #fff;
328 |     border: 1px solid #ccc;
329 |     transition: 0.2s all ease-in;
330 | 
331 |     &:focus {
332 |       box-shadow: 2px 4px 24px 0 rgba(0, 0, 0, 0.06);
333 |     }
334 | 
335 |     &::placeholder {
336 |       color: #ccc;
337 |     }
338 |   }
339 | 
340 |   &-submit {
341 |     margin-top: 16px;
342 |     display: flex;
343 |     justify-content: flex-end;
344 | 
345 |     &-btn {
346 |       cursor: pointer;
347 |       border: none;
348 |       outline: none;
349 |       width: 120px;
350 |       height: 44px;
351 |       display: flex;
352 |       align-items: center;
353 |       justify-content: center;
354 |       font-size: 16px;
355 |       font-weight: 400;
356 |       color: #ffffff;
357 |       background: #222222;
358 |     }
359 |   }
360 | }
361 | .comment-count {
362 |   padding-bottom: 24px;
363 |   font-size: 24px;
364 |   font-weight: 600;
365 |   color: #222222;
366 |   border-bottom: 1px solid #e8e8e8;
367 | }
368 | 
369 | .comment-item {
370 |   box-sizing: border-box;
371 |   padding: 32px 0;
372 |   display: flex;
373 |   border-bottom: 1px solid #e8e8e8;
374 | 
375 |   &-avatar {
376 |     width: 40px;
377 |     margin-right: 14px;
378 |     & img {
379 |       width: 100%;
380 |     }
381 |   }
382 | 
383 |   &-detail {
384 |     flex: 1;
385 |   }
386 | 
387 |   &-user {
388 |     height: 22px;
389 |     font-size: 16px;
390 |     font-weight: 400;
391 |     color: #222222;
392 |   }
393 |   &-intro {
394 |     height: 20px;
395 |     font-size: 14px;
396 |     font-weight: 400;
397 |     color: #999999;
398 |     line-height: 20px;
399 |     margin-bottom: 16px;
400 |     display: flex;
401 |     align-items: center;
402 |     justify-content: space-between;
403 |   }
404 |   &-reply-user {
405 |     cursor: pointer;
406 |   }
407 |   &-reply-content {
408 |     padding: 14px 16px;
409 |     margin-top: 16px;
410 |     line-height: 22px;
411 |     font-size: 16px;
412 |     font-weight: 400;
413 |     color: #222222;
414 |     background: #f7f7f7;
415 |     &-list {
416 |       margin-bottom: 8px;
417 |     }
418 |   }
419 |   &-reply {
420 |     margin-top: 16px;
421 |     position: relative;
422 |     width: 100%;
423 | 
424 |     &-textarea {
425 |       resize: none;
426 |       outline: none;
427 |       width: 100%;
428 |       min-height: 130px;
429 |       font-size: 14px;
430 |       box-sizing: border-box;
431 |       padding: 16px;
432 |       background: #ffffff;
433 |       border: 1px solid #222;
434 | 
435 |       &::placeholder {
436 |         color: #ccc;
437 |       }
438 |     }
439 | 
440 |     &-btn {
441 |       cursor: pointer;
442 |       outline: none;
443 |       border: none;
444 |       position: absolute;
445 |       right: 16px;
446 |       bottom: 16px;
447 |       width: 100px;
448 |       height: 30px;
449 |       display: flex;
450 |       align-items: center;
451 |       justify-content: center;
452 |       font-size: 14px;
453 |       font-weight: 400;
454 |       color: #ffffff;
455 |       background: #222;
456 |     }
457 |   }
458 | 
459 |   &-content {
460 |     font-size: 16px;
461 |     font-weight: 400;
462 |     color: #222;
463 |     line-height: 22px;
464 |   }
465 | }
466 | 
467 | .comment-more {
468 |   cursor: pointer;
469 |   width: 100%;
470 |   height: 40px;
471 |   display: flex;
472 |   align-items: center;
473 |   justify-content: center;
474 |   font-size: 14px;
475 |   margin-top: 56px;
476 |   font-weight: 600;
477 |   color: #666666;
478 |   background: #f8f8f8;
479 | }
480 | 
481 | /deep/ .el-dialog__header {
482 |   padding: 0;
483 | }
484 | /deep/ .el-dialog__body {
485 |   padding: 0;
486 | }
487 | /deep/ .el-dialog {
488 |   margin: 0;
489 |   position: absolute;
490 |   left: 50%;
491 |   top: 50%;
492 |   transform: translate(-50%, -50%);
493 | }
494 | </style>
495 | 


--------------------------------------------------------------------------------