@wot-ui/ui 1.0.0 → 2.0.0-alpha.3

package/components/wd-navbar/wd-navbar.vue

@@ -0,0 +1,136 @@
+<template>
+  <view :style="{ height: addUnit(height) }">
+    <view :class="`wd-navbar ${customClass} ${fixed ? 'is-fixed' : ''} ${bordered ? 'is-border' : ''}`" :style="rootStyle">
+      <view class="wd-navbar__content">
+        <view class="wd-navbar__capsule" v-if="$slots.capsule">
+          <slot name="capsule" />
+        </view>
+
+        <view :class="`wd-navbar__left ${leftDisabled ? 'is-disabled' : ''}`" @click="handleClickLeft" v-else-if="!$slots.left">
+          <wd-icon v-if="leftArrow" name="left" custom-class="wd-navbar__arrow" />
+          <view v-if="leftText" class="wd-navbar__text">{{ leftText }}</view>
+        </view>
+
+        <view v-else :class="`wd-navbar__left ${leftDisabled ? 'is-disabled' : ''}`" @click="handleClickLeft">
+          <slot name="left" />
+        </view>
+
+        <view class="wd-navbar__title">
+          <slot name="title" />
+          <block v-if="!$slots.title && title">{{ title }}</block>
+        </view>
+        <view :class="`wd-navbar__right ${rightDisabled ? 'is-disabled' : ''}`" @click="handleClickRight" v-if="$slots.right || rightText">
+          <slot name="right" />
+
+          <view v-if="!$slots.right && rightText" class="wd-navbar__text" hover-class="wd-navbar__text--hover" :hover-stay-time="70">
+            {{ rightText }}
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-navbar',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { type CSSProperties, computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
+import { getRect, addUnit, isDef, objToStyle } from '../../common/util'
+import { navbarProps } from './types'
+import { useDeviceInfo } from '../../composables/useDeviceInfo'
+
+const props = defineProps(navbarProps)
+const emit = defineEmits(['click-left', 'click-right'])
+
+/**
+ * 占位高度
+ */
+const height = ref<number | ''>('')
+
+const { statusBarHeight, navBarHeight } = useDeviceInfo()
+
+watch(
+  [() => props.fixed, () => props.placeholder],
+  () => {
+    setPlaceholderHeight()
+  },
+  { deep: true, immediate: false }
+)
+
+/**
+ * 根节点样式
+ */
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (props.fixed && isDef(props.zIndex)) {
+    style['z-index'] = props.zIndex
+  }
+  if (props.safeAreaInsetTop) {
+    style['padding-top'] = addUnit(statusBarHeight.value || 0)
+  }
+  if (navBarHeight.value) {
+    style['height'] = addUnit(navBarHeight.value)
+    style['line-height'] = addUnit(navBarHeight.value)
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+onMounted(() => {
+  if (props.fixed && props.placeholder) {
+    nextTick(() => {
+      setPlaceholderHeight()
+    })
+  }
+})
+
+/**
+ * 处理左侧点击事件
+ */
+function handleClickLeft() {
+  if (!props.leftDisabled) {
+    emit('click-left')
+  }
+}
+
+/**
+ * 处理右侧点击事件
+ */
+function handleClickRight() {
+  if (!props.rightDisabled) {
+    emit('click-right')
+  }
+}
+
+/**
+ * 获取当前实例的代理对象
+ */
+const { proxy } = getCurrentInstance() as any
+
+/**
+ * 设置占位高度
+ */
+function setPlaceholderHeight() {
+  if (!props.fixed || !props.placeholder) {
+    return
+  }
+
+  getRect('.wd-navbar', false, proxy).then((res) => {
+    height.value = res.height as number
+  })
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-navbar-capsule/index.scss

@@ -0,0 +1,70 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 胶囊宽度
+$navbar-capsule-width: var(--wot-navbar-capsule-width, $n-88) !default;
+// 胶囊高度
+$navbar-capsule-height: var(--wot-navbar-capsule-height, $n-32) !default;
+// 胶囊边框颜色
+$navbar-capsule-border-color: var(--wot-navbar-capsule-border-color, $border-light) !default;
+// 胶囊圆角
+$navbar-capsule-radius: var(--wot-navbar-capsule-radius, $radius-super-large) !default;
+// 胶囊图标大小
+$navbar-capsule-icon-size: var(--wot-navbar-capsule-icon-size, $n-20) !default;
+// 胶囊图标颜色
+$navbar-capsule-icon-color: var(--wot-navbar-capsule-icon-color, $text-main) !default;
+// 胶囊边框宽度
+$navbar-capsule-border-width: var(--wot-navbar-capsule-border-width, $n-1) !default;
+// 分割线宽度
+$navbar-capsule-sperator-width: var(--wot-navbar-capsule-sperator-width, $n-1) !default;
+// 分割线高度
+$navbar-capsule-sperator-height: var(--wot-navbar-capsule-sperator-height, $n-18) !default;
+// 分割线颜色
+$navbar-capsule-sperator-color: var(--wot-navbar-capsule-sperator-color, $border-light) !default;
+
+@include b(navbar-capsule) {
+  position: relative;
+  box-sizing: border-box;
+  width: $navbar-capsule-width;
+  height: $navbar-capsule-height;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    transform: scale(0.5);
+    transform-origin: 0 0;
+    box-sizing: border-box;
+    border-radius: calc($navbar-capsule-radius * 2);
+    border: $navbar-capsule-border-width solid $navbar-capsule-border-color;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: $navbar-capsule-sperator-width;
+    height: $navbar-capsule-sperator-height;
+    background: $navbar-capsule-sperator-color;
+  }
+
+  &:empty {
+    display: none;
+  }
+
+  @include edeep(icon) {
+    flex: 1;
+    position: relative;
+    color: $navbar-capsule-icon-color;
+    font-size: $navbar-capsule-icon-size;
+  }
+}

package/components/wd-navbar-capsule/types.ts

@@ -0,0 +1,11 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps } from '../../common/props'
+
+/**
+ * 导航栏胶囊属性
+ */
+export const navbarCapsuleProps = {
+  ...baseProps
+}
+
+export type NavbarCapsuleProps = ExtractPropTypes<typeof navbarCapsuleProps>

package/components/wd-navbar-capsule/wd-navbar-capsule.vue

@@ -0,0 +1,48 @@
+<template>
+  <view :class="`wd-navbar-capsule ${customClass}`" :style="customStyle">
+    <wd-icon @click="handleBack" name="left" custom-class="wd-navbar-capsule__icon" />
+    <wd-icon @click="handleBackHome" name="home" custom-class="wd-navbar-capsule__icon" />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-navbar-capsule',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { navbarCapsuleProps } from './types'
+
+/**
+ * 事件发送器
+ */
+const emit = defineEmits(['back', 'back-home'])
+
+defineProps(navbarCapsuleProps)
+
+/**
+ * 处理返回事件
+ */
+function handleBack() {
+  emit('back')
+}
+
+/**
+ * 处理返回首页事件
+ */
+function handleBackHome() {
+  emit('back-home')
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-notice-bar/index.scss

@@ -0,0 +1,94 @@
+@use '../../styles/variable.scss' as *;
+@use '../../styles/mixin/mixin.scss' as *;
+
+// 公告栏内边距
+$notice-bar-padding: var(--wot-notice-bar-padding, $padding-main $padding-loose) !default;
+// 公告栏文字字号
+$notice-bar-font-size: var(--wot-notice-bar-font-size, $typography-body-size-main) !default;
+// 公告栏圆角
+$notice-bar-radius: var(--wot-notice-bar-radius, $radius-zero) !default;
+// 公告栏文字行高
+$notice-bar-line-height: var(--wot-notice-bar-line-height, $typography-body-line--height-size-main) !default;
+// 警告态背景色
+$notice-bar-warning-bg: var(--wot-notice-bar-warning-bg, $warning-surface) !default;
+// 警告态文字颜色
+$notice-bar-warning-color: var(--wot-notice-bar-warning-color, $warning-main) !default;
+// 信息态背景色
+$notice-bar-info-bg: var(--wot-notice-bar-info-bg, $primary-1) !default;
+// 信息态文字颜色
+$notice-bar-info-color: var(--wot-notice-bar-info-color, $primary-6) !default;
+// 危险态背景色
+$notice-bar-danger-bg: var(--wot-notice-bar-danger-bg, $danger-surface) !default;
+// 危险态文字颜色
+$notice-bar-danger-color: var(--wot-notice-bar-danger-color, $danger-main) !default;
+// 前缀图标大小
+$notice-bar-prefix-size: var(--wot-notice-bar-prefix-size, $n-20) !default;
+// 前缀图标右侧间距
+$notice-bar-prefix-margin-right: var(--wot-notice-bar-prefix-margin-right, $spacing-tight) !default;
+// 后缀图标大小
+$notice-bar-suffix-size: var(--wot-notice-bar-suffix-size, $n-20) !default;
+// 后缀图标左侧间距
+$notice-bar-suffix-margin-left: var(--wot-notice-bar-suffix-margin-left, $spacing-tight) !default;
+// 后缀图标颜色
+$notice-bar-suffix-color: var(--wot-notice-bar-suffix-color, inherit) !default;
+
+@include b(notice-bar) {
+  display: flex;
+  padding: $notice-bar-padding;
+  align-items: center;
+  font-size: $notice-bar-font-size;
+  border-radius: $notice-bar-radius;
+  position: relative;
+  box-sizing: border-box;
+  @include when(warning) {
+    background: $notice-bar-warning-bg;
+    color: $notice-bar-warning-color;
+  }
+  @include when(info) {
+    background: $notice-bar-info-bg;
+    color: $notice-bar-info-color;
+  }
+  @include when(danger) {
+    background: $notice-bar-danger-bg;
+    color: $notice-bar-danger-color;
+  }
+  @include edeep(prefix) {
+    margin-right: $notice-bar-prefix-margin-right;
+    font-size: $notice-bar-prefix-size;
+    line-height: $notice-bar-prefix-size;
+  }
+
+  @include edeep(suffix) {
+    font-size: $notice-bar-suffix-size;
+    line-height: $notice-bar-suffix-size;
+    color: $notice-bar-suffix-color;
+    margin-left: $notice-bar-suffix-margin-left;
+  }
+  @include e(wrap) {
+    position: relative;
+    flex: 1;
+    height: $notice-bar-line-height;
+    overflow: hidden;
+    line-height: $notice-bar-line-height;
+  }
+  @include e(content) {
+    position: absolute;
+    white-space: nowrap;
+  }
+  @include m(ellipse) {
+    .wd-notice-bar__content {
+      position: static;
+      @include lineEllipsis;
+    }
+  }
+  @include m(wrap) {
+
+    .wd-notice-bar__wrap {
+      height: auto;
+    }
+    .wd-notice-bar__content {
+      position: static;
+      white-space: normal;
+    }
+  }
+}

package/components/wd-notice-bar/types.ts

@@ -0,0 +1,97 @@
+/*
+ * @Author: weisheng
+ * @Date: 2025-05-08 22:54:27
+ * @LastEditTime: 2026-01-30 19:06:29
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-notice-bar/types.ts
+ * 记得注释
+ */
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props'
+
+export type NoticeBarType = 'warning' | 'info' | 'danger' | ''
+export type NoticeBarScrollDirection = 'horizontal' | 'vertical'
+
+export const noticeBarProps = {
+  ...baseProps,
+  /**
+   * 设置通知栏文案
+   * 类型: string | string[]
+   * 默认值: ''
+   */
+  text: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: ''
+  },
+  /**
+   * 设置通知栏类型
+   * 类型: NoticeBarType
+   * 可选值: 'warning' | 'info' | 'danger'
+   * 默认值: 'warning'
+   */
+  type: makeStringProp<NoticeBarType>('warning'),
+  /**
+   * 是否可滚动
+   * 类型: boolean
+   * 默认值: true
+   */
+  scrollable: makeBooleanProp(true),
+  /**
+   * 滚动延迟时间（秒）
+   * 类型: number
+   * 默认值: 1
+   */
+  delay: makeNumberProp(1),
+  /**
+   * 滚动速度（px/s）
+   * 类型: number
+   * 默认值: 50
+   */
+  speed: makeNumberProp(50),
+  /**
+   * 是否可关闭
+   * 类型: boolean
+   * 默认值: false
+   */
+  closable: makeBooleanProp(false),
+  /**
+   * 是否换行显示
+   * 类型: boolean
+   * 默认值: false
+   */
+  wrapable: makeBooleanProp(false),
+  /**
+   * 设置左侧图标，使用 icon 章节中的图标名
+   * 类型: string
+   */
+  prefix: String,
+  /**
+   * 文字、图标颜色
+   * 类型: string
+   */
+  color: String,
+  /**
+   * 背景颜色
+   * 类型: string
+   */
+  backgroundColor: String,
+  /**
+   * 滚动方向
+   * 类型: NoticeBarScrollDirection
+   * 可选值: 'horizontal' | 'vertical'
+   * 默认值: 'horizontal'
+   */
+  direction: makeStringProp<NoticeBarScrollDirection>('horizontal')
+}
+
+export type NoticeBarProps = ExtractPropTypes<typeof noticeBarProps>
+
+export type NoticeBarExpose = {
+  /**
+   * 重置NoticeBar动画
+   */
+  reset: () => void
+}
+
+export type NoticeBarInstance = ComponentPublicInstance<NoticeBarProps, NoticeBarExpose>