Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7af337f
commit 2b1408c
Showing
12 changed files
with
222 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,30 @@ | ||
| <template> | ||
| <div id="app"> | ||
| <h1>{{ msg }}</h1> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import NavBar from './components/NavBar.vue' | ||
| import Main from './components/Main.vue' | ||
| import store from './vuex/store' | ||
| export default { | ||
| data () { | ||
| return { | ||
| // note: changing this line won't causes changes | ||
| // with hot-reload because the reloaded component | ||
| // preserves its current state and we are modifying | ||
| // its initial state. | ||
| msg: 'Hello Vue!' | ||
| } | ||
| name: 'App', | ||
| store, | ||
| components: { | ||
| NavBar, | ||
| Main | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div id="app"> | ||
| <header> | ||
| <nav-bar></nav-bar> | ||
| </header> | ||
| <main></main> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style> | ||
| body { | ||
| font-family: Helvetica, sans-serif; | ||
| } | ||
| @import '~primer-css/build/build.css'; | ||
| @import '~octicons/build/font/octicons.min.css'; | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <script> | ||
| import { setFullRepoName } from '../vuex/actions' | ||
| export default { | ||
| name: 'NavBar', | ||
| vuex: { | ||
| getters: { | ||
| fullRepoName: ({ main }) => main.fullRepoName | ||
| }, | ||
| actions: { | ||
| setFullRepoName | ||
| } | ||
| }, | ||
| computed: { | ||
| inputValue: { | ||
| get () { | ||
| return this.fullRepoName | ||
| }, | ||
| set (val) { | ||
| this.setFullRepoName(val) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="header"> | ||
| <div class="container"> | ||
| <div class="header-logo"> | ||
| <a href="#!"><span class="mega-octicon octicon-mark-github"></span></a> | ||
| </div> | ||
| <form> | ||
| <label for="fullRepoName">Full Repo Name:</label> | ||
| <input id="fullRepoName" class="form-control" type="text" | ||
| placeholder="xiaoluoboding/repository-tree" | ||
| v-model="inputValue"> | ||
| <span class="input-group-button"> | ||
| <button type="button" class="btn btn-primary">Generate</button> | ||
| </span> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style> | ||
| .header { | ||
| padding: 10px; | ||
| background-color: #f5f5f5; | ||
| border-bottom: 1px solid #e5e5e5; | ||
| } | ||
| .header-logo { | ||
| float: left; | ||
| margin-right: 10px; | ||
| } | ||
| #fullRepoName { | ||
| width: 480px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <script> | ||
| export default { | ||
| name: 'Main' | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="container page-content"> | ||
| <h1 class="public"> | ||
| <span class="octicon octicon-repo"></span> | ||
| <span class="author" itemprop="author"> | ||
| <a href="/xiaoluoboding" rel="author">xiaoluoboding</a> | ||
| </span> | ||
| <span class="path-divider">/</span> | ||
| <strong itemprop="name"> | ||
| <a href="/xiaoluoboding/astrolabe">astrolabe</a> | ||
| </strong> | ||
| </h1> | ||
| <div class="blankslate blankslate-spacious blankslate-large"> | ||
| <h3>Welcome to GitHub repository tree view generater</h3> | ||
| <p>Copy your github repository link and <kbd>click</kbd> the <code>Generate</code> button, then you will see the pretty display of tree view.</p> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style> | ||
| .page-content { | ||
| padding-top: 20px; | ||
| } | ||
| .page-content h1 { | ||
| position: relative; | ||
| max-width: 635px; | ||
| padding-left: 18px; | ||
| padding-bottom: 20px; | ||
| font-size: 16px; | ||
| line-height: 26px; | ||
| color: #666; | ||
| } | ||
| .boxed-header { | ||
| position: relative; | ||
| padding: 10px; | ||
| margin-bottom: -1px; | ||
| font-size: 13px; | ||
| line-height: 20px; | ||
| color: #68777d; | ||
| background-color: #f2f9fc; | ||
| border: 1px solid #c9e6f2; | ||
| border-radius: 3px; | ||
| border-bottom-right-radius: 0; | ||
| border-bottom-left-radius: 0; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,24 @@ | ||
| import Vue from 'vue' | ||
| import VueRouter from 'vue-router' | ||
| import Router from './router' | ||
| import App from './App.vue' | ||
|
|
||
| new Vue({ | ||
| el: 'body', | ||
| components: { App } | ||
| Vue.use(VueRouter) | ||
|
|
||
| // Set up a new router | ||
| const router = new VueRouter() | ||
|
|
||
| Router(router) | ||
|
|
||
| // For every new route scroll to the top of the page | ||
| router.beforeEach(function() { | ||
| window.scrollTo(0, 0) | ||
| }) | ||
|
|
||
| // If no route is matched redirect home | ||
| router.redirect({ | ||
| '*': '/' | ||
| }) | ||
|
|
||
| // Start up our app | ||
| router.start(App, '#root') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| // Route config | ||
| export default function(router) { | ||
| router.map({ | ||
| '/': { | ||
| component: require("./App.vue") | ||
| } | ||
| }) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| // index actions | ||
| export const setFullRepoName = makeAction('SET_FULLREPONAME') | ||
|
|
||
| function makeAction (type) { | ||
| return ({ dispatch }, ...args) => dispatch(type, ...args) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| // vuex/modules/main.js | ||
| import { SET_FULLREPONAME } from '../mutation-types' | ||
|
|
||
| // 该模块的初始状态 | ||
| const state = { | ||
| fullRepoName: '' | ||
| } | ||
|
|
||
| // 相关的 mutations | ||
| const mutations = { | ||
| [SET_FULLREPONAME] (state, fullRepoName) { | ||
| state.fullRepoName = fullRepoName | ||
| } | ||
| } | ||
|
|
||
| export default { | ||
| state, | ||
| mutations | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| // index mutation types | ||
| export const SET_FULLREPONAME = 'SET_FULLREPONAME' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| // vuex/store.js | ||
| import Vue from 'vue' | ||
| import Vuex from 'vuex' | ||
| import main from './modules/main' | ||
|
|
||
| Vue.use(Vuex) | ||
|
|
||
| export default new Vuex.Store({ | ||
| modules: { | ||
| main | ||
| } | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters