├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .vscode
    └── settings.json
├── README.md
├── assets
    ├── README.md
    ├── css
    │   ├── lg-theme.less
    │   └── lg-theme
    │   │   ├── color.less
    │   │   └── var.less
    └── js
    │   ├── contest-consts.js
    │   ├── page-helpers.js
    │   └── status-mapping.js
├── components
    ├── README.md
    ├── blogs
    │   └── blog-item.vue
    ├── common
    │   ├── id-link.vue
    │   ├── page-switcher.vue
    │   ├── paged-list.vue
    │   ├── team-link.vue
    │   ├── user-info.vue
    │   └── user-link.vue
    ├── contests
    │   └── contest-item.vue
    ├── discuss
    │   └── discuss-item.vue
    ├── layout
    │   ├── app-dropdown.vue
    │   ├── lg-footer.vue
    │   ├── login-dropdown.vue
    │   ├── nav-bar.vue
    │   ├── off-canvas.vue
    │   └── user-dropdown.vue
    └── records
    │   ├── status-label.vue
    │   └── status-point.vue
├── layouts
    ├── README.md
    └── default.vue
├── middleware
    └── README.md
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
    ├── README.md
    ├── blogs
    │   ├── _id.vue
    │   └── index.vue
    ├── contests
    │   └── index.vue
    ├── discuss
    │   ├── _id.vue
    │   └── index.vue
    ├── index.vue
    ├── problems
    │   ├── _id.vue
    │   └── index.vue
    ├── records
    │   └── _id.vue
    ├── teams
    │   └── _id.vue
    └── users
    │   └── _id.vue
├── plugins
    ├── README.md
    ├── global-filters.js
    ├── lgapi.js
    ├── moment.js
    └── uikit.js
├── server.js
├── static
    ├── README.md
    └── favicon.ico
└── store
    ├── README.md
    └── index.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_size = 2
 6 | indent_style = space
 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 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   parser: 'babel-eslint',
 4 |   env: {
 5 |     browser: true,
 6 |     node: true
 7 |   },
 8 |   extends: 'standard',
 9 |   // required to lint *.vue files
10 |   plugins: [
11 |     'vuefix',
12 |     'html'
13 |   ],
14 |   // add your custom rules here
15 |   rules: {
16 |     'html-no-self-closing': 'off'
17 |   },
18 |   globals: {}
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .nuxt
3 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "standard.enable": false
3 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Luogu Frontend
 2 | 
 3 | ## Developer Notice
 4 | 
 5 | I manually turned off Standard linter in `.vscode/settings.json`, because I use ESLint with Standard. A `npm i` would help you install them and configure in VSCode.
 6 | 
 7 | ## Setup
 8 | 
 9 | Add `127.0.0.1  f.luogu.org` to your `hosts` file, and access your local development instance. This is required to share cookies with `luogu.org`.
10 | 
11 | ## Some HTML & Vue style guide
12 | 
13 | 1. 2-space indent.
14 | 2. Use self-closing tags when using **components** with no inner content. Add a space before slash.
15 |   eg. Use `<user-dropdown />` instead of `<user-dropdown></user-dropdown>`, but still use `<span></span>`.
16 | 3. Always use double quotes in HTML, and use single quotes in `v-bind` declarations for string literals.
17 |   eg. Use `<span class="uk-margin-small-right" :uk-icon="'icon: ' + icon"></span>`.
18 | 4. String concating with `+` is only allowed in `v-*` declarations. Don't forget spaces before and after `+`.
19 | 5. Don't use complex expressions in `v-*` declarations.
20 | 6. Always include at least one `-` in the name of a Vue component.
21 |   eg. `<user-dropdown />`
22 | 7. Always use PascalCase in imported component names.
23 |   eg. `import UserDropdown from './user-dropdown'`
24 | 
25 | ## Build Setup
26 | 
27 | ``` bash
28 | # install dependencies
29 | $ npm install # Or yarn install
30 | 
31 | # serve with hot reloading at localhost:3000
32 | $ npm run dev
33 | 
34 | # build for production and launch the server
35 | $ npm run build
36 | $ npm start
37 | 
38 | # generate a static project
39 | $ npm run generate
40 | ```
41 | 
42 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://nuxtjs.org).
43 | 


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
4 | 
5 | More informations about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/assets#webpacked
7 | 


--------------------------------------------------------------------------------
/assets/css/lg-theme.less:
--------------------------------------------------------------------------------
 1 | @import "~uikit/src/less/uikit.theme.less";
 2 | 
 3 | @import "./lg-theme/var";
 4 | @import "./lg-theme/color";
 5 | 
 6 | @base-body-background: #eee;
 7 | 
 8 | @navbar-background: @lg-navbar-bg;
 9 | @navbar-nav-item-height: @lg-navbar-height;
10 | @navbar-nav-item-color: @lg-navbar-color;
11 | @navbar-nav-item-hover-color: @lg-navbar-active-color;
12 | @navbar-nav-item-onclick-color: @lg-navbar-active-color;
13 | @navbar-nav-item-active-color: @lg-navbar-active-color;
14 | @navbar-item-color: @lg-navbar-color;
15 | @logo-color: @lg-navbar-active-color;
16 | @logo-hover-color: @lg-navbar-active-color;
17 | 
18 | @search-color: @lg-navbar-color;
19 | @search-placeholder-color: @lg-navbar-color;
20 | @search-icon-color: @lg-navbar-color;
21 | @search-navbar-width: 200px;
22 | 
23 | @global-xxlarge-font-size: 2.3rem;
24 | 
25 | .hook-card() {
26 |   border-radius: 10px;
27 | }
28 | 
29 | .lg-float-title {
30 |   padding: 0 @card-body-padding-horizontal;
31 |   // Align with card.
32 |   font-size: @lg-float-title-size;
33 | }
34 | 
35 | @media (min-width: @breakpoint-large) {
36 |   .lg-float-title { padding: 0 @card-body-padding-horizontal-l; }
37 | }
38 | 
39 | .lg-largenum {
40 |   font-size: 2em;
41 | }
42 | .lg-margin-reset {
43 |   margin: 0;
44 | }
45 | .lg-padding-reset {
46 |   padding: 0;
47 | }
48 | .lg-no-margin-bottom { margin-bottom: 0 }
49 | 


