luna-mobile-weapp 0.0.1

package/miniprogram_dist/guide/index.js

@@ -0,0 +1,93 @@
+// import from 'svelte/transition'
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    steps: {
+      type: Array,
+      value: [],
+    },
+    visible: {
+      type: Boolean,
+      value: false,
+    },
+    current: {
+      type: Number,
+      value: 0,
+    },
+    onchange: {
+      type: null,
+    },
+    onfinish: {
+      type: null,
+    },
+    onclose: {
+      type: null,
+    },
+  },
+
+  data: {
+    targetRect: { top: 0, left: 0, width: 0, height: 0 },
+    placement: undefined,
+    popoverTop: undefined,
+  },
+
+  observers: {
+    'current, placement, steps': function() {
+      this.setData({ placement: steps[current]?.placement ?? 'bottom' });
+    },
+    'targetRect, placement': function() {
+      this.setData({ popoverTop: (() => {
+const POPOVER_H = 140;
+const preferred = placement === 'top'
+? targetRect.top - GAP - POPOVER_H
+: targetRect.top + targetRect.height + GAP;
+return Math.min(preferred, window.innerHeight - POPOVER_H - 16);
+})() });
+    },
+  },
+
+  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);
+      };
+      // $bindable: current
+      this.__bind_current = function(e) {
+        self.setData({ current: e.detail.value });
+        self.triggerEvent('update:current', e.detail.value);
+      };
+      // $effect #1
+      if (visible) updateRect();;
+      // $effect #2
+      current; if (visible) updateRect();;
+    },
+  },
+
+  methods: {
+    __handler_click(e) {
+      (() => { current--; onchange?.(current); }).call(this, e);
+    },
+    __handler_click(e) {
+      (() => {
+            if (isLast) { visible = false; onfinish?.(); }
+            else { current++; onchange?.(current); }
+          }).call(this, e);
+    },
+    __handler_click(e) {
+      (() => { visible = false; onclose?.(); }).call(this, e);
+    },
+    __bind_visible(e) {
+      this.setData({ visible: e.detail.value });
+      this.triggerEvent('update:visible', e.detail.value);
+    },
+    __bind_current(e) {
+      this.setData({ current: e.detail.value });
+      this.triggerEvent('update:current', e.detail.value);
+    },
+  },
+
+});

package/miniprogram_dist/guide/index.json

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

package/miniprogram_dist/guide/index.wxml

@@ -0,0 +1,28 @@
+<block wx:if="{{visible && steps[current]}}">
+{{@const step = steps[current]}}{{@const isLast = current === steps.length - 1}}  <view class="ln-guide">
+    <view class="ln-guide__highlight" style="top:{targetRect.top - 4}px;left:{targetRect.left - 4}px;width:{targetRect.width + 8}px;height:{targetRect.height + 8}px">
+    </view>
+    <view class="ln-guide__popover ln-guide__popover--{placement}" style="top:{popoverTop}px;left:{Math.max(16, Math.min(targetRect.left, window.innerWidth - 280))}px">
+      <block wx:if="{{step.title}}">
+        <view class="ln-guide__title">
+{{step.title}}        </view>
+{{/if}}        <view class="ln-guide__content">
+{{step.content}}        </view>
+        <view class="ln-guide__footer">
+          <text class="ln-guide__progress">
+{{current + 1}}/{{steps.length}}          </text>
+          <view class="ln-guide__actions">
+            <block wx:if="{{current > 0}}">
+              <button type="button" class="ln-guide__btn" bindtap="__handler_1">
+上一步              </button>
+{{/if}}              <button type="button" class="ln-guide__btn ln-guide__btn--primary" bindtap="__handler_2">
+{{isLast ? '完成' : '下一步'}}              </button>
+            </block>
+          </view>
+        </view>
+      </block>
+    </view>
+    <button type="button" class="ln-guide__skip" bindtap="__handler_3">
+跳过    </button>
+  </view>
+{{/if}}</block>

package/miniprogram_dist/guide/index.wxss

