1
0

App.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  2. <div id="app">
  3. <header class="grid-content header-color">
  4. <div class="header-content">
  5. <div class="brand">
  6. <a href="#">frp client</a>
  7. </div>
  8. <div class="dark-switch">
  9. <el-switch
  10. v-model="darkmodeSwitch"
  11. inline-prompt
  12. active-text="Dark"
  13. inactive-text="Light"
  14. @change="toggleDark"
  15. style="
  16. --el-switch-on-color: #444452;
  17. --el-switch-off-color: #589ef8;
  18. "
  19. />
  20. </div>
  21. </div>
  22. </header>
  23. <section>
  24. <el-row>
  25. <el-col id="side-nav" :xs="24" :md="4">
  26. <el-menu
  27. default-active="1"
  28. mode="vertical"
  29. theme="light"
  30. router="false"
  31. @select="handleSelect"
  32. >
  33. <el-menu-item index="/">Overview</el-menu-item>
  34. <el-menu-item index="/configure">Configure</el-menu-item>
  35. <el-menu-item index="">Help</el-menu-item>
  36. </el-menu>
  37. </el-col>
  38. <el-col :xs="24" :md="20">
  39. <div id="content">
  40. <router-view></router-view>
  41. </div>
  42. </el-col>
  43. </el-row>
  44. </section>
  45. <footer></footer>
  46. </div>
  47. </template>
  48. <script setup lang="ts">
  49. import { ref } from 'vue'
  50. import { useDark, useToggle } from '@vueuse/core'
  51. const isDark = useDark()
  52. const darkmodeSwitch = ref(isDark)
  53. const toggleDark = useToggle(isDark)
  54. const handleSelect = (key: string) => {
  55. if (key == '') {
  56. window.open('https://github.com/fatedier/frp')
  57. }
  58. }
  59. </script>
  60. <style>
  61. body {
  62. margin: 0px;
  63. font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, sans-serif;
  64. }
  65. header {
  66. width: 100%;
  67. height: 60px;
  68. }
  69. .header-color {
  70. background: #58b7ff;
  71. }
  72. html.dark .header-color {
  73. background: #395c74;
  74. }
  75. .header-content {
  76. display: flex;
  77. align-items: center;
  78. }
  79. #content {
  80. margin-top: 20px;
  81. padding-right: 40px;
  82. }
  83. .brand {
  84. display: flex;
  85. justify-content: flex-start;
  86. }
  87. .brand a {
  88. color: #fff;
  89. background-color: transparent;
  90. margin-left: 20px;
  91. line-height: 25px;
  92. font-size: 25px;
  93. padding: 15px 15px;
  94. height: 30px;
  95. text-decoration: none;
  96. }
  97. .dark-switch {
  98. display: flex;
  99. justify-content: flex-end;
  100. flex-grow: 1;
  101. padding-right: 40px;
  102. }
  103. </style>