kenaito-media-picker/frontend/src/App.vue

<template>
  <el-container class="app-wrapper">
    <el-aside width="220px" class="app-aside">
      <div class="app-logo">
        <span class="logo-icon"></span>
        <span>媒体库管理</span>
      </div>
      <el-menu
          :default-active="$route.path"
          router
          background-color="transparent"
          text-color="#4a5a78"
          active-text-color="#1677ff"
      >
        <el-menu-item index="/scan">
          <i class="el-icon-video-play"></i>
          <span slot="title">扫描整理</span>
        </el-menu-item>
        <el-menu-item index="/media">
          <i class="el-icon-film"></i>
          <span slot="title">媒体库</span>
        </el-menu-item>
        <el-menu-item index="/dashboard">
          <i class="el-icon-data-line"></i>
          <span slot="title">统计看板</span>
        </el-menu-item>
      </el-menu>
      <div class="aside-footer">kenaito-media-picker</div>
    </el-aside>
    <el-main class="app-main">
      <router-view/>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
}

body {
  /* 科技风浅色背景：纯色 + 细网格线 */
  background: linear-gradient(rgba(22, 119, 255, 0.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(22, 119, 255, 0.05) 1px, transparent 1px),
  #f2f7ff;
  background-size: 26px 26px, 26px 26px, 100% 100%;
}

.app-wrapper {
  height: 100%;
}

/* ===== 侧边栏：浅色科技面板 ===== */
.app-aside {
  background: rgba(255, 255, 255, 0.92);
  border-right: 1px solid #e3edff;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 16px rgba(22, 119, 255, 0.06);
}

.app-logo {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #1677ff;
}

.logo-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1677ff;
  box-shadow: 0 0 8px rgba(22, 119, 255, 0.6);
}

.app-aside .el-menu {
  border-right: none;
  padding: 8px 12px;
  flex: 1;
}

.app-aside .el-menu-item {
  height: 44px;
  line-height: 44px;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 14px;
}

.app-aside .el-menu-item:hover {
  background: #eef5ff;
  color: #1677ff !important;
}

.app-aside .el-menu-item.is-active {
  background: #e8f1ff;
  color: #1677ff !important;
  font-weight: 600;
}

.aside-footer {
  padding: 14px;
  text-align: center;
  font-size: 11px;
  color: #9db4d9;
  letter-spacing: 0.5px;
}

/* ===== 主区域 ===== */
.app-main {
  background: transparent;
  padding: 20px;
  overflow-y: auto;
}

/* ===== 卡片：科技风白卡 ===== */
.page-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 20px 24px;
  border: 1px solid #e6efff;
  box-shadow: 0 4px 20px rgba(22, 119, 255, 0.08);
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.toolbar .title {
  font-size: 16px;
  font-weight: 600;
  color: #1f3a6b;
}

/* ===== ElementUI 组件科技风覆盖 ===== */
.el-button--primary {
  background: #1677ff;
  border: none;
}

.el-button--primary:hover,
.el-button--primary:focus {
  background: #0f6bff;
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.35);
}

.el-table {
  border-radius: 8px;
}

.el-table th.el-table__cell {
  background: #f0f6ff;
  color: #1f3a6b;
  font-weight: 600;
}

.el-table--border,
.el-table--group {
  border-color: #e6efff;
}

.el-input__inner:focus,
.el-textarea__inner:focus,
.el-select .el-input.is-focus .el-input__inner {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
}

.el-dialog {
  border-radius: 12px;
}

.el-dialog__title {
  color: #1f3a6b;
  font-weight: 600;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #1677ff;
}

.el-switch.is-checked .el-switch__core {
  background: #1677ff;
  border-color: #1677ff;
}

.pem-textarea textarea {
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
}
</style>