From d3c1a2fd78402e9c0289e7587a5abb5eac6282c7 Mon Sep 17 00:00:00 2001 From: joey Date: Fri, 1 Aug 2025 17:37:56 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=87=86=E5=A4=87=E5=90=84=E4=B8=AA?= =?UTF-8?q?=E5=BD=A2=E7=8A=B6=E7=9A=84=20svg=20=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- miniprogram/assets/shapes/半圆.svg | 4 + .../shape-card-v1/shape-card copy.less | 57 ++++++ .../components/shape-card-v1/shape-card.json | 7 + .../components/shape-card-v1/shape-card.less | 58 ++++++ .../components/shape-card-v1/shape-card.ts | 36 ++++ .../components/shape-card-v1/shape-card.wxml | 19 ++ .../components/shape-card/shape-card.less | 73 +++----- .../components/shape-card/shape-card.ts | 46 ++++- .../components/shape-card/shape-card.wxml | 29 ++- miniprogram/constants/shapes.ts | 176 ++++++++++++++---- miniprogram/pages/shape/index.less | 10 +- miniprogram/pages/shape/index.wxml | 3 +- 12 files changed, 403 insertions(+), 115 deletions(-) create mode 100644 miniprogram/assets/shapes/半圆.svg create mode 100644 miniprogram/components/shape-card-v1/shape-card copy.less create mode 100644 miniprogram/components/shape-card-v1/shape-card.json create mode 100644 miniprogram/components/shape-card-v1/shape-card.less create mode 100644 miniprogram/components/shape-card-v1/shape-card.ts create mode 100644 miniprogram/components/shape-card-v1/shape-card.wxml diff --git a/miniprogram/assets/shapes/半圆.svg b/miniprogram/assets/shapes/半圆.svg new file mode 100644 index 0000000..0fa32f5 --- /dev/null +++ b/miniprogram/assets/shapes/半圆.svg @@ -0,0 +1,4 @@ + + + + diff --git a/miniprogram/components/shape-card-v1/shape-card copy.less b/miniprogram/components/shape-card-v1/shape-card copy.less new file mode 100644 index 0000000..9f139cd --- /dev/null +++ b/miniprogram/components/shape-card-v1/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-v1/shape-card.json b/miniprogram/components/shape-card-v1/shape-card.json new file mode 100644 index 0000000..44daf20 --- /dev/null +++ b/miniprogram/components/shape-card-v1/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-v1/shape-card.less b/miniprogram/components/shape-card-v1/shape-card.less new file mode 100644 index 0000000..70fd139 --- /dev/null +++ b/miniprogram/components/shape-card-v1/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-v1/shape-card.ts b/miniprogram/components/shape-card-v1/shape-card.ts new file mode 100644 index 0000000..1450f19 --- /dev/null +++ b/miniprogram/components/shape-card-v1/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-v1/shape-card.wxml b/miniprogram/components/shape-card-v1/shape-card.wxml new file mode 100644 index 0000000..f3e8cd7 --- /dev/null +++ b/miniprogram/components/shape-card-v1/shape-card.wxml @@ -0,0 +1,19 @@ + + + + + + + {{ name }} + + + + + diff --git a/miniprogram/components/shape-card/shape-card.less b/miniprogram/components/shape-card/shape-card.less index 70fd139..bb7b411 100644 --- a/miniprogram/components/shape-card/shape-card.less +++ b/miniprogram/components/shape-card/shape-card.less @@ -1,58 +1,43 @@ .shape-card { position: relative; - width: 240rpx; - height: 240rpx; + width: 186rpx; + // height: 260rpx; 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); + border: 1rpx solid #e8e8e8; + box-shadow: 0rpx 16rpx 24rpx rgba(184, 210, 188, 0.3); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 16rpx 0; + box-sizing: border-box; - .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-img { + width: 140rpx; + height: 140rpx; + display: block; } - .shape-card-footer { - margin-inline: 32rpx; - padding-block: 16rpx; - display: flex; - justify-content: start; - align-items: center; - border-top: 1rpx solid #CCCCCC; + .divider { + width: 150rpx; + height: 1rpx; + background-color: #ddd; + margin-block: 16rpx; + } - .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; - } + .shape-color { + width: 72rpx; + height: 72rpx; + border-radius: 50%; + border: 1rpx solid #141414; + background-color: skyblue; } .delete-icon { position: absolute; - top: -18rpx; - right: -18rpx; - - .delete-icon-inner { - color: rgba(255, 0, 0, 0.7); - } + top: -16rpx; + right: -16rpx; + color: rgba(255, 0, 0); } } \ No newline at end of file diff --git a/miniprogram/components/shape-card/shape-card.ts b/miniprogram/components/shape-card/shape-card.ts index 1450f19..68050c6 100644 --- a/miniprogram/components/shape-card/shape-card.ts +++ b/miniprogram/components/shape-card/shape-card.ts @@ -7,11 +7,7 @@ Component({ type: Number, value: 0, }, - img: { - type: String, - value: '', - }, - name: { + svg: { type: String, value: '', }, @@ -20,10 +16,50 @@ Component({ value: '', }, }, + /** + * 组件的初始数据 + */ + data: { + svgDataUri: '', + }, + /** + * 组件生命周期 + */ + lifetimes: { + attached() { + this.generateSvgDataUri(); + }, + }, + /** + * 监听属性变化 + */ + observers: { + 'svg, color': function () { + this.generateSvgDataUri(); + } + }, /** * 组件的方法列表 */ methods: { + /** + * 生成完整的 SVG Data URI + */ + generateSvgDataUri() { + const { svg, color } = this.data; + if (!svg) return; + + // 创建完整的 SVG 字符串，替换填充颜色 + const coloredSvg = svg.replace(/fill="#ff0000"/g, `fill="${color || '#ff0000'}"`); + const completeSvg = `${coloredSvg}`; + + // 转换为 Data URI + const svgDataUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(completeSvg)}`; + + this.setData({ + svgDataUri: svgDataUri + }); + }, onDelete() { const { key } = this.data; this.triggerEvent('onDelete', { key }); diff --git a/miniprogram/components/shape-card/shape-card.wxml b/miniprogram/components/shape-card/shape-card.wxml index f3e8cd7..a1aee73 100644 --- a/miniprogram/components/shape-card/shape-card.wxml +++ b/miniprogram/components/shape-card/shape-card.wxml @@ -1,19 +1,14 @@ - - - - - - {{ name }} - - - - + + + + diff --git a/miniprogram/constants/shapes.ts b/miniprogram/constants/shapes.ts index 0bf16f6..554958f 100644 --- a/miniprogram/constants/shapes.ts +++ b/miniprogram/constants/shapes.ts @@ -1,57 +1,153 @@ +/** + * 钝角三角形 + * + + + * + */ + const SHAPES = [ + // 三角形 + { + id: 'obtuse-triangle', + name: '钝角三角形', + type: 'triangle', + // svg: '', + svg: '', + drawFunction: 'drawTriangle', + }, + { + id: 'right-triangle', + name: '直角三角形', + type: 'triangle', + svg: '', + drawFunction: 'drawTriangle', + }, + { + id: 'acute-triangle', + name: '等腰三角形', + type: 'triangle', + // svg: '', + svg: '', + drawFunction: 'drawTriangle', + }, + // 四边形 + { + id: 'square', + name: '正方形', + type: 'rect', + // svg: '', + svg: '', + drawFunction: 'drawSquare', + }, + { + id: 'rectangle', + name: '长方形', + type: 'rect', + // svg: '', + svg: '', + drawFunction: 'drawRectangle', + }, + { + id: 'rectangle', + name: '平行四边形', + type: 'rect', + // svg: '', + svg: '', + drawFunction: 'drawParallelogram', + }, + { + id: 'parallelogram', + name: '菱形', + type: 'rect', + // svg: '', + svg: '', + drawFunction: 'drawParallelogram', + }, + { + id: 'trapezoid', + name: "梯形", + type: 'rect', + // svg: '', + svg: '', + drawFunction: 'drawTrapezoid', + }, + // 五边形 + { + id: 'pentagon', + name: '五边形', + type: 'rect', + // svg: '', + svg: '', + drawFunction: 'drawHexagon', + }, + + // 六边形 + { + id: 'hexagon', + name: '六边形', + type: 'rect', + svg: '', + drawFunction: 'drawHexagon', + }, + // 五角星 + { + id: 'pentagram', + name: '五角星', + type: 'rect', + svg: '', + drawFunction: 'drawPentagram', + }, + // 心形 + { + id: 'heart', + name: '心形', + type: 'rect', + svg: '', + drawFunction: 'drawHeart', + }, + // 圆形 { id: 'circle', name: '圆形', - img: '/assets/shapes/circle.webp', - color: '#FF0000', type: 'circle', - svg: '', + 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', + id: 'ellipse', + name: '椭圆', type: 'circle', - svg: '', - drawFunction: 'drawCircle', + svg: '', + drawFunction: 'drawEllipse', }, + // 半圆 { - 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', + id: 'semicircle', + name: '半圆', type: 'circle', - svg: '', - drawFunction: 'drawCircle', + // svg: '', + svg: '', + drawFunction: 'drawSemicircle', }, + // 扇形 { - id: 'square', - name: '正方形', - img: '/assets/shapes/square.webp', - color: '#0000FF', - type: 'rect', - svg: '', - drawFunction: 'drawSquare', + id: 'sector', + name: '扇形', + type: 'circle', + // svg: '', + svg: '', + drawFunction: 'drawSector', + }, + // 圆环 + { + id: 'ring', + name: '圆环', + type: 'circle', + // svg: '', + svg: '', + drawFunction: 'drawRing', }, ]; diff --git a/miniprogram/pages/shape/index.less b/miniprogram/pages/shape/index.less index 2bcb134..a7c37bf 100644 --- a/miniprogram/pages/shape/index.less +++ b/miniprogram/pages/shape/index.less @@ -38,12 +38,8 @@ page { .shape-list { display: flex; flex-wrap: wrap; - gap: 24rpx; // 卡片间距，可调整 - - shape-card { - width: calc(50% - 12rpx); // 两个一行，减去一半的gap - box-sizing: border-box; - margin-bottom: 24rpx; - } + column-gap: 50rpx; + row-gap: 24rpx; + justify-content: flex-start; } } \ No newline at end of file diff --git a/miniprogram/pages/shape/index.wxml b/miniprogram/pages/shape/index.wxml index cd73366..6cd0447 100644 --- a/miniprogram/pages/shape/index.wxml +++ b/miniprogram/pages/shape/index.wxml @@ -25,8 +25,7 @@ wx:for-index="index" wx:key="{{index}}" key="{{index}}" - img="{{ item.img }}" - name="{{ item.name }}" + svg="{{ item.svg }}" color="{{ item.color }}" bind:onDelete="onDelete" bind:onColorTap="onColorTap" />