5 年之前 · 73217eb6cc
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,23 @@
 
				+.DS_Store
			
 
				+node_modules
			
 
				+/dist
			
 
				+
			
 
				+
			
 
				+# local env files
			
 
				+.env.local
			
 
				+.env.*.local
			
 
				+
			
 
				+# Log files
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+.vscode
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,24 @@
 
				+# antd-demo
			
 
				+
			
 
				+## Project setup
			
 
				+```
			
 
				+npm install
			
 
				+```
			
 
				+
			
 
				+### Compiles and hot-reloads for development
			
 
				+```
			
 
				+npm run serve
			
 
				+```
			
 
				+
			
 
				+### Compiles and minifies for production
			
 
				+```
			
 
				+npm run build
			
 
				+```
			
 
				+
			
 
				+### Lints and fixes files
			
 
				+```
			
 
				+npm run lint
			
 
				+```
			
 
				+
			
 
				+### Customize configuration
			
 
				+See [Configuration Reference](https://cli.vuejs.org/config/).
			
--- a/frontend/babel.config.js
+++ b/frontend/babel.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  presets: [
			
 
				+    '@vue/cli-plugin-babel/preset'
			
 
				+  ]
			
 
				+}
			
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,48 @@
 
				+{
			
 
				+  "name": "antd-demo",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve",
			
 
				+    "build": "vue-cli-service build",
			
 
				+    "lint": "vue-cli-service lint"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "ant-design-vue": "^1.7.2",
			
 
				+    "core-js": "^3.6.5",
			
 
				+    "vue": "^2.6.11",
			
 
				+    "vue-quill-editor": "^3.0.6",
			
 
				+    "vue-router": "^3.4.9",
			
 
				+    "vuex": "^3.6.0"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vue/cli-plugin-babel": "~4.5.0",
			
 
				+    "@vue/cli-plugin-eslint": "~4.5.0",
			
 
				+    "@vue/cli-service": "~4.5.0",
			
 
				+    "babel-eslint": "^10.1.0",
			
 
				+    "eslint": "^6.7.2",
			
 
				+    "eslint-plugin-vue": "^6.2.2",
			
 
				+    "less": "^3.0.4",
			
 
				+    "less-loader": "^5.0.0",
			
 
				+    "vue-template-compiler": "^2.6.11"
			
 
				+  },
			
 
				+  "eslintConfig": {
			
 
				+    "root": true,
			
 
				+    "env": {
			
 
				+      "node": true
			
 
				+    },
			
 
				+    "extends": [
			
 
				+      "plugin:vue/essential",
			
 
				+      "eslint:recommended"
			
 
				+    ],
			
 
				+    "parserOptions": {
			
 
				+      "parser": "babel-eslint"
			
 
				+    },
			
 
				+    "rules": {}
			
 
				+  },
			
 
				+  "browserslist": [
			
 
				+    "> 1%",
			
 
				+    "last 2 versions",
			
 
				+    "not dead"
			
 
				+  ]
			
 
				+}
			
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				+    <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <noscript>
			
 
				+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				+    </noscript>
			
 
				+    <div id="app"></div>
			
 
				+    <!-- built files will be auto injected -->
			
 
				+  </body>
			
 
				+</html>
			
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,47 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <Layout />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+// import HelloWorld from './components/HelloWorld.vue'
			
 
				+// import { Button } from 'ant-design-vue'
			
 
				+import Layout from './views/Layout'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'App',
			
 
				+  components: {
			
 
				+    Layout
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      current: ['mail'],
			
 
				+      openKeys: ['sub1']
			
 
				+    };
			
 
				+  },
			
 
				+  watch: {
			
 
				+    openKeys(val) {
			
 
				+      console.log('openKeys', val);
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    handleClick(e) {
			
 
				+      console.log('click', e);
			
 
				+    },
			
 
				+    titleClick(e) {
			
 
				+      console.log('titleClick', e);
			
 
				+    },
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+#app {
			
 
				+  font-family: Avenir, Helvetica, Arial, sans-serif;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+  text-align: center;
			
 
				+  color: #2c3e50;
			
 
				+}
			
 
				+</style>
			
--- a/frontend/src/assets/logo.png
+++ b/frontend/src/assets/logo.png
--- a/frontend/src/components/HelloWorld.vue
+++ b/frontend/src/components/HelloWorld.vue
@@ -0,0 +1,58 @@
 
				+<template>
			
 
				+  <div class="hello">
			
 
				+    <h1>{{ msg }}</h1>
			
 
				+    <p>
			
 
				+      For a guide and recipes on how to configure / customize this project,<br>
			
 
				+      check out the
			
 
				+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
			
 
				+    </p>
			
 
				+    <h3>Installed CLI Plugins</h3>
			
 
				+    <ul>
			
 
				+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
			
 
				+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
			
 
				+    </ul>
			
 
				+    <h3>Essential Links</h3>
			
 
				+    <ul>
			
 
				+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
			
 
				+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
			
 
				+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
			
 
				+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
			
 
				+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
			
 
				+    </ul>
			
 
				+    <h3>Ecosystem</h3>
			
 
				+    <ul>
			
 
				+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
			
 
				+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
			
 
				+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
			
 
				+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
			
 
				+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'HelloWorld',
			
 
				+  props: {
			
 
				+    msg: String
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->
			
 
				+<style scoped>
			
 
				+h3 {
			
 
				+  margin: 40px 0 0;
			
 
				+}
			
 
				+ul {
			
 
				+  list-style-type: none;
			
 
				+  padding: 0;
			
 
				+}
			
 
				+li {
			
 
				+  display: inline-block;
			
 
				+  margin: 0 10px;
			
 
				+}
			
 
				+a {
			
 
				+  color: #42b983;
			
 
				+}
			
 
				+</style>
			
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -0,0 +1,12 @@
 
				+import Vue from 'vue';
			
 
				+import antd from 'ant-design-vue';
			
 
				+import 'ant-design-vue/dist/antd.css';
			
 
				+import App from './App';
			
 
				+
			
 
				+Vue.use(antd);
			
 
				+
			
 
				+Vue.config.productionTip = false;
			
 
				+
			
 
				+new Vue({
			
 
				+  render: h => h(App),
			
 
				+}).$mount('#app');
			
--- a/frontend/src/views/Layout.vue
+++ b/frontend/src/views/Layout.vue
@@ -0,0 +1,73 @@
 
				+<template>
			
 
				+  <a-layout id="components-layout-demo-responsive">
			
 
				+    <a-layout-sider
			
 
				+      v-model="collapsed"
			
 
				+      theme="dark"
			
 
				+    >
			
 
				+      <div class="logo"></div>
			
 
				+      <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
			
 
				+        <a-menu-item class="menu-item" key="1">
			
 
				+          <a-icon type="home" />
			
 
				+        </a-menu-item>
			
 
				+        <a-menu-item class="menu-item" key="2">
			
 
				+          <a-icon type="appstore" />
			
 
				+        </a-menu-item>
			
 
				+        <a-menu-item class="menu-item" key="3">
			
 
				+          <a-icon type="setting" />
			
 
				+        </a-menu-item>
			
 
				+      </a-menu>
			
 
				+    </a-layout-sider>
			
 
				+    <a-layout>
			
 
				+      <a-layout-sider
			
 
				+        theme="light"
			
 
				+      >
			
 
				+        <a-menu theme="light" mode="inline" :default-selected-keys="['1']">
			
 
				+          <a-menu-item key="1">
			
 
				+            <span class="nav-text">nav 1</span>
			
 
				+          </a-menu-item>
			
 
				+          <a-menu-item key="2">
			
 
				+            <span class="nav-text">nav 2</span>
			
 
				+          </a-menu-item>
			
 
				+          <a-menu-item key="3">
			
 
				+            <span class="nav-text">nav 3</span>
			
 
				+          </a-menu-item>
			
 
				+          <a-menu-item key="4">
			
 
				+            <span class="nav-text">nav 4</span>
			
 
				+          </a-menu-item>
			
 
				+        </a-menu>
			
 
				+      </a-layout-sider>
			
 
				+      <a-layout-content :style="{ margin: '24px 16px 0' }">
			
 
				+        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
			
 
				+          content
			
 
				+        </div>
			
 
				+      </a-layout-content>
			
 
				+    </a-layout>
			
 
				+  </a-layout>
			
 
				+</template>
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'Layout',
			
 
				+  data() {
			
 
				+    return {
			
 
				+      collapsed: true,
			
 
				+    };
			
 
				+  },
			
 
				+  methods: {
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+#components-layout-demo-responsive .logo {
			
 
				+  height: 32px;
			
 
				+  background: rgba(139, 137, 137, 0.2);
			
 
				+  margin: 16px;
			
 
				+}
			
 
				+#components-layout-demo-responsive .menu-item {
			
 
				+  background-color: #001529;
			
 
				+}
			
 
				+
			
 
				+// /deep/ .ant-menu-item a {
			
 
				+//   color:rgba(255, 255, 255, 0.15);
			
 
				+// }
			
 
				+</style>