@tplc/business 0.0.6 → 0.0.8

package/components/lcb-nav/lcb-nav.vue

@@ -5,98 +5,85 @@
       immersiveTop: topStyle === 2,
       fixed,
     }"
-    :style="{
-      paddingTop,
-    }"
   >
     <view
-      class="header"
+      class="navbar-header"
       :style="{
-        backgroundColor: backgroundType === 'color' ? backColor : '',
         color: contentColor,
-        backgroundImage: backgroundType === 'img' ? `url(${backgroundImage})` : '',
+        paddingTop,
       }"
     >
-      <view class="header_body" :class="[titleLocation]" v-if="topStyle === 1">
+      <view
+        class="navbar-header-background"
+        :style="{
+          backgroundColor: navbarBgColor,
+          opacity: navbarBgOpacity,
+          backgroundImage: backgroundType === 'img' ? `url(${backgroundImage})` : '',
+        }"
+      />
+      <!-- 左边布局 -->
+      <view class="navbar-left">
+        <!-- 返回按钮 -->
         <view
-          class="items"
-          :class="{
-            on_center: styleGroup === 1,
-          }"
+          v-if="styleGroup === 3"
+          class="navbar-capsule flex justify-center items-center"
+          :class="[capsuleMode]"
         >
-          <view class="titleContainer" v-if="titleMode === 'text'">
-            <view class="images mr-2" v-if="logoImg">
-              <img :src="logoImg" />
-            </view>
-            <view class="title">{{ title }}</view>
-          </view>
-          <view class="images" v-else>
-            <img :src="typographyTextBackground" />
-          </view>
-        </view>
-        <template v-if="styleGroup === 2">
           <view
-            class="center_mod items pr-80px"
-            :class="{
-              searchLeft: titleLocation === 'center',
-            }"
+            class="h-full flex items-center"
+            @click="onCapsule(item)"
+            v-for="item in capsuleList"
+            :key="item.icon"
+            :class="[capsuleList.length === 1 ? 'px-2' : 'px-2.5']"
           >
-            <view class="search-input" @click="emits('search')">
-              <wd-icon name="search" color="#a1a1a1" />
-              <view class="search-text">{{ searchText }}</view>
-            </view>
+            <wd-icon :name="item.icon" size="20" />
           </view>
+        </view>
+        <template v-else-if="back">
+          <wd-icon name="arrow-left" custom-class="arrow-left" />
         </template>
+        <view class="ml-2" v-if="titleLocation === 'left'">
+          <lcb-nav-search
+            :searchText
+            left
+            v-if="styleGroup === 2 && titleLocation === 'left'"
+            :back
+          />
+          <lcb-nav-title v-bind="titleProps" v-else-if="topStyle !== 2" />
+        </view>
       </view>
+      <!-- 中间布局 -->
+      <view class="navbar-center" v-if="topStyle === 1">
+        <lcb-nav-search v-if="styleGroup === 2 && titleLocation === 'center'" :back />
+        <lcb-nav-title
+          v-bind="titleProps"
+          v-else-if="styleGroup === 2 || titleLocation === 'center'"
+        />
+      </view>
+      <!-- </template> -->
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
 import { addUnit } from '@tplc/wot/components/common/util'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { ICapsule, NavProps } from './types'
+import lcbNavTitle from './lcb-nav-title.vue'
+import lcbNavSearch from './lcb-nav-search.vue'
+import { onPageScroll } from '@dcloudio/uni-app'
 
 const { statusBarHeight } = uni.getSystemInfoSync()
 defineOptions({
-  name: 'FinalNav',
+  name: 'LcbNav',
   options: {
     addGlobalClass: true,
     virtualHost: true,
     styleIsolation: 'shared',
   },
 })
