新版ui

src/views/nav.vue

@@ -1,89 +1,48 @@
 <template>
-  <div class="app-container">
-    <Sidebar class="noneText" @activeIndex="activeIndexFn" />
-    <div class="content ">
-      <div v-show="activeIndexA == 1">
-        <workbenches />
-      </div>
-      <div v-show="activeIndexA == 2">
-        <hostsList />
-      </div>
-      <div style="position: absolute; bottom: 0; right: 0;">{{ version }}</div>
-
-
+  <div class="bg-background-light dark:bg-background-dark text-slate-800 dark:text-slate-200 subtle-grid shadow-2xl overflow-hidden mx-auto" style="width: 1600px; height: 900px;">
+    <div class="flex h-full overflow-hidden">
+      <Sidebar class="flex-none h-full" @activeIndex="activeIndexFn" />
+      <main class="flex-1 overflow-y-auto p-4 relative flex flex-col h-full bg-[#f3f5f9]">
+        <div v-show="activeIndexA == 1" class="h-full">
+          <workbenches />
+        </div>
+        <div v-show="activeIndexA == 2" class="h-full">
+          <hostsList />
+        </div>
+        <!-- Decorative blobs -->
+        <!-- <div class="absolute -top-24 -right-24 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none"></div> -->
+        <!-- <div class="absolute -bottom-24 -left-24 w-64 h-64 bg-secondary/5 rounded-full blur-3xl pointer-events-none"></div> -->
+        
+        <!-- <div class="absolute bottom-2 right-4 text-xs text-slate-400">{{ version }}</div> -->
+      </main>
     </div>
   </div>
 </template>
 
 <script setup>
 import Sidebar from '../components/Sidebar.vue';
-import { RouterLink, RouterView } from 'vue-router'
 import hostsList from '@/views/hosts/hostsList.vue'
 import workbenches from '@/views/hosts/workbenches.vue'
 import { ref } from 'vue'
-import { getUser } from '@/utils/storage'
-// import { usePythonBridge } from '@/utils/pythonBridge'
-
-
-
-
-
 
 let activeIndexA = ref(1)
+const version = ref('v0.1.0')
 
 function activeIndexFn(data) {
   activeIndexA.value = data
   console.log(data)
 }
-
-
 </script>
 
-<style lang="less">
-body,
-html {
+<style>
+/* Global resets if needed, but Tailwind handles most */
+body {
   margin: 0;
   padding: 0;
-  height: 100%;
-}
-
-.app-container {
+  background-color: #f3f5f9; /* Match background */
   display: flex;
-  width: 1600px;
-  height: 900px;
-  background-color: @bg-color;
-  position: relative;
-
-
-}
-
-.noneText {
-  /* 页面无法选中 */
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.sidebar {
-  width: 200px;
-  background-color: @bg-color;
-  padding: 20px;
-  /* box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); */
-}
-
-.content {
-  margin-left: 280px;
-  width: 1304px;
-  height: 868px;
-  background: #FFFFFF;
-  border-radius: 36px;
-  margin-top: 16px;
-}
-
-.center-justify {
-  display: flex;
-  justify-content: space-around;
+  justify-content: center;
   align-items: center;
+  min-height: 100vh;
 }
 </style>