diff --git a/components/StatusSwitch.uvue b/components/StatusSwitch.uvue
new file mode 100644
index 00000000..83de4f30
--- /dev/null
+++ b/components/StatusSwitch.uvue
@@ -0,0 +1,102 @@
+<template>
+  <view class="switch-mock" :class="modelValue ? 'switch-on' : ''" @click="toggle" :style="customStyle">
+    <view class="switch-dot"></view>
+    <text class="switch-text">{{ modelValue ? activeText : inactiveText }}</text>
+  </view>
+</template>
+
+<script setup lang="uts">
+/**
+ * StatusSwitch 状态切换组件
+ * 用于替代原生 switch，提供更符合后台管理系统的样式和交互
+ */
+
+const props = defineProps({
+  /**
+   * 绑定值
+   */
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 开启时的文字
+   */
+  activeText: {
+    type: String,
+    default: '开启'
+  },
+  /**
+   * 关闭时的文字
+   */
+  inactiveText: {
+    type: String,
+    default: '关闭'
+  },
+  /**
+   * 自定义样式
+   */
+  customStyle: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const toggle = () => {
+  const newValue = !props.modelValue
+  emit('update:modelValue', newValue)
+  emit('change', newValue)
+}
+</script>
+
+<style scoped>
+.switch-mock {
+  width: 54px;
+  height: 24px;
+  background-color: #ccc;
+  border-radius: 12px;
+  position: relative;
+  transition: all 0.3s;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 6px;
+  cursor: pointer;
+}
+
+.switch-on {
+  background-color: #1890ff;
+}
+
+.switch-dot {
+  width: 18px;
+  height: 18px;
+  background-color: #fff;
+  border-radius: 50%;
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  transition: all 0.3s;
+}
+
+.switch-on .switch-dot {
+  left: 33px;
+}
+
+.switch-text {
+  font-size: 12px;
+  color: #fff;
+  margin-left: auto;
+  line-height: 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.switch-on .switch-text {
+  margin-left: 0;
+  margin-right: auto;
+}
+</style>
diff --git a/pages/mall/admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md b/pages/mall/admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md
index 9dde7452..c6940b84 100644
--- a/pages/mall/admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md
+++ b/pages/mall/admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md
@@ -2151,7 +2151,41 @@ curl -i -X OPTIONS "http://192.168.1.61:9122/rest/v1/ml_coupon_templates?select=
 1. **统一数据源 (Single Source of Truth)**：一旦存在后台建表规范 (如 `CONSUMER_DB_DOC`)，前端 `interface` 层应100%镜像字段名，规避繁琐的字段隐射。
 2. **渐进式数据增强 (Progressive Data Enhancement)**: 表格展示优先处理 `loadData`，并引入 `buildParentOptions` 把平铺的数据（Flat Data）映射到 `tree` 组件或下拉框（Select/Picker）。
 3. **细节决定体验**: 在处理 `div`/`view` 改写的组件时，必须补充缺失的交互态（鼠标悬浮、点击动效、内部绝对居中对齐）。
+4. **组件化复用 (Componentization)**: 对于管理后台高频使用的 UI 元素（如状态开关），必须抽取为全局或业务组件（如 `StatusSwitch`），确保交互一致性，支持自定义文字（开启/显示、关闭/隐藏）并简化外部代码量。
 
 ---
 
-这个指南现在涵盖了 uni-app-x 项目开发中最常见的 31 类问题（包含数据源集成实战），为后续开发提供了完整的故障排除和标准化指导。 🚀
+## 🎯 阶段十七: 全局 UI 组件化与标准化 (StatusSwitch 实战)
+
+### **背景与目标**
+
+为了消除管理后台各子页面中“状态开关”实现不统一（样式各异、交互逻辑分散）的问题，本阶段实施了全局 `StatusSwitch` 组件的封装与存量页面自动化替换。
+
+### **核心技术实现**
+
+#### **1. 业务组件封装 (`StatusSwitch.uvue`)**
+
+- **双向绑定**: 完美支持 `v-model` (uts 模式下的 `modelValue`)。
+- **自定义语义化**: 通过 `activeText` 和 `inactiveText` 区分不同场景（如：开启/关闭、显示/隐藏、启用/禁用）。
+- **像素级布局对齐**:
+  - 强制 `line-height` 等于容器高度 (24px)，解决 uts 环境下文本垂直居中的顽疾。
+  - 响应式 `switch-dot` 偏移逻辑，确保开关滑块在开启态精确到位。
+  - 顶部容器追加 `cursor: pointer;` 增强 Web/H5 端的交互反馈。
+
+#### **2. 存量代码“手术级”替换**
+
+针对以下高频场景完成了组件替换：
+
+- **商品分类 (`classification/index.uvue`)**: 剔除冗余的 20+ 行 CSS，简化模板结构。
+- **商品标签 (`labels/index.uvue`)**: 同时支持“状态”和“移动端展示（显示/隐藏）”两种不同语义。
+- **商品保障 (`protection/index.uvue`)**: 统一各页面视觉断点。
+
+### **标准化规范 (开发红线)**
+
+- **禁止内联开关样式**: 凡涉及状态切换的开关，严禁在页面级定义 `.switch-mock` 或 `.status-switch-mini`。必须统一导入并使用 `@/components/StatusSwitch.uvue`。
+- **接口同步**: 必须通过 `v-model` 绑定数据项属性，并在 `@change` 事件中通过 Supabase 完成数据库状态回写，确保 UI 与持久层同步。
+- **文字对齐**: 任何时候文字都应在开关中央水平垂直居中，禁止出现文字偏上或偏下的视觉瑕疵。
+
+---
+
+这个指南现在涵盖了 uni-app-x 项目开发中最常见的 32 类问题（包含全局组件化最佳实践），为后续开发提供了完整的故障排除和标准化指导。 🚀
diff --git a/pages/mall/admin/product/classification/index.uvue b/pages/mall/admin/product/classification/index.uvue
index c45bd575..bdd3286c 100644
--- a/pages/mall/admin/product/classification/index.uvue
+++ b/pages/mall/admin/product/classification/index.uvue
@@ -50,10 +50,7 @@
 <text class="td-cell flex-2" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ item.description || '-' }}</text>
 <text class="td-cell flex-1">{{ item.sort_order }}</text>
 <view class="td-cell flex-2 row-center">
-<view class="switch-mock" :class="item.is_active ? 'switch-on' : ''" @click="toggleStatus(item)">
-<view class="switch-dot"></view>
-<text class="switch-text">{{ item.is_active ? '开启' : '关闭' }}</text>
-</view>
+<StatusSwitch v-model="item.is_active" @change="toggleStatus(item)" />
 </view>
 <view class="td-cell flex-3 row-center">
 <text class="btn-link" @click="openDrawer(item)">编辑</text>
@@ -75,10 +72,7 @@
 <text class="td-cell flex-2" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ child.description || '-' }}</text>
 <text class="td-cell flex-1">{{ child.sort_order }}</text>
 <view class="td-cell flex-2 row-center">
