tang-ui-x 1.0.0

package/components/TListItem/index.uvue

@@ -0,0 +1,161 @@
+<script  setup lang="uts" >
+import { computed } from 'vue'
+import type { TListItemProps } from './type.uts'
+
+/**
+ * TListItem 列表项组件
+ * @description 列表中的单个项目
+ */
+
+// 定义 props
+const props = withDefaults(defineProps<TListItemProps>(), {
+  title: '',
+  description: '',
+  icon: '',
+  extra: '',
+  arrow: false,
+  clickable: false,
+  disabled: false
+})
+
+// 定义 emits
+const emit = defineEmits<{
+  click: []
+}>()
+
+/**
+ * 计算列表项样式类
+ */
+const itemClass = computed<string>(() => {
+  const classes: string[] = ['t-list-item']
+
+  if (props.clickable && !props.disabled) {
+    classes.push('t-list-item--clickable')
+  }
+
+  if (props.disabled) {
+    classes.push('t-list-item--disabled')
+  }
+
+  return classes.join(' ')
+})
+
+/**
+ * 处理点击事件
+ */
+const handleClick = (): void => {
+  if (!props.disabled && props.clickable) {
+    emit('click')
+  }
+}
+</script>
+
+<template>
+  <view :class="itemClass" @click="handleClick">
+    <!-- 左侧图标 -->
+    <view v-if="icon" class="t-list-item__icon">
+      <text class="t-list-item__icon-text">{{ icon }}</text>
+    </view>
+
+    <!-- 中间内容 -->
+    <view class="t-list-item__content">
+      <slot>
+        <text v-if="title" class="t-list-item__title">{{ title }}</text>
+        <text v-if="description" class="t-list-item__description">{{ description }}</text>
+      </slot>
+    </view>
+
+    <!-- 右侧内容 -->
+    <view class="t-list-item__extra">
+      <text v-if="extra" class="t-list-item__extra-text">{{ extra }}</text>
+      <text v-if="arrow" class="t-list-item__arrow">›</text>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.t-list-item {
+  display: flex;
+  flex-direction: row;
+  gap: 24rpx;
+  align-items: center;
+  padding: 12px 16px;
+  background-color: #ffffff;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 16px;
+    right: 0;
+    bottom: 0;
+    height: 1px;
+    background-color: #ebeef5;
+  }
+
+  &:last-child::after {
+    display: none;
+  }
+
+  &--clickable {
+    cursor: pointer;
+    transition: background-color 0.3s;
+
+    &:active {
+      background-color: #f5f7fa;
+    }
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &-text {
+      font-size: 20px;
+      color: #909399;
+    }
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__title {
+    font-size: 16px;
+    color: #303133;
+    line-height: 24px;
+  }
+
+  &__description {
+    font-size: 14px;
+    color: #909399;
+    line-height: 20px;
+    margin-top: 4px;
+  }
+
+  &__extra {
+    display: flex;
+    align-items: center;
+    margin-left: 12px;
+
+    &-text {
+      font-size: 14px;
+      color: #909399;
+    }
+  }
+
+  &__arrow {
+    font-size: 20px;
+    color: #c0c4cc;
+    margin-left: 8px;
+  }
+}
+</style>

package/components/TListItem/type.uts

@@ -0,0 +1,49 @@
+/**
+ * TListItem 列表项组件属性类型定义
+ */
+export type TListItemProps = {
+  /**
+   * 列表项标题
+   */
+  title?: string
+
+  /**
+   * 列表项描述
+   */
+  description?: string
+
+  /**
+   * 左侧图标
+   */
+  icon?: string
+
+  /**
+   * 右侧文字
+   */
+  extra?: string
+
+  /**
+   * 是否显示右侧箭头
+   * @default false
+   */
+  arrow?: boolean
+
+  /**
+   * 是否可点击
+   * @default false
+   */
+  clickable?: boolean
+
+  /**
+   * 是否禁用
+   * @default false
+   */
+  disabled?: boolean
+}
+
+export type TListItemEmits = {
+  /**
+   * 点击列表项时触发
+   */
+  click: () => void
+}

package/components/TLoading/index.uvue

