style: 重新调整结构

src/views/User/Index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="min-h-screen bg-base-100 container mx-auto p-6 space-y-6 flex flex-row">
+    <ul class="menu bg-base-200 w-56 gap-2 rounded-2xl p-5">
+      <li id="1" @click="setActivePage">
+        <a :class="{ 'menu-active': activePage === 1 }">用户信息</a>
+      </li>
+      <li id="2" @click="setActivePage">
+        <a :class="{ 'menu-active': activePage === 2 }">Item 2</a>
+      </li>
+    </ul>
+    <div class="divider divider-horizontal h-full"></div>
+    <div class="card bg-base-200 w-300"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toNumber } from "lodash";
+import { ref } from "vue";
+
+const activePage = ref(1);
+
+function setActivePage(event: Event) {
+  const target = event.currentTarget as HTMLLinkElement;
+  activePage.value = toNumber(target.id);
+}
+</script>
+
+<style scoped>
+.menu-active {
+  position: relative;
+}
+
+.menu-active::before {
+  content: "";
+  position: absolute;
+  left: -12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 80%;
+  background-color: var(--color-primary);
+  border-radius: 2px;
+}
+</style>