-<view class="switch-mock" :class="child.is_active ? 'switch-on' : ''" @click="toggleStatus(child)">
-<view class="switch-dot"></view>
-<text class="switch-text">{{ child.is_active ? '开启' : '关闭' }}</text>
-</view>
+<StatusSwitch v-model="child.is_active" @change="toggleStatus(child)" />
 </view>
 <view class="td-cell flex-3 row-center">
 <text class="btn-link" @click="openDrawer(child)">编辑</text>
@@ -154,10 +148,7 @@
 <view class="form-item">
 <view class="form-label-box"><text class="form-label">状态:</text></view>
 <view class="form-input-box">
-<view class="switch-mock" :class="form.is_active ? 'switch-on' : ''" @click="form.is_active = !form.is_active">
-<view class="switch-dot"></view>
-<text class="switch-text">{{ form.is_active ? '开启' : '关闭' }}</text>
-</view>
+<StatusSwitch v-model="form.is_active" />
 </view>
 </view>
 </view>
@@ -174,6 +165,7 @@
 <script setup lang="uts">
 import { ref, reactive, onMounted } from 'vue'
 import supa from '@/components/supadb/aksupainstance.uts'
+import StatusSwitch from '@/components/StatusSwitch.uvue'
 
 interface CateItem {
 id: string; // Updated to match UUID string type per DB documentation
@@ -669,51 +661,6 @@ align-items: center;
 justify-content: center;
 }
 
