style/首页样式优化， 语音控制新建，搜索项目

src/view/components/speechControl.vue

@@ -72,68 +72,23 @@ const config = {
       params: [],
     },
     {
-      command: "input_username",
+      command: "search_project",
-      description: "在用户名输入框中填写用户名",
+      description: "搜索项目",
       action: "input",
-      selector: "#username, #username-input, input[type='text'][name*='user']",
+      selector: "#search_project",
       params: [
         {
-          name: "username",
+          name: "projectname",
           type: "string",
-          description: "要输入的用户名",
+          description: "要输入的项目名称",
         },
       ],
     },
-    {
-      command: "input_password",
-      description: "在密码输入框中填写密码",
-      action: "input",
-      selector: "#password, #password-input, input[type='password']",
-      params: [
-        {
-          name: "password",
-          type: "string",
-          description: "要输入的密码",
-        },
-      ],
-    },
-    {
-      command: "submit_login",
-      description: "提交登录表单",
-      action: "click",
-      selector: "#submit-login, .login-submit, button[type='submit']",
-      params: [],
-    },
-    {
-      command: "search_product",
-      description: "在搜索框中输入关键词",
-      action: "input",
-      selector: "#search-input, .search-box, input[type='search']",
-      params: [
-        {
-          name: "keyword",
-          type: "string",
-          description: "搜索关键词",
-        },
-      ],
-    },
-    {
-      command: "perform_search",
-      description: "执行搜索操作",
-      action: "click",
-      selector: "#search-button, .search-btn, button[type='submit']",
-      params: [],
-    },
-    {
-      command: "add_to_cart",
-      description: "将当前产品添加到购物车",
-      action: "click",
-      selector: ".add-to-cart, .cart-btn, [data-add-to-cart]",
-      params: [],
-    },
   ],
 };
 
+const listenStatus = ref(false);
+
 const props = defineProps({
   config: {
     type: Object,
@@ -263,7 +218,7 @@ class VoiceControl {
       if (this.isListening) {
         // 只有在用户希望继续聆听时才重启
         setTimeout(() => {
-          this.recognition.start();
+            this.recognition.start();
         }, 100); // 短暂延迟后重启
       } else {
         this.updateUI();
@@ -407,6 +362,9 @@ class VoiceControl {
     }
 
     const element = document.querySelector(commandConfig.selector);
+
+    console.log(element,"-----element");
+
     if (!element) {
       throw new Error(`找不到元素: ${commandConfig.selector}`);
     }
@@ -518,8 +476,14 @@ const toggleListening = () => {
   }
 
   if (voiceControl.value.isListening) {
+    listenStatus.value = false;
     voiceControl.value.stopListening();
+    const voiceBtn = document.getElementById("voice-btn");
+    if (voiceBtn) {
+      voiceBtn.classList.remove("listening");
+    }
   } else {
+    listenStatus.value = true;
     voiceControl.value.startListening();
   }
 };
@@ -547,10 +511,6 @@ body {
 }
 
 .container {
-  max-width: 1200px;
-  width: 100%;
-  text-align: center;
-  padding: 20px;
 }
 
 h1 {

src/view/index.vue

@@ -32,17 +32,6 @@
         </nav>
       </div>
       <div class="line"></div>
-      <!-- 导航菜单 -->
-      <nav class="nav-menu">
-        <ul>
-          <li @click="selectMenu(item)" v-for="item in menu" :class="item.active ? 'active' : ''">
-            <el-icon :size="20">
-              <component :is="item.icon" />
-            </el-icon>
-            <span>{{ item.name }}</span>
-          </li>
-        </ul>
-      </nav>
 
       <!-- 广告卡片 -->
       <el-card header-class="card-header" body-class="card-body">
@@ -102,7 +91,7 @@
           <el-tab-pane label="云托管项目" name="cloud"></el-tab-pane>
         </el-tabs>
         <div class="search-box">
-          <el-input v-model="searchValue" style="width: 260px" class="responsive-input" placeholder="搜索项目"
+          <el-input id="search_project" v-model="searchValue" style="width: 260px" class="responsive-input" placeholder="搜索项目"
             prefix-icon="Search" />
         </div>
       </section>
@@ -127,7 +116,9 @@
                 </el-icon></span>
             </div>
           </div>
-          <div class="card-img"></div>
+          <div class="card-img">
+            <img :src="item.img" alt="">
+          </div>
 
         </div>
 
@@ -144,6 +135,8 @@ import projectModal from '@/view/components/projectModal.vue'
 import { ref } from "vue";
 const dialogVisible = ref(false)
 
+const projectsrc = new URL("./../assets/images/sjdp1.png", import.meta.url).href;
+
 const menu = ref([
   {
     name: "我的项目",
@@ -176,13 +169,14 @@ const menu = ref([
     active: false,
   },
 ]);
+
 const searchValue = ref("");
 const tabName = ref("local");
 
 const projects = ref([
   {
     name: '苏州站基础大屏示例',
-    img: ''
+    img: projectsrc
   }
 ])
 
@@ -431,7 +425,7 @@ const addProject = () => {
     height: 1px;
     background: rgba(255, 255, 255, 0.9);
     position: absolute;
-    left: -220px;
+    left: -150px;
     top: 50%;
     transform: translateY(-50%);
   }
@@ -442,7 +436,7 @@ const addProject = () => {
     height: 1px;
     background: rgba(255, 255, 255, 0.9);
     position: absolute;
-    right: -220px;
+    right: -150px;
     top: 50%;
     transform: translateY(-50%);
   }
@@ -551,6 +545,11 @@ const addProject = () => {
   background: #444;
   border-radius: 4px;
   margin-bottom: 12px;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .card-title {