修改前端
This commit is contained in:
橙子
@@ -1517,6 +1517,11 @@
|
||||
"supports-color": "^5.3.0"
|
||||
}
|
||||
},
|
||||
"chartist": {
|
||||
"version": "0.11.4",
|
||||
"resolved": "https://registry.npm.taobao.org/chartist/download/chartist-0.11.4.tgz",
|
||||
"integrity": "sha1-6W4cVz2LZ0eJIKOmrlI1nZ/I2Lc="
|
||||
},
|
||||
"check-types": {
|
||||
"version": "8.0.3",
|
||||
"resolved": "https://registry.npm.taobao.org/check-types/download/check-types-8.0.3.tgz",
|
||||
@@ -8814,6 +8819,14 @@
|
||||
"resolved": "https://registry.npmmirror.com/vue/download/vue-2.6.14.tgz",
|
||||
"integrity": "sha1-5RqlJQJQ1Wmj+606ilpofWA24jU="
|
||||
},
|
||||
"vue-chartist": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npm.taobao.org/vue-chartist/download/vue-chartist-2.3.1.tgz",
|
||||
"integrity": "sha1-dDlL7E2Dg8UjeAPlTC735/P69IQ=",
|
||||
"requires": {
|
||||
"chartist": "^0.11.0"
|
||||
}
|
||||
},
|
||||
"vue-cli-plugin-vuetify": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.nlark.com/vue-cli-plugin-vuetify/download/vue-cli-plugin-vuetify-2.4.2.tgz",
|
||||
@@ -9,6 +9,7 @@
|
||||
"dependencies": {
|
||||
"axios": "^0.22.0",
|
||||
"vue": "^2.6.11",
|
||||
"vue-chartist": "^2.3.1",
|
||||
"vue-router": "^3.2.0",
|
||||
"vuetify": "^2.4.0"
|
||||
},
|
||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
@@ -1,19 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<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>
|
||||
<title>Yi-Vue</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
<strong>We're sorry but Yi-Vue 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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
23
Yi.Vue/src/App.vue
Normal file
23
Yi.Vue/src/App.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<v-fade-transition mode="out-in">
|
||||
<router-view />
|
||||
</v-fade-transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Styles
|
||||
import '@/styles/overrides.sass'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
metaInfo: {
|
||||
title: 'App',
|
||||
titleTemplate: '%s | Material Dashboard Free',
|
||||
htmlAttrs: { lang: 'en' },
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
|
||||
],
|
||||
},
|
||||
}
|
||||
</script>
|
||||
BIN
Yi.Vue/src/assets/clint-mckoy.jpg
Normal file
BIN
Yi.Vue/src/assets/clint-mckoy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
Yi.Vue/src/assets/lock.jpg
Normal file
BIN
Yi.Vue/src/assets/lock.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 808 KiB |
BIN
Yi.Vue/src/assets/login.jpg
Normal file
BIN
Yi.Vue/src/assets/login.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 539 B After Width: | Height: | Size: 539 B |
BIN
Yi.Vue/src/assets/pricing.jpg
Normal file
BIN
Yi.Vue/src/assets/pricing.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 637 KiB |
BIN
Yi.Vue/src/assets/register.jpg
Normal file
BIN
Yi.Vue/src/assets/register.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 465 KiB |
30
Yi.Vue/src/assets/vmd.svg
Normal file
30
Yi.Vue/src/assets/vmd.svg
Normal file
@@ -0,0 +1,30 @@
|
||||
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M132.472 205L182.534 118.292L162.162 130.093V119.162L191.975 102.019L221.665 50.5903L132.472 102.019V205Z" fill="#AEDDFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M132.472 194.938L173.714 123.386L162.162 130.094V124.255V119.162V113.448L189.863 97.423L214.584 54.5659L132.472 102.019V194.938Z" fill="#AEDDFF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M183.155 101.274L189.987 97.2988L214.707 54.5659L175.329 77.2988C176.447 85.8702 179.18 93.9447 183.155 101.274Z" fill="#AEDDFF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M132.472 194.938L173.839 123.385L162.162 130.093V124.255V123.634C151.23 125.497 141.168 129.845 132.472 135.932V194.938Z" fill="#AEDDFF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M132.472 156.553V178.043C134.584 180.279 136.447 182.515 138.311 184.876L145.888 171.832C141.913 166.242 137.441 161.149 132.472 156.553Z" fill="#AEDDFF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M132.472 146.242C139.056 151.584 145.019 157.671 150.112 164.379L166.137 136.677C156.323 127.236 145.019 119.286 132.472 113.447V146.242Z" fill="#AEDDFF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M160.299 85.9946L141.665 96.8021C151.23 101.647 161.665 105.249 172.472 107.485L189.988 97.4232L195.205 88.3549C191.727 88.7275 188.249 88.8518 184.771 88.8518C176.323 88.8518 168.125 87.858 160.299 85.9946Z" fill="#AEDDFF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M170.609 80.0311C175.206 80.6522 179.926 81.0249 184.771 81.0249C189.988 81.0249 195.081 80.6522 200.05 79.7826L212.1 58.9131C208.87 60.0311 205.516 61.0249 202.038 61.7702L170.609 80.0311Z" fill="#AEDDFF"/>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M132.472 194.938L173.714 123.385L171.975 124.379L132.472 192.826" fill="#AEDDFF"/>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M189.117 96.5534L161.043 112.827L162.161 119.162V113.448L189.863 97.423L214.583 54.5659L212.72 55.6839L189.117 96.5534Z" fill="#AEDDFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M123.528 205V102.019L34.3359 50.5903L84.398 137.298V113.696L93.8389 119.162V153.572L123.528 205Z" fill="#7BC6FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M123.528 194.937V102.018L43.0308 55.5586L84.3972 127.235V113.695V107.981L93.8381 113.447V119.161V143.509L123.528 194.937Z" fill="#7BC6FF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M123.528 194.937V144.006C116.82 150.714 111.478 158.788 107.875 167.733L123.528 194.937Z" fill="#7BC6FF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M60.5463 85.9933C68.2481 84.5026 75.4531 81.894 82.0369 78.1673L43.0308 55.5586L60.5463 85.9933Z" fill="#7BC6FF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M69.7397 101.895L82.5348 124.006C83.1559 124.131 83.777 124.255 84.3981 124.379V113.82V107.982L93.8391 113.447V119.286V126.367C104.522 129.224 114.46 133.696 123.528 139.534V109.472C109.864 104.379 95.0813 101.522 79.5534 101.522C76.1994 101.522 72.9696 101.646 69.7397 101.895Z" fill="#7BC6FF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M93.8384 143.509L100.671 155.31C108.994 158.912 116.695 163.633 123.528 169.223V148.85C114.584 142.515 104.646 137.546 93.8384 134.44V143.509Z" fill="#7BC6FF"/>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M84.3973 114.939V113.696V107.982L93.8383 113.448V119.162V120.404L94.8321 112.827L83.2793 106.119L84.3973 114.939Z" fill="#7BC6FF"/>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M43.0308 55.5586L84.3972 127.235V125.124L44.8941 56.6766L43.0308 55.5586Z" fill="#7BC6FF"/>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M123.528 192.826L93.8384 141.398V143.51L123.528 194.938" fill="#7BC6FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M135.948 60.3699L128.124 64.8994L103.418 50.5903H54.2114L128.124 93.2086L202.037 50.5903H119.065L135.948 60.3699Z" fill="#1867C0"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M140.065 57.8993L135.947 60.3699L128.124 64.8994L103.418 50.5903H62.5493L128.124 88.4732L193.698 50.5903H127.3L140.065 57.8993Z" fill="#1867C0"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M167.036 66.0317L193.698 50.5903H170.33C168.58 55.4286 167.448 60.6787 167.036 66.0317Z" fill="#1867C0"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M62.5493 50.5903L100.432 72.4142C105.579 67.7817 110.006 62.3258 113.3 56.2522L103.418 50.5903H62.5493Z" fill="#1867C0"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M102.903 50.5903H94.1533C101.977 65.517 113.301 78.2819 127.095 87.8555L128.124 88.4732L140.272 81.4731C125.036 74.8848 112.168 64.0758 102.903 50.5903Z" fill="#1867C0"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M128.125 64.8994L118.86 59.5464C126.889 67.37 136.566 73.4436 147.375 77.3555L163.434 68.0906C153.654 67.1641 144.39 64.4876 135.948 60.3699L128.125 64.8994Z" fill="#1867C0"/>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M127.301 50.5903L140.066 57.8993L135.948 60.3699L135.021 60.8846L141.816 57.8993L129.051 50.5903H127.301Z" fill="#1867C0"/>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M128.124 87.4438L64.2993 50.5903H62.5493L128.124 88.4732L193.698 50.5903H191.948L128.124 87.4438Z" fill="#1867C0"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M167.037 66.0317L163.331 68.0906L147.375 77.3554L140.272 81.4731L128.125 88.4732V93.2086L202.038 50.5903H193.699L167.037 66.0317Z" fill="#1867C0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.6 KiB |
1
Yi.Vue/src/assets/vuetify.svg
Normal file
1
Yi.Vue/src/assets/vuetify.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#aeddff;}</style></defs><title>Artboard 47</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-2" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-3" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
|
||||
|
After Width: | Height: | Size: 518 B |
68
Yi.Vue/src/components/Links.vue
Normal file
68
Yi.Vue/src/components/Links.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row align="center">
|
||||
<v-col
|
||||
v-for="(link, i) in links"
|
||||
:key="i"
|
||||
class="text-center"
|
||||
cols="6"
|
||||
md="auto"
|
||||
>
|
||||
<a
|
||||
:href="link.href"
|
||||
class="text-decoration-none text-uppercase text-caption font-weight-regular"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
v-text="link.text"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-spacer class="hidden-sm-and-down" />
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="auto"
|
||||
>
|
||||
<div class="text-body-1 font-weight-light pt-6 pt-md-0 text-center">
|
||||
© {{ (new Date()).getFullYear() }}, Made by <v-icon>mdi-vuetify</v-icon>
|
||||
<a
|
||||
href="https://vuetifyjs.com/en/about/meet-the-team/#company"
|
||||
class="text-decoration-none"
|
||||
>Vuetify</a>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Links',
|
||||
|
||||
data: () => ({
|
||||
links: [
|
||||
{
|
||||
href: 'https://vuetifyjs.com/',
|
||||
text: 'Vuetify Docs',
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: 'About Us',
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: 'Blog',
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: 'Licenses',
|
||||
},
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
a
|
||||
color: inherit !important
|
||||
</style>
|
||||
59
Yi.Vue/src/components/MaterialAlert.vue
Normal file
59
Yi.Vue/src/components/MaterialAlert.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<v-alert
|
||||
class="v-alert--material"
|
||||
dark
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<template
|
||||
v-if="$attrs.icon"
|
||||
v-slot:prepend
|
||||
>
|
||||
<v-avatar
|
||||
class="align-self-start mt-n9 elevation-6 mr-4"
|
||||
size="38"
|
||||
>
|
||||
<v-icon
|
||||
:color="$attrs.color"
|
||||
class="elevation-6 white"
|
||||
light
|
||||
>
|
||||
{{ $attrs.icon }}
|
||||
</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
|
||||
<slot />
|
||||
|
||||
<template
|
||||
v-if="$attrs.dismissible"
|
||||
v-slot:close="{ toggle }"
|
||||
>
|
||||
<v-btn
|
||||
:aria-label="$vuetify.lang.t('$vuetify.close')"
|
||||
class="ml-4"
|
||||
color
|
||||
icon
|
||||
small
|
||||
@click="toggle"
|
||||
>
|
||||
<v-icon>
|
||||
$vuetify.icons.cancel
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-alert>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default { name: 'MaterialAlert' }
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-alert--material
|
||||
margin-top: 32px
|
||||
|
||||
.v-alert__dismissible
|
||||
align-self: flex-start
|
||||
margin: 0 0 0 16px !important
|
||||
</style>
|
||||
113
Yi.Vue/src/components/MaterialCard.vue
Normal file
113
Yi.Vue/src/components/MaterialCard.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<app-card
|
||||
v-bind="$attrs"
|
||||
class="v-card--material mt-4"
|
||||
>
|
||||
<v-card-title class="align-start">
|
||||
<v-sheet
|
||||
:color="color"
|
||||
:width="fullHeader ? '100%' : undefined"
|
||||
class="overflow-hidden mt-n9 transition-swing v-card--material__sheet"
|
||||
elevation="6"
|
||||
max-width="100%"
|
||||
rounded
|
||||
>
|
||||
<v-theme-provider
|
||||
v-if="hasHeading"
|
||||
dark
|
||||
>
|
||||
<div
|
||||
v-if="icon"
|
||||
:class="iconSmall ? 'pa-7' : 'pa-8'"
|
||||
>
|
||||
<v-icon
|
||||
:large="!iconSmall"
|
||||
v-text="icon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<slot name="heading" />
|
||||
|
||||
<div
|
||||
v-if="heading"
|
||||
class="text-h4 white--text pa-7 v-card--material__title"
|
||||
>
|
||||
{{ heading }}
|
||||
</div>
|
||||
</v-theme-provider>
|
||||
</v-sheet>
|
||||
|
||||
<div
|
||||
v-if="hasTitle"
|
||||
:class="fullHeader ? 'pt-4' : 'pl-3'"
|
||||
class="text-h4 v-card--material__title"
|
||||
>
|
||||
<slot name="title" />
|
||||
|
||||
<template v-if="title">
|
||||
{{ title }}
|
||||
</template>
|
||||
|
||||
<div class="text-subtitle-1 mb-n4">
|
||||
<slot name="subtitle" />
|
||||
|
||||
<template v-if="subtitle">
|
||||
{{ subtitle }}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-title>
|
||||
|
||||
<slot />
|
||||
|
||||
<template v-if="$slots.actions">
|
||||
<v-divider class="mt-2 mx-4" />
|
||||
|
||||
<v-card-actions class="px-4 text-caption grey--text">
|
||||
<slot name="actions" />
|
||||
</v-card-actions>
|
||||
</template>
|
||||
</app-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MaterialCard',
|
||||
|
||||
props: {
|
||||
color: String,
|
||||
fullHeader: Boolean,
|
||||
heading: String,
|
||||
icon: String,
|
||||
iconSmall: Boolean,
|
||||
subtitle: String,
|
||||
title: String,
|
||||
},
|
||||
|
||||
computed: {
|
||||
hasHeading () {
|
||||
return !!(
|
||||
this.icon ||
|
||||
this.heading ||
|
||||
this.$slots.heading
|
||||
)
|
||||
},
|
||||
hasTitle () {
|
||||
return !!(
|
||||
this.title ||
|
||||
this.subtitle ||
|
||||
this.$slots.title ||
|
||||
this.$slots.subtitle
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-card.v-card--material
|
||||
> .v-card__title
|
||||
> .v-card--material__title
|
||||
flex: 1 1 auto
|
||||
word-break: break-word
|
||||
</style>
|
||||
93
Yi.Vue/src/components/MaterialChartCard.vue
Normal file
93
Yi.Vue/src/components/MaterialChartCard.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<material-card
|
||||
v-bind="$attrs"
|
||||
class="v-card--material-chart"
|
||||
full-header
|
||||
>
|
||||
<template #heading>
|
||||
<div class="pa-4">
|
||||
<chartist
|
||||
:data="data"
|
||||
:event-handlers="eventHandlers"
|
||||
:options="options"
|
||||
:ratio="ratio"
|
||||
:responsive-options="responsiveOptions"
|
||||
:type="type"
|
||||
style="max-height: 150px;"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #subtitle>
|
||||
<slot name="subtitle" />
|
||||
</template>
|
||||
|
||||
<slot />
|
||||
|
||||
<template #actions>
|
||||
<slot name="actions" />
|
||||
</template>
|
||||
</material-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MaterialChartCard',
|
||||
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
eventHandlers: {
|
||||
type: Array,
|
||||
default: () => ([]),
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
ratio: String,
|
||||
responsiveOptions: {
|
||||
type: Array,
|
||||
default: () => ([]),
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: v => ['Bar', 'Line', 'Pie'].includes(v),
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-card--material-chart
|
||||
p
|
||||
color: #999
|
||||
|
||||
.v-card--material__sheet
|
||||
max-height: 185px
|
||||
width: 100%
|
||||
|
||||
.ct-label
|
||||
color: rgba(255, 255, 255, 1)
|
||||
opacity: .7
|
||||
font-size: 0.875rem
|
||||
font-weight: 300
|
||||
|
||||
.ct-grid
|
||||
stroke: hsla(0,0%,100%,.2)
|
||||
|
||||
.ct-series-a .ct-point,
|
||||
.ct-series-a .ct-line,
|
||||
.ct-series-a .ct-bar,
|
||||
.ct-series-a .ct-slice-donut
|
||||
stroke: rgba(255,255,255,.8)
|
||||
|
||||
.ct-series-a .ct-slice-pie,
|
||||
.ct-series-a .ct-area
|
||||
fill: rgba(255,255,255,.4)
|
||||
</style>
|
||||
78
Yi.Vue/src/components/MaterialSnackbar.vue
Normal file
78
Yi.Vue/src/components/MaterialSnackbar.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<v-snackbar
|
||||
v-model="internalValue"
|
||||
class="v-snackbar--material"
|
||||
v-bind="{
|
||||
...$attrs,
|
||||
'color': 'transparent'
|
||||
}"
|
||||
>
|
||||
<material-alert
|
||||
v-model="internalValue"
|
||||
:color="$attrs.color"
|
||||
:dismissible="dismissible"
|
||||
:type="type"
|
||||
class="ma-0"
|
||||
dark
|
||||
>
|
||||
<slot />
|
||||
</material-alert>
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MaterialSnackbar',
|
||||
|
||||
props: {
|
||||
dismissible: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
value: Boolean,
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
internalValue: this.value,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
internalValue (val, oldVal) {
|
||||
if (val === oldVal) return
|
||||
|
||||
this.$emit('input', val)
|
||||
},
|
||||
value (val, oldVal) {
|
||||
if (val === oldVal) return
|
||||
|
||||
this.internalValue = val
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-snackbar--material
|
||||
margin-top: 32px
|
||||
margin-bottom: 32px
|
||||
|
||||
.v-alert
|
||||
padding: 32px 16px
|
||||
|
||||
.v-alert--material,
|
||||
.v-snack__wrapper
|
||||
border-radius: 4px
|
||||
|
||||
.v-snack__content
|
||||
overflow: visible
|
||||
padding: 0
|
||||
|
||||
.v-snack__action
|
||||
display: none
|
||||
</style>
|
||||
39
Yi.Vue/src/components/MaterialStatsCard.vue
Normal file
39
Yi.Vue/src/components/MaterialStatsCard.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<material-card
|
||||
class="v-card--material-stats"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<template #subtitle>
|
||||
<div
|
||||
class="text-right text-h3 v-card__subtitle--material-stats"
|
||||
v-text="value"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<slot name="actions" />
|
||||
</template>
|
||||
|
||||
<slot />
|
||||
</material-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MaterialStatCard',
|
||||
|
||||
props: { value: String },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-card--material-stats.v-card--material .v-card--material__title
|
||||
color: #999999
|
||||
font-size: .875rem !important
|
||||
margin-left: auto
|
||||
text-align: right
|
||||
|
||||
.v-card__subtitle--material-stats
|
||||
color: #3C4858
|
||||
</style>
|
||||
@@ -102,6 +102,7 @@
|
||||
<script>
|
||||
import itemApi from './TableApi.js'
|
||||
export default {
|
||||
name: 'Tables',
|
||||
props: {
|
||||
defaultItem: {
|
||||
type: Object,
|
||||
@@ -1,4 +1,4 @@
|
||||
import myaxios from '@/utils/myaxios'
|
||||
import myaxios from '@/util/myaxios'
|
||||
export default {
|
||||
getItem(url) {
|
||||
return myaxios({
|
||||
37
Yi.Vue/src/components/ViewIntro.vue
Normal file
37
Yi.Vue/src/components/ViewIntro.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<section class="mb-12 text-center">
|
||||
<h1
|
||||
class="mb-2 text-h3"
|
||||
v-text="heading"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="link"
|
||||
class="text-body-2 font-weight-light"
|
||||
>
|
||||
Please checkout the <a
|
||||
:href="`https://vuetifyjs.com/en/${link}`"
|
||||
class="text-decoration-none secondary--text"
|
||||
target="_blank"
|
||||
>full documentation</a>
|
||||
</div>
|
||||
|
||||
<v-responsive
|
||||
class="text-center mx-auto text-body-1 font-weight-light"
|
||||
max-width="400"
|
||||
>
|
||||
<slot />
|
||||
</v-responsive>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ViewIntro',
|
||||
|
||||
props: {
|
||||
heading: String,
|
||||
link: String,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
29
Yi.Vue/src/components/app/BarItem.vue
Normal file
29
Yi.Vue/src/components/app/BarItem.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import { VHover, VListItem } from 'vuetify/lib'
|
||||
|
||||
export default {
|
||||
name: 'AppBarItem',
|
||||
|
||||
render (h) {
|
||||
return h(VHover, {
|
||||
scopedSlots: {
|
||||
default: ({ hover }) => {
|
||||
return h(VListItem, {
|
||||
attrs: this.$attrs,
|
||||
class: {
|
||||
'black--text': !hover,
|
||||
'white--text secondary elevation-12': hover,
|
||||
},
|
||||
props: {
|
||||
activeClass: '',
|
||||
dark: hover,
|
||||
link: true,
|
||||
...this.$attrs,
|
||||
},
|
||||
}, this.$slots.default)
|
||||
},
|
||||
},
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
22
Yi.Vue/src/components/app/Btn.vue
Normal file
22
Yi.Vue/src/components/app/Btn.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<v-btn
|
||||
:color="color"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<slot />
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppBtn',
|
||||
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
12
Yi.Vue/src/components/app/Card.vue
Normal file
12
Yi.Vue/src/components/app/Card.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<v-card
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<slot />
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default { name: 'AppCard' }
|
||||
</script>
|
||||
42
Yi.Vue/src/components/app/Tabs.vue
Normal file
42
Yi.Vue/src/components/app/Tabs.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<v-tabs
|
||||
:active-class="`${color} ${theme.isDark ? 'black' : 'white'}--text`"
|
||||
class="v-tabs--pill"
|
||||
hide-slider
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<slot />
|
||||
|
||||
<slot name="items" />
|
||||
</v-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppTabs',
|
||||
|
||||
inject: ['theme'],
|
||||
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-tabs--pill
|
||||
.v-tab,
|
||||
.v-tab:before
|
||||
border-radius: 24px
|
||||
|
||||
&.v-tabs--icons-and-text
|
||||
&:not(.v-tabs--vertical) > .v-tabs-bar
|
||||
height: 100px
|
||||
.v-tab,
|
||||
.v-tab:before
|
||||
border-radius: 4px
|
||||
</style>
|
||||
79
Yi.Vue/src/layouts/default/AppBar.vue
Normal file
79
Yi.Vue/src/layouts/default/AppBar.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<v-app-bar
|
||||
id="default-app-bar"
|
||||
app
|
||||
absolute
|
||||
class="v-bar--underline"
|
||||
color="transparent"
|
||||
:clipped-left="$vuetify.rtl"
|
||||
:clipped-right="!$vuetify.rtl"
|
||||
height="70"
|
||||
flat
|
||||
>
|
||||
<v-app-bar-nav-icon
|
||||
class="hidden-md-and-up"
|
||||
@click="drawer = !drawer"
|
||||
/>
|
||||
|
||||
<default-drawer-toggle class="hidden-sm-and-down" />
|
||||
|
||||
<v-toolbar-title
|
||||
class="font-weight-light text-h5"
|
||||
v-text="name"
|
||||
/>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<default-search class="hidden-sm-and-down" />
|
||||
|
||||
<default-go-home />
|
||||
|
||||
<default-notifications />
|
||||
|
||||
<default-account />
|
||||
</v-app-bar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
// import { get, sync } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
data:()=>({
|
||||
drawer:true,
|
||||
name:"测试系统"
|
||||
}),
|
||||
name: 'DefaultBar',
|
||||
|
||||
components: {
|
||||
DefaultAccount: () => import(
|
||||
/* webpackChunkName: "default-account" */
|
||||
'./widgets/Account'
|
||||
),
|
||||
DefaultDrawerToggle: () => import(
|
||||
/* webpackChunkName: "default-drawer-toggle" */
|
||||
'./widgets/DrawerToggle'
|
||||
),
|
||||
DefaultGoHome: () => import(
|
||||
/* webpackChunkName: "default-go-home" */
|
||||
'./widgets/GoHome'
|
||||
),
|
||||
DefaultNotifications: () => import(
|
||||
/* webpackChunkName: "default-notifications" */
|
||||
'./widgets/Notifications'
|
||||
),
|
||||
DefaultSearch: () => import(
|
||||
/* webpackChunkName: "default-search" */
|
||||
'./widgets/Search'
|
||||
),
|
||||
},
|
||||
|
||||
// computed: {
|
||||
// ...sync('app', [
|
||||
// 'drawer',
|
||||
// 'mini',
|
||||
// ]),
|
||||
// name: get('route/name'),
|
||||
// },
|
||||
}
|
||||
</script>
|
||||
170
Yi.Vue/src/layouts/default/Drawer.vue
Normal file
170
Yi.Vue/src/layouts/default/Drawer.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<v-navigation-drawer
|
||||
id="default-drawer"
|
||||
v-model="drawer"
|
||||
:dark="dark"
|
||||
:right="$vuetify.rtl"
|
||||
:src="drawerImage ? image : ''"
|
||||
:mini-variant.sync="mini"
|
||||
mini-variant-width="80"
|
||||
app
|
||||
width="260"
|
||||
>
|
||||
<template
|
||||
v-if="drawerImage"
|
||||
#img="props"
|
||||
>
|
||||
<v-img
|
||||
:key="image"
|
||||
:gradient="gradient"
|
||||
v-bind="props"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<div class="px-2">
|
||||
<default-drawer-header />
|
||||
|
||||
<v-divider class="mx-3 mb-2" />
|
||||
|
||||
<default-list :items="items" />
|
||||
</div>
|
||||
|
||||
<template #append>
|
||||
<div class="pa-4 text-center">
|
||||
<app-btn
|
||||
class="text-none mb-4"
|
||||
color="white"
|
||||
href="https://vuetifyjs.com"
|
||||
small
|
||||
text
|
||||
>
|
||||
Documentation
|
||||
</app-btn>
|
||||
|
||||
<app-btn
|
||||
block
|
||||
class="text-none"
|
||||
color="secondary"
|
||||
href="https://store.vuetifyjs.com/products/vuetify-material-dashboard-pro"
|
||||
>
|
||||
<v-icon left>
|
||||
mdi-package-up
|
||||
</v-icon>
|
||||
|
||||
Upgrade to Pro
|
||||
</app-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="pt-12" />
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
// import { get, sync } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
data:()=>({
|
||||
gradient: [
|
||||
'rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)',
|
||||
'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)',
|
||||
'rgba(244, 67, 54, .8), rgba(244, 67, 54, .8)',
|
||||
],
|
||||
images: [
|
||||
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg',
|
||||
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-2.jpg',
|
||||
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-3.jpg',
|
||||
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-4.jpg',
|
||||
],
|
||||
dark:null,
|
||||
mini: false,
|
||||
items: [
|
||||
{
|
||||
title: "Dashboard",
|
||||
icon: "mdi-view-dashboard",
|
||||
to: "/"
|
||||
},
|
||||
{
|
||||
title: "User Profile",
|
||||
icon: "mdi-account",
|
||||
to: "/components/profile/",
|
||||
},
|
||||
{
|
||||
title: "Regular Tables",
|
||||
icon: "mdi-clipboard-outline",
|
||||
to: "/tables/regular/",
|
||||
},
|
||||
{
|
||||
title: "Typography",
|
||||
icon: "mdi-format-font",
|
||||
to: "/components/typography/",
|
||||
},
|
||||
{
|
||||
title: "Icons",
|
||||
icon: "mdi-chart-bubble",
|
||||
to: "/components/icons/",
|
||||
},
|
||||
{
|
||||
title: "Google Maps",
|
||||
icon: "mdi-map-marker",
|
||||
to: "/maps/google/",
|
||||
},
|
||||
{
|
||||
title: "Notifications",
|
||||
icon: "mdi-bell",
|
||||
to: "/components/notifications/",
|
||||
},
|
||||
],
|
||||
}),
|
||||
name: 'DefaultDrawer',
|
||||
|
||||
components: {
|
||||
DefaultDrawerHeader: () => import(
|
||||
/* webpackChunkName: "default-drawer-header" */
|
||||
'./widgets/DrawerHeader'
|
||||
),
|
||||
DefaultList: () => import(
|
||||
/* webpackChunkName: "default-list" */
|
||||
'./List'
|
||||
),
|
||||
},
|
||||
|
||||
// computed: {
|
||||
// ...get('user', [
|
||||
// 'dark',
|
||||
// 'gradient',
|
||||
// 'image',
|
||||
// ]),
|
||||
// ...get('app', [
|
||||
// 'items',
|
||||
// 'version',
|
||||
// ]),
|
||||
// ...sync('app', [
|
||||
// 'drawer',
|
||||
// 'drawerImage',
|
||||
// 'mini',
|
||||
// ]),
|
||||
// },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
#default-drawer
|
||||
.v-list-item
|
||||
margin-bottom: 8px
|
||||
|
||||
.v-list-item::before,
|
||||
.v-list-item::after
|
||||
display: none
|
||||
|
||||
.v-list-group__header__prepend-icon,
|
||||
.v-list-item__icon
|
||||
margin-top: 12px
|
||||
margin-bottom: 12px
|
||||
margin-left: 4px
|
||||
|
||||
&.v-navigation-drawer--mini-variant
|
||||
.v-list-item
|
||||
justify-content: flex-start !important
|
||||
</style>
|
||||
22
Yi.Vue/src/layouts/default/Footer.vue
Normal file
22
Yi.Vue/src/layouts/default/Footer.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<v-footer
|
||||
id="default-footer"
|
||||
color="transparent"
|
||||
absolute
|
||||
app
|
||||
inset
|
||||
>
|
||||
<links />
|
||||
</v-footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import Links from '@/components/Links'
|
||||
|
||||
export default {
|
||||
name: 'DefaultFooter',
|
||||
|
||||
components: { Links },
|
||||
}
|
||||
</script>
|
||||
42
Yi.Vue/src/layouts/default/Index.vue
Normal file
42
Yi.Vue/src/layouts/default/Index.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<default-bar />
|
||||
|
||||
<default-drawer />
|
||||
|
||||
<default-view />
|
||||
|
||||
<default-footer />
|
||||
|
||||
<!-- <default-settings /> -->
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefaultLayout',
|
||||
|
||||
components: {
|
||||
DefaultBar: () => import(
|
||||
/* webpackChunkName: "default-app-bar" */
|
||||
'./AppBar'
|
||||
),
|
||||
DefaultDrawer: () => import(
|
||||
/* webpackChunkName: "default-drawer" */
|
||||
'./Drawer'
|
||||
),
|
||||
DefaultFooter: () => import(
|
||||
/* webpackChunkName: "default-footer" */
|
||||
'./Footer'
|
||||
),
|
||||
// DefaultSettings: () => import(
|
||||
// /* webpackChunkName: "default-settings" */
|
||||
// './Settings'
|
||||
// ),
|
||||
DefaultView: () => import(
|
||||
/* webpackChunkName: "default-view" */
|
||||
'./View'
|
||||
),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -24,10 +24,12 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefaultList',
|
||||
|
||||
components: {
|
||||
DefaultListGroup: () => import('./ListGroup'),
|
||||
DefaultListItem: () => import('./ListItem'),
|
||||
},
|
||||
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<v-list-group
|
||||
|
||||
|
||||
:group="group"
|
||||
:prepend-icon="item.icon"
|
||||
eager
|
||||
v-bind="$attrs"
|
||||
@@ -42,6 +42,7 @@
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
// import { get } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
name: 'DefaultListGroup',
|
||||
@@ -58,10 +59,10 @@
|
||||
},
|
||||
|
||||
computed: {
|
||||
// gradient: get('user/drawer@gradient'),
|
||||
group () {
|
||||
return this.genGroup(this.item.items)
|
||||
},
|
||||
|
||||
// group () {
|
||||
// return this.genGroup(this.item.items)
|
||||
// },
|
||||
title () {
|
||||
const matches = this.item.title.match(/\b(\w)/g)
|
||||
|
||||
13
Yi.Vue/src/layouts/default/View.vue
Normal file
13
Yi.Vue/src/layouts/default/View.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<v-main>
|
||||
<v-container fluid>
|
||||
<router-view :key="$route.path" />
|
||||
</v-container>
|
||||
</v-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefaultView',
|
||||
}
|
||||
</script>
|
||||
59
Yi.Vue/src/layouts/default/widgets/Account.vue
Normal file
59
Yi.Vue/src/layouts/default/widgets/Account.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<v-menu
|
||||
bottom
|
||||
left
|
||||
min-width="200"
|
||||
offset-y
|
||||
origin="top right"
|
||||
transition="scale-transition"
|
||||
>
|
||||
<template v-slot:activator="{ attrs, on }">
|
||||
<v-btn
|
||||
class="ml-2"
|
||||
min-width="0"
|
||||
text
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-list
|
||||
:tile="false"
|
||||
flat
|
||||
nav
|
||||
>
|
||||
<template v-for="(p, i) in profile">
|
||||
<v-divider
|
||||
v-if="p.divider"
|
||||
:key="`divider-${i}`"
|
||||
class="mb-2 mt-2"
|
||||
/>
|
||||
|
||||
<app-bar-item
|
||||
v-else
|
||||
:key="`item-${i}`"
|
||||
to="/"
|
||||
>
|
||||
<v-list-item-title v-text="p.title" />
|
||||
</app-bar-item>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefaultAccount',
|
||||
|
||||
data: () => ({
|
||||
profile: [
|
||||
{ title: 'Profile' },
|
||||
{ title: 'Settings' },
|
||||
{ divider: true },
|
||||
{ title: 'Log out' },
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
39
Yi.Vue/src/layouts/default/widgets/AccountSettings.vue
Normal file
39
Yi.Vue/src/layouts/default/widgets/AccountSettings.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<default-list
|
||||
:items="items"
|
||||
class="mb-n2"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefaultAccountSettings',
|
||||
|
||||
components: {
|
||||
DefaultList: () => import(
|
||||
/* webpackChunkName: "default-list" */
|
||||
'../List'
|
||||
),
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
items: [
|
||||
{
|
||||
title: 'John Leider',
|
||||
icon: 'mdi-vuetify',
|
||||
items: [
|
||||
{
|
||||
title: 'My Profile',
|
||||
},
|
||||
{
|
||||
title: 'Edit Profile',
|
||||
},
|
||||
{
|
||||
title: 'Settings',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
29
Yi.Vue/src/layouts/default/widgets/DrawerHeader.vue
Normal file
29
Yi.Vue/src/layouts/default/widgets/DrawerHeader.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<v-list-item class="mb-0 justify-space-between pl-3">
|
||||
<v-list-item-avatar>
|
||||
<v-img
|
||||
:src="
|
||||
require('@/assets/vmd.svg')"
|
||||
/>
|
||||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-content class="pl-2">
|
||||
<v-list-item-title class="text-h3">
|
||||
<strong class="mr-1 font-weight-black">VMD</strong>
|
||||
|
||||
<span class="primary--text">FREE</span>
|
||||
</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
// import { get } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
name: 'DefaultDrawerHeader',
|
||||
|
||||
// computed: { version: get('app/version') },
|
||||
}
|
||||
</script>
|
||||
27
Yi.Vue/src/layouts/default/widgets/DrawerToggle.vue
Normal file
27
Yi.Vue/src/layouts/default/widgets/DrawerToggle.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<v-btn
|
||||
class="ml-3 mr-4"
|
||||
elevation="1"
|
||||
fab
|
||||
small
|
||||
@click="mini = !mini"
|
||||
>
|
||||
<v-icon>
|
||||
{{ mini ? 'mdi-format-list-bulleted' : 'mdi-dots-vertical' }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
// import { sync } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
name: 'DefaultDrawerToggle',
|
||||
|
||||
computed: {
|
||||
|
||||
// mini: sync('app/mini'),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
17
Yi.Vue/src/layouts/default/widgets/GoHome.vue
Normal file
17
Yi.Vue/src/layouts/default/widgets/GoHome.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<v-btn
|
||||
class="ml-2"
|
||||
min-width="0"
|
||||
text
|
||||
to="/"
|
||||
exact
|
||||
>
|
||||
<v-icon>mdi-view-dashboard</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefaultGoHome',
|
||||
}
|
||||
</script>
|
||||
62
Yi.Vue/src/layouts/default/widgets/Notifications.vue
Normal file
62
Yi.Vue/src/layouts/default/widgets/Notifications.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<v-menu
|
||||
bottom
|
||||
left
|
||||
offset-y
|
||||
origin="top right"
|
||||
transition="scale-transition"
|
||||
>
|
||||
<template v-slot:activator="{ attrs, on }">
|
||||
<v-btn
|
||||
class="ml-2"
|
||||
min-width="0"
|
||||
text
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
<v-badge
|
||||
bordered
|
||||
color="red"
|
||||
overlap
|
||||
>
|
||||
<template v-slot:badge>
|
||||
<span>5</span>
|
||||
</template>
|
||||
|
||||
<v-icon>mdi-bell</v-icon>
|
||||
</v-badge>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-list
|
||||
flat
|
||||
nav
|
||||
>
|
||||
<app-bar-item
|
||||
v-for="(n, i) in notifications"
|
||||
:key="i"
|
||||
link
|
||||
>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{ n }} </v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</app-bar-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefaultNotifications',
|
||||
|
||||
data: () => ({
|
||||
notifications: [
|
||||
'Mike John Responded to your email',
|
||||
'You have 5 new tasks',
|
||||
'You\'re now friends with Andrew',
|
||||
'Another Notification',
|
||||
'Another one',
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
31
Yi.Vue/src/layouts/default/widgets/Search.vue
Normal file
31
Yi.Vue/src/layouts/default/widgets/Search.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<v-text-field
|
||||
placeholder="Search"
|
||||
class="mr-16"
|
||||
color="secondary"
|
||||
hide-details
|
||||
style="max-width: 220px"
|
||||
>
|
||||
<template
|
||||
v-if="$vuetify.breakpoint.mdAndUp"
|
||||
v-slot:append-outer
|
||||
>
|
||||
<v-btn
|
||||
class="mt-n2 ml-n2"
|
||||
fab
|
||||
small
|
||||
elevation="2"
|
||||
height="44"
|
||||
width="44"
|
||||
>
|
||||
<v-icon>mdi-magnify</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefaultSearch',
|
||||
}
|
||||
</script>
|
||||
@@ -2,7 +2,7 @@ import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import vuetify from './plugins/vuetify'
|
||||
|
||||
import './plugins'
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
20
Yi.Vue/src/plugins/app.js
Normal file
20
Yi.Vue/src/plugins/app.js
Normal file
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* plugins/app.js
|
||||
*
|
||||
* Automatically loads and bootstraps files
|
||||
* in the `./src/components/` folder.
|
||||
*/
|
||||
|
||||
// Imports
|
||||
import Vue from 'vue'
|
||||
|
||||
const requireComponent = require.context('@/components', true, /\.vue$/)
|
||||
|
||||
for (const file of requireComponent.keys()) {
|
||||
const componentConfig = requireComponent(file)
|
||||
|
||||
Vue.component(
|
||||
componentConfig.default.name,
|
||||
componentConfig.default || componentConfig,
|
||||
)
|
||||
}
|
||||
4
Yi.Vue/src/plugins/chartist.js
Normal file
4
Yi.Vue/src/plugins/chartist.js
Normal file
@@ -0,0 +1,4 @@
|
||||
import Vue from 'vue'
|
||||
import 'chartist/dist/chartist.min.css'
|
||||
|
||||
Vue.use(require('vue-chartist'))
|
||||
6
Yi.Vue/src/plugins/index.js
Normal file
6
Yi.Vue/src/plugins/index.js
Normal file
@@ -0,0 +1,6 @@
|
||||
// Automatically included in './src/main.js'
|
||||
|
||||
import './app'
|
||||
import './chartist'
|
||||
// import './webfontloader'
|
||||
// import './vue-meta'
|
||||
30
Yi.Vue/src/plugins/vuetify.js
Normal file
30
Yi.Vue/src/plugins/vuetify.js
Normal file
@@ -0,0 +1,30 @@
|
||||
// Vuetify Documentation https://vuetifyjs.com
|
||||
|
||||
import Vue from 'vue'
|
||||
import Vuetify from 'vuetify/lib/framework'
|
||||
import ripple from 'vuetify/lib/directives/ripple'
|
||||
|
||||
Vue.use(Vuetify, { directives: { ripple } })
|
||||
|
||||
const theme = {
|
||||
primary: '#E91E63',
|
||||
secondary: '#9C27b0',
|
||||
accent: '#e91e63',
|
||||
info: '#00CAE3',
|
||||
success: '#4CAF50',
|
||||
warning: '#FB8C00',
|
||||
error: '#FF5252',
|
||||
}
|
||||
|
||||
export default new Vuetify({
|
||||
breakpoint: { mobileBreakpoint: 960 },
|
||||
icons: {
|
||||
values: { expand: 'mdi-menu-down' },
|
||||
},
|
||||
theme: {
|
||||
themes: {
|
||||
dark: theme,
|
||||
light: theme,
|
||||
},
|
||||
},
|
||||
})
|
||||
29
Yi.Vue/src/router/index.js
Normal file
29
Yi.Vue/src/router/index.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import { trailingSlash } from '@/util/helpers'
|
||||
import {
|
||||
layout,
|
||||
route,
|
||||
} from '@/util/routes'
|
||||
Vue.use(VueRouter)
|
||||
|
||||
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
scrollBehavior: (to, from, savedPosition) => {
|
||||
if (to.hash) return { selector: to.hash }
|
||||
if (savedPosition) return savedPosition
|
||||
|
||||
return { x: 0, y: 0 }
|
||||
},
|
||||
routes: [layout('Default', [
|
||||
route('Dashboard'),
|
||||
route('UserProfile', null, 'components/profile'),
|
||||
])]
|
||||
})
|
||||
router.beforeEach((to, from, next) => {
|
||||
return to.path.endsWith('/') ? next() : next(trailingSlash(to.path))
|
||||
})
|
||||
export default router
|
||||
26
Yi.Vue/src/styles/overrides.sass
Normal file
26
Yi.Vue/src/styles/overrides.sass
Normal file
@@ -0,0 +1,26 @@
|
||||
.text-mono
|
||||
font-family: monospace
|
||||
|
||||
// Helpers
|
||||
.flex-1-1-auto
|
||||
flex: 1 1 auto !important
|
||||
|
||||
.flex-1-0-auto
|
||||
flex: 1 0 auto !important
|
||||
|
||||
.flex-0-1-auto
|
||||
flex: 0 1 auto !important
|
||||
|
||||
.flex-0-0-auto
|
||||
flex: 0 0 auto !important
|
||||
|
||||
.position-relative
|
||||
position: relative !important
|
||||
|
||||
.overflow-y-scroll
|
||||
overflow-y: scroll
|
||||
|
||||
table
|
||||
> thead > tr > th,
|
||||
> tbody > tr > td
|
||||
font-weight: 300 !important
|
||||
106
Yi.Vue/src/styles/variables.scss
Normal file
106
Yi.Vue/src/styles/variables.scss
Normal file
@@ -0,0 +1,106 @@
|
||||
// reduce button default elevation
|
||||
// default background color is #EEEEEE
|
||||
|
||||
$btn-sizes: (
|
||||
'small': 28,
|
||||
'default': 41,
|
||||
'large': 54
|
||||
);
|
||||
|
||||
$btn-font-sizes: (
|
||||
'default': .75rem
|
||||
);
|
||||
|
||||
$btn-font-weight: 400;
|
||||
$btn-letter-spacing: normal;
|
||||
$material-light: (
|
||||
'background': #EEEEEE,
|
||||
'text': (
|
||||
'primary': #333333,
|
||||
'secondary': #999999
|
||||
)
|
||||
);
|
||||
$btn-icon-font-size: 1.0625rem !important;
|
||||
|
||||
$list-item-min-height: 48px;
|
||||
|
||||
$blockquote-font-size: 1.25rem;
|
||||
|
||||
$card-border-radius: 6px;
|
||||
$card-text-font-weight: 300;
|
||||
$card-elevation: 1;
|
||||
|
||||
$data-table-regular-header-font-size: 1.0625rem;
|
||||
|
||||
$shadow-key-umbra: (
|
||||
1: (0 1px 4px 0 rgba(0,0,0,.14)),
|
||||
12: (0 16px 38px -12px rgba(0,0,0,.56))
|
||||
);
|
||||
|
||||
$shadow-key-penumbra: (
|
||||
1: (0 0 0 0 rgba(0,0,0,0)),
|
||||
12: (0 4px 25px 0 rgba(0,0,0,.12))
|
||||
);
|
||||
|
||||
$shadow-key-ambient: (
|
||||
1: (0 0 0 0 rgba(0,0,0,0)),
|
||||
12: (0 8px 10px -5px rgba(0,0,0,.2))
|
||||
);
|
||||
|
||||
$headings: (
|
||||
'h1': (
|
||||
'size': 3.3125rem,
|
||||
'line-height': 1.15em,
|
||||
'weight': 300
|
||||
),
|
||||
'h2': (
|
||||
'size': 2.25rem,
|
||||
'line-height': 1.5em,
|
||||
'weight': 300
|
||||
),
|
||||
'h3': (
|
||||
'size': 1.5625rem,
|
||||
'line-height': 1.4em,
|
||||
'weight': 300
|
||||
),
|
||||
'h4': (
|
||||
'size': 1.125rem,
|
||||
'line-height': 1.4em,
|
||||
'weight': 300
|
||||
),
|
||||
'h5': (
|
||||
'size': 1.0625rem,
|
||||
'line-height': 1.4em,
|
||||
'weight': 300
|
||||
),
|
||||
'h6': (
|
||||
'size': .75rem,
|
||||
'line-height': 1.5em,
|
||||
'text-transform': uppercase,
|
||||
'weight': 500
|
||||
),
|
||||
'subtitle-1': (
|
||||
'size': 0.875rem,
|
||||
'weight': 300
|
||||
),
|
||||
'subtitle-2': (
|
||||
'size': 0.875rem,
|
||||
'line-height': 1.5em !important,
|
||||
'weight': 300
|
||||
),
|
||||
'caption': (
|
||||
'size': 0.8125rem,
|
||||
'weight': 300
|
||||
),
|
||||
'overline': (
|
||||
'letter-spacing': normal,
|
||||
'line-height': 0.625rem,
|
||||
'size': 0.625rem,
|
||||
'weight': 500
|
||||
)
|
||||
);
|
||||
|
||||
// Tabs
|
||||
$tab-font-size: .775rem;
|
||||
$tab-font-weight: 500;
|
||||
$tabs-item-letter-spacing: normal;
|
||||
11
Yi.Vue/src/util/globals.js
Normal file
11
Yi.Vue/src/util/globals.js
Normal file
@@ -0,0 +1,11 @@
|
||||
const EN_LOCALE_ONLY = process.env.EN_LOCALE_ONLY === 'true'
|
||||
const IN_BROWSER = typeof window !== 'undefined'
|
||||
const IS_DEBUG = process.env.DEBUG === 'true'
|
||||
const IS_PROD = process.env.NODE_ENV === 'production'
|
||||
|
||||
module.exports = {
|
||||
EN_LOCALE_ONLY,
|
||||
IN_BROWSER,
|
||||
IS_DEBUG,
|
||||
IS_PROD,
|
||||
}
|
||||
11
Yi.Vue/src/util/helpers.js
Normal file
11
Yi.Vue/src/util/helpers.js
Normal file
@@ -0,0 +1,11 @@
|
||||
export function leadingSlash (str) {
|
||||
return str.startsWith('/') ? str : '/' + str
|
||||
}
|
||||
|
||||
export function trailingSlash (str) {
|
||||
return str.endsWith('/') ? str : str + '/'
|
||||
}
|
||||
|
||||
export const wait = timeout => {
|
||||
return new Promise(resolve => setTimeout(resolve, timeout))
|
||||
}
|
||||
@@ -25,12 +25,12 @@ myaxios.interceptors.response.use(function(response) {
|
||||
return resp;
|
||||
}, function(error) {
|
||||
const resp = error.response.data
|
||||
if (resp.code == undefined && resp.msg == undefined) {
|
||||
alert(`错误代码：无，原因：与服务器失去连接`)
|
||||
} else if (resp.code != 200) {
|
||||
alert(`错误代码：${resp.code}，原因：${resp.msg}`)
|
||||
}
|
||||
// store.dispatch("closeLoad");
|
||||
// if (resp.code == undefined && resp.msg == undefined) {
|
||||
// alert(`错误代码：无，原因：与服务器失去连接`)
|
||||
// } else if (resp.code != 200) {
|
||||
// alert(`错误代码：${resp.code}，原因：${resp.msg}`)
|
||||
// }
|
||||
// store.dispatch("closeLoad");
|
||||
return Promise.reject(error);
|
||||
});
|
||||
export default myaxios
|
||||
76
Yi.Vue/src/util/routes.js
Normal file
76
Yi.Vue/src/util/routes.js
Normal file
@@ -0,0 +1,76 @@
|
||||
// Imports
|
||||
import { kebabCase } from 'lodash'
|
||||
import { leadingSlash, trailingSlash } from '@/util/helpers'
|
||||
|
||||
export function abort(code = 404) {
|
||||
return {
|
||||
name: 'FourOhFour',
|
||||
path: '*',
|
||||
component: () => error(code),
|
||||
}
|
||||
}
|
||||
|
||||
export function error(code = 404) {
|
||||
return import (
|
||||
/* webpackChunkName: "error-[request]" */
|
||||
`@/views/${code}.vue`
|
||||
)
|
||||
}
|
||||
|
||||
export function layout(layout = 'Default', children, path = '') {
|
||||
const dir = kebabCase(layout)
|
||||
|
||||
return {
|
||||
children,
|
||||
component: () =>
|
||||
import (
|
||||
/* webpackChunkName: "layout-[request]" */
|
||||
`@/layouts/${dir}/Index`
|
||||
),
|
||||
path,
|
||||
}
|
||||
}
|
||||
|
||||
export function redirect(
|
||||
path = '*',
|
||||
rhandler,
|
||||
) {
|
||||
if (typeof path === 'function') {
|
||||
rhandler = path
|
||||
path = '*'
|
||||
}
|
||||
|
||||
return {
|
||||
path,
|
||||
redirect: to => {
|
||||
const rpath = rhandler(to)
|
||||
const url = rpath !== '' ?
|
||||
leadingSlash(trailingSlash(rpath)) :
|
||||
rpath
|
||||
|
||||
return `/${url}`
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export function route(name, component, path = '') {
|
||||
component = Object(component) === component ?
|
||||
component :
|
||||
{ default: name.replace(' ', '') }
|
||||
|
||||
const components = {}
|
||||
|
||||
for (const [key, value] of Object.entries(component)) {
|
||||
components[key] = () =>
|
||||
import (
|
||||
/* webpackChunkName: "views-[request]" */
|
||||
`@/views/${value}`
|
||||
)
|
||||
}
|
||||
|
||||
return {
|
||||
name,
|
||||
components,
|
||||
path,
|
||||
}
|
||||
}
|
||||
@@ -1,23 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>导航栏</p>
|
||||
<v-card class="mx-auto" width="300">
|
||||
<ccList :items="items"></ccList>
|
||||
</v-card>
|
||||
|
||||
<p>表格</p>
|
||||
|
||||
<v-card class="mx-auto" width="1000">
|
||||
<v-card class="mx-auto" width="100%">
|
||||
<ccTable :defaultItem="defaultItem" :headers="headers" :axiosUrls="axiosUrls" ></ccTable>
|
||||
</v-card>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import ccList from "./List.vue";
|
||||
import ccTable from "./Table.vue"
|
||||
import ccTable from "../components/Table.vue"
|
||||
export default {
|
||||
components: {
|
||||
ccList,
|
||||
ccTable
|
||||
},
|
||||
data: () => ({
|
||||
4
Yi.Vue/src/views/UserProfile.vue
Normal file
4
Yi.Vue/src/views/UserProfile.vue
Normal file
@@ -0,0 +1,4 @@
|
||||
<template>
|
||||
<div>666</div>
|
||||
|
||||
</template>
|
||||
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-app-bar
|
||||
app
|
||||
color="primary"
|
||||
dark
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<v-img
|
||||
alt="Vuetify Logo"
|
||||
class="shrink mr-2"
|
||||
contain
|
||||
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
|
||||
transition="scale-transition"
|
||||
width="40"
|
||||
/>
|
||||
|
||||
<v-img
|
||||
alt="Vuetify Name"
|
||||
class="shrink mt-1 hidden-sm-and-down"
|
||||
contain
|
||||
min-width="100"
|
||||
src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
|
||||
width="100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn
|
||||
href="https://github.com/vuetifyjs/vuetify/releases/latest"
|
||||
target="_blank"
|
||||
text
|
||||
>
|
||||
<span class="mr-2">Latest Release</span>
|
||||
<v-icon>mdi-open-in-new</v-icon>
|
||||
</v-btn>
|
||||
</v-app-bar>
|
||||
|
||||
<v-main>
|
||||
<router-view/>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
|
||||
data: () => ({
|
||||
//
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
@@ -1,7 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import Vuetify from 'vuetify/lib/framework';
|
||||
|
||||
Vue.use(Vuetify);
|
||||
|
||||
export default new Vuetify({
|
||||
});
|
||||
@@ -1,31 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import Home from '../views/Home.vue'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home
|
||||
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: function() {
|
||||
return import ( /* webpackChunkName: "about" */ '../views/About.vue')
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<hello-world />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from '../components/HelloWorld'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
|
||||
components: {
|
||||
HelloWorld,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user