--------------------------------------------------------------------------------
/assets/css/lg-theme/color.less:
--------------------------------------------------------------------------------
 1 | .lg-color-lblue { color: #2196f3 }
 2 | .lg-bg-color-lblue { background: #2196f3 }
 3 | .lg-color-dblue { color: #3f51b5 }
 4 | .lg-bg-color-dblue { background: #3f51b5 }
 5 | .lg-color-red { color: #f44336 }
 6 | .lg-bg-color-red { background: #f44336 }
 7 | .lg-color-green { color: #4caf50 }
 8 | .lg-bg-color-green { background: #4caf50 }
 9 | .lg-color-yellow { color: #ffeb3b }
10 | .lg-bg-color-yellow { background: #ffeb3b }
11 | 


--------------------------------------------------------------------------------
/assets/css/lg-theme/var.less:
--------------------------------------------------------------------------------
1 | @lg-navbar-bg: #08f;
2 | @lg-navbar-color: rgba(255,255,255,.8);
3 | @lg-navbar-active-color: #fff;
4 | @lg-navbar-height: 70px;
5 | 
6 | @lg-float-title-size: 2rem;
7 | 


--------------------------------------------------------------------------------
/assets/js/contest-consts.js:
--------------------------------------------------------------------------------
 1 | export const contestMethods = [
 2 |   { /* 0, not in use */ },
 3 |   { name: 'OI', color: 'red' }, // 1
 4 |   { name: 'ACM', color: 'red' }, // 2
 5 |   { name: '乐多', color: 'red' }, // 3
 6 |   { name: 'IOI', color: 'red' }, // 4
 7 |   { name: 'CF', color: 'red' }, // 5
 8 |   { name: '夺时', color: 'red' } // 6
 9 | ]
10 | 
11 | export const contestPublic = [
12 |   { /* 0, not in use */ },
13 |   { name: '官方比赛', color: 'red' }, // 1
14 |   { name: '团队公开赛', color: 'red' }, // 2
15 |   { name: '团队内部赛', color: 'red' }, // 3
16 |   { name: '个人公开赛', color: 'red' }, // 4
17 |   { name: '个人邀请赛', color: 'red' }, // 5
18 |   { name: '团队邀请赛', color: 'red' }, // 6
19 |   { name: '团队公开赛 (待审核)', color: 'red' }, // 7
20 |   { name: '个人公开赛 (待审核)', color: 'red' } // 8
21 | ]
22 | 


--------------------------------------------------------------------------------
/assets/js/page-helpers.js:
--------------------------------------------------------------------------------
1 | export const setPage = hash => hash && hash.startsWith('#page-')
2 |   ? parseInt(hash.split('-')[1], 10)
3 |   : 1 // Defaults to 1.
4 | 


--------------------------------------------------------------------------------
/assets/js/status-mapping.js:
--------------------------------------------------------------------------------
 1 | export const RecordStatuses = {
 2 |   'Accepted': { icon: 'check', color: 'green' },
 3 |   'AC': { icon: 'check', color: 'green' },
 4 |   'Waiting': { icon: 'clock', color: 'dblue' },
 5 |   'Judging': { icon: 'play-circle', color: 'lblue' },
 6 |   'Unshown': { icon: 'ban', color: 'dblue' },
 7 |   'Compile err': { icon: 'close', color: 'yellow' },
 8 |   'Unaccepted': { icon: 'close', color: 'red' },
 9 |   'WA': { icon: 'close', color: 'red' }
10 | }
11 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | The components directory contains your Vue.js Components.
4 | Nuxt.js doesn't supercharge these components.
5 | 


--------------------------------------------------------------------------------
/components/blogs/blog-item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li>
 3 |     <router-link :to="{ name: 'blogs-id', params: { id: blog.BlogID } }">
 4 |       <span>{{blog.Title}}</span>
 5 |     </router-link>
 6 |     <span class="uk-align-right lg-no-margin-bottom uk-text-meta"><user-link :user="blog.Author"/> @ {{blog.PostTime | readableDate}}</span>
 7 |   </li>
 8 | </template>
 9 | <script>
10 | import UserLink from '~components/common/user-link'
11 | 
12 | export default {
13 |   props: {
14 |     blog: Object
15 |   },
16 |   components: { UserLink }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/components/common/id-link.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <user-link v-if="idObj._instance === 'Luogu\\Models\\User'" :user="idObj"/>
 3 |   <team-link v-else-if="idObj._instance === 'Luogu\\Models\\Team'" :team="idObj"/>
 4 | 
 5 | </template>
 6 | <script>
 7 | import UserLink from './user-link'
 8 | import TeamLink from './team-link'
 9 | 
10 | export default {
11 |   props: {
12 |     idObj: Object
13 |   },
14 |   components: { UserLink, TeamLink }
15 | }
16 | </script>
17 | 


--------------------------------------------------------------------------------
/components/common/page-switcher.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="uk-pagination" uk-margin>
 3 |     <li v-if="currentPage > 1" key="prev"><a :href="'#page-' + (currentPage - 1)"><span uk-pagination-previous></span></a></li>
 4 |     <li v-if="currentPage > 4" key="1"><a href="#page-1">1</a></li>
 5 |     <li v-if="currentPage > 5" class="uk-disabled" key="prev..."><span>...</span></li>
 6 |     <li v-if="currentPage > 3" :key="currentPage - 3"><a :href="'#page-' + (currentPage - 3)">{{currentPage - 3}}</a></li>
 7 |     <li v-if="currentPage > 2" :key="currentPage - 2"><a :href="'#page-' + (currentPage - 2)">{{currentPage - 2}}</a></li>
 8 |     <li v-if="currentPage > 1" :key="currentPage - 1"><a :href="'#page-' + (currentPage - 1)">{{currentPage - 1}}</a></li>
 9 |     <li class="uk-active"><span>{{currentPage}}</span></li>
10 |     <li v-if="currentPage < pageCount" :key="currentPage + 1"><a :href="'#page-' + (currentPage + 1)">{{currentPage + 1}}</a></li>
11 |     <li v-if="currentPage < (pageCount - 1)" :key="currentPage + 2"><a :href="'#page-' + (currentPage + 2)">{{currentPage + 2}}</a></li>
12 |     <li v-if="currentPage < (pageCount - 2)" :key="currentPage + 3"><a :href="'#page-' + (currentPage + 3)">{{currentPage + 3}}</a></li>
13 |     <li v-if="currentPage < (pageCount - 4)" class="uk-disabled" key="next..."><span>...</span></li>
14 |     <li v-if="currentPage < (pageCount - 3)" :key="pageCount"><a :href="'#page-' + pageCount">{{pageCount}}</a></li>
15 |     <li v-if="currentPage < pageCount" key="next"><a :href="'#page-' + (currentPage + 1)"><span uk-pagination-next></span></a></li>
16 |   </ul>
17 | </template>
18 | <script>
19 | import { setPage } from '~assets/js/page-helpers'
20 | 
21 | // TODO: Refactor the component making currentPage a prop.
22 | 
23 | export default {
24 |   data(){ return { currentPage: setPage(this.$route.hash) } },
25 |   props: {
26 |     itemCount: Number,
27 |   },
28 |   computed: {
29 |     pageCount() { return Math.ceil(this.itemCount / 20) }
30 |   },
31 |   watch: {
32 |     $route({ hash }){ this.currentPage = setPage(hash) }
33 |   }
34 | }
35 | </script>
36 | 


--------------------------------------------------------------------------------
/components/common/paged-list.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 class="lg-float-title">{{title}}</h1>
 4 |     <div class="uk-card uk-card-default uk-card-body uk-margin">
 5 |       <div v-show="loading" uk-spinner></div>
 6 |       <ul v-show="!loading" class="uk-list uk-list-divider">
 7 |         <slot name="item" v-for="item in items.result"  :item="item"/>
 8 |       </ul>
 9 |       <page-switcher :itemCount="items.count"/>
10 |     </div>
11 |   </div>
12 | </template>
13 | <script>
14 | 
15 | // Don't ask me why I did this; "I don't know."
16 | 
17 | // Now I would abandon this. That's a faulty extraction.
18 | 
19 | import PageSwitcher from '~components/common/page-switcher'
20 | 
21 | export default {
22 |   data() {
23 |     return {
24 |       loading: false
25 |     }
26 |   },
27 |   props: {
28 |     title: String,
29 |     items: Object,
30 |     laoding: Boolean
31 |   },
32 |   components: { PageSwitcher }
33 | }
34 | </script>
35 | 


--------------------------------------------------------------------------------
/components/common/team-link.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span>
 3 |     <router-link class="uk-link-reset" :to="{ name: 'users-id', params: { id: team.TeamID } }">{{team.Name}}</router-link>
 4 |   </span>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   props: {
 9 |     team: Object
10 |   }
11 | }
12 | </script>
13 | 


--------------------------------------------------------------------------------
/components/common/user-info.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
 3 |     <div class="uk-width-auto">
 4 |       <img class="uk-comment-avatar uk-border-circle" :src="`//cdn.luogu.org/upload/usericon/${user.UID}.png`" width="80" height="80" alt="">
 5 |     </div>
 6 |     <div class="uk-width-expand">
 7 |       <h4 class="uk-comment-title uk-margin-remove">
 8 |         <router-link :class="'uk-link-reset lg-color-' + user.level_color" :to="{ name: 'users-id', params: { id: user.UID } }">{{user.Username}}</router-link>
 9 |         <span v-if="user.isAdmin" class="uk-label uk-margin-small-left">管理员</span>
10 |         <span v-if="!user.isValid" class="uk-label uk-margin-small-left">已封禁</span>
11 |       </h4>
12 |       <slot></slot>
13 |     </div>
14 |   </header>
15 | </template>
16 | <script>
17 | export default {
18 |   props: {
19 |     user: Object
20 |   }
21 | }
22 | </script>
23 | <style lang="less" scoped>
24 |   .uk-comment-avatar {
25 |     height: 80px;
26 |     width: 80px;
27 |   }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/components/common/user-link.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span>
 3 |     <router-link :class="'uk-link-reset lg-color-' /*+ user.level_color*/" :to="{ name: 'users-id', params: { id: user.UID } }">{{user.Username}}</router-link>
 4 |     <span v-if="user.isAdmin" class="uk-label uk-margin-small-left">管理员</span>
 5 |     <span v-if="!user.isValid" class="uk-label uk-margin-small-left">已封禁</span>
 6 |   </span>
 7 | </template>
 8 | <script>
 9 | export default {
10 |   props: {
11 |     user: Object
12 |   }
13 | }
14 | </script>
15 | 


--------------------------------------------------------------------------------
/components/contests/contest-item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li>
 3 |     <a v-if="isEnded" href="#" class="uk-link-muted">
 4 |       {{contest.Name}}
 5 |       <span class="uk-align-right lg-no-margin-bottom">
 6 |         <span>{{methodLabel.name}}</span>
 7 |         <span> · </span>
 8 |         <span>{{publicLabel.name}}</span>
 9 |         <span> · </span>
10 |         <span>结束于 {{contest.EndTime | readableDate}}</span>
11 |       </span>
12 |     </a>
13 |     <a v-else-if="isOngoing" href="#">
14 |       <div>
15 |         <h5>{{contest.Name}}<span class="uk-label uk-margin-small-left">正在进行</span></h5>
16 |         <p>
17 |           <span :class="'uk-label uk-margin-small-right lg-bg-color-' + methodLabel.color">{{methodLabel.name}}</span>
18 |           <span :class="'uk-label uk-margin-small-right lg-bg-color-' + publicLabel.color">{{publicLabel.name}}</span>
19 |           开始于{{contest.StartTime | readableDate}}，将于{{contest.EndTime | readableDate}}结束，共{{contest.ProblemCount}}题。
20 |         </p>
21 |       </div>
22 |     </a>
23 |     <a v-else-if="isToStart" href="#">
24 |       <div class="uk-grid-collapse" uk-grid>
25 |         <div class="uk-width-2-3@m uk-width-1-1@s lg-contest-item">
26 |           <h4>{{contest.Name}}</h4>
27 |           <p>
28 |             <span class="uk-label uk-margin-small-right">即将开始</span>
29 |             <span :class="'uk-label uk-margin-small-right lg-bg-color-' + methodLabel.color">{{methodLabel.name}}</span>
30 |             <b>{{publicLabel.name}}</b>
31 |             由<id-link :idObj="contest.Hoster"/>主办，将于{{contest.StartTime | readableDate}}开始，{{contest.EndTime | readableDate}}结束，共{{contest.ProblemCount}}题。
32 |           </p>
33 |         </div>
34 |         <div class="uk-width-1-3@m uk-visible@m lg-countdown-container">
35 |           <div :uk-countdown="'date: ' + (new Date(contest.StartTime * 1000)).toISOString()">
36 |             <span class="uk-countdown-number uk-countdown-days"></span>
37 |             <span class="uk-countdown-separator">:</span>
38 |             <span class="uk-countdown-number uk-countdown-hours"></span>
39 |             <span class="uk-countdown-separator">:</span>
40 |             <span class="uk-countdown-number uk-countdown-minutes"></span>
41 |             <span class="uk-countdown-separator">:</span>
42 |             <span class="uk-countdown-number uk-countdown-seconds"></span>
43 |             <span>后开始</span>
44 |           </div>
45 |         </div>
46 |       </div>
47 |     </a>
48 |   </li>
49 | </template>
50 | <style lang="less" scoped>
51 |   a {
52 |     text-decoration: none;
53 |     color: inherit;
54 |   }
55 |   .uk-countdown-number {
56 |     font-size: 2.5rem;
57 |     line-height: 2.5rem;
58 |   }
59 |   .lg-countdown-container {
60 |     text-align: right;
61 |   }
62 |   .lg-contest-item h4, p {
63 |     margin: 0;
64 |   }
65 |   .lg-contest-item h4 {
66 |     overflow: hidden;
67 |     text-overflow: ellipsis;
68 |     white-space: nowrap;
69 |   }
70 | </style>
71 | 
72 | <script>
73 | import { contestMethods, contestPublic } from '~assets/js/contest-consts'
74 | import IdLink from '~components/common/id-link'
75 | 
76 | export default {
77 |   props: {
78 |     contest: Object
79 |   },
80 |   computed: {
81 |     publicLabel() { return contestPublic[this.contest.Public] },
82 |     methodLabel() { return contestMethods[this.contest.Method] },
83 |     isEnded() { return (new Date()) > (new Date(this.contest.EndTime * 1000)) },
84 |     isToStart() { return (new Date()) < (new Date(this.contest.StartTime * 1000)) },
85 |     isOngoing() { return (new Date()) < (new Date(this.contest.EndTime * 1000)) && (new Date()) > (new Date(this.contest.StartTime * 1000)) },
86 |   },
87 |   components: { IdLink }
88 | }
89 | </script>
90 | 


--------------------------------------------------------------------------------
/components/discuss/discuss-item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li>
 3 |     <router-link :to="{ name: 'discuss-id', params: { id: post.PostID } }">
 4 |       <span>{{post.Title}}</span>
 5 |     </router-link>
 6 |     <span class="uk-align-right lg-no-margin-bottom uk-text-meta"><user-link :user="post.Author"/> @ {{post.SubmitTime | readableDate}}</span>
 7 |   </li>
 8 | </template>
 9 | <script>
10 | import UserLink from '~components/common/user-link'
11 | 
12 | export default {
13 |   props: {
14 |     post: Object
15 |   },
16 |   components: { UserLink }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/components/layout/app-dropdown.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li>
 3 |     <a href="#">
 4 |       <span class="uk-icon uk-margin-small-right" uk-icon="icon: grid"></span>应用
 5 |     </a>
 6 |     <div class="uk-width-large" uk-dropdown>
 7 |       <div class="uk-dropdown-grid uk-child-width-1-3@m" uk-grid>
 8 |         <div v-for="{ title, icon } in apps">
 9 |           <div class="uk-tile uk-tile-default uk-padding-small lg-app-icon">
10 |             <span class="uk-position-top-center" :uk-icon="'icon: ' +  icon + '; ratio: 2'"></span>
11 |             <p class="uk-position-bottom-center uk-margin-top">{{title}}</p>
12 |           </div>
13 |         </div>
14 |       </div>
15 |     </div>
16 |   </li>
17 | </template>
18 | <script>
19 | export default {
20 |   props: {
21 |     apps: Array
22 |   }
23 | }
24 | </script>
25 | <style lang="less">
26 | .lg-app-icon {
27 |   height: 4em;
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/components/layout/lg-footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="uk-section uk-section-default uk-margin-large-top">
 3 |     <div class="uk-container">
 4 | 
 5 |       <h3>Enjoy coding at Luogu</h3>
 6 | 
 7 |       <div class="uk-grid-match uk-child-width-1-2@m uk-child-width-1-1@s" uk-grid>
 8 |         <div>
 9 |           <ul class="uk-list">
10 |             <li><a href="#">关于洛谷</a></li>
11 |             <li><a href="#">帮助中心</a></li>
12 |             <li><a href="#">洛谷社区规则</a></li>
13 |             <li><a href="#">用户协议</a></li>
14 |             <li><a href="#">联系我们</a></li>
15 |           </ul>
16 |         </div>
17 |         <div>
18 |           <p>2013-2017 , 洛谷 &copy; 保留所有权利。<br>
19 |           Powered by 厦门一中</p>
20 |           <p>Developed by @kkksc03, @lzn, @w, @lin_toto<br>
21 |           <a href="http://www.miitbeian.gov.cn/">陕ICP备17005722号-1</a> | <a href="http://www.cnzz.com/stat/website.php?web_id=5476811" target="_blank" title="站长统计">站长统计</a></p>
22 |         </div>
23 |       </div>
24 | 
25 |     </div>
26 |   </footer>
27 | </template>
28 | <style lang="less" scoped>
29 | /*
30 | footer {
31 |   text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.22);
32 | }
33 | a {
34 |   0px 3px 4px rgba(0, 0, 0, 0.22)
35 | }*/
36 | </style>
37 | 


--------------------------------------------------------------------------------
/components/layout/login-dropdown.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li>
 3 |     <a href="#">
 4 |       <span class="uk-icon uk-margin-small-right" uk-icon="icon: sign-in"></span>登录 / 注册
 5 |     </a>
 6 |     <div class="uk-width-medium" uk-dropdown>
 7 |       <form @submit.prevent="login">
 8 |         <fieldset class="uk-fieldset">
 9 |           <div class="uk-margin-small uk-inline uk-width-1-1">
10 |             <span class="uk-form-icon" uk-icon="icon: user"></span>
11 |             <input ref="username" class="uk-input uk-width-1-1" placeholder="用户名">
12 |           </div>
13 |           <div class="uk-margin-small uk-inline uk-width-1-1">
14 |             <span class="uk-form-icon" uk-icon="icon: lock"></span>
15 |             <input ref="password" class="uk-input" placeholder="密码" type="password">
16 |           </div>
17 |           <div class="uk-margin-small">
18 |             <input type="submit" class="uk-button uk-button-primary uk-width-1-1" value="登录">
19 |           </div>
20 |           <div class="uk-small-margin">
21 |             <a href="#">注册账号</a>
22 |             <a class="uk-float-right" href="#">忘记密码？</a>
23 |           </div>
24 |         </fieldset>
25 |       </form>
26 |     </div>
27 |   </li>
28 | </template>
29 | <script>
30 | import { get, post } from '~plugins/lgapi'
31 | 
32 | export default {
33 |   methods: {
34 |     async login() {
35 |       const data = await post('/api/authenticate/userPassLogin', {
36 |         username: this.$refs.username.value,
37 |         password: this.$refs.password.value
38 |       })
39 |       if (!data.err) {
40 |         const currentUser = await get('/api/user/current')
41 |         this.$store.commit('SET_USER', currentUser)
42 |       }
43 |     }
44 |   }
45 | }
46 | </script>
47 | 


--------------------------------------------------------------------------------
/components/layout/nav-bar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="uk-navbar-container uk-margin uk-navbar" uk-navbar>
 3 |     <div class="uk-navbar-left">
 4 | 
 5 |       <router-link class="uk-navbar-item uk-logo" to="/">Luogu</router-link>
 6 | 
 7 |       <ul class="uk-navbar-nav uk-visible@m">
 8 |         <li>
 9 |           <a href="#">
10 |             <span class="uk-icon uk-margin-small-right" uk-icon="icon: table"></span>题目</a>
11 |         </li>
12 |         <li>
13 |           <router-link :to="{ name: 'contests' }">
14 |             <span class="uk-icon uk-margin-small-right" uk-icon="icon: social"></span>比赛</router-link>
15 |         </li>
16 |         <li>
17 |           <router-link :to="{ name: 'discuss' }">
18 |             <span class="uk-icon uk-margin-small-right" uk-icon="icon: comments"></span>讨论</router-link>
19 |         </li>
20 |         <li>
21 |           <router-link :to="{ name: 'blogs' }">
22 |             <span class="uk-icon uk-margin-small-right" uk-icon="icon: bookmark"></span>博客</router-link>
23 |         </li>
24 |       </ul>
25 | 
26 |     </div>
27 |     <div class="uk-navbar-right">
28 |       <div class="uk-navbar-item uk-visible@m">
29 |         <form class="uk-search uk-search-navbar">
30 |           <a class="uk-search-icon-flip" uk-search-icon></a>
31 |           <input class="uk-search-input" type="search" placeholder="搜索">
32 |         </form>
33 |       </div>
34 |       <ul class="uk-navbar-nav">
35 |         <app-dropdown :apps="apps" class="uk-visible@m"/>
36 |         <li v-if="$store.state._currentUser">
37 |           <a href="#">
38 |             <span class="uk-icon uk-margin-small-right" uk-icon="icon: bell"></span>通知
39 |           </a>
40 |         </li>
41 |         <user-dropdown v-if="$store.state._currentUser" :user="$store.state._currentUser" />
42 |         <login-dropdown v-else />
43 |         <li class="uk-hidden@m">
44 |           <a href="#offcanvas" uk-toggle>
45 |             <span class="uk-icon" uk-icon="icon: menu"></span>
46 |           </a>
47 |         </li>
48 |       </ul>
49 |     </div>
50 |     <off-canvas id="offcanvas" class="uk-hidden@m" :apps="apps" />
51 |   </nav>
52 | </template>
53 | <style lang="less">
54 | 
55 | </style>
56 | <script>
57 | import AppDropdown from './app-dropdown'
58 | import UserDropdown from './user-dropdown'
59 | import LoginDropdown from './login-dropdown'
60 | import OffCanvas from './off-canvas'
61 | 
62 | export default {
63 |   data: () => ({
64 |     apps: [
65 |       { icon: 'star', title: '大牛分站' },
66 |       { icon: 'heart', title: '给洛谷投食' },
67 |       { icon: 'table', title: '评测记录' },
68 |       { icon: 'users', title: '团队' },
69 |       { icon: 'image', title: '图床' }
70 |     ]
71 |   }),
72 |   components: { AppDropdown, UserDropdown, LoginDropdown, OffCanvas }
73 | }
74 | </script>
75 | 


--------------------------------------------------------------------------------
/components/layout/off-canvas.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div uk-offcanvas="mode: push; overlay: true">
 3 |     <div class="uk-offcanvas-bar uk-flex uk-flex-column">
 4 | 
 5 |       <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical">
 6 |         <li class="uk-nav-item">
 7 |           <form class="uk-search uk-search-default">
 8 |             <span uk-search-icon></span>
 9 |             <input class="uk-search-input" type="search" placeholder="搜索">
10 |           </form>
11 |         </li>
12 |         <li>
13 |           <a href="#">
14 |             <span class="uk-icon uk-margin-small-right" uk-icon="icon: table"></span>题目</a>
15 |         </li>
16 |         <li>
17 |           <router-link :to="{ name: 'contests' }">
18 |             <span class="uk-icon uk-margin-small-right" uk-icon="icon: social"></span>比赛
19 |           </router-link>
20 |         </li>
21 |         <li>
22 |           <router-link :to="{ name: 'discuss' }">
23 |             <span class="uk-icon uk-margin-small-right" uk-icon="icon: comments"></span>讨论
24 |           </router-link>
25 |         </li>
26 |         <li>
27 |           <router-link :to="{ name: 'blogs' }">
28 |             <span class="uk-icon uk-margin-small-right" uk-icon="icon: bookmark"></span>博客
29 |           </router-link>
30 |         </li>
31 |         <li class="uk-parent">
32 |           <span>应用</span>
33 |           <ul class="uk-nav-sub">
34 |             <li v-for="app in apps" :key="app.title">
35 |               <a href="#"><span class="uk-icon uk-margin-small-right" :uk-icon="'icon: ' + app.icon"></span>{{app.title}}</a>
36 |             </li>
37 |           </ul>
38 |         </li>
39 |       </ul>
40 | 
41 |     </div>
42 |   </div>
43 | </template>
44 | <script>
45 | export default {
46 |   props: {
47 |     apps: Array
48 |   }
49 | }
50 | </script>
51 | 


--------------------------------------------------------------------------------
/components/layout/user-dropdown.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li>
 3 |     <a href="#">
 4 |       <span class="uk-icon uk-margin-small-right" uk-icon="icon: user"></span>
 5 |       {{ user.Username }}
 6 |     </a>
 7 |     <div class="uk-navbar-dropdown">
 8 |       <ul class="uk-nav uk-navbar-dropdown-nav">
 9 |         <li class="uk-nav-header">个人</li>
10 |         <li>
11 |           <router-link :to="{ name: 'users-id', params: { id: user.UID } }">个人页</router-link>
12 |         </li>
13 |         <li>
14 |           <a href="#">私信</a>
15 |         </li>
16 |         <li class="uk-nav-divider"></li>
17 |         <li class="uk-nav-header">团队</li>
18 |         <li>
19 |           <a href="#">这是一个普通的团队</a>
20 |         </li>
21 |         <li class="uk-nav-divider"></li>
22 |         <li class="uk-nav-header">比赛</li>
23 |         <li>
24 |           <a href="#">这是一个普通的比赛</a>
25 |         </li>
26 |         <li class="uk-nav-divider"></li>
27 |         <li>
28 |           <a href="#" @click.prevent="logout">
29 |             <span class="uk-icon uk-margin-small-right" uk-icon="icon: sign-out"></span>
30 |             退出登录
31 |           </a>
32 |         </li>
33 |       </ul>
34 |     </div>
35 |   </li>
36 | </template>
37 | <script>
38 |   import { post } from '~plugins/lgapi'
39 | 
40 |   export default {
41 |     props: { user: Object },
42 |     methods: {
43 |       async logout() {
44 |         const res = await post('/api/authenticate/logout')
45 |         if (!res.error) this.$store.commit('SET_USER', null)
46 |       }
47 |     }
48 |   }
49 | </script>
50 | 


--------------------------------------------------------------------------------
/components/records/status-label.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <span :class="color"><span class="uk-margin-small-right" :uk-icon="'icon: ' + icon"></span>{{status}}</span>
 3 | </template>
 4 | <script>
 5 | import { RecordStatuses } from '~assets/js/status-mapping';
 6 | 
 7 | export default {
 8 |   props: {
 9 |     status: String
10 |   },
11 |   computed: {
12 |     icon(){ return RecordStatuses[this.status] ? RecordStatuses[this.status].icon : '' },
13 |     color(){ return RecordStatuses[this.status] ? `lg-color-${RecordStatuses[this.status].color}` : 'lg-color-red' },
14 |   }
15 | }
16 | </script>
17 | <style lang="less" scoped>
18 |   span {
19 |     font: inherit;
20 |   }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/components/records/status-point.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <a :href="'#point-' + pointId" uk-scroll><span :class="color"></span></a>
 3 | </template>
 4 | <script>
 5 | import { RecordStatuses } from '~assets/js/status-mapping';
 6 | 
 7 | export default {
 8 |   props: {
 9 |     status: String,
10 |     pointId: Number
11 |   },
12 |   computed: {
13 |     color(){ return RecordStatuses[this.status] ? `lg-bg-color-${RecordStatuses[this.status].color}` : 'lg-bg-color-red' }
14 |   }
15 | }
16 | </script>
17 | <style lang="less" scoped>
18 |   span {
19 |     display: inline-block;
20 |     margin-right: .3em;
21 |     width: 1em;
22 |     height: 1em;
23 |     //background: #333;
24 |   }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | This directory contains your Application Layouts.
4 | 
5 | More informations about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/views#layouts
7 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nav-bar></nav-bar>
 4 |     <div class="uk-container"><nuxt/></div>
 5 |     <a href="#" class="uk-position-fixed lg-totop" uk-totop uk-scroll></a>
 6 |     <lg-footer></lg-footer>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import NavBar from '~components/layout/nav-bar'
12 | import LgFooter from '~components/layout/lg-footer'
13 | import axios from 'axios'
14 | 
15 | export default {
16 |   components: { NavBar, LgFooter },
17 |   beforeMount() {
18 |     //We set this on nuxtServerInit. In this way we get clientId from server.
19 |     console.log(this.$store.state)
20 |     if (this.$store.state._apiBaseURL) axios.defaults.baseURL = this.$store.state._apiBaseURL
21 |     if (this.$store.state._clientId) {
22 |       console.log('found clientId from server:', this.$store.state._clientId)
23 |       const bc = require('browser-cookies')
24 |       bc.set('__client_id', this.$store.state._clientId, { domain: 'luogu.org' })
25 |     }
26 |   }
27 | }
28 | </script>
29 | 
30 | <style lang="less">
31 | @import "~assets/css/lg-theme";
32 | 
33 | .lg-totop {
34 |   right: 10%;
35 |   bottom: 10%;
36 | }
37 | /*
38 | .uk-container {
39 |   min-height: 1024px; // Workaround for sticker component
40 |   /*
41 |    The sticker component would cause
42 |    [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content.
43 |    If there is no enough page height for the sticker to function.
44 |    So we manully apply a min-height there to make this page scrollable for most users.
45 | 
46 | }
47 | */
48 | </style>
49 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | This directory contains your Application Middleware.
4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).
5 | 
6 | More informations about the usage of this directory in the documentation:
7 | https://nuxtjs.org/guide/routing#middleware
8 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   /*
 3 |   ** Headers of the page
 4 |   */
 5 |   head: {
 6 |     title: 'Luogu vNext',
 7 |     meta: [
 8 |       { charset: 'utf-8' },
 9 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
10 |       { hid: 'description', content: 'Luogu vNext' }
11 |     ],
12 |     script: [
13 |       // { src: '//unpkg.cnpmjs.org/jquery/dist/jquery.min.js' },
14 |       // { src: '//unpkg.cnpmjs.org/uikit/dist/js/uikit.min.js', defer: true },
15 |       // { src: '//unpkg.cnpmjs.org/uikit/dist/js/uikit-icons.min.js', defer: true }
16 |     ],
17 |     link: [
18 |       { rel: 'icon', type: 'image/x-icon', href: '//luogu.oss-cn-hangzhou.aliyuncs.com/images/favicon3.ico' },
19 |       { rel: 'stylesheet', href: '//unpkg.cnpmjs.org/katex/dist/katex.min.css' }
20 |     ]
21 |   },
22 |   /*
23 |   ** Customize the progress-bar color
24 |   */
25 |   loading: { color: '#3B8070' },
26 |   plugins: [
27 |     '~plugins/global-filters',
28 |     { src: '~plugins/uikit', ssr: false }
29 |   ],
30 |   build: {
31 |     analysis: { analyzerPort: 1989 },
32 |     /*
33 |     ** Run ESLINT on save
34 |     */
35 |     extend (config, ctx) {
36 |       if (ctx.isClient) {
37 |         config.module.rules.push({
38 |           enforce: 'pre',
39 |           test: /\.(js|vue)$/,
40 |           loader: 'eslint-loader',
41 |           exclude: /(node_modules)/
42 |         })
43 |       }
44 |     },
45 |     vendor: ['axios', 'lodash', 'vue-markdown', '~plugins/lgapi']
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "luoguf",
 3 |   "version": "1.0.0",
 4 |   "description": "Luogu Frontend",
 5 |   "author": "laosb",
 6 |   "private": true,
 7 |   "dependencies": {
 8 |     "axios": "^0.16.2",
 9 |     "body-parser": "^1.17.2",
10 |     "browser-cookies": "^1.1.0",
11 |     "cookies": "^0.7.0",
12 |     "jquery": "^3.2.1",
13 |     "moment": "^2.18.1",
14 |     "nuxt": "^1.0.0-rc3",
15 |     "uikit": "^3.0.0-beta.28",
16 |     "vue-markdown": "^2.2.4"
17 |   },
18 |   "scripts": {
19 |     "dev": "HOST=0.0.0.0 PORT=3333 nuxt",
20 |     "build": "nuxt build",
21 |     "ba": "nuxt build -a && NODE_ENV=production nuxt start",
22 |     "start": "cross-env NODE_ENV=production nuxt start",
23 |     "generate": "nuxt generate",
24 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
25 |     "precommit": "npm run lint"
26 |   },
27 |   "devDependencies": {
28 |     "babel-eslint": "^7.2.3",
29 |     "cross-env": "^5.0.3",
30 |     "eslint": "^4.3.0",
31 |     "eslint-config-standard": "^10.2.1",
32 |     "eslint-loader": "^1.9.0",
33 |     "eslint-plugin-html": "^3.1.1",
34 |     "eslint-plugin-import": "^2.7.0",
35 |     "eslint-plugin-node": "^5.1.1",
36 |     "eslint-plugin-promise": "^3.5.0",
37 |     "eslint-plugin-standard": "^3.0.1",
38 |     "eslint-plugin-vuefix": "^0.2.0",
39 |     "less": "^2.7.2",
40 |     "less-loader": "^4.0.5"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the .vue files inside this directory and create the router of your application.
5 | 
6 | More informations about the usage of this directory in the documentation:
7 | https://nuxtjs.org/guide/routing
8 | 


--------------------------------------------------------------------------------
/pages/blogs/_id.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 class="lg-float-title">{{Title}}</h1>
 4 |     <div uk-grid>
 5 |       <div class="uk-width-2-3">
 6 |         <div class="uk-card uk-card-default uk-card-body uk-margin">
 7 |           <vue-markdown :source="Content"></vue-markdown>
 8 |         </div>
 9 |       </div>
10 |       <div class="uk-width-1-3">
11 |         <div class="uk-card uk-card-default uk-card-body">
12 |           <article class="uk-comment">
13 |             <user-info :user="Author"></user-info>
14 |           </article>
15 |           <dl class="uk-description-list">
16 |             <dt>发布时间</dt>
17 |             <dd>{{PostTime | readableDate}}</dd>
18 |           </dl>
19 |         </div>
20 |       </div>
21 |     </div>
22 |   </div>
23 | </template>
24 | <script>
25 | import VueMarkdown from 'vue-markdown'
26 | import UserInfo from '~components/common/user-info'
27 | 
28 | import { get } from '~plugins/lgapi'
29 | 
30 | export default {
31 |   async asyncData({ params, error }) {
32 |     return await get(`/api/blog/detail/${params.id}`)
33 |   },
34 |   components: { VueMarkdown, UserInfo }
35 | }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/pages/blogs/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 class="lg-float-title">博客</h1>
 4 |     <div class="uk-card uk-card-default uk-card-body uk-margin">
 5 |       <div v-show="loading" uk-spinner></div>
 6 |       <ul v-show="!loading" class="uk-list uk-list-divider">
 7 |         <blog-item v-for="blog in blogs.result" :key="blog.BlogID" :blog="blog"/>
 8 |       </ul>
 9 |       <page-switcher :itemCount="blogs.count"/>
10 |     </div>
11 |   </div>
12 | </template>
13 | <script>
14 | import PageSwitcher from '~components/common/page-switcher'
15 | import BlogItem from '~components/blogs/blog-item'
16 | 
17 | import { setPage } from '~assets/js/page-helpers'
18 | 
19 | import { get } from '~plugins/lgapi'
20 | 
21 | export default {
22 |   data(){ return { current: setPage(this.$route.hash), loading: false } },
23 |   async asyncData({ route }){
24 |     return { blogs: await get(`/api/blog/lists?page=${setPage(route.hash)}`) }
25 |   },
26 |   components: { PageSwitcher, BlogItem },
27 |   watch: {
28 |     async $route({hash}){
29 |       this.current = setPage(hash)
30 |       this.loading = true
31 |       this.blogs = await get(`/api/blog/lists?page=${this.current}`)
32 |       this.loading = false
33 |     }
34 |   }
35 | }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/pages/contests/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 class="lg-float-title">比赛</h1>
 4 |     <div class="uk-card uk-card-default uk-card-body uk-margin">
 5 |       <div v-show="loading" uk-spinner></div>
 6 |       <!--
 7 |       <div v-if="(new Date()) > (new Date(contests.result[0].EndTime * 1000)) && current === 1" class="uk-placeholder uk-text-center">
 8 |         暂时没有正在进行或即将到来的比赛😳
 9 |       </div>
10 |       -->
11 |       <ul v-show="!loading" class="uk-list uk-list-divider">
12 |         <contest-item v-for="contest in contests.result" :key="contest.TID" :contest="contest"/>
13 |       </ul>
14 |       <page-switcher :itemCount="contests.count"/>
15 |     </div>
16 |   </div>
17 | </template>
18 | <script>
19 | import PageSwitcher from '~components/common/page-switcher'
20 | import ContestItem from '~components/contests/contest-item'
21 | 
22 | import { setPage } from '~assets/js/page-helpers'
23 | 
24 | import { get } from '~plugins/lgapi'
25 | 
26 | export default {
27 |   data(){ return { current: setPage(this.$route.hash), loading: false } },
28 |   async asyncData({ route }){
29 |     return { contests: await get(`/api/contest/lists?page=${setPage(route.hash)}`) }
30 |   },
31 |   components: { PageSwitcher, ContestItem },
32 |   watch: {
33 |     async $route({hash}){
34 |       this.current = setPage(hash)
35 |       this.loading = true
36 |       this.contests = await get(`/api/contest/lists?page=${this.current}`)
37 |       this.loading = false
38 |     }
39 |   }
40 | }
41 | </script>
42 | 


--------------------------------------------------------------------------------
/pages/discuss/_id.vue:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luogu-dev/luogu-frontend-2017/9b747191d8712b8a5e7ca38c0d83cbe612c87bd2/pages/discuss/_id.vue


--------------------------------------------------------------------------------
/pages/discuss/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 class="lg-float-title">讨论</h1>
 4 |     <div class="uk-card uk-card-default uk-card-body uk-margin">
 5 |       <div v-show="loading" uk-spinner></div>
 6 |       <ul v-show="!loading" class="uk-list uk-list-divider">
 7 |         <discuss-item v-for="post in posts.result" :key="post.PostID" :post="post"/>
 8 |       </ul>
 9 |       <page-switcher :itemCount="posts.count"/>
10 |     </div>
11 |   </div>
12 | </template>
13 | <script>
14 | import PageSwitcher from '~components/common/page-switcher'
15 | import DiscussItem from '~components/discuss/discuss-item'
16 | 
17 | import { setPage } from '~assets/js/page-helpers'
18 | 
19 | import { get } from '~plugins/lgapi'
20 | 
21 | export default {
22 |   data(){ return { current: setPage(this.$route.hash), loading: false } },
23 |   async asyncData({ route }){
24 |     return { posts: await get(`/api/discuss/lists?page=${setPage(route.hash)}`) }
25 |   },
26 |   components: { PageSwitcher, DiscussItem },
27 |   watch: {
28 |     async $route({ hash }){
29 |       this.current = setPage(hash)
30 |       this.loading = true
31 |       this.posts = await get(`/api/discuss/lists?page=${this.current}`)
32 |       this.loading = false
33 |     }
34 |   }
35 | }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="container">
 3 |     <div>
 4 | 
 5 |     </div>
 6 |   </section>
 7 | </template>
 8 | 
 9 | <script>
10 | 
11 | </script>
12 | 
13 | <style>
14 | 
15 | </style>
16 | 


--------------------------------------------------------------------------------
/pages/problems/_id.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <h1 class="lg-float-title">{{Name}}
  4 |       <span class="uk-label uk-margin-small-left">{{StringPID}}</span>
  5 |     </h1>
  6 |     <div uk-grid>
  7 |       <div class="uk-width-2-3">
  8 |         <div v-if="Background" class="uk-card uk-card-default uk-card-body uk-margin">
  9 |           <h3 class="uk-card-title">背景</h3>
 10 |           <vue-markdown :source="Background"></vue-markdown>
 11 |         </div>
 12 |         <div class="uk-card uk-card-default uk-card-body uk-margin">
 13 |           <h3 class="uk-card-title">描述</h3>
 14 |           <vue-markdown :source="Description"></vue-markdown>
 15 |         </div>
 16 |         <div class="uk-card uk-card-default uk-card-body uk-margin">
 17 |           <h3 class="uk-card-title">格式</h3>
 18 |           <dl class="uk-description-list">
 19 |             <dt>输入格式</dt>
 20 |             <dd><vue-markdown :source="InputFormat"></vue-markdown></dd>
 21 |             <dt>输出格式</dt>
 22 |             <dd><vue-markdown :source="OutputFormat"></vue-markdown></dd>
 23 |           </dl>
 24 |         </div>
 25 |         <div class="uk-card uk-card-default uk-card-body uk-margin">
 26 |           <h3 class="uk-card-title">数据样例</h3>
 27 |           <div v-for="(sample, i) in Sample" :key="i">
 28 |             <h4>#{{i + 1}}</h4>
 29 |             <div uk-grid>
 30 |               <div class="uk-width-1-2">
 31 |                 <dl class="uk-description-list">
 32 |                   <dt>输入样例</dt>
 33 |                   <dd>
 34 |                     <pre>{{sample[0]}}</pre>
 35 |                   </dd>
 36 |                 </dl>
 37 |               </div>
 38 |               <div class="uk-width-1-2">
 39 |                 <dl class="uk-description-list">
 40 |                   <dt>输出样例</dt>
 41 |                   <dd>
 42 |                     <pre>{{sample[1]}}</pre>
 43 |                   </dd>
 44 |                 </dl>
 45 |               </div>
 46 |             </div>
 47 |           </div>
 48 |         </div>
 49 |         <div v-if="Hint" class="uk-card uk-card-default uk-card-body">
 50 |           <h3 class="uk-card-title">提示</h3>
 51 |           <vue-markdown :source="Hint"></vue-markdown>
 52 |         </div>
 53 |       </div>
 54 |       <div class="uk-width-1-3">
 55 |         <div class="uk-card uk-card-default uk-card-body">
 56 |           <div uk-grid>
 57 |             <div class="uk-width-1-2">
 58 |               <dl class="uk-description-list">
 59 |                 <dt>通过量</dt>
 60 |                 <dd class="lg-largenum">233</dd>
 61 |               </dl>
 62 |             </div>
 63 |             <div class="uk-width-1-2">
 64 |               <dl class="uk-description-list">
 65 |                 <dt>提交量</dt>
 66 |                 <dd class="lg-largenum">2048</dd>
 67 |               </dl>
 68 |             </div>
 69 |           </div>
 70 |           <dl class="uk-description-list">
 71 |             <dt>题目提供者</dt>
 72 |             <dd>{{provider ? provider : '幽灵用户'}}</dd>
 73 |             <dt>标签</dt>
 74 |             <dd>
 75 |               <span v-for="tag in tags" :class="'uk-label uk-margin-small-right lg-bg-color-' + tag.color" :key="tag.name">{{tag.name}}</span>
 76 |             </dd>
 77 |             <dt>难度</dt>
 78 |             <dd>{{difficulty}}</dd>
 79 |             <dt>时空限制</dt>
 80 |             <dd>{{limits}}</dd>
 81 |           </dl>
 82 |           <div class="uk-child-width-1-2@m lg-margin-reset" uk-grid>
 83 |             <button class="uk-button uk-button-primary lg-padding-reset">提交答案</button>
 84 |             <button class="uk-button uk-button-default lg-padding-reset">查看题解</button>
 85 |           </div>
 86 |           <ul class="uk-iconnav uk-margin">
 87 |             <li>
 88 |               <a href="#" uk-icon="icon: comments" title="查看本题讨论" uk-tooltip></a>
 89 |             </li>
 90 |             <li>
 91 |               <a href="#" uk-icon="icon: table" title="查看本题评测记录" uk-tooltip></a>
 92 |             </li>
 93 |           </ul>
 94 |         </div>
 95 |       </div>
 96 |     </div>
 97 |   </div>
 98 | </template>
 99 | <script>
100 | import { get } from '~plugins/lgapi'
101 | import VueMarkdown from 'vue-markdown'
102 | // import UserInfo from '~components/common/user-info'
103 | 
104 | export default {
105 |   async asyncData({ params }){
106 |     return Object.assign({ provider: null, limits: '1s / 128KB', tags: [], difficulty: 'Very Hard' }, await get(`/api/problem/detail/${params.id}`))
107 |   },
108 |   components: { VueMarkdown }
109 | }
110 | </script>
111 | 


--------------------------------------------------------------------------------
/pages/problems/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 
3 | </template>
4 | <script>
5 | export default {
6 | 
7 | }
8 | </script>
9 | 


--------------------------------------------------------------------------------
/pages/records/_id.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div uk-grid>
  4 |       <div class="uk-width-2-3">
  5 |         <div class="uk-card uk-card-default uk-card-body uk-margin">
  6 |           <h3 class="uk-card-title">
  7 |             <status-label :status="stat.word" />
  8 |           </h3>
  9 |           <p>得分：{{stat.score}}，占用内存 {{stat.memory}}，耗时 {{stat.time}}。</p>
 10 |         </div>
 11 |         <div class="uk-card uk-card-default uk-card-body uk-margin">
 12 |           <h3 class="uk-card-title">得分详情</h3>
 13 |           <div class="lg-rec-points">
 14 |             <status-point v-for="point in result" :status="point.stat" :point-id="point.id" :key="point.id" />
 15 |           </div>
 16 |           <table class="uk-table">
 17 |             <thead>
 18 |               <tr>
 19 |                 <th>#</th>
 20 |                 <th>状态</th>
 21 |                 <th>耗时</th>
 22 |                 <th>内存占用</th>
 23 |                 <th>评测信息</th>
 24 |               </tr>
 25 |             </thead>
 26 |             <tbody>
 27 |               <tr v-for="point in result" :key="point.id" :id="'point-' + point.id">
 28 |                 <td>{{point.id}}</td>
 29 |                 <td>
 30 |                   <status-label :status="point.stat" />
 31 |                 </td>
 32 |                 <td>{{point.time}}</td>
 33 |                 <td>{{point.memory}}</td>
 34 |                 <td>
 35 |                   <span :title="point.msg" uk-icon="icon: info" uk-tooltip></span>
 36 |                 </td>
 37 |               </tr>
 38 |             </tbody>
 39 |           </table>
 40 |         </div>
 41 |         <div class="uk-card uk-card-default uk-card-body uk-margin">
 42 |           <h3 class="uk-card-title">源代码</h3>
 43 |           <pre v-if="source">{{source}}</pre>
 44 |           <div v-else class="uk-placeholder">
 45 |             <p>只有以下用户可以查看代码：</p>
 46 |             <ul class="uk-list uk-list-bullet">
 47 |               <li>代码的提交人</li>
 48 |               <li>题目所属团队的管理员或者私有题目的上传者</li>
 49 |               <li>CodeForces 系列比赛中已锁定本题</li>
 50 |               <li>加入了代码公开计划且这道题达到了 60 分（同时该记录的提交者也加入了代码公开计划）</li>
 51 |             </ul>
 52 |           </div>
 53 |         </div>
 54 |       </div>
 55 |       <div class="uk-width-1-3">
 56 |         <div class="uk-card uk-card-default uk-card-body">
 57 |           <article class="uk-comment">
 58 |             <user-info :user="user"/>
 59 |           </article>
 60 |           <dl class="uk-description-list">
 61 |             <dt>评测记录 #</dt>
 62 |             <dd>{{id}}</dd>
 63 |             <dt>题目</dt>
 64 |             <dd>{{prob.title}}<span class="uk-label uk-margin-small-left">P{{prob.id}}</span></dd>
 65 |             <dt>选手程序语言</dt>
 66 |             <dd>{{code.lang}}</dd>
 67 |             <dt>选手程序长度</dt>
 68 |             <dd>{{code.length}}</dd>
 69 |             <dt>评测机</dt>
 70 |             <dd><span :class="'uk-label lg-bg-color-' + judger.color">{{judger.name}}</span></dd>
 71 |           </dl>
 72 |         </div>
 73 |       </div>
 74 |     </div>
 75 |   </div>
 76 | </template>
 77 | <script>
 78 | import StatusLabel from '~components/records/status-label'
 79 | import StatusPoint from '~components/records/status-point'
 80 | import UserInfo from '~components/common/user-info'
 81 | 
 82 | export default {
 83 |   data(context) {
 84 |     return {
 85 |       id: 2365388,
 86 |       prob: {
 87 |         id: 1255,
 88 |         title: '数楼梯'
 89 |       },
 90 |       stat: {
 91 |         word: 'Unaccepted',
 92 |         score: 70,
 93 |         time: '6ms',
 94 |         memory: '11886KB'
 95 |       },
 96 |       code: {
 97 |         lang: 'C++11',
 98 |         length: '0.9KB'
 99 |       },
100 |       contest: null,
101 |       user: {
102 |         avatar_url: '//luogu.oss-cn-hangzhou.aliyuncs.com/upload/usericon/14822.png',
103 |         username: 'xmwangpeiyi',
104 |         level_color: 'red',
105 |       },
106 |       judger: {
107 |         name: 'Aqours',
108 |         color: 'blue'
109 |       },
110 |       compile_msg: null,
111 |       source: null,
112 |       result: [
113 |         { id: 1, stat: 'AC', time: '0ms', memory: '11886kB', msg: '通过该测试点。得分10' },
114 |         { id: 2, stat: 'WA', time: '76ms', memory: '11886kB', msg: '错误的答案。得分0\nOn line 1 column 1, read 07364, expected 62763.' },
115 |         { id: 3, stat: 'AC', time: '0ms', memory: '11886kB', msg: '通过该测试点。得分10' },
116 |         { id: 4, stat: 'AC', time: '0ms', memory: '11886kB', msg: '通过该测试点。得分10' },
117 |         { id: 5, stat: 'AC', time: '0ms', memory: '11886kB', msg: '通过该测试点。得分10' },
118 |         { id: 6, stat: 'WA', time: '0ms', memory: '11886kB', msg: '错误的答案。得分0\nToo many or too few lines.' },
119 |         { id: 7, stat: 'WA', time: '0ms', memory: '11886kB', msg: '错误的答案。得分0\nToo many or too few lines.' },
120 |         { id: 8, stat: 'AC', time: '0ms', memory: '11886kB', msg: '通过该测试点。得分10' },
121 |         { id: 9, stat: 'AC', time: '1ms', memory: '11886kB', msg: '通过该测试点。得分10' },
122 |         { id: 10, stat: 'AC', time: '5ms', memory: '11886kB', msg: '通过该测试点。得分10' }
123 |       ]
124 |     }
125 |   },
126 |   components: { StatusLabel, StatusPoint, UserInfo }
127 | }
128 | </script>
129 | <style lang="less">
130 | .lg-largenum {
131 |   font-size: 2em;
132 | }
133 | 
134 | .lg-margin-reset {
135 |   margin: 0;
136 | }
137 | 
138 | .lg-padding-reset {
139 |   padding: 0;
140 | }
141 | </style>
142 | 


--------------------------------------------------------------------------------
/pages/teams/_id.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 class="lg-float-title">{{Name}}
 4 |       <span class="uk-label uk-margin-small-left">TeamID{{TeamID}}</span>
 5 |     </h1>
 6 |     <div uk-grid>
 7 |       <div class="uk-width-2-3">
 8 |         <div v-if="Introduction" class="uk-card uk-card-default uk-card-body uk-margin">
 9 |           <h3 class="uk-card-title">团队宣言</h3>
10 |           <vue-markdown :source="Introduction"></vue-markdown>
11 |         </div>
12 |         <div v-if="Notice" class="uk-card uk-card-default uk-card-body uk-margin">
13 |           <h3 class="uk-card-title">通知</h3>
14 |           <vue-markdown :source="Notice"></vue-markdown>
15 |         </div>
16 |         <div  class="uk-card uk-card-default uk-card-body uk-margin">
17 |           <h3 class="uk-card-title">成员</h3>
18 |           <div v-if="Members">
19 |             <section v-for="(group, name) in groupedMembers" :key="group">
20 |               <h4>{{name}}</h4>
21 |               <ul class="uk-list uk-list-bullet">
22 |                 <li v-for="m in group" :key="m.UID">{{m.RealName}}</li>
23 |               </ul>
24 |             </section>
25 |           </div>
26 |           <div v-else class="uk-placeholder uk-text-center">成为该团队的成员才能查看团队成员信息哦😏</div>
27 |         </div>
28 |       </div>
29 |       <div class="uk-width-1-3">
30 |         <div class="uk-card uk-card-default uk-card-body">
31 |           <div uk-grid v-if="Members">
32 |             <div class="uk-width-1-2">
33 |               <dl class="uk-description-list">
34 |                 <dt>成员数量</dt>
35 |                 <dd class="lg-largenum">{{Members.count}}</dd>
36 |               </dl>
37 |             </div>
38 |             <div class="uk-width-1-2">
39 |               <dl class="uk-description-list">
40 |                 <dt>成员数量</dt>
41 |                 <dd class="lg-largenum">{{Members.count}}</dd>
42 |               </dl>
43 |             </div>
44 |           </div>
45 |           <h3 class="uk-card-title">团队负责人</h3>
46 |           <article class="uk-comment">
47 |             <user-info :user="Master.User">
48 |             </user-info>
49 |           </article>
50 |           <dl v-if="Website" class="uk-description-list">
51 |             <dt>团队网站</dt>
52 |             <dd><a :href="Website">{{Website}}</a></dd>
53 |           </dl>
54 |           <dl class="uk-description-list">
55 |             <dt>成立时间</dt>
56 |             <dd>{{(new Date(CreateTime * 1000)).toLocaleString()}}</dd>
57 |           </dl>
58 |         </div>
59 |       </div>
60 |     </div>
61 |   </div>
62 | </template>
63 | <script>
64 | import VueMarkdown from 'vue-markdown'
65 | import { groupBy } from 'lodash'
66 | import { get } from '~plugins/lgapi'
67 | import UserInfo from '~components/common/user-info'
68 | 
69 | export default {
70 |   async asyncData({ params, error }) {
71 |     // We need to ensure that we have those fields to avoid "not defined in data" errors.
72 |     return Object.assign({ Introduction: '', Notice: '', Members: null }, await get(`/api/team/detail/${params.id}`))
73 |   },
74 |   components: { UserInfo, VueMarkdown },
75 |   computed: {
76 |     groupedMembers() {
77 |       return this.Members ? groupBy(this.Members.result, 'Type') : []
78 |     }
79 |   }
80 | }
81 | </script>
82 | 


--------------------------------------------------------------------------------
/pages/users/_id.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 class="lg-float-title">{{Username}}
 4 |       <span class="uk-label uk-margin-small-left">U{{UID}}</span>
 5 |     </h1>
 6 |     <div uk-grid>
 7 |       <div class="uk-width-2-3">
 8 |         <div class="uk-card uk-card-default uk-card-body uk-margin">
 9 |           <h3 class="uk-card-title">个人介绍</h3>
10 |           <div v-if="Introduction" v-html="Introduction"></div>
11 |           <div v-else class="uk-placeholder uk-text-center">这家伙并没有介绍自己🙃</div>
12 |         </div>
13 |       </div>
14 |       <div class="uk-width-1-3">
15 |         <div class="uk-card uk-card-default uk-card-body">
16 |           <article class="uk-comment">
17 |             <user-info :user="{ Username, UID, isAdmin, isValid }" />
18 |           </article>
19 |           <!--
20 |           <div uk-grid>
21 |             <div class="uk-width-1-2">
22 |               <dl class="uk-description-list">
23 |                 <dt>通过量</dt>
24 |                 <dd class="lg-largenum">{{PassedCount}}</dd>
25 |               </dl>
26 |             </div>
27 |             <div class="uk-width-1-2">
28 |               <dl class="uk-description-list">
29 |                 <dt>提交量</dt>
30 |                 <dd class="lg-largenum">{{SubmitCount}}</dd>
31 |               </dl>
32 |             </div>
33 |           </div> -->
34 |           <dl class="uk-description-list">
35 |             <dt>注册时间</dt>
36 |             <dd>{{RegisterTime | readableDate}}</dd>
37 |           </dl>
38 |         </div>
39 |       </div>
40 |     </div>
41 |   </div>
42 | </template>
43 | <script>
44 | import { get } from '~plugins/lgapi'
45 | import UserInfo from '~components/common/user-info'
46 | 
47 | export default {
48 |   async asyncData({ params }){
49 |     return await get(`/api/user/detail/${params.id}`)
50 |   },
51 |   components: { UserInfo }
52 | }
53 | </script>
54 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.
4 | 
5 | More informations about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/plugins
7 | 


--------------------------------------------------------------------------------
/plugins/global-filters.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import moment from '~plugins/moment'
3 | 
4 | Vue.filter('readableDate', timestamp => moment(timestamp * 1000).calendar())
5 | 


--------------------------------------------------------------------------------
/plugins/lgapi.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | // import store from '~store'
 3 | 
 4 | let UIKit = null
 5 | 
 6 | if (process.BROWSER_BUILD) {
 7 |   UIKit = require('uikit')
 8 | }
 9 | 
10 | const request = async (method, url, data) => {
11 |   axios.defaults.withCredentials = true
12 |   // axios.defaults.baseURL = store.state._apiBaseURL
13 |   // TODO: Maybe better error handling
14 |   try {
15 |     const { data: rdata } = await axios[method](url, data)
16 |     if (rdata.status !== 200) throw new Error(rdata.data)
17 |     return rdata.data
18 |   } catch (err) {
19 |     if (err) {
20 |       process.BROWSER_BUILD ? UIKit.modal.alert('发生错误：' + (err.message || '系统错误')) : console.log('Error' + err)
21 |       return { err }
22 |     }
23 |   }
24 | }
25 | 
26 | const post = async (url, data) => {
27 |   return request('post', url, data)
28 | }
29 | 
30 | const get = async (url, data) => {
31 |   return request('get', url, data)
32 | }
33 | 
34 | export { post, get, request }
35 | 


--------------------------------------------------------------------------------
/plugins/moment.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment/moment.js'
2 | import 'moment/locale/zh-cn'
3 | 
4 | moment.locale('zh-cn')
5 | 
6 | export default moment
7 | 


--------------------------------------------------------------------------------
/plugins/uikit.js:
--------------------------------------------------------------------------------
1 | import UIkit from 'uikit'
2 | import Icons from 'uikit/dist/js/uikit-icons'
3 | 
4 | // loads the Icon plugin
5 | UIkit.use(Icons)
6 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | // Deprecated.
 2 | 
 3 | const Nuxt = require('nuxt')
 4 | const bodyParser = require('body-parser')
 5 | const session = require('express-session')
 6 | const app = require('express')()
 7 | 
 8 | app.use(bodyParser.json())
 9 | 
10 | app.use(session({
11 |   secret: 'luoguof123456!!',
12 |   resave: false,
13 |   saveUninitialized: false,
14 |   cookie: { maxAge: 60000 }
15 | }))
16 | 
17 | app.post('/_api/login', function (req, res) {
18 |   if (req.body.username === 'laosb' && req.body.password === 'test123') {
19 |     req.session.authUser = { username: 'laosb' }
20 |     return res.json({ username: 'laosb' })
21 |   }
22 |   res.status(401).json({ error: 'Bad credentials' })
23 | })
24 | 
25 | app.post('/_api/logout', function (req, res) {
26 |   delete req.session.authUser
27 |   res.json({ ok: true })
28 | })
29 | 
30 | const isProd = process.env.NODE_ENV === 'production'
31 | const nuxt = new Nuxt({ dev: !isProd })
32 | const promise = (isProd ? Promise.resolve() : nuxt.build())
33 | promise.then(() => {
34 |   app.use(nuxt.render)
35 |   app.listen(process.env.PORT || 3000)
36 |   console.log(`Server is listening on http://localhost:${process.env.PORT || 3000}`)
37 | })
38 | .catch((error) => {
39 |   console.error(error)
40 |   process.exit(1)
41 | })
42 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | This directory contains your static files.
 4 | Each file inside this directory is mapped to /.
 5 | 
 6 | Example: /static/robots.txt is mapped as /robots.txt.
 7 | 
 8 | More informations about the usage of this directory in the documentation:
 9 | https://nuxtjs.org/guide/assets#static
10 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luogu-dev/luogu-frontend-2017/9b747191d8712b8a5e7ca38c0d83cbe612c87bd2/static/favicon.ico


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
1 | # STORE
2 | 
3 | This directory contains your Vuex Store files.
4 | Vuex Store option is implemented in the Nuxt.js framework.
5 | Creating a index.js file in this directory activate the option in the framework automatically.
6 | 
7 | More informations about the usage of this directory in the documentation:
8 | https://nuxtjs.org/guide/vuex-store
9 | 


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | const store = () => new Vuex.Store({
 7 | 
 8 |   state: {
 9 |     _currentUser: null,
10 |     _clientId: null,
11 |     _apiBaseURL: 'http://api.luogu.org'
12 |   },
13 | 
14 |   mutations: {
15 |     SET_USER: function (state, user) {
16 |       state._currentUser = user
17 |     },
18 |     SET_CLIENTID (state, clientId) { state._clientId = clientId },
19 |     SET_APIBASEURL (state, apiBaseURL) { state._apiBaseURL = apiBaseURL }
20 |   },
21 | 
22 |   actions: {
23 |     async nuxtServerInit ({ commit }, { req, res }) {
24 |       const Cookies = require('cookies')
25 |       const cookies = new Cookies(req, res)
26 |       let clientId = cookies.get('__client_id')
27 |       const axios = require('axios')
28 |       const { get } = require('~plugins/lgapi')
29 |       if (process.env.API_GATEWAY_BASEURL) commit('SET_APIBASEURL', process.env.API_GATEWAY_BASEURL)
30 |       axios.defaults.baseURL = process.env.API_GATEWAY_BASEURL || 'http://api.luogu.org'
31 |       if (!clientId) {
32 |         // Send a request to backend to get a clientId.
33 |         try {
34 |           const { data } = await axios.get('/api/authenticate/getClientId', { headers: { cookie: '' } })
35 |           clientId = data.data
36 |           commit('SET_CLIENTID', clientId)
37 |           console.log('got new clientId from server ', clientId)
38 |         } catch (e) {
39 |           if (e) console.log('Error: ', e)
40 |         }
41 |         // const data = { data: 'a745f02bb75fd14eefe03167e34975ecd245189a' }
42 |       } else {
43 |         console.log('using clientId from client', clientId)
44 |       }
45 |       commit('SET_CLIENTID', clientId)
46 |       axios.defaults.headers.common['cookie'] = `__client_id=${clientId || ''}`
47 |       const currentUser = await get('/api/user/current')
48 |       if (!currentUser.err) commit('SET_USER', currentUser)
49 |     }
50 |   }
51 | })
52 | 
53 | export default store
54 | 


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