From 5ce211ee5a1782960523f72ca8d9ea1e365ae6c8 Mon Sep 17 00:00:00 2001 From: joey Date: Fri, 25 Jul 2025 17:16:33 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E5=BD=A2=E9=A1=B5=E5=BC=80?= =?UTF-8?q?=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- miniprogram/assets/shapes/circle.webp | Bin 0 -> 5320 bytes miniprogram/assets/shapes/circle2.svg | 6 ++ miniprogram/assets/shapes/square.webp | Bin 0 -> 579 bytes .../shape-card/shape-card copy.less | 57 +++++++++++++++++ .../components/shape-card/shape-card.json | 7 +++ .../components/shape-card/shape-card.less | 58 ++++++++++++++++++ .../components/shape-card/shape-card.ts | 36 +++++++++++ .../components/shape-card/shape-card.wxml | 19 ++++++ miniprogram/constants/shapes.ts | 58 ++++++++++++++++++ miniprogram/pages/shape/index.json | 3 +- miniprogram/pages/shape/index.less | 14 ++++- miniprogram/pages/shape/index.ts | 8 +-- miniprogram/pages/shape/index.wxml | 13 ++++ project.private.config.json | 11 +++- 14 files changed, 282 insertions(+), 8 deletions(-) create mode 100644 miniprogram/assets/shapes/circle.webp create mode 100644 miniprogram/assets/shapes/circle2.svg create mode 100644 miniprogram/assets/shapes/square.webp create mode 100644 miniprogram/components/shape-card/shape-card copy.less create mode 100644 miniprogram/components/shape-card/shape-card.json create mode 100644 miniprogram/components/shape-card/shape-card.less create mode 100644 miniprogram/components/shape-card/shape-card.ts create mode 100644 miniprogram/components/shape-card/shape-card.wxml create mode 100644 miniprogram/constants/shapes.ts diff --git a/miniprogram/assets/shapes/circle.webp b/miniprogram/assets/shapes/circle.webp new file mode 100644 index 0000000000000000000000000000000000000000..8a82817d7827ff7af7fc79f778fa7c9220a7b594 GIT binary patch literal 5320 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 fdnbZ&+m929<+TuZAJ7H6k-&{>R + + + + + diff --git a/miniprogram/assets/shapes/square.webp b/miniprogram/assets/shapes/square.webp new file mode 100644 index 0000000000000000000000000000000000000000..1a809d451bb77af745ebe9a876790b92a49fa070 GIT binary patch literal 579 zcmeAS@N?(olHy`uVBq!ia0vp^TR@nD4M^IaWitX&jKx9jP7LeL$-D$|Sc;uILpXq- zh9ji|DEHRW#WAE}&f9AneVH9aTrV>2YSHJj92FD&7hCE_?)DI!L#xRG+quogXR<~#Mf&I U?$dR!$OLgcUHx3vIVCg!0Ij&tHvj+t literal 0 HcmV?d00001 diff --git a/miniprogram/components/shape-card/shape-card copy.less b/miniprogram/components/shape-card/shape-card copy.less new file mode 100644 index 0000000..9f139cd --- /dev/null +++ b/miniprogram/components/shape-card/shape-card copy.less @@ -0,0 +1,57 @@ +.shape-card { + position: relative; + width: 300rpx; + height: 300rpx; + border-radius: 16rpx; + // background: #f5f5f5; + background: #ffffff; + border: 1rpx solid rgba(242, 242, 242, 1); + box-shadow: 0rpx 16rpx 24rpx rgba(184, 210, 188, 0.2); + + .shape-card-img-wrapper { + padding: 16rpx; + width: 100%; + height: 200rpx; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + + .shape-card-img { + width: 180rpx; + height: 180rpx; + } + } + + .shape-card-footer { + margin-inline: 32rpx; + padding-block: 16rpx; + display: flex; + justify-content: start; + align-items: center; + border-top: 1rpx solid #CCCCCC; + + .shape-card-footer-color { + width: 60rpx; + height: 60rpx; + border-radius: 50%; + border: 2rpx solid #141414; + margin-right: 34rpx; + } + + .shape-card-footer-name { + font-size: 28rpx; + color: #141414; + } + } + + .delete-icon { + position: absolute; + top: -18rpx; + right: -18rpx; + + .delete-icon-inner { + color: rgba(255, 0, 0, 0.7); + } + } +} \ No newline at end of file diff --git a/miniprogram/components/shape-card/shape-card.json b/miniprogram/components/shape-card/shape-card.json new file mode 100644 index 0000000..44daf20 --- /dev/null +++ b/miniprogram/components/shape-card/shape-card.json @@ -0,0 +1,7 @@ +{ + "component": true, + "styleIsolation": "apply-shared", + "usingComponents": { + "van-icon": "@vant/weapp/icon/index" + } +} diff --git a/miniprogram/components/shape-card/shape-card.less b/miniprogram/components/shape-card/shape-card.less new file mode 100644 index 0000000..70fd139 --- /dev/null +++ b/miniprogram/components/shape-card/shape-card.less @@ -0,0 +1,58 @@ +.shape-card { + position: relative; + width: 240rpx; + height: 240rpx; + border-radius: 16rpx; + // background: #f5f5f5; + background: #ffffff; + border: 1rpx solid rgba(242, 242, 242, 1); + box-shadow: 0rpx 16rpx 24rpx rgba(184, 210, 188, 0.2); + + .shape-card-img-wrapper { + padding: 16rpx; + width: 100%; + height: 120rpx; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + + .shape-card-img { + width: 120rpx; + height: 120rpx; + color: skyblue; + } + } + + .shape-card-footer { + margin-inline: 32rpx; + padding-block: 16rpx; + display: flex; + justify-content: start; + align-items: center; + border-top: 1rpx solid #CCCCCC; + + .shape-card-footer-color { + width: 60rpx; + height: 60rpx; + border-radius: 50%; + border: 2rpx solid #141414; + margin-right: 34rpx; + } + + .shape-card-footer-name { + font-size: 28rpx; + color: #141414; + } + } + + .delete-icon { + position: absolute; + top: -18rpx; + right: -18rpx; + + .delete-icon-inner { + color: rgba(255, 0, 0, 0.7); + } + } +} \ No newline at end of file diff --git a/miniprogram/components/shape-card/shape-card.ts b/miniprogram/components/shape-card/shape-card.ts new file mode 100644 index 0000000..1450f19 --- /dev/null +++ b/miniprogram/components/shape-card/shape-card.ts @@ -0,0 +1,36 @@ +Component({ + /** + * 组件的属性列表 + */ + properties: { + key: { + type: Number, + value: 0, + }, + img: { + type: String, + value: '', + }, + name: { + type: String, + value: '', + }, + color: { + type: String, + value: '', + }, + }, + /** + * 组件的方法列表 + */ + methods: { + onDelete() { + const { key } = this.data; + this.triggerEvent('onDelete', { key }); + }, + onColorTap() { + const { key, color } = this.data; + this.triggerEvent('onColorTap', { key, color }); + }, + }, +}); diff --git a/miniprogram/components/shape-card/shape-card.wxml b/miniprogram/components/shape-card/shape-card.wxml new file mode 100644 index 0000000..f3e8cd7 --- /dev/null +++ b/miniprogram/components/shape-card/shape-card.wxml @@ -0,0 +1,19 @@ + + + + + + + {{ name }} + + + + + diff --git a/miniprogram/constants/shapes.ts b/miniprogram/constants/shapes.ts new file mode 100644 index 0000000..0bf16f6 --- /dev/null +++ b/miniprogram/constants/shapes.ts @@ -0,0 +1,58 @@ +const SHAPES = [ + { + id: 'circle', + name: '圆形', + img: '/assets/shapes/circle.webp', + color: '#FF0000', + type: 'circle', + svg: '', + drawFunction: 'drawCircle', + }, + { + id: 'square', + name: '正方形', + img: '/assets/shapes/square.webp', + color: '#0000FF', + type: 'rect', + svg: '', + drawFunction: 'drawSquare', + }, + { + id: 'circle2', + name: '圆形', + img: '/assets/shapes/circle2.svg', + color: '#FF0000', + type: 'circle', + svg: '', + drawFunction: 'drawCircle', + }, + { + id: 'square', + name: '正方形', + img: '/assets/shapes/square.webp', + color: '#0000FF', + type: 'rect', + svg: '', + drawFunction: 'drawSquare', + }, + { + id: 'circle', + name: '圆形', + img: '/assets/shapes/circle.webp', + color: '#FF0000', + type: 'circle', + svg: '', + drawFunction: 'drawCircle', + }, + { + id: 'square', + name: '正方形', + img: '/assets/shapes/square.webp', + color: '#0000FF', + type: 'rect', + svg: '', + drawFunction: 'drawSquare', + }, +]; + +export { SHAPES }; \ No newline at end of file diff --git a/miniprogram/pages/shape/index.json b/miniprogram/pages/shape/index.json index 0539588..b19c868 100644 --- a/miniprogram/pages/shape/index.json +++ b/miniprogram/pages/shape/index.json @@ -8,6 +8,7 @@ "van-divider": "@vant/weapp/divider/index", "van-icon": "@vant/weapp/icon/index", "van-popup": "@vant/weapp/popup/index", - "toy-button": "../../ui/button/button" + "toy-button": "../../ui/button/button", + "shape-card": "../../components/shape-card/shape-card" } } diff --git a/miniprogram/pages/shape/index.less b/miniprogram/pages/shape/index.less index 2e0eedf..2bcb134 100644 --- a/miniprogram/pages/shape/index.less +++ b/miniprogram/pages/shape/index.less @@ -12,7 +12,7 @@ page { } .wrapper { - background-color: #ffffff; + background-color: #fff; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15); @@ -34,4 +34,16 @@ page { flex-direction: row; justify-content: space-between; } + + .shape-list { + display: flex; + flex-wrap: wrap; + gap: 24rpx; // 卡片间距，可调整 + + shape-card { + width: calc(50% - 12rpx); // 两个一行，减去一半的gap + box-sizing: border-box; + margin-bottom: 24rpx; + } + } } \ No newline at end of file diff --git a/miniprogram/pages/shape/index.ts b/miniprogram/pages/shape/index.ts index 646a4ab..19eea84 100644 --- a/miniprogram/pages/shape/index.ts +++ b/miniprogram/pages/shape/index.ts @@ -1,11 +1,11 @@ +import { SHAPES } from '../../constants/shapes'; + Page({ data: { - shapeList: [], + shapeList: SHAPES, }, onLoad() { - this.setData({ - shapeList: [], - }); + }, }); \ No newline at end of file diff --git a/miniprogram/pages/shape/index.wxml b/miniprogram/pages/shape/index.wxml index c140015..cd73366 100644 --- a/miniprogram/pages/shape/index.wxml +++ b/miniprogram/pages/shape/index.wxml @@ -18,5 +18,18 @@ + + + diff --git a/project.private.config.json b/project.private.config.json index 09099c6..ef382e1 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -24,12 +24,19 @@ "miniprogram": { "list": [ { - "name": "测试图形绘制", - "pathName": "demoPages/shapePrint/index", + "name": "pages/shape/index", + "pathName": "pages/shape/index", "query": "", "scene": null, "launchMode": "default" }, + { + "name": "测试图形绘制", + "pathName": "demoPages/shapePrint/index", + "query": "", + "launchMode": "default", + "scene": null + }, { "name": "debug页", "pathName": "pages/debug/debug",