im-ui-mobile 0.1.12 → 0.1.14

package/components/im-upload/utils/file-chooser.js

@@ -0,0 +1,67 @@
+// utils/file-chooser.js
+export const chooseFile = (options = {}) => {
+    const defaultOptions = {
+        count: 1,
+        type: 'image'
+    }
+
+    const config = { ...defaultOptions, ...options }
+
+    return new Promise((resolve, reject) => {
+        // #ifdef H5 || APP-PLUS
+        uni.chooseFile({
+            ...config,
+            success: (res) => resolve(res),
+            fail: (err) => reject(err)
+        })
+        // #endif
+
+        // #ifdef MP-WEIXIN
+        // 微信小程序需要根据type映射到不同的API
+        if (config.type === 'image' || config.type === 'all') {
+            wx.chooseImage({
+                count: config.count,
+                success: (res) => {
+                    // 统一返回格式
+                    const result = {
+                        tempFilePaths: res.tempFilePaths,
+                        tempFiles: res.tempFiles.map(file => ({
+                            path: file.path,
+                            size: file.size,
+                            type: file.type || 'image'
+                        }))
+                    }
+                    resolve(result)
+                },
+                fail: reject
+            })
+        } else {
+            wx.chooseMessageFile({
+                count: config.count,
+                type: config.type === 'video' ? 'video' : 'file',
+                success: (res) => {
+                    resolve({
+                        tempFilePaths: res.tempFiles.map(file => file.path),
+                        tempFiles: res.tempFiles
+                    })
+                },
+                fail: reject
+            })
+        }
+        // #endif
+
+        // #ifdef MP-ALIPAY
+        // 支付宝小程序处理
+        my.chooseImage({
+            count: config.count,
+            success: (res) => {
+                resolve({
+                    tempFilePaths: res.apFilePaths,
+                    tempFiles: res.apFilePaths.map(path => ({ path }))
+                })
+            },
+            fail: reject
+        })
+        // #endif
+    })
+}

package/package.json

@@ -1,58 +1,60 @@
-{
-  "name": "im-ui-mobile",
-  "version": "0.1.12",
-  "description": "A Vue3.0 + Typescript instant messaging component library for Uniapp",
-  "type": "module",
-  "main": "index.js",
-  "types": "types/index.d.ts",
-  "files": [
-    "components",
-    "libs",
-    "types",
-    "utils",
-    "plugins",
-    "index.js",
-    "styles",
-    "theme.scss",
-    "index.scss"
-  ],
-  "scripts": {
-    "wx": "cd examples-dev && npm run dev:mp-weixin",
-    "h5": "cd examples-dev && npm run dev:h5",
-    "build": "npm run build:types",
-    "build:types": "vue-tsc -p tsconfig.build.json",
-    "clean:types": "rmdir /s /q src/types 2>nul # '删除 types 目录'",
-    "prepublishOnly": "npm run build"
-  },
-  "devDependencies": {
-    "@dcloudio/uni-app": "3.0.0-4070520250711001",
-    "@dcloudio/types": "^3.4.8",
-    "@dcloudio/uni-cli-shared": "3.0.0-4070520250711001",
-    "@dcloudio/vite-plugin-uni": "3.0.0-4070520250711001",
-    "@types/node": "^24.10.1",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "typescript": "~5.4.5",
-    "vite": "^4.0.0",
-    "vite-plugin-dts": "^3.0.0",
-    "vue-tsc": "^1.0.0"
-  },
-  "peerDependencies": {
-    "@dcloudio/uni-app": "3.0.0-4070520250711001",
-    "vue": "^3.3.0",
-    "pinia": "^2.1.7"
-  },
-  "peerDependenciesMeta": {
-    "pinia": {
-      "optional": true
-    }
-  },
-  "keywords": [
-    "vue3",
-    "components",
-    "ui",
-    "instant-messaging",
-    "chat"
-  ],
-  "author": "Joncky Cai",
-  "license": "MIT"
+{
+  "name": "im-ui-mobile",
+  "version": "0.1.14",
+  "description": "A Vue3.0 + Typescript instant messaging component library for Uniapp",
+  "type": "module",
+  "main": "index.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "components",
+    "libs",
+    "types",
+    "utils",
+    "plugins",
+    "index.js",
+    "styles",
+    "theme.scss",
+    "index.scss"
+  ],
+  "scripts": {
+    "wx": "cd examples-dev && npm run dev:mp-weixin",
+    "h5": "cd examples-dev && npm run dev:h5",
+    "build": "npm run build:types",
+    "build:types": "vue-tsc -p tsconfig.build.json",
+    "clean:types": "rmdir /s /q src/types 2>nul # '删除 types 目录'",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@dcloudio/types": "^3.4.8",
+    "@dcloudio/uni-app": "3.0.0-4070520250711001",
+    "@dcloudio/uni-cli-shared": "3.0.0-4070520250711001",
+    "@dcloudio/vite-plugin-uni": "3.0.0-4070520250711001",
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "sass": "^1.97.2",
+    "sass-loader": "^10.5.2",
+    "typescript": "~5.4.5",
+    "vite": "^4.0.0",
+    "vite-plugin-dts": "^3.0.0",
+    "vue-tsc": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@dcloudio/uni-app": "3.0.0-4070520250711001",
+    "pinia": "^2.1.7",
+    "vue": "^3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "pinia": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "vue3",
+    "components",
+    "ui",
+    "instant-messaging",
+    "chat"
+  ],
+  "author": "Joncky Cai",
+  "license": "MIT"
 }