@@ -0,0 +1 @@
+.ln-guide{position:fixed;inset:0;z-index:2011}.ln-guide__highlight{position:fixed;border-radius:12rpx;box-shadow:0 0 0 8000rpx rgba(0,0,0,.5);z-index:1;pointer-events:none}.ln-guide__popover{position:fixed;z-index:2;background:#fff;border-radius:16rpx;padding:32rpx;width:520rpx;max-width:calc(100vw - 64rpx);box-shadow:0 4rpx 8rpx rgba(0,0,0,.12),0 0 12rpx rgba(0,0,0,.04)}.ln-guide__popover--top{transform:translateY(-100%)}.ln-guide__title{font-size:32rpx;font-weight:500;color:#303133;margin-bottom:8rpx}.ln-guide__content{font-size:28rpx;color:#606266;line-height:1.5}.ln-guide__footer{display:flex;align-items:center;justify-content:space-between;margin-top:32rpx}.ln-guide__progress{font-size:24rpx;color:#909399}.ln-guide__actions{display:flex;gap:16rpx}.ln-guide__btn{padding:12rpx 28rpx;border:1px solid #dcdfe6;background:#fff;border-radius:12rpx;font-size:26rpx;color:#303133;cursor:pointer}.ln-guide__btn--primary{background:#0062ff;border-color:#0062ff;color:#fff}.ln-guide__skip{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 48rpx);left:50%;transform:translateX(-50%);z-index:2;border:none;background:hsla(0,0%,100%,.2);color:#fff;font-size:28rpx;padding:16rpx 48rpx;border-radius:40rpx;cursor:pointer}.dark .ln-guide .ln-guide__popover{background:#1d1e1f;box-shadow:0 4rpx 24rpx rgba(0,0,0,.3)}.dark .ln-guide .ln-guide__title{color:#e5eaf3}.dark .ln-guide .ln-guide__content{color:#cfd3dc}.dark .ln-guide .ln-guide__progress{color:#a3a6ad}.dark .ln-guide .ln-guide__btn{background:#2c2d2e;border-color:hsla(0,0%,100%,.08);color:#e5eaf3}.dark .ln-guide .ln-guide__btn--primary{background:#0062ff;border-color:#0062ff;color:#fff}.dark .ln-guide .ln-guide__skip{background:hsla(0,0%,100%,.15)}

package/miniprogram_dist/header/index.js

@@ -0,0 +1,17 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    height: {
+      type: null,
+    },
+    class: className: {
+      type: null,
+      value: '',
+    },
+    children: {
+      type: null,
+    },
+  },
+
+});

package/miniprogram_dist/header/index.json

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

package/miniprogram_dist/header/index.wxml

@@ -0,0 +1,5 @@
+<view class="ln-header {className}" style="height: {{height}}">
+  <block wx:if="{{children}}">
+    <slot />
+{{/if}}  </block>
+</view>

package/miniprogram_dist/header/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/highlight/index.js

@@ -0,0 +1,42 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    text: {
+      type: String,
+      value: '',
+    },
+    keywords: {
+      type: String,
+      value: '',
+    },
+    highlightColor: {
+      type: String,
+      value: '',
+    },
+  },
+
+  data: {
+    parts: undefined,
+  },
+
+  observers: {
+    'keywords, text': function() {
+      this.setData({ parts: const kws = Array.isArray(keywords) ? keywords : [keywords];
+const valid = kws.filter(Boolean);
+if (!valid.length || !text) return [{ text, highlight: false }];
+const escaped = valid.map(k => k.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+const re = new RegExp(`(${escaped.join('|')})`, 'gi');
+const result: { text: string; highlight: boolean }[] = [];
+let last = 0;
+for (const m of text.matchAll(re)) {
+if (m.index! > last) result.push({ text: text.slice(last, m.index!), highlight: false });
+result.push({ text: m[0], highlight: true });
+last = m.index! + m[0].length;
+}
+if (last < text.length) result.push({ text: text.slice(last), highlight: false });
+return result; });
+    },
+  },
+
+});

package/miniprogram_dist/highlight/index.json

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

package/miniprogram_dist/highlight/index.wxml

@@ -0,0 +1,10 @@
+<text class="ln-highlight">
+  <block wx:for="{{parts}}" wx:for-item="p">
+    <block wx:if="{{p.highlight}}">
+      <text class="ln-highlight__tag" style="{{highlightColor ? `color:${highlightColor}` : ''}}">
+{{p.text}}      </text>
+    </block>
+    <block wx:else>
+{{p.text}}    </block>
+  </block>
+</text>

package/miniprogram_dist/highlight/index.wxss

@@ -0,0 +1 @@
+.ln-highlight{display:inline;color:#303133}.ln-highlight__tag{display:inline;color:#0062ff}.dark .ln-highlight{color:#e5eaf3}.dark .ln-highlight .ln-highlight__tag{color:#66a0ff}

package/miniprogram_dist/icon/index.js

@@ -0,0 +1,26 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    icon: {
+      type: null,
+    },
+    size: {
+      type: Number,
+      value: 24,
+    },
+    color: {
+      type: String,
+      value: 'currentColor',
+    },
+    strokeWidth: {
+      type: Number,
+      value: 2,
+    },
+    class: className: {
+      type: null,
+      value: '',
+    },
+  },
+
+});

