修改前端

Yi.Vue/src/layouts/default/AppBar.vue

@@ -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>

Yi.Vue/src/layouts/default/Drawer.vue

@@ -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>

Yi.Vue/src/layouts/default/Footer.vue

@@ -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>

Yi.Vue/src/layouts/default/Index.vue

@@ -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>

Yi.Vue/src/layouts/default/List.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-list
+    expand
+    nav
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <template v-for="(item, i) in items">
+      <default-list-group
+        v-if="item.items"
+        :key="`group-${i}`"
+        :item="item"
+      />
+
+      <default-list-item
+        v-else
+        :key="`item-${i}`"
+        :item="item"
+      />
+    </template>
+  </v-list>
+</template>
+
+<script>
+  export default {
+    name: 'DefaultList',
+
+    components: {
+      DefaultListGroup: () => import('./ListGroup'),
+      DefaultListItem: () => import('./ListItem'),
+    },
+
+    props: {
+      items: {
+        type: Array,
+        default: () => ([]),
+      },
+    },
+  }
+</script>

Yi.Vue/src/layouts/default/ListGroup.vue

@@ -0,0 +1,89 @@
+<template>
+  <v-list-group
+   
+
+    :prepend-icon="item.icon"
+    eager
+    v-bind="$attrs"
+  >
+    <template v-slot:activator>
+      <v-list-item-icon
+        v-if="!item.icon && !item.avatar"
+        class="text-caption text-uppercase text-center my-2 align-self-center"
+        style="margin-top: 14px"
+      >
+        {{ title }}
+      </v-list-item-icon>
+
+      <v-list-item-avatar v-if="item.avatar">
+        <v-img :src="item.avatar" />
+      </v-list-item-avatar>
+
+      <v-list-item-content v-if="item.title">
+        <v-list-item-title v-text="item.title" />
+      </v-list-item-content>
+    </template>
+
+    <template v-for="(child, i) in item.items">
+      <default-list-group
+        v-if="child.items"
+        :key="`sub-group-${i}`"
+        :item="child"
+      />
+
+      <default-list-item
+        v-if="!child.items"
+        :key="`child-${i}`"
+        :item="child"
+      />
+    </template>
+  </v-list-group>
+</template>
+
+<script>
+  // Utilities
+  // import { get } from 'vuex-pathify'
+
+  export default {
+    name: 'DefaultListGroup',
+
+    components: {
+      DefaultListItem: () => import('./ListItem'),
+    },
+
+    props: {
+      item: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
+
+    computed: {
+ 
+      // group () {
+      //   return this.genGroup(this.item.items)
+      // },
+      title () {
+        const matches = this.item.title.match(/\b(\w)/g)
+
+        return matches.join('')
+      },
+    },
+
+    methods: {
+      genGroup (items) {
+        return items.reduce((acc, cur) => {
+          if (!cur.to) return acc
+
+          acc.push(
+            cur.items
+              ? this.genGroup(cur.items)
+              : cur.to.slice(1, -1),
+          )
+
+          return acc
+        }, []).join('|')
+      },
+    },
+  }
+</script>

Yi.Vue/src/layouts/default/ListItem.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-list-item
+    :href="item.href"
+    :rel="item.href ? 'nofollow' : undefined"
+    :target="item.href ? '_blank' : undefined"
+    :to="item.to"
+    active-class="primary white--text"
+    link
+    class="py-1"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <v-list-item-icon
+      v-if="!item.icon"
+      class="text-caption text-uppercase justify-center ml-1 my-2 align-self-center"
+    >
+      {{ title }}
+    </v-list-item-icon>
+
+    <v-list-item-avatar v-if="item.avatar">
+      <v-img :src="item.avatar" />
+    </v-list-item-avatar>
+
+    <v-list-item-icon
+      v-if="item.icon"
+      class="my-2 align-self-center"
+    >
+      <v-icon v-text="item.icon" />
+    </v-list-item-icon>
+
+    <v-list-item-content v-if="item.title">
+      <v-list-item-title v-text="item.title" />
+    </v-list-item-content>
+  </v-list-item>
+</template>
+
+<script>
+  export default {
+    name: 'DefaultListItem',
+
+    props: {
+      item: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
+
+    computed: {
+      title () {
+        const matches = this.item.title.match(/\b(\w)/g)
+
+        return matches.join('')
+      },
+    },
+  }
+</script>

Yi.Vue/src/layouts/default/View.vue

@@ -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>

Yi.Vue/src/layouts/default/widgets/Account.vue

@@ -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>

Yi.Vue/src/layouts/default/widgets/AccountSettings.vue

@@ -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>

Yi.Vue/src/layouts/default/widgets/DrawerHeader.vue

@@ -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>

Yi.Vue/src/layouts/default/widgets/DrawerToggle.vue

@@ -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>

Yi.Vue/src/layouts/default/widgets/GoHome.vue

@@ -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>

Yi.Vue/src/layouts/default/widgets/Notifications.vue

@@ -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>

Yi.Vue/src/layouts/default/widgets/Search.vue

@@ -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>