rrj-astra-ui 1.0.2

package/components/AuiTextarea.vue

@@ -0,0 +1,203 @@
+<template>
+    <view :class="['aui-textarea-item',`aui-theme-${theme}`]">
+        <view class="aui-textarea-befor">
+            <slot name="befor"></slot>
+        </view>
+        <view class="aui-textarea-content">
+            <textarea :placeholder="placeholder" v-model="textareaValue"
+                   :class="['aui-textarea', `aui-textarea-${size}`,`aui-textarea-align-${textAlign}`]" 
+                   :readonly="readonly" :disabled="disabled" @input="handleInput" 
+                   :style="`min-height:${minHeight} !important;max-height:${maxHeight};height:100px`"
+                   :auto-height="autoHeight" :show-confirm-bar="showConfirmBar"
+                   :confirm-type="confirmType" :cursor-spacing="cursorSpacing"
+                   :adjust-position="adjustPosition" :hold-keyboard="holdKeyboard"/>
+            <view v-if="showCount && textareaValue" class="aui-textarea-count">
+                {{textareaValue.length}}/{{maxlength}}
+            </view>
+        </view>
+        <view class="aui-textarea-after">
+            <slot name="after"></slot>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref, watch } from 'vue';
+const __name = 'AuiTextarea';
+defineOptions({ name: __name });
+
+const props = defineProps({
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    size: {
+        type: String,
+        default: 'normal',
+        validator: (value) => ['normal', 'small', 'large'].includes(value)
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    modelValue: {
+        type: [String, Number],
+        default: ''
+    },
+    theme: {
+        type: String,
+        default: 'normal',
+        validator: (value) => ['normal', 'flat', 'grey'].includes(value)
+    },
+    minHeight: {
+        type: String,
+        default: '50px',
+    },
+    maxHeight: {
+        type: String,
+        default: '200px',
+    },
+    textAlign: {
+        type: String,
+        default: 'left',
+        validator: (value) => ['left', 'center', 'right'].includes(value)
+    },
+    readonly: {
+        type: Boolean,
+        default: false, 
+    },
+    maxlength: {
+        type: Number,
+        default: 200,
+    },
+    showCount: {
+        type: Boolean,
+        default: true,
+    },
+    autoHeight: {
+        type: Boolean,
+        default: false,
+    },
+    showConfirmBar: {
+        type: Boolean,
+        default: true,
+    },
+    confirmType: {
+        type: String,
+        default: 'done',
+        validator: (value) => ['send', 'search', 'next', 'go', 'done'].includes(value)
+    },
+    cursorSpacing: {
+        type: Number,
+        default: 50,
+    },
+    adjustPosition: {
+        type: Boolean,
+        default: true,
+    },
+    holdKeyboard: {
+        type: Boolean,
+        default: false,
+    }
+});
+
+const emits = defineEmits(['input', 'update:modelValue']);
+
+const textareaValue = ref(props.modelValue);
+
+// 监听 props.modelValue 的变化
+watch(() => props.modelValue, (newValue) => {
+    console.log('props.modelValue 变化，新值:', newValue);
+    textareaValue.value = newValue;
+});
+
+const handleInput = (e) => {
+    let newValue;
+    if (e.detail && typeof e.detail.value !== 'undefined') {
+        newValue = e.detail.value;
+    } else {
+        newValue = e.target ? e.target.value : undefined;
+    }
+    if (newValue !== undefined) {
+        // 限制最大长度
+        if (newValue.length > props.maxlength) {
+            newValue = newValue.substring(0, props.maxlength);
+        }
+        textareaValue.value = newValue;
+        console.log('输入事件触发，新值:', newValue);
+        emits('input', newValue);
+        emits('update:modelValue', newValue);
+    }
+};
+</script>
+
+<style scoped lang="scss">
+@import '../style.scss';
+
+.aui-textarea-item {
+    display: flex;
+    align-items: flex-start;
+    border: 1px solid $aui-border-color;
+    border-radius: 8px;
+    padding: 0 10px;
+    position: relative;
+    flex: 1;
+}
+.aui-textarea-befor {
+    margin-right: 10px;
+    margin-top: 10px; 
+}
+.aui-textarea-after {
+    margin-left: 10px;
+    margin-top: 10px; 
+}
+.aui-textarea-content {
+    flex: 1;
+    position: relative;
+}
+.aui-textarea {
+    font-size: $aui-font-size;
+    outline: none;
+    transition: border-color 0.3s;
+    width: 100%;
+    padding: 10px 0;
+    &:focus {
+        border-color: $aui-primary-color;
+    }
+}
+.aui-theme-flat{
+    background-color: #F5F5F5;
+    border: none;
+    border-radius: 10px; 
+}
+.aui-theme-flat textarea{border:none;}
+.aui-theme-grey{
+    background-color: #F5F5F5;
+    border: none;
+    border-radius: 10px; 
+}
+.aui-theme-grey textarea{border:none;}
+.aui-textarea-small {
+    font-size: 12px;
+}
+
+.aui-textarea-large {
+    font-size: 18px;
+}
+.aui-textarea-align-left {
+    text-align: left; 
+}
+.aui-textarea-align-center {
+    text-align: center; 
+}
+.aui-textarea-align-right {
+    text-align: right; 
+}
+.aui-textarea-count {
+    position: absolute;
+    right: 0;
+    bottom: 5px;
+    font-size: 12px;
+    color: #999;
+}
+</style>

package/components/AuiToast.vue

@@ -0,0 +1,96 @@
+<template>
+    <view v-if="visible" class="toast" :class="typeClass" :style="{ bottom: position + 'px' }">
+      <i v-if="showIcon" :class="iconClass"></i>
+      <span>{{ message }}</span>
+    </view>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted, onUnmounted, computed } from 'vue';
+  const __name = 'AuiToast';
+  
+defineOptions({
+    name: __name
+})
+  
+  const props = defineProps({
+    message: {
+      type: String,
+      default: ''
+    },
+    duration: {
+      type: Number,
+      default: 2000
+    },
+    position: {
+      type: Number,
+      default: 50
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator: (value) => ['default', 'success', 'error', 'warning'].includes(value)
+    },
+    showIcon: {
+      type: Boolean,
+      default: true
+    }
+  });
+  
+  const visible = ref(false);
+  
+  const typeClass = computed(() => `toast-${props.type}`);
+  const iconClass = computed(() => {
+    switch (props.type) {
+      case 'success':
+        return 'fa fa-check-circle';
+      case 'error':
+        return 'fa fa-times-circle';
+      case 'warning':
+        return 'fa fa-exclamation-circle';
+      default:
+        return '';
+    }
+  });
+  
+  const showToast = () => {
+    visible.value = true;
+    const timer = setTimeout(() => {
+      visible.value = false;
+      clearTimeout(timer);
+    }, props.duration);
+  };
+  
+  onMounted(() => {
+    showToast();
+  });
+  </script>
+  
+  <style scoped>
+  .toast {
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    transition: opacity 0.3s ease;
+  }
+  
+  .toast-success {
+    background-color: #5cb85c;
+  }
+  
+  .toast-error {
+    background-color: #d9534f;
+  }
+  
+  .toast-warning {
+    background-color: #f0ad4e;
+  }
+  </style>    

