refactor: frontend

Author: Ayideyia

frontend/src/App.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 
 import { EventsOn, WindowHide, IsStartup } from '@/bridge'
-import { NavigationBar, MainPage, TitleBar } from '@/components'
+import { NavigationBar, TitleBar } from '@/components'
 import * as Stores from '@/stores'
 import { exitApp, sampleID, sleep, message } from '@/utils'
 import AboutView from '@/views/AboutView.vue'
@@ -89,20 +89,24 @@ appSettings.setupAppSettings().then(async () => {
 
 <template>
   <SplashView v-if="loading">
-    <div class="progress">
-      <Progress
-        :percent="percent"
-        :status="hasError ? 'danger' : 'primary'"
-        :radius="10"
-        type="circle"
-      />
-    </div>
+    <Progress
+      :percent="percent"
+      :status="hasError ? 'danger' : 'primary'"
+      :radius="10"
+      type="circle"
+    />
   </SplashView>
   <template v-else>
     <TitleBar />
-    <div class="main">
+    <div class="flex-1 overflow-y-auto flex flex-col p-8">
       <NavigationBar />
-      <MainPage />
+      <div class="flex flex-col overflow-y-auto mt-8 px-8 h-full">
+        <RouterView #="{ Component }">
+          <KeepAlive>
+            <component :is="Component" />
+          </KeepAlive>
+        </RouterView>
+      </div>
     </div>
   </template>
 
@@ -130,17 +134,3 @@ appSettings.setupAppSettings().then(async () => {
 
   <CommandView v-if="!loading" />
 </template>
-
-<style scoped>
-.main {
-  flex: 1;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  padding: 8px;
-}
-
-.progress {
-  animation: rotate 2s infinite linear;
-}
-</style>

frontend/src/assets/main.less

@@ -1,241 +1,5 @@
-@import './theme.less';
-
-body {
-  margin: 0;
-  color: var(--color);
-  background-color: var(--bg-color);
-  user-select: none;
-  -webkit-user-select: none;
-  line-height: 1.32;
-}
-
-body[debug-outline='true'] {
-  * {
-    outline: 1px solid var(--color);
-  }
-}
-
-@keyframes clip {
-  from {
-    clip-path: circle(0% at var(--x) var(--y));
-  }
-  to {
-    clip-path: circle(100% at var(--x) var(--y));
-  }
-}
-
-::view-transition-old(root) {
-  animation: none;
-}
-::view-transition-new(root) {
-  mix-blend-mode: normal;
-  animation: clip 0.5s ease-in;
-}
-
-.slide-down-enter-active,
-.slide-down-leave-active {
-  transition: transform 0.2s ease-out;
-}
-
-.slide-down-enter-from,
-.slide-down-leave-to {
-  transform: translateY(-100%);
-}
-
-div,
-input {
-  box-sizing: border-box;
-}
-
-a {
-  text-decoration: none;
-  color: var(--color);
-}
-
-#app {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.form-item {
-  padding: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.form-action {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 8px;
-}
-
-.flex {
-  display: flex;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.flex-start {
-  align-items: flex-start;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.pt-4 {
-  padding-top: 4px !important;
-}
-
-.py-2 {
-  padding-top: 2px !important;
-  padding-bottom: 2px !important;
-}
-
-.px-8 {
-  padding-left: 8px !important;
-  padding-right: 8px !important;
-}
-
-.mt-4 {
-  margin-top: 4px !important;
-}
-
-.mr-4 {
-  margin-right: 4px !important;
-}
-
-.ml-4 {
-  margin-left: 4px !important;
-}
-
-.mb-2 {
-  margin-bottom: 2px !important;
-}
-
-.mt-8 {
-  margin-top: 8px !important;
-}
-
-.mr-8 {
-  margin-right: 8px !important;
-}
-
-.mb-8 {
-  margin-bottom: 8px !important;
-}
-
-.ml-8 {
-  margin-left: 8px !important;
-}
-
-.ml-auto {
-  margin-left: auto !important;
-}
-
-.mr-auto {
-  margin-right: auto !important;
-}
-
-.w-full {
-  width: 100% !important;
-}
-
-.rounded-8 {
-  border-radius: 8px;
-}
-
-.flex-1 {
-  flex: 1;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.font-bold {
-  font-weight: bold;
-}
-
-.select-text {
-  user-select: text;
-  -webkit-user-select: text;
-}
-
-.text-white {
-  color: #fff;
-}
-
-.text-nowrap {
-  text-wrap: nowrap;
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.grid-list-grid {
-  flex: 1;
-  margin-top: 8px;
-  overflow-y: auto;
-  font-size: 12px;
-  line-height: 1.6;
-  .item {
-    display: inline-block;
-    width: calc(33.333333% - 16px);
-    margin: 8px;
-  }
-}
-
-.grid-list-list {
-  flex: 1;
-  margin-top: 8px;
-  overflow-y: auto;
-  font-size: 12px;
-  line-height: 1.6;
-  .item {
-    margin: 8px;
-    margin-bottom: 16px;
-  }
-}
-
-.grid-list-header {
-  display: flex;
-  align-items: center;
-  padding: 0 8px;
-  z-index: 9;
-}
-
-.grid-list-empty {
-  text-align: center;
-  height: 70vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-::-webkit-scrollbar-track {
-  border-radius: 6px;
-  background: var(--scrollbar-track-bg);
-}
-::-webkit-scrollbar-thumb {
-  border-radius: 6px;
-  background: var(--scrollbar-thumb-bg);
-}
+@import 'styles/variables.less';
+@import 'styles/theme.less';
+@import 'styles/reset.less';
+@import 'styles/custom.less';
+@import 'styles/utilities/index.less';