joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 图形页开发

Browse Source
This commit is contained in:
joey
2025-07-25 17:16:33 +08:00
parent 2e0bae3a64
commit 5ce211ee5a
14 changed files with 282 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/assets/shapes/circle.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

miniprogram/assets/shapes/circle2.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="60" viewBox="0 0 60 60" fill="none">
<path d="M30.5 52C42.3741 52 52 42.3741 52 30.5C52 18.6259 42.3741 9 30.5 9C18.6259 9 9 18.6259 9 30.5C9 42.3741 18.6259 52 30.5 52ZM30.5 10C41.8218 10 51 19.1782 51 30.5C51 41.8218 41.8218 51 30.5 51C19.1782 51 10 41.8218 10 30.5C10 19.1782 19.1782 10 30.5 10Z" fill-rule="evenodd" fill="#000000" >
</path>
<circle cx="30.5" cy="30.5" r="20.5" fill="#FC0000" >
</circle>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 521 B

miniprogram/assets/shapes/square.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 579 B

miniprogram/components/shape-card/shape-card copy.less
+57
View File
@@ -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);
}
}
}
miniprogram/components/shape-card/shape-card.json
+7
View File
@@ -0,0 +1,7 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"van-icon": "@vant/weapp/icon/index"
}
}
miniprogram/components/shape-card/shape-card.less
+58
View File
@@ -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);
}
}
}
miniprogram/components/shape-card/shape-card.ts
+36
View File
@@ -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 });
},
},
});
miniprogram/components/shape-card/shape-card.wxml
+19
View File
@@ -0,0 +1,19 @@
<view class="shape-card">
<view class="shape-card-img-wrapper">
<image src="{{ img }}" class="shape-card-img" />
</view>
<view class="shape-card-footer">
<view
class="shape-card-footer-color"
style="background-color: {{ color }}"
bind:tap="onColorTap"></view>
<view class="shape-card-footer-name">{{ name }}</view>
</view>
<view class="delete-icon" bindtap="onDelete">
<van-icon
class-prefix="toy-icon"
name="error-o"
custom-class="delete-icon-inner"
size="48rpx" />
</view>
</view>
miniprogram/constants/shapes.ts
+58
View File
@@ -0,0 +1,58 @@
const SHAPES = [
{
id: 'circle',
name: '圆形',
img: '/assets/shapes/circle.webp',
color: '#FF0000',
type: 'circle',
svg: '<circle cx="50" cy="50" r="40" stroke="#333" stroke-width="2" fill="none"/>',
drawFunction: 'drawCircle',
},
{
id: 'square',
name: '正方形',
img: '/assets/shapes/square.webp',
color: '#0000FF',
type: 'rect',
svg: '<rect x="10" y="10" width="80" height="80" stroke="#333" stroke-width="2" fill="none"/>',
drawFunction: 'drawSquare',
},
{
id: 'circle2',
name: '圆形',
img: '/assets/shapes/circle2.svg',
color: '#FF0000',
type: 'circle',
svg: '<circle cx="50" cy="50" r="40" stroke="#333" stroke-width="2" fill="none"/>',
drawFunction: 'drawCircle',
},
{
id: 'square',
name: '正方形',
img: '/assets/shapes/square.webp',
color: '#0000FF',
type: 'rect',
svg: '<rect x="10" y="10" width="80" height="80" stroke="#333" stroke-width="2" fill="none"/>',
drawFunction: 'drawSquare',
},
{
id: 'circle',
name: '圆形',
img: '/assets/shapes/circle.webp',
color: '#FF0000',
type: 'circle',
svg: '<circle cx="50" cy="50" r="40" stroke="#333" stroke-width="2" fill="none"/>',
drawFunction: 'drawCircle',
},
{
id: 'square',
name: '正方形',
img: '/assets/shapes/square.webp',
color: '#0000FF',
type: 'rect',
svg: '<rect x="10" y="10" width="80" height="80" stroke="#333" stroke-width="2" fill="none"/>',
drawFunction: 'drawSquare',
},
];
export { SHAPES };
miniprogram/pages/shape/index.json
+2 -1
View File
@@ -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"
}
}
miniprogram/pages/shape/index.less
+13 -1
View File
@@ -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;
}
}
}
miniprogram/pages/shape/index.ts
+4 -4
View File
@@ -1,11 +1,11 @@
import { SHAPES } from '../../constants/shapes';
Page({
data: {
shapeList: [],
shapeList: SHAPES,
},
onLoad() {
this.setData({
shapeList: [],
});
},
});
miniprogram/pages/shape/index.wxml
+13
View File
@@ -18,5 +18,18 @@
</toy-button>
</view>
<van-divider />
<view class="shape-list">
<shape-card
wx:for="{{ shapeList }}"
wx:for-item="item"
wx:for-index="index"
wx:key="{{index}}"
key="{{index}}"
img="{{ item.img }}"
name="{{ item.name }}"
color="{{ item.color }}"
bind:onDelete="onDelete"
bind:onColorTap="onColorTap" />
</view>
</view>
</view>