-/* Switch Mock */
-.switch-mock {
-width: 54px;
-height: 24px;
-background-color: #ccc;
-border-radius: 12px;
-position: relative;
-transition: all 0.3s;
-display: flex;
-align-items: center;
-padding: 0 6px;
-cursor: pointer;
-}
-
-.switch-on {
-background-color: #1890ff;
-}
-
-.switch-dot {
-width: 18px;
-height: 18px;
-background-color: #fff;
-border-radius: 50%;
-position: absolute;
-left: 3px;
-top: 3px;
-transition: all 0.3s;
-}
-
-.switch-on .switch-dot {
-left: 33px;
-}
-
-.switch-text {
-font-size: 12px;
-color: #fff;
-margin-left: auto;
-line-height: 24px;
-}
-
-.switch-on .switch-text {
-margin-left: 0;
-margin-right: auto;
-}
-
 /* Drawer styles */
 .drawer-mask {
 position: fixed;
diff --git a/pages/mall/admin/product/labels/index.uvue b/pages/mall/admin/product/labels/index.uvue
index 4105e331..fedcea89 100644
--- a/pages/mall/admin/product/labels/index.uvue
+++ b/pages/mall/admin/product/labels/index.uvue
@@ -52,16 +52,10 @@ class="group-item"
 </view>
 <text class="td-cell flex-3">{{ groups[activeGroupIndex]?.name }}</text>
 <view class="td-cell flex-2 row-center">
-<view class="status-switch-mini" :class="label.status ? 'active' : ''" @click="label.status = !label.status">
-<text class="switch-txt-inner">{{ label.status ? '开启' : '关闭' }}</text>
-<view class="switch-dot-mini"></view>
-</view>
+<StatusSwitch v-model="label.status" />
 </view>
 <view class="td-cell flex-2 row-center">
-<view class="status-switch-mini" :class="label.showInMobile ? 'active' : ''" @click="label.showInMobile = !label.showInMobile">
-<text class="switch-txt-inner">{{ label.showInMobile ? '开启' : '关闭' }}</text>
-<view class="switch-dot-mini"></view>
-</view>
+<StatusSwitch v-model="label.showInMobile" activeText="显示" inactiveText="隐藏" />
 </view>
 <view class="td-cell flex-2 row-center">
 <text class="btn-op-blue" @click="openLabelDrawer(label)">修改</text>
@@ -119,6 +113,7 @@ class="group-item"
 
 <script setup lang="uts">
 import { ref, reactive, computed } from 'vue'
+import StatusSwitch from '@/components/StatusSwitch.uvue'
 
 interface Label {
 id: number;
@@ -316,42 +311,6 @@ border-radius: 4px;
 font-size: 12px;
 }
 
-.status-switch-mini {
-width: 60px;
-height: 24px;
-background-color: #ccc;
-border-radius: 12px;
-position: relative;
-transition: all 0.3s;
-display: flex;
-flex-direction: row;
-align-items: center;
-}
-
-.status-switch-mini.active { background-color: #1890ff; }
-
-.switch-txt-inner {
-font-size: 11px;
-color: #fff;
-margin-left: 24px;
-}
-
-.status-switch-mini.active .switch-txt-inner {
-margin-left: 8px;
-}
-
-.switch-dot-mini {
-width: 18px;
-height: 18px;
-background-color: #fff;
-border-radius: 50%;
-position: absolute;
-left: 3px;
-transition: all 0.3s;
-}
-
-.status-switch-mini.active .switch-dot-mini { left: 39px; }
-
 .btn-op-blue { color: #1890ff; font-size: 14px; cursor: pointer; }
 .btn-op-red { color: #ff4d4f; font-size: 14px; cursor: pointer; }
 .v-line { width: 1px; height: 12px; background-color: #eee; margin: 0 10px; }
diff --git a/pages/mall/admin/product/protection/index.uvue b/pages/mall/admin/product/protection/index.uvue
index d897f287..322904d9 100644
--- a/pages/mall/admin/product/protection/index.uvue
+++ b/pages/mall/admin/product/protection/index.uvue
@@ -32,11 +32,9 @@
 					<text class="td flex-4">{{ item.name }}</text>
 					<text class="td flex-5 color-6">{{ item.desc }}</text>
 					<view class="td flex-2 row-center">
-						<view class="status-switch-mini" :class="item.status ? 'active' : ''" @click="toggleStatus(index)">
-							<view class="switch-dot-mini"></view>
-						</view>
-					</view>
-					<view class="td flex-2 row-center">
+<StatusSwitch v-model="item.status" activeText="显示" inactiveText="隐藏" />
+</view>
+<view class="td flex-2 row-center">
 						<text class="btn-action-blue" @click="openModal(item)">编辑</text>
 						<view class="v-divider-line"></view>
 						<text class="btn-action-red" @click="deleteItem(index)">删除</text>
@@ -105,6 +103,7 @@
 
 <script setup lang="uts">
 import { ref, reactive } from 'vue'
+import StatusSwitch from '@/components/StatusSwitch.uvue'
 
 interface ProtectionItem {
 	id: number;
@@ -268,29 +267,6 @@ function deleteItem(index: number) {
 	height: 30px;
 }
 
-/* Switch */
-.status-switch-mini {
-	width: 44px;
-	height: 20px;
-	background-color: #ccc;
-	border-radius: 10px;
-	position: relative;
-	transition: background-color 0.3s;
-}
-
-.status-switch-mini.active { background-color: #1890ff; }
-.switch-dot-mini {
-	width: 16px;
-	height: 16px;
-	background-color: #fff;
-	border-radius: 50%;
-	position: absolute;
-	top: 2px;
-	left: 2px;
-	transition: left 0.3s;
-}
-.status-switch-mini.active .switch-dot-mini { left: 26px; }
-
 .btn-action-blue { color: #1890ff; font-size: 14px; cursor: pointer; }
 .btn-action-red { color: #ff4d4f; font-size: 14px; cursor: pointer; }
 .v-divider-line { width: 1px; height: 12px; background-color: #eee; margin: 0 10px; }