Compare commits
No commits in common. "4c8b0ca7e2dd09df5eaaa8ab131f749387dfd503" and "153ae31ea8ce44d8f231874ad37b5f22c44129c7" have entirely different histories.
4c8b0ca7e2
...
153ae31ea8
|
|
@ -0,0 +1,9 @@
|
||||||
|
.PHONY: dist build
|
||||||
|
install:
|
||||||
|
@npm install
|
||||||
|
|
||||||
|
dev: install
|
||||||
|
@npm run dev
|
||||||
|
|
||||||
|
build:
|
||||||
|
@npm run build
|
||||||
18
index.html
18
index.html
|
|
@ -1,18 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" href="/favicon.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Element Plus Vite Starter</title>
|
|
||||||
<!-- element css cdn, if you use custom theme, remove it. -->
|
|
||||||
<!-- <link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"
|
|
||||||
/> -->
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/main.ts"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
File diff suppressed because it is too large
Load Diff
54
package.json
54
package.json
|
|
@ -1,29 +1,41 @@
|
||||||
{
|
{
|
||||||
"name": "element-plus-vite-starter",
|
"name": "element-starter",
|
||||||
|
"description": "A Vue.js project",
|
||||||
|
"author": "yi.shyang@ele.me",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.1.0",
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "webpack-dev-server --inline --hot --env.dev",
|
||||||
"build": "vite build",
|
"build": "rimraf dist && webpack -p --progress --hide-modules"
|
||||||
"generate": "vite-ssg build",
|
|
||||||
"preview": "vite preview",
|
|
||||||
"typecheck": "vue-tsc --noEmit"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"element-plus": "^2.6.2",
|
"@toast-ui/editor": "^3.2.2",
|
||||||
"vue": "^3.4.21"
|
"@toast-ui/vue-editor": "^3.2.3",
|
||||||
|
"axios": "^0.24.0",
|
||||||
|
"element-ui": "^2.3.4",
|
||||||
|
"js-cookie": "^3.0.1",
|
||||||
|
"vue": "^2.5.16",
|
||||||
|
"vue-router": "^3.5.3",
|
||||||
|
"vue-style-loader": "^4.1.3",
|
||||||
|
"vuex": "^3.6.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify-json/ep": "^1.1.15",
|
"autoprefixer": "^6.6.0",
|
||||||
"@types/node": "^20.11.30",
|
"babel-core": "^6.24.1",
|
||||||
"@vitejs/plugin-vue": "^5.0.4",
|
"babel-loader": "^6.4.0",
|
||||||
"sass": "^1.72.0",
|
"babel-preset-vue-app": "^1.2.0",
|
||||||
"typescript": "^5.4.3",
|
"css-loader": "^0.27.0",
|
||||||
"unocss": "^0.58.6",
|
"file-loader": "^0.10.1",
|
||||||
"unplugin-vue-components": "^0.26.0",
|
"html-webpack-plugin": "^2.24.1",
|
||||||
"vite": "^5.2.5",
|
"postcss-loader": "^1.3.3",
|
||||||
"vite-ssg": "^0.23.6",
|
"rimraf": "^2.5.4",
|
||||||
"vue-tsc": "^2.0.7"
|
"style-loader": "^0.13.2",
|
||||||
},
|
"url-loader": "^0.5.8",
|
||||||
"license": "MIT"
|
"vue-loader": "^13.3.0",
|
||||||
|
"vue-template-compiler": "^2.5.16",
|
||||||
|
"webpack": "^2.4.1",
|
||||||
|
"webpack-dev-server": "^2.4.2"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
require('autoprefixer')()
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
vite-starter.element-plus.org
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><defs><style>.cls-1{fill:#409eff;fill-rule:evenodd;}</style></defs><title>element plus-logo-small 副本</title><path id="element_plus-logo-small" data-name="element plus-logo-small" class="cls-1" d="M37.41,32.37c0,1.57-.83,1.93-.83,1.93L21.51,43A1.69,1.69,0,0,1,20,43S5.2,34.4,4.66,34a1.29,1.29,0,0,1-.55-1V15.24c0-.78,1-1.33,1-1.33L19.86,5.36a2,2,0,0,1,1.79,0l14.46,8.41a2.06,2.06,0,0,1,1.25,2.06V32.37Zm-5.9-17L21.35,9.5a1.59,1.59,0,0,0-1.41,0L8.33,16.15s-.77.46-.76,1.08,0,13.92,0,13.92A1,1,0,0,0,8,31.9c.43.3,12,7,12,7a1.31,1.31,0,0,0,1.19,0C21.91,38.5,33,32.11,33,32.11s.65-.28.65-1.51V27.13l-13,7.9V32a3.05,3.05,0,0,1,1-2.07L33.2,23a2.44,2.44,0,0,0,.55-1.46V18.43L20.64,26.35v-3.2a2.22,2.22,0,0,1,.83-1.79ZM41.07,4.22a.39.39,0,0,0-.37-.42H38V1.06c0-.16-.26-.22-.53-.22L36,1.08c-.18,0-.31.12-.31.23V3.8H33a.4.4,0,0,0-.36.37v2h3V9c0,.16.26.27.54.23l1.51-.25c.18,0,.29-.13.29-.23V6.14h3Z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 995 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><defs><style>.cls-1{fill:#409eff;fill-rule:evenodd;}</style></defs><title>element plus-logo-small 副本</title><path id="element_plus-logo-small" data-name="element plus-logo-small" class="cls-1" d="M37.41,32.37c0,1.57-.83,1.93-.83,1.93L21.51,43A1.69,1.69,0,0,1,20,43S5.2,34.4,4.66,34a1.29,1.29,0,0,1-.55-1V15.24c0-.78,1-1.33,1-1.33L19.86,5.36a2,2,0,0,1,1.79,0l14.46,8.41a2.06,2.06,0,0,1,1.25,2.06V32.37Zm-5.9-17L21.35,9.5a1.59,1.59,0,0,0-1.41,0L8.33,16.15s-.77.46-.76,1.08,0,13.92,0,13.92A1,1,0,0,0,8,31.9c.43.3,12,7,12,7a1.31,1.31,0,0,0,1.19,0C21.91,38.5,33,32.11,33,32.11s.65-.28.65-1.51V27.13l-13,7.9V32a3.05,3.05,0,0,1,1-2.07L33.2,23a2.44,2.44,0,0,0,.55-1.46V18.43L20.64,26.35v-3.2a2.22,2.22,0,0,1,.83-1.79ZM41.07,4.22a.39.39,0,0,0-.37-.42H38V1.06c0-.16-.26-.22-.53-.22L36,1.08c-.18,0-.31.12-.31.23V3.8H33a.4.4,0,0,0-.36.37v2h3V9c0,.16.26.27.54.23l1.51-.25c.18,0,.29-.13.29-.23V6.14h3Z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 995 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
29
src/App.vue
29
src/App.vue
|
|
@ -1,23 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<el-config-provider namespace="ep">
|
<div id="app">
|
||||||
<BaseHeader />
|
<router-view></router-view>
|
||||||
<div class="flex main-container">
|
</div>
|
||||||
<BaseSide />
|
|
||||||
<div w="full" py="4">
|
|
||||||
<Logos my="4" />
|
|
||||||
<HelloWorld msg="Hello Vue 3 + Element Plus + Vite" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-config-provider>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#app {
|
#app {
|
||||||
|
font-family: Helvetica, sans-serif;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--ep-text-color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-container {
|
|
||||||
height: calc(100vh - var(--ep-menu-item-height) - 3px);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 497 B |
|
|
@ -1,26 +0,0 @@
|
||||||
/* eslint-disable */
|
|
||||||
/* prettier-ignore */
|
|
||||||
// @ts-nocheck
|
|
||||||
// Generated by unplugin-vue-components
|
|
||||||
// Read more: https://github.com/vuejs/core/pull/3399
|
|
||||||
export {}
|
|
||||||
|
|
||||||
declare module 'vue' {
|
|
||||||
export interface GlobalComponents {
|
|
||||||
BaseHeader: typeof import('./components/layouts/BaseHeader.vue')['default']
|
|
||||||
BaseSide: typeof import('./components/layouts/BaseSide.vue')['default']
|
|
||||||
ElButton: typeof import('element-plus/es')['ElButton']
|
|
||||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
|
||||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
|
||||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
|
||||||
ElInput: typeof import('element-plus/es')['ElInput']
|
|
||||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
|
||||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
|
||||||
ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
|
|
||||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
|
||||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
|
||||||
ElTag: typeof import('element-plus/es')['ElTag']
|
|
||||||
HelloWorld: typeof import('./components/HelloWorld.vue')['default']
|
|
||||||
Logos: typeof import('./components/Logos.vue')['default']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,103 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
|
|
||||||
defineProps<{ msg: string }>();
|
|
||||||
|
|
||||||
const count = ref(0);
|
|
||||||
const input = ref("element-plus");
|
|
||||||
|
|
||||||
const curDate = ref("");
|
|
||||||
|
|
||||||
const toast = () => {
|
|
||||||
ElMessage.success("Hello");
|
|
||||||
};
|
|
||||||
|
|
||||||
const value1 = ref(true);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<h1 color="$ep-color-primary">{{ msg }}</h1>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
See
|
|
||||||
<a href="https://element-plus.org" target="_blank">element-plus</a> for more
|
|
||||||
information.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- example components -->
|
|
||||||
<div class="mb-4">
|
|
||||||
<el-button size="large" @click="toast">El Message</el-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="my-2 text-center flex flex-wrap justify-center items-center">
|
|
||||||
<el-button @click="count++">count is: {{ count }}</el-button>
|
|
||||||
<el-button type="primary" @click="count++">count is: {{ count }}</el-button>
|
|
||||||
<el-button type="success" @click="count++">count is: {{ count }}</el-button>
|
|
||||||
<el-button type="warning" @click="count++">count is: {{ count }}</el-button>
|
|
||||||
<el-button type="danger" @click="count++">count is: {{ count }}</el-button>
|
|
||||||
<el-button type="info" @click="count++">count is: {{ count }}</el-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<el-tag type="success" class="m-1">Tag 1</el-tag>
|
|
||||||
<el-tag type="warning" class="m-1">Tag 1</el-tag>
|
|
||||||
<el-tag type="danger" class="m-1">Tag 1</el-tag>
|
|
||||||
<el-tag type="info" class="m-1">Tag 1</el-tag>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<el-switch v-model="value1" />
|
|
||||||
<el-switch
|
|
||||||
v-model="value1"
|
|
||||||
class="m-2"
|
|
||||||
style="--ep-switch-on-color: black; --ep-switch-off-color: gray;"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="my-2">
|
|
||||||
<el-input class="m-2" v-model="input" style="width: 200px" />
|
|
||||||
<el-date-picker
|
|
||||||
class="m-2"
|
|
||||||
v-model="curDate"
|
|
||||||
type="date"
|
|
||||||
placeholder="Pick a day"
|
|
||||||
></el-date-picker>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>For example, we can custom primary color to 'green'.</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Edit
|
|
||||||
<code>components/HelloWorld.vue</code> to test components.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Edit
|
|
||||||
<code>styles/element/var.scss</code> to test scss variables.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Full Example:
|
|
||||||
<a
|
|
||||||
href="https://github.com/element-plus/element-plus-vite-starter"
|
|
||||||
target="_blank"
|
|
||||||
>element-plus-vite-starter</a
|
|
||||||
>
|
|
||||||
| On demand Example:
|
|
||||||
<a
|
|
||||||
href="https://github.com/element-plus/unplugin-element-plus"
|
|
||||||
target="_blank"
|
|
||||||
>unplugin-element-plus/examples/vite</a
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.ep-button {
|
|
||||||
margin: 4px;
|
|
||||||
}
|
|
||||||
.ep-button + .ep-button {
|
|
||||||
margin-left: 0;
|
|
||||||
margin: 4px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<a href="https://vitejs.dev" target="_blank">
|
|
||||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
|
||||||
</a>
|
|
||||||
<a href="https://vuejs.org/" target="_blank">
|
|
||||||
<img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
|
|
||||||
</a>
|
|
||||||
<a href="https://element-plus.org/" target="_blank">
|
|
||||||
<img src="/element-plus-logo-small.svg" class="logo element-plus" alt="Element Plus logo" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.logo {
|
|
||||||
height: 6em;
|
|
||||||
padding: 1.5em;
|
|
||||||
will-change: filter;
|
|
||||||
transition: filter 300ms;
|
|
||||||
}
|
|
||||||
.logo:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #646cffaa);
|
|
||||||
}
|
|
||||||
.logo.vue:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #42b883aa);
|
|
||||||
}
|
|
||||||
.logo.element-plus:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #409effaa);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import { toggleDark } from "~/composables";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<el-menu class="el-menu-demo" mode="horizontal">
|
|
||||||
<el-menu-item index="1">Element Plus</el-menu-item>
|
|
||||||
<el-sub-menu index="2">
|
|
||||||
<template #title>Workspace</template>
|
|
||||||
<el-menu-item index="2-1">item one</el-menu-item>
|
|
||||||
<el-menu-item index="2-2">item two</el-menu-item>
|
|
||||||
<el-menu-item index="2-3">item three</el-menu-item>
|
|
||||||
<el-sub-menu index="2-4">
|
|
||||||
<template #title>item four</template>
|
|
||||||
<el-menu-item index="2-4-1">item one</el-menu-item>
|
|
||||||
<el-menu-item index="2-4-2">item two</el-menu-item>
|
|
||||||
<el-menu-item index="2-4-3">item three</el-menu-item>
|
|
||||||
</el-sub-menu>
|
|
||||||
</el-sub-menu>
|
|
||||||
<el-menu-item index="3" disabled>Info</el-menu-item>
|
|
||||||
<el-menu-item index="4">Orders</el-menu-item>
|
|
||||||
<el-menu-item h="full" @click="toggleDark()">
|
|
||||||
<button
|
|
||||||
class="border-none w-full bg-transparent cursor-pointer"
|
|
||||||
style="height: var(--ep-menu-item-height)"
|
|
||||||
>
|
|
||||||
<i inline-flex i="dark:ep-moon ep-sunny" />
|
|
||||||
</button>
|
|
||||||
</el-menu-item>
|
|
||||||
</el-menu>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
<template>
|
|
||||||
<el-menu
|
|
||||||
default-active="2"
|
|
||||||
class="el-menu-vertical-demo"
|
|
||||||
:collapse="isCollapse"
|
|
||||||
@open="handleOpen"
|
|
||||||
@close="handleClose"
|
|
||||||
>
|
|
||||||
<el-sub-menu index="1">
|
|
||||||
<template #title>
|
|
||||||
<el-icon><location /></el-icon>
|
|
||||||
<span>Navigator One</span>
|
|
||||||
</template>
|
|
||||||
<el-menu-item-group>
|
|
||||||
<template #title><span>Group One</span></template>
|
|
||||||
<el-menu-item index="1-1">item one</el-menu-item>
|
|
||||||
<el-menu-item index="1-2">item two</el-menu-item>
|
|
||||||
</el-menu-item-group>
|
|
||||||
<el-menu-item-group title="Group Two">
|
|
||||||
<el-menu-item index="1-3">item three</el-menu-item>
|
|
||||||
</el-menu-item-group>
|
|
||||||
<el-sub-menu index="1-4">
|
|
||||||
<template #title><span>item four</span></template>
|
|
||||||
<el-menu-item index="1-4-1">item one</el-menu-item>
|
|
||||||
</el-sub-menu>
|
|
||||||
</el-sub-menu>
|
|
||||||
<el-menu-item index="2">
|
|
||||||
<el-icon><icon-menu /></el-icon>
|
|
||||||
<template #title>Navigator Two</template>
|
|
||||||
</el-menu-item>
|
|
||||||
<el-menu-item index="3" disabled>
|
|
||||||
<el-icon><document /></el-icon>
|
|
||||||
<template #title>Navigator Three</template>
|
|
||||||
</el-menu-item>
|
|
||||||
<el-menu-item index="4">
|
|
||||||
<el-icon><setting /></el-icon>
|
|
||||||
<template #title>Navigator Four</template>
|
|
||||||
</el-menu-item>
|
|
||||||
</el-menu>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from "vue";
|
|
||||||
import {
|
|
||||||
Location,
|
|
||||||
Document,
|
|
||||||
Menu as IconMenu,
|
|
||||||
Setting,
|
|
||||||
} from "@element-plus/icons-vue";
|
|
||||||
|
|
||||||
const isCollapse = ref(true);
|
|
||||||
const handleOpen = (key: string, keyPath: string[]) => {
|
|
||||||
console.log(key, keyPath);
|
|
||||||
};
|
|
||||||
const handleClose = (key: string, keyPath: string[]) => {
|
|
||||||
console.log(key, keyPath);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
import { useDark, useToggle } from "@vueuse/core";
|
|
||||||
|
|
||||||
export const isDark = useDark();
|
|
||||||
export const toggleDark = useToggle(isDark);
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * from "./dark";
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
/// <reference types="vite/client" />
|
|
||||||
|
|
||||||
declare module '*.vue' {
|
|
||||||
import { DefineComponent } from 'vue'
|
|
||||||
const component: DefineComponent<{}, {}, any>
|
|
||||||
export default component
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>element-starter</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body style="margin: 0px;">
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import ElementUI from 'element-ui'
|
||||||
|
import 'element-ui/lib/theme-chalk/index.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
import store from './store'
|
||||||
|
import router from './router/index.js'
|
||||||
|
|
||||||
|
Vue.use(ElementUI)
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: '#app',
|
||||||
|
router: router,
|
||||||
|
store: store,
|
||||||
|
render: h => h(App)
|
||||||
|
})
|
||||||
20
src/main.ts
20
src/main.ts
|
|
@ -1,20 +0,0 @@
|
||||||
import { createApp } from "vue";
|
|
||||||
import App from "./App.vue";
|
|
||||||
|
|
||||||
// import "~/styles/element/index.scss";
|
|
||||||
|
|
||||||
// import ElementPlus from "element-plus";
|
|
||||||
// import all element css, uncommented next line
|
|
||||||
// import "element-plus/dist/index.css";
|
|
||||||
|
|
||||||
// or use cdn, uncomment cdn link in `index.html`
|
|
||||||
|
|
||||||
import "~/styles/index.scss";
|
|
||||||
import "uno.css";
|
|
||||||
|
|
||||||
// If you want to use ElMessage, import it.
|
|
||||||
import "element-plus/theme-chalk/src/message.scss";
|
|
||||||
|
|
||||||
const app = createApp(App);
|
|
||||||
// app.use(ElementPlus);
|
|
||||||
app.mount("#app");
|
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Router from 'vue-router'
|
||||||
|
|
||||||
|
import ViewLogin from '../views/login/index'
|
||||||
|
import ViewRegister from '../views/register/index'
|
||||||
|
import View404 from '../views/404'
|
||||||
|
import ViewContainer from '../views/layout/container'
|
||||||
|
import ViewList from '../views/list/index'
|
||||||
|
import ViewDetail from '../views/detail/index'
|
||||||
|
import ViewCreate from '../views/create/index'
|
||||||
|
import ViewEdit from '../views/edit/index'
|
||||||
|
|
||||||
|
|
||||||
|
Vue.use(Router)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* constantRoutes
|
||||||
|
* a base page that does not have permission requirements
|
||||||
|
* all roles can be accessed
|
||||||
|
*/
|
||||||
|
export const constantRoutes = [
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
component: ViewLogin,
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/register',
|
||||||
|
component: ViewRegister,
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/404',
|
||||||
|
component: View404,
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
redirect: '/',
|
||||||
|
component: ViewContainer,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
component: ViewList
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'detail',
|
||||||
|
component: ViewDetail
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'create',
|
||||||
|
component: ViewCreate
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'edit',
|
||||||
|
component: ViewEdit
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{ path: '*', redirect: '/404', hidden: true }
|
||||||
|
]
|
||||||
|
|
||||||
|
const createRouter = () => new Router({
|
||||||
|
routes: constantRoutes
|
||||||
|
})
|
||||||
|
|
||||||
|
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
|
||||||
|
|
@ -1,69 +0,0 @@
|
||||||
// 定义基础 URL
|
|
||||||
const BASE_URL = '/';
|
|
||||||
|
|
||||||
// 通用的 fetch 请求封装函数
|
|
||||||
async function request<T>(
|
|
||||||
endpoint: string,
|
|
||||||
method: string = 'GET',
|
|
||||||
body?: any,
|
|
||||||
headers: Record<string, string> = {}
|
|
||||||
): Promise<T> {
|
|
||||||
const options: RequestInit = {
|
|
||||||
method,
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
...headers,
|
|
||||||
},
|
|
||||||
body: body ? JSON.stringify(body) : undefined,
|
|
||||||
};
|
|
||||||
|
|
||||||
const response = await fetch(`${BASE_URL}${endpoint}`, options);
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const errorText = await response.text();
|
|
||||||
throw new Error(`API Error: ${response.status} ${errorText}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 用户相关 API 封装
|
|
||||||
export const userService = {
|
|
||||||
login: (params: LoginParam) =>
|
|
||||||
request<string>('/user/login', 'POST', params),
|
|
||||||
|
|
||||||
logout: () => request<string>('/user/logout', 'GET'),
|
|
||||||
|
|
||||||
register: (params: RegisterParam) =>
|
|
||||||
request<string>('/user/register', 'POST', params),
|
|
||||||
|
|
||||||
verifyRegistration: (token: string) =>
|
|
||||||
request<string>(`/user/register/verify?token=${token}`, 'GET'),
|
|
||||||
};
|
|
||||||
|
|
||||||
// 问题相关 API 封装
|
|
||||||
export const questionService = {
|
|
||||||
create: (params: QuestionCreateParam) =>
|
|
||||||
request<string>('/question/create', 'POST', params),
|
|
||||||
|
|
||||||
delete: (params: QuestionDeleteParam) =>
|
|
||||||
request<string>('/question/delete', 'POST', params),
|
|
||||||
|
|
||||||
edit: (params: QuestionEditParam) =>
|
|
||||||
request<string>('/question/edit', 'POST', params),
|
|
||||||
|
|
||||||
detail: (params: QuestionDetailParam) =>
|
|
||||||
request<QuestionDTO>('/question/detail', 'POST', params),
|
|
||||||
|
|
||||||
list: (params: QuestionListParam) =>
|
|
||||||
request<QuestionDTO[]>('/question/list', 'POST', params),
|
|
||||||
};
|
|
||||||
|
|
||||||
// 回答相关 API 封装
|
|
||||||
export const answerService = {
|
|
||||||
create: (params: AnswerCreateParam) =>
|
|
||||||
request<string>('/answer/create', 'POST', params),
|
|
||||||
|
|
||||||
delete: (params: AnswerDeleteParam) =>
|
|
||||||
request<string>('/answer/delete', 'POST', params),
|
|
||||||
};
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
// 用户相关类型
|
|
||||||
export interface LoginParam {
|
|
||||||
username: string;
|
|
||||||
password: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface RegisterParam {
|
|
||||||
username: string;
|
|
||||||
email: string;
|
|
||||||
password: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UserDTO {
|
|
||||||
id: number;
|
|
||||||
user_name: string;
|
|
||||||
created_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 问题相关类型
|
|
||||||
export interface QuestionDTO {
|
|
||||||
id: number;
|
|
||||||
title: string;
|
|
||||||
context: string;
|
|
||||||
answer_num: number;
|
|
||||||
answers: AnswerDTO[];
|
|
||||||
author: UserDTO;
|
|
||||||
created_at: string;
|
|
||||||
updated_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface QuestionCreateParam {
|
|
||||||
title: string;
|
|
||||||
content: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface QuestionDeleteParam {
|
|
||||||
questionId: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface QuestionEditParam {
|
|
||||||
id: number;
|
|
||||||
title: string;
|
|
||||||
content: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface QuestionDetailParam {
|
|
||||||
questionId: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface QuestionListParam {
|
|
||||||
start: number;
|
|
||||||
size: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 回答相关类型
|
|
||||||
export interface AnswerDTO {
|
|
||||||
id: number;
|
|
||||||
content: string;
|
|
||||||
author: UserDTO;
|
|
||||||
created_at: string;
|
|
||||||
updated_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface AnswerCreateParam {
|
|
||||||
questionId: number;
|
|
||||||
context: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface AnswerDeleteParam {
|
|
||||||
answerId: number;
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
const getters = {
|
||||||
|
sidebar: state => state.app.sidebar,
|
||||||
|
device: state => state.app.device,
|
||||||
|
size: state => state.app.size,
|
||||||
|
token: state => state.user.token,
|
||||||
|
avatar: state => state.user.avatar,
|
||||||
|
name: state => state.user.name,
|
||||||
|
visitedViews: state => state.tagsView.visitedViews,
|
||||||
|
cachedViews: state => state.tagsView.cachedViews,
|
||||||
|
}
|
||||||
|
export default getters
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
import getters from './getters'
|
||||||
|
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
|
// https://webpack.js.org/guides/dependency-management/#requirecontext
|
||||||
|
const modulesFiles = require.context('./modules', true, /\.js$/)
|
||||||
|
|
||||||
|
// you do not need `import app from './modules/app'`
|
||||||
|
// it will auto require all vuex module from modules file
|
||||||
|
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
|
||||||
|
// set './app.js' => 'app'
|
||||||
|
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
|
||||||
|
const value = modulesFiles(modulePath)
|
||||||
|
modules[moduleName] = value.default
|
||||||
|
return modules
|
||||||
|
}, {})
|
||||||
|
|
||||||
|
const store = new Vuex.Store({
|
||||||
|
modules,
|
||||||
|
getters
|
||||||
|
})
|
||||||
|
|
||||||
|
export default store
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
import { getToken, setToken, removeToken } from '@/utils/auth'
|
||||||
|
import { resetRouter } from '@/router'
|
||||||
|
import request from "../../utils/request";
|
||||||
|
|
||||||
|
const getDefaultState = () => {
|
||||||
|
return {
|
||||||
|
token: getToken(),
|
||||||
|
name: 'jianfengye',
|
||||||
|
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const state = getDefaultState()
|
||||||
|
|
||||||
|
const mutations = {
|
||||||
|
RESET_STATE: (state) => {
|
||||||
|
Object.assign(state, getDefaultState())
|
||||||
|
},
|
||||||
|
SET_TOKEN: (state, token) => {
|
||||||
|
state.token = token
|
||||||
|
},
|
||||||
|
SET_NAME: (state, name) => {
|
||||||
|
state.name = name
|
||||||
|
},
|
||||||
|
SET_AVATAR: (state, avatar) => {
|
||||||
|
state.avatar = avatar
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const actions = {
|
||||||
|
// user login
|
||||||
|
login({ commit }, userInfo) {
|
||||||
|
const { username, password } = userInfo
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
request.post("/user/login",{ username: username.trim(), password: password }).then(response => {
|
||||||
|
const token = response.data
|
||||||
|
commit('SET_TOKEN', token)
|
||||||
|
setToken(token)
|
||||||
|
resolve()
|
||||||
|
}).catch(error => {
|
||||||
|
reject(error)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// user logout
|
||||||
|
logout({ commit, state }) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
request("/user/logout", state.token).then(() => {
|
||||||
|
removeToken() // must remove token first
|
||||||
|
resetRouter()
|
||||||
|
commit('RESET_STATE')
|
||||||
|
resolve()
|
||||||
|
}).catch(error => {
|
||||||
|
reject(error)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// remove token
|
||||||
|
resetToken({ commit }) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
removeToken() // must remove token first
|
||||||
|
commit('RESET_STATE')
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state,
|
||||||
|
mutations,
|
||||||
|
actions
|
||||||
|
}
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
// only scss variables
|
|
||||||
|
|
||||||
$--colors: (
|
|
||||||
"primary": (
|
|
||||||
"base": #589ef8,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
@forward "element-plus/theme-chalk/src/dark/var.scss" with (
|
|
||||||
$colors: $--colors
|
|
||||||
);
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
$--colors: (
|
|
||||||
"primary": (
|
|
||||||
"base": green,
|
|
||||||
),
|
|
||||||
"success": (
|
|
||||||
"base": #21ba45,
|
|
||||||
),
|
|
||||||
"warning": (
|
|
||||||
"base": #f2711c,
|
|
||||||
),
|
|
||||||
"danger": (
|
|
||||||
"base": #db2828,
|
|
||||||
),
|
|
||||||
"error": (
|
|
||||||
"base": #db2828,
|
|
||||||
),
|
|
||||||
"info": (
|
|
||||||
"base": #42b8dd,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
// we can add this to custom namespace, default is 'el'
|
|
||||||
@forward "element-plus/theme-chalk/src/mixins/config.scss" with (
|
|
||||||
$namespace: "ep"
|
|
||||||
);
|
|
||||||
|
|
||||||
// You should use them in scss, because we calculate it by sass.
|
|
||||||
// comment next lines to use default color
|
|
||||||
@forward "element-plus/theme-chalk/src/common/var.scss" with (
|
|
||||||
// do not use same name, it will override.
|
|
||||||
$colors: $--colors,
|
|
||||||
$button-padding-horizontal: ("default": 50px)
|
|
||||||
);
|
|
||||||
|
|
||||||
// if you want to import all
|
|
||||||
// @use "element-plus/theme-chalk/src/index.scss" as *;
|
|
||||||
|
|
||||||
// You can comment it to hide debug info.
|
|
||||||
// @debug $--colors;
|
|
||||||
|
|
||||||
// custom dark variables
|
|
||||||
@use "./dark.scss";
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
// import dark theme
|
|
||||||
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
|
|
||||||
|
|
||||||
// :root {
|
|
||||||
// --ep-color-primary: red;
|
|
||||||
// }
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: Inter, system-ui, Avenir, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
|
||||||
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--ep-color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
border-radius: 2px;
|
|
||||||
padding: 2px 4px;
|
|
||||||
background-color: var(--ep-color-primary-light-9);
|
|
||||||
color: var(--ep-color-primary);
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import Cookies from 'js-cookie'
|
||||||
|
|
||||||
|
const TokenKey = 'hade_bbs'
|
||||||
|
|
||||||
|
export function getToken() {
|
||||||
|
return Cookies.get(TokenKey)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setToken(token) {
|
||||||
|
return Cookies.set(TokenKey, token)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function removeToken() {
|
||||||
|
return Cookies.remove(TokenKey)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
import axios from 'axios'
|
||||||
|
import {Message} from 'element-ui'
|
||||||
|
|
||||||
|
|
||||||
|
// 创建一个axios
|
||||||
|
const service = axios.create({
|
||||||
|
withCredentials: true, // send cookies when cross-domain requests
|
||||||
|
timeout: 10000 // request timeout
|
||||||
|
})
|
||||||
|
|
||||||
|
// 请求的配置
|
||||||
|
service.interceptors.request.use(
|
||||||
|
config => {
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
// 如果request 有错误，打印信息
|
||||||
|
console.log(error) // for debug
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// response中统一做处理
|
||||||
|
service.interceptors.response.use(
|
||||||
|
response => {
|
||||||
|
// Any status code that lie within the range of 2xx cause this function to trigger
|
||||||
|
// Do something with result data
|
||||||
|
// 处理 2xx 范围内的响应
|
||||||
|
const res = response.data;
|
||||||
|
|
||||||
|
// 判断后端返回的 code 是否为 0（表示失败）
|
||||||
|
if (res.code !== 1) {
|
||||||
|
Message({
|
||||||
|
message: res.message || '网络开小差啦！',
|
||||||
|
type: 'error',
|
||||||
|
duration: 5 * 1000
|
||||||
|
});
|
||||||
|
|
||||||
|
// 返回一个拒绝的 Promise，以便调用方处理错误
|
||||||
|
console.log("执行到第一个 reject ")
|
||||||
|
console.log(res)
|
||||||
|
return Promise.reject(new Error(res.message || '网络开小差啦！'));
|
||||||
|
} else {
|
||||||
|
// 正常返回数据
|
||||||
|
console.log("执行到下面的 else ")
|
||||||
|
console.log(res)
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
// Any status codes that falls outside the range of 2xx cause this function to trigger
|
||||||
|
// Do something with result error
|
||||||
|
console.log('err: ' + error) // for debug
|
||||||
|
const message = (error.response && error.response.data && error.response.data.message)
|
||||||
|
|| '网络开小差啦！';
|
||||||
|
// 打印Message消息
|
||||||
|
Message({
|
||||||
|
message,
|
||||||
|
type: 'error',
|
||||||
|
duration: 5 * 1000
|
||||||
|
})
|
||||||
|
console.log("执行到下面的 error了 ")
|
||||||
|
console.log(message)
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export default service
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import ElementUI from 'element-ui'
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "notfound",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
model: {
|
||||||
|
username: "",
|
||||||
|
password: ""
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="notfound">
|
||||||
|
<el-card>
|
||||||
|
<h2>页面找不到了</h2>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.notfound {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 240px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
<template>
|
||||||
|
<el-row type="flex" justify="center" align="middle">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-card class="box-card" shadow="never">
|
||||||
|
<el-form ref="form" :model="question" >
|
||||||
|
<el-form-item >
|
||||||
|
<el-input v-model="question.title"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item >
|
||||||
|
<editor :options="editorOptions"
|
||||||
|
height="500px"
|
||||||
|
initialEditType="wysiwyg"
|
||||||
|
previewStyle="vertical"
|
||||||
|
ref="toastuiEditor"
|
||||||
|
:initialValue="content"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="postQuestion">立即提问</el-button>
|
||||||
|
<el-button>取消</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import '@toast-ui/editor/dist/toastui-editor.css';
|
||||||
|
|
||||||
|
import { Editor } from '@toast-ui/vue-editor';
|
||||||
|
import request from "../../utils/request";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
editor: Editor
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
question: {
|
||||||
|
title: '',
|
||||||
|
content: ''
|
||||||
|
},
|
||||||
|
content: '<p>123213213123</p>',
|
||||||
|
editorOptions: {
|
||||||
|
minHeight: '200px',
|
||||||
|
language: 'en-US',
|
||||||
|
useCommandShortcut: true,
|
||||||
|
usageStatistics: true,
|
||||||
|
hideModeSwitch: true,
|
||||||
|
toolbarItems: [
|
||||||
|
['heading', 'bold', 'italic', 'strike'],
|
||||||
|
['hr', 'quote'],
|
||||||
|
['ul', 'ol', 'task', 'indent', 'outdent'],
|
||||||
|
['table', 'image', 'link'],
|
||||||
|
['code', 'codeblock'],
|
||||||
|
['scrollSync'],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
postQuestion: function() {
|
||||||
|
debugger
|
||||||
|
let html = this.$refs.toastuiEditor.$data.editor.getHTML()
|
||||||
|
this.question.content = html;
|
||||||
|
const that = this
|
||||||
|
request({
|
||||||
|
method: 'POST',
|
||||||
|
url: "/question/create",
|
||||||
|
data: this.question,
|
||||||
|
}).then(function () {
|
||||||
|
that.$router.push({ path: '/' })
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding: 18px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-card {
|
||||||
|
/*width: 480px;*/
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,176 @@
|
||||||
|
<template>
|
||||||
|
<el-row type="flex" justify="center" align="middle">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-card v-if="question" class="box-card" shadow="never">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<span>{{ question.title }} <span class="header_name" style="margin-right: 5px; float: right;"> <span
|
||||||
|
@click="gotoQuestionEdit">修改</span> ｜ <span @click="gotoDeleteQuestion">删除</span> </span> </span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<viewer ref="questionViewer" :options="questionViewerOptions" :initialValue="question.context"/>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-divider content-position="left">所有回答</el-divider>
|
||||||
|
<el-card v-for="answer in question.answers" style="margin-top: 5px; " class="box-card" shadow="hover">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<span>{{ answer.author.user_name }} | {{ answer.created_at | formatDate }} <span class="header_name"
|
||||||
|
style="margin-right: 5px; float: right;"
|
||||||
|
@click="gotoDeleteAnswer(answer.id)">删除</span></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<viewer ref="answerViewer" :initialValue="answer.content"/>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-divider content-position="left">我来回答</el-divider>
|
||||||
|
<el-card class="box-card" shadow="never">
|
||||||
|
<el-form ref="form" :model="question">
|
||||||
|
<el-form-item>
|
||||||
|
<editor :options="editorOptions"
|
||||||
|
:initialValue="answerContext"
|
||||||
|
height="200px"
|
||||||
|
initialEditType="markdown"
|
||||||
|
ref="toastuiEditor"
|
||||||
|
previewStyle="vertical"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="postAnswer">提交</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import '@toast-ui/editor/dist/toastui-editor-viewer.css';
|
||||||
|
import '@toast-ui/editor/dist/toastui-editor.css';
|
||||||
|
|
||||||
|
import {Editor, Viewer} from '@toast-ui/vue-editor';
|
||||||
|
import request from "../../utils/request";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
viewer: Viewer,
|
||||||
|
editor: Editor,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
id: 0,
|
||||||
|
question: null,
|
||||||
|
questionViewerOptions: {
|
||||||
|
usageStatistics: true,
|
||||||
|
},
|
||||||
|
answerContext: '',
|
||||||
|
editorOptions: {
|
||||||
|
minHeight: '200px',
|
||||||
|
language: 'en-US',
|
||||||
|
useCommandShortcut: true,
|
||||||
|
usageStatistics: true,
|
||||||
|
hideModeSwitch: false,
|
||||||
|
toolbarItems: [
|
||||||
|
['heading', 'bold', 'italic', 'strike'],
|
||||||
|
['hr', 'quote'],
|
||||||
|
['ul', 'ol', 'task', 'indent', 'outdent'],
|
||||||
|
['table', 'link'],
|
||||||
|
['code', 'codeblock'],
|
||||||
|
['scrollSync'],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (this.$route.query.id) {
|
||||||
|
let id = parseInt(this.$route.query.id)
|
||||||
|
this.getDetail(id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getDetail: function (id) {
|
||||||
|
const that = this
|
||||||
|
this.id = id
|
||||||
|
request({
|
||||||
|
url: "/question/detail",
|
||||||
|
method: 'POST',
|
||||||
|
params: {
|
||||||
|
"id": id
|
||||||
|
}
|
||||||
|
}).then(function (response) {
|
||||||
|
that.question = response.data;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
postAnswer: function () {
|
||||||
|
let html = this.$refs.toastuiEditor.$data.editor.getHTML()
|
||||||
|
this.answerContext = html
|
||||||
|
const that = this
|
||||||
|
request({
|
||||||
|
method: 'POST',
|
||||||
|
url: "/answer/create",
|
||||||
|
data: {
|
||||||
|
"question_id": that.id,
|
||||||
|
"context": that.answerContext,
|
||||||
|
},
|
||||||
|
}).then(function () {
|
||||||
|
that.$router.go(0)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
gotoQuestionEdit: function () {
|
||||||
|
this.$router.push({path: '/edit', query: {'id': this.id}})
|
||||||
|
},
|
||||||
|
gotoDeleteQuestion: function () {
|
||||||
|
const that = this
|
||||||
|
request({
|
||||||
|
method: 'POST',
|
||||||
|
url: "/question/delete",
|
||||||
|
data: {
|
||||||
|
"questionId": that.id,
|
||||||
|
}
|
||||||
|
}).then(function () {
|
||||||
|
that.$router.go(0)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
gotoDeleteAnswer: function (id) {
|
||||||
|
const that = this
|
||||||
|
request({
|
||||||
|
method: 'POST',
|
||||||
|
url: "/answer/delete",
|
||||||
|
data: {
|
||||||
|
"answerId": id,
|
||||||
|
},
|
||||||
|
}).then(function () {
|
||||||
|
that.$router.go(0)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding: 18px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-card {
|
||||||
|
/*width: 480px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.header_name {
|
||||||
|
float: right;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 0 15px 0 0;
|
||||||
|
line-height: 34px;
|
||||||
|
background-color: transparent;
|
||||||
|
color: #486e9b;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header_name > a {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #486e9b;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
<template>
|
||||||
|
<el-row type="flex" justify="center" align="middle">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-card class="box-card" shadow="never">
|
||||||
|
<el-form ref="form" :model="question" label-width="80px">
|
||||||
|
<el-form-item label="问题标题">
|
||||||
|
<el-input v-model="question.title">{{question.title}}</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="问题描述" v-if="question.context">
|
||||||
|
<editor :options="editorOptions"
|
||||||
|
:initialValue="question.context"
|
||||||
|
height="500px"
|
||||||
|
initialEditType="wysiwyg"
|
||||||
|
previewStyle="vertical" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="onSubmit">更新</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import '@toast-ui/editor/dist/toastui-editor.css';
|
||||||
|
|
||||||
|
import { Editor } from '@toast-ui/vue-editor';
|
||||||
|
import request from "../../utils/request";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
editor: Editor
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (this.$route.query.id) {
|
||||||
|
let id = parseInt(this.$route.query.id)
|
||||||
|
this.getDetail(id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
question: {
|
||||||
|
title: '',
|
||||||
|
context: ''
|
||||||
|
},
|
||||||
|
editorOptions: {
|
||||||
|
minHeight: '200px',
|
||||||
|
language: 'en-US',
|
||||||
|
useCommandShortcut: true,
|
||||||
|
usageStatistics: true,
|
||||||
|
hideModeSwitch: true,
|
||||||
|
toolbarItems: [
|
||||||
|
['heading', 'bold', 'italic', 'strike'],
|
||||||
|
['hr', 'quote'],
|
||||||
|
['ul', 'ol', 'task', 'indent', 'outdent'],
|
||||||
|
['table', 'image', 'link'],
|
||||||
|
['code', 'codeblock'],
|
||||||
|
['scrollSync'],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getDetail: function (id) {
|
||||||
|
const that = this
|
||||||
|
this.id = id
|
||||||
|
request({
|
||||||
|
url: "/question/detail",
|
||||||
|
method: 'POST',
|
||||||
|
data: {
|
||||||
|
"questionId": id
|
||||||
|
}
|
||||||
|
}).then(function (response) {
|
||||||
|
that.question = response.data;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onSubmit: function () {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding: 18px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-card {
|
||||||
|
/*width: 480px;*/
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<script>
|
||||||
|
import BBSHeader from './header'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
'bbs-header': BBSHeader
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-container>
|
||||||
|
<el-header>
|
||||||
|
<bbs-header></bbs-header>
|
||||||
|
</el-header>
|
||||||
|
<el-main>
|
||||||
|
<router-view></router-view>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-row type="flex" justify="center" align="middle">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="8">
|
||||||
|
<div class="hade_title"><a href="/" id="home-link" title="hadecast">hadecast</a></div>
|
||||||
|
</el-col>
|
||||||
|
<el-col class="" :span="8" :offset="8">
|
||||||
|
<div class="header_name">
|
||||||
|
<router-link class="to-link" :to="{path: '/create'}"><a title="hadecast">我要提问</a></router-link>
|
||||||
|
| jianfengye | <a href="/user/logout" title="hadecast">登出</a></div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.hade_title {
|
||||||
|
float: left;
|
||||||
|
vertical-align: top;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 0 15px 0 0;
|
||||||
|
line-height: 34px;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header_name {
|
||||||
|
float: right;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 0 15px 0 0;
|
||||||
|
line-height: 34px;
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
background-color: transparent;
|
||||||
|
color: #486e9b;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header_name > a {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #486e9b;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hade_title > a {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #486e9b;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-header {
|
||||||
|
background-color: #409EFF;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 80px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,171 @@
|
||||||
|
<template>
|
||||||
|
<el-row type="flex" justify="center" align="middle">
|
||||||
|
<el-col :span="8">
|
||||||
|
<div class="infinite-list-wrapper" style="overflow:auto">
|
||||||
|
<ul
|
||||||
|
class="list"
|
||||||
|
v-infinite-scroll="load"
|
||||||
|
infinite-scroll-disabled="disabled">
|
||||||
|
<el-card v-for="question in questions" class="box-card" shadow="hover">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<span>{{question.title}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="text item">
|
||||||
|
{{question.context}}
|
||||||
|
</div>
|
||||||
|
<div class="bottom clearfix">
|
||||||
|
<time class="time">{{question.created_at}} ｜ {{question.author.user_name}} | {{question.answer_num}} 回答</time>
|
||||||
|
<el-button type="text" class="button" @click="gotoDetail(question.id)">去看看</el-button>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</ul>
|
||||||
|
<p v-if="loading" class="loading_tips">加载中...</p>
|
||||||
|
<p v-if="disabled" class="loading_tips">没有更多了</p>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import request from "../../utils/request";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
count: 10,
|
||||||
|
start: 0,
|
||||||
|
size: 10,
|
||||||
|
questions: [],
|
||||||
|
loading: false,
|
||||||
|
noMore: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getQuestions();
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
disabled () {
|
||||||
|
return this.loading || this.noMore
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
load () {
|
||||||
|
if (this.noMore === true) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.loading = true
|
||||||
|
setTimeout(() => {
|
||||||
|
this.loading = false
|
||||||
|
this.getQuestions()
|
||||||
|
}, 2000)
|
||||||
|
},
|
||||||
|
getQuestions() {
|
||||||
|
const that = this;
|
||||||
|
request({
|
||||||
|
url: '/question/list',
|
||||||
|
method: 'POST',
|
||||||
|
data: {
|
||||||
|
start: this.start,
|
||||||
|
size: this.size,
|
||||||
|
}
|
||||||
|
}).then(function (response) {
|
||||||
|
const questions = response.data
|
||||||
|
if (questions === null || questions.length === 0) {
|
||||||
|
that.noMore = true
|
||||||
|
}
|
||||||
|
that.questions = that.questions.concat(questions)
|
||||||
|
that.start = that.start + questions.length
|
||||||
|
})
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
gotoDetail(id) {
|
||||||
|
// go to detail page
|
||||||
|
this.$router.push({path: '/detail', query:{'id': id}})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.loading_tips {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
margin-top: 13px;
|
||||||
|
line-height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-card {
|
||||||
|
margin-top: 10px;
|
||||||
|
/*height: 240px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__item h3 {
|
||||||
|
color: #475669;
|
||||||
|
font-size: 18px;
|
||||||
|
opacity: 0.75;
|
||||||
|
line-height: 300px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__item:nth-child(2n) {
|
||||||
|
background-color: #99a9bf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__item:nth-child(2n+1) {
|
||||||
|
background-color: #d3dce6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
margin-top: 13px;
|
||||||
|
line-height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
padding: 0;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "login",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
model: {
|
||||||
|
username: "",
|
||||||
|
password: ""
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleLogin() {
|
||||||
|
this.$store.dispatch('user/login', this.model).then(() => {
|
||||||
|
this.$router.push({path: this.redirect || '/'})
|
||||||
|
}).catch(() => {
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="login">
|
||||||
|
<el-card>
|
||||||
|
<h2>登录</h2>
|
||||||
|
<el-form
|
||||||
|
class="login-form"
|
||||||
|
>
|
||||||
|
<el-form-item prop="username">
|
||||||
|
<el-input v-model="model.username" placeholder="用户名"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="password">
|
||||||
|
<el-input
|
||||||
|
placeholder="密码"
|
||||||
|
type="password"
|
||||||
|
v-model="model.password"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-row>
|
||||||
|
<el-col class="register">
|
||||||
|
还没有账号？请点击
|
||||||
|
<router-link class="to-link" :to="{path: '/register'}">
|
||||||
|
<el-link type="primary">注册</el-link>
|
||||||
|
</router-link>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
class="login-button"
|
||||||
|
type="primary"
|
||||||
|
native-type="submit"
|
||||||
|
@click="handleLogin"
|
||||||
|
block
|
||||||
|
>登录
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.to-link {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
width: 390px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
<script setup>
|
||||||
|
import request from '../../utils/request'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "register",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
email: '',
|
||||||
|
repassword: ''
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
submitForm: function(e) {
|
||||||
|
if (this.form.repassword !== this.form.password) {
|
||||||
|
this.$message.error("两次输入密码不一致");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const that = this;
|
||||||
|
request({
|
||||||
|
url: '/user/register',
|
||||||
|
method: 'post',
|
||||||
|
data: this.form
|
||||||
|
}).then(function (response) {
|
||||||
|
debugger
|
||||||
|
const msg = response.data
|
||||||
|
that.$message.success(msg);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="register">
|
||||||
|
<el-card>
|
||||||
|
<h2>注册</h2>
|
||||||
|
<el-form v-model="form" class="register-form">
|
||||||
|
<el-form-item >
|
||||||
|
<el-input v-model="form.username" placeholder="用户名" ></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item >
|
||||||
|
<el-input v-model="form.email" placeholder="邮箱"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item >
|
||||||
|
<el-input
|
||||||
|
placeholder="密码"
|
||||||
|
type="password"
|
||||||
|
v-model="form.password"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item >
|
||||||
|
<el-input
|
||||||
|
placeholder="确认密码"
|
||||||
|
type="password"
|
||||||
|
v-model="form.repassword"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
:loading="loading"
|
||||||
|
class="login-button"
|
||||||
|
type="primary"
|
||||||
|
native-type="submit"
|
||||||
|
@click="submitForm"
|
||||||
|
block
|
||||||
|
>注册</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.register {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
.register-form {
|
||||||
|
width: 390px;
|
||||||
|
}
|
||||||
|
.forgot-password {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.send_verify_code{
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"baseUrl": ".",
|
|
||||||
"target": "esnext",
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"module": "esnext",
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"strict": true,
|
|
||||||
"jsx": "preserve",
|
|
||||||
"sourceMap": true,
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"lib": ["esnext", "dom"],
|
|
||||||
"paths": {
|
|
||||||
"~/*": ["src/*"]
|
|
||||||
},
|
|
||||||
"skipLibCheck": true
|
|
||||||
},
|
|
||||||
"vueCompilerOptions": {
|
|
||||||
"target": 3
|
|
||||||
},
|
|
||||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
|
|
||||||
}
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
import path from 'path'
|
|
||||||
import { defineConfig } from 'vite'
|
|
||||||
import vue from '@vitejs/plugin-vue'
|
|
||||||
|
|
||||||
import Components from 'unplugin-vue-components/vite'
|
|
||||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
|
||||||
|
|
||||||
import Unocss from 'unocss/vite'
|
|
||||||
import {
|
|
||||||
presetAttributify,
|
|
||||||
presetIcons,
|
|
||||||
presetUno,
|
|
||||||
transformerDirectives,
|
|
||||||
transformerVariantGroup,
|
|
||||||
} from 'unocss'
|
|
||||||
|
|
||||||
const pathSrc = path.resolve(__dirname, 'src')
|
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
resolve: {
|
|
||||||
alias: {
|
|
||||||
'~/': `${pathSrc}/`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
css: {
|
|
||||||
preprocessorOptions: {
|
|
||||||
scss: {
|
|
||||||
additionalData: `@use "~/styles/element/index.scss" as *;`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
vue(),
|
|
||||||
Components({
|
|
||||||
// allow auto load markdown components under `./src/components/`
|
|
||||||
extensions: ['vue', 'md'],
|
|
||||||
// allow auto import and register components used in markdown
|
|
||||||
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
|
|
||||||
resolvers: [
|
|
||||||
ElementPlusResolver({
|
|
||||||
importStyle: 'sass',
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
dts: 'src/components.d.ts',
|
|
||||||
}),
|
|
||||||
|
|
||||||
// https://github.com/antfu/unocss
|
|
||||||
// see unocss.config.ts for config
|
|
||||||
Unocss({
|
|
||||||
presets: [
|
|
||||||
presetUno(),
|
|
||||||
presetAttributify(),
|
|
||||||
presetIcons({
|
|
||||||
scale: 1.2,
|
|
||||||
warn: true,
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
transformers: [
|
|
||||||
transformerDirectives(),
|
|
||||||
transformerVariantGroup(),
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
})
|
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
const resolve = require('path').resolve
|
||||||
|
const webpack = require('webpack')
|
||||||
|
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||||
|
const url = require('url')
|
||||||
|
const publicPath = ''
|
||||||
|
|
||||||
|
module.exports = (options = {}) => ({
|
||||||
|
entry: {
|
||||||
|
vendor: './src/vendor',
|
||||||
|
index: './src/main.js'
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
path: resolve(__dirname, 'dist'),
|
||||||
|
filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
|
||||||
|
chunkFilename: '[id].js?[chunkhash]',
|
||||||
|
publicPath: options.dev ? '/assets/' : publicPath
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [{
|
||||||
|
test: /\.vue$/,
|
||||||
|
use: ['vue-loader']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.js$/,
|
||||||
|
use: ['babel-loader'],
|
||||||
|
exclude: /node_modules/
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: ['style-loader', 'css-loader', 'postcss-loader']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
|
||||||
|
use: [{
|
||||||
|
loader: 'url-loader',
|
||||||
|
options: {
|
||||||
|
limit: 10000
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new webpack.optimize.CommonsChunkPlugin({
|
||||||
|
names: ['vendor', 'manifest']
|
||||||
|
}),
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: 'src/index.html'
|
||||||
|
})
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': resolve(__dirname, 'src')
|
||||||
|
},
|
||||||
|
extensions: ['.js', '.vue', '.json', '.css']
|
||||||
|
},
|
||||||
|
devServer: {
|
||||||
|
host: '127.0.0.1',
|
||||||
|
port: 8890,
|
||||||
|
proxy: {
|
||||||
|
'/api/': {
|
||||||
|
target: 'http://127.0.0.1:8890',
|
||||||
|
changeOrigin: true,
|
||||||
|
pathRewrite: {
|
||||||
|
'^/api': ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
historyApiFallback: {
|
||||||
|
index: url.parse(options.dev ? '/assets/' : publicPath).pathname
|
||||||
|
}
|
||||||
|
},
|
||||||
|
devtool: options.dev ? '#eval-source-map' : '#source-map'
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue