fix 侧边栏

src/components/admin/ProductFormDialog.vue

@@ -54,11 +54,19 @@
           </el-form-item>
 
           <el-form-item label="是否启用" prop="is_enabled">
-            <el-switch v-model="form.is_enabled" />
+            <el-switch 
+              v-model="form.is_enabled" 
+              :active-value="true"
+              :inactive-value="false"
+            />
           </el-form-item>
 
           <el-form-item label="是否展示" prop="is_visible">
-            <el-switch v-model="form.is_visible" />
+            <el-switch 
+              v-model="form.is_visible" 
+              :active-value="true"
+              :inactive-value="false"
+            />
           </el-form-item>
         </div>
 
@@ -371,7 +379,6 @@ const form = reactive({
   seo_description: '',
   seo_keywords: ''
 })
-
 // 表单验证规则
 const rules = {
   code: [
@@ -492,13 +499,16 @@ const handleCreateMode = () => {
     if (key === 'is_package') {
       form[key] = false
     } else if (key === 'is_enabled' || key === 'is_visible') {
-      form[key] = true
-    } else if (key === 'price') {
+      // 保持默认值 true，但允许用户在界面上切换
+      // 注意：这里不强制设置，让用户可以在界面上自由切换
+      // 默认值已经在 form 初始化时设置为 true（第375-376行）
+    } else if (key === 'price' || key === 'cost_price') {
       form[key] = 0
     } else {
       form[key] = ''
     }
   })
+  console.log('form', form)
 }
 
 // 处理组合包数据
@@ -746,6 +756,10 @@ const handleSubmit = async () => {
     submitting.value = true
 
     const submitData = { ...form }
+    
+    // 确保布尔值正确传递
+    submitData.is_enabled = Boolean(form.is_enabled)
+    submitData.is_visible = Boolean(form.is_visible)
 
     if (isEdit.value) {
       // 编辑模式

src/components/layout/AppSidebar.vue

@@ -34,6 +34,7 @@
 <script setup>
 import { useAppStore } from '@/stores/app'
 import { useUserStore } from '@/stores/user'
+import { onMounted, onUnmounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -51,6 +52,7 @@ const props = defineProps({
 const appStore = useAppStore()
 const userStore = useUserStore()
 const router = useRouter()
+let bodyLockClassApplied = false
 
 // 使用ref来控制菜单展开状态
 const openeds = ref([])
@@ -117,6 +119,36 @@ const handleMenuSelect = () => {
     appStore.closeMobileSidebar()
   }
 }
+
+// 当移动端侧边栏打开时，锁定页面点击与滚动，确保其他区域点击无效
+const toggleBodyLock = (locked) => {
+  const body = document.body
+  if (locked) {
+    if (!bodyLockClassApplied) {
+      body.classList.add('sidebar-locked')
+      bodyLockClassApplied = true
+    }
+  } else if (bodyLockClassApplied) {
+    body.classList.remove('sidebar-locked')
+    bodyLockClassApplied = false
+  }
+}
+
+onMounted(() => {
+  toggleBodyLock(appStore.isMobile && appStore.mobileSidebarOpen)
+})
+
+onUnmounted(() => {
+  toggleBodyLock(false)
+})
+
+watch(
+  () => [appStore.isMobile, appStore.mobileSidebarOpen],
+  ([isMobile, open]) => {
+    toggleBodyLock(isMobile && open)
+  },
+  { immediate: true }
+)
 </script>
 
 <style scoped>
@@ -133,6 +165,7 @@ const handleMenuSelect = () => {
   display: flex;
   flex-direction: column;
   position: relative;
+  width: 100%;
   z-index: 1001;
 }
 
@@ -142,10 +175,7 @@ const handleMenuSelect = () => {
   flex: 1 1 0%;
   overflow-y: auto;
   overflow-x: hidden;
-}
-
-.sidebar-menu:not(.el-menu--collapse) {
-  width: 240px;
+  width: 100%;
 }
 
 .menu-item {
@@ -220,20 +250,21 @@ const handleMenuSelect = () => {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(255, 255, 255, 0.65); /* 保持浅色，不要黑色遮罩 */
+  backdrop-filter: blur(2px);
   z-index: 999;
 }
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-  .sidebar-menu:not(.el-menu--collapse) {
-    width: 240px;
+  .sidebar-menu {
+    width: 100%;
   }
 }
 
 @media (max-width: 480px) {
-  .sidebar-menu:not(.el-menu--collapse) {
-    width: 200px;
+  .sidebar-menu {
+    width: 100%;
   }
 
   .menu-item {
@@ -252,6 +283,18 @@ const handleMenuSelect = () => {
   }
 }
 
+:global(body.sidebar-locked) {
+  overflow: hidden;
+}
+
+:global(body.sidebar-locked #app) {
+  pointer-events: none;
+}
+
+:global(body.sidebar-locked .app-sidebar) {
+  pointer-events: auto;
+}
+
 /* Element Plus 菜单样式覆盖 */
 :deep(.el-menu) {
   background-color: transparent;