luna-mobile-weapp 0.0.1

package/miniprogram_dist/keyboard/index.js

@@ -0,0 +1,84 @@
+// import from 'svelte/transition'
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    visible: {
+      type: Boolean,
+      value: false,
+    },
+    title: {
+      type: String,
+      value: '',
+    },
+    extraKey: {
+      type: String,
+      value: '',
+    },
+    showDot: {
+      type: Boolean,
+      value: true,
+    },
+    oninput: {
+      type: null,
+    },
+    ondelete: {
+      type: null,
+    },
+    onconfirm: {
+      type: null,
+    },
+    onclose: {
+      type: null,
+    },
+  },
+
+  lifetimes: {
+    attached() {
+      const self = this;
+      // $bindable: visible
+      this.__bind_visible = function(e) {
+        self.setData({ visible: e.detail.value });
+        self.triggerEvent('update:visible', e.detail.value);
+      };
+    },
+  },
+
+  methods: {
+    close(e) {
+      // 用户定义的处理函数
+    },
+    close(e) {
+      // 用户定义的处理函数
+    },
+    vibrate(e) {
+      // 用户定义的处理函数
+    },
+    __handler_click(e) {
+      (() => handleKey(key)).call(this, e);
+    },
+    vibrate(e) {
+      // 用户定义的处理函数
+    },
+    __handler_click(e) {
+      (() => { if (extraKey) handleKey(extraKey); else if (showDot) handleKey('.'); }).call(this, e);
+    },
+    vibrate(e) {
+      // 用户定义的处理函数
+    },
+    __handler_click(e) {
+      (() => handleKey('0')).call(this, e);
+    },
+    vibrate(e) {
+      // 用户定义的处理函数
+    },
+    handleDelete(e) {
+      // 用户定义的处理函数
+    },
+    __bind_visible(e) {
+      this.setData({ visible: e.detail.value });
+      this.triggerEvent('update:visible', e.detail.value);
+    },
+  },
+
+});

package/miniprogram_dist/keyboard/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "isolated",
+  "usingComponents": {
+    "icon": "../icon/index"
+  }
+}

package/miniprogram_dist/keyboard/index.wxml

@@ -0,0 +1,27 @@
+<block wx:if="{{visible}}">
+  <view class="ln-overlay ln-overlay--transparent" role="presentation" bindtap="close">
+  </view>
+  <view class="ln-keyboard">
+    <block wx:if="{{title}}">
+      <view class="ln-keyboard__header">
+        <text class="ln-keyboard__title">
+{{title}}        </text>
+        <button type="button" class="ln-keyboard__close" bindtap="close">
+完成        </button>
+      </view>
+{{/if}}      <view class="ln-keyboard__body">
+        <block wx:for="{{keys}}" wx:for-item="key">
+          <button type="button" class="ln-keyboard__key" bindtouchstart="vibrate" bindtap="__handler_1">
+{{key}}          </button>
+        </block>
+        <button type="button" class="ln-keyboard__key ln-keyboard__key--extra" bindtouchstart="vibrate" bindtap="__handler_2">
+{{extraKey || (showDot ? '.' : '')}}        </button>
+        <button type="button" class="ln-keyboard__key" bindtouchstart="vibrate" bindtap="__handler_3">
+0        </button>
+        <button type="button" class="ln-keyboard__key ln-keyboard__key--delete" bindtouchstart="vibrate" bindtap="handleDelete">
+          <icon icon="{{Delete}}" size="{{22}}" />
+        </button>
+      </view>
+    </block>
+  </view>
+{{/if}}</block>

package/miniprogram_dist/keyboard/index.wxss

