feat: SelectorPage

src/App.vue

@@ -21,16 +21,18 @@ $winMinHeight: 700px;
 }
 
 body {
-  &:not(.mobile) {
-    width: var(--gkd-w);
+  width: var(--gkd-w);
+  &.body-auto-w {
+    --gkd-w: 100vw;
   }
 }
 
 #app {
   display: flex;
   flex-direction: column;
-  &:not(.app-auto-h) {
-    height: var(--gkd-h);
+  height: var(--gkd-h);
+  &.app-auto-h {
+    --gkd-h: auto;
   }
 }
 .gkd_code,

src/utils/others.ts

@@ -66,16 +66,24 @@ export const copy = (() => {
   };
 })();
 
-export const useAutoHeight = () => {
-  const cls = 'app-auto-h';
+const useAutoCls = (el: Element, cls: string) => {
+  el.classList.add(cls);
   onMounted(() => {
-    root.classList.add(cls);
+    el.classList.add(cls);
   });
   onUnmounted(() => {
-    root.classList.remove(cls);
+    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,14 +1,18 @@
 <script setup lang="ts">
-import { useAutoHeight } from '@/utils/others';
+import { useAutoHeight, useAutoWidth } from '@/utils/others';
 
-// 页面: 输入框, 输入后解析当前选择器的结构
 useAutoHeight();
+useAutoWidth();
+
+const text = shallowRef('');
 </script>
 <template>
   <div flex flex-col items-center p-8px>
-    <input />
-    <div v-for="i in 60" :key="i">
-      {{ Math.random() }}
-    </div>
+    <NInput
+      v-model:value="text"
+      type="textarea"
+      placeholder="请输入选择器"
+      class="gkd_code"
+    />
   </div>
 </template>