rrj-astra-ui 1.0.2

package/components/AuiLamp.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="aui-lamp-container">
+    <!-- 左侧呼吸灯 -->
+    <div 
+      ref="leftLamp" 
+      class="aui-lamp-left" 
+      :style="{ backgroundColor: lampColor, opacity: leftLampOpacity }"
+    ></div>
+    
+    <!-- 右侧呼吸灯 -->
+    <div 
+      ref="rightLamp" 
+      class="aui-lamp-right" 
+      :style="{ backgroundColor: lampColor, opacity: rightLampOpacity }"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue';
+
+const __name = 'AuiLamp';
+defineOptions({ name: __name });
+
+// 定义组件属性
+const props = defineProps({
+  // 呼吸灯颜色
+  color: {
+    type: String,
+    default: '#EF4444' // 错误红色作为默认值
+  },
+  // 自动关闭时间(毫秒)，0表示不自动关闭
+  autoCloseTime: {
+    type: Number,
+    default: 3000 // 默认3秒后关闭
+  },
+  // 是否显示呼吸灯
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  // 主题
+  theme: {
+    type: String,
+    default: 'normal',
+    validator: (value) => ['normal', 'flat', 'grey', 'white', 'none'].includes(value)
+  }
+});
+
+// 定义组件事件
+const emits = defineEmits(['update:visible', 'closed', 'update:color', 'update:autoCloseTime']);
+
+// 左侧灯透明度
+const leftLampOpacity = ref(0);
+// 右侧灯透明度
+const rightLampOpacity = ref(0);
+// 动画定时器
+let animationTimer = null;
+// 关闭定时器
+let closeTimer = null;
+// 呼吸灯元素引用
+const leftLamp = ref(null);
+const rightLamp = ref(null);
+// 动画状态
+const isAnimating = ref(false);
+
+// 计算属性：灯的颜色
+const lampColor = computed(() => {
+  // 根据主题调整颜色（保持与AUI主题一致）
+  if (props.theme === 'flat' || props.theme === 'grey') {
+    return props.color;
+  } else if (props.theme === 'white') {
+    return props.color;
+  } else {
+    return props.color;
+  }
+});
+
+// 启动呼吸动画
+const startAnimation = () => {
+  if (isAnimating.value) return;
+  
+  isAnimating.value = true;
+  let opacity = 0.3;
+  let direction = 1; // 1表示增加，-1表示减少
+  
+  animationTimer = setInterval(() => {
+    if (!props.visible) {
+      stopAnimation();
+      return;
+    }
+    
+    opacity += 0.05 * direction;
+    
+    if (opacity >= 1) {
+      opacity = 1;
+      direction = -1;
+    } else if (opacity <= 0.3) {
+      opacity = 0.3;
+      direction = 1;
+    }
+    
+    leftLampOpacity.value = opacity;
+    rightLampOpacity.value = opacity;
+    
+  }, 100);
+};
+
+// 停止呼吸动画
+const stopAnimation = () => {
+  if (animationTimer) {
+    clearInterval(animationTimer);
+    animationTimer = null;
+    isAnimating.value = false;
+  }
+};
+
+// 启动自动关闭
+const startAutoClose = () => {
+  stopAutoClose(); // 先清除已有的定时器
+  
+  if (props.autoCloseTime > 0) {
+    closeTimer = setTimeout(() => {
+      hideLamp();
+    }, props.autoCloseTime);
+  }
+};
+
+// 停止自动关闭
+const stopAutoClose = () => {
+  if (closeTimer) {
+    clearTimeout(closeTimer);
+    closeTimer = null;
+  }
+};
+
+// 显示呼吸灯
+const showLamp = () => {
+  if (!props.visible) {
+    emits('update:visible', true);
+    
+    nextTick(() => {
+      leftLampOpacity.value = 0.3;
+      rightLampOpacity.value = 0.3;
+      startAnimation();
+      startAutoClose();
+    });
+  }
+};
+
+// 隐藏呼吸灯
+const hideLamp = () => {
+  if (props.visible) {
+    emits('update:visible', false);
+    stopAnimation();
+    stopAutoClose();
+    leftLampOpacity.value = 0;
+    rightLampOpacity.value = 0;
+    emits('closed');
+  }
+};
+
+// 监听visible属性变化
+watch(() => props.visible, (newValue, oldValue) => {
+  // 防止初始渲染时触发
+  if (oldValue !== undefined) {
+    if (newValue) {
+      showLamp();
+    } else {
+      hideLamp();
+    }
+  }
+});
+
+// 监听颜色变化
+watch(() => props.color, (newColor) => {
+  // 如果灯正在显示，更新颜色
+  if (props.visible && leftLamp.value && rightLamp.value) {
+    leftLamp.value.style.backgroundColor = newColor;
+    rightLamp.value.style.backgroundColor = newColor;
+  }
+});
+
+// 组件挂载时初始化
+onMounted(() => {
+  // 设置灯带样式
+  if (leftLamp.value && rightLamp.value) {
+    leftLamp.value.style.cssText = `
+      position: fixed;
+      left: 0;
+      top: 0;
+      height: 100vh;
+      width: 10px;
+      z-index: 9999;
+      pointer-events: none;
+      transition: opacity 0.3s ease;
+    `;
+    
+    rightLamp.value.style.cssText = `
+      position: fixed;
+      right: 0;
+      top: 0;
+      height: 100vh;
+      width: 10px;
+      z-index: 9999;
+      pointer-events: none;
+      transition: opacity 0.3s ease;
+    `;
+    
+    // 如果初始visible为true，则启动动画
+    if (props.visible) {
+      nextTick(() => {
+        startAnimation();
+        startAutoClose();
+      });
+    }
+  }
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  stopAnimation();
+  stopAutoClose();
+});
+
+// 暴露公共方法
+const api = {
+  show: showLamp,
+  hide: hideLamp,
+  setColor: (color) => {
+    emits('update:color', color);
+  },
+  setAutoCloseTime: (time) => {
+    emits('update:autoCloseTime', time);
+  }
+};
+
+// 导出组件方法
+defineExpose(api);
+</script>
+
+<style scoped lang="scss">
+@import '../style.scss';
+
+.aui-lamp-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.aui-lamp-left, .aui-lamp-right {
+  will-change: opacity;
+}
+</style>    