@@ -0,0 +1 @@
+.ln-overlay--transparent{background:rgba(0,0,0,0)}.ln-keyboard{position:fixed;bottom:0;left:0;right:0;z-index:2001;background:#f0f2f5;padding-bottom:env(safe-area-inset-bottom)}.ln-keyboard__header{display:flex;align-items:center;justify-content:space-between;padding:16rpx 32rpx;background:#fff;border-bottom:none}.ln-keyboard__title{font-size:28rpx;color:#303133}.ln-keyboard__close{border:none;background:none;color:#0062ff;font-size:28rpx;cursor:pointer}.ln-keyboard__body{display:grid;grid-template-columns:repeat(3, 1fr);gap:12rpx;padding:12rpx}.ln-keyboard__key{height:96rpx;display:flex;align-items:center;justify-content:center;font-size:40rpx;font-weight:500;background:#fff;color:#303133;border:none;border-radius:12rpx;cursor:pointer}.ln-keyboard__key:active{background:#e4e7ed}.ln-keyboard__key--extra{background:rgba(0,0,0,0);font-size:32rpx;color:#909399}.ln-keyboard__key--delete{background:rgba(0,0,0,0);color:#909399}.dark .ln-keyboard{background:#141415}.dark .ln-keyboard .ln-keyboard__header{background:#1d1e1f}.dark .ln-keyboard .ln-keyboard__title{color:#e5eaf3}.dark .ln-keyboard .ln-keyboard__close{color:#0062ff}.dark .ln-keyboard .ln-keyboard__key{background:#2c2d2e;color:#e5eaf3}.dark .ln-keyboard .ln-keyboard__key:active{background:#363637}.dark .ln-keyboard .ln-keyboard__key--extra,.dark .ln-keyboard .ln-keyboard__key--delete{color:#a3a6ad}

package/miniprogram_dist/lazy-image/index.js

@@ -0,0 +1,53 @@
+// import from 'svelte'
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    src: {
+      type: null,
+    },
+    alt: {
+      type: String,
+      value: '',
+    },
+    width: {
+      type: String,
+      value: '100%',
+    },
+    height: {
+      type: null,
+    },
+    round: {
+      type: Boolean,
+      value: false,
+    },
+    fit: {
+      type: String,
+      value: 'cover',
+    },
+    threshold: {
+      type: Number,
+      value: 100,
+    },
+    placeholderSrc: {
+      type: String,
+      value: '',
+    },
+  },
+
+  data: {
+    loaded: false,
+    inView: false,
+    error: false,
+  },
+
+  methods: {
+    __handler_load(e) {
+      (() => loaded = true).call(this, e);
+    },
+    __handler_error(e) {
+      (() => error = true).call(this, e);
+    },
+  },
+
+});

package/miniprogram_dist/lazy-image/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "isolated"
+}

package/miniprogram_dist/lazy-image/index.wxml

@@ -0,0 +1,16 @@
+<view class="ln-lazy-image" this="{{el}}" bindchange="__bind_el" class="{{round? 'is-round' : ''}}" style="width: {{width}}" style="height: {{height}}">
+  <block wx:if="{{inView && !error}}">
+    <image class="ln-lazy-image__inner" src="{{src}}" alt="{{alt}}" style="object-fit: {{fit}}" bindload="__handler_1" binderror="__handler_2" />
+  </block>
+  <block wx:elif="{{placeholderSrc && !error}}">
+    <image class="ln-lazy-image__placeholder" src="{{placeholderSrc}}" alt="" style="object-fit: {{fit}}" />
+{{/if}}    <block wx:if="{{error}}">
+      <view class="ln-lazy-image__error">
+加载失败      </view>
+    </block>
+    <block wx:elif="{{!loaded}}">
+      <view class="ln-lazy-image__loading">
+      </view>
+{{/if}}    </block>
+  </block>
+</view>

package/miniprogram_dist/lazy-image/index.wxss

