@sugarat/easypicker2-client 2.4.1

package/src/pages/dashboard/index.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="dashboard">
+    <div class="pc-nav">
+      <div class="nav">
+        <!-- LOGO -->
+        <div class="logo">
+          <router-link to="/">
+            <img
+              src="https://img.cdn.sugarat.top/easypicker/EasyPicker.png"
+              alt="logo"
+            />
+          </router-link>
+        </div>
+        <input v-if="isMobile" type="checkbox" id="navActive" />
+        <nav>
+          <label v-if="isMobile" for="navActive" class="nav-item">
+            <span>Hello💐，</span>
+            {{ userName }}
+          </label>
+          <label
+            for="navActive"
+            class="nav-item"
+            v-for="(n, idx) in navList"
+            :key="idx"
+            :class="{
+              active: navActiveIdx === idx
+            }"
+            @click="handleNav(idx)"
+            >{{ n.title }}</label
+          >
+          <label
+            @click="handleLogout"
+            v-if="isMobile"
+            for="navActive"
+            class="nav-item"
+          >
+            <span style="margin-right: 6px">退出</span>
+            <el-icon size="16">
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                data-v-53d86618
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M10.6667 2.55473C13.0212 3.58347 14.6667 5.93291 14.6667 8.66667C14.6667 12.3486 11.6819 15.3333 8 15.3333C4.3181 15.3333 1.33333 12.3486 1.33333 8.66667C1.33333 5.93291 2.97879 3.58347 5.33333 2.55473V4.04684C3.7392 4.969 2.66667 6.69259 2.66667 8.66667C2.66667 11.6122 5.05448 14 8 14C10.9455 14 13.3333 11.6122 13.3333 8.66667C13.3333 6.69259 12.2608 4.969 10.6667 4.04684V2.55473ZM7.33333 8.66667V1.33333C7.33333 1.14924 7.48257 1 7.66667 1H8.33333C8.51743 1 8.66667 1.14924 8.66667 1.33333V8.66667C8.66667 8.85076 8.51743 9 8.33333 9H7.66667C7.48257 9 7.33333 8.85076 7.33333 8.66667Z"
+                  fill="#86909C"
+                  data-v-53d86618
+                />
+              </svg>
+            </el-icon>
+          </label>
+        </nav>
+        <div class="mask"></div>
+      </div>
+      <!-- 移动端展示 -->
+      <span id="navMenu">
+        <message-panel v-if="isMobile" class="mobile-message-bell" />
+        <label for="navActive">
+          <el-icon size="32">
+            <Expand />
+          </el-icon>
+        </label>
+      </span>
+      <div class="flex fac" v-if="!isMobile">
+        <message-panel />
+        <span>Hello 💐，</span>
+        <el-dropdown class="exit">
+          <span class="exit-info">
+            <span class="ellipsis">{{ userName }}</span>
+            <el-icon>
+              <ArrowDown />
+            </el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="handleLogout" :icon="Close"
+                >退出</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+    <router-view></router-view>
+    <div>
+      <home-footer type="dashboard"></home-footer>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { Expand, Close, ArrowDown, Bell } from '@element-plus/icons-vue'
+import HomeFooter from '@components/HomeFooter/index.vue'
+
+import { onMounted, reactive, ref, computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import MessagePanel from '@/components/MessagePanel/index.vue'
+import { UserApi } from '@/apis'
+
+const $router = useRouter()
+const $store = useStore()
+const $route = useRoute()
+const isMobile = computed(() => $store.getters['public/isMobile'])
+const navList = reactive<
+  { title: string; path: string; isExternal?: boolean }[]
+>([
+  {
+    title: '文件管理',
+    path: '/dashboard/files'
+  },
+  {
+    title: '任务管理',
+    path: '/dashboard/tasks'
+  }
+])
+const navActiveIdx = ref(0)
+const handleNav = (idx: number) => {
+  const n = navList[idx]
+  if (!n.isExternal && idx !== navActiveIdx.value) {
+    $router.push({
+      path: n.path
+    })
+  }
+  if (n.isExternal) {
+    window.open(n.path, '_blank')
+  }
+}
+
+// 自动切换激活的标题栏
+watch(
+  () => $route.path,
+  (path: string) => {
+    const idx = navList.findIndex((n) => path.startsWith(n.path))
+    if (idx !== -1) {
+      navActiveIdx.value = idx
+    }
+  }
+)
+
+const handleLogout = () => {
+  ElMessageBox.confirm('确认退出登录？', '登出提示', {
+    draggable: true
+  })
+    .then(() => {
+      // 登出接口
+      UserApi.logout().finally(() => {
+        $store.commit('user/setToken', null)
+        $router.replace({
+          name: 'home'
+        })
+      })
+    })
+    .catch(() => {
+      ElMessage.info('取消')
+    })
+}
+const userName = ref('World')
+
+const refreshActiveTab = () => {
+  // 动态修改active的项
+  navActiveIdx.value = navList.findIndex((v) => $route.path.startsWith(v.path))
+}
+onMounted(() => {
+  // 动态添加管理页面入口
+  UserApi.checkPower().then((r) => {
+    const isSuperAdmin = r.data?.power
+    userName.value = r.data?.name
+    $store.commit('user/setSuperAdmin', isSuperAdmin)
+    if (isSuperAdmin) {
+      const superNavList = [
+        {
+          title: '应用管理',
+          path: '/dashboard/manage'
+        },
+        {
+          title: '网站监控',
+          path: 'https://www.frontjs.com/app/87c1ef7667a513f313b4abb22a88dc78',
+          isExternal: true
+        }
+      ]
+      navList.push(...superNavList)
+    }
+    const isSystem = r.data?.system
+    if (isSystem) {
+      navList.splice(0, navList.length)
+      navList.push({
+        title: '系统管理',
+        path: '/dashboard/config'
+      })
+    }
+    refreshActiveTab()
+  })
+})
+</script>
+<style scoped lang="scss">
+.dashboard {
+  background-color: #fafafa;
+}
+.pc-nav {
+  background-color: #fff;
+  display: flex;
+  padding: 10px;
+  justify-content: space-between;
+  align-items: center;
+  .exit {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    .exit-info {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      > span {
+        margin-right: 5px;
+        display: block;
+        max-width: 70px;
+      }
+    }
+  }
+  .nav {
+    display: flex;
+    nav {
+      display: flex;
+      align-items: center;
+      .nav-item {
+        font-size: 1rem;
+        color: #595959;
+        padding: 10px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &.active {
+          color: #409eff !important;
+          font-weight: 600;
+        }
+      }
+    }
+    .exit {
+      color: #595959;
+    }
+  }
+  .logo {
+    width: 180px;
+    margin: 0 10px;
+    img {
+      height: 40px;
+    }
+  }
+}
+#navActive {
+  display: none;
+  opacity: 0;
+}
+#navMenu {
+  display: none;
+}
+.mobile-message-bell {
+  display: none;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+@media screen and (max-width: 700px) {
+  #navActive {
+    display: block;
+    position: fixed;
+    left: 0;
+    top: 0;
+  }
+  .mobile-message-bell {
+    display: block;
+  }
+  #navMenu {
+    cursor: pointer;
+    display: block;
+    position: absolute;
+    left: 10px;
+    top: 5px;
+    font-size: 2rem;
+  }
+  .pc-nav {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 6;
+    .nav {
+      flex-wrap: wrap;
+      width: 100%;
+      .logo {
+        width: 100%;
+        text-align: center;
+      }
+    }
+    #navActive {
+      & + nav {
+        display: none;
+      }
+    }
+    #navActive:checked {
+      & + nav {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        position: absolute;
+        z-index: 1;
+        background: #fff;
+        left: 0;
+        top: 50px;
+        + .mask {
+          display: block;
+          position: fixed;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          top: 50px;
+          background-color: rgba(0, 0, 0, 0.5);
+        }
+      }
+    }
+    .exit {
+      position: absolute;
+      right: 10px;
+      top: 20px;
+    }
+  }
+}
+</style>