package/miniprogram_dist/icon/index.json

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

package/miniprogram_dist/icon/index.wxml

@@ -0,0 +1,5 @@
+<svg class="ln-icon {className}" xmlns="http://www.w3.org/2000/svg" width="{{size}}" height="{{size}}" viewBox="0 0 24 24" fill="none" stroke="{{color}}" stroke-width="{{strokeWidth}}" stroke-linecap="round" stroke-linejoin="round" role="img">
+  <block wx:for="{{icon}}" wx:for-item="[tag" wx:for-index="attrs]">
+    <svelte:element this="{{tag}}" />
+  </block>
+</svg>

package/miniprogram_dist/icon/index.wxss

@@ -0,0 +1 @@
+.ln-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.dark .ln-icon{color:#e5eaf3}

package/miniprogram_dist/image/index.js

@@ -0,0 +1,51 @@
+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,
+    },
+    circle: {
+      type: Boolean,
+      value: false,
+    },
+    lazy: {
+      type: Boolean,
+      value: false,
+    },
+    fit: {
+      type: String,
+      value: 'cover',
+    },
+  },
+
+  data: {
+    loaded: false,
+    error: false,
+  },
+
+  methods: {
+    __handler_load(e) {
+      (() => loaded = true).call(this, e);
+    },
+    __handler_error(e) {
+      (() => error = true).call(this, e);
+    },
+  },
+
+});

package/miniprogram_dist/image/index.json

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

package/miniprogram_dist/image/index.wxml

@@ -0,0 +1,13 @@
+<view class="ln-image" class="{{round? 'is-round' : ''}}" class="{{circle? 'is-circle' : ''}}" style="width: {{width}}" style="height: {{height}}">
+  <block wx:if="{{!error}}">
+    <image class="ln-image__inner" src="{{src}}" alt="{{alt}}" loading="{{lazy ? 'lazy' : 'eager'}}" style="object-fit: {{fit}}" bindload="__handler_1" binderror="__handler_2" />
+  </block>
+  <block wx:else>
+    <view class="ln-image__error">
+加载失败    </view>
+  </block>
+  <block wx:if="{{!loaded && !error}}">
+    <view class="ln-image__placeholder">
+加载中    </view>
+{{/if}}  </block>
+</view>

package/miniprogram_dist/image/index.wxss

@@ -0,0 +1 @@
+.ln-image{position:relative;display:inline-block;overflow:hidden}.ln-image__inner{width:100%;height:100%;object-fit:cover;display:block}.ln-image__placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#f5f7fa;color:#a8abb2;font-size:26rpx}.ln-image__error{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#f5f7fa;color:#a8abb2;font-size:26rpx}.ln-image.is-round{border-radius:16rpx}.ln-image.is-circle{border-radius:50%}.dark .ln-image .ln-image__placeholder,.dark .ln-image .ln-image__error{background-color:#2c2d2e;color:#6b6f76}

package/miniprogram_dist/input/index.js

@@ -0,0 +1,121 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    value: {
+      type: String,
+      value: '',
+    },
+    type: {
+      type: String,
+      value: 'text',
+    },
+    placeholder: {
+      type: String,
+      value: '',
+    },
+    label: {
+      type: null,
+    },
+    maxlength: {
+      type: null,
+    },
+    clearable: {
+      type: Boolean,
+      value: false,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    size: {
+      type: String,
+      value: 'default',
+    },
+    showPasswordToggle: {
+      type: Boolean,
+      value: false,
+    },
+    showStrength: {
+      type: Boolean,
+      value: false,
+    },
+    oninput: {
+      type: null,
+    },
+    onchange: {
+      type: null,
+    },
+    onclear: {
+      type: null,
+    },
+  },
+
+  data: {
+    focused: false,
+    pwdVisible: false,
+    isPassword: undefined,
+    inputType: undefined,
+    strength: undefined,
+    strengthLabel: undefined,
+  },
+
+  observers: {
+    'type': function() {
+      this.setData({ isPassword: type === 'password' });
+    },
+    'isPassword, pwdVisible, type': function() {
+      this.setData({ inputType: isPassword && pwdVisible ? 'text' : type });
+    },
+    'isPassword, value, showStrength': function() {
+      this.setData({ strength: if (!isPassword || !showStrength || !value) return 0;
+let s = 0;
+if (value.length >= 6) s++;
+if (value.length >= 10) s++;
+if (/[A-Z]/.test(value) && /[a-z]/.test(value)) s++;
+if (/\d/.test(value)) s++;
+if (/[^A-Za-z0-9]/.test(value)) s++;
+return s <= 1 ? 1 : s <= 3 ? 2 : 3; });
+    },
+    'strength': function() {
+      this.setData({ strengthLabel: ['', '弱', '中', '强'][strength] });
+    },
+  },
+
+  lifetimes: {
+    attached() {
+      const self = this;
+      // $bindable: value
+      this.__bind_value = function(e) {
+        self.setData({ value: e.detail.value });
+        self.triggerEvent('update:value', e.detail.value);
+      };
+    },
+  },
+
+  methods: {
+    __handler_focus(e) {
+      (() => focused = true).call(this, e);
+    },
+    __handler_blur(e) {
+      (() => focused = false).call(this, e);
+    },
+    oninput(e) {
+      // 用户定义的处理函数
+    },
+    onchange(e) {
+      // 用户定义的处理函数
+    },
+    handleClear(e) {
+      // 用户定义的处理函数
+    },
+    __handler_click(e) {
+      (() => pwdVisible = !pwdVisible).call(this, e);
+    },
+    __bind_value(e) {
+      this.setData({ value: e.detail.value });
+      this.triggerEvent('update:value', e.detail.value);
+    },
+  },
+
+});