@@ -0,0 +1 @@
+.ln-lazy-image{position:relative;overflow:hidden;background:#f5f7fa}.ln-lazy-image.is-round{border-radius:12rpx}.ln-lazy-image__inner{width:100%;height:100%;display:block}.ln-lazy-image__placeholder{width:100%;height:100%}.ln-lazy-image__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#f5f7fa}.ln-lazy-image__error{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#909399;font-size:26rpx;background:#f5f7fa}.dark .ln-lazy-image{background:#2c2d2e}.dark .ln-lazy-image .ln-lazy-image__loading{background:#2c2d2e}.dark .ln-lazy-image .ln-lazy-image__error{background:#2c2d2e;color:#a3a6ad}

package/miniprogram_dist/line-progress/index.js

@@ -0,0 +1,45 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    percentage: {
+      type: Number,
+      value: 0,
+    },
+    strokeWidth: {
+      type: Number,
+      value: 6,
+    },
+    color: {
+      type: String,
+      value: '',
+    },
+    trackColor: {
+      type: String,
+      value: '',
+    },
+    showText: {
+      type: Boolean,
+      value: true,
+    },
+    textInside: {
+      type: Boolean,
+      value: false,
+    },
+    status: {
+      type: String,
+      value: '',
+    },
+  },
+
+  data: {
+    pct: undefined,
+  },
+
+  observers: {
+    'percentage': function() {
+      this.setData({ pct: Math.min(100, Math.max(0, percentage)) });
+    },
+  },
+
+});

package/miniprogram_dist/line-progress/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "isolated"
+}

package/miniprogram_dist/line-progress/index.wxml

@@ -0,0 +1,14 @@
+<view class="ln-line-progress {status ? `ln-line-progress--${status}` : ''}">
+  <view class="ln-line-progress__bar" style="{trackColor ? `background:${trackColor};` : ''}height:{strokeWidth}px">
+    <view class="ln-line-progress__inner" style="width:{pct}%;{color ? `background:${color}` : ''}">
+      <block wx:if="{{showText && textInside}}">
+        <text class="ln-line-progress__text">
+{{pct}}%        </text>
+{{/if}}      </block>
+    </view>
+  </view>
+  <block wx:if="{{showText && !textInside}}">
+    <text class="ln-line-progress__text">
+{{pct}}%    </text>
+{{/if}}  </block>
+</view>

package/miniprogram_dist/line-progress/index.wxss

@@ -0,0 +1 @@
+.ln-line-progress{display:flex;align-items:center;width:100%}.ln-line-progress__bar{flex:1;border-radius:19998rpx;background-color:#ebeef5;overflow:hidden}.ln-line-progress__inner{height:100%;border-radius:19998rpx;background-color:#0062ff;transition:width .3s ease;display:flex;align-items:center;justify-content:flex-end}.ln-line-progress__text{flex-shrink:0;margin-left:16rpx;font-size:26rpx;color:#909399;min-width:72rpx;text-align:right}.ln-line-progress .ln-line-progress__inner>.ln-line-progress__text{margin:0 8rpx;font-size:24rpx;color:#fff}.ln-line-progress--success .ln-line-progress__inner{background-color:#31c27c}.ln-line-progress--warning .ln-line-progress__inner{background-color:#ff974a}.ln-line-progress--danger .ln-line-progress__inner{background-color:#fc5a5a}.dark .ln-line-progress .ln-line-progress__bar{background-color:#2c2d2e}.dark .ln-line-progress .ln-line-progress__text{color:#a3a6ad}

package/miniprogram_dist/load-more/index.js

@@ -0,0 +1,23 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    status: {
+      type: String,
+      value: 'more',
+    },
+    loadingText: {
+      type: String,
+      value: '加载中...',
+    },
+    nomoreText: {
+      type: String,
+      value: '没有更多了',
+    },
+    moreText: {
+      type: String,
+      value: '加载更多',
+    },
+  },
+
+});

package/miniprogram_dist/load-more/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "isolated",
+  "usingComponents": {
+    "loading": "../loading/index"
+  }
+}

package/miniprogram_dist/load-more/index.wxml

