rrj-astra-ui 1.0.2

package/components/AuiUpload.vue

@@ -0,0 +1,524 @@
+<template>
+    <view :class="['aui-upload', `aui-theme-${theme}`, {'aui-disabled': disabled}]">
+        <!-- 上传按钮区域 -->
+        <view v-if="(previewImages.length < props.maxCount || props.maxCount === 0) && !isLoading" 
+              class="aui-upload-btn" @click="handleClick">
+            <slot name="button">
+                <view class="aui-upload-icon">
+                    <i class="fa fa-camera"></i>
+                </view>
+                <view class="aui-upload-text">{{ uploadText }}</view>
+            </slot>
+        </view>
+        
+        <!-- 加载中状态 -->
+        <view v-else-if="isLoading" class="aui-upload-loading">
+            <view class="aui-loading-spinner">
+                <i class="fa fa-circle-o-notch fa-spin"></i>
+            </view>
+        </view>
+        
+        <!-- 预览区域 -->
+        <view v-if="previewImages.length > 0" class="aui-upload-preview-container">
+            <view v-for="(image, index) in previewImages" :key="index" class="aui-upload-image-wrapper">
+                <!-- 点击图片调用放大查看方法 -->
+                <img :src="image" class="aui-upload-image" :style="{ maxHeight: previewMaxHeight }" alt="预览图片" @click="previewImage(index)" @error="handleImageError(index)">
+                
+                <!-- 操作按钮 -->
+                <view class="aui-upload-actions">
+                    <view class="aui-upload-action-btn" @click="handleRemove(index)">
+                        <aui-icon name="close" size="15px" color="#FFFFFF" />
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref, watch } from 'vue';
+import AuiIcon from './AuiIcon.vue';
+
+// 定义组件名称
+const __name = 'AuiUpload';
+defineOptions({ name: __name });
+
+const props = defineProps({
+    modelValue: {
+        type: [String, Array],
+        default: () => []
+    },
+    multiple: {
+        type: Boolean,
+        default: false
+    },
+    maxSize: {
+        type: Number,
+        default: 10 // MB
+    },
+    maxCount: {
+        type: Number,
+        default: 1
+    },
+    theme: {
+        type: String,
+        default: 'normal',
+        validator: (value) => ['normal', 'flat', 'card'].includes(value)
+    },
+    size: {
+        type: String,
+        default: 'normal',
+        validator: (value) => ['small', 'normal', 'large'].includes(value)
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    uploadText: {
+        type: String,
+        default: '点击上传图片'
+    },
+    previewMaxHeight: {
+        type: String,
+        default: '200px'
+    },
+    accept: {
+        type: String,
+        default: 'image/*'
+    }
+});
+
+const emits = defineEmits(['update:modelValue', 'change', 'success', 'error', 'before-upload']);
+
+// 状态
+const previewImages = ref(Array.isArray(props.modelValue) ? [...props.modelValue] : props.modelValue ? [props.modelValue] : []);
+const isLoading = ref(false);
+
+// 处理图片加载失败
+const handleImageError = (index) => {
+    console.error(`图片加载失败，索引: ${index}，路径: ${previewImages.value[index]}`);
+    emits('error', {
+        type: 'image-load-failed',
+        message: `图片加载失败，索引: ${index}`
+    });
+};
+
+// 初始化
+watch(() => props.modelValue, (newValue) => {
+    updatePreviewImages();
+});
+
+// 更新预览图片
+const updatePreviewImages = () => {
+    previewImages.value = Array.isArray(props.modelValue) ? [...props.modelValue] : props.modelValue ? [props.modelValue] : [];
+};
+
+// 处理点击上传按钮
+const handleClick = () => {
+    if (props.disabled) return;
+
+    // 检查是否已达到最大上传数量
+    if (props.maxCount > 0 && previewImages.value.length >= props.maxCount) {
+        emits('error', {
+            type: 'max-count-exceed',
+            message: `最多只能上传 ${props.maxCount} 张图片`
+        });
+        return;
+    }
+
+    // 判断是否支持 uni.chooseMedia
+ var platform=uni.getSystemInfoSync().platform;
+    if (platform==='harmonyos') {
+        uni.chooseMedia({
+            count: props.multiple ? props.maxCount - previewImages.value.length : 1,
+            mediaType: ['image'],
+            sourceType: ['album', 'camera'],
+            success: (res) => {
+                console.log('选择的图片原始路径', res.tempFiles);
+                // 处理选择的图片
+                res.tempFiles.forEach(async (subItem) => {
+                    try {
+                        // 保存到沙盒
+                        const { savedFilePath } = await uni.saveFile({
+                            tempFilePath: subItem.tempFilePath
+                        });
+                        console.log('本地路径：'+savedFilePath);
+                        const { size } = await getFileMetadata(savedFilePath);
+                        console.log('文件元数据', { size });
+                        // 检查文件大小
+                        const fileSizeInMB = size / (1024 * 1024);
+                        if (fileSizeInMB > props.maxSize) {
+                            emits('error', {
+                                type: 'size-exceed',
+                                message: `文件大小超过 ${props.maxSize}MB`
+                            });
+                            return;
+                        }
+
+                        // 触发上传前钩子
+                        const file = {
+                            savedFilePath,
+                            size,
+                            name: savedFilePath.split('/').pop()
+                        };
+
+                        const beforeResult = emits('before-upload', file);
+                        if (beforeResult === false) {
+                            console.log('上传前钩子返回 false，取消上传');
+                            return;
+                        }
+
+                        // 处理图片
+                        handleProcessedImage(savedFilePath, file);
+                    } catch (err) {
+                        console.error('获取文件信息失败:', err);
+                        emits('error', {
+                            type: 'file-info-failed',
+                            message: '获取文件信息失败，请重试'
+                        });
+                    }
+                });
+            },
+            fail: (err) => {
+                console.error('选择图片失败:', err);
+                emits('error', {
+                    type: 'select-failed',
+                    message: '选择图片失败，请重试'
+                });
+            }
+        });
+    } else {
+        // 不支持 uni.chooseMedia 时使用 uni.chooseImage
+        uni.chooseImage({
+            count: props.multiple ? props.maxCount - previewImages.value.length : 1,
+            sizeType: ['original'],
+            sourceType: ['album', 'camera'],
+            success: (res) => {
+                console.log('选择的图片原始路径', res.tempFilePaths);
+                // 处理选择的图片
+                res.tempFilePaths.forEach(async (tempFilePath) => {
+                    try {
+                        var savedFilePath=tempFilePath;
+                        console.log('本地路径：'+savedFilePath);
+                        uni.getFileInfo({
+                            filePath: savedFilePath,
+                            success: function (res) {
+                                console.log('文件大小：', res.size);
+                                var size=res.size;
+                        // 检查文件大小
+                        const fileSizeInMB = size / (1024 * 1024);
+                        if (fileSizeInMB > props.maxSize) {
+                            emits('error', {
+                                type: 'size-exceed',
+                                message: `文件大小超过 ${props.maxSize}MB`
+                            });
+                            return;
+                        }
+
+                        // 触发上传前钩子
+                        const file = {
+                            savedFilePath,
+                            size,
+                            name: savedFilePath.split('/').pop()
+                        };
+
+                        const beforeResult = emits('before-upload', file);
+                        if (beforeResult === false) {
+                            console.log('上传前钩子返回 false，取消上传');
+                            return;
+                        }
+
+                        // 处理图片
+                        handleProcessedImage(savedFilePath, file);
+                            }
+                        })
+                    } catch (err) {
+                        console.error('获取文件信息失败:', err);
+                        emits('error', {
+                            type: 'file-info-failed',
+                            message: '获取文件信息失败，请重试'
+                        });
+                    }
+                });
+            },
+            fail: (err) => {
+                console.error('选择图片失败:', err);
+                emits('error', {
+                    type: 'select-failed',
+                    message: '选择图片失败，请重试'
+                });
+            }
+        });
+    }
+};
+
+// 获取文件元数据
+const getFileMetadata = (filePath) => {
+    const fs = uni.getFileSystemManager();
+
+    return new Promise((resolve, reject) => {
+        fs.getFileInfo({
+            filePath: filePath,
+            success: (res) => {
+                resolve(res);
+            },
+            fail: (err) => {
+                reject(err);
+            }
+        });
+    });
+};
+
+// 处理替换图片
+const handleReplace = (index) => {
+    handleClick();
+};
+
+// 处理移除图片
+const handleRemove = (index) => {
+    previewImages.value.splice(index, 1);
+    emitChanges();
+};
+
+// 自定义唯一 ID 生成函数
+const generateUniqueId = () => {
+  const timestamp = Date.now().toString(36); // 时间戳转 base36
+  const randomNum = Math.random().toString(36).substr(2, 5); // 随机数
+  return `${timestamp}_${randomNum}`;
+};
+
+// 处理已处理的图像
+const handleProcessedImage = (imageUrl, originalFile) => {
+    isLoading.value = false;
+    
+    // 创建一个唯一的文件名
+    const fileName = originalFile 
+    ? `${generateUniqueId()}_${originalFile.name}` 
+    : `uploaded_image_${generateUniqueId()}.jpg`;
+    
+    // 构建上传结果
+    const uploadResult = {
+        url: imageUrl,
+        name: fileName,
+        size: getFileSize(imageUrl),
+        type: 'image/jpeg'
+    };
+    
+    // 更新预览图片
+    previewImages.value.push(imageUrl);
+    
+    // 触发事件
+    emitChanges();
+    emits('success', uploadResult);
+};
+
+// 触发变更事件
+const emitChanges = () => {
+    const newValue = props.multiple ? [...previewImages.value] : previewImages.value[0] || '';
+    emits('update:modelValue', newValue);
+    emits('change', newValue);
+};
+
+// 获取文件大小
+const getFileSize = (filePath) => {
+    return new Promise((resolve) => {
+        uni.getFileInfo({
+            filePath,
+            success: (res) => {
+                resolve(Math.round(res.size / 1024)); // 返回 KB
+            },
+            fail: () => {
+                resolve(0);
+            }
+        });
+    });
+};
+
+// 图片放大查看方法
+const previewImage = (index) => {
+    uni.previewImage({
+        current: previewImages.value[index],
+        urls: previewImages.value
+    });
+};
+</script>
+
+<style scoped lang="scss">
+@import '../style.scss';
+
+.aui-upload {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 120px;
+    border-radius: 8px;
+    transition: all 0.3s;
+    cursor: pointer;
+    
+    &:hover:not(.aui-disabled) {
+        border-color: $aui-primary-color;
+    }
+    
+    &.aui-disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+    
+    &-btn {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100px;
+        height: 100px;
+        margin: 5px;
+        border: 1px dashed $aui-border-color;
+        border-radius: 8px;
+    }
+    
+    &-icon {
+        font-size: 36px;
+        color: $aui-gray-color;
+        margin-bottom: 10px;
+    }
+    
+    &-text {
+        color: $aui-text-color-secondary;
+        font-size: 12px;
+    }
+    
+    &-loading {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100px;
+        height: 100px;
+        margin: 5px;
+        border: 1px dashed $aui-border-color;
+        border-radius: 8px;
+    }
+    
+    &-spinner {
+        font-size: 24px;
+        color: $aui-primary-color;
+    }
+    
+    &-preview-container {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    
+    &-image-wrapper {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        margin: 5px;
+        border-radius: 8px;
+        overflow: hidden;
+    }
+    
+    &-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    
+    &-actions {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        justify-content: center;
+        background-color: rgba(0, 0, 0, 0.5);
+        padding: 5px 0;
+        opacity: 0;
+        transition: opacity 0.3s;
+    }
+    
+    &-image-wrapper:hover &-actions {
+        opacity: 1;
+    }
+    
+    &-action-btn {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: white;
+        cursor: pointer;
+        margin: 0 5px;
+        border-radius: 50%;
+        background-color: rgba(255, 255, 255, 0.2);
+        
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.4);
+        }
+    }
+}
+
+/* 主题样式 */
+.aui-upload.aui-theme-normal {
+    border: 1px dashed $aui-border-color;
+    
+    &:hover:not(.aui-disabled) {
+        border-style: solid;
+    }
+}
+
+.aui-upload.aui-theme-flat {
+    background-color: #f5f5f5;
+    border: none;
+}
+
+.aui-upload.aui-theme-card {
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    border: none;
+    
+    &:hover:not(.aui-disabled) {
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+    }
+}
+
+/* 尺寸样式 */
+.aui-upload.aui-size-small {
+    .aui-upload-btn,
+    .aui-upload-loading,
+    .aui-upload-image-wrapper {
+        width: 60px;
+        height: 60px;
+    }
+    
+    .aui-upload-icon {
+        font-size: 24px;
+    }
+    
+    .aui-upload-text {
+        display: none;
+    }
+}
+
+.aui-upload.aui-size-large {
+    .aui-upload-btn,
+    .aui-upload-loading,
+    .aui-upload-image-wrapper {
+        width: 140px;
+        height: 140px;
+    }
+    
+    .aui-upload-icon {
+        font-size: 48px;
+    }
+    
+    .aui-upload-text {
+        font-size: 14px;
+    }
+}
+
+/* 变量定义 */
+$aui-primary-color: #1677ff;
+$aui-border-color: #d9d9d9;
+$aui-gray-color: #bfbfbf;
+$aui-text-color-secondary: #8c8c8c;
+</style>