package/components/AuiUpdate.vue

@@ -0,0 +1,271 @@
+<template>
+    <view :class="[`aui-update`, `aui-update-theme-${theme}`]">
+        <!-- 使用时间戳确保唯一性 -->
+        <input 
+            :id="`aui-file-input-${timestamp}`" 
+            type="file" 
+            @change="handleFileChange" 
+            :accept="accept" 
+            :multiple="multiple"
+            ref="fileInput"
+            class="aui-update-input"
+        />
+        <view class="aui-update-data">
+            <view v-if="previewUrl" class="preview-container">
+                <template v-if="isImage">
+                    <img :src="previewUrl" class="preview-media" alt="文件预览" />
+                </template>
+                <template v-else-if="isVideo">
+                    <video :src="previewUrl" class="preview-media" controls />
+                </template>
+                <view class="preview-overlay">
+                    <button @click="removeMedia" class="remove-button">
+                        <AuiIcon name="close" size="16px" />
+                    </button>
+                </view>
+            </view>
+        </view>
+        <label 
+            class="aui-update-button" 
+            :for="`aui-file-input-${timestamp}`"
+            @click="debugClick"
+        >
+            <view :class="[`aui-update-button-theme-${theme}`, { 'has-preview': previewUrl }]">
+                <slot name="button">
+                    <div class="button-content">
+                        <AuiIcon :name="uploadIcon" size="30px" />
+                        <AuiText class="button-text">{{ buttonText }}</AuiText>
+                        <AuiText v-if="fileLimit" class="file-limit">最大 {{ fileLimit }}MB</AuiText>
+                    </div>
+                </slot>
+            </view>
+        </label>
+    </view>
+</template>
+
+<script setup>
+import { ref, computed, defineProps, defineEmits, onMounted } from 'vue';
+import AuiIcon from './AuiIcon.vue';
+import AuiText from './AuiText.vue';
+
+const fileInput=ref(null)
+
+const _name='AuiUpdate';
+defineOptions({
+    name: _name,
+    components: { AuiIcon, AuiText } 
+})
+
+const props = defineProps({
+    theme: {
+        type: String,
+        default: 'default',
+        validator: v => ['default', 'primary', 'dashed'].includes(v)
+    },
+    accept: {
+        type: String,
+        default: 'image/*',
+        validator: v => ['image/*', 'video/*', 'image/*,video/*'].includes(v)
+    },
+    multiple: Boolean,
+    fileLimit: {
+        type: Number,
+        default: 5
+    },
+    buttonText: {
+        type: String,
+        default: '点击上传'
+    }
+});
+
+const emit = defineEmits(['update:modelValue', 'file-change', 'error']);
+
+// 使用时间戳生成唯一id
+const timestamp = ref(Date.now());
+
+const previewUrl = ref('');
+const selectedFile = ref(null);
+
+const isImage = computed(() => selectedFile.value?.type.startsWith('image/'));
+const isVideo = computed(() => selectedFile.value?.type.startsWith('video/'));
+const uploadIcon = computed(() => isVideo.value? 'video' : 'camera');
+
+// 调试点击事件
+const debugClick = () => {
+    console.log('Label 被点击，ID:', `aui-file-input-${timestamp.value}`);
+    if (fileInput.value) {
+    fileInput.value.click();
+  }
+};
+
+const handleFileChange = (event) => {
+    console.log('文件选择事件触发');
+    const files = event.target.files;
+    console.log('选中的文件:', files);
+    if (!files.length) return;
+
+    const file = files[0];
+    if (!validateFile(file)) return;
+
+    selectedFile.value = file;
+    previewUrl.value = URL.createObjectURL(file);
+    console.log('预览URL:', previewUrl.value);
+    
+    emit('update:modelValue', file);
+    emit('file-change', file);
+};
+
+const validateFile = (file) => {
+    const validTypes = props.accept.split(',').map(t => t.trim());
+    const isTypeValid = validTypes.some(type => {
+        if (type === '*/*') return true;
+        const [main, sub] = type.split('/');
+        return file.type.startsWith(`${main}/`) && (sub === '*' || file.type.endsWith(sub));
+    });
+
+    if (!isTypeValid) {
+        console.log('文件类型无效:', file.type);
+        emit('error', 'invalidType');
+        return false;
+    }
+
+    if (file.size > props.fileLimit * 1024 * 1024) {
+        console.log('文件大小超过限制:', file.size);
+        emit('error','sizeExceeded');
+        return false;
+    }
+
+    return true;
+};
+
+const removeMedia = () => {
+    console.log('移除媒体');
+    URL.revokeObjectURL(previewUrl.value);
+    previewUrl.value = '';
+    selectedFile.value = null;
+    const input = document.getElementById(`aui-file-input-${timestamp.value}`);
+    if (input) {
+        input.value = '';
+    }
+    emit('update:modelValue', null);
+};
+
+onMounted(() => {
+    // 在这里可以进行一些初始化操作
+});
+</script>
+
+<style scoped lang="scss">
+.aui-update {
+    position: relative;
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.aui-update-input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    z-index: 11;
+}
+
+.preview-container {
+    position: relative;
+    width: 100%;
+    max-width: 400px;
+    margin: 16px 0;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    
+    .preview-media {
+        display: block;
+        width: 100%;
+        height: auto;
+        aspect-ratio: 16/9;
+        object-fit: cover;
+    }
+}
+
+.preview-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 8px;
+}
+
+.remove-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background: rgba(0,0,0,0.6);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+        background: rgba(255,0,0,0.8);
+        transform: scale(1.1);
+    }
+}
+
+.aui-update-button {
+    display: block;
+    width: 100%;
+    cursor: pointer;
+    outline: none; /* 移除聚焦时的轮廓 */
+
+    &-theme-default {
+        border: 2px dashed #ddd;
+        border-radius: 8px;
+        padding: 24px;
+        background: #f8f9fa;
+        transition: all 0.3s ease;
+
+        &:hover {
+            border-color: #409eff;
+            background: rgba(64,158,255,0.05);
+        }
+
+        &.has-preview {
+            margin-top: 16px;
+        }
+    }
+
+    .button-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .button-text {
+        color: #666;
+        font-weight: 500;
+    }
+
+    .file-limit {
+        color: #999;
+        font-size: 12px;
+    }
+}
+
+// 主题扩展样式
+.aui-update-button-theme-primary {
+    border: 2px solid #409eff;
+    background: rgba(64,158,255,0.1);
+    
+    &:hover {
+        background: rgba(64,158,255,0.2);
+    }
+}
+
+.aui-update-button-theme-dashed {
+    border-style: dashed;
+}
+</style>