@@ -0,0 +1,21 @@
+<view class="ln-load-more">
+  <block wx:if="{{status === 'loading'}}">
+    <text class="ln-load-more__icon">
+      <loading size="small" />
+    </text>
+    <text class="ln-load-more__text">
+{{loadingText}}    </text>
+  </block>
+  <block wx:elif="{{status === 'nomore'}}">
+    <text class="ln-load-more__line">
+    </text>
+    <text class="ln-load-more__text">
+{{nomoreText}}    </text>
+    <text class="ln-load-more__line">
+    </text>
+  </block>
+  <block wx:else>
+    <text class="ln-load-more__text">
+{{moreText}}    </text>
+  </block>
+</view>

package/miniprogram_dist/load-more/index.wxss

@@ -0,0 +1 @@
+.ln-load-more{display:flex;align-items:center;justify-content:center;gap:16rpx;padding:32rpx 0}.ln-load-more__text{font-size:26rpx;color:#909399}.ln-load-more__icon{display:inline-flex;align-items:center;color:#0062ff;animation:ln-load-more-spin 1s linear infinite}.ln-load-more__line{flex:0 0 64rpx;height:1px;background-color:#ebeef5}.dark .ln-load-more .ln-load-more__text{color:#a3a6ad}.dark .ln-load-more .ln-load-more__icon{color:#0062ff}.dark .ln-load-more .ln-load-more__icon .ln-icon{color:#0062ff}.dark .ln-load-more .ln-load-more__line{background-color:hsla(0,0%,100%,.08)}@keyframes ln-load-more-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

package/miniprogram_dist/loading/index.js

@@ -0,0 +1,28 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    size: {
+      type: String,
+      value: 'default',
+    },
+    text: {
+      type: null,
+    },
+    fullscreen: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  data: {
+    px: undefined,
+  },
+
+  observers: {
+    'size': function() {
+      this.setData({ px: size === 'small' ? 20 : size === 'large' ? 40 : 30 });
+    },
+  },
+
+});

package/miniprogram_dist/loading/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "isolated"
+}

package/miniprogram_dist/loading/index.wxml

@@ -0,0 +1,12 @@
+<view class="ln-loading" class="{{size === 'small'? 'ln-loading--small' : ''}}" class="{{size === 'large'? 'ln-loading--large' : ''}}" class="{{fullscreen? 'is-fullscreen' : ''}}">
+  <svg class="ln-loading__spinner" width="{{px}}" height="{{px}}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-opacity="0.2" stroke-width="2.5" />
+    <path d="M12 3a9 9 0 0 1 9 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+      <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="0.8s" repeatCount="indefinite" />
+    </path>
+  </svg>
+  <block wx:if="{{text}}">
+    <text class="ln-loading__text">
+{{text}}    </text>
+{{/if}}  </block>
+</view>

package/miniprogram_dist/loading/index.wxss

@@ -0,0 +1 @@
+.ln-loading{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;color:#0062ff}.ln-loading__spinner{display:block;flex-shrink:0}.ln-loading__text{margin-top:16rpx;font-size:26rpx;color:#909399}.ln-loading.is-fullscreen{position:fixed;inset:0;background-color:rgba(0,0,0,.3);z-index:2001}.dark .ln-loading .ln-loading__text{color:#a3a6ad}.dark .ln-loading.is-fullscreen{background-color:rgba(0,0,0,.5)}

package/miniprogram_dist/main/index.js

@@ -0,0 +1,63 @@
+// import from 'svelte'
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    class: className: {
+      type: null,
+      value: "",
+    },
+    key: {
+      type: String,
+      value: "",
+    },
+    direction: {
+      type: String,
+      value: "forward",
+    },
+    animate: {
+      type: Boolean,
+      value: true,
+    },
+    children: {
+      type: null,
+    },
+  },
+
+  data: {
+    mainEl: undefined,
+    prevKey: '',
+  },
+
+  lifetimes: {
+    attached() {
+      const self = this;
+      // $effect #1
+      const currentKey = key;
+const prev = untrack(() => prevKey);
+if (currentKey === prev || !mainEl) { prevKey = currentKey; return; }
+prevKey = currentKey;
+
+if (!animate) {
+requestAnimationFrame(() =>
+mainEl?.dispatchEvent(new CustomEvent("routeready")),
+);
+return;
+}
+
+const cls =
+direction === "back" ? "ln-main--slide-left" : "ln-main--slide-right";
+mainEl.classList.add(cls);
+const onEnd = () => {
+mainEl?.classList.remove(cls);
+mainEl?.removeEventListener("animationend", onEnd);
+// 动画结束后等一帧确保布局稳定再通知恢复滚动
+requestAnimationFrame(() =>
+mainEl?.dispatchEvent(new CustomEvent("routeready")),
+);
+};
+mainEl.addEventListener("animationend", onEnd);;
+    },
+  },
+
+});

