@atooyu/uxto-ui 1.0.0

package/src/components/u-list-item/u-list-item.vue

@@ -0,0 +1,180 @@
+<template>
+  <view
+    class="u-list-item"
+    :class="{
+      'u-list-item--clickable': clickable,
+      'u-list-item--disabled': disabled
+    }"
+    @click="handleClick"
+  >
+    <!-- 列表项图标/图片 -->
+    <view v-if="$slots.icon || icon || thumb" class="u-list-item__icon">
+      <slot name="icon">
+        <image v-if="thumb" class="u-list-item__thumb" :src="thumb" mode="aspectFill" />
+        <text v-else-if="icon" class="u-list-item__icon-text">{{ icon }}</text>
+      </slot>
+    </view>
+
+    <!-- 列表项主体 -->
+    <view class="u-list-item__body">
+      <view v-if="title || $slots.title" class="u-list-item__title">
+        <slot name="title">{{ title }}</slot>
+      </view>
+      <view v-if="desc || $slots.desc" class="u-list-item__desc">
+        <slot name="desc">{{ desc }}</slot>
+      </view>
+      <view v-if="$slots.default" class="u-list-item__content">
+        <slot />
+      </view>
+    </view>
+
+    <!-- 列表项右侧内容 -->
+    <view v-if="$slots.extra || extra || value" class="u-list-item__extra">
+      <slot name="extra">
+        <text v-if="value" class="u-list-item__value">{{ value }}</text>
+        <text v-if="extra" class="u-list-item__extra-text">{{ extra }}</text>
+      </slot>
+      <view v-if="showArrow" class="u-list-item__arrow">
+        <text class="u-list-item__arrow-icon">›</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title?: string
+  desc?: string
+  value?: string
+  extra?: string
+  icon?: string
+  thumb?: string
+  clickable?: boolean
+  disabled?: boolean
+  showArrow?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  desc: '',
+  value: '',
+  extra: '',
+  icon: '',
+  thumb: '',
+  clickable: false,
+  disabled: false,
+  showArrow: false
+})
+
+const emit = defineEmits<{
+  click: [event: Event]
+}>()
+
+const handleClick = (event: Event) => {
+  if (props.disabled) return
+  emit('click', event)
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-list-item {
+  display: flex;
+  align-items: flex-start;
+  padding: $--spacing-md $--spacing-lg;
+  background-color: $--bg-color-2;
+  border-bottom: 1px solid $--border-color;
+  transition: background-color $--transition-duration;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &--clickable {
+    &:active {
+      background-color: $--bg-color;
+    }
+  }
+
+  &--disabled {
+    opacity: 0.5;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    margin-right: $--spacing-md;
+  }
+
+  &__thumb {
+    width: 40px;
+    height: 40px;
+    border-radius: $--border-radius-sm;
+    object-fit: cover;
+  }
+
+  &__icon-text {
+    font-size: 20px;
+  }
+
+  &__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  &__title {
+    font-size: $--font-size-md;
+    color: $--text-color;
+    line-height: 1.5;
+  }
+
+  &__desc {
+    margin-top: $--spacing-xs;
+    font-size: $--font-size-sm;
+    color: $--text-color-2;
+    line-height: 1.4;
+  }
+
+  &__content {
+    margin-top: $--spacing-sm;
+  }
+
+  &__extra {
+    display: flex;
+    align-items: center;
+    margin-left: $--spacing-md;
+    flex-shrink: 0;
+  }
+
+  &__value {
+    font-size: $--font-size-md;
+    color: $--text-color-2;
+  }
+
+  &__extra-text {
+    font-size: $--font-size-sm;
+    color: $--text-color-3;
+  }
+
+  &__arrow {
+    display: flex;
+    align-items: center;
+    margin-left: $--spacing-sm;
+    color: $--text-color-3;
+  }
+
+  &__arrow-icon {
+    font-size: 16px;
+  }
+}
+</style>

package/src/components/u-loading/u-loading.vue

@@ -0,0 +1,80 @@
+<template>
+  <view class="u-loading" :class="{ 'u-loading--vertical': vertical }">
+    <view class="u-loading__spinner" :style="{ width: size + 'px', height: size + 'px' }">
+      <view
+        v-for="i in 12"
+        :key="i"
+        class="u-loading__line"
+        :style="{
+          transform: `rotate(${i * 30}deg)`,
+          backgroundColor: color
+        }"
+      />
+    </view>
+    <text v-if="text" class="u-loading__text" :style="{ color: textColor || color }">{{ text }}</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+  text?: string
+  textColor?: string
+  vertical?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 30,
+  color: '#1989fa'
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-loading {
+  display: inline-flex;
+  align-items: center;
+  gap: $--spacing-sm;
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &__spinner {
+    position: relative;
+    display: inline-block;
+  }
+
+  &__line {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 2px;
+    height: 25%;
+    margin-left: -1px;
+    border-radius: 1px;
+    transform-origin: center 200%;
+    opacity: 0.2;
+
+    @for $i from 1 through 12 {
+      &:nth-child(#{$i}) {
+        opacity: 0.2 + ($i - 1) * 0.06;
+      }
+    }
+  }
+
+  &__text {
+    font-size: $--font-size-sm;
+    line-height: 1.5;
+  }
+}
+</style>

