修复备案号显示的问题

去掉不需要的log打印
按钮居中
28 changed files with 1017 additions and 19 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,7 @@
+ENV = 'development'
+
+# 上下文
+VUE_APP_CONTEXT_PATH = '/'
+
+# 接口地址
+VUE_APP_BASE_API = 'http://localhost:7330'
--- a/.gitignore
+++ b/.gitignore
@ -2,3 +2,4 @@
 package-lock.json
 /public/
 /.idea/
+/dist/
--- a/package.json
+++ b/package.json
@ -13,6 +13,9 @@
    "element-ui": "^2.15.6",
    "js-cookie": "^2.2.0",
    "nprogress": "^0.2.0",
+    "sass-loader": "^10.0.5",
+    "node-sass": "^7.0.3",
+    "normalize.css": "7.0.0",
    "vue": "^2.6.11",
    "vue-router": "^3.5.2",
    "vuex": "^3.6.2"
@ -24,7 +27,8 @@
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "path-to-regexp": "^6.2.0"
  },
  "eslintConfig": {
    "root": true,
--- a/src/App.vue
+++ b/src/App.vue
@ -1,6 +1,6 @@
 <template>
  <div id="app">
-
+    <router-view/>
  </div>
 </template>

@ -13,12 +13,14 @@ export default {
 </script>

 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+/*#app {*/
+/*  font-family: Avenir, Helvetica, Arial, sans-serif;*/
+/*  -webkit-font-smoothing: antialiased;*/
+/*  -moz-osx-font-smoothing: grayscale;*/
+/*  text-align: center;*/
+/*  color: #2c3e50;*/
+/*  height: 100%;*/
+/*  width: 100%;*/
+/*  !*margin-top: 60px;*!*/
+/*}*/
 </style>
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@ -0,0 +1,18 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <router-view :key="key"/>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      return this.$route.path
+    }
+  }
+}
+</script>
--- a/src/layout/components/background/index.vue
+++ b/src/layout/components/background/index.vue
@ -0,0 +1,17 @@
+<template>
+  <div id="background"></div>
+</template>
+
+<script>
+// todo 背景图组件 没写完
+export default {
+  name: "Background"
+}
+</script>
+
+<style scoped lang="scss">
+#background {
+  height: 100%;
+  width: 100%;
+}
+</style>
--- a/src/layout/components/footer.vue
+++ b/src/layout/components/footer.vue
@ -0,0 +1,30 @@
+<template>
+  <div id="app-footer">
+    Soul2 | <a class="record-number" href="http://beian.miit.gov.cn/">粤ICP备2020098994号-1</a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AppFooter"
+}
+</script>
+
+<style scoped lang="scss">
+@import "~@/style/layout/footer.scss";
+
+#app-footer {
+  width: 100%;
+}
+
+.record-number {
+  color: #000;
+  border-bottom: none;
+  text-decoration: none;
+}
+
+.record-number:hover {
+  border-bottom: #{$recordNumberHover} 1px solid;
+  color: #{$recordNumberHover};
+}
+</style>
--- a/src/layout/components/navbar/index.vue
+++ b/src/layout/components/navbar/index.vue
@ -0,0 +1,140 @@
+<template>
+  <div id="navbar">
+    <el-menu
+      :default-active="activeMenu"
+      :background-color="variables.menuBg"
+      :text-color="variables.menuText"
+      :active-text-color="variables.menuActiveText"
+      :unique-opened="false"
+      :collapse-transition="false"
+      mode="horizontal"
+      :router="true"
+      :style="screenPadding"
+    >
+      <el-col :xs="menuItemSize.xs" :sm="menuItemSize.sm" :md="menuItemSize.md" :lg="menuItemSize.lg"
+              :xl="menuItemSize.xl"
+              v-for="(route, i) in routes" :key="i">
+        <el-menu-item v-if="route.children.length === 1" :index="to(route.children[0])">
+          {{ title(route.children[0]) }}
+        </el-menu-item>
+        <el-submenu v-else-if="route.children.length > 1" :index="route.path">
+          <template slot="title">{{ route.meta.title || title(route.children[0]) }}</template>
+          <el-menu-item v-for="(child) in route.children" :key="child.path" :index="to(child)">
+            {{ child.meta.title }}
+          </el-menu-item>
+        </el-submenu>
+      </el-col>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import variables from '@/style/layout/variables.scss'
+import {mapGetters} from "vuex";
+
+export default {
+  name: "Navbar",
+  components: {},
+  data() {
+    return {
+      screenWidth: document.body.clientWidth
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'routes',
+    ]),
+    menuItemSize() {
+      return {
+        xs: 6,
+        sm: 5,
+        md: 4,
+        lg: 3,
+        xl: 2
+      }
+    },
+    screenPadding() {
+      if (this.screenWidth >= 600) {
+        if (this.screenWidth >= 1000) {
+          return {
+            paddingLeft: '15%',
+            paddingRight: '15%'
+          }
+        } else {
+          return {
+            paddingLeft: '5%',
+            paddingRight: '5%'
+          }
+        }
+      } else {
+        return {}
+      }
+    },
+    activeMenu() {
+      const route = this.$route
+      const {meta, path} = route
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    variables() {
+      return variables
+    },
+  },
+  mounted() {
+    window.onresize = () => {
+      this.screenWidth = document.body.clientWidth
+      this.$store.commit('screen/UPDATE_SCREEN_WIDTH', document.body.clientWidth)
+    }
+    // console.log('routes -> ', this.routes)
+  },
+  watch: {
+    screenWidth(newValue) {
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      if (!this.timer) {
+        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
+        this.screenWidth = newValue;
+        this.$store.commit('screen/UPDATE_SCREEN_WIDTH', newValue)
+        this.timer = true;
+        setTimeout(() => {
+          //console.log(this.screenWidth);
+          this.timer = false;
+        }, 1250);
+      }
+    }
+  },
+  methods: {
+    title(route) {
+      return route.meta.title
+    },
+    to(route) {
+      return route.path
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+@import "~@/style/layout/variables.scss";
+
+#navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 9;
+}
+
+.is-active {
+  border-bottom: #{$subMenuActiveText} 3px solid;
+}
+
+.el-menu-item {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+</style>
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -0,0 +1,65 @@
+<template>
+  <div id="layout">
+    <!--    <div id="bg" :style="randomUrl" />-->
+    <el-container style="height: 100%;">
+      <el-header>
+        <navbar/>
+      </el-header>
+      <el-main>
+        <el-scrollbar>
+          <app-main/>
+        </el-scrollbar>
+      </el-main>
+      <el-footer style="height: 40px;">
+        <app-footer/>
+      </el-footer>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import AppMain from "@/layout/components/AppMain";
+import Navbar from "@/layout/components/navbar";
+import AppFooter from "@/layout/components/footer";
+import Background from "@/layout/components/background";
+
+export default {
+  name: "Layout",
+  components: {Background, Navbar, AppMain, AppFooter},
+  computed: {
+    randomUrl() {
+      let n = Math.floor(Math.random() * 5 + 1)
+      return {
+        background: "url(http://soul2.cn/images/spi_a" + n + ".jpg) center no-repeat fixed"
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+#layout {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+#bg {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  background-size: 100% 100%;
+  -moz-background-size: 100% 100%;
+  -webkit-background-size: 100% 100%;
+}
+
+el-container {
+  padding-top: 0;
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -1,12 +1,17 @@
 import Vue from 'vue'
 import App from './App.vue'
 import store from "@/store";
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import router from './router'
+import '@/style/index.scss' // 全局样式
+import '@/router/beforce'

-Vue.config.productionTip = false
-
+Vue.use(ElementUI)

 new Vue({
  el: '#app',
  render: h => h(App),
+  router,
  store
-}).$mount('#app')
+})
--- a/src/router/beforce.js
+++ b/src/router/beforce.js
@ -0,0 +1,19 @@
+import router from './index'
+import NProgress from 'nprogress' // progress bar
+import 'nprogress/nprogress.css' // progress bar style
+import getPageTitle from '@/utils/get-page-title'
+
+
+router.beforeEach(async (to, from, next) => {
+  // start progress bar
+  NProgress.start()
+
+  // set page title
+  document.title = getPageTitle(to.meta.title)
+  next()
+})
+
+router.afterEach(() => {
+  // finish progress bar
+  NProgress.done()
+})
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,73 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import Layout from "@/layout";
+
+Vue.use(VueRouter)
+
+export const routes = [
+  {
+    path: '',
+    component: Layout,
+    children: [{
+      path: '/',
+      name: 'Home',
+      component: () => import('@/views/home/index'),
+      meta: {title: '首页', icon: 'dashboard'}
+    }]
+  },
+  {
+    path: '',
+    component: Layout,
+    children: [{
+      path: '/soui',
+      name: 'SoUI',
+      component: () => import('@/views/soui/index'),
+      meta: {title: 'SoUI', icon: 'dashboard'}
+    }]
+  },
+  {
+    path: '',
+    component: Layout,
+    children: [{
+      path: '/demo',
+      name: 'SoDemo',
+      component: () => import('@/views/sodemo/index'),
+      meta: {title: '灵魂演示', icon: 'dashboard'}
+    }]
+  },
+  // {
+  //   path: '',
+  //   component: Layout,
+  //   meta: {title: '多菜单测试', icon: 'dashboard'},
+  //   children: [{
+  //     path: '/a',
+  //     name: 'a',
+  //     component: () => import('@/views/sodemo/index'),
+  //     meta: {title: '菜单1', icon: 'dashboard'}
+  //   },{
+  //     path: '/b',
+  //     name: 'b',
+  //     component: () => import('@/views/sodemo/index'),
+  //     meta: {title: '菜单2', icon: 'dashboard'}
+  //   }]
+  // },
+]
+
+const createRouter = () => new VueRouter({
+  base: process.env.VUE_APP_CONTEXT_PATH || '/',
+  mode: 'history', // require service support
+  scrollBehavior: () => ({y: 0}),
+  routes: routes
+})
+
+const router = createRouter()
+
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+export function resetRouter() {
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher // reset router
+}
+
+export default router
+
+
--- a/src/settings.js
+++ b/src/settings.js
@ -0,0 +1,8 @@
+module.exports = {
+
+  title: 'soul2',
+
+  // 启动时自动打开url
+  autoOpenBrowser: false
+
+}
--- a/src/store/getters.js
+++ b/src/store/getters.js
@ -1,5 +1,18 @@
 const getters = {
-    routes: state => state.routes
+  routes: state => state.menu.routes,
+  screenWidth: state => state.screen.screenWidth,
+  screenPadding: state => {
+    let width = state.screen.screenWidth
+    if (width >= 600) {
+      if (width >= 1000) {
+        return {paddingLeft: '15%', paddingRight: '15%'}
+      } else {
+        return {paddingLeft: '5%', paddingRight: '5%'}
+      }
+    } else {
+      return {}
+    }
+  }
 }

 export default getters
--- a/src/store/index.js
+++ b/src/store/index.js
@ -1,11 +1,16 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import getters from "@/store/getters";
+import menu from "@/store/modules/menu";
+import screen from "@/store/modules/screen";

 Vue.use(Vuex)

 const store = new Vuex.Store({
-    modules: {},
+  modules: {
+    menu,
+    screen
+  },
  getters
 })

--- a/src/store/modules/menu.js
+++ b/src/store/modules/menu.js
@ -0,0 +1,16 @@
+import {routes} from '@/router'
+
+const state = {
+  routes
+}
+
+const mutations = {}
+
+const actions = {}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
--- a/src/store/modules/screen.js
+++ b/src/store/modules/screen.js
@ -0,0 +1,18 @@
+const state = {
+  screenWidth: document.body.clientWidth
+}
+
+const mutations = {
+  UPDATE_SCREEN_WIDTH(state, value) {
+    state.screenWidth = value
+  }
+}
+
+const actions = {}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
--- a/src/style/index.scss
+++ b/src/style/index.scss
@ -0,0 +1,81 @@
+@import "./transition.scss";
+
+* {
+  margin: 0;
+  padding: 0;
+  z-index: 5;
+}
+
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+  Microsoft YaHei, Arial, sans-serif;
+  box-sizing: border-box;
+  margin: 0;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+// main-container global css
+.app-container {
+  position: relative;
+  padding: 20px;
+}
+
+// table-operate-container global css
+.table-operate-container {
+  margin-top: 20px;
+}
+
+// table-container global css
+.table-container {
+  margin-top: 20px;
+}
+
+// webkit内核滚动条优化（Chrome 和 Safari 浏览器）
+*:hover::-webkit-scrollbar {
+  display: block;
+}
+
+::-webkit-scrollbar {
+  display: none;
+  /*滚动条整体样式*/
+  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 8px;
+  background-color: rgba(144, 147, 153, 0.5);
+  -webkit-transition: 0.3s background-color;
+  transition: 0.3s background-color;
+}
+
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  background-color: rgba(144,147,153,.3); */
+}
+
+/* 火狐美化滚动条 */
+* {
+
+  scrollbar-color: #c8d2e0 #f3f4f9;
+  /* 滑块颜色  滚动条背景颜色 */
+  scrollbar-width: thin;
+  /* 滚动条宽度有三种：thin、auto、none */
+}
--- a/src/style/layout/footer.scss
+++ b/src/style/layout/footer.scss
@ -0,0 +1,3 @@
+//color
+//备案号
+$recordNumberHover: #b79500
--- a/src/style/layout/index.scss
+++ b/src/style/layout/index.scss
@ -0,0 +1,21 @@
+
+a {
+  color: #b79500;
+}
+
+a:hover {
+  animation-name: aHover;
+  animation-duration: 0.8s;
+  animation-timing-function: ease-in;
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+}
+
+@keyframes aHover {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.5;
+  }
+}
--- a/src/style/layout/variables.scss
+++ b/src/style/layout/variables.scss
@ -0,0 +1,23 @@
+// navbar
+$menuText: #fff;
+$menuActiveText: #ffd04b;
+$subMenuActiveText: #ffd04b;
+
+$menuBg: #545c64;
+$menuHover: #ffd04b;
+
+$subMenuBg: #545c64;
+$subMenuHover: #ffd04b;
+
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHover: $menuHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+}
--- a/src/style/transition.scss
+++ b/src/style/transition.scss
@ -0,0 +1,48 @@
+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}
--- a/src/utils/get-page-title.js
+++ b/src/utils/get-page-title.js
@ -0,0 +1,10 @@
+import defaultSettings from '@/settings'
+
+const title = defaultSettings.title || 'Vue Admin Template'
+
+export default function getPageTitle(pageTitle) {
+  if (pageTitle) {
+    return `${pageTitle} - ${title}`
+  }
+  return `${title}`
+}
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -0,0 +1,129 @@
+<template>
+  <div id="home" :style="screenPadding">
+    <el-card shadow="always">
+      <el-collapse :accordion="false" v-model="expand" style="text-align: left">
+        <el-collapse-item name="openShow">
+          <template slot="title">
+            关于灵魂演示
+          </template>
+          <div>
+            <p>
+              这是一套你不能错过的魔兽地图编辑器入门教程。
+            </p>
+            <p>
+              灵魂演示是灵魂所制作的一套强大的
+              <el-link
+                href='https://xywiki.com/%E9%AD%94%E5%85%BD%E5%9C%B0%E5%9B%BE%E7%BC%96%E8%BE%91%E5%99%A8'
+                target='_blank'
+                type="primary"
+                style="font-size: 12px"
+              >
+                魔兽地图编辑器
+              </el-link>
+              系统演示地图，涵盖了许多新手入门所关注和需要的内容。
+            </p>
+            <p>
+              灵魂演示地图基于
+              <el-link
+                href='https://xywiki.com/YDWE'
+                target='_blank'
+                type="primary"
+                style="font-size: 12px"
+              >
+                YDWE
+              </el-link>
+              1.27.5 制作，请使用 YDWE 1.27.5 或以上的版本打开灵魂演示地图，否则可能会导致
+              <el-link
+                href='https://xywiki.com/WE%E5%85%BC%E5%AE%B9%E6%80%A7%E9%94%99%E8%AF%AF'
+                target='_blank'
+                type="primary"
+                style="font-size: 12px"
+              >
+                WE兼容性错误
+              </el-link>
+              。
+            </p>
+            <p>
+              你可以选择
+              <el-link
+                href='http://next.soul2.cn/download/soul-demo/%E5%90%88%E9%9B%86.zip'
+                target='_blank'
+                type="primary"
+                style="font-size: 12px"
+                icon="el-icon-download"
+              >
+                点击这里
+              </el-link>
+              一次性下载所有演示地图，也可以通过点击下方各个按钮以你希望的方式下载你所需要的特定演示地图。
+            </p>
+            <div id="dl-btn">
+              <el-button size="mini" class="el-icon-position"
+                         @click="goto('https://wow8.org/soul-demo/')"
+              >
+                Wow8
+              </el-button>
+              <el-button size="mini" class="el-icon-position"
+                         @click="goto('https://tieba.baidu.com/p/4575301644')"
+              >
+                贴吧
+              </el-button>
+              <el-button size="mini" class="el-icon-cloudy"
+                         @click="goto('https://share.weiyun.com/5YXLT4L')"
+              >
+                微云
+              </el-button>
+              <el-button size="mini" class="el-icon-cloudy"
+                         @click="goto('https://pan.baidu.com/s/1bGeoOm#list/path=%2F')"
+              >
+                百度云
+              </el-button>
+            </div>
+          </div>
+        </el-collapse-item>
+        <el-collapse-item name="soui">
+          <template slot="title">
+            关于SoUI
+          </template>
+          <div>
+            <p>SoUI是基于魔兽争霸III地图编辑器的一个扩展性Mod, 仅使用编辑器原有的函数为使用者增加一些更方便的功能。</p>
+            <p>当前最新版本的SoUI版本是
+              <el-link href="http://bbs.mvprpg.com/forum.php?mod=viewthread&tid=465517"
+                       type="primary" :underline="false">
+                <el-tag size="mini">0.4.6</el-tag>
+              </el-link>
+            </p>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </el-card>
+  </div>
+</template>
+
+<script>
+
+import {mapGetters} from "vuex";
+
+export default {
+  name: "Home",
+  components: {},
+  computed: {
+    ...mapGetters([
+      "screenPadding"
+    ]),
+    expand() {
+      return ['openShow', 'soui']
+    },
+  },
+  methods: {
+    goto(where) {
+      location.href = where
+    }
+  }
+}
+</script>
+
+<style scoped>
+#dl-btn .el-button {
+  margin-top: 7px;
+}
+</style>
--- a/src/views/sodemo/index.vue
+++ b/src/views/sodemo/index.vue
@ -0,0 +1,116 @@
+<template>
+  <div id="so-demo" :style="screenPadding">
+    <el-card shadow="always">
+      <div slot="header">
+        关于灵魂演示
+      </div>
+      <div>
+        <p>
+          这是一套你不能错过的魔兽地图编辑器入门教程。
+        </p>
+        <p>
+          灵魂演示是灵魂所制作的一套强大的
+          <el-link
+            href='https://xywiki.com/%E9%AD%94%E5%85%BD%E5%9C%B0%E5%9B%BE%E7%BC%96%E8%BE%91%E5%99%A8'
+            target='_blank'
+            type="primary"
+          >
+            魔兽地图编辑器
+          </el-link>
+          系统演示地图，涵盖了许多新手入门所关注和需要的内容。
+        </p>
+        <p>
+          灵魂演示地图基于
+          <el-link
+            href='https://xywiki.com/YDWE'
+            target='_blank'
+            type="primary"
+          >
+            YDWE
+          </el-link>
+          1.27.5 制作，请使用 YDWE 1.27.5 或以上的版本打开灵魂演示地图，否则可能会导致
+          <el-link
+            href='https://xywiki.com/WE%E5%85%BC%E5%AE%B9%E6%80%A7%E9%94%99%E8%AF%AF'
+            target='_blank'
+            type="primary"
+          >
+            WE兼容性错误
+          </el-link>
+          。
+        </p>
+        <p>
+          你可以选择
+          <el-link
+            href='http://next.soul2.cn/download/soul-demo/%E5%90%88%E9%9B%86.zip'
+            target='_blank'
+            type="primary"
+            icon="el-icon-download"
+          >
+            点击这里
+          </el-link>
+          一次性下载所有演示地图，也可以通过点击下方各个按钮以你希望的方式下载你所需要的特定演示地图。
+        </p>
+        <div id="goto-btn">
+          <el-button size="mini" class="el-icon-position"
+                     @click="goto('https://wow8.org/soul-demo/')"
+          >
+            Wow8
+          </el-button>
+          <el-button size="mini" class="el-icon-position"
+                     @click="goto('https://tieba.baidu.com/p/4575301644')"
+          >
+            贴吧
+          </el-button>
+          <el-button size="mini" class="el-icon-cloudy"
+                     @click="goto('https://share.weiyun.com/5YXLT4L')"
+          >
+            微云
+          </el-button>
+          <el-button size="mini" class="el-icon-cloudy"
+                     @click="goto('https://pan.baidu.com/s/1bGeoOm#list/path=%2F')"
+          >
+            百度云
+          </el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <el-card shadow="always" style="margin-top: 20px;">
+      <div slot="header">第三卷的教程是视频教程</div>
+      <div>
+        放到了
+        <el-link href="https://space.bilibili.com/8225928" type="primary">我的B站账号</el-link>
+        上
+      </div>
+    </el-card>
+
+    <el-card shadow="always" style="margin-top: 20px;">
+      <div slot="header">另外</div>
+      <div>每期的列表将会在不久后展示。</div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {mapGetters} from "vuex";
+
+export default {
+  name: "SoDemo",
+  computed: {
+    ...mapGetters([
+      "screenPadding"
+    ]),
+  },
+  methods: {
+    goto(where) {
+      location.href = where
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+#goto-btn .el-button {
+  margin-top: 7px;
+}
+</style>
--- a/src/views/soui/index.vue
+++ b/src/views/soui/index.vue
@ -0,0 +1,66 @@
+<template>
+  <div id="soui" style="text-align: left;" :style="screenPadding">
+    <el-card shadow="always">
+      <div class="title" slot="header" style="text-align: center">
+        关于SoUI
+      </div>
+      <p>这是一个基于YDWEv1.31.8(+网易DzAPI 1.2.9a)打包的魔兽争霸3地图编辑器扩展包.</p>
+      <p>该扩展包添加了一些减少重复劳动的编辑器额外动作UI.</p>
+      <p>扩展包部分内容仍处于测试阶段,其功能可能存有未知BUG.</p>
+      <p>已提供部分额外功能的演示地图,安装后可以在安装目录\example(演示地图)\SoUI文件夹内找到.</p>
+      <p>未经本人许可擅自将SoUI在网上散播者将承担盗版乱传的相关法律责任,并且传播者将承担所有使用者使用本UI带来的所有负面后果,Soul本人不承担任何责任.</p>
+      <p>SoUI仅对编辑器功能进行扩展,不涉及编辑器原有功能的修改.</p>
+    </el-card>
+
+    <el-card shadow="always" style="margin-top: 20px;">
+      <div slot="header" style="text-align: center">关于版本</div>
+      <div>
+        <p>最新的版本是
+          <el-tag size="mini">0.4.6</el-tag>
+          。
+        </p>
+        <p>可能会有
+          <el-tag size="mini">0.5.0</el-tag>
+          (也许)
+        </p>
+      </div>
+    </el-card>
+
+    <el-card shadow="always" style="margin-top: 20px;">
+      <div slot="header" style="text-align: center">下载</div>
+      <div>
+        <el-button size="mini" class="el-icon-cloudy"
+                   @click="goto('https://share.weiyun.com/dlM6m0EE')"
+        >
+          微云
+        </el-button>
+        <el-button size="mini" class="el-icon-cloudy"
+                   @click="goto('https://pan.baidu.com/s/1bL96VxXYSCW8pSsVZ5rzrw#awsl')"
+        >
+          百度云
+        </el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {mapGetters} from "vuex";
+
+export default {
+  name: "SoUi",
+  computed: {
+    ...mapGetters([
+      "screenPadding"
+    ]),
+  },
+  methods: {
+    goto(where) {
+      location.href = where
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,46 @@
+'use strict'
+const path = require('path')
+const defaultSettings = require('./src/settings.js')
+
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
+
+const name = defaultSettings.title || '未命名标题'
+const autoOpenBrowser = defaultSettings.autoOpenBrowser || false
+const port = process.env.port || process.env.npm_config_port || 6810 // dev port
+
+module.exports = {
+  /**
+   * You will need to set publicPath if you plan to deploy your site under a sub path,
+   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
+   * then publicPath should be set to "/bar/".
+   * In most cases please use '/' !!!
+   * Detail: https://cli.vuejs.org/config/#publicpath
+   */
+  publicPath: process.env.VUE_APP_CONTEXT_PATH || '/',
+  outputDir: 'dist',
+  assetsDir: 'static',
+  lintOnSave: process.env.NODE_ENV === 'development',
+  productionSourceMap: false,
+  devServer: {
+    // disableHostCheck: true,
+    port: port,
+    open: autoOpenBrowser,
+    overlay: {
+      warnings: false,
+      errors: true
+    }
+    // before: require('./mock/mock-server.js')
+  },
+  configureWebpack: {
+    // provide the app's title in webpack's name field, so that
+    // it can be accessed in index.html to inject the correct title.
+    name: name,
+    resolve: {
+      alias: {
+        '@': resolve('src')
+      }
+    }
+  },
+}
Author	SHA1	Message	Date
soul2	a2f240b810	修复备案号显示的问题	2 years ago
soul2	7ded80703a	去掉不需要的log打印	3 years ago
soul2	30ea41c2f4	按钮居中	3 years ago
soul2	f000c09256	Merge pull request 'app-main增加移动端适配padding' (#2 ) from soul2/views into develop Reviewed-on: soul2-demo-module/cn-soul2-web#2	3 years ago
soul2	80cceddce2	app-main增加移动端适配padding	3 years ago
soul2	be7b8641a5	Merge pull request '三个模块的第一个版本、对样式的小调整' (#1 ) from soul2/views into develop Reviewed-on: soul2-demo-module/cn-soul2-web#1	3 years ago
soul2	0a2bb32537	三个模块的第一个版本、对样式的小调整	3 years ago
soul2	66d15b5283	加入vue-router、element-ui、完成导航栏	3 years ago
soul2	1db45a5dee	Merge branch 'develop' of http://gitea.soul2.cn/soul2-demo-module/cn-soul2-web into develop # Conflicts: # .gitignore	3 years ago
soul2	713914cb2a	1	3 years ago
soul2	078d7a00e4	Initial commit	3 years ago