U: 删除多余注释，HomeView模板中添加<h1>测试</h1>

A: 添加element-plus及其依赖库（@ctrl/tinycolor、@element-plus/icons-vue、@floating-ui、@vueuse/core等）
A: package-lock.json新增多个依赖（async-validator、dayjs、exsolve、confbox等）
U: 更新部分依赖版本以及开发/可选/对等依赖标识

ClientApp/src/App.vue

@@ -78,7 +78,7 @@ function startDrag(event) {
     const rect = navElement.getBoundingClientRect()
     dragOffset.value = {
       x: event.clientX - rect.left,
-      y: event.clientY - rect.top
+      y: event.clientY - rect.top,
     }
 
     // 阻止默认事件，防止文本选择等
@@ -91,7 +91,7 @@ function onDrag(event) {
     // 计算新位置
     navPosition.value = {
       x: event.clientX - dragOffset.value.x,
-      y: event.clientY - dragOffset.value.y
+      y: event.clientY - dragOffset.value.y,
     }
     event.preventDefault()
   }
@@ -115,81 +115,37 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="main-container">
+  <div class="relative w-full h-full">
     <!-- 可拖动的导航栏 -->
     <div
       v-if="isShowGenerateRouter"
       ref="navRef"
-      class="floating-navigation"
+      class="fixed z-[9999] bg-white rounded-lg shadow-lg p-1.5 min-w-[300px] cursor-move"
       :style="{ left: `${navPosition.x}px`, top: `${navPosition.y}px` }"
       @mousedown="startDrag"
     >
-      <div class="drag-handle">
-        <span>≡</span> <!-- 拖动图标 -->
+      <div class="bg-red:10 p-1.5 text-center border-b border-[#eee] text-lg cursor-move drag-handle">
+        <span class="inline-block px-2">≡</span>
       </div>
-      <ul class="nav-list">
-        <li v-for="(subRoute, index) in subRouteLists" :key="index">
-          <v-btn :type="isActive(subRoute.path) ? 'primary' : ''" @click="listClickJump(subRoute)">
+      <ul class="flex flex-wrap justify-start p-1.5 m-0">
+        <li
+          v-for="(subRoute, index) in subRouteLists"
+          :key="index"
+          class="text-center m-2"
+        >
+          <el-button
+            :type="isActive(subRoute.path) ? 'primary' : ''"
+            @click="listClickJump(subRoute)"
+          >
             {{ subRoute.displayName }}
-          </v-btn>
+          </el-button>
         </li>
       </ul>
     </div>
 
-    <!--  展示主要内容-->
-    <div class="main-show">
+    <!-- 展示主要内容 -->
+    <div class="w-full h-full">
       <router-view />
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.main-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  .floating-navigation {
-    z-index: 9999; // 确保在最上层
-    position: fixed; // 改为固定定位，不随滚动条滚动
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-    padding: 5px;
-    min-width: 300px;
-    cursor: move; // 鼠标显示为可移动状态
-
-    .drag-handle {
-      padding: 5px;
-      text-align: center;
-      border-bottom: 1px solid #eee;
-      font-size: 18px;
-      cursor: move;
-
-      span {
-        display: inline-block;
-        padding: 0 10px;
-      }
-    }
-
-    .nav-list {
-      display: flex;
-      flex-wrap: wrap; // 允许内容换行
-      justify-content: flex-start;
-      list-style: none;
-      padding: 5px;
-      margin: 0;
-
-      li {
-        margin: 3px;
-        text-align: center;
-      }
-    }
-  }
-
-  .main-show {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

ClientApp/src/assets/main.css

@@ -1 +1,6 @@
 @import './base.css';
+
+
+li{
+  list-style: none;
+}

ClientApp/src/components/CommandManager.vue

@@ -33,15 +33,21 @@ const invokeCommand = async (module: CommandType) => {
 </script>
 
 <template>
-  <div class="container">
-    <div class="modules-grid">
-      <div v-for="(module, index) in modules" :key="index" class="module-card">
-        <h2 class="module-title">{{ module.name }}</h2>
-        <p class="module-description">{{ module.description }}</p>
+  <div class="p-6 font-sans">
+    <div class="flex flex-wrap gap-6 w-full justify-center">
+      <div v-for="(module, index) in modules" :key="index" class="w-full border shadow-lg p-4 shadow-md rounded-md">
+        <h2 class="text-lg font-semibold mb-2 select-text pointer-events-auto">
+          {{ module.name }}
+        </h2>
+        <p class="text-gray-600 mb-4">{{ module.description }}</p>
 
-        <div class="params-container">
-          <div v-for="(param, paramIndex) in module.params" :key="paramIndex" class="param-item">
-            <label :for="`${module.name}-${param.name}`" class="param-label">
+        <div class="w-full flex flex-row">
+          <div
+            v-for="(param, paramIndex) in module.params"
+            :key="paramIndex"
+            class="flex flex-col gap-1 w-full m-2"
+          >
+            <label :for="`${module.name}-${param.name}`" class="block font-bold text-red-400">
               {{ param.label }}
             </label>
             <input
@@ -50,136 +56,32 @@ const invokeCommand = async (module: CommandType) => {
               v-model="param.value"
               :placeholder="param.placeholder"
               type="text"
-              class="text-input"
+              class="w-full px-3 py-2 border border-gray-500 rounded-md focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-300"
             />
             <input
               v-if="param.type === 'checkbox'"
               :id="`${module.name}-${param.name}`"
               v-model="param.value"
               type="checkbox"
-              class="checkbox-input"
+              class="rounded checked:bg-blue-500"
             />
           </div>
         </div>
 
-        <button @click="invokeCommand(module)" class="action-button">触发 {{ module.name }}</button>
+        <button
+          @click="invokeCommand(module)"
+          class="mt-4 w-full py-2 bg-blue-700 text-white rounded-md border-none cursor-pointer hover:bg-blue-600"
+        >
+          触发 {{ module.name }}
+        </button>
 
-        <div v-if="module.result" class="result-container">
-          <h3 class="result-title">结果</h3>
-          <pre class="result-content">{{ module.result }}</pre>
+        <div v-if="module.result" class="mt-4 p-3 bg-gray-100 border border-gray-300 rounded-md">
+          <div class="font-semibold mb-2">结果</div>
+          <div class="text-sm whitespace-pre-wrap select-text pointer-events-auto">
+            {{ module.result }}
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.container {
-  padding: 1.5rem; // p-6
-  font-family: sans-serif;
-
-  .modules-grid {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1.5rem; // gap-6
-    width: 100%;
-    justify-content: center;
-
-    .module-card {
-      width: 100%;
-      padding: 1rem; // p-4
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); // shadow-md
-      border-radius: 0.375rem; // rounded-md
-
-      .module-title {
-        font-size: 1.125rem; // text-lg
-        font-weight: 600; // font-semibold
-        margin-bottom: 0.5rem; // mb-2
-        user-select: text; /* 允许选中 */
-        pointer-events: auto; /* 确保可以响应鼠标操作 */
-      }
-
-      .module-description {
-        color: #718096; // text-gray-600
-        margin-bottom: 1rem; // mb-4
-      }
-
-      .params-container {
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-
-        .param-item {
-          display: flex;
-          flex-direction: column;
-          gap: 0.25rem; // space-y-1
-          width: 100%;
-          margin: 0.5rem; // m-2
-
-          .param-label {
-            display: block;
-            font-weight: 700; // font-bold
-            color: #f56565; // text-red-400
-          }
-
-          .text-input {
-            width: 100%;
-            padding: 0.5rem 0.75rem; // px-3 py-2
-            border: 1px solid #e2e8f0; // border border-gray-300
-            border-radius: 0.375rem; // rounded-md
-
-            &:focus {
-              outline: none;
-              border-color: #4299e1;
-              box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-            }
-          }
-
-          .checkbox-input {
-            border-radius: 0.25rem; // rounded
-
-            &:checked {
-              background-color: #4299e1;
-            }
-          }
-        }
-      }
-
-      .action-button {
-        margin-top: 1rem; // mt-4
-        width: 100%;
-        padding: 0.5rem 0; // py-2
-        background-color: #2b6cb0; // bg-blue-700
-        color: white;
-        border-radius: 0.375rem; // rounded-md
-        border: none;
-        cursor: pointer;
-
-        &:hover {
-          background-color: #3182ce; // bg-blue-600
-        }
-      }
-
-      .result-container {
-        margin-top: 1rem; // mt-4
-        padding: 0.75rem; // p-3
-        background-color: #f7fafc; // bg-gray-100
-        border: 1px solid #e2e8f0;
-        border-radius: 0.375rem; // rounded-md
-
-        .result-title {
-          font-weight: 600; // font-semibold
-          margin-bottom: 0.5rem; // mb-2
-        }
-
-        .result-content {
-          font-size: 0.875rem; // text-sm
-          white-space: pre-wrap;
-          user-select: text; /* 允许选中 */
-          pointer-events: auto; /* 确保可以响应鼠标操作 */
-        }
-      }
-    }
-  }
-}
-</style>

ClientApp/src/constants/app.ts

@@ -27,7 +27,7 @@ const app = {
   /**
    * 是否展示生成路由
    */
-  IS_SHOW_GENERATE_ROUTER: false
+  IS_SHOW_GENERATE_ROUTER: true
 }
 
 export default app

ClientApp/src/main.ts

@@ -1,27 +1,21 @@
 import './assets/main.css'
-
+import 'virtual:uno.css'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
 
-// Vuetify
-import 'vuetify/styles'
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
 
 const app = createApp(App)
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+import ElementPlus from 'element-plus'
+
+import { presetMini } from 'unocss'
 
 app.use(createPinia())
 app.use(router)
-app.use(vuetify)
+app.use(ElementPlus)
 
 app.mount('#app')
 

ClientApp/src/views/HomeView.vue

@@ -4,10 +4,8 @@ import TheWelcome from '../components/TheWelcome.vue'
 
 <template>
   <main>
-<!--    顶部工具栏-->
-
-<!--    核心内容展示部分-->
 <!--  左侧信息栏-->
+<h1>测试</h1>
 <!--    左侧顶部搜索栏-->
 <!--    左侧底部信息展示栏-->
 

ClientApp/src/views/dev/DevIndex.vue

@@ -93,148 +93,47 @@ function jumpToHome() {
 
 // endregion
 </script>
-
 <template>
-  <div class="root-container">
-    <h1 class="title">Dev</h1>
+  <div class="h-auto select-none">
+    <h1 class="text-blue-900 font-bold font-sans text-[3rem] text-center py-10">Dev</h1>
     <hr />
 
-    <div v-if="routerListIsEmpty" class="empty-container">
-      <div class="empty-message">
+    <div v-if="routerListIsEmpty" class="bg-slate-50 overflow-hidden">
+      <div class="text-center font-serif text-red-500 text-[3.75rem] pb-[20rem]">
         无数据!
         <br />
-        <div class="countdown-box">
-          <div class="countdown-top">
-            <p id="animated-text" class="countdown-number">9</p>
+        <div
+          class="inline-flex translate-x-[-20rem] translate-y-10 text-[1.5rem] min-h-[10rem] h-[10rem] max-h-[10rem] text-blue-900 justify-center items-center"
+        >
+          <div class="h-[6rem] overflow-hidden text-center">
+            <p id="animated-text" class="text-[2.25rem]">9</p>
           </div>
-          <p class="jump-message">
+          <p class="ml-4">
             <span>秒后跳转至</span>
-            <span class="jump-link" @click="jumpToHome">主页</span>
+            <span class="underline cursor-pointer ml-1.5" @click="jumpToHome">主页</span>
           </p>
         </div>
       </div>
     </div>
 
-    <div v-else class="main-content">
-      <ul class="nav-list">
+    <div v-else class="flex flex-col mt-5 mx-auto w-9/12">
+      <ul class="hidden lg:block mr-20">
         <li
-          class="nav-item"
           v-for="(subRoute, index) in subRouteLists"
-          :class="{ active: isActive(subRoute.path) }"
           :key="index"
+          :class="[
+            'list-none p-1 m-1 transition-all duration-300 ease-in-out select-none cursor-pointer text-gray-700 hover:text-yellow-300',
+            isActive(subRoute.path) && 'font-bold underline text-[1.5rem]',
+          ]"
           @click="listClickJump(subRoute)"
         >
           {{ subRoute.displayName }}
         </li>
       </ul>
-      <main class="router-content">
+
+      <main class="flex flex-col mt-5 overflow-y-auto">
         <router-view />
       </main>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.root-container {
-  height: auto;
-  user-select: none;
-}
-
-.title {
-  color: #1e3a8a; // tailwind's text-blue-900
-  font-weight: bold;
-  font-family: sans-serif;
-  font-size: 3rem;
-  text-align: center;
-  padding: 2.5rem 0;
-}
-
-.empty-container {
-  background-color: #f8fafc; // slate-50
-  overflow: hidden;
-}
-
-.empty-message {
-  text-align: center;
-  font-family: serif;
-  color: #ef4444; // red-500
-  font-size: 3.75rem;
-  padding-bottom: 20rem;
-}
-
-.countdown-box {
-  display: inline-flex;
-  transform: translate(-20rem, 2.5rem); // 原 translate-x-80 translate-y-10
-  font-size: 1.5rem;
-  min-height: 10rem;
-  height: 10rem;
-  max-height: 10rem;
-  color: #1e3a8a;
-  justify-content: center;
-  align-items: center;
-}
-
-.countdown-top {
-  height: 6rem;
-  overflow: hidden;
-  text-align: center;
-}
-
-.countdown-number {
-  font-size: 2.25rem;
-}
-
-.jump-message {
-  margin-left: 1rem;
-}
-
-.jump-link {
-  text-decoration: underline;
-  cursor: pointer;
-  margin-left: 0.375rem;
-}
-
-.main-content {
-  display: flex;
-  margin-top: 1.25rem;
-  flex-direction: column;
-  margin-inline: auto;
-  width: 75%; // 相当于 lg:w-9/12
-}
-
-.nav-list {
-  margin-right: 5rem;
-  display: none;
-
-  @media (min-width: 1024px) {
-    display: block;
-  }
-}
-
-.nav-item {
-  list-style: none;
-  padding: 0.25rem;
-  margin: 0.25rem;
-  transition: all 0.3s ease;
-  user-select: none;
-  cursor: pointer;
-  color: #4b5563; // gray-700
-
-  &:hover {
-    color: #facc15; // yellow-300
-  }
-
-  &.active {
-    font-weight: bold;
-    text-decoration: underline;
-    font-size: 1.5rem;
-  }
-}
-
-.router-content {
-  display: flex;
-  flex-direction: column;
-  margin: 1.25rem auto auto;
-  overflow-y: auto;
-}
-</style>

ClientApp/src/views/dev/win/WinDivertCommand.vue

@@ -5,9 +5,11 @@ import { onMounted, onUnmounted } from 'vue'
 import CSharpBridgeV2 from '@/correspond/CSharpBridgeV2'
 
 const bridge = CSharpBridgeV2.getBridge()
-bridge.listen('showMessage', (data) => {
-  console.log('11111111', data)
-})
+if (bridge !== null){
+  bridge.listen('showMessage', (data) => {
+    console.log('11111111', data)
+  })
+}
 
 function func() {
   console.log('点击anniu')