maooo-skyline-ui-system 0.1.1

package/miniprogram_dist/calendar/calendar.wxss

@@ -0,0 +1,265 @@
+.mo-calendar {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background-color: var(--mo-color-background-surface, #FFFFFF);
+}
+
+.mo-calendar__header {
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 120rpx;
+  padding: 0 23rpx 0 38rpx;
+  background-color: var(--mo-color-background-surface, #FFFFFF);
+}
+
+.mo-calendar__header-side,
+.mo-calendar__close {
+  flex: none;
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.mo-calendar__title {
+  flex: 1;
+  color: var(--mo-color-text-primary, #111111);
+  font-size: var(--mo-font-size-title-2, 36rpx);
+  font-weight: var(--mo-font-weight-semibold, 600);
+  line-height: var(--mo-line-height-title-2, 50rpx);
+  text-align: center;
+}
+
+.mo-calendar__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.mo-calendar__week {
+  display: flex;
+  flex: none;
+  flex-direction: row;
+  align-items: center;
+  height: 72rpx;
+  background-color: var(--mo-color-background-surface, #FFFFFF);
+}
+
+.mo-calendar__week-text {
+  flex: 1;
+  color: var(--mo-color-text-tertiary, #999999);
+  font-size: 26rpx;
+  font-weight: 500;
+  line-height: 36rpx;
+  text-align: center;
+}
+
+.mo-calendar__month-scroll {
+  flex: 1;
+  height: 0;
+  min-height: 0;
+}
+
+.mo-calendar__months {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+}
+
+.mo-calendar__month {
+  display: flex;
+  flex-direction: column;
+}
+
+.mo-calendar__month:last-child {
+  margin-bottom: 0;
+}
+
+.mo-calendar__month-header {
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  height: 94rpx;
+  background-color: var(--mo-color-background-subtle, #FAFAFA);
+}
+
+.mo-calendar__month-title {
+  display: block;
+  color: var(--mo-color-text-primary, #111111);
+  font-size: var(--mo-font-size-title-2, 36rpx);
+  font-weight: var(--mo-font-weight-semibold, 600);
+  line-height: var(--mo-line-height-title-2, 50rpx);
+  text-align: center;
+}
+
+.mo-calendar__days {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 24rpx 25rpx 26rpx;
+  background-color: var(--mo-color-background-surface, #FFFFFF);
+}
+
+.mo-calendar__day {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 14.285714%;
+  height: 112rpx;
+  color: var(--mo-color-text-primary, #111111);
+}
+
+.mo-calendar__day.is-empty {
+  pointer-events: none;
+}
+
+.mo-calendar__day.is-disabled {
+  color: var(--mo-color-text-disabled, #CCCCCC);
+}
+
+.mo-calendar__day-content {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: var(--mo-radius-pill, 999rpx);
+}
+
+.mo-calendar__day-content.is-selected {
+  background-color: var(--mo-color-text-primary, #111111);
+}
+
+.mo-calendar__day-content.is-today:not(.is-selected):not(.is-disabled) .mo-calendar__day-number {
+  color: var(--mo-color-brand-primary, #FECBE7);
+}
+
+.mo-calendar__day-number {
+  color: var(--mo-color-text-primary, #111111);
+  font-size: var(--mo-font-size-title-4, 28rpx);
+  font-weight: var(--mo-font-weight-medium, 500);
+  line-height: 37rpx;
+}
+
+.mo-calendar__day-badge {
+  box-sizing: border-box;
+  position: absolute;
+  top: 12rpx;
+  right: 6rpx;
+  min-width: 26rpx;
+  height: 25rpx;
+  padding: 0 4rpx;
+  border-radius: 6rpx;
+  background-color: var(--mo-color-background-subtle, #FAFAFA);
+  color: var(--mo-color-text-tertiary, #999999);
+  font-size: 18rpx;
+  line-height: 25rpx;
+  text-align: center;
+  z-index: 1;
+}
+
+.mo-calendar__day-sub {
+  display: block;
+  max-width: 100%;
+  color: var(--mo-color-text-amount, #FF3E7A);
+  font-size: var(--mo-font-size-caption, 20rpx);
+  font-weight: var(--mo-font-weight-regular, 400);
+  line-height: 27rpx;
+  text-align: center;
+}
+
+.mo-calendar__day-content.is-disabled .mo-calendar__day-number {
+  color: var(--mo-color-text-disabled, #CCCCCC);
+}
+
+.mo-calendar__day-content.is-selected .mo-calendar__day-number {
+  color: var(--mo-color-text-inverse, #FFFFFF);
+}
+
+.mo-calendar__day-content.is-disabled .mo-calendar__day-sub {
+  color: var(--mo-color-text-disabled, #CCCCCC);
+}
+
+.mo-calendar__day-content.is-selected .mo-calendar__day-sub {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.mo-calendar__tags {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  padding: 60rpx 38rpx 42rpx;
+  border-top: 1rpx solid rgba(0, 0, 0, 0.04);
+  background-color: var(--mo-color-background-surface, #FFFFFF);
+}
+
+.mo-calendar__tag-title {
+  display: block;
+  margin-bottom: 26rpx;
+  color: var(--mo-color-text-primary, #111111);
+  font-size: var(--mo-font-size-title-3, 34rpx);
+  font-weight: var(--mo-font-weight-semibold, 600);
+  line-height: var(--mo-line-height-title-3, 48rpx);
+}
+
+.mo-calendar__tag-scroll {
+  width: 100%;
+  white-space: nowrap;
+  height: 60rpx;
+}
+
+.mo-calendar__tag-list {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+}
+
+.mo-calendar__tag {
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  min-width: 103rpx;
+  height: 60rpx;
+  margin-right: 24rpx;
+  padding: 0 24rpx;
+  border-radius: 12rpx;
+  background-color: var(--mo-color-background-subtle, #FAFAFA);
+}
+
+.mo-calendar__tag:last-child {
+  margin-right: 0;
+}
+
+.mo-calendar__tag.is-selected {
+  background-color: var(--mo-color-text-primary, #111111);
+}
+
+.mo-calendar__tag-label {
+  color: var(--mo-color-text-primary, #111111);
+  font-size: var(--mo-font-size-body, 24rpx);
+  font-weight: var(--mo-font-weight-regular, 400);
+  line-height: var(--mo-line-height-body, 34rpx);
+}
+
+.mo-calendar__tag.is-selected .mo-calendar__tag-label {
+  color: var(--mo-color-text-inverse, #FFFFFF);
+}
+
+.mo-calendar__tag.is-disabled .mo-calendar__tag-label {
+  color: var(--mo-color-text-disabled, #CCCCCC);
+}

package/miniprogram_dist/card/card.js

@@ -0,0 +1,22 @@
+Component({
+  properties: {
+    title: {
+      type: String,
+      value: ""
+    },
+    desc: {
+      type: String,
+      value: ""
+    },
+    clickable: {
+      type: Boolean,
+      value: false
+    }
+  },
+  methods: {
+    handleClick(event) {
+      if (!this.data.clickable) return;
+      this.triggerEvent("click", event.detail);
+    }
+  }
+});

package/miniprogram_dist/card/card.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {}
+}

package/miniprogram_dist/card/card.wxml

@@ -0,0 +1,9 @@
+<view class="mo-card {{clickable ? 'is-clickable' : ''}}" bindtap="handleClick">
+  <view wx:if="{{title || desc}}" class="mo-card__header">
+    <text wx:if="{{title}}" class="mo-card__title">{{title}}</text>
+    <text wx:if="{{desc}}" class="mo-card__desc">{{desc}}</text>
+  </view>
+  <view class="mo-card__body">
+    <slot></slot>
+  </view>
+</view>

package/miniprogram_dist/card/card.wxss

@@ -0,0 +1,34 @@
+.mo-card {
+  padding: 24rpx;
+  border-radius: 16rpx;
+  background: var(--mo-color-background-surface, #FFFFFF);
+  box-shadow: 0 2rpx 8rpx rgba(31, 35, 41, 0.08);
+}
+
+.mo-card.is-clickable {
+  transition: opacity 120ms ease;
+}
+
+.mo-card.is-clickable:active {
+  opacity: 0.78;
+}
+
+.mo-card__header {
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+  margin-bottom: 16rpx;
+}
+
+.mo-card__title {
+  color: var(--mo-color-text-primary, #111111);
+  font-size: 32rpx;
+  font-weight: 600;
+  line-height: 46rpx;
+}
+
+.mo-card__desc {
+  color: var(--mo-color-text-secondary, #666666);
+  font-size: 26rpx;
+  line-height: 36rpx;
+}

package/miniprogram_dist/countdown/countdown.js

@@ -0,0 +1,213 @@
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+function normalizeTime(time) {
+  const value = Number(time);
+  if (!Number.isFinite(value) || value <= 0) return 0;
+  return Math.floor(value);
+}
+
+function hasToken(format, token) {
+  return String(format || "").indexOf(token) !== -1;
+}
+
+function padNumber(value) {
+  const normalized = Math.max(0, Math.floor(Number(value) || 0));
+  return normalized < 10 ? `0${normalized}` : String(normalized);
+}
+
+function getParts(time, format) {
+  const normalizedTime = normalizeTime(time);
+  const showDays = hasToken(format, "DD");
+  const showHours = hasToken(format, "HH");
+  const showMinutes = hasToken(format, "mm");
+  const showSeconds = hasToken(format, "ss");
+  const totalSeconds = Math.ceil(normalizedTime / SECOND);
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = showDays ? Math.floor((totalSeconds % 86400) / 3600) : Math.floor(totalSeconds / 3600);
+  const minutes = showHours ? Math.floor((totalSeconds % 3600) / 60) : Math.floor(totalSeconds / 60);
+  const seconds = showMinutes || showHours || showDays ? totalSeconds % 60 : totalSeconds;
+
+  return {
+    time: normalizedTime,
+    days: showDays ? days : 0,
+    hours: showHours ? hours : 0,
+    minutes: showMinutes ? minutes : 0,
+    seconds: showSeconds ? seconds : 0
+  };
+}
+
+function createItems(parts, format) {
+  const showDays = hasToken(format, "DD");
+  const showHours = hasToken(format, "HH");
+  const showMinutes = hasToken(format, "mm");
+  const showSeconds = hasToken(format, "ss");
+  const items = [];
+  let hasTimeSegment = false;
+
+  if (showDays) {
+    items.push({
+      key: "days",
+      value: padNumber(parts.days),
+      unit: "天",
+      prefix: ""
+    });
+  }
+
+  if (showHours) {
+    items.push({
+      key: "hours",
+      value: padNumber(parts.hours),
+      unit: "",
+      prefix: ""
+    });
+    hasTimeSegment = true;
+  }
+
+  if (showMinutes) {
+    items.push({
+      key: "minutes",
+      value: padNumber(parts.minutes),
+      unit: "",
+      prefix: hasTimeSegment ? ":" : ""
+    });
+    hasTimeSegment = true;
+  }
+
+  if (showSeconds) {
+    items.push({
+      key: "seconds",
+      value: padNumber(parts.seconds),
+      unit: "",
+      prefix: hasTimeSegment ? ":" : ""
+    });
+  }
+
+  if (!items.length) {
+    items.push({
+      key: "seconds",
+      value: "00",
+      unit: "",
+      prefix: ""
+    });
+  }
+
+  return items;
+}
+
+Component({
+  options: {
+    styleIsolation: "apply-shared"
+  },
+  properties: {
+    time: {
+      type: Number,
+      value: 0,
+      observer: "handleTimeChange"
+    },
+    format: {
+      type: String,
+      value: "DD:HH:mm:ss",
+      observer: "renderCurrent"
+    },
+    customClass: {
+      type: String,
+      value: ""
+    }
+  },
+  data: {
+    items: createItems(getParts(0, "DD:HH:mm:ss"), "DD:HH:mm:ss"),
+    remainingTime: 0,
+    isFinished: true
+  },
+  lifetimes: {
+    attached() {
+      this.pageHidden = false;
+      this.resetCountdown(this.data.time);
+    },
+    detached() {
+      this.clearTimer();
+    }
+  },
+  pageLifetimes: {
+    hide() {
+      this.pageHidden = true;
+      this.clearTimer();
+    },
+    show() {
+      this.pageHidden = false;
+      if (!this.endTime || this.finishedEmitted) return;
+      this.tick();
+    }
+  },
+  methods: {
+    handleTimeChange(time) {
+      this.resetCountdown(time);
+    },
+    clearTimer() {
+      if (!this.timer) return;
+      clearTimeout(this.timer);
+      this.timer = null;
+    },
+    resetCountdown(time) {
+      const normalizedTime = normalizeTime(time);
+
+      this.clearTimer();
+
+      if (normalizedTime <= 0) {
+        this.endTime = 0;
+        this.finishedEmitted = true;
+        this.renderRemaining(0);
+        return;
+      }
+
+      this.endTime = Date.now() + normalizedTime;
+      this.finishedEmitted = false;
+
+      if (this.pageHidden) {
+        this.renderRemaining(normalizedTime);
+        return;
+      }
+
+      this.tick();
+    },
+    renderCurrent() {
+      const remainingTime = this.endTime ? Math.max(0, this.endTime - Date.now()) : normalizeTime(this.data.time);
+      this.renderRemaining(remainingTime);
+    },
+    renderRemaining(time) {
+      const remainingTime = normalizeTime(time);
+      const parts = getParts(remainingTime, this.data.format);
+
+      this.setData({
+        items: createItems(parts, this.data.format),
+        remainingTime: parts.time,
+        isFinished: parts.time <= 0
+      });
+
+      return parts;
+    },
+    tick() {
+      this.clearTimer();
+
+      const remainingTime = this.endTime ? Math.max(0, this.endTime - Date.now()) : 0;
+      const detail = this.renderRemaining(remainingTime);
+
+      if (remainingTime <= 0) {
+        if (!this.finishedEmitted) {
+          this.finishedEmitted = true;
+          this.triggerEvent("change", detail);
+          this.triggerEvent("finish", detail);
+        }
+        return;
+      }
+
+      this.triggerEvent("change", detail);
+      this.timer = setTimeout(() => {
+        this.tick();
+      }, SECOND);
+    }
+  }
+});

package/miniprogram_dist/countdown/countdown.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/miniprogram_dist/countdown/countdown.wxml

@@ -0,0 +1,9 @@
+<view class="mo-countdown {{customClass}} {{isFinished ? 'is-finished' : ''}}">
+  <block wx:for="{{items}}" wx:key="key">
+    <text wx:if="{{item.prefix}}" class="mo-countdown__separator">{{item.prefix}}</text>
+    <view class="mo-countdown__item mo-countdown__item--{{item.key}}">
+      <text class="mo-countdown__value">{{item.value}}</text>
+      <text wx:if="{{item.unit}}" class="mo-countdown__unit">{{item.unit}}</text>
+    </view>
+  </block>
+</view>

package/miniprogram_dist/countdown/countdown.wxss

@@ -0,0 +1,33 @@
+.mo-countdown {
+  display: inline-flex;
+  align-items: center;
+  color: var(--mo-color-text-primary, #111111);
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  vertical-align: middle;
+}
+
+.mo-countdown__item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.mo-countdown__value {
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.mo-countdown__unit {
+  margin-left: 4rpx;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.mo-countdown__separator {
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}

package/miniprogram_dist/form/form.js

@@ -0,0 +1,12 @@
+Component({
+  properties: {
+    title: {
+      type: String,
+      value: ""
+    },
+    desc: {
+      type: String,
+      value: ""
+    }
+  }
+});

package/miniprogram_dist/form/form.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {}
+}

package/miniprogram_dist/form/form.wxml

@@ -0,0 +1,12 @@
+<view class="mo-form">
+  <view wx:if="{{title || desc}}" class="mo-form__header">
+    <text wx:if="{{title}}" class="mo-form__title">{{title}}</text>
+    <text wx:if="{{desc}}" class="mo-form__desc">{{desc}}</text>
+  </view>
+  <view class="mo-form__body">
+    <slot></slot>
+  </view>
+  <view class="mo-form__actions">
+    <slot name="actions"></slot>
+  </view>
+</view>

package/miniprogram_dist/form/form.wxss

@@ -0,0 +1,35 @@
+.mo-form {
+  padding: 24rpx;
+  border-radius: 16rpx;
+  background: var(--mo-color-background-surface, #FFFFFF);
+}
+
+.mo-form__header {
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+  margin-bottom: 24rpx;
+}
+
+.mo-form__title {
+  color: var(--mo-color-text-primary, #111111);
+  font-size: 32rpx;
+  font-weight: 600;
+  line-height: 46rpx;
+}
+
+.mo-form__desc {
+  color: var(--mo-color-text-secondary, #666666);
+  font-size: 26rpx;
+  line-height: 36rpx;
+}
+
+.mo-form__body {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.mo-form__actions {
+  margin-top: 24rpx;
+}