-const emits = defineEmits<{ (e: 'search'): void }>()
-
-interface NanProps {
-  /** 是否固定 */
-  fixed?: boolean
-  /** 模式 1.标题 2.搜索 3.导航 4.沉浸式 */
-  styleGroup?: 1 | 2 | 3 | 4
-  /** 方位 */
-  titleLocation?: 'left' | 'center'
-  /** 是否沉浸式状态栏 */
-  // 1 标准 2沉浸式
-  topStyle?: 1 | 2
-  /** 标题 */
-  title?: string
-  /** 图片 */
-  logoImg?: string
-  /** 背景图片 */
-  backgroundImage?: string
-  /** 模式 */
-  titleMode?: 'text' | 'img'
-  /** 颜色模式 */
-  colorMode?: 'custom' | 'default'
-  /** 背景颜色 */
-  backColor?: string
-  /** 背景样式 */
-  backgroundType?: 'img' | 'color'
-  /** 内容颜色 */
-  contentColor?: string
-  searchText?: string
-  typographyTextBackground?: string
-}
-withDefaults(defineProps<NanProps>(), {
+const scrollTop = ref(0)
+const props = withDefaults(defineProps<NavProps>(), {
   styleGroup: 1,
   titleLocation: 'center',
   topStyle: 1,
@@ -107,23 +94,99 @@ withDefaults(defineProps<NanProps>(), {
   backColor: '#ffffff',
   contentColor: '#000000',
   logoImg: '',
-  searchText: '搜索',
-  fixed: true,
+  fixed: false,
+  back: false,
+  capsuleMode: 'light',
+  immersionMode: 1,
+})
+
+const navbarBgColor = computed(() => {
+  return props.backgroundType === 'color' ? props.backColor : ''
+})
+
+// 透明度
+const navbarBgOpacity = computed(() => {
+  const { topStyle, immersionMode } = props
+  if (topStyle === 2) {
+    return immersionMode === 1 ? scrollTop.value / ((statusBarHeight || 0) + 44) : 0
+  }
+  return 1
+})
+/** 标题样式 */
+const titleProps = computed(() => {
+  return {
+    titleMode: props.titleMode,
+    typographyTextBackground: props.typographyTextBackground,
+    logoImg: props.logoImg,
+    title: props.title,
+    titleLocation: props.titleLocation,
+  }
 })
 
 const paddingTop = computed(() => {
   return addUnit(statusBarHeight || 0)
 })
+
+const capsuleList = computed(() => {
+  const list: ICapsule[] = []
+  if (props.back) {
+    list.push({
+      icon: 'chevron-left',
+      action: 'link',
+    })
+  }
+
+  return [
+    ...list,
+    {
+      icon: 'home',
+      action: 'home',
+    },
+    ...(props.capsules || []),
+  ] as ICapsule[]
+})
+const onCapsule = (item: ICapsule) => {
+  switch (item.action) {
+    case 'link':
+      if (item.linkUrl) {
+        uni.navigateTo({
+          url: item.linkUrl,
+        })
+      } else {
+        uni.navigateBack()
+      }
+      break
+    case 'home':
+      uni.switchTab({
+        url: '/pages/index/index',
+      })
+      break
+  }
+}
+
+onPageScroll(({ scrollTop: top }) => {
+  if (props.immersionMode === 1) {
+    scrollTop.value = top
+  }
+})
 </script>
 <style lang="scss" scoped>
 .customNavigation {
   position: relative;
   width: 100%;
   min-height: 44px;
+  %action {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    padding: 0 24rpx;
+    box-sizing: border-box;
+  }
 
-  .header {
+  .navbar-header {
     position: absolute;
-    top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
@@ -132,114 +195,71 @@ const paddingTop = computed(() => {
     background-position-x: 50%;
     background-position-y: center;
     background-size: cover;
-
-    .header_body {
-      position: absolute;
-      bottom: 0;
-      box-sizing: border-box;
-      display: flex;
-      justify-content: space-between;
+    &-background {
       width: 100%;
-      height: 44px;
-      padding: 12rpx 28rpx;
-      text-align: center;
-
-      .items {
-        display: flex;
-        align-items: center;
-        height: 100%;
-        overflow: hidden;
-      }
-
-      .center_mod {
-        flex: 1 1;
-        margin-right: 20rpx;
-        margin-left: 20rpx;
-
-        .search-input {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 100%;
-          height: 64rpx;
-          padding: 0 24rpx;
-          font-size: 26rpx;
-          font-weight: 400;
-          color: #a1a1a1;
-          background: #f5f5f5;
-          border-radius: 32rpx;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
 
-          .search-text {
-            flex: 1 1;
-            margin-left: 12rpx;
-            overflow: hidden;
-            text-align: left;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+    .navbar-center {
+      @extend %action;
+      width: 100vw;
+      justify-content: center;
+    }
+    .navbar-left {
+      @extend %action;
+      .navbar-capsule {
+        margin: auto 20rpx auto 0;
+        height: 29px;
+        content: '';
+        border: 1rpx solid rgba(0, 0, 0, 0.1);
+        border-radius: 82rpx;
+        padding: 0px;
+        background-color: rgba(255, 255, 255, 0.6);
+        // 不等于最后一个儿子
+        > view {
+          position: relative;
+          &::after {
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            content: ' ';
+            width: 1rpx;
+            height: 18px;
+            background: rgba(0, 0, 0, 0.1);
           }
         }
-      }
-
-      .searchLeft {
-        position: absolute;
-        left: 0;
 
-        .search-input {
-          :last-child {
+        > :last-child {
+          &:after {
             display: none;
-            border-radius: 100%;
-          }
-        }
-      }
-
-      .on_center {
-        flex: initial;
-        align-items: center;
-        justify-content: center;
-        height: 60rpx;
-
-        .titleContainer {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          .title {
-            max-width: 300rpx;
-            overflow: hidden;
-            font-size: 32rpx;
-            font-weight: 500;
-            text-overflow: ellipsis;
-            white-space: nowrap;
           }
         }
       }
+    }
 
-      .images {
-        width: auto;
-        max-width: 320rpx !important;
-        height: 100%;
-        overflow: hidden;
-
-        img {
-          min-width: 60rpx;
-          height: 60rpx;
-          -o-object-fit: cover;
-          object-fit: cover;
-          -o-object-position: center;
-          object-position: center;
+    .dark {
+      border-color: rgba(255, 255, 255, 0.25);
+      background-color: rgba(0, 0, 0, 0.15);
+      color: #fff;
+      > view {
+        position: relative;
+        &::after {
+          background: rgba(255, 255, 255, 0.7);
         }
       }
     }
-
-    .left {
-      justify-content: flex-start;
-    }
-
-    .center {
-      justify-content: center;
-    }
   }
 }
+.fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
 
 .immersiveTop {
   position: fixed;
@@ -247,12 +267,11 @@ const paddingTop = computed(() => {
   right: 0;
   left: 0;
   z-index: 999999;
-  width: 375px;
+  width: 100vw;
   background: transparent;
 
-  .header {
+  .navbar-header {
     color: rgb(0, 0, 0) !important;
-    background-color: rgba(0, 0, 0, 0) !important;
     background-repeat: no-repeat;
     background-size: contain;
   }

package/components/lcb-nav/types.ts

@@ -0,0 +1,45 @@
+export interface ICapsule {
+  icon: string
+  action: 'translate' | 'scanCode' | 'link' | 'home'
+  linkUrl?: string
+}
+
+export interface NavTitleProps {
+  /** 模式 */
+  titleMode?: 'text' | 'img'
+  /** 标题 */
+  title?: string
+  /** 图片 */
+  logoImg?: string
+  typographyTextBackground?: string
+  /** 方位 */
+  titleLocation?: 'left' | 'center'
+}
+export interface NavProps extends NavTitleProps {
+  /** 是否固定 */
+  fixed?: boolean
+  /** 是否沉浸式状态栏 */
+  // 1 标准 2沉浸式
+  topStyle?: 1 | 2
+  // 沉浸规则 1滑动后恢复  2永久沉浸式
+  immersionMode?: 1 | 2
+  /** 模式 1.标题 2.搜索 3.导航 4.沉浸式 */
+  styleGroup?: 1 | 2 | 3 | 4
+  /** 背景图片 */
+  backgroundImage?: string
+  /** 颜色模式 */
+  colorMode?: 'custom' | 'default'
+  /** 背景颜色 */
+  backColor?: string
+  /** 背景样式 */
+  backgroundType?: 'img' | 'color'
+  /** 内容颜色 */
+  contentColor?: string
+  searchText?: string
+  /** 是否显示返回按钮 */
+  back?: boolean
+  /** 胶囊样式 */
+  capsuleMode?: 'light' | 'dark'
+  /** 胶囊列表 */
+  capsules?: ICapsule[]
+}

package/components/lcb-swiper/lcb-swiper.vue

@@ -0,0 +1,95 @@
+<template>
+  <view class="pl-20rpx pr-20rpx swiper" :style="{ '--wot-swiper-radius': `${borderRadius}rpx` }">
+    <wd-swiper
+      :list="swiperList"
+      :autoplay="autoplay"
+      v-model:current="current"
+      @click="handleClick"
+      :displayMultipleItems="displayMultipleItems"
+      :height="height"
+      :loop="loop"
+      :indicator="indicator ? { type: indicatorType } : false"
+      :indicatorPosition="indicatorPosition"
+      value-key="value"
+      :direction="direction"
+      @change="onChange"
+    ></wd-swiper>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// import { computed } from 'vue'
+defineOptions({
+  name: 'Swiper',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+
+const current = ref<number>(0)
+
+const swiperList = ref([
+  {
+    value: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
+    pageUrl: 'fdasfsdfdsf',
+    pageType: 1,
+  },
+  { value: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg' },
+  { value: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg' },
+  { value: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg' },
+  { value: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg' },
+])
+function handleClick(e) {
+  console.log(e, e.item?.value)
+}
+function onChange(e) {
+  console.log(e)
+}
+
+interface NanProps {
+  list?: Array<any> // <SwiperList>
+  /** 是否自动播放 */
+  autoplay?: boolean
+  /** 模式 1.标题 2.搜索 3.导航 4.沉浸式 */
+  styleGroup?: 1 | 2 | 3 | 4
+  /** 轮播滑动方向 */
+  direction?: 'horizontal' | 'vertical'
+  // 同时显示的滑块数量
+  displayMultipleItems?: number
+  // 滑动动画时长
+  duration?: number
+  // 滑动动画时长
+  height?: number
+  loop?: boolean
+  indicator?: boolean
+  indicatorType?: 'dots' | 'dots-bar' | 'fraction'
+  indicatorPosition?:
+    | 'left'
+    | 'top-left'
+    | 'top'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom'
+    | 'bottom-right'
+    | 'right'
+  borderRadius?: number
+}
+withDefaults(defineProps<NanProps>(), {
+  autoplay: false,
+  styleGroup: 1,
+  direction: 'horizontal',
+  displayMultipleItems: 1,
+  duration: 300,
+  height: 200,
+  loop: false,
+  indicator: false,
+  indicatorType: 'dots',
+  indicatorPosition: 'bottom',
+  borderRadius: 0, // '10rpx',
+})
+</script>
+<style lang="scss" scoped></style>

package/components/lcb-title/lcb-title.vue

@@ -0,0 +1,37 @@
+<template>
+  <LcbBlock
+    v-bind="{
+      ...$props,
+      title: undefined,
+    }"
+    :marginLeft="12"
+    :marginRight="12"
+  >
+    <text
+      :style="{
+        fontWeight,
+      }"
+    >
+      {{ title }}
+    </text>
+  </LcbBlock>
+</template>
+
+<script setup lang="ts">
+import { LcbTitleProps } from './types'
+import LcbBlock from '../lcb-block/lcb-block.vue'
+defineOptions({
+  name: 'Lcbtitle',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+})
+withDefaults(defineProps<LcbTitleProps>(), {
+  fontWeight: 600,
+  fontSize: 14,
+  color: '#333',
+})
+</script>
+<style lang="scss" scoped></style>

package/components/lcb-title/types.ts

@@ -0,0 +1,5 @@
+import { LcbBlockProps } from '../lcb-block/types'
+export interface LcbTitleProps extends LcbBlockProps {
+  title: string
+  fontWeight?: number
+}

package/global.d.ts

@@ -3,7 +3,19 @@ declare module 'vue' {
   export interface GlobalComponents {
     'lcb-img-nav': (typeof import('./types/components/lcb-img-nav/lcb-img-nav.vue'))['default']
     'lcb-nav': (typeof import('./types/components/lcb-nav/lcb-nav.vue'))['default']
+    'lcb-banner': (typeof import('./types/components/lcb-banner/lcb-banner.vue'))['default']
+    'lcb-banner-block': (typeof import('./types/components/lcb-banner-block/lcb-banner-block.vue'))['default']
+    'lcb-title': (typeof import('./types/components/lcb-title/lcb-title.vue'))['default']
+    'lcb-grid': (typeof import('./types/components/lcb-grid/lcb-grid.vue'))['default']
+    'lcb-home-search': (typeof import('./types/components/lcb-home-search/lcb-home-search.vue'))['default']
   }
 }
 
 export {}
+
+export interface ActionView {
+  title: string
+  icon?: string
+  link: string
+  url?: string
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tplc/business",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "keywords": [
     "业务组件i"
   ],
@@ -10,15 +10,15 @@
   },
   "peerDependencies": {
     "vue": ">=3.2.47",
-    "@tplc/wot": "0.1.2"
+    "@tplc/wot": "0.1.3"
   },
   "engines": {
     "node": ">=18",
     "pnpm": ">=7.30"
   },
   "scripts": {
-    "pub": "rm -rf types && pnpm dts && pnpm publish --no-git-checks",
-    "dts": "vue-tsc",
+    "pub": "pnpm dts && pnpm publish --no-git-checks",
+    "dts": "rm -rf types && vue-tsc  --project ./tsconfig.dts.json && pnpm prettier --write types",
     "release-major": "standard-version --release-as major ",
     "release-minor": "standard-version --release-as minor",
     "release-patch": "standard-version --release-as patch "

package/tsconfig.dts.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "./types",
+    "emitDeclarationOnly": true
+  },
+  "include": ["components/**/*.vue"]
+}