package/src/pages/dashboard/manage/config/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="user">
+    <div class="panel">
+      <el-divider>部分路由管理</el-divider>
+      <ul class="routes">
+        <li v-for="r in showRoutes" :key="r.name">
+          <el-switch
+            @change="handleChangeRoute(r)"
+            :value="!r.disabled"
+            style="
+              --el-switch-on-color: #13ce66;
+              --el-switch-off-color: #ff4949;
+            "
+          />
+          <span class="title">{{ r.title }}</span>
+          <span class="path">{{ r.path }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus'
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
+import { SuperOverviewApi } from '@/apis'
+
+const $store = useStore()
+const $router = useRouter()
+const routes = computed(() =>
+  $router.options.routes.filter((v) => v.meta?.allowDisabled)
+)
+const showRoutes = reactive<
+  {
+    path: string
+    name: string
+    title: string
+    disabled: boolean
+  }[]
+>([])
+
+const handleChangeRoute = (r: typeof showRoutes[0]) => {
+  SuperOverviewApi.addDisabledRoute(r.path, !r.disabled).then(() => {
+    r.disabled = !r.disabled
+  })
+}
+onMounted(() => {
+  for (const r of routes.value) {
+    SuperOverviewApi.checkDisabledRoute(r.path).then((v) => {
+      showRoutes.push({
+        path: r.path,
+        name: r.name.toString(),
+        title: r.meta.title,
+        disabled: !!v.data?.status
+      })
+    })
+  }
+})
+const isMobile = computed(() => $store.getters['public/isMobile'])
+</script>
+
+<style scoped lang="scss">
+@media screen and (max-width: 700px) {
+  .user {
+    margin-top: 40px !important;
+  }
+}
+
+.user {
+  margin: 0 auto;
+}
+
+.panel {
+  max-width: 1256px;
+  padding: 1em;
+  background-color: #fff;
+  margin: 10px auto;
+  box-sizing: border-box;
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  border-radius: 4px;
+}
+
+.routes {
+  max-width: 500px;
+  margin: 0 auto;
+  li {
+    display: flex;
+    padding: 20px;
+    align-items: center;
+    .title {
+      font-weight: bold;
+      margin: 0 10px;
+    }
+  }
+}
+</style>

package/src/pages/dashboard/manage/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="monitor">
+    <div class="navs">
+      <el-menu
+        :default-active="defaultActive"
+        class="el-menu-nav"
+        :collapse="isCollapse"
+        @select="handleSelect"
+      >
+        <el-menu-item index="overview">
+          <el-icon>
+            <DataAnalysis />
+          </el-icon>
+          <template #title>概况</template>
+        </el-menu-item>
+        <el-menu-item index="user">
+          <el-icon>
+            <User />
+          </el-icon>
+          <template #title>用户</template>
+        </el-menu-item>
+        <el-menu-item index="wish">
+          <el-icon>
+            <DataBoard />
+          </el-icon>
+          <template #title>需求</template>
+        </el-menu-item>
+        <el-menu-item index="config">
+          <el-icon>
+            <Setting />
+          </el-icon>
+          <template #title>配置</template>
+        </el-menu-item>
+      </el-menu>
+    </div>
+    <div class="container">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { User, DataBoard, DataAnalysis, Setting } from '@element-plus/icons-vue'
+
+const defaultActive = ref('overview')
+const isCollapse = ref(false)
+const $router = useRouter()
+const $route = useRoute()
+const handleSelect = (path: string) => {
+  if ($route.path.endsWith(path)) {
+    return
+  }
+  $router.replace({
+    path
+  })
+}
+onMounted(() => {
+  const value = $route.path.split('/').slice(-1)[0]
+  defaultActive.value = value
+})
+</script>
+
+<style scoped>
+.monitor {
+  width: 96%;
+  /* min-height: 100vh; */
+  padding: 10px;
+  overflow: hidden;
+  display: flex;
+}
+.navs {
+  min-width: 140px;
+}
+.container {
+  padding-left: 20px;
+  flex-grow: 1;
+  width: calc(100% - 150px);
+}
+
+@media screen and (max-width: 700px) {
+  .monitor {
+    margin-top: 70px;
+    padding: 10px 0;
+    width: 100%;
+  }
+  .navs {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .el-radio-group {
+    display: none;
+  }
+  .el-menu-nav {
+    display: flex;
+  }
+  .container {
+    padding-left: 0;
+    margin-top: 30px;
+    width: 100%;
+  }
+}
+</style>