package/index.js

@@ -0,0 +1,93 @@
+import AuiBadge from './components/AuiBadge.vue';
+import AuiButton from './components/AuiButton.vue';
+import AuiImage from './components/AuiImage.vue';
+import AuiInput from './components/AuiInput.vue';
+import AuiTag from './components/AuiTag.vue';
+import AuiText from './components/AuiText.vue';
+import AuiForm from './components/AuiForm.vue';
+import AuiFormItem from './components/AuiFormItem.vue';
+import AuiList from './components/AuiList.vue';
+import AuiListItem from './components/AuiListItem.vue';
+import AuiDivider from './components/AuiDivider.vue';
+import AuiIcon from './components/AuiIcon.vue';
+import AuiNoticeBar from './components/AuiNoticeBar.vue';
+import AuiGrid from './components/AuiGrid.vue';
+import AuiGridItem from './components/AuiGridItem.vue';
+import AuiBlockBox from './components/AuiBlockBox.vue';
+import './style.scss';
+import AuiTab from './components/AuiTab.vue';
+import AuiTable from './components/AuiTable.vue';
+import AuiMultiSelect from './components/AuiMultiSelect.vue';
+import AuiUpdate from './components/AuiUpdate.vue';
+import AuiPicker from './components/AuiPicker.vue';
+import AuiTabItem from './components/AuiTabItem.vue';
+import AuiLineProgress from './components/AuiLineProgress.vue';
+import AuiFold from './components/AuiFold.vue';
+import AuiFoldItem from './components/AuiFoldItem.vue';
+import AuiPopup from './components/AuiPopup.vue';
+import AuiSelectGroup from './components/AuiSelectGroup.vue';
+import AuiNumberBox from './components/AuiNumberBox.vue';
+import AuiTextarea from './components/AuiTextarea.vue';
+import AuiUpload from './components/AuiUpload.vue';
+import AuiCustomerForm from './components/AuiCustomerForm.vue';
+import AuiLamp from './components/AuiLamp.vue';
+
+const components = [
+    AuiButton,
+    AuiImage,
+    AuiInput,
+    AuiTag,
+    AuiText,
+    AuiBadge,
+    AuiForm,
+    AuiFormItem,
+    AuiList,
+    AuiListItem,
+    AuiDivider,
+    AuiIcon,
+    AuiNoticeBar,
+    AuiGrid,
+    AuiGridItem,
+    AuiBlockBox,
+    AuiTab,
+    AuiTabItem,
+    AuiTable,
+    AuiMultiSelect,
+    AuiUpdate,
+    AuiPicker,
+    AuiLineProgress,
+    AuiFold,
+    AuiFoldItem,
+    AuiPopup,
+    AuiSelectGroup,
+    AuiNumberBox,
+    AuiTextarea,
+    AuiUpload,
+    AuiCustomerForm,
+    AuiLamp
+];
+
+const install = (app) => {
+    components.forEach(component => {
+        const componentName = component.name;
+        if (!componentName) {
+            // 在开发环境输出错误信息，生产环境可移除
+            if (process.env.NODE_ENV === 'development') {
+                console.error('Component is missing name:', component);
+            }
+            throw new Error('Component is missing name, registration failed.');
+        }
+        // 在开发环境输出调试信息，生产环境可移除
+        if (process.env.NODE_ENV === 'development') {
+            console.log('Registering component:', componentName, 'Component object:', component);
+        }
+        app.component(componentName, component);
+    });
+    // 在开发环境输出调试信息，生产环境可移除
+    if (process.env.NODE_ENV === 'development') {
+        console.log('All components registered. App instance:', app);
+    }
+};
+
+export default { install };
+export { AuiButton, AuiImage, AuiInput, AuiTag, AuiText, AuiBadge, AuiForm, AuiFormItem, AuiList, AuiListItem, AuiDivider, AuiIcon, AuiNoticeBar,AuiGrid,AuiGridItem,AuiBlockBox ,AuiTab,AuiTabItem,AuiTable,AuiMultiSelect,AuiUpdate,AuiPicker,AuiLineProgress,AuiFold,AuiFoldItem,AuiPopup,AuiSelectGroup,AuiNumberBox,AuiTextarea,AuiUpload,AuiCustomerForm,AuiLamp};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "rrj-astra-ui",
+  "version": "1.0.2",
+  "description": "RRJ - AstraUI - A powerful UI framework for UniApp with global SCSS color variables",
+  "main": "index.js",
+  "keywords": [
+    "yarn",
+    "npm"
+  ],
+  "author": "onlinesmart.cn",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nockey/astra-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/nockey/astra-ui/issues"
+  },
+  "homepage": "https://github.com/nokcey/astra-ui#readme",
+  "files": [
+    "components",
+    "index.js",
+    "style.scss"
+  ],
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "sass": "^1.66.1"
+  },
+  "dependencies": {
+    "@xmldom/xmldom": "^0.9.8",
+    "parse5": "^7.3.0",
+    "uuid": "^11.1.0"
+  }
+}

package/style.scss

@@ -0,0 +1,30 @@
+// 定义全局颜色变量
+$aui-secondary-color: #919BA1;
+$aui-primary-color: #3B82F6;
+$aui-primary-color-hover: #3178D5;
+$aui-primary-bg-color: #EFF6FF;
+$aui-danger-color: #F5222D;
+$aui-danger-color-hover: #CE5C5D;
+$aui-danger-bg-color: #FFF1F0;
+$aui-warning-color: #FA8C16;
+$aui-warning-color-hover: #D19438;
+$aui-warning-bg-color: #FFF7E6;
+$aui-success-color: #2ECC71;
+$aui-success-color-hover: #66bb6a;
+$aui-success-bg-color: #F6FFED;
+$aui-default-color: #333;
+$aui-text-color: #6B7280;
+$aui-disabled-color: #ccc;
+$aui-border-color: #EEEEEE;
+$aui-hover-color:#F5F5F5;
+$aui-active-bg:#EFF6FF;
+$aui-active-color:#2563EB;
+$aui-gray-color:red;
+$aui-text-color-secondary: #999;
+ 
+
+
+
+//定义全局变量
+$aui-font-size: 14px;
+$aui-font-min-size: 12px;