refactor: clean up unused utility functions and simplify SelectorPage layout

Author: lisonge

src/components/SvgIcon.vue

@@ -46,14 +46,12 @@ watchEffect(() => {
   ></svg>
 </template>
 <style>
-:root {
-  --svg-h: 1em;
-}
 .SvgIcon {
   display: block;
   overflow: hidden;
+  height: var(--svg-h, 1em);
+}
+.SvgIcon:not([fill]) {
   fill: currentColor;
-  height: var(--svg-h);
 }
-/* --svg-h:initial */
 </style>

src/style/index.scss

@@ -7,13 +7,6 @@ html {
   height: var(--win-h);
 }
 
-body {
-  width: var(--gkd-w);
-  &.body-auto-w {
-    --gkd-w: 100vw;
-  }
-}
-
 .page-size,
 [page-size] {
   width: var(--gkd-w);

src/utils/others.ts

@@ -1,6 +1,5 @@
 import type { LocationQuery } from 'vue-router';
 import { message } from './discrete';
-import root from './root';
 import { Teleport } from 'vue';
 import BodyScrollbar from '@/components/BodyScrollbar.vue';
 
@@ -66,24 +65,6 @@ export const copy = (() => {
   };
 })();
 
-const useAutoCls = (el: Element, cls: string) => {
-  el.classList.add(cls);
-  onMounted(() => {
-    el.classList.add(cls);
-  });
-  onUnmounted(() => {
-    el.classList.remove(cls);
-  });
-};
-
-export const useAutoHeight = () => {
-  useAutoCls(root, 'app-auto-h');
-};
-
-export const useAutoWidth = () => {
-  useAutoCls(document.body, 'body-auto-w');
-};
-
 export const timeAgo = (date: number) => {
   const seconds = Math.floor((Date.now() - date) / 1000);
   const interval = Math.floor(seconds / 31536000);

src/views/SelectorPage.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
 import SelectorText from '@/components/SelectorText.vue';
-import { useAutoHeight, useAutoWidth } from '@/utils/others';
 import {
   AstNode,
-  Selector,
   GkdException,
+  Selector,
   SyntaxException,
 } from '@gkd-kit/selector';
 import * as base64url from 'universal-base64url';
 
-useAutoHeight();
-useAutoWidth();
-
 const route = useRoute();
 const router = useRouter();
 
@@ -68,7 +64,7 @@ const error = computed(() => {
 });
 </script>
 <template>
-  <div page-size flex items-center gap-16px pt-12px px-12px>
+  <div flex items-center gap-16px pt-12px px-12px>
     <NTooltip placement="right">
       <template #trigger>
         <NButton text>
@@ -83,7 +79,7 @@ const error = computed(() => {
       </template>
       回到首页
     </NTooltip>
-    <div flex gap-16px>
+    <div flex gap-16px items-center>
       <div text-18px>测试选择器</div>
       <div>语法高亮/错误解析</div>
     </div>