package/miniprogram_dist/main/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "isolated"
+}

package/miniprogram_dist/main/index.wxml

@@ -0,0 +1,5 @@
+<view class="ln-main {className}" this="{{mainEl}}" bindchange="__bind_mainEl">
+  <block wx:if="{{children}}">
+    <slot />
+{{/if}}  </block>
+</view>

package/miniprogram_dist/main/index.wxss

@@ -0,0 +1 @@
+.ln-container{display:flex;flex-direction:column;box-sizing:border-box;min-height:100vh;min-height:100dvh;max-width:1500rpx;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;transition:background-color .3s,color .3s}.dark .ln-container{background-color:#141415;color:#e5eaf3}.ln-header{position:fixed;top:0;left:0;right:0;max-width:1500rpx;margin:0 auto;flex-shrink:0;z-index:100;background-color:#fff;will-change:transform;transform:translateZ(0)}.dark .ln-header{background-color:#1d1e1f}.ln-main{display:block;flex:1;box-sizing:border-box;min-width:0;overflow-x:clip;padding:32rpx;padding-top:120rpx;background-color:#f2f3f5}.dark .ln-main{background-color:#141415}.ln-main--slide-right{animation:ln-slide-right 300ms ease both}.ln-main--slide-left{animation:ln-slide-left 300ms ease both}@keyframes ln-slide-right{from{transform:translateX(120rpx)}to{transform:translateX(0)}}@keyframes ln-slide-left{from{transform:translateX(-120rpx)}to{transform:translateX(0)}}.ln-footer{display:flex;align-items:center;box-sizing:border-box;flex-shrink:0;height:100rpx;padding:0 32rpx;background-color:#fff;border-top:.10rpx solid #e4e7ed}.dark .ln-footer{background-color:#1d1e1f;border-top-color:hsla(0,0%,100%,.08);color:#e5eaf3}.ln-aside{display:flex;flex-direction:column;box-sizing:border-box;flex-shrink:0;width:var(--ln-aside-width, 400rpx);overflow:hidden;background-color:#fff;border-right:.10rpx solid #e4e7ed}.dark .ln-aside{background-color:#1d1e1f;border-right-color:hsla(0,0%,100%,.08);color:#e5eaf3}

package/miniprogram_dist/navbar/index.js

@@ -0,0 +1,37 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    title: {
+      type: String,
+      value: '',
+    },
+    fixed: {
+      type: Boolean,
+      value: false,
+    },
+    bordered: {
+      type: Boolean,
+      value: true,
+    },
+    onback: {
+      type: null,
+    },
+    left: {
+      type: null,
+    },
+    right: {
+      type: null,
+    },
+  },
+
+  methods: {
+    onback(e) {
+      // 用户定义的处理函数
+    },
+    __handler_keydown(e) {
+      ((e: KeyboardEvent) => e.key === 'Enter' && onback?.()).call(this, e);
+    },
+  },
+
+});

package/miniprogram_dist/navbar/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "isolated",
+  "usingComponents": {
+    "icon": "../icon/index"
+  }
+}

package/miniprogram_dist/navbar/index.wxml

