views/admin 模块中添加几个页面

src/router/admin.js

@@ -1,5 +1,7 @@
 const Admin = () => import('views/admin/Admin')
 const AdminBackendLog = () => import('views/admin/AdminBackendLog')
+const AdminAccessLog = () => import('views/admin/AdminAccessLog')
+const AdminRuntimeLog = () => import('views/admin/AdminRuntimeLog')
 const AdminUserList = () => import('views/admin/AdminUserList')
 const AdminVideoList = () => import('views/admin/AdminVideoList')
 const AdminAvatarList = () => import('views/admin/AdminAvatarList')
@@ -208,12 +210,18 @@ export default {
         {
           path: '/background/backend/access_log',
           name: 'AccessLog',
-          component: AdminBackendLog,
+          component: AdminAccessLog,
           meta: { needAuth: true }
         },
         {
           path: '/background/backend/runtime_log',
           name: 'RuntimeLog',
+          component: AdminRuntimeLog,
+          meta: { needAuth: true }
+        },
+        {
+          path: '/background/backend/realtime_log',
+          name: 'Realtime',
           component: AdminBackendLog,
           meta: { needAuth: true }
         }

src/views/admin/AdminAccessLog.vue

@@ -0,0 +1,215 @@
+<template>
+  <el-container>
+    <el-header height="220">
+      <el-row style="margin-top: 10px">
+        <el-select
+          v-model="queryInfo.scope"
+          clearable
+          placeholder="查询条件"
+          style="margin-left: 5px"
+          @change="onSelectChange"
+        />
+        <el-button type="plain" icon="el-icon-refresh" style="margin-left: 5px" @click="onRefresh">刷新</el-button>
+      </el-row>
+    </el-header>
+    <el-main>
+      <el-table
+        :data="dataList"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          fixed="left"
+          label="No"
+          type="index"
+        />
+        <el-table-column
+          prop="avatarUrl"
+          label="头像"
+          width="90"
+        >
+          <template slot-scope="scope">
+            <el-image :src="scope.row.avatarUrl" min-width="30" height="20" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="userId"
+          label="用户 ID"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="username"
+          label="用户名"
+        />
+        <el-table-column
+          prop="screenName"
+          label="显示名"
+        >
+          <template slot-scope="scope">
+            <router-link target="_blank" :to="`/user/${scope.row.userId}`">
+              <span>{{ scope.row.screenName }}</span>
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="signature"
+          label="签名"
+          :show-overflow-tooltip="true"
+        >
+          <template slot-scope="scope">
+            <el-tooltip
+              v-if="scope.row.signature"
+              :content="scope.row.signature"
+              raw-content
+              placement="top-start"
+            >
+              <span v-if="scope.row.signature && scope.row.signature.length <= 15">
+                {{ scope.row.signature }}
+              </span>
+              <span v-if="scope.row.signature && scope.row.signature.length > 15">
+                {{ scope.row.signature.substr(0, 15) + "..." }}
+              </span>
+            </el-tooltip>
+            <span v-else-if="scope.row.signature === null">-</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="pubDate"
+          label="注册时间"
+          width="150"
+        />
+        <el-table-column
+          prop="scope"
+          label="帐号状态"
+          width="120"
+        >
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === 1" :type="'warning'" disable-transitions>
+              正常
+            </el-tag>
+            <el-tag v-else-if="scope.row.status === 2" :type="'success'" disable-transitions>
+              封禁中
+            </el-tag>
+            <el-tag v-else :type="'danger'" disable-transitions>
+              已注销
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="280"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)"
+            >编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        background
+        :small="screenWidth <= 768"
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        :total="totalSize"
+        @current-change="handleCurrentChange"
+        @prev-click="handleCurrentChange"
+        @next-click="handleCurrentChange"
+      />
+    </el-main>
+
+    <!-- 修改视频可见范围对话框 -->
+    <el-dialog
+      append-to-body
+      :visible.sync="showEditScopeDialog"
+      width="30%"
+      center
+    >
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>修改视频可见范围</span>
+          <el-button style="float: right; padding: 3px 0" type="text">更新</el-button>
+        </div>
+        <div class="text item">
+          <el-select v-model="form.scope" placeholder="选择可见范围">
+            <el-option label="本人可见" value="1" />
+            <el-option label="所有人可见" value="2" />
+            <el-option label="VIP 可见" value="3" />
+            <el-option label="验证码可见" value="4" />
+          </el-select>
+        </div>
+      </el-card>
+    </el-dialog>
+  </el-container>
+</template>
+
+<script>
+import { getUserList } from '@/api/admin'
+
+export default {
+  name: 'AdminUserList',
+  data() {
+    return {
+      queryInfo: {
+        scope: null,
+        pn: 1
+      },
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 12,
+      totalSize: 0,
+      dataList: [],
+      nextId: 0
+    }
+  },
+  created() {
+    document.title = 'AdminAccessLog'
+    this.getData()
+  },
+  methods: {
+    getData() {
+    },
+    onRefresh() {
+      this.getData()
+    },
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.getData()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    handleEdit(index, row) {
+      this.$message.info('handleEdit')
+    },
+    handleDelete(index, row) {
+      this.$confirm('确定要删除 ' + row.title + '?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message.info('handleDelete')
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
+    onSelectChange() {
+      this.$message.info(this.queryInfo)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/admin/AdminGateway.vue

@@ -0,0 +1,215 @@
+<template>
+  <el-container>
+    <el-header height="220">
+      <el-row style="margin-top: 10px">
+        <el-select
+          v-model="queryInfo.scope"
+          clearable
+          placeholder="查询条件"
+          style="margin-left: 5px"
+          @change="onSelectChange"
+        />
+        <el-button type="plain" icon="el-icon-refresh" style="margin-left: 5px" @click="onRefresh">刷新</el-button>
+      </el-row>
+    </el-header>
+    <el-main>
+      <el-table
+        :data="dataList"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          fixed="left"
+          label="No"
+          type="index"
+        />
+        <el-table-column
+          prop="avatarUrl"
+          label="头像"
+          width="90"
+        >
+          <template slot-scope="scope">
+            <el-image :src="scope.row.avatarUrl" min-width="30" height="20" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="userId"
+          label="用户 ID"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="username"
+          label="用户名"
+        />
+        <el-table-column
+          prop="screenName"
+          label="显示名"
+        >
+          <template slot-scope="scope">
+            <router-link target="_blank" :to="`/user/${scope.row.userId}`">
+              <span>{{ scope.row.screenName }}</span>
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="signature"
+          label="签名"
+          :show-overflow-tooltip="true"
+        >
+          <template slot-scope="scope">
+            <el-tooltip
+              v-if="scope.row.signature"
+              :content="scope.row.signature"
+              raw-content
+              placement="top-start"
+            >
+              <span v-if="scope.row.signature && scope.row.signature.length <= 15">
+                {{ scope.row.signature }}
+              </span>
+              <span v-if="scope.row.signature && scope.row.signature.length > 15">
+                {{ scope.row.signature.substr(0, 15) + "..." }}
+              </span>
+            </el-tooltip>
+            <span v-else-if="scope.row.signature === null">-</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="pubDate"
+          label="注册时间"
+          width="150"
+        />
+        <el-table-column
+          prop="scope"
+          label="帐号状态"
+          width="120"
+        >
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === 1" :type="'warning'" disable-transitions>
+              正常
+            </el-tag>
+            <el-tag v-else-if="scope.row.status === 2" :type="'success'" disable-transitions>
+              封禁中
+            </el-tag>
+            <el-tag v-else :type="'danger'" disable-transitions>
+              已注销
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="280"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)"
+            >编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        background
+        :small="screenWidth <= 768"
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        :total="totalSize"
+        @current-change="handleCurrentChange"
+        @prev-click="handleCurrentChange"
+        @next-click="handleCurrentChange"
+      />
+    </el-main>
+
+    <!-- 修改视频可见范围对话框 -->
+    <el-dialog
+      append-to-body
+      :visible.sync="showEditScopeDialog"
+      width="30%"
+      center
+    >
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>修改视频可见范围</span>
+          <el-button style="float: right; padding: 3px 0" type="text">更新</el-button>
+        </div>
+        <div class="text item">
+          <el-select v-model="form.scope" placeholder="选择可见范围">
+            <el-option label="本人可见" value="1" />
+            <el-option label="所有人可见" value="2" />
+            <el-option label="VIP 可见" value="3" />
+            <el-option label="验证码可见" value="4" />
+          </el-select>
+        </div>
+      </el-card>
+    </el-dialog>
+  </el-container>
+</template>
+
+<script>
+import { getUserList } from '@/api/admin'
+
+export default {
+  name: 'AdminUserList',
+  data() {
+    return {
+      queryInfo: {
+        scope: null,
+        pn: 1
+      },
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 12,
+      totalSize: 0,
+      dataList: [],
+      nextId: 0
+    }
+  },
+  created() {
+    document.title = 'AdminAccessLog'
+    this.getData()
+  },
+  methods: {
+    getData() {
+    },
+    onRefresh() {
+      this.getData()
+    },
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.getData()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    handleEdit(index, row) {
+      this.$message.info('handleEdit')
+    },
+    handleDelete(index, row) {
+      this.$confirm('确定要删除 ' + row.title + '?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message.info('handleDelete')
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
+    onSelectChange() {
+      this.$message.info(this.queryInfo)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/admin/AdminRuntimeLog.vue

@@ -0,0 +1,215 @@
+<template>
+  <el-container>
+    <el-header height="220">
+      <el-row style="margin-top: 10px">
+        <el-select
+          v-model="queryInfo.scope"
+          clearable
+          placeholder="查询条件"
+          style="margin-left: 5px"
+          @change="onSelectChange"
+        />
+        <el-button type="plain" icon="el-icon-refresh" style="margin-left: 5px" @click="onRefresh">刷新</el-button>
+      </el-row>
+    </el-header>
+    <el-main>
+      <el-table
+        :data="dataList"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          fixed="left"
+          label="No"
+          type="index"
+        />
+        <el-table-column
+          prop="avatarUrl"
+          label="头像"
+          width="90"
+        >
+          <template slot-scope="scope">
+            <el-image :src="scope.row.avatarUrl" min-width="30" height="20" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="userId"
+          label="用户 ID"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="username"
+          label="用户名"
+        />
+        <el-table-column
+          prop="screenName"
+          label="显示名"
+        >
+          <template slot-scope="scope">
+            <router-link target="_blank" :to="`/user/${scope.row.userId}`">
+              <span>{{ scope.row.screenName }}</span>
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="signature"
+          label="签名"
+          :show-overflow-tooltip="true"
+        >
+          <template slot-scope="scope">
+            <el-tooltip
+              v-if="scope.row.signature"
+              :content="scope.row.signature"
+              raw-content
+              placement="top-start"
+            >
+              <span v-if="scope.row.signature && scope.row.signature.length <= 15">
+                {{ scope.row.signature }}
+              </span>
+              <span v-if="scope.row.signature && scope.row.signature.length > 15">
+                {{ scope.row.signature.substr(0, 15) + "..." }}
+              </span>
+            </el-tooltip>
+            <span v-else-if="scope.row.signature === null">-</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="pubDate"
+          label="注册时间"
+          width="150"
+        />
+        <el-table-column
+          prop="scope"
+          label="帐号状态"
+          width="120"
+        >
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === 1" :type="'warning'" disable-transitions>
+              正常
+            </el-tag>
+            <el-tag v-else-if="scope.row.status === 2" :type="'success'" disable-transitions>
+              封禁中
+            </el-tag>
+            <el-tag v-else :type="'danger'" disable-transitions>
+              已注销
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="280"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)"
+            >编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        background
+        :small="screenWidth <= 768"
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        :total="totalSize"
+        @current-change="handleCurrentChange"
+        @prev-click="handleCurrentChange"
+        @next-click="handleCurrentChange"
+      />
+    </el-main>
+
+    <!-- 修改视频可见范围对话框 -->
+    <el-dialog
+      append-to-body
+      :visible.sync="showEditScopeDialog"
+      width="30%"
+      center
+    >
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>修改视频可见范围</span>
+          <el-button style="float: right; padding: 3px 0" type="text">更新</el-button>
+        </div>
+        <div class="text item">
+          <el-select v-model="form.scope" placeholder="选择可见范围">
+            <el-option label="本人可见" value="1" />
+            <el-option label="所有人可见" value="2" />
+            <el-option label="VIP 可见" value="3" />
+            <el-option label="验证码可见" value="4" />
+          </el-select>
+        </div>
+      </el-card>
+    </el-dialog>
+  </el-container>
+</template>
+
+<script>
+import { getUserList } from '@/api/admin'
+
+export default {
+  name: 'AdminUserList',
+  data() {
+    return {
+      queryInfo: {
+        scope: null,
+        pn: 1
+      },
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 12,
+      totalSize: 0,
+      dataList: [],
+      nextId: 0
+    }
+  },
+  created() {
+    document.title = 'AdminRuntimeLog'
+    this.getData()
+  },
+  methods: {
+    getData() {
+    },
+    onRefresh() {
+      this.getData()
+    },
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.getData()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    handleEdit(index, row) {
+      this.$message.info('handleEdit')
+    },
+    handleDelete(index, row) {
+      this.$confirm('确定要删除 ' + row.title + '?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message.info('handleDelete')
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
+    onSelectChange() {
+      this.$message.info(this.queryInfo)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/admin/LeftAside.vue

@@ -133,6 +133,10 @@
           <i class="el-icon-film" />
           <span slot="title">运行日志</span>
         </el-menu-item>
+        <el-menu-item index="/background/backend/realtime_log">
+          <i class="el-icon-film" />
+          <span slot="title">实时日志</span>
+        </el-menu-item>
       </el-menu-item-group>
     </el-submenu>
   </el-menu>