package/miniprogram_dist/input/index.json

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

package/miniprogram_dist/input/index.wxml

@@ -0,0 +1,35 @@
+<view class="ln-input" class="{{size === 'large'? 'ln-input--large' : ''}}" class="{{size === 'small'? 'ln-input--small' : ''}}" class="{{focused? 'is-focus' : ''}}" class="{{disabled? 'is-disabled' : ''}}">
+  <block wx:if="{{label}}">
+    <text class="ln-input__label">
+{{label}}    </text>
+{{/if}}    <input class="ln-input__inner" type="{{inputType}}" placeholder="{{placeholder}}" disabled="{{disabled}}" maxlength="{{maxlength}}" bindfocus="__handler_1" bindblur="__handler_2" bindinput="oninput" bindchange="onchange" />
+    <block wx:if="{{clearable && value && !isPassword}}">
+      <button type="button" class="ln-input__clear" bindtap="handleClear">
+        <icon icon="{{X}}" size="{{14}}" />
+      </button>
+{{/if}}      <block wx:if="{{isPassword && showPasswordToggle}}">
+        <button type="button" class="ln-input__eye" tabindex="-1" bindtap="__handler_3">
+          <icon icon="{{pwdVisible ? EyeOff : Eye}}" size="{{16}}" />
+        </button>
+{{/if}}        <block wx:if="{{maxlength}}">
+          <text class="ln-input__count">
+{{value.length}}/{{maxlength}}          </text>
+{{/if}}        </block>
+      </block>
+    </block>
+  </block>
+</view>
+<block wx:if="{{isPassword && showStrength && value}}">
+  <view class="ln-input__strength">
+    <view class="ln-input__strength-bar" class="{{strength >= 1? 'is-weak' : ''}}" class="{{strength >= 2? 'is-medium' : ''}}" class="{{strength >= 3? 'is-strong' : ''}}">
+      <text>
+      </text>
+      <text>
+      </text>
+      <text>
+      </text>
+    </view>
+    <text class="ln-input__strength-text">
+{{strengthLabel}}    </text>
+  </view>
+{{/if}}</block>

package/miniprogram_dist/input/index.wxss