package/components/AuiLineProgress.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="aui-line-progress" :class="classes">
+    <div class="progress-bar" :style="barStyle">
+      <div class="progress-text" v-if="showText">
+        {{ formatText }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps, ref, watch } from 'vue'
+
+const _name="AuiLineProgress";
+defineOptions({
+  name:_name 
+})
+const props = defineProps({
+  // 进度百分比
+  percentage: {
+    type: Number,
+    default: 0,
+    validator: (val) => val >= 0 && val <= 100
+  },
+  // 进度条高度(px)
+  height: {
+    type: Number,
+    default: 8
+  },
+  // 是否显示进度文字
+  showText: {
+    type: Boolean,
+    default: true
+  },
+  // 进度条颜色
+  color: {
+    type: String,
+    default: '#165DFF'
+  },
+  // 进度条背景色
+  backgroundColor: {
+    type: String,
+    default: '#E5E6EB'
+  },
+  // 文字显示类型
+  textType: {
+    type: String,
+    default: 'percentage',
+    validator: (val) => ['percentage', 'number', 'none'].includes(val)
+  },
+  // 是否为条纹进度条
+  striped: {
+    type: Boolean,
+    default: false
+  },
+  // 是否为动画条纹
+  stripedAnimation: {
+    type: Boolean,
+    default: false
+  },
+  // 进度条状态
+  status: {
+    type: String,
+    default: '',
+    validator: (val) => ['success', 'warning', 'error', ''].includes(val)
+  },
+  // 自定义文字内容
+  customText: {
+    type: String,
+    default: ''
+  }
+})
+
+// 计算进度条样式
+const barStyle = computed(() => {
+  const style = {
+    width: `${props.percentage}%`,
+    height: `${props.height}px`,
+    backgroundColor: getStatusColor()
+  }
+  
+  if (props.striped || props.stripedAnimation) {
+    style.backgroundImage = 'linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)'
+    style.backgroundSize = '40px 40px'
+  }
+  
+  if (props.stripedAnimation) {
+    style.animation = 'aui-progress-bar-stripes 1s linear infinite'
+  }
+  
+  return style
+})
+
+// 获取状态颜色
+const getStatusColor = () => {
+  if (props.status === 'success') return '#00B42A'
+  if (props.status === 'warning') return '#FF7D00'
+  if (props.status === 'error') return '#F53F3F'
+  return props.color
+}
+
+// 计算组件类
+const classes = computed(() => {
+  const cls = ['aui-line-progress']
+  if (props.status) cls.push(`status-${props.status}`)
+  return cls
+})
+
+// 格式化显示文本
+const formatText = computed(() => {
+  if (props.textType === 'none') return ''
+  if (props.customText) return props.customText
+  
+  if (props.textType === 'percentage') {
+    return `${props.percentage}%`
+  }
+  
+  return props.percentage
+})
+</script>
+
+<style scoped>
+.aui-line-progress {
+  width: 100%;
+  background-color: var(--background-color, #E5E6EB);
+  border-radius: 100px;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-bar {
+  transition: width 0.6s ease;
+  border-radius: 100px;
+  position: relative;
+  height: 100%;
+}
+
+.progress-text {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 8px;
+  color: #FFFFFF;
+  padding: 0 5px;
+  white-space: nowrap;
+}
+
+.status-success .progress-bar {
+  background-color: #00B42A;
+}
+
+.status-warning .progress-bar {
+  background-color: #FF7D00;
+}
+
+.status-error .progress-bar {
+  background-color: #F53F3F;
+}
+
+@keyframes aui-progress-bar-stripes {
+  from {
+    background-position: 40px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+</style>    

package/components/AuiList.vue

@@ -0,0 +1,18 @@
+<template>
+    <view class="aui-list">
+        <slot></slot>
+    </view>
+</template>
+<script setup>
+
+    import { defineProps } from 'vue';
+    const __name = 'AuiList';
+
+    defineOptions({
+        name: __name
+    })
+
+    const props = defineProps({
+        
+    });
+</script>

package/components/AuiListItem.vue

@@ -0,0 +1,142 @@
+<template>
+    <view class="aui-list-item">
+        <view class="aui-list-item-content-wrapper" :style="{ transform: `translateX(${offsetX}px)` }"  @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
+            <view class="aui-list-item_befor">
+                <slot name="befor"></slot>
+            </view>
+            <view class="aui-list-item_content">
+                <view class="aui-list-item_content_text">
+                    <view class="titleBefor">
+                        <slot name="titleBefor"></slot>
+                    </view>
+                    {{ text }}
+                    <view class="aui-list-item_content_tip" v-if="tip">{{ tip }}</view>
+                </view>
+                <view class="aui-list-item_content_desc">{{ desc }}</view>
+                <slot></slot>
+            </view>
+            <view class="aui-list-item_after">
+                <slot name="after"></slot>
+            </view>
+        </view>
+        <view class="aui-list-item-slide-content" v-if="isSliding">
+            <slot name="slide"></slot>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { defineProps, ref } from 'vue';
+const __name = 'AuiListItem';
+
+// defineOptions 可能不是 Vue 内置方法，这里注释掉
+defineOptions({
+    name: __name
+})
+
+const props = defineProps({
+    text: {
+        type: String,
+        default: ''
+    },
+    tip:{
+        type: String,
+        default: ''
+    },
+    desc: {
+        type: String,
+        default: ''
+    },
+    allowSlide: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const startX = ref(0);
+const offsetX = ref(0);
+const isSliding = ref(false);
+const SLIDE_THRESHOLD = -50; // 滑动阈值
+
+const onTouchStart = (e) => {
+    if (!props.allowSlide) return;
+    startX.value = e.touches[0].clientX;
+    offsetX.value = 0;
+    isSliding.value = false;
+};
+
+const onTouchMove = (e) => {
+    if (!props.allowSlide) return;
+    const currentX = e.touches[0].clientX;
+    const diffX = currentX - startX.value;
+    if (diffX < 0) {
+        offsetX.value = diffX;
+        if (diffX < SLIDE_THRESHOLD) {
+            isSliding.value = true;
+        }
+    }
+};
+
+const onTouchEnd = () => {
+    if (!props.allowSlide) return;
+    if (offsetX.value < SLIDE_THRESHOLD) {
+        offsetX.value = -150; // 自定义内容宽度
+    } else {
+        offsetX.value = 0;
+        isSliding.value = false;
+    }
+};
+</script>
+
+<style scoped lang="scss">
+@import '../style.scss';
+.aui-list-item {
+    display: flex;
+    align-items: center;
+    padding: 10px 0; 
+    border-bottom: 1px solid #F3F4F6;
+    position: relative;
+    overflow: hidden;
+}
+.aui-list-item-content-wrapper {
+    display: flex;
+//    align-items: center;
+    width: 100%;
+    transition: transform 0.3s;
+}
+.aui-list-item_befor {
+    margin:0 10px; 
+}
+.aui-list-item_content {
+    flex: 1; 
+}
+.aui-list-item_content_text {
+    font-size: 16px;
+    color: $aui-default-color;
+}
+.aui-list-item_content_tip {
+    float: right;
+    font-size: 12px;
+    color: $aui-text-color; 
+}
+.aui-list-item_content_desc {
+    margin-top: 5px; 
+    font-size: $aui-font-min-size;
+    color: $aui-text-color; 
+}
+.aui-list-item_after {
+    margin-left: 10px; 
+}
+.aui-list-item-slide-content {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 150px; /* 自定义内容宽度 */
+    background-color: #f0f0f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 999;
+}
+</style>