package/styles/functions.scss

@@ -0,0 +1,24 @@
+// 将px转换为rpx
+@function px2rpx($px) {
+    @return $px * 2rpx;
+}
+
+// 将rpx转换为px
+@function rpx2px($rpx) {
+    @return $rpx / 2px;
+}
+
+// 计算rem
+@function rem($px) {
+    @return $px / 16px * 1rem;
+}
+
+// 颜色变亮
+@function tint($color, $percentage) {
+    @return mix(white, $color, $percentage);
+}
+
+// 颜色变暗
+@function shade($color, $percentage) {
+    @return mix(black, $color, $percentage);
+}

package/styles/mixins.scss

@@ -0,0 +1,148 @@
+// 文本溢出省略号
+@mixin text-ellipsis($lines: 1) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @if $lines ==1 {
+        white-space: nowrap;
+    }
+
+    @else {
+        display: -webkit-box;
+        -webkit-line-clamp: $lines;
+        -webkit-box-orient: vertical;
+    }
+}
+
+// 清除浮动
+@mixin clearfix {
+    &::after {
+        content: '';
+        display: table;
+        clear: both;
+    }
+}
+
+// 多行文本省略
+@mixin multi-line-ellipsis($line-height: 1.4, $lines: 2) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $lines;
+    line-height: $line-height;
+    max-height: $line-height * $lines * 1em;
+    overflow: hidden;
+}
+
+// 1像素边框
+@mixin hairline($color: $border-base, $direction: bottom) {
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        transform-origin: center;
+        box-sizing: border-box;
+        pointer-events: none;
+
+        @if $direction ==top {
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            border-top: 1px solid $color;
+            transform: scaleY(0.5);
+        }
+
+        @else if $direction ==bottom {
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            border-bottom: 1px solid $color;
+            transform: scaleY(0.5);
+        }
+
+        @else if $direction ==left {
+            top: 0;
+            left: 0;
+            bottom: 0;
+            width: 1px;
+            border-left: 1px solid $color;
+            transform: scaleX(0.5);
+        }
+
+        @else if $direction ==right {
+            top: 0;
+            right: 0;
+            bottom: 0;
+            width: 1px;
+            border-right: 1px solid $color;
+            transform: scaleX(0.5);
+        }
+
+        @else if $direction ==all {
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 1px solid $color;
+            transform: scale(0.5);
+            transform-origin: 0 0;
+        }
+    }
+}
+
+// 移除1像素边框
+@mixin hairline-remove {
+    &::after {
+        display: none;
+    }
+}
+
+// 弹性布局快捷方式
+@mixin flex($justify: flex-start, $align: center, $direction: row) {
+    display: flex;
+    flex-direction: $direction;
+    justify-content: $justify;
+    align-items: $align;
+}
+
+// 垂直居中
+@mixin vertical-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+// 响应式媒体查询
+@mixin respond-to($breakpoint) {
+    @if $breakpoint ==xs {
+        @media (max-width: 320px) {
+            @content;
+        }
+    }
+
+    @else if $breakpoint ==sm {
+        @media (max-width: 375px) {
+            @content;
+        }
+    }
+
+    @else if $breakpoint ==md {
+        @media (max-width: 414px) {
+            @content;
+        }
+    }
+
+    @else if $breakpoint ==lg {
+        @media (max-width: 768px) {
+            @content;
+        }
+    }
+
+    @else if $breakpoint ==xl {
+        @media (min-width: 1024px) {
+            @content;
+        }
+    }
+}

package/styles/variables.scss

@@ -0,0 +1,58 @@
+// 颜色系统
+$primary-color: #1989fa;
+$success-color: #07c160;
+$warning-color: #ff976a;
+$danger-color: #ee0a24;
+$info-color: #909399;
+
+// 文本颜色
+$text-primary: #303133;
+$text-regular: #606266;
+$text-secondary: #909399;
+$text-placeholder: #c0c4cc;
+
+// 边框颜色
+$border-base: #dcdfe6;
+$border-light: #e4e7ed;
+$border-lighter: #ebeef5;
+
+// 背景颜色
+$bg-color: #f8f8f8;
+$bg-color-light: #fafafa;
+
+// 尺寸
+$font-size-xs: 10px;
+$font-size-sm: 12px;
+$font-size-base: 14px;
+$font-size-md: 16px;
+$font-size-lg: 18px;
+$font-size-xl: 20px;
+
+// 间距
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-base: 16px;
+$spacing-md: 24px;
+$spacing-lg: 32px;
+$spacing-xl: 48px;
+
+// 圆角
+$border-radius-sm: 2px;
+$border-radius-base: 4px;
+$border-radius-md: 8px;
+$border-radius-lg: 12px;
+$border-radius-round: 20px;
+$border-radius-circle: 50%;
+
+// 阴影
+$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12);
+$box-shadow-light: 0 2px 12px rgba(0, 0, 0, 0.1);
+
+// 动画
+$transition-duration: 0.3s;
+$transition-timing: ease;
+
+// 深色模式变量
+$dark-bg-color: #2a2a2a;
+$dark-text-color: #ffffff;
+$dark-border-color: #444444;