修改前端

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>