@ruixinkeji/prism-ui 1.0.0 → 1.0.2

package/components/PrismTabBar/PrismTabBar.vue

@@ -1,147 +1,147 @@
-<template>
-  <view class="prism-tabbar" :class="{ 'dark-mode': appStore.isDarkMode, 'glass-effect': glass, 'wechat-browser': isWechatBrowser }">
-    <view
-      class="prism-tabbar-item"
-      v-for="(item, index) in tabList"
-      :key="index"
-      :class="{ active: currentPath === item.path }"
-      @click="switchTab(item.path)"
-    >
-      <view class="prism-tabbar-icon-wrapper" :class="{ active: currentPath === item.path }">
-        <text class="fa prism-tabbar-icon" :class="item.icon"></text>
-      </view>
-      <text class="prism-tabbar-text">{{ item.text }}</text>
-    </view>
-  </view>
-</template>
-
-<script setup>
-import { computed, ref, onMounted } from 'vue';
-import { useAppStore } from '@/store/app';
-
-const props = defineProps({
-  current: {
-    type: String,
-    default: ''
-  },
-  glass: {
-    type: Boolean,
-    default: true
-  },
-  tabs: {
-    type: Array,
-    default: () => [
-      { path: '/pages/index/index', text: '首页', icon: 'fa-home' },
-      { path: '/pages/icons/icons', text: '图标', icon: 'fa-icons' },
-      { path: '/pages/examples/examples', text: '案例', icon: 'fa-layer-group' },
-      { path: '/pages/tools/tools', text: '工具', icon: 'fa-screwdriver-wrench' }
-    ]
-  }
-});
-
-const appStore = useAppStore();
-const currentPath = computed(() => props.current);
-const tabList = computed(() => props.tabs);
-
-// 检测是否是微信浏览器
-const isWechatBrowser = ref(false);
-onMounted(() => {
-  // #ifdef H5
-  const ua = navigator.userAgent.toLowerCase();
-  isWechatBrowser.value = ua.includes('micromessenger');
-  // #endif
-});
-
-function switchTab(path) {
-  if (currentPath.value === path) return;
-  uni.reLaunch({ url: path });
-}
-</script>
-
-<style lang="scss" scoped>
-.prism-tabbar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  padding: 15rpx 0;
-  padding-bottom: env(safe-area-inset-bottom, 0px);
-  z-index: 999;
-  background: var(--prism-bg-color-card);
-  border-top: 1rpx solid var(--prism-border-color-light);
-
-  // 微信浏览器下添加额外底部间距
-  &.wechat-browser {
-    padding-bottom: calc(60rpx + env(safe-area-inset-bottom, 0px));
-  }
-
-  /* #ifndef H5 */
-  &.glass-effect {
-    background: rgba(255, 255, 255, 0.4);
-    backdrop-filter: saturate(180%) blur(40px);
-    -webkit-backdrop-filter: saturate(180%) blur(40px);
-    border-top: 1rpx solid rgba(0, 0, 0, 0.1);
-    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
-  }
-  /* #endif */
-}
-
-.prism-tabbar-item {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4rpx;
-
-  &.active {
-    .prism-tabbar-icon,
-    .prism-tabbar-text {
-      color: var(--prism-primary-color, #3478F6);
-    }
-  }
-}
-
-.prism-tabbar-icon-wrapper {
-  width: 48rpx;
-  height: 48rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-
-  &.active {
-    transform: translateY(-4rpx) scale(1.1);
-  }
-}
-
-.prism-tabbar-icon {
-  font-size: 36rpx;
-  color: var(--prism-text-secondary, #86909C);
-  line-height: 1;
-  display: block;
-  transition: all 0.3s ease;
-}
-
-.prism-tabbar-icon-wrapper.active .prism-tabbar-icon {
-  color: var(--prism-primary-color, #3478F6);
-  -webkit-text-stroke: 0.5px var(--prism-primary-color, #3478F6);
-}
-
-.prism-tabbar-text {
-  font-size: 20rpx;
-  color: var(--prism-text-secondary, #86909C);
-}
-
-/* 深色模式 - 毛玻璃效果 */
-/* #ifndef H5 */
-.prism-tabbar.dark-mode.glass-effect {
-  background: rgba(26, 26, 26, 0.4);
-  border-top-color: rgba(255, 255, 255, 0.12);
-  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.4);
-}
-/* #endif */
-</style>
+<template>
+  <view class="prism-tabbar" :class="{ 'dark-mode': appStore.isDarkMode, 'glass-effect': glass, 'wechat-browser': isWechatBrowser }">
+    <view
+      class="prism-tabbar-item"
+      v-for="(item, index) in tabList"
+      :key="index"
+      :class="{ active: currentPath === item.path }"
+      @click="switchTab(item.path)"
+    >
+      <view class="prism-tabbar-icon-wrapper" :class="{ active: currentPath === item.path }">
+        <text class="fa prism-tabbar-icon" :class="item.icon"></text>
+      </view>
+      <text class="prism-tabbar-text">{{ item.text }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+import { useAppStore } from '@/store/app';
+
+const props = defineProps({
+  current: {
+    type: String,
+    default: ''
+  },
+  glass: {
+    type: Boolean,
+    default: true
+  },
+  tabs: {
+    type: Array,
+    default: () => [
+      { path: '/pages/index/index', text: '首页', icon: 'fa-home' },
+      { path: '/pages/icons/icons', text: '图标', icon: 'fa-icons' },
+      { path: '/pages/examples/examples', text: '案例', icon: 'fa-layer-group' },
+      { path: '/pages/tools/tools', text: '工具', icon: 'fa-screwdriver-wrench' }
+    ]
+  }
+});
+
+const appStore = useAppStore();
+const currentPath = computed(() => props.current);
+const tabList = computed(() => props.tabs);
+
+// 检测是否是微信浏览器
+const isWechatBrowser = ref(false);
+onMounted(() => {
+  // #ifdef H5
+  const ua = navigator.userAgent.toLowerCase();
+  isWechatBrowser.value = ua.includes('micromessenger');
+  // #endif
+});
+
+function switchTab(path) {
+  if (currentPath.value === path) return;
+  uni.reLaunch({ url: path });
+}
+</script>
+
+<style lang="scss" scoped>
+.prism-tabbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 15rpx 0;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  z-index: 999;
+  background: var(--prism-bg-color-card);
+  border-top: 1rpx solid var(--prism-border-color-light);
+
+  // 微信浏览器下添加额外底部间距
+  &.wechat-browser {
+    padding-bottom: calc(60rpx + env(safe-area-inset-bottom, 0px));
+  }
+
+  /* #ifndef H5 */
+  &.glass-effect {
+    background: rgba(255, 255, 255, 0.4);
+    backdrop-filter: saturate(180%) blur(40px);
+    -webkit-backdrop-filter: saturate(180%) blur(40px);
+    border-top: 1rpx solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
+  }
+  /* #endif */
+}
+
+.prism-tabbar-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4rpx;
+
+  &.active {
+    .prism-tabbar-icon,
+    .prism-tabbar-text {
+      color: var(--prism-primary-color, #3478F6);
+    }
+  }
+}
+
+.prism-tabbar-icon-wrapper {
+  width: 48rpx;
+  height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  &.active {
+    transform: translateY(-4rpx) scale(1.1);
+  }
+}
+
+.prism-tabbar-icon {
+  font-size: 36rpx;
+  color: var(--prism-text-secondary, #86909C);
+  line-height: 1;
+  display: block;
+  transition: all 0.3s ease;
+}
+
+.prism-tabbar-icon-wrapper.active .prism-tabbar-icon {
+  color: var(--prism-primary-color, #3478F6);
+  -webkit-text-stroke: 0.5px var(--prism-primary-color, #3478F6);
+}
+
+.prism-tabbar-text {
+  font-size: 20rpx;
+  color: var(--prism-text-secondary, #86909C);
+}
+
+/* 深色模式 - 毛玻璃效果 */
+/* #ifndef H5 */
+.prism-tabbar.dark-mode.glass-effect {
+  background: rgba(26, 26, 26, 0.4);
+  border-top-color: rgba(255, 255, 255, 0.12);
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.4);
+}
+/* #endif */
+</style>

package/components/PrismTabs/PrismTabs.vue

@@ -1,49 +1,49 @@
-<template>
-  <view class="prism-tabs-container" :class="{ 'prism-tabs-container--chrome': type === 'chrome' }">
-    <view class="prism-tabs-wrapper" :class="[`prism-tabs--${type}`]">
-      <view
-        v-for="(item, index) in tabs"
-        :key="index"
-        class="prism-tabs__item"
-        :class="{ 'active': modelValue === index }"
-        @click="handleClick(index)"
-      >
-        <text>{{ item.label || item }}</text>
-        <text v-if="item.badge !== undefined" class="prism-tabs__badge">{{ item.badge }}</text>
-      </view>
-    </view>
-    <!-- Chrome 类型的内容区域插槽 -->
-    <view v-if="type === 'chrome'" class="prism-tabs__content">
-      <slot></slot>
-    </view>
-  </view>
-</template>
-
-<script setup>
-defineProps({
-  tabs: {
-    type: Array,
-    required: true
-    // 格式: ['标签1', '标签2'] 或 [{ label: '标签1', badge: 10 }]
-  },
-  modelValue: {
-    type: Number,
-    default: 0
-  },
-  type: {
-    type: String,
-    default: 'line' // 'line' | 'card' | 'chrome'
-  }
-});
-
-const emit = defineEmits(['update:modelValue', 'change']);
-
-function handleClick(index) {
-  emit('update:modelValue', index);
-  emit('change', index);
-}
-</script>
-
-<style lang="scss">
-/* 样式已移至 src/styles/navigation.scss */
-</style>
+<template>
+  <view class="prism-tabs-container" :class="{ 'prism-tabs-container--chrome': type === 'chrome' }">
+    <view class="prism-tabs-wrapper" :class="[`prism-tabs--${type}`]">
+      <view
+        v-for="(item, index) in tabs"
+        :key="index"
+        class="prism-tabs__item"
+        :class="{ 'active': modelValue === index }"
+        @click="handleClick(index)"
+      >
+        <text>{{ item.label || item }}</text>
+        <text v-if="item.badge !== undefined" class="prism-tabs__badge">{{ item.badge }}</text>
+      </view>
+    </view>
+    <!-- Chrome 类型的内容区域插槽 -->
+    <view v-if="type === 'chrome'" class="prism-tabs__content">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script setup>
+defineProps({
+  tabs: {
+    type: Array,
+    required: true
+    // 格式: ['标签1', '标签2'] 或 [{ label: '标签1', badge: 10 }]
+  },
+  modelValue: {
+    type: Number,
+    default: 0
+  },
+  type: {
+    type: String,
+    default: 'line' // 'line' | 'card' | 'chrome'
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+function handleClick(index) {
+  emit('update:modelValue', index);
+  emit('change', index);
+}
+</script>
+
+<style lang="scss">
+/* 样式已移至 src/styles/navigation.scss */
+</style>