From e0ec5efff480f43f44c78b1e55b508f381d80843 Mon Sep 17 00:00:00 2001 From: Triumph-light <2495685883@qq.com> Date: Sat, 19 Jul 2025 23:21:36 +0800 Subject: [PATCH 1/6] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AF=B9=E8=B1=A1?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E5=80=BC=E6=A0=BC=E5=BC=8F=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=E6=8D=A2=E8=A1=8C=EF=BC=8C=E5=AF=BC=E8=87=B4=E8=A1=A8=E6=A0=BC?= =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=A5=87=E6=80=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/compiler/compile-src-code-md.ts | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/website-build/src/compiler/compile-src-code-md.ts b/packages/website-build/src/compiler/compile-src-code-md.ts index 86f4833..61fc6cf 100644 --- a/packages/website-build/src/compiler/compile-src-code-md.ts +++ b/packages/website-build/src/compiler/compile-src-code-md.ts @@ -9,6 +9,24 @@ import { parser } from '@mpxjs/vuese-parser' import { Render } from '@mpxjs/vuese-markdown-render' import { renderOptions } from '../common/options.js' +/** + * 将字符串的对象转为可读的markdown格式 + * @param str + * @returns + */ +function convertObjectStringToMarkdownHtml(str) { + if (!str) return + return ( + '
' +
+ str
+ .trim()
+ .split('\n')
+ .map(line => line.replace(//g, '>')) // 防止HTML标签注入
+ .join('
') +
+ ''
+ )
+}
+
/**
* 解析 cube-ui src 文件夹下的组件,生成md文档
*
@@ -44,6 +62,9 @@ const genSrcCodeMd = function (srcDir: string, component: string, fnMixins) {
item.type = item.type.replace(/\n/g, '' +
str
- .trim()
.split('\n')
- .map(line => line.replace(//g, '>')) // 防止HTML标签注入
+ .map((line, idx) => {
+ line = line.replace(/\s+/g, '').replace(//g, '>')
+ if (idx !== 0 && idx !== str.split('\n').length - 1) {
+ line = ' ' + line
+ }
+ return line
+ }) // 防止HTML标签注入
.join('
') +
''
)
From 12a48c1d043f6044602f87531e26afc6a75819eb Mon Sep 17 00:00:00 2001
From: Triumph-light <2495685883@qq.com>
Date: Thu, 24 Jul 2025 15:47:59 +0800
Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E5=B5=8C?=
=?UTF-8?q?=E5=A5=97=E5=AF=B9=E8=B1=A1=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../website-build/src/compiler/compile-src-code-md.ts | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/website-build/src/compiler/compile-src-code-md.ts b/packages/website-build/src/compiler/compile-src-code-md.ts
index 5cfa889..d925c1c 100644
--- a/packages/website-build/src/compiler/compile-src-code-md.ts
+++ b/packages/website-build/src/compiler/compile-src-code-md.ts
@@ -14,16 +14,16 @@ import { renderOptions } from '../common/options.js'
* @param str
* @returns
*/
-function convertObjectStringToMarkdownHtml(str) {
+export function convertObjectStringToMarkdownHtml(str) {
if (!str) return
return (
'' +
str
.split('\n')
.map((line, idx) => {
- line = line.replace(/\s+/g, '').replace(//g, '>')
- if (idx !== 0 && idx !== str.split('\n').length - 1) {
- line = ' ' + line
+ // 第一行和最后一行是{},将括号的前后空白字符去除,只保留属性的
+ if (!(idx !== 0 && idx !== str.split('\n').length - 1)) {
+ line = line.replace(/\s+/g, '').replace(//g, '>')
}
return line
}) // 防止HTML标签注入
From 03f3f3922f3731349fac35c9384fc685e02b3b5f Mon Sep 17 00:00:00 2001
From: Triumph-light <2495685883@qq.com>
Date: Thu, 31 Jul 2025 20:26:36 +0800
Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Eupload=E7=BB=84?=
=?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
example/app.mpx | 3 +-
example/common/config.ts | 3 +-
example/pages/upload/index.mpx | 28 ++
.../stylus/theme/components/upload.styl | 1 +
.../lib/components/upload/css.styl | 133 ++++++
.../lib/components/upload/hooks.js | 19 +
.../lib/components/upload/index.mpx | 427 +++++++++++++++++
.../lib/components/upload/utils.js | 16 +
.../stylus/theme/components/upload.styl | 1 +
.../src/components/upload/css.styl | 133 ++++++
.../src/components/upload/hooks.ts | 21 +
.../src/components/upload/index.mpx | 430 ++++++++++++++++++
.../src/components/upload/utils.ts | 38 ++
13 files changed, 1251 insertions(+), 2 deletions(-)
create mode 100644 example/pages/upload/index.mpx
create mode 100644 packages/mpx-cube-ui/lib/common/stylus/theme/components/upload.styl
create mode 100644 packages/mpx-cube-ui/lib/components/upload/css.styl
create mode 100644 packages/mpx-cube-ui/lib/components/upload/hooks.js
create mode 100644 packages/mpx-cube-ui/lib/components/upload/index.mpx
create mode 100644 packages/mpx-cube-ui/lib/components/upload/utils.js
create mode 100644 packages/mpx-cube-ui/src/common/stylus/theme/components/upload.styl
create mode 100644 packages/mpx-cube-ui/src/components/upload/css.styl
create mode 100644 packages/mpx-cube-ui/src/components/upload/hooks.ts
create mode 100644 packages/mpx-cube-ui/src/components/upload/index.mpx
create mode 100644 packages/mpx-cube-ui/src/components/upload/utils.ts
diff --git a/example/app.mpx b/example/app.mpx
index 31ac28e..3804c4d 100644
--- a/example/app.mpx
+++ b/example/app.mpx
@@ -49,7 +49,8 @@
"./pages/switch/index",
"./pages/loading/index",
"./pages/input/index",
- "./pages/action-sheet/index"
+ "./pages/action-sheet/index",
+ "./pages/upload/index"
]
}
diff --git a/example/common/config.ts b/example/common/config.ts
index 51b4910..1bfaa57 100644
--- a/example/common/config.ts
+++ b/example/common/config.ts
@@ -61,7 +61,8 @@ export default {
'date-picker',
'time-picker',
'rate',
- 'switch'
+ 'switch',
+ 'upload',
]
},
{
diff --git a/example/pages/upload/index.mpx b/example/pages/upload/index.mpx
new file mode 100644
index 0000000..99ea107
--- /dev/null
+++ b/example/pages/upload/index.mpx
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/mpx-cube-ui/lib/common/stylus/theme/components/upload.styl b/packages/mpx-cube-ui/lib/common/stylus/theme/components/upload.styl
new file mode 100644
index 0000000..ecc515f
--- /dev/null
+++ b/packages/mpx-cube-ui/lib/common/stylus/theme/components/upload.styl
@@ -0,0 +1 @@
+$upload-background-color := #FFF;
\ No newline at end of file
diff --git a/packages/mpx-cube-ui/lib/components/upload/css.styl b/packages/mpx-cube-ui/lib/components/upload/css.styl
new file mode 100644
index 0000000..b96559d
--- /dev/null
+++ b/packages/mpx-cube-ui/lib/components/upload/css.styl
@@ -0,0 +1,133 @@
+@require "../../common/stylus/variable.styl"
+@require "../../common/stylus/theme/components/upload.styl";
+.uploader-wrapper
+ display flex
+ flex-wrap wrap
+ gap 20rpx
+.card-container
+ position relative
+.card-container .close-icon
+ display flex
+ align-items center
+ justify-content center
+ position absolute
+ top 10rpx
+ right 10rpx
+ width 24rpx
+ height 24rpx
+ cursor pointer
+.card
+ width 167rpx
+ height 167rpx
+ border-radius 16rpx
+ overflow hidden
+ position relative
+ background-color $var(upload-background-color)
+ box-sizing border-box
+ font-family PingFangSC-Regular
+ font-size 18rpx
+ color #E8C5AA
+ letter-spacing 0
+ text-align center
+ font-weight 400
+.thumb
+ width 100%
+ height 100%
+ object-fit cover
+.preview-icon
+ position absolute
+ top 0
+ right 0
+ bottom 0
+ left 0
+ display flex
+ align-items center
+ justify-content center
+ background-color rgba(0, 0, 0, 0.5)
+ color #fff
+ font-size 24rpx
+ padding 4rpx 8rpx
+ border-radius 8rpx
+ opacity 0
+ transition opacity 0.2s
+.uploading
+ position absolute
+ top 0
+ display flex
+ flex-direction column
+ align-items center
+ justify-content center
+ background-color rgba(0, 0, 0, 0.5)
+.uploading-text
+ margin-bottom 10rpx
+@keyframes spin
+ 0%
+ transform rotate(0deg)
+ 100%
+ transform rotate(360deg)
+.progress
+ width 30rpx
+ height 30rpx
+ margin-bottom 7rpx
+ &.loading
+ animation spin 1s linear infinite
+.progress-bar
+ height 100%
+ background-color #3b82f6
+ transition width 0.3s
+.upload-btn
+ display flex
+ flex-direction column
+ align-items center
+ justify-content center
+ border-style dashed
+ border-color #cbd5e1
+ color #666
+.plus
+ width 30rpx
+ height 30rpx
+.text
+ font-size 22rpx
+.error
+ position absolute
+ top 0
+ display flex
+ align-content center
+ justify-content center
+ flex-direction column
+.error-icon
+ font-size 30rpx
+ margin-bottom 5rpx
+.preview-mask
+ position fixed
+ top 0
+ left 0
+ right 0
+ bottom 0
+ background-color rgba(0, 0, 0, 0.9)
+ z-index 999
+ display flex
+ align-items center
+ justify-content center
+ .close-icon
+ position absolute
+ top 114rpx
+ left 32rpx
+ width 36rpx
+ height 36rpx
+ .indicator
+ position absolute
+ top 114rpx
+ left 50%
+ transform translateX(-50%)
+ color #fff
+ font-size 24rpx
+.preview-img
+ width 100%
+ height 60%
+ border-radius 12rpx
+.mpx-image
+ width 100%
+ height 100%
+ background-size contain
+ background-repeat no-repeat
\ No newline at end of file
diff --git a/packages/mpx-cube-ui/lib/components/upload/hooks.js b/packages/mpx-cube-ui/lib/components/upload/hooks.js
new file mode 100644
index 0000000..3862738
--- /dev/null
+++ b/packages/mpx-cube-ui/lib/components/upload/hooks.js
@@ -0,0 +1,19 @@
+import { onUnmounted, ref } from "@mpxjs/core";
+// 节流hooks
+export const useDebounceFn = (fn, delay) => {
+ const timer = ref();
+ onUnmounted(() => {
+ clearTimeout(timer.value);
+ });
+ return {
+ run: (...args) => {
+ if (timer.value) {
+ clearTimeout(timer.value);
+ }
+ timer.value = setTimeout(() => {
+ fn(...args);
+ timer.value = undefined;
+ }, delay);
+ }
+ };
+};
diff --git a/packages/mpx-cube-ui/lib/components/upload/index.mpx b/packages/mpx-cube-ui/lib/components/upload/index.mpx
new file mode 100644
index 0000000..345ba6e
--- /dev/null
+++ b/packages/mpx-cube-ui/lib/components/upload/index.mpx
@@ -0,0 +1,427 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ 上传中...
+
+
+
+
+ 失败
+ 删除重试
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ previewIdx }} / {{ fileList.length }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/mpx-cube-ui/lib/components/upload/utils.js b/packages/mpx-cube-ui/lib/components/upload/utils.js
new file mode 100644
index 0000000..64593f5
--- /dev/null
+++ b/packages/mpx-cube-ui/lib/components/upload/utils.js
@@ -0,0 +1,16 @@
+export function getByPath(obj, path) {
+ return path.split('.').reduce((prev, curr) => prev && prev[curr], obj);
+}
+/**
+ * 对请求的返回结构做目标转化
+ * @param source
+ * @param target
+ * @returns
+ */
+export function transformRes(source, target) {
+ target = { ...target };
+ for (const key in target) {
+ target[key] = getByPath(source, target[key]);
+ }
+ return target;
+}
diff --git a/packages/mpx-cube-ui/src/common/stylus/theme/components/upload.styl b/packages/mpx-cube-ui/src/common/stylus/theme/components/upload.styl
new file mode 100644
index 0000000..ecc515f
--- /dev/null
+++ b/packages/mpx-cube-ui/src/common/stylus/theme/components/upload.styl
@@ -0,0 +1 @@
+$upload-background-color := #FFF;
\ No newline at end of file
diff --git a/packages/mpx-cube-ui/src/components/upload/css.styl b/packages/mpx-cube-ui/src/components/upload/css.styl
new file mode 100644
index 0000000..b96559d
--- /dev/null
+++ b/packages/mpx-cube-ui/src/components/upload/css.styl
@@ -0,0 +1,133 @@
+@require "../../common/stylus/variable.styl"
+@require "../../common/stylus/theme/components/upload.styl";
+.uploader-wrapper
+ display flex
+ flex-wrap wrap
+ gap 20rpx
+.card-container
+ position relative
+.card-container .close-icon
+ display flex
+ align-items center
+ justify-content center
+ position absolute
+ top 10rpx
+ right 10rpx
+ width 24rpx
+ height 24rpx
+ cursor pointer
+.card
+ width 167rpx
+ height 167rpx
+ border-radius 16rpx
+ overflow hidden
+ position relative
+ background-color $var(upload-background-color)
+ box-sizing border-box
+ font-family PingFangSC-Regular
+ font-size 18rpx
+ color #E8C5AA
+ letter-spacing 0
+ text-align center
+ font-weight 400
+.thumb
+ width 100%
+ height 100%
+ object-fit cover
+.preview-icon
+ position absolute
+ top 0
+ right 0
+ bottom 0
+ left 0
+ display flex
+ align-items center
+ justify-content center
+ background-color rgba(0, 0, 0, 0.5)
+ color #fff
+ font-size 24rpx
+ padding 4rpx 8rpx
+ border-radius 8rpx
+ opacity 0
+ transition opacity 0.2s
+.uploading
+ position absolute
+ top 0
+ display flex
+ flex-direction column
+ align-items center
+ justify-content center
+ background-color rgba(0, 0, 0, 0.5)
+.uploading-text
+ margin-bottom 10rpx
+@keyframes spin
+ 0%
+ transform rotate(0deg)
+ 100%
+ transform rotate(360deg)
+.progress
+ width 30rpx
+ height 30rpx
+ margin-bottom 7rpx
+ &.loading
+ animation spin 1s linear infinite
+.progress-bar
+ height 100%
+ background-color #3b82f6
+ transition width 0.3s
+.upload-btn
+ display flex
+ flex-direction column
+ align-items center
+ justify-content center
+ border-style dashed
+ border-color #cbd5e1
+ color #666
+.plus
+ width 30rpx
+ height 30rpx
+.text
+ font-size 22rpx
+.error
+ position absolute
+ top 0
+ display flex
+ align-content center
+ justify-content center
+ flex-direction column
+.error-icon
+ font-size 30rpx
+ margin-bottom 5rpx
+.preview-mask
+ position fixed
+ top 0
+ left 0
+ right 0
+ bottom 0
+ background-color rgba(0, 0, 0, 0.9)
+ z-index 999
+ display flex
+ align-items center
+ justify-content center
+ .close-icon
+ position absolute
+ top 114rpx
+ left 32rpx
+ width 36rpx
+ height 36rpx
+ .indicator
+ position absolute
+ top 114rpx
+ left 50%
+ transform translateX(-50%)
+ color #fff
+ font-size 24rpx
+.preview-img
+ width 100%
+ height 60%
+ border-radius 12rpx
+.mpx-image
+ width 100%
+ height 100%
+ background-size contain
+ background-repeat no-repeat
\ No newline at end of file
diff --git a/packages/mpx-cube-ui/src/components/upload/hooks.ts b/packages/mpx-cube-ui/src/components/upload/hooks.ts
new file mode 100644
index 0000000..045235e
--- /dev/null
+++ b/packages/mpx-cube-ui/src/components/upload/hooks.ts
@@ -0,0 +1,21 @@
+import { onUnmounted, ref } from '@mpxjs/core'
+
+// 节流hooks
+export const useDebounceFn = (fn, delay) => {
+ const timer = ref()
+
+ onUnmounted(() => {
+ clearTimeout(timer.value)
+ })
+ return {
+ run: (...args) => {
+ if (timer.value) {
+ clearTimeout(timer.value)
+ }
+ timer.value = setTimeout(() => {
+ fn(...args)
+ timer.value = undefined
+ }, delay)
+ }
+ }
+}
diff --git a/packages/mpx-cube-ui/src/components/upload/index.mpx b/packages/mpx-cube-ui/src/components/upload/index.mpx
new file mode 100644
index 0000000..d65489a
--- /dev/null
+++ b/packages/mpx-cube-ui/src/components/upload/index.mpx
@@ -0,0 +1,430 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ 上传中...
+
+
+
+
+ 失败
+ 删除重试
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ previewIdx }} / {{ fileList.length }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/mpx-cube-ui/src/components/upload/utils.ts b/packages/mpx-cube-ui/src/components/upload/utils.ts
new file mode 100644
index 0000000..716c760
--- /dev/null
+++ b/packages/mpx-cube-ui/src/components/upload/utils.ts
@@ -0,0 +1,38 @@
+/**
+ * 根据 path 获取对象数据
+ */
+type Prev = [never, 0, 1, 2, 3, 4, 5]
+type Join = T extends string | number ? P extends string | number ? `${T}.${P}` : never : never
+type Paths =
+ Depth extends never ?
+ never
+ : T extends object
+ ? {
+ [K in keyof T & (string | number)]:
+ T[K] extends object
+ ? `${K}` | Join>
+ : `${K}`
+ }[keyof T & (string | number)]
+ : never
+
+export function getByPath>(obj: T, path: K) {
+ return path.split('.').reduce((prev, curr) => prev && prev[curr], obj)
+}
+
+/**
+ * 对请求的返回结构做目标转化
+ * @param source
+ * @param target
+ * @returns
+ */
+export function transformRes>>(
+ source: TSource, target: TTarget
+) {
+ target = { ...target }
+ const result = {} as Record
+ for (const key in target) {
+ const path = target[key]
+ result[key] = getByPath(source, path)
+ }
+ return result
+}
From 2ff63536e2fc9ee8035e3e6713da1ae00ea251f4 Mon Sep 17 00:00:00 2001
From: Triumph-light <2495685883@qq.com>
Date: Thu, 31 Jul 2025 20:28:28 +0800
Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=E5=8F=96=E6=B6=88transformRes?=
=?UTF-8?q?=E7=9A=84=E7=B1=BB=E5=9E=8B=E9=99=90=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/mpx-cube-ui/src/components/upload/utils.ts | 6 ++----
1 file changed, 2 insertions(+), 4 deletions(-)
diff --git a/packages/mpx-cube-ui/src/components/upload/utils.ts b/packages/mpx-cube-ui/src/components/upload/utils.ts
index 716c760..4893e56 100644
--- a/packages/mpx-cube-ui/src/components/upload/utils.ts
+++ b/packages/mpx-cube-ui/src/components/upload/utils.ts
@@ -25,11 +25,9 @@ export function getByPath>(obj: T, path: K) {
* @param target
* @returns
*/
-export function transformRes>>(
- source: TSource, target: TTarget
-) {
+export function transformRes(source, target) {
target = { ...target }
- const result = {} as Record
+ const result = {}
for (const key in target) {
const path = target[key]
result[key] = getByPath(source, path)
From 6c477454752b6e6ab68c54737e2fcc3f25aecc0d Mon Sep 17 00:00:00 2001
From: Triumph-light <2495685883@qq.com>
Date: Thu, 31 Jul 2025 21:07:13 +0800
Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=E5=AF=B9promise=E5=A4=B1=E8=B4=A5?=
=?UTF-8?q?=E5=8A=A0=E4=B8=8Areject?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/mpx-cube-ui/src/components/upload/index.mpx | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/packages/mpx-cube-ui/src/components/upload/index.mpx b/packages/mpx-cube-ui/src/components/upload/index.mpx
index d65489a..c3a5dd2 100644
--- a/packages/mpx-cube-ui/src/components/upload/index.mpx
+++ b/packages/mpx-cube-ui/src/components/upload/index.mpx
@@ -190,6 +190,7 @@ const chooseImage = async () => {
return await chooseImageWeb()
default:
console.error('Unsupported environment:', __mpx_mode__)
+ return Promise.reject(new Error('Unsupported environment'))
}
}
@@ -235,7 +236,7 @@ const postFiles = async (url, file): Promise => {
}).then(res => res.json())
.then(res => resolve(transformRes(res, props.transform)))
.catch(err => {
- throw new Error(err)
+ reject(err)
})
})
}