package/src/components/u-loading-page/u-loading-page.vue

@@ -0,0 +1,94 @@
+<template>
+  <view v-if="visible" class="u-loading-page">
+    <view class="u-loading-page__content">
+      <view class="u-loading-page__spinner" :style="{ width: size + 'px', height: size + 'px' }">
+        <view
+          v-for="i in 12"
+          :key="i"
+          class="u-loading-page__line"
+          :style="{
+            transform: `rotate(${i * 30}deg)`,
+            backgroundColor: color
+          }"
+        />
+      </view>
+      <text v-if="text" class="u-loading-page__text" :style="{ color: textColor || color }">{{ text }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  visible?: boolean
+  text?: string
+  color?: string
+  textColor?: string
+  size?: number | string
+}
+
+withDefaults(defineProps<Props>(), {
+  visible: false,
+  text: '加载中...',
+  color: '#1989fa',
+  size: 40
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-loading-page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $--bg-color-2;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: $--spacing-md;
+  }
+
+  &__spinner {
+    position: relative;
+    display: inline-block;
+  }
+
+  &__line {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 3px;
+    height: 25%;
+    margin-left: -1.5px;
+    border-radius: 2px;
+    transform-origin: center 200%;
+    opacity: 0.2;
+
+    @for $i from 1 through 12 {
+      &:nth-child(#{$i}) {
+        opacity: 0.2 + ($i - 1) * 0.06;
+      }
+    }
+  }
+
+  &__text {
+    font-size: $--font-size-md;
+    line-height: 1.5;
+  }
+}
+</style>

package/src/components/u-modal/u-modal.vue