@@ -0,0 +1,153 @@
+<script  setup lang="uts" >
+import { computed } from 'vue'
+import type { TLoadingProps } from './type.uts'
+
+/**
+ * TLoading 加载组件
+ * @description 用于显示加载状态
+ */
+
+// 定义 props
+const props = withDefaults(defineProps<TLoadingProps>(), {
+  loading: false,
+  text: '',
+  size: 'medium',
+  color: '#409eff',
+  fullscreen: false,
+  mask: true,
+  maskBgColor: 'rgba(255, 255, 255, 0.9)'
+})
+
+/**
+ * 计算加载容器样式类
+ */
+const loadingClass = computed<string>(() => {
+  const classes: string[] = ['t-loading']
+
+  if (props.fullscreen) {
+    classes.push('t-loading--fullscreen')
+  }
+
+  return classes.join(' ')
+})
+
+/**
+ * 计算遮罩层样式
+ */
+const maskStyle = computed<string>(() => {
+  const styles: string[] = []
+
+  if (props.maskBgColor != '') {
+    styles.push(`background-color: ${props.maskBgColor}`)
+  }
+
+  return styles.join('; ')
+})
+
+/**
+ * 计算加载图标样式类
+ */
+const spinnerClass = computed<string>(() => {
+  const classes: string[] = ['t-loading__spinner']
+
+  classes.push(`t-loading__spinner--${props.size}`)
+
+  return classes.join(' ')
+})
+
+/**
+ * 计算加载图标样式
+ */
+const spinnerStyle = computed<string>(() => {
+  const styles: string[] = []
+
+  if (props.color != '') {
+    styles.push(`border-color: ${props.color}`)
+    styles.push(`border-top-color: transparent`)
+  }
+
+  return styles.join('; ')
+})
+</script>
+
+<template>
+  <view v-if="loading" :class="loadingClass">
+    <view v-if="mask" class="t-loading__mask" :style="maskStyle"></view>
+    <view class="t-loading__content">
+      <view :class="spinnerClass" :style="spinnerStyle"></view>
+      <text v-if="text" class="t-loading__text">{{ text }}</text>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.t-loading {
+  position: relative;
+
+  &--fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+  }
+
+  &__mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.9);
+  }
+
+  &__content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 1;
+  }
+
+  &__spinner {
+    border: 2px solid #409eff;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+
+    &--small {
+      width: 20px;
+      height: 20px;
+    }
+
+    &--medium {
+      width: 30px;
+      height: 30px;
+    }
+
+    &--large {
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  &__text {
+    margin-top: 12px;
+    font-size: 14px;
+    color: #606266;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+</style>

package/components/TLoading/type.uts

@@ -0,0 +1,43 @@
+/**
+ * TLoading 加载组件属性类型定义
+ */
+export type TLoadingProps = {
+  /**
+   * 是否显示加载
+   * @default false
+   */
+  loading?: boolean
+
+  /**
+   * 加载文字提示
+   */
+  text?: string
+
+  /**
+   * 加载图标大小
+   * @default "medium"
+   */
+  size?: 'small' | 'medium' | 'large'
+
+  /**
+   * 加载图标颜色
+   */
+  color?: string
+
+  /**
+   * 是否全屏加载
+   * @default false
+   */
+  fullscreen?: boolean
+
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  mask?: boolean
+
+  /**
+   * 遮罩层背景色
+   */
+  maskBgColor?: string
+}

package/components/TNavBar/index.uvue

@@ -0,0 +1,120 @@
+<script setup lang="uts">
+interface Props {
+  title?: string
+  leftText?: string
+  rightText?: string
+  leftIcon?: string
+  rightIcon?: string
+  fixed?: boolean
+  placeholder?: boolean
+  zIndex?: number
+  safeAreaInsetTop?: boolean
+  customClass?: string
+  customStyle?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  leftText: '',
+  rightText: '',
+  leftIcon: '',
+  rightIcon: '',
+  fixed: false,
+  placeholder: false,
+  zIndex: 1,
+  safeAreaInsetTop: false,
+  customClass: '',
+  customStyle: ''
+})
+
+const emit = defineEmits<{
+  'click-left': []
+  'click-right': []
+}>()
+</script>
+
+<template>
+  <view class="t-navbar-wrapper">
+    <view
+      class="t-navbar"
+      :class="[customClass, { 't-navbar--fixed': fixed }]"
+      :style="`z-index: ${zIndex}; ${customStyle}`"
+    >
+      <view class="t-navbar__left" @click="emit('click-left')">
+        <text v-if="leftIcon" class="t-navbar__icon">{{ leftIcon }}</text>
+        <text v-if="leftText" class="t-navbar__text">{{ leftText }}</text>
+        <slot name="left"></slot>
+      </view>
+      <view class="t-navbar__title">
+        <text class="t-navbar__title-text">{{ title }}</text>
+        <slot name="title"></slot>
+      </view>
+      <view class="t-navbar__right" @click="emit('click-right')">
+        <text v-if="rightText" class="t-navbar__text">{{ rightText }}</text>
+        <text v-if="rightIcon" class="t-navbar__icon">{{ rightIcon }}</text>
+        <slot name="right"></slot>
+      </view>
+    </view>
+    <view v-if="fixed && placeholder" class="t-navbar__placeholder"></view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.t-navbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  padding: 0 16px;
+  background-color: #fff;
+  border-bottom: 1px solid #ebedf0;
+
+  &--fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+.t-navbar__left,
+.t-navbar__right {
+  display: flex;
+  flex-direction: row;;
+  align-items: center;
+  min-width: 60px;
+  cursor: pointer;
+}
+
+.t-navbar__right {
+  justify-content: flex-end;
+}
+
+.t-navbar__title {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  text-align: center;
+}
+
+.t-navbar__title-text {
+  font-size: 16px;
+  font-weight: 500;
+  color: #323233;
+}
+
+.t-navbar__text {
+  font-size: 14px;
+  color: #1890ff;
+}
+
+.t-navbar__icon {
+  font-size: 18px;
+  color: #323233;
+}
+
+.t-navbar__placeholder {
+  height: 44px;
+}
+</style>

package/components/TNavBar/type.uts

@@ -0,0 +1,22 @@
+/**
+ * TNavBar 组件类型定义
+ */
+
+export interface TNavBarProps {
+  title?: string
+  leftText?: string
+  rightText?: string
+  leftIcon?: string
+  rightIcon?: string
+  fixed?: boolean
+  placeholder?: boolean
+  zIndex?: number
+  safeAreaInsetTop?: boolean
+  customClass?: string
+  customStyle?: string
+}
+
+export interface TNavBarEmits {
+  'click-left': () => void
+  'click-right': () => void
+}

package/components/TNoticeBar/index.uvue

@@ -0,0 +1,106 @@
+<script setup lang="uts">
+import { ref } from 'vue'
+import type { NoticeBarMode } from './type.uts'
+
+interface Props {
+  text?: string
+  mode?: NoticeBarMode
+  color?: string
+  background?: string
+  leftIcon?: string
+  scrollable?: boolean
+  customClass?: string
+  customStyle?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  text: '',
+  mode: undefined,
+  color: '#ed6a0c',
+  background: '#fffbe8',
+  leftIcon: '📢',
+  scrollable: false,
+  customClass: '',
+  customStyle: ''
+})
+
+const emit = defineEmits<{
+  click: []
+  close: []
+}>()
+
+const visible = ref<boolean>(true)
+
+const handleClick = (): void => {
+  emit('click')
+}
+
+const handleClose = (): void => {
+  visible.value = false
+  emit('close')
+}
+</script>
+
+<template>
+  <view
+    v-if="visible"
+    class="t-notice-bar"
+    :class="customClass"
+    :style="`background: ${background}; color: ${color}; ${customStyle}`"
+    @click="handleClick"
+  >
+    <text v-if="leftIcon" class="t-notice-bar__icon">{{ leftIcon }}</text>
+    <view class="t-notice-bar__content" :class="{ 't-notice-bar__content--scrollable': scrollable }">
+      <text class="t-notice-bar__text">{{ text }}</text>
+    </view>
+    <text v-if="mode === 'closeable'" class="t-notice-bar__close" @click.stop="handleClose">✕</text>
+    <text v-if="mode === 'link'" class="t-notice-bar__link">›</text>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.t-notice-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 10px 12px;
+  font-size: 14px;
+  overflow: hidden;;
+}
+
+.t-notice-bar__icon {
+  margin-right: 8px;
+}
+
+.t-notice-bar__content {
+  flex: 1;
+  overflow: hidden;
+
+  &--scrollable {
+    .t-notice-bar__text {
+      animation: t-notice-scroll 10s linear infinite;
+    }
+  }
+}
+
+.t-notice-bar__text {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.t-notice-bar__close,
+.t-notice-bar__link {
+  margin-left: 8px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+@keyframes t-notice-scroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+</style>

package/components/TNoticeBar/type.uts

@@ -0,0 +1,21 @@
+/**
+ * TNoticeBar 组件类型定义
+ */
+
+export type NoticeBarMode = 'closeable' | 'link'
+
+export interface TNoticeBarProps {
+  text?: string
+  mode?: NoticeBarMode
+  color?: string
+  background?: string
+  leftIcon?: string
+  scrollable?: boolean
+  customClass?: string
+  customStyle?: string
+}
+
+export interface TNoticeBarEmits {
+  click: () => void
+  close: () => void
+}