@@ -0,0 +1,23 @@
+<view class="ln-navbar" class="{{fixed? 'is-fixed' : ''}}" class="{{bordered? 'is-bordered' : ''}}">
+  <block wx:if="{{left || onback}}">
+    <view class="ln-navbar__left" role="button" tabindex="0" bindtap="onback" bindkeydown="__handler_1">
+      <block wx:if="{{left}}">
+        <slot name="left" />
+      </block>
+      <block wx:else>
+        <icon icon="{{ChevronLeft}}" size="{{24}}" />
+      </block>
+    </view>
+  </block>
+  <block wx:else>
+    <view class="ln-navbar__placeholder">
+    </view>
+  </block>
+  <view class="ln-navbar__title">
+{{title}}  </view>
+  <view class="ln-navbar__right">
+    <block wx:if="{{right}}">
+      <slot name="right" />
+{{/if}}    </block>
+  </view>
+</view>

package/miniprogram_dist/navbar/index.wxss

@@ -0,0 +1 @@
+.ln-navbar{position:relative;display:flex;align-items:center;height:88rpx;padding:0 32rpx;background-color:#fff}.ln-navbar__left{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:64rpx;height:64rpx;cursor:pointer;padding:0;border:none;background:none;color:#303133}.ln-navbar__placeholder{flex-shrink:0;width:64rpx}.ln-navbar__title{flex:1;text-align:center;font-size:28rpx;font-weight:500;color:#303133;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ln-navbar__right{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;min-width:64rpx}.ln-navbar.is-fixed{position:fixed;top:0;left:0;right:0;z-index:100}.ln-navbar.is-bordered::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background-color:#e4e7ed;transform:scaleY(0.5)}.dark .ln-navbar{background-color:#1d1e1f}.dark .ln-navbar .ln-navbar__title{color:#e5eaf3}.dark .ln-navbar .ln-navbar__left{color:#e5eaf3}.dark .ln-navbar.is-bordered::after{background-color:hsla(0,0%,100%,.08)}

package/miniprogram_dist/notice-bar/index.js

@@ -0,0 +1,79 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    text: {
+      type: String,
+      value: '',
+    },
+    type: {
+      type: String,
+      value: 'warning',
+    },
+    color: {
+      type: String,
+      value: '',
+    },
+    background: {
+      type: String,
+      value: '',
+    },
+    scrollable: {
+      type: Boolean,
+      value: true,
+    },
+    closeable: {
+      type: Boolean,
+      value: false,
+    },
+    showIcon: {
+      type: Boolean,
+      value: true,
+    },
+    speed: {
+      type: Number,
+      value: 60,
+    },
+    delay: {
+      type: Number,
+      value: 1,
+    },
+  },
+
+  data: {
+    visible: true,
+    wrapWidth: 0,
+    contentWidth: 0,
+    wrapEl: undefined,
+    contentEl: undefined,
+    shouldScroll: undefined,
+    duration: undefined,
+  },
+
+  observers: {
+    'wrapWidth, contentWidth, scrollable': function() {
+      this.setData({ shouldScroll: scrollable && contentWidth > wrapWidth });
+    },
+    'speed, contentWidth': function() {
+      this.setData({ duration: contentWidth / speed });
+    },
+  },
+
+  lifetimes: {
+    attached() {
+      const self = this;
+      // $effect #1
+      if (wrapEl && contentEl) {
+wrapWidth = wrapEl.offsetWidth;
+contentWidth = contentEl.scrollWidth;
+};
+    },
+  },
+
+  methods: {
+    close(e) {
+      // 用户定义的处理函数
+    },
+  },
+
+});

package/miniprogram_dist/notice-bar/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "isolated",
+  "usingComponents": {
+    "icon": "../icon/index"
+  }
+}

package/miniprogram_dist/notice-bar/index.wxml

