添加前端

Yi.Vue2.x/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="$store.state.home.drawer = !$store.state.home.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: () => ({
+    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.Vue2.x/src/layouts/default/Drawer.vue

@@ -0,0 +1,141 @@
+<template>
+  <v-navigation-drawer
+    id="default-drawer"
+    v-model="$store.state.home.drawer"
+    :dark="dark"
+    :right="$vuetify.rtl"
+    :src="drawerImage ? image : ''"
+    :mini-variant.sync="$store.state.home.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" @click="logout">
+          <v-icon left> mdi-package-up </v-icon>
+
+          退出
+        </app-btn>
+      </div>
+    </template>
+
+    <div class="pt-12" />
+  </v-navigation-drawer>
+</template>
+
+<script>
+// Utilities
+// import { get, sync } from 'vuex-pathify'
+import userApi from "@/api/userApi";
+export default {
+  methods: {
+    init() {
+      userApi.GetMenuByHttpUser().then((resp) => {
+        this.items = resp.data.children;
+      });
+    },
+    logout() {
+      this.$store.dispatch("Logout").then((resp) => {
+        this.$router.push({ path: "/login" });
+      });
+    },
+  },
+  created() {
+    this.init();
+  },
+  computed: {
+    image() {
+      return this.$store.getters.image;
+    },
+        gradient() {
+      return this.$store.getters.gradient;
+    },
+              drawerImage()
+    {
+     return  this.$store.state.home.drawerImage;
+    },
+                  dark()
+    {
+     return  this.$store.state.user.dark;
+    }
+  },
+
+  data: () => ({
+
+    items: [],
+  }),
+  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.Vue2.x/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.Vue2.x/src/layouts/default/Index.vue

@@ -0,0 +1,43 @@
+<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.Vue2.x/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.children"
+        :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.Vue2.x/src/layouts/default/ListGroup.vue

@@ -0,0 +1,91 @@
+<template>
+  <v-list-group
+   
+:group="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.menu_name">
+        <v-list-item-title v-text="item.menu_name" />
+      </v-list-item-content>
+    </template>
+
+    <template v-for="(child, i) in item.children">
+      <default-list-group
+        v-if="child.children"
+        :key="`sub-group-${i}`"
+        :item="child"
+      />
+
+      <default-list-item
+        v-if="!child.children"
+        :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.children)
+      },
+      title () {
+        const matches = this.item.menu_name.match(/\b(\w)/g)
+if(matches!=null)
+{
+        return matches.join('')
+}
+      },
+    },
+
+    methods: {
+      genGroup (items) {
+        return items.reduce((acc, cur) => {
+          if (!cur.router) return acc
+
+          acc.push(
+            cur.children
+              ? this.genGroup(cur.children)
+              : cur.router.slice(1, -1),
+          )
+
+          return acc
+        }, []).join('|')
+      },
+    },
+  }
+</script>

