wip: vite版重构中

src/App.vue

@@ -1,23 +1,42 @@
-<script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
-  <el-button>haha</el-button>
-  <el-link type="primary">primary</el-link>
+  <router-view class="app" :class="{ grey__mode: greyMode }" />
 </template>
 
-<style>
+<script setup lang="ts" name="App">
+import { computed } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+const appStore = useAppStore()
+
+const greyMode = computed(() => appStore.getGreyMode)
+</script>
+
+<style lang="less">
+.size {
+  width: 100;
+  height: 100%;
+  min-width: var(--content-min-width);
+}
+
+html,
+body {
+  .size;
+
+  padding: 0;
+  margin: 0;
+}
+
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  .size;
+
+  background: var(--app-background-color);
+}
+
+.grey__mode {
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+  filter: grayscale(100%);
+  filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
 }
 </style>