tnbapp/src/views/studio/index.vue

<template>
  <v-container>
    <v-row>
      <v-col cols="2">
        <v-sheet rounded="lg">
          <v-list color="transparent">
            <router-link :to="`/user/home`">
            <!--<router-link :to="`/u/${this.$store.state.user.userInfo.userId}`">-->
              <v-row justify="center" align="center">
                <v-col cols="12" style="text-align: center">
                  <v-avatar size="62">
                    <v-img :src="this.$store.state.user.userInfo.avatarUrl" />
                  </v-avatar>
                </v-col>
              </v-row>
              <v-row justify="center" align="center">
                <v-col cols="12" style="text-align: center">
                  {{ this.$store.state.user.userInfo.username }}
                </v-col>
              </v-row>
            </router-link>
            <router-link v-for="item in items" :key="item.text" :to="item.link">
              <v-list-item
                link
              >
                <v-list-item-action>
                  <v-icon>{{ item.icon }}</v-icon>
                </v-list-item-action>
                <v-list-item-content>
                  <v-list-item-title>
                    {{ item.text }}
                  </v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </router-link>

            <v-divider class="my-2" />

            <v-list-item
              link
              color="grey lighten-4"
            >
              <v-list-item-content>
                <v-list-item-title>
                  Refresh
                </v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-sheet>
      </v-col>
      <v-col>
        <v-sheet
          min-height="70vh"
          rounded="lg"
        >
          <router-view />
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import CheckPower from '@/utils/check-power.vue'

export default {
  data: () => ({
    CheckPower,
    drawer: true,
    items: [
      { icon: 'mdi-filmstrip-box-multiple', text: '稿件列表', link: '/studio' },
      { icon: 'mdi-upload', text: '投稿', link: '/studio/upload' },
      { icon: 'mdi-database', text: '数据统计', link: '/studio/statistics' }
    ],
    adminList: [
      { icon: 'mdi-playlist-edit', text: '分类管理', link: '/studio/admin/category' },
      { icon: 'mdi-application', text: '邀请码', link: '/studio/admin/invitation' },
      { icon: 'mdi-video', text: '待审核', link: '/studio/admin/examine' },
      { icon: 'mdi-filmstrip-box-multiple', text: '投稿列表', link: '/studio/admin/article/list' },
      { icon: 'mdi-file', text: '文件列表', link: '/studio/admin/file/list' },
      { icon: 'mdi-account-multiple', text: '用户列表', link: '/studio/admin/userlist' },
      { icon: 'mdi-square-edit-outline', text: '网页设置', link: '/studio/admin/websetting' }
    ]
  }),
  mounted() {
  },
  created() {
  },
  methods: {
  }
}
</script>

<style scoped>
  a {
    text-decoration: none;
  }
</style>