v2.0.0

src/renderer/App.vue

@@ -1,42 +1,40 @@
-<template lang="pug">
-#container
-  core-aside#left
-  #right
-    core-toolbar#toolbar
-    #view
-      core-view#view-container
-    core-play-bar#player
-  core-icons
-  core-version-modal
-  core-pact-modal
-  core-sync-mode-modal
-  core-play-detail
+<template>
+  <div id="container" class="view-container">
+    <layout-aside id="left" />
+    <div id="right">
+      <layout-toolbar id="toolbar" />
+      <layout-view id="view" />
+      <layout-play-bar id="player" />
+    </div>
+    <layout-icons />
+    <layout-version-modal />
+    <layout-pact-modal />
+    <layout-sync-mode-modal />
+    <layout-play-detail />
+  </div>
 </template>
 
-<script>
-import { onMounted } from '@renderer/utils/vueTools'
+<script setup>
+import { onMounted } from '@common/utils/vueTools'
+// import BubbleCursor from '@common/utils/cursor-effects/bubbleCursor'
 import useApp from '@renderer/core/useApp'
 
-export default {
-  setup() {
-    const dom_root = document.getElementById('root')
+useApp()
 
-    useApp()
+onMounted(() => {
+  document.getElementById('root').style.display = 'block'
+
+  // const styles = getComputedStyle(document.documentElement)
+  // window.lxData.bubbleCursor = new BubbleCursor({
+  //   fillStyle: styles.getPropertyValue('--color-primary-alpha-900'),
+  //   strokeStyle: styles.getPropertyValue('--color-primary-alpha-700'),
+  // })
+})
+
+// onBeforeUnmount(() => {
+//   window.lxData.bubbleCursor?.destroy()
+// })
 
-    onMounted(() => {
-      // 隐藏等待界面
-      /* inited.value = true
-      const dom_mask = document.getElementById('waiting-mask')
-      if (dom_mask) {
-        dom_mask.addEventListener('transitionend', () => {
-          dom_mask.parentNode.removeChild(dom_mask)
-        })
-        dom_mask.classList.add('hide')
-      } */
-      dom_root.style.display = 'block'
-    })
-  },
-}
 </script>
 
 
@@ -44,24 +42,28 @@ export default {
 @import './assets/styles/index.less';
 @import './assets/styles/layout.less';
 
+html {
+  height: 100vh;
+}
 html, body {
-  overflow: hidden;
+  // overflow: hidden;
+  box-sizing: border-box;
 }
 
 body {
   user-select: none;
-  height: 100vh;
-  box-sizing: border-box;
+  height: 100%;
 }
 #root {
   height: 100%;
   position: relative;
   overflow: hidden;
-  color: @color-theme_2-font;
-  background: @color-theme-bgimg @color-theme-bgposition no-repeat;
-  background-size: @color-theme-bgsize;
-  transition: background-color @transition-theme;
-  background-color: @color-theme;
+  color: var(--color-font);
+  background: var(--background-image) var(--background-image-position) no-repeat;
+  background-size: var(--background-image-size);
+  transition: background-color @transition-normal;
+  background-color: var(--color-content-background);
+  box-sizing: border-box;
 }
 
 .disableAnimation * {
@@ -70,6 +72,7 @@ body {
 }
 
 .transparent {
+  background: transparent;
   padding: @shadow-app;
   // #waiting-mask {
   //   border-radius: @radius-border;
@@ -78,18 +81,20 @@ body {
   //   top: @shadow-app;
   //   bottom: @shadow-app;
   // }
+  #body {
+    border-radius: @radius-border;
+  }
   #root {
     box-shadow: 0 0 @shadow-app rgba(0, 0, 0, 0.5);
     border-radius: @radius-border;
-    background-color: transparent;
-  }
-  #container {
-    border-radius: @radius-border;
-    background-color: transparent;
   }
+  // #container {
+    // border-radius: @radius-border;
+    // background-color: transparent;
+  // }
 }
 .disableTransparent {
-  background-color: #fff;
+  background-color: var(--color-content-background);
 
   #right {
     border-top-left-radius: 0;
@@ -101,7 +106,7 @@ body {
   // }
 }
 .fullscreen {
-  background-color: #fff;
+  background-color: var(--color-content-background);
 
   #right {
     border-top-left-radius: 0;
@@ -113,6 +118,7 @@ body {
   position: relative;
   display: flex;
   height: 100%;
+  background-color: var(--color-app-background);
 }
 
 #left {
@@ -123,8 +129,8 @@ body {
   flex: auto;
   display: flex;
   flex-flow: column nowrap;
-  transition: background-color @transition-theme;
-  background-color: @color-theme_2;
+  transition: background-color @transition-normal;
+  background-color: var(--color-main-background);
 
   border-top-left-radius: @radius-border;
   border-bottom-left-radius: @radius-border;
@@ -137,24 +143,19 @@ body {
 #view {
   position: relative;
   flex: auto;
-  display: flex;
+  // display: flex;
   min-height: 0;
 }
-#view-container {
-  flex: auto;
+
+.view-container {
+  transition: opacity @transition-normal;
+}
+#root.show-modal > .view-container {
+  opacity: .9;
+}
+#view.show-modal > .view-container {
+  opacity: .2;
 }
 
-each(@themes, {
-  #root.@{value} {
-    color: ~'@{color-@{value}-theme_2-font}';
-    background-color: ~'@{color-@{value}-theme}';
-    background-image: ~'@{color-@{value}-theme-bgimg}';
-    background-size: ~'@{color-@{value}-theme-bgsize}';
-    background-position: ~'@{color-@{value}-theme-bgposition}';
-    #right {
-      background-color: ~'@{color-@{value}-theme_2}';
-    }
-  }
-})
 </style>