@@ -0,0 +1,18 @@
+<block wx:if="{{visible}}">
+  <view class="ln-notice-bar ln-notice-bar--{type}" style="{color ? `color:${color};` : ''}{background ? `background:${background};` : ''}">
+    <block wx:if="{{showIcon}}">
+      <view class="ln-notice-bar__icon">
+        <icon icon="{{Volume2}}" size="{{16}}" />
+      </view>
+{{/if}}      <view class="ln-notice-bar__wrap" this="{{wrapEl}}" bindchange="__bind_wrapEl">
+        <view class="ln-notice-bar__content" style="{{shouldScroll ? `animation-duration:${duration}s;animation-delay:${delay}s` : ''}}" class="{{shouldScroll? 'is-scrolling' : ''}}" this="{{contentEl}}" bindchange="__bind_contentEl">
+{{text}}        </view>
+      </view>
+      <block wx:if="{{closeable}}">
+        <button class="ln-notice-bar__close" type="button" aria-label="关闭" bindtap="close">
+          <icon icon="{{X}}" size="{{14}}" />
+        </button>
+{{/if}}      </block>
+    </block>
+  </view>
+{{/if}}</block>

package/miniprogram_dist/notice-bar/index.wxss

@@ -0,0 +1 @@
+.ln-notice-bar{display:flex;align-items:center;gap:16rpx;padding:16rpx 24rpx;font-size:28rpx;line-height:1.5;border-radius:16rpx;border:1px solid rgba(0,0,0,0);overflow:hidden;color:#ff974a;background-color:rgb(255,246.68,240.52);border-color:rgb(255,234.2,218.8)}.ln-notice-bar--warning{color:#ff974a;background-color:rgb(255,246.68,240.52);border-color:rgb(255,234.2,218.8)}.ln-notice-bar--danger{color:#fc5a5a;background-color:rgb(254.76,241.8,241.8);border-color:rgb(254.4,222,222)}.ln-notice-bar--success{color:#31c27c;background-color:rgb(238.52,250.12,244.52);border-color:rgb(213.8,242.8,228.8)}.ln-notice-bar--primary{color:#0062ff;background-color:rgb(234.6,242.44,255);border-color:rgb(204,223.6,255)}.ln-notice-bar__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;align-self:center}.ln-notice-bar__wrap{flex:1;overflow:hidden;white-space:nowrap}.ln-notice-bar__content{display:inline-block;white-space:nowrap}.ln-notice-bar__content.is-scrolling{animation:ln-notice-scroll linear infinite}.ln-notice-bar__close{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;border:none;background:none;color:inherit;opacity:.7}.dark .ln-notice-bar .ln-notice-bar__close .ln-icon{color:inherit}.dark .ln-notice-bar,.dark .ln-notice-bar.ln-notice-bar--warning{color:#ffb680;background-color:rgba(255,151,74,.12);border-color:rgba(255,151,74,.25)}.dark .ln-notice-bar .ln-notice-bar__icon .ln-icon,.dark .ln-notice-bar.ln-notice-bar--warning .ln-notice-bar__icon .ln-icon{color:#ffb680}.dark .ln-notice-bar.ln-notice-bar--danger{color:#ff7875;background-color:rgba(252,90,90,.12);border-color:rgba(252,90,90,.25)}.dark .ln-notice-bar.ln-notice-bar--danger .ln-notice-bar__icon .ln-icon{color:#ff7875}.dark .ln-notice-bar.ln-notice-bar--success{color:#46c889;background-color:rgba(49,194,124,.12);border-color:rgba(49,194,124,.25)}.dark .ln-notice-bar.ln-notice-bar--success .ln-notice-bar__icon .ln-icon{color:#46c889}.dark .ln-notice-bar.ln-notice-bar--primary{color:#66a0ff;background-color:rgba(0,98,255,.12);border-color:rgba(0,98,255,.25)}.dark .ln-notice-bar.ln-notice-bar--primary .ln-notice-bar__icon .ln-icon{color:#66a0ff}@keyframes ln-notice-scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}