@ruixinkeji/prism-ui 1.0.0 → 1.0.2

package/components/PrismSwitch/PrismSwitch.vue

@@ -1,202 +1,202 @@
-<template>
-  <view
-    class="prism-switch-component"
-    :class="{
-      'dark-mode': appStore.isDarkMode,
-      'active': modelValue,
-      'square': square,
-      'disabled': disabled,
-      'with-text': showText
-    }"
-    @click="handleToggle"
-  >
-    <!-- 文字显示 -->
-    <view class="switch-text off-text" v-if="showText">{{ offText }}</view>
-    <view class="switch-text on-text" v-if="showText">{{ onText }}</view>
-    <!-- 滑块 -->
-    <view class="switch-thumb"></view>
-  </view>
-</template>
-
-<script setup>
-import { computed } from 'vue';
-import { useAppStore } from '@/store/app';
-
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  // 开启时文字
-  onText: {
-    type: String,
-    default: 'ON'
-  },
-  // 关闭时文字
-  offText: {
-    type: String,
-    default: 'OFF'
-  },
-  // 是否显示文字
-  showText: {
-    type: Boolean,
-    default: false
-  },
-  // 方形开关
-  square: {
-    type: Boolean,
-    default: false
-  },
-  // 禁用状态
-  disabled: {
-    type: Boolean,
-    default: false
-  }
-});
-
-const emit = defineEmits(['update:modelValue', 'change']);
-
-const appStore = useAppStore();
-
-function handleToggle() {
-  if (props.disabled) return;
-  const newValue = !props.modelValue;
-  emit('update:modelValue', newValue);
-  emit('change', newValue);
-}
-</script>
-
-<style lang="scss">
-.prism-switch-component {
-  position: relative;
-  width: 100rpx;
-  height: 56rpx;
-  background: var(--prism-border-color-base, #E5E6EB);
-  border-radius: 28rpx;
-  transition: all 0.3s ease;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-
-  // 滑块
-  .switch-thumb {
-    position: absolute;
-    top: 4rpx;
-    left: 4rpx;
-    width: 48rpx;
-    height: 48rpx;
-    background: #FFFFFF;
-    border-radius: 50%;
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
-    transition: all 0.3s ease;
-    z-index: 2;
-  }
-
-  // 文字样式
-  .switch-text {
-    position: absolute;
-    font-size: 20rpx;
-    font-weight: 500;
-    transition: all 0.3s ease;
-    z-index: 1;
-    white-space: nowrap;
-  }
-
-  .on-text {
-    left: 10rpx;
-    color: transparent;
-  }
-
-  .off-text {
-    right: 10rpx;
-    color: var(--prism-text-secondary, #86909C);
-  }
-
-  // 激活状态
-  &.active {
-    background: var(--prism-primary-color, #3478F6);
-
-    .switch-thumb {
-      left: calc(100% - 52rpx);
-    }
-
-    .on-text {
-      color: #FFFFFF;
-    }
-
-    .off-text {
-      color: transparent;
-    }
-  }
-
-  // 带文字时宽度稍大
-  &.with-text {
-    width: 88rpx;
-    height: 48rpx;
-
-    .switch-thumb {
-      width: 40rpx;
-      height: 40rpx;
-      top: 4rpx;
-      left: 4rpx;
-    }
-
-    .on-text {
-      left: 8rpx;
-    }
-
-    .off-text {
-      right: 8rpx;
-    }
-
-    &.active .switch-thumb {
-      left: calc(100% - 44rpx);
-    }
-  }
-
-  // 方形开关
-  &.square {
-    border-radius: 12rpx;
-
-    .switch-thumb {
-      border-radius: 8rpx;
-    }
-  }
-
-  // 禁用状态
-  &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-}
-
-// 深色模式
-.dark-mode.prism-switch-component {
-  // 关闭状态 - 与checkbox保持一致
-  background: var(--prism-bg-color-card, #1A1A1A);
-  border: 2rpx solid var(--prism-border-color-base, #3A3A3A);
-
-  .switch-thumb {
-    background: var(--prism-text-secondary, #86909C);
-  }
-
-  .off-text {
-    color: var(--prism-text-secondary, #86909C);
-  }
-
-  // 开启状态 - 蓝色（与checkbox一致）
-  &.active {
-    background: var(--prism-primary-color, #3478F6);
-    border-color: var(--prism-primary-color, #3478F6);
-
-    .switch-thumb {
-      background: #FFFFFF;
-    }
-
-    .on-text {
-      color: #FFFFFF;
-    }
-  }
-}
-</style>
+<template>
+  <view
+    class="prism-switch-component"
+    :class="{
+      'dark-mode': appStore.isDarkMode,
+      'active': modelValue,
+      'square': square,
+      'disabled': disabled,
+      'with-text': showText
+    }"
+    @click="handleToggle"
+  >
+    <!-- 文字显示 -->
+    <view class="switch-text off-text" v-if="showText">{{ offText }}</view>
+    <view class="switch-text on-text" v-if="showText">{{ onText }}</view>
+    <!-- 滑块 -->
+    <view class="switch-thumb"></view>
+  </view>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useAppStore } from '@/store/app';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  // 开启时文字
+  onText: {
+    type: String,
+    default: 'ON'
+  },
+  // 关闭时文字
+  offText: {
+    type: String,
+    default: 'OFF'
+  },
+  // 是否显示文字
+  showText: {
+    type: Boolean,
+    default: false
+  },
+  // 方形开关
+  square: {
+    type: Boolean,
+    default: false
+  },
+  // 禁用状态
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const appStore = useAppStore();
+
+function handleToggle() {
+  if (props.disabled) return;
+  const newValue = !props.modelValue;
+  emit('update:modelValue', newValue);
+  emit('change', newValue);
+}
+</script>
+
+<style lang="scss">
+.prism-switch-component {
+  position: relative;
+  width: 100rpx;
+  height: 56rpx;
+  background: var(--prism-border-color-base, #E5E6EB);
+  border-radius: 28rpx;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+
+  // 滑块
+  .switch-thumb {
+    position: absolute;
+    top: 4rpx;
+    left: 4rpx;
+    width: 48rpx;
+    height: 48rpx;
+    background: #FFFFFF;
+    border-radius: 50%;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
+    transition: all 0.3s ease;
+    z-index: 2;
+  }
+
+  // 文字样式
+  .switch-text {
+    position: absolute;
+    font-size: 20rpx;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    z-index: 1;
+    white-space: nowrap;
+  }
+
+  .on-text {
+    left: 10rpx;
+    color: transparent;
+  }
+
+  .off-text {
+    right: 10rpx;
+    color: var(--prism-text-secondary, #86909C);
+  }
+
+  // 激活状态
+  &.active {
+    background: var(--prism-primary-color, #3478F6);
+
+    .switch-thumb {
+      left: calc(100% - 52rpx);
+    }
+
+    .on-text {
+      color: #FFFFFF;
+    }
+
+    .off-text {
+      color: transparent;
+    }
+  }
+
+  // 带文字时宽度稍大
+  &.with-text {
+    width: 88rpx;
+    height: 48rpx;
+
+    .switch-thumb {
+      width: 40rpx;
+      height: 40rpx;
+      top: 4rpx;
+      left: 4rpx;
+    }
+
+    .on-text {
+      left: 8rpx;
+    }
+
+    .off-text {
+      right: 8rpx;
+    }
+
+    &.active .switch-thumb {
+      left: calc(100% - 44rpx);
+    }
+  }
+
+  // 方形开关
+  &.square {
+    border-radius: 12rpx;
+
+    .switch-thumb {
+      border-radius: 8rpx;
+    }
+  }
+
+  // 禁用状态
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+// 深色模式
+.dark-mode.prism-switch-component {
+  // 关闭状态 - 与checkbox保持一致
+  background: var(--prism-bg-color-card, #1A1A1A);
+  border: 2rpx solid var(--prism-border-color-base, #3A3A3A);
+
+  .switch-thumb {
+    background: var(--prism-text-secondary, #86909C);
+  }
+
+  .off-text {
+    color: var(--prism-text-secondary, #86909C);
+  }
+
+  // 开启状态 - 蓝色（与checkbox一致）
+  &.active {
+    background: var(--prism-primary-color, #3478F6);
+    border-color: var(--prism-primary-color, #3478F6);
+
+    .switch-thumb {
+      background: #FFFFFF;
+    }
+
+    .on-text {
+      color: #FFFFFF;
+    }
+  }
+}
+</style>