@@ -0,0 +1,159 @@
+<template>
+  <view v-if="visible" class="u-modal" @click="handleMaskClick">
+    <view class="u-modal__container" @click.stop>
+      <view v-if="title" class="u-modal__header">
+        <text class="u-modal__title">{{ title }}</text>
+      </view>
+
+      <view class="u-modal__body">
+        <slot>
+          <text class="u-modal__message">{{ message }}</text>
+        </slot>
+      </view>
+
+      <view class="u-modal__footer">
+        <view
+          v-if="showCancel"
+          class="u-modal__button u-modal__button--cancel"
+          @click="handleCancel"
+        >
+          <text>{{ cancelText }}</text>
+        </view>
+        <view
+          class="u-modal__button u-modal__button--confirm"
+          @click="handleConfirm"
+        >
+          <text>{{ confirmText }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  visible?: boolean
+  title?: string
+  message?: string
+  showCancel?: boolean
+  cancelText?: string
+  confirmText?: string
+  closeOnClickOverlay?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  title: '',
+  message: '',
+  showCancel: true,
+  cancelText: '取消',
+  confirmText: '确定',
+  closeOnClickOverlay: false
+})
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  cancel: []
+  confirm: []
+}>()
+
+const handleMaskClick = () => {
+  if (props.closeOnClickOverlay) {
+    emit('update:visible', false)
+  }
+}
+
+const handleCancel = () => {
+  emit('update:visible', false)
+  emit('cancel')
+}
+
+const handleConfirm = () => {
+  emit('update:visible', false)
+  emit('confirm')
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+
+  &__container {
+    width: 280px;
+    background-color: $--bg-color-2;
+    border-radius: $--border-radius-lg;
+    overflow: hidden;
+  }
+
+  &__header {
+    padding: $--spacing-lg $--spacing-lg $--spacing-sm;
+    text-align: center;
+  }
+
+  &__title {
+    font-size: $--font-size-lg;
+    font-weight: 600;
+    color: $--text-color;
+  }
+
+  &__body {
+    padding: $--spacing-md $--spacing-lg $--spacing-lg;
+    text-align: center;
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  &__message {
+    font-size: $--font-size-md;
+    color: $--text-color-2;
+    line-height: 1.5;
+  }
+
+  &__footer {
+    display: flex;
+    border-top: 1px solid $--border-color;
+  }
+
+  &__button {
+    flex: 1;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: $--font-size-md;
+    transition: background-color $--transition-duration;
+
+    &:active {
+      background-color: $--bg-color;
+    }
+
+    &--cancel {
+      color: $--text-color-2;
+      border-right: 1px solid $--border-color;
+    }
+
+    &--confirm {
+      color: $--color-primary;
+      font-weight: 500;
+    }
+  }
+}
+</style>

package/src/components/u-notice-bar/u-notice-bar.vue

@@ -0,0 +1,113 @@
+<template>
+  <view class="u-notice-bar" :class="{ 'u-notice-bar--wrapable': wrapable }" :style="{ color, background: background }">
+    <view v-if="$slots.leftIcon || leftIcon" class="u-notice-bar__left-icon">
+      <slot name="leftIcon">
+        <text>{{ leftIcon }}</text>
+      </slot>
+    </view>
+    <view class="u-notice-bar__content" :class="{ 'u-notice-bar__content--scrollable': scrollable }">
+      <view
+        v-if="scrollable"
+        class="u-notice-bar__text"
+        :style="{ animationDuration: speed + 's' }"
+      >
+        {{ text }}
+      </view>
+      <text v-else class="u-notice-bar__text">{{ text }}</text>
+    </view>
+    <view v-if="$slots.rightIcon || rightIcon" class="u-notice-bar__right-icon" @click="handleRightIconClick">
+      <slot name="rightIcon">
+        <text>{{ rightIcon }}</text>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  text: string
+  color?: string
+  background?: string
+  leftIcon?: string
+  rightIcon?: string
+  scrollable?: boolean
+  speed?: number
+  wrapable?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  color: '#ed6a0c',
+  background: '#fffbe8',
+  scrollable: false,
+  speed: 10,
+  wrapable: false
+})
+
+const emit = defineEmits<{
+  'right-icon-click': []
+}>()
+
+const handleRightIconClick = () => {
+  emit('right-icon-click')
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-notice-bar {
+  display: flex;
+  align-items: center;
+  padding: $--spacing-md $--spacing-lg;
+  font-size: $--font-size-sm;
+  line-height: 24px;
+
+  &--wrapable {
+    flex-wrap: wrap;
+    padding: $--spacing-md $--spacing-lg;
+  }
+
+  &__content {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+
+    &--scrollable {
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+
+  &__text {
+    display: inline-block;
+
+    .u-notice-bar__content--scrollable & {
+      animation: u-notice-bar-scroll linear infinite;
+    }
+  }
+
+  &__left-icon {
+    margin-right: $--spacing-sm;
+  }
+
+  &__right-icon {
+    margin-left: $--spacing-sm;
+  }
+}
+
+@keyframes u-notice-bar-scroll {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+</style>