@@ -0,0 +1 @@
+.ln-input{position:relative;display:inline-flex;align-items:center;width:100%;height:80rpx;padding:0 24rpx;font-size:28rpx;background-color:#fff;border:1px solid #dcdfe6;border-radius:12rpx;transition:border-color .2s;box-sizing:border-box}.ln-input__inner{flex:1;width:100%;height:100%;border:none;outline:none;background:rgba(0,0,0,0);color:#303133;font-size:inherit;font-family:inherit;padding:0}.ln-input__inner::placeholder{color:#a8abb2}.ln-input__label{flex-shrink:0;margin-right:16rpx;font-size:28rpx;color:#303133}.ln-input__clear{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:40rpx;height:40rpx;color:#a8abb2;cursor:pointer;padding:0;border:none;background:none}.ln-input__count{flex-shrink:0;margin-left:8rpx;font-size:24rpx;color:#909399}.ln-input.is-focus{border-color:#0062ff}.ln-input.is-disabled{background-color:#f5f7fa;color:#c0c4cc;cursor:not-allowed;opacity:.5}.ln-input--large{height:96rpx;font-size:32rpx}.ln-input--small{height:64rpx;font-size:26rpx}.dark .ln-input{background-color:#1d1e1f;border-color:hsla(0,0%,100%,.08)}.dark .ln-input .ln-input__inner{color:#e5eaf3}.dark .ln-input .ln-input__inner::placeholder{color:#6b6f76}.dark .ln-input .ln-input__label{color:#e5eaf3}.dark .ln-input .ln-input__clear{color:#6b6f76}.dark .ln-input .ln-input__count{color:#a3a6ad}.dark .ln-input.is-focus{border-color:#0062ff}.dark .ln-input.is-disabled{background-color:#141415}

package/miniprogram_dist/input-number/index.js

@@ -0,0 +1,71 @@
+const { createReactiveProxy, batchSetData } = require('../common/runtime');
+
+Component({
+  properties: {
+    value: {
+      type: Number,
+      value: 0,
+    },
+    min: {
+      type: Number,
+      value: 0,
+    },
+    max: {
+      type: Number,
+      value: Infinity,
+    },
+    step: {
+      type: Number,
+      value: 1,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    onchange: {
+      type: null,
+    },
+  },
+
+  data: {
+    canDecrease: undefined,
+    canIncrease: undefined,
+  },
+
+  observers: {
+    'value, disabled, min': function() {
+      this.setData({ canDecrease: !disabled && value > min });
+    },
+    'value, disabled, max': function() {
+      this.setData({ canIncrease: !disabled && value < max });
+    },
+  },
+
+  lifetimes: {
+    attached() {
+      const self = this;
+      // $bindable: value
+      this.__bind_value = function(e) {
+        self.setData({ value: e.detail.value });
+        self.triggerEvent('update:value', e.detail.value);
+      };
+    },
+  },
+
+  methods: {
+    decrease(e) {
+      // 用户定义的处理函数
+    },
+    onInput(e) {
+      // 用户定义的处理函数
+    },
+    increase(e) {
+      // 用户定义的处理函数
+    },
+    __bind_value(e) {
+      this.setData({ value: e.detail.value });
+      this.triggerEvent('update:value', e.detail.value);
+    },
+  },
+
+});

package/miniprogram_dist/input-number/index.json

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

package/miniprogram_dist/input-number/index.wxml

@@ -0,0 +1,9 @@
+<view class="ln-input-number" class="{{disabled? 'is-disabled' : ''}}">
+  <button class="ln-input-number__btn" type="button" aria-label="减少" class="{{!canDecrease? 'is-disabled' : ''}}" bindtap="decrease">
+    <icon icon="{{Minus}}" size="{{14}}" />
+  </button>
+  <input class="ln-input-number__input" type="number" value="{{value}}" disabled="{{disabled}}" bindinput="onInput" />
+  <button class="ln-input-number__btn" type="button" aria-label="增加" class="{{!canIncrease? 'is-disabled' : ''}}" bindtap="increase">
+    <icon icon="{{Plus}}" size="{{14}}" />
+  </button>
+</view>

package/miniprogram_dist/input-number/index.wxss

@@ -0,0 +1 @@
+.ln-input-number{display:inline-flex;align-items:stretch;border:1px solid #e4e7ed;border-radius:16rpx;overflow:hidden;background:#fff}.ln-input-number__btn{display:inline-flex;align-items:center;justify-content:center;width:64rpx;padding:0;border:none;background-color:#f2f3f5;color:#909399;cursor:pointer;flex-shrink:0}.ln-input-number__btn:first-child{border-right:1px solid #e4e7ed}.ln-input-number__btn:last-child{border-left:1px solid #e4e7ed}.ln-input-number__btn:active{color:#0062ff}.ln-input-number__btn.is-disabled{color:#c0c4cc;cursor:not-allowed}.ln-input-number__btn.is-disabled:active{color:#c0c4cc}.ln-input-number__input{width:96rpx;height:64rpx;text-align:center;border:none;outline:none;font-size:28rpx;color:#303133;background:rgba(0,0,0,0);-moz-appearance:textfield}.ln-input-number__input::-webkit-inner-spin-button,.ln-input-number__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ln-input-number.is-disabled{opacity:.5}.dark .ln-input-number{border-color:hsla(0,0%,100%,.08);background:#1d1e1f}.dark .ln-input-number .ln-input-number__btn{background-color:#2c2d2e;color:#a3a6ad;border-color:hsla(0,0%,100%,.08)}.dark .ln-input-number .ln-input-number__btn:active{color:#0062ff}.dark .ln-input-number .ln-input-number__btn.is-disabled{color:#6b6f76}.dark .ln-input-number .ln-input-number__input{color:#e5eaf3}