Yi.Vue2.x/src/layouts/default/ListItem.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-list-item
+    :href="item.href"
+    :rel="item.href ? 'nofollow' : undefined"
+    :target="item.href ? '_blank' : undefined"
+    :to="item.router"
+    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.menu_name">
+      <v-list-item-title v-text="item.menu_name" />
+    </v-list-item-content>
+  </v-list-item>
+</template>
+
+<script>
+  export default {
+    name: 'DefaultListItem',
+
+    props: {
+      item: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
+
+    computed: {
+      title () {
+        const matches = this.item.menu_name.match(/\b(\w)/g)
+if(matches!=null)
+{
+        return matches.join('')
+}
+      },
+    },
+  }
+</script>

Yi.Vue2.x/src/layouts/default/Settings.vue

@@ -0,0 +1,303 @@
+<template>
+  <div id="settings-wrapper">
+    <v-card
+      id="settings"
+      class="py-2 px-4"
+      color="rgba(0, 0, 0, .3)"
+      dark
+      flat
+      link
+      min-width="100"
+      style="
+        position: fixed;
+        top: 115px;
+        right: -35px;
+        border-radius: 8px;
+        z-index: 1;
+      "
+    >
+      <v-icon large> mdi-cog </v-icon>
+    </v-card>
+
+    <v-menu
+      v-model="menu"
+      :close-on-content-click="false"
+      activator="#settings"
+      bottom
+      content-class="v-settings"
+      left
+      nudge-left="8"
+      offset-x
+      origin="top right"
+      transition="scale-transition"
+    >
+      <v-card class="text-center mb-0" width="300">
+        <v-card-text>
+          <strong class="mb-3 d-inline-block">主题颜色</strong>
+
+          <v-item-group v-model="color" mandatory>
+            <v-item v-for="color in colors" :key="color" :value="color">
+              <template v-slot="{ active, toggle }">
+                <v-avatar
+                  :class="active && 'v-settings__item--active'"
+                  :color="color"
+                  class="v-settings__item mx-1"
+                  size="25"
+                  @click="toggle"
+                />
+              </template>
+            </v-item>
+          </v-item-group>
+
+          <v-divider class="my-4 secondary" />
+
+          <strong class="mb-3 d-inline-block">图层颜色</strong>
+
+          <v-item-group v-model="gradient" mandatory>
+            <v-item
+              v-for="(scrim, index) in gradients"
+              :key="scrim"
+              :value="index"
+              class="mx-1"
+            >
+              <template v-slot="{ active, toggle }">
+                <v-avatar
+                  :class="active && 'v-settings__item--active'"
+                  :color="scrim"
+                  class="v-settings__item"
+                  size="24"
+                  @click="toggle"
+                />
+              </template>
+            </v-item>
+          </v-item-group>
+
+          <v-divider class="my-4 secondary" />
+
+          <v-row align="center" no-gutters>
+            <v-col cols="auto"> 主题模式 </v-col>
+
+            <v-spacer />
+
+            <v-col cols="auto">
+              <v-switch
+                v-model="$vuetify.theme.dark"
+                class="ma-0 pa-0"
+                color="secondary"
+                hide-details
+              />
+            </v-col>
+          </v-row>
+
+          <v-divider class="my-4 secondary" />
+
+          <v-row align="center" no-gutters>
+            <v-col cols="auto"> 迷你菜单 </v-col>
+
+            <v-spacer />
+
+            <v-col cols="auto">
+              <v-switch
+                v-model="$store.state.home.mini"
+                class="ma-0 pa-0"
+                color="secondary"
+                hide-details
+              />
+            </v-col>
+          </v-row>
+
+          <v-divider class="my-4 secondary" />
+
+          <v-row align="center" no-gutters>
+            <v-col cols="auto"> 图片菜单 </v-col>
+
+            <v-spacer />
+
+            <v-col cols="auto">
+              <v-switch
+                v-model="drawerImage"
+                class="ma-0 pa-0"
+                color="secondary"
+                hide-details
+              />
+            </v-col>
+          </v-row>
+
+          <v-divider class="my-4 secondary" />
+
+          <strong class="mb-3 d-inline-block">图片</strong>
+
+          <v-card :disabled="!drawerImage" flat>
+            <v-item-group
+              v-model="image"
+              class="d-flex justify-space-between mb-3"
+            >
+              <v-item
+                v-for="(img, index) in images"
+                :key="img"
+                :value="index"
+                class="mx-1"
+              >
+                <template v-slot="{ active, toggle }">
+                  <v-sheet
+                    :class="active && 'v-settings__item--active'"
+                    class="d-inline-block v-settings__item"
+                    @click="toggle"
+                  >
+                    <v-img :src="img" height="100" width="50" />
+                  </v-sheet>
+                </template>
+              </v-item>
+            </v-item-group>
+          </v-card>
+
+          <v-btn
+            block
+            class="mb-3"
+            color="grey darken-1"
+            dark
+            href="https://github.com/ccnetcore/yi"
+            rel="noopener"
+            target="_blank"
+          >
+            Github 地址
+          </v-btn>
+
+          <v-btn
+            block
+            color="info"
+            href="https://ccnetcore.com"
+            rel="noopener"
+            target="_blank"
+          >
+            加入我们
+          </v-btn>
+
+          <div class="my-12" />
+
+          <div>
+            <strong class="mb-3 d-inline-block">感谢你的支持！</strong>
+          </div>
+
+          <v-btn class="ma-1" color="#55acee" dark rounded>
+            <v-icon>mdi-twitter</v-icon>
+            - 45
+          </v-btn>
+
+          <v-btn class="ma-1" color="#3b5998" dark default rounded>
+            <v-icon>mdi-facebook</v-icon>
+            - 50
+          </v-btn>
+        </v-card-text>
+      </v-card>
+    </v-menu>
+  </div>
+</template>
+
+<script>
+// Mixins
+import Proxyable from "vuetify/lib/mixins/proxyable";
+
+// Vuex
+// import { get, sync } from 'vuex-pathify'
+
+export default {
+  name: "DashboardCoreSettings",
+
+  mixins: [Proxyable],
+computed: {
+
+
+gradients(){
+  return this.$store.state.user.gradients},
+    image:{
+      get(){
+              return this.$store.state.user.drawer.image;
+            },
+            set(value){
+                this.$store.commit('SetImage',value)
+            }
+    },
+  gradient:{
+            get(){
+                 return this.$store.state.user.drawer.gradient;
+            },
+            set(value){
+                this.$store.commit('SetGradient',value)
+            }
+    },
+    images()
+    {
+     return  this.$store.state.user.images;
+    },
+        drawerImage:
+    {
+               get(){
+                      return  this.$store.state.home.drawerImage;
+            },
+            set(value){
+                this.$store.commit('SetDrawerImage',value)
+            },
+
+
+
+    },
+                      dark()
+    {
+     return  this.$store.state.user.dark;
+    },
+                          drawer()
+    {
+     return  this.$store.state.home.drawer;
+    }
+},
+
+
+
+  data: () => ({
+    color: "#E91E63",
+    colors: ["#9C27b0", "#00CAE3", "#4CAF50", "#ff9800", "#E91E63", "#FF5252"],
+    menu: false,
+    saveImage: "",
+  }),
+
+  // computed: {
+  //   ...sync('app', [
+  //     'drawer',
+  //     'drawerImage',
+  //     'mini',
+  //   ]),
+  //   ...sync('user', [
+  //     'drawer@gradient',
+  //     'drawer@image',
+  //   ]),
+  //   ...get('user', [
+  //     'images',
+  //     'gradients',
+  //   ]),
+  // },
+
+  watch: {
+    color(val) {
+
+      this.$vuetify.theme.themes[this.isDark ? "dark" : "light"].primary = val;
+                  this.$vuetify.theme.dark=true;
+      this.$vuetify.theme.dark=false;
+    },
+  },
+};
+</script>
+
+<style lang="sass">
+  .v-settings
+    .v-item-group > *
+      cursor: pointer
+
+    &__item
+      border-width: 3px
+      border-style: solid
+      border-color: transparent !important
+
+      &--active
+        border-color: #00cae3 !important
+</style>

Yi.Vue2.x/src/layouts/default/View.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-main>
+    <v-container fluid>
+          <v-progress-linear
+      :active="this.$store.state.loader.load"
+      :indeterminate="this.$store.state.loader.load"
+      background-color="primary lighten-4"
+      color="primary lighten-1"
+      striped
+    ></v-progress-linear>
+      <router-view :key="$route.path" />
+    </v-container>
+  </v-main>
+</template>
+
+<script>
+  export default {
+    name: 'DefaultView',
+  }
+</script>

Yi.Vue2.x/src/layouts/default/widgets/Account.vue

@@ -0,0 +1,50 @@
+<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> -->
+        <ccAvatar :size="36" class="elevation-2"></ccAvatar>
+      </v-btn>
+    </template>
+
+    <v-list :tile="false" flat nav>
+      <app-bar-item to="/"
+        ><v-list-item-title v-text="'用户名：'+$store.state.user.user.username"
+      /></app-bar-item>
+      <app-bar-item to="/"
+        ><v-list-item-title v-text="'称号：'+$store.state.user.user.nick"
+      /></app-bar-item>
+
+      <v-divider class="mb-2 mt-2" />
+
+      <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: "用户信息" },
+        { title: "设置" },
+        { divider: true },
+        { title: "登出" },
+      ],
+    }),
+};
+</script>

Yi.Vue2.x/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.Vue2.x/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">Yi</strong>
+
+        <span class="primary--text">Framework</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.Vue2.x/src/layouts/default/widgets/DrawerToggle.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-btn
+    class="ml-3 mr-4"
+    elevation="1"
+    fab
+    small
+    @click="$store.state.home.mini = !$store.state.home.mini"
+  >
+    <v-icon>
+      {{ $store.state.home.mini ? 'mdi-format-list-bulleted' : 'mdi-dots-vertical' }}
+    </v-icon>
+  </v-btn>
+</template>
+
+<script>
+  // Utilities
+  // import { sync } from 'vuex-pathify'
+
+  export default {
+
+    data:()=>({
+     
+    }),
+    name: 'DefaultDrawerToggle',
+
+    computed: {
+
+      // mini: sync('app/mini'),
+    },
+  }
+</script>

Yi.Vue2.x/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.Vue2.x/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: [
+        '临时消息1，请检查邮箱',
+        '临时消息2，请检查邮箱',
+        '临时消息3，请检查邮箱',
+        '临时消息4，请检查邮箱',
+        '临时消息5，请检查邮箱',
+      ],
+    }),
+  }
+</script>

Yi.Vue2.x/src/layouts/default/widgets/Search.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-text-field
+    placeholder="全站搜索"
+    class="mr-16"
+    color="secondary"
+    hide-details
+    style="max-width: 400px"
+  >
+    <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>

Yi.Vue2.x/src/layouts/login/Index.vue

@@ -0,0 +1,38 @@
+<template>
+<v-app>
+  <div class="auth-wrapper auth-v1">
+
+    <div class="auth-inner">
+      <router-view></router-view>
+    </div>
+
+    <!-- background triangle shape  -->
+    <img
+      class="auth-mask-bg"
+      height="173"
+      :src="
+        require(`@/assets/mask-${$vuetify.theme.dark ? 'dark' : 'light'}.png`)
+      "
+    />
+
+    <!-- tree -->
+    <v-img
+      class="auth-tree"
+      width="247"
+      height="185"
+      src="@/assets/tree.png"
+    ></v-img>
+
+    <!-- tree  -->
+    <v-img
+      class="auth-tree-3"
+      width="377"
+      height="289"
+      src="@/assets/tree-3.png"
+    ></v-img>
+  </div>
+</v-app>
+</template>
+<style lang="scss">
+@import "@/styles/auth.scss";
+</style>