@ruixinkeji/prism-ui 1.0.0 → 1.0.2

package/components/PrismNavBar/PrismNavBar.vue

@@ -1,199 +1,199 @@
-<template>
-  <view class="prism-nav-bar" :class="{ 'dark-mode': appStore.isDarkMode, 'glass-effect': glass }" :style="{ paddingTop: appStore.statusBarHeight + 'px' }">
-    <view class="nav-bar-content">
-      <view class="nav-bar-left">
-        <!-- 返回按钮 -->
-        <view v-if="showBack" class="nav-bar-back" @click="handleBack">
-          <text class="fa fa-arrow-left"></text>
-        </view>
-        <!-- 图标 -->
-        <view v-if="icon" class="nav-bar-icon prism-icon" :class="iconColor">
-          <text class="fa" :class="icon"></text>
-        </view>
-        <text class="nav-bar-title">{{ title }}</text>
-      </view>
-      <view class="nav-bar-actions">
-        <view class="prism-icon-btn prism-icon-btn--md theme-btn" @click="handleThemeClick">
-          <text class="fa" :class="themeIcon"></text>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup>
-import { computed } from 'vue';
-import { useAppStore } from '@/store/app';
-
-const props = defineProps({
-  title: {
-    type: String,
-    required: true
-  },
-  icon: {
-    type: String,
-    default: ''
-  },
-  iconColor: {
-    type: String,
-    default: 'blue'
-  },
-  glass: {
-    type: Boolean,
-    default: true
-  },
-  showBack: {
-    type: Boolean,
-    default: false
-  }
-});
-
-const appStore = useAppStore();
-
-// 主题图标
-const themeIcon = computed(() => {
-  const icons = {
-    'light': 'fa-sun',
-    'dark': 'fa-moon',
-    'system': 'fa-circle-half-stroke'
-  };
-  return icons[appStore.themeMode] || 'fa-moon';
-});
-
-function handleThemeClick() {
-  appStore.toggleTheme();
-}
-
-function handleBack() {
-  const pages = getCurrentPages();
-  if (pages.length > 1) {
-    // 有历史记录，正常返回
-    uni.navigateBack();
-  } else {
-    // 没有历史记录，返回首页
-    uni.reLaunch({ url: '/pages/index/index' });
-  }
-}
-</script>
-
-<style lang="scss">
-.prism-nav-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 100;
-  background: var(--prism-bg-color-card);
-  border-bottom: 1rpx solid var(--prism-border-color-light);
-
-  /* #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-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
-  }
-  /* #endif */
-}
-
-.nav-bar-content {
-  height: 88rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 32rpx;
-}
-
-.nav-bar-left {
-  display: flex;
-  align-items: center;
-  gap: 16rpx;
-  margin-top: -6rpx;
-}
-
-.nav-bar-back {
-  width: 56rpx;
-  height: 56rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  flex-shrink: 0;
-  transition: all 0.2s;
-
-  &:active {
-    opacity: 0.7;
-    transform: scale(0.95);
-  }
-
-  .fa {
-    font-size: 28rpx;
-    color: var(--prism-text-primary);
-  }
-}
-
-.nav-bar-icon {
-  width: 56rpx;
-  height: 56rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 16rpx;
-  flex-shrink: 0;
-
-  .fa {
-    font-size: 32rpx;
-    line-height: 1;
-  }
-}
-
-.nav-bar-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: var(--prism-text-primary);
-  line-height: 1;
-}
-
-.nav-bar-actions {
-  display: flex;
-  align-items: center;
-  gap: 12rpx;
-  margin-top: -6rpx;
-
-  /* 小程序环境下预留胶囊位置 */
-  /* #ifdef MP */
-  margin-right: 160rpx;
-  /* #endif */
-}
-
-/* 主题切换按钮 */
-.theme-btn {
-  width: 56rpx;
-  height: 56rpx;
-  border-radius: 288rpx;
-  background: var(--prism-bg-color-icon-btn);
-  border: 1rpx solid var(--prism-border-color-light);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-
-  &:active {
-    opacity: 0.7;
-    transform: scale(0.96);
-  }
-
-  .fa {
-    color: var(--prism-warning-color);
-    font-size: 24rpx;
-  }
-}
-
-/* 深色模式 - 毛玻璃效果 */
-/* #ifndef H5 */
-.prism-nav-bar.dark-mode.glass-effect {
-  background: rgba(26, 26, 26, 0.4);
-  border-bottom-color: rgba(255, 255, 255, 0.12);
-}
-/* #endif */
-</style>
+<template>
+  <view class="prism-nav-bar" :class="{ 'dark-mode': appStore.isDarkMode, 'glass-effect': glass }" :style="{ paddingTop: appStore.statusBarHeight + 'px' }">
+    <view class="nav-bar-content">
+      <view class="nav-bar-left">
+        <!-- 返回按钮 -->
+        <view v-if="showBack" class="nav-bar-back" @click="handleBack">
+          <text class="fa fa-arrow-left"></text>
+        </view>
+        <!-- 图标 -->
+        <view v-if="icon" class="nav-bar-icon prism-icon" :class="iconColor">
+          <text class="fa" :class="icon"></text>
+        </view>
+        <text class="nav-bar-title">{{ title }}</text>
+      </view>
+      <view class="nav-bar-actions">
+        <view class="prism-icon-btn prism-icon-btn--md theme-btn" @click="handleThemeClick">
+          <text class="fa" :class="themeIcon"></text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useAppStore } from '@/store/app';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  icon: {
+    type: String,
+    default: ''
+  },
+  iconColor: {
+    type: String,
+    default: 'blue'
+  },
+  glass: {
+    type: Boolean,
+    default: true
+  },
+  showBack: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const appStore = useAppStore();
+
+// 主题图标
+const themeIcon = computed(() => {
+  const icons = {
+    'light': 'fa-sun',
+    'dark': 'fa-moon',
+    'system': 'fa-circle-half-stroke'
+  };
+  return icons[appStore.themeMode] || 'fa-moon';
+});
+
+function handleThemeClick() {
+  appStore.toggleTheme();
+}
+
+function handleBack() {
+  const pages = getCurrentPages();
+  if (pages.length > 1) {
+    // 有历史记录，正常返回
+    uni.navigateBack();
+  } else {
+    // 没有历史记录，返回首页
+    uni.reLaunch({ url: '/pages/index/index' });
+  }
+}
+</script>
+
+<style lang="scss">
+.prism-nav-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: var(--prism-bg-color-card);
+  border-bottom: 1rpx solid var(--prism-border-color-light);
+
+  /* #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-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
+  }
+  /* #endif */
+}
+
+.nav-bar-content {
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32rpx;
+}
+
+.nav-bar-left {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  margin-top: -6rpx;
+}
+
+.nav-bar-back {
+  width: 56rpx;
+  height: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  flex-shrink: 0;
+  transition: all 0.2s;
+
+  &:active {
+    opacity: 0.7;
+    transform: scale(0.95);
+  }
+
+  .fa {
+    font-size: 28rpx;
+    color: var(--prism-text-primary);
+  }
+}
+
+.nav-bar-icon {
+  width: 56rpx;
+  height: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16rpx;
+  flex-shrink: 0;
+
+  .fa {
+    font-size: 32rpx;
+    line-height: 1;
+  }
+}
+
+.nav-bar-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: var(--prism-text-primary);
+  line-height: 1;
+}
+
+.nav-bar-actions {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  margin-top: -6rpx;
+
+  /* 小程序环境下预留胶囊位置 */
+  /* #ifdef MP */
+  margin-right: 160rpx;
+  /* #endif */
+}
+
+/* 主题切换按钮 */
+.theme-btn {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 288rpx;
+  background: var(--prism-bg-color-icon-btn);
+  border: 1rpx solid var(--prism-border-color-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+
+  &:active {
+    opacity: 0.7;
+    transform: scale(0.96);
+  }
+
+  .fa {
+    color: var(--prism-warning-color);
+    font-size: 24rpx;
+  }
+}
+
+/* 深色模式 - 毛玻璃效果 */
+/* #ifndef H5 */
+.prism-nav-bar.dark-mode.glass-effect {
+  background: rgba(26, 26, 26, 0.4);
+  border-bottom-color: rgba(255, 255, 255, 0.12);
+}
+/* #endif */
+</style>