@tuya/miniapp-smart-ui 2.13.5-beta-0

package/lib/notice-bar/README.md

@@ -0,0 +1,216 @@
+---
+category: 展示
+new: true
+---
+
+# NoticeBar 通知栏
+
+> v2.0.0 开始加入
+
+### 介绍
+
+用于循环播放展示一组消息通知。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-notice-bar": "@tuya/miniapp-smart-ui/lib/notice-bar/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+文字较长时，可以通过设置 `wrapable` 属性来开启多行展示。`type` 可以设置通知的类型。
+```tsx
+import Warning from '@tuya-miniapp/icons/dist/svg/Warning';
+<smart-notice-bar
+  wrapable
+  type="info"
+  left-icon="{{ Warning }}"
+  custom-style="margin-bottom: 10px;"
+  text="如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。"
+  btnText="家庭设置"
+/>
+<smart-notice-bar
+  wrapable
+  type="warning"
+  left-icon="{{ Warning }}"
+  custom-style="margin-bottom: 10px;"
+  text="如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。"
+  btnText="家庭设置"
+/>
+<smart-notice-bar
+  wrapable
+  type="error"
+  left-icon="{{ Warning }}"
+  text="如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。"
+  btnText="家庭设置"
+/>
+```
+### 基础用法
+
+`mode` 设置为 `closeable` 则可以将此通知关闭，页面刷新后还会再次出现。
+```tsx
+import Warning from '@tuya-miniapp/icons/dist/svg/Warning';
+<smart-notice-bar
+  wrapable
+  mode="closeable"
+  left-icon="{{ Warning }}"
+  text="如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。"
+  btnText="家庭设置"
+/>
+```
+
+### 溢出滚动
+
+通知栏的内容长度溢出时会自动开启滚动播放，通过 `scrollable` 属性可以控制该行为。`speed` 可以控制滚动的速度。
+
+```html
+<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
+<smart-notice-bar speed="100" scrollable text="技术是开发它的人的共同灵魂。" />
+
+<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->
+<smart-notice-bar
+  scrollable="{{ false }}"
+  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
+/>
+```
+
+### 自定义样式
+
+```tsx
+import Warning from '@tuya-miniapp/icons/dist/svg/Warning';
+<smart-notice-bar
+  wrapable
+  left-icon="{{ Warning }}"
+  text="如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。"
+  btnText="家庭设置"
+  background="rgba(25, 137, 250, 0.1)"
+  color="#1989FA"
+  leftIconColor="#0009FA"
+  btnTextColor="#0009FA"
+/>
+```
+
+### 链接模式
+
+设置 `mode`为`link`组件会自动在右侧出现一个箭头图标，点击组件也会增加`hover`样式。点击后会跳转到对应的`url` 路由导航地址。
+```tsx
+import Warning from '@tuya-miniapp/icons/dist/svg/Warning';
+<smart-notice-bar
+  scrollable="{{ false }}"
+  mode="link"
+  openType="navigateTo"
+  url="/pages/cell/index"
+  left-icon="{{ Warning }}"
+  text="如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。"
+/>
+```
+
+### 使用插槽
+
+组件内部的所有部分都可以通过插槽插入来自定义内容。
+```tsx
+import SpeakerWaveLoud from '@tuya-miniapp/icons/dist/svg/SpeakerWaveLoud';
+import Warning from '@tuya-miniapp/icons/dist/svg/Warning';
+<smart-notice-bar wrapable>
+  <smart-icon 
+    size="16" 
+    color="#1989FA" 
+    style="margin-right: 8px;" 
+    slot="left-icon" 
+    name="{{ SpeakerWaveLoud }}"
+  ></smart-icon>
+  <text>如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。</text>
+  <text style="color: #1989FA">家庭设置</text>
+  <smart-icon 
+    size="16" 
+    color="#1989FA" 
+    slot="right-icon" 
+    style="margin-left: 8px;" 
+    name="{{ Warning }}"
+  ></smart-icon>
+</smart-notice-bar>
+```
+
+## API
+
+### Props
+
+| 参数       | 说明                                     | 类型      | 默认值     |
+| ---------- | ---------------------------------------- | --------- | ---------- |
+| text       | 通知文本内容                             | _string_  | `''`       |
+| btn-text   | 按钮文本内容                             | _string_  | `''`       |
+| btn-text-color   | 按钮文本颜色                       | _string_  | `''`       |
+| type   | 通知类型，可选值为 `info` `warning` `error`   | _string_  | `'info'`       |
+| background | 滚动条背景                               | _string_  | `rgba(25, 137, 250, 0.1)`  |
+| close-icon-aria-label `v2.13.0` | 关闭按钮的无障碍读屏文案，透传至关闭图标的 `ariaLabel` | _string_  | -          |
+| color      | 通知文本颜色                             | _string_  | `#1989fa`  |
+| delay      | 动画延迟时间 (ms)                        | _number_  | `1`        |
+| left-icon  | 左侧[图标](/material/smartui?comId=icon&appType=miniapp)或图片链接              | _string_  | -          |
+| left-icon-color | 左侧[图标](/material/smartui?comId=icon&appType=miniapp)颜色              | _string_  | -          |
+| right-icon-color | 右侧[图标](/material/smartui?comId=icon&appType=miniapp)颜色             | _string_  | -          |
+| left-icon-style | 左侧[图标](/material/smartui?comId=icon&appType=miniapp)样式              | _string_  | -          |
+| right-icon-style | 左侧[图标](/material/smartui?comId=icon&appType=miniapp)样式              | _string_  | -          |
+| mode       | 通知栏模式，可选值为 `closeable` `link`   | _string_  | `''`       |
+| open-type  | `link`模式时,路由跳转方法名称              | _string_  | `navigateTo` |
+| url        | `link`模式时,路由跳转地址                 | _string_  | `''` |
+| scrollable | 是否开启滚动播放，内容长度溢出时默认开启      | _boolean_ | -          |
+| speed      | 滚动速率 (px/s)                          | _number_  | `60`       |
+| wrapable   | 是否开启文本换行，只在禁用滚动时生效          | _boolean_ | `false`    |
+| custom-style   | 跟节点样式                            | _string_  | `''`    |
+| custom-hover-class   | 跟节点点击样式类                   | _string_  | `''`    |
+
+
+### Events
+
+| 事件名     | 说明             | 参数           |
+| ---------- | ---------------- | -------------- |
+| bind:click | 点击通知栏时触发 | _event: Event_ |
+| bind:close | 关闭通知栏时触发 | _event: Event_ |
+| bind:btn-click `v2.7.0` | 按钮文案点击时触发 | _event: Event_ |
+
+
+### Slot
+
+| 名称       | 说明                                     |
+| ---------- | ---------------------------------------- |
+| -          | 通知文本内容，仅在 `text` 属性为空时有效 |
+| left-icon  | 自定义左侧图标                           |
+| right-icon | 自定义右侧图标                           |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --notice-bar-font-size        | _14px_                                 | 内部字体大小    |
+| --notice-bar-height           | _40px_                                 | 单行时高度    |
+| --notice-bar-icon-size        | _16px_                                 | icon大小    |
+| --notice-bar-line-height      | _14px_                                 | 内部字体行高大小    |
+| --notice-bar-padding          | _0 var(--smart-padding-md)_            | 单行模式外部盒子边距    |
+| --notice-bar-text-color       | _var(--app-B6-N3, rgba(0, 0, 0, 0.5))_ `v2.0.0` _rgba(0, 0, 0, 0.5)_ `v2.8.0` | 内部字体颜色    |
+| --notice-bar-wrapable-padding | _var(--padding-xs) var(--padding-md)_  | 多行模式外部盒子边距    |
+| --notice-bar-background-color | _#E7F3FE_        | info类型背景色    |
+| --notice-bar-background-warning-color | _#FFF5E5_    | warning类型背景色    |
+| --notice-bar-background-error-color | _#FDEDED_    | error类型背景色    |
+| --notice-bar-info-color | _#1989fa_              | 左侧图标 info 类型颜色    |
+| --notice-bar-warning-color | _#ffa000_              | 左侧图标 warning 类型颜色    |
+| --notice-bar-error-color | _#f04c4c_              | 左侧图标 error 类型颜色    |
+| --notice-bar-left-icon-margin-right | _8px_              | 左侧图标右侧外边距    |
+| --notice-bar-right-icon-color `v2.1.7` | _rgba(0, 0, 0, 0.2)_              | 右侧图标颜色    |
+| --notice-bar-right-icon-margin-left | _8px_              | 右侧图标左侧外边距    |
+| --notice-bar-btn-color | _var(--app-M4, #1989fa)_              | 按钮文案颜色    |
+

package/lib/notice-bar/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-notice-bar{align-items:center;background-color:var(--notice-bar-background-color,#e7f3fe);color:var(--notice-bar-text-color,rgba(0,0,0,.5));display:flex;font-size:var(--notice-bar-font-size,12px);height:var(--notice-bar-height,40px);line-height:var(--notice-bar-line-height,14px);padding:var(--notice-bar-padding,0 16px)}.smart-notice-bar--info{--icon-color:var(--notice-bar-info-color,#1989fa)}.smart-notice-bar--warning{--icon-color:var(--notice-bar-warning-color,#ffa000);background-color:var(--notice-bar-background-warning-color,#fff5e5)}.smart-notice-bar--error{--icon-color:var(--notice-bar-error-color,#f04c4c);background-color:var(--notice-bar-background-error-color,#fdeded)}.smart-notice-bar--hover{opacity:.6}.smart-notice-bar--wrapable{height:auto;padding:var(--notice-bar-wrapable-padding,8px 16px)}.smart-notice-bar--wrapable .smart-notice-bar__wrap{height:auto}.smart-notice-bar--wrapable .smart-notice-bar__content{position:relative;white-space:normal}.smart-notice-bar__left-icon{align-items:center;display:flex;font-size:var(--notice-bar-icon-size,16px);margin-right:var(--notice-bar-left-icon-margin-right,8px);vertical-align:middle}.smart-notice-bar__right-icon{--icon-color:var(--notice-bar-right-icon-color,rgba(0,0,0,.2));font-size:var(--notice-bar-icon-size,16px);margin-left:var(--notice-bar-right-icon-margin-left,8px)}.smart-notice-bar__wrap{flex:1;height:var(--notice-bar-line-height,14px);overflow:hidden;position:relative}.smart-notice-bar__content{position:absolute;white-space:nowrap}.smart-notice-bar__content.smart-ellipsis{max-width:100%}.smart-notice-bar__content__btn{color:var(--notice-bar-btn-color,var(--app-M4,#1989fa));display:inline-block}

package/lib/notice-bar/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/notice-bar/index.js

@@ -0,0 +1,182 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var utils_1 = require("../common/utils");
+var Xmark_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Xmark"));
+var Right_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Right"));
+(0, component_1.SmartComponent)({
+    props: {
+        text: {
+            type: String,
+            value: '',
+            observer: 'init',
+        },
+        btnText: {
+            type: String,
+            value: '',
+            observer: 'init',
+        },
+        btnTextColor: {
+            type: String,
+            value: '',
+            observer: 'init',
+        },
+        mode: {
+            type: String,
+            value: '',
+        },
+        type: {
+            type: String,
+            value: 'info',
+        },
+        url: {
+            type: String,
+            value: '',
+        },
+        openType: {
+            type: String,
+            value: 'navigateTo',
+        },
+        rightIconColor: {
+            type: String,
+            value: '',
+        },
+        leftIconColor: {
+            type: String,
+            value: '',
+        },
+        delay: {
+            type: Number,
+            value: 1,
+        },
+        closeIconAriaLabel: {
+            type: String,
+            value: '',
+        },
+        customStyle: {
+            type: String,
+            value: '',
+        },
+        customHoverClass: {
+            type: String,
+            value: '',
+        },
+        rightIconStyle: {
+            type: String,
+            value: '',
+        },
+        leftIconStyle: {
+            type: String,
+            value: '',
+        },
+        speed: {
+            type: Number,
+            value: 60,
+            observer: 'init',
+        },
+        scrollable: null,
+        leftIcon: {
+            type: String,
+            value: '',
+        },
+        color: String,
+        background: String,
+        wrapable: Boolean,
+    },
+    data: {
+        Xmark: Xmark_1.default,
+        Right: Right_1.default,
+        show: true,
+    },
+    created: function () {
+        this.resetAnimation = wx.createAnimation({
+            duration: 0,
+            timingFunction: 'linear',
+        });
+    },
+    destroyed: function () {
+        this.timer && clearTimeout(this.timer);
+    },
+    mounted: function () {
+        this.init();
+    },
+    methods: {
+        init: function () {
+            var _this = this;
+            (0, utils_1.requestAnimationFrame)(function () {
+                Promise.all([
+                    (0, utils_1.getRect)(_this, '.smart-notice-bar__content'),
+                    (0, utils_1.getRect)(_this, '.smart-notice-bar__wrap'),
+                ]).then(function (rects) {
+                    var contentRect = rects[0], wrapRect = rects[1];
+                    var _a = _this.data, speed = _a.speed, scrollable = _a.scrollable, delay = _a.delay;
+                    if (contentRect == null ||
+                        wrapRect == null ||
+                        !contentRect.width ||
+                        !wrapRect.width ||
+                        scrollable === false) {
+                        return;
+                    }
+                    if (scrollable || wrapRect.width < contentRect.width) {
+                        var duration = ((wrapRect.width + contentRect.width) / speed) * 1000;
+                        _this.wrapWidth = wrapRect.width;
+                        _this.contentWidth = contentRect.width;
+                        _this.duration = duration;
+                        _this.animation = wx.createAnimation({
+                            duration: duration,
+                            timingFunction: 'linear',
+                            delay: delay,
+                        });
+                        _this.scroll(true);
+                    }
+                });
+            });
+        },
+        scroll: function (isInit) {
+            var _this = this;
+            if (isInit === void 0) { isInit = false; }
+            this.timer && clearTimeout(this.timer);
+            this.timer = null;
+            this.setData({
+                animationData: this.resetAnimation
+                    .translateX(isInit ? 0 : this.wrapWidth)
+                    .step()
+                    .export(),
+            });
+            (0, utils_1.requestAnimationFrame)(function () {
+                _this.setData({
+                    animationData: _this.animation.translateX(-_this.contentWidth).step().export(),
+                });
+            });
+            this.timer = setTimeout(function () {
+                _this.scroll();
+            }, this.duration + this.data.delay);
+        },
+        onClickIcon: function (event) {
+            if (this.data.mode === 'closeable') {
+                this.timer && clearTimeout(this.timer);
+                this.timer = null;
+                this.setData({ show: false });
+                this.$emit('close', event.detail);
+            }
+        },
+        onClickBtnText: function (event) {
+            this.$emit('btn-click', event);
+        },
+        onClick: function (event) {
+            var _a = this.data, url = _a.url, mode = _a.mode, openType = _a.openType;
+            if (mode === 'link' && url) {
+                if (openType === 'redirectTo') {
+                    wx.redirectTo({ url: url });
+                }
+                else if (openType === 'navigateTo') {
+                    wx.navigateTo({ url: url });
+                }
+            }
+            this.$emit('click', event);
+        },
+    },
+});

package/lib/notice-bar/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-icon": "../icon/index"
+  }
+}

package/lib/notice-bar/index.wxml

@@ -0,0 +1,54 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  wx:if="{{ show }}"
+  class="custom-class {{ utils.bem('notice-bar', { wrapable, warning: type === 'warning', error: type === 'error', info: type === 'info' }) }}"
+  hover-class="{{ mode === 'link' ? 'smart-notice-bar--hover' : ''}} {{ customHoverClass }}"
+  style="{{ computed.rootStyle([{ color, background }, customStyle]) }}"
+  bind:tap="onClick"
+>
+  <smart-icon
+    wx:if="{{ leftIcon }}"
+    name="{{ leftIcon }}"
+    class="smart-notice-bar__left-icon"
+    style="{{ computed.rootStyle(leftIconStyle) }}"
+    color="{{ leftIconColor }}"
+  />
+  <slot wx:else name="left-icon" />
+
+  <view class="smart-notice-bar__wrap">
+    <view class="smart-notice-bar__content {{ scrollable === false && !wrapable ? 'smart-ellipsis' : '' }}" animation="{{ animationData }}">
+      {{ text }}
+      <view 
+        wx:if="{{ btnText }}" 
+        class="smart-notice-bar__content__btn" 
+        hover-class="smart-notice-bar--hover"
+        catch:tap="onClickBtnText"
+        style="{{ btnTextColor ? 'color: ' + btnTextColor : ''}}"
+      >
+        {{ btnText }}
+      </view>
+      <slot wx:if="{{ !text }}"></slot>
+    </view>
+  </view>
+
+  <smart-icon
+    wx:if="{{ mode === 'closeable' }}"
+    class="smart-notice-bar__right-icon"
+    name="{{ Xmark }}"
+    style="{{ computed.rootStyle(rightIconStyle) }}"
+    color=" {{ rightIconColor }} "
+    aria-role="button"
+    aria-label="{{ closeIconAriaLabel }}"
+    catch:tap="onClickIcon"
+  />
+  <smart-icon 
+    wx:elif="{{ mode === 'link' }}" 
+    color=" {{ rightIconColor }} " 
+    class="smart-notice-bar__right-icon" 
+    name="{{ Right }}" 
+    style="{{ computed.rootStyle(rightIconStyle) }}"
+  />
+  <slot wx:else name="right-icon" />
+</view>

package/lib/notice-bar/index.wxs

@@ -0,0 +1,11 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style(data);
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

package/lib/notice-bar/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-notice-bar{align-items:center;background-color:var(--notice-bar-background-color,#e7f3fe);color:var(--notice-bar-text-color,rgba(0,0,0,.5));display:flex;font-size:var(--notice-bar-font-size,12px);height:var(--notice-bar-height,40px);line-height:var(--notice-bar-line-height,14px);padding:var(--notice-bar-padding,0 16px)}.smart-notice-bar--info{--icon-color:var(--notice-bar-info-color,#1989fa)}.smart-notice-bar--warning{--icon-color:var(--notice-bar-warning-color,#ffa000);background-color:var(--notice-bar-background-warning-color,#fff5e5)}.smart-notice-bar--error{--icon-color:var(--notice-bar-error-color,#f04c4c);background-color:var(--notice-bar-background-error-color,#fdeded)}.smart-notice-bar--hover{opacity:.6}.smart-notice-bar--wrapable{height:auto;padding:var(--notice-bar-wrapable-padding,8px 16px)}.smart-notice-bar--wrapable .smart-notice-bar__wrap{height:auto}.smart-notice-bar--wrapable .smart-notice-bar__content{position:relative;white-space:normal}.smart-notice-bar__left-icon{align-items:center;display:flex;font-size:var(--notice-bar-icon-size,16px);margin-right:var(--notice-bar-left-icon-margin-right,8px);vertical-align:middle}.smart-notice-bar__right-icon{--icon-color:var(--notice-bar-right-icon-color,rgba(0,0,0,.2));font-size:var(--notice-bar-icon-size,16px);margin-left:var(--notice-bar-right-icon-margin-left,8px)}.smart-notice-bar__wrap{flex:1;height:var(--notice-bar-line-height,14px);overflow:hidden;position:relative}.smart-notice-bar__content{position:absolute;white-space:nowrap}.smart-notice-bar__content.smart-ellipsis{max-width:100%}.smart-notice-bar__content__btn{color:var(--notice-bar-btn-color,var(--app-M4,#1989fa));display:inline-block}

package/lib/notify/README.md

@@ -0,0 +1,120 @@
+# Notify 消息提示
+
+### 介绍
+
+在页面顶部展示消息提示，支持函数调用和组件调用两种方式。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-notify": "@tuya/miniapp-smart-ui/lib/notify/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```js
+import Notify from '@tuya/miniapp-smart-ui/notify/notify';
+
+Notify('通知内容');
+```
+
+```html
+<!-- 在页面内添加对应的节点 -->
+<smart-notify id="smart-notify" />
+```
+
+### 通知类型
+
+支持`primary`、`success`、`warning`、`danger`四种通知类型，默认为`danger`。
+
+```js
+// 主要通知
+Notify({ type: 'primary', message: '通知内容' });
+
+// 成功通知
+Notify({ type: 'success', message: '通知内容' });
+
+// 危险通知
+Notify({ type: 'danger', message: '通知内容' });
+
+// 警告通知
+Notify({ type: 'warning', message: '通知内容' });
+```
+
+### 自定义通知
+
+自定义消息通知的颜色和展示时长。
+
+```js
+Notify({
+  message: '自定义颜色',
+  color: '#ad0000',
+  background: '#ffe1e1',
+});
+
+Notify({
+  message: '自定义时长',
+  duration: 1000,
+});
+```
+
+### 自定义选择器
+
+```js
+Notify({
+  message: '自定义节点选择器',
+  duration: 1000,
+  selector: '#custom-selector',
+});
+```
+
+```html
+<!-- 在页面内添加自定义节点 -->
+<smart-notify id="custom-selector" />
+```
+
+## API
+
+### 方法
+
+| 方法名       | 说明     | 参数                 | 返回值      |
+| ------------ | -------- | -------------------- | ----------- |
+| Notify       | 展示提示 | `options \| message` | notify 实例 |
+| Notify.clear | 关闭提示 | `options`            | `void`      |
+
+### Options
+
+| 参数             | 说明                                                   | 类型       | 默认值         |
+| ---------------- | ------------------------------------------------------ | ---------- | -------------- |
+| background       | 背景颜色                                               | _string_   | -              |
+| color            | 字体颜色                                               | _string_   | `#fff`         |
+| context          | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | _object_   | 当前页面       |
+| duration         | 展示时长(ms)，值为 0 时，notify 不会消失               | _number_   | `3000`         |
+| message          | 展示文案，支持通过`\n`换行                             | _string_   | `''`           |
+| onClick          | 点击时的回调函数                                       | _Function_ | -              |
+| onClose          | 关闭时的回调函数                                       | _Function_ | -              |
+| onOpened         | 完全展示后的回调函数                                   | _Function_ | -              |
+| safeAreaInsetTop | 是否留出顶部安全距离（状态栏高度）                     | _boolean_  | `false`        |
+| selector         | 自定义节点选择器                                       | _string_   | `smart-notify` |
+| top              | 顶部距离                                               | _number_   | `0`            |
+| type             | 类型，可选值为 `primary` `success` `warning`           | _string_   | `danger`       |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --notify-padding | _6px 15px_ | 通知内边距 |
+| --notify-font-size | _14px_ | 通知字体大小 |
+| --notify-line-height | _20px_ | 通知行高 |
+| --notify-primary-background-color | _#1989fa_ | 主要通知背景颜色 |
+| --notify-success-background-color | _#07c160_ | 成功通知背景颜色 |
+| --notify-danger-background-color | _#ee0a24_ | 危险通知背景颜色 |
+| --notify-warning-background-color | _#ff976a_ | 警告通知背景颜色 |

package/lib/notify/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-notify{word-wrap:break-word;font-size:var(--notify-font-size,14px);line-height:var(--notify-line-height,20px);padding:var(--notify-padding,6px 15px);text-align:center}.smart-notify__container{box-sizing:border-box;left:0;position:fixed;top:0;width:100%}.smart-notify--primary{background-color:var(--notify-primary-background-color,#1989fa)}.smart-notify--success{background-color:var(--notify-success-background-color,#07c160)}.smart-notify--danger{background-color:var(--notify-danger-background-color,#ee0a24)}.smart-notify--warning{background-color:var(--notify-warning-background-color,#ff976a)}

package/lib/notify/index.d.ts

@@ -0,0 +1 @@
+export {};