随机数页面美化

commons/basic/src/main/ets/apis/YTUserRequest.ets

@@ -351,6 +351,112 @@ export class YTUserRequest extends YTRequest {
   }
 
 
+  //转盘,重复
+  static allowRepeat(params:ReqString, success: (res: string) => void, fail: (err: Error) => void) {
+    YTRequest.post<ReqString, ReqString>(`/decisionTurntableConfig/allowRepeat`,
+      { 'id': params['id'],
+        'allowRepeat':params['allowRepeat']
+      }
+      )
+      .then(res => {
+
+        //data:"只能传0，1",不能为0
+        success(res['data'])
+      })
+      .catch((err: Error) => {
+        IBestToast.show({
+          message:err.message,
+          duration:500
+        })
+      })
+  }
+  //旋转时长修改
+  static rotateTime(params:ReqString, success: (res: string) => void, fail: (err: Error) => void) {
+    YTRequest.post<ReqString, ReqString>(`/decisionTurntableConfig/rotateTime`,
+      { 'id': params['id'],
+        'spinDuration':params['spinDuration']
+      }
+    )
+      .then(res => {
+
+        //data:"6",不能为0 一样
+        success(res['data'])
+      })
+      .catch((err: Error) => {
+        IBestToast.show({
+          message:err.message,
+          duration:500
+        })
+      })
+  }
+
+  //转盘选项修改
+
+  static updateBach(params:ReqString, success: (res: string) => void, fail: (err: Error) => void) {
+    YTRequest.post<ReqString, ReqString>(`/decisionTurntableOption/updateBach`,
+      { 'id': params['id'],
+        'spinDuration':params['spinDuration']
+      }
+    )
+      .then(res => {
+
+        //data:"6",不能为0 一样
+        success(res['data'])
+      })
+      .catch((err: Error) => {
+        IBestToast.show({
+          message:err.message,
+          duration:500
+        })
+      })
+  }
+
+
+  //重置选项
+  // static reset(params:ReqString, success: (res: string) => void, fail: (err: Error) => void) {
+  //   YTRequest.post<ReqString, ReqString>(`/decisionTurntableOption/reset`,
+  //     { 'turntableId': params['turntableId'],
+  //     }
+  //   )
+  //     .then(res => {
+  //       //data：true
+  //       //操作成功
+  //
+  //     })
+  //     .catch((err: Error) => {
+  //       IBestToast.show({
+  //         message:err.message,
+  //         duration:500
+  //       })
+  //     })
+  // }
+
+  //转一转
+  static bigWheelSave(params:ReqString, success: (res: string) => void, fail: (err: Error) => void) {
+    YTRequest.post<ReqString, ReqString>(`/decisionTurntableRecord/save`,
+      { 'turntableId': params['turntableId'],
+        'optionId':params['optionId'],
+        // 'optionName':params['optionName'],
+      }
+    )
+      .then(res => {
+        //data：true
+        //操作成功
+
+      })
+      .catch((err: Error) => {
+        IBestToast.show({
+          message:err.message,
+          duration:500
+        })
+      })
+  }
+
+
+
+
+
+
 
 
 }

features/feature/src/main/ets/utils/Sector.ets

@@ -5,6 +5,8 @@ export struct Sector {
   @Prop angle: number; // 扇形的角度
   @Prop color: string; // 扇形的颜色
 
+
+
   // 创建扇形路径的函数
   createSectorPath(radius: number, angle: number): string {
     const centerX = radius / 2; // 计算扇形中心的X坐标
@@ -12,7 +14,6 @@ export struct Sector {
     const startX = centerX; // 扇形起始点的X坐标
     const startY = centerY - radius; // 扇形起始点的Y坐标
     const halfAngle = angle / 4; // 计算半个角度
-
     // 计算扇形结束点1的坐标
     const endX1 = centerX + radius * Math.cos((halfAngle * Math.PI) / 180);
     const endY1 = centerY - radius * Math.sin((halfAngle * Math.PI) / 180);
@@ -35,6 +36,7 @@ export struct Sector {
     return pathCommands; // 返回路径命令
   }
 
+
   // 构建扇形组件
   build() {
     Stack() {

features/feature/src/main/ets/view/BigWheelView.ets

@@ -1,6 +1,6 @@
-import { YTAvoid, YTHeader } from 'basic'
+import { YTAvoid, YTHeader, yTRouter } from 'basic'
 import { Cell, Sector } from '../utils/Sector';
-import { CounterComponent, CounterType } from '@kit.ArkUI';
+import { CounterComponent, CounterType, promptAction } from '@kit.ArkUI';
 
 
 @Builder
@@ -15,12 +15,16 @@ function BigWheelViewBuilder(){
 struct BigWheelView{
   @StorageProp(YTAvoid.SAFE_TOP_KEY) safeBottom: number = 0
 
+
   @State cells: Cell[] = []; // 存储单元格的数组
+  //随着每次操作，需要触发画布重新画
+  @Watch('drawCircleWithCustomRadii')
+  @State changeCanvas:number=0
   @State wheelWidth: number = 400; // 转盘的宽度
   @State currentAngle: number = 0; // 当前转盘的角度
   @State selectedName: string = ""; // 选中的名称
   @State isRepeat:boolean=false
-  @Watch('xxx')
+  @Watch('filter')
   @State selected:Cell[]=[]
   @State UnSelected:Cell[]=[]
   @State randomAngle:number=0
@@ -30,21 +34,37 @@ struct BigWheelView{
   @State spinDurationTime:number=this.spinDuration/1000
   //是否显示设置界面
   @State isShow:boolean=false
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+  //转盘选中判断
+  @State currSelectNumber:number=3
+  @State number:number=4 //转盘数量
+
+  //打开半模态命名模态
+  @State isshowRename:boolean=false
 
   colorPalette: string[] = [ // 颜色调色板
-    "#26c2ff",
-    "#978efe",
-    "#c389fe",
-    "#ff85bd",
-    "#ff7051",
-    "#fea800",
-    "#ffcf18",
-    "#a9c92a",
-    "#fea800",
-    "#ffcf18",
-    "#a9c92a"
+    // "#26c2ff",
+    // "#978efe",
+    // "#c389fe",
+    // "#ff85bd",
+    // "#ff7051",
+    // "#fea800",
+    // "#ffcf18",
+    // "#a9c92a",
+    // "#fea800",
+    // "#ffcf18",
+    // "#a9c92a"
+
+    "#fff",
+    "#fff",
+    "#fff",
+    "#fff",
+    "#fff",
+    "#fff",
   ];
-  xxx(){
+  filter(){
     //每次选中的数组有变化，那就要重新过滤
     this.UnSelected = this.cells.filter(item =>
     !this.selected.some(selected => selected.id === item.id));
@@ -62,9 +82,9 @@ struct BigWheelView{
   aboutToAppear(): void {
     // 初始化单元格
     this.cells.push(new Cell(1,1, "转盘1", this.colorPalette[this.colorIndex++ % this.colorPalette.length]));
-    this.cells.push(new Cell(2,2, "转盘2", this.colorPalette[this.colorIndex++ % this.colorPalette.length]));
+    this.cells.push(new Cell(2,1, "转盘2", this.colorPalette[this.colorIndex++ % this.colorPalette.length]));
     this.cells.push(new Cell(3,1, "转盘3", this.colorPalette[this.colorIndex++ % this.colorPalette.length]));
-    this.cells.push(new Cell(4,4, "转盘4", this.colorPalette[this.colorIndex++ % this.colorPalette.length]));
+    this.cells.push(new Cell(4,1, "转盘4", this.colorPalette[this.colorIndex++ % this.colorPalette.length]));
     this.UnSelected=this.cells
 
     this.calculateAngles(); // 计算角度
@@ -85,6 +105,8 @@ struct BigWheelView{
       cell.angleEnd = cumulativeAngle; // 设置结束角度
       cell.rotate = cumulativeAngle - (cell.angle / 2); // 计算旋转角度
     });
+    //触发画布
+    this.changeCanvas++
   }
 
   private calculateNoSelectedAngles(){
@@ -103,313 +125,512 @@ struct BigWheelView{
     // }
   }
 
+  private drawCircleWithCustomRadii() {
+    // this.context.clearRect(0,0,0,0)
+    this.context.clearRect(0, 0, 220, 220); // 清空Canvas的内容
+    const centerX = 110 // 圆心x坐标
+    const centerY = 110 // 圆心y坐标
+    const radius = 110  // 圆半径
+    // 根据自定义角度数组绘制半径线
+    this.cells.forEach(angle => {
+      // 将角度转换为弧度（Canvas使用弧度制）
+      const radians = (angle.angleEnd-90) * Math.PI / 180
+
+      // 计算半径线终点坐标
+      const endX = centerX + radius * Math.cos(radians)
+      const endY = centerY + radius * Math.sin(radians)
+
+      // 绘制半径线
+      this.context.beginPath()
+      this.context.moveTo(centerX, centerY)
+      this.context.lineTo(endX, endY)
+      this.context.strokeStyle = '#efd4f9' // 红色半径线
+      this.context.lineWidth = 1.5
+      this.context.stroke()
+
+      // // 标注角度值（修正后的文本绘制方式）
+      // this.context.font = '12px sans-serif'
+      // this.context.fillStyle = '#000000'
+      // this.context.textAlign = 'center'
+      // this.context.textBaseline = 'middle'
+
+      // // 文本位置稍微向外偏移
+      // const textRadius = radius + 15
+      // const textX = centerX + textRadius * Math.cos(radians)
+      // const textY = centerY + textRadius * Math.sin(radians)
+
+      // 使用fillText绘制文本
+      // this.context.fillText(`${angle}°`, textX, textY)
+    })
 
-  build() {
-    Stack({alignContent:Alignment.Top}){
-      Column() {
-        YTHeader({ title: '大转盘' })
+  }
 
-        Row() {
-          Text('转盘').fontSize(20).fontColor("#0b0e15"); // 显示转盘标题
-        }.width('100%').height(44).justifyContent(FlexAlign.Center); // 设置行的宽度和高度
+  build() {
+    Stack({alignContent:Alignment.Center}){
+      Stack({alignContent:Alignment.Top}){
+        Column() {
+          // YTHeader({ title: '大转盘', })
+          Row(){
+            Image($r('[basic].media.ic_back'))
+              .width(24)
+              .margin({ left: 16 })
+              .onClick(()=>{
+                yTRouter.routerBack()
+              })
+            Text('大转盘')
+              .fontSize(18)
+              .fontWeight(700)
+              .fontColor(Color.Black)
+
+            Image($r('[basic].media.Subtract'))
+              .width(24)
+              .margin({right: 16 })
+              .onClick(()=>{
+                this.isShow=true
+              })
+          }.width('100%')
+          .height(84)
+          .justifyContent(FlexAlign.SpaceBetween)
+          .padding({ top: 44 })
+          .margin({bottom:20})
 
-        // 显示当前状态
-        Text(this.isAnimating ? '旋转中' : `${this.selectedName}`).fontSize(20).fontColor("#0b0e15").height(40);
+          Row(){
+            Column(){}.width(24).height(24)
+            // Image($r('[basic].media.voicemuisc')).width(24)
+            Text('重置').fontColor('rgba(0, 0, 0, 0.65)')
+          }.width('100%')
+          .justifyContent(FlexAlign.SpaceBetween)
+          .padding({left:30,right:30})
+
+          // 显示当前状态
+          Text(this.isAnimating ? '旋转中' : `${this.selectedName}`)
+            .fontSize(20)
+            .fontColor("#0b0e15")
+            .height(40)
+            .margin({top:100})
 
-        Stack() {
           Stack() {
-            // 遍历每个单元格并绘制扇形
-            ForEach(this.cells, (cell: Cell) => {
-              Stack() {
-                Sector({ radius: lpx2px(this.wheelWidth) / 2, angle: cell.angle, color: cell.color }); // 创建扇形
-                Text(cell.title).fontColor(Color.White).margin({ bottom: `${this.wheelWidth / 1.4}lpx` }); // 显示单元格标题
-              }.width('100%').height('100%').rotate({ angle: cell.rotate }); // 设置宽度和高度，并旋转
-            });
-          }
-          .borderRadius('50%') // 设置圆角
-          .backgroundColor(Color.Gray) // 设置背景颜色
-          .width(`${this.wheelWidth}lpx`) // 设置转盘宽度
-          .height(`${this.wheelWidth}lpx`) // 设置转盘高度
-          .rotate({ angle: this.currentAngle }); // 旋转转盘
-
-          // 创建指针
-          // Image({ width: 20, height: 10 })
-          //   .points([[0, 0], [10, -20], [20, 0]]) // 设置指针的点
-          //   .fill("#d72b0b") // 设置指针颜色
-          //   .height(20) // 设置指针高度
-          //   .margin({ bottom: '140lpx' }); // 设置指针底部边距
-
-          // 创建开始按钮
-          // Button('开始')
-          //   .fontColor("#c53a2c") // 设置按钮字体颜色
-          //   .borderWidth(10) // 设置按钮边框宽度
-          //   .borderColor("#dd2218") // 设置按钮边框颜色
-          //   .backgroundColor("#fde427") // 设置按钮背景颜色
-          //   .width('200lpx') // 设置按钮宽度
-          //   .height('200lpx') // 设置按钮高度
-          //   .borderRadius('50%') // 设置按钮为圆形
-          //   .clickEffect({ level: ClickEffectLevel.LIGHT }) // 设置点击效果
-          Image($r('[basic].media.zhizheng'))
-            .width('70lpx') // 设置按钮宽度
-            .height('70lpx') // 设置按钮高度
-            .objectFit(ImageFit.Contain)
-            .clickEffect({ level: ClickEffectLevel.LIGHT }) // 设置点击效果
-            .onClick(() => { // 点击按钮时的回调函数
-              if (this.isAnimating) { // 如果正在动画中，返回
-                return;
-              }
-              if(this.selected.length==this.cells.length){
-                return
-              }
-              //如果都已经被选了，则不能再转了
-              this.calculateNoSelectedAngles()
-              this.selectedName = ""; // 清空选中的名称
-              this.isAnimating = true; // 设置动画状态为正在动画
-              animateTo({ // 开始动画
-                duration: this.spinDuration, // 动画持续时间为5000毫秒
-                curve: Curve.EaseInOut, // 动画曲线为缓入缓出
-                onFinish: () => { // 动画完成后的回调
-                  this.currentAngle %= 360; // 保持当前角度在0到360之间
-                  for (const cell of this.cells) { // 遍历每个单元格
-                    // 检查当前角度是否在单元格的角度范围内
-                    if (360 - this.currentAngle >= cell.angleStart && 360 - this.currentAngle <= cell.angleEnd) {
-                      this.selected.push(cell)
-                      //这里需要下次点击的时候
-                      cell.color='#202020'
-                      this.selectedName = cell.title; // 设置选中的名称为当前单元格的标题
-                      break; // 找到后退出循环
+            Stack() {
+              // 遍历每个单元格并绘制扇形
+              ForEach(this.cells, (cell: Cell) => {
+                Stack() {
+                  Sector({ radius: lpx2px(this.wheelWidth) / 2, angle: cell.angle, color: cell.color }); // 创建扇形
+                  Text(cell.title).fontColor(Color.Black).fontWeight(700).margin({ bottom: `${this.wheelWidth / 1.4}lpx` }); // 显示单元格标题
+                }.width('100%').height('100%').rotate({ angle: cell.rotate }); // 设置宽度和高度，并旋转
+              });
+            }
+            .borderRadius('50%') // 设置圆角
+            // .backgroundColor(Color.Gray) // 设置背景颜色
+            .width(`${this.wheelWidth}lpx`) // 设置转盘宽度
+            .height(`${this.wheelWidth}lpx`) // 设置转盘高度
+            .rotate({ angle: this.currentAngle }); // 旋转转盘
+
+            // 创建指针
+            // Image({ width: 20, height: 10 })
+            //   .points([[0, 0], [10, -20], [20, 0]]) // 设置指针的点
+            //   .fill("#d72b0b") // 设置指针颜色
+            //   .height(20) // 设置指针高度
+            //   .margin({ bottom: '140lpx' }); // 设置指针底部边距
+
+            Column() {
+              Canvas(this.context)
+                .width(220)
+                .height(220)
+                .borderRadius('50%')
+                .backgroundColor(Color.Transparent)
+                .onReady(() => {
+                  this.drawCircleWithCustomRadii()
+                })
+            } .width(`${this.wheelWidth}lpx`) // 设置转盘宽度
+            .height(`${this.wheelWidth}lpx`) // 设置转盘高度
+            .justifyContent(FlexAlign.Center)
+            .rotate({ angle: this.currentAngle }) // 旋转转盘
+
+
+
+            // 创建开始按钮
+            // Button('开始')
+            //   .fontColor("#c53a2c") // 设置按钮字体颜色
+            //   .borderWidth(10) // 设置按钮边框宽度
+            //   .borderColor("#dd2218") // 设置按钮边框颜色
+            //   .backgroundColor("#fde427") // 设置按钮背景颜色
+            //   .width('200lpx') // 设置按钮宽度
+            //   .height('200lpx') // 设置按钮高度
+            //   .borderRadius('50%') // 设置按钮为圆形
+            //   .clickEffect({ level: ClickEffectLevel.LIGHT }) // 设置点击效果
+            Image($r('[basic].media.zhizheng'))
+              .width('70lpx') // 设置按钮宽度
+              .height('70lpx') // 设置按钮高度
+              .objectFit(ImageFit.Contain)
+              .clickEffect({ level: ClickEffectLevel.LIGHT }) // 设置点击效果
+              .onClick(() => { // 点击按钮时的回调函数
+                if (this.isAnimating) { // 如果正在动画中，返回
+                  return;
+                }
+                if(this.selected.length==this.cells.length){
+                  return
+                }
+                //如果都已经被选了，则不能再转了
+                this.calculateNoSelectedAngles()
+                this.selectedName = ""; // 清空选中的名称
+                this.isAnimating = true; // 设置动画状态为正在动画
+                animateTo({ // 开始动画
+                  duration: this.spinDuration, // 动画持续时间为5000毫秒
+                  curve: Curve.EaseInOut, // 动画曲线为缓入缓出
+                  onFinish: () => { // 动画完成后的回调
+                    this.currentAngle %= 360; // 保持当前角度在0到360之间
+                    for (const cell of this.cells) { // 遍历每个单元格
+                      // 检查当前角度是否在单元格的角度范围内
+                      if (360 - this.currentAngle >= cell.angleStart && 360 - this.currentAngle <= cell.angleEnd) {
+                        this.selected.push(cell)
+                        //这里需要下次点击的时候
+                        cell.color='#202020'
+                        this.selectedName = cell.title; // 设置选中的名称为当前单元格的标题
+                        break; // 找到后退出循环
+                      }
                     }
-                  }
-                  this.isAnimating = false; // 设置动画状态为未动画
-                },
-              }, () => { // 动画进行中的回调
-                //在这里判断
-                // this.randomAngle=Math.floor(Math.random()*360)
-                // this.currentAngle += (360 * this.spinDuration/1000 + Math.floor(Math.random() * 360)); // 更新当前角度，增加随机旋转
-                //在这里算已经选过的，不能在指了
+                    this.isAnimating = false; // 设置动画状态为未动画
+                  },
+                }, () => { // 动画进行中的回调
+                  //在这里判断
+                  // this.randomAngle=Math.floor(Math.random()*360)
+                  // this.currentAngle += (360 * this.spinDuration/1000 + Math.floor(Math.random() * 360)); // 更新当前角度，增加随机旋转
+                  //在这里算已经选过的，不能在指了
 
-                // this.currentAngle += (360 * this.spinDuration/1000 + Math.floor(Math.random() * 360)); // 更新当前角度，增加随机旋转
+                  // this.currentAngle += (360 * this.spinDuration/1000 + Math.floor(Math.random() * 360)); // 更新当前角度，增加随机旋转
 
-                // promptAction.showToast({
-                //   message:this.randomAngle.toString()
-                // })
-                this.currentAngle += (360 * this.spinDuration/1000)+this.randomAngle
+                  // promptAction.showToast({
+                  //   message:this.randomAngle.toString()
+                  // })
+                  this.currentAngle += (360 * this.spinDuration/1000)+this.randomAngle
 
 
 
+                });
               });
-            });
-        }
-        .width(`${this.wheelWidth+26}lpx`)
-        .height(`${this.wheelWidth+26}lpx`)
-        .backgroundImage($r('[basic].media.xuanzhuankuang'))
-        .backgroundImageSize({width:'100%',height:'100%'})
-        .backgroundImagePosition(Alignment.Center)
-
-        // 创建滚动区域
-        Scroll() {
-          Column() {
-            // 遍历每个单元格，创建输入框和计数器
-            ForEach(this.cells, (item: Cell, index: number) => {
-              Row() {
-                // 创建文本输入框，显示单元格标题
-                TextInput({ text: item.title })
-                  .layoutWeight(1) // 设置输入框占据剩余空间
-                  .onChange((value) => { // 输入框内容变化时的回调
-                    item.title = value; // 更新单元格标题
-                  });
-                // 创建计数器组件
-                CounterComponent({
-                  options: {
-                    type: CounterType.COMPACT, // 设置计数器类型为紧凑型
-                    numberOptions: {
-                      label: `当前占比`, // 设置计数器标签
-                      value: item.proportion, // 设置计数器初始值
-                      min: 1, // 设置最小值
-                      max: 100, // 设置最大值
-                      step: 1, // 设置步长
-                      onChange: (value: number) => { // 计数器值变化时的回调
-                        item.proportion = value; // 更新单元格的比例
-                        this.calculateAngles(); // 重新计算角度
-                      }
-                    }
+          }
+          .width(`${this.wheelWidth+26}lpx`)
+          .height(`${this.wheelWidth+26}lpx`)
+          .backgroundImage($r('[basic].media.xuanzhuankuang'))
+          .backgroundImageSize({width:'100%',height:'100%'})
+          .backgroundImagePosition(Alignment.Center)
+
+          // // 创建滚动区域
+          // Scroll() {
+          //   Column() {
+          //     // 遍历每个单元格，创建输入框和计数器
+          //     ForEach(this.cells, (item: Cell, index: number) => {
+          //       Row() {
+          //         // 创建文本输入框，显示单元格标题
+          //         TextInput({ text: item.title })
+          //           .layoutWeight(1) // 设置输入框占据剩余空间
+          //           .onChange((value) => { // 输入框内容变化时的回调
+          //             item.title = value; // 更新单元格标题
+          //           });
+          //         // 创建计数器组件
+          //         CounterComponent({
+          //           options: {
+          //             type: CounterType.COMPACT, // 设置计数器类型为紧凑型
+          //             numberOptions: {
+          //               label: `当前占比`, // 设置计数器标签
+          //               value: item.proportion, // 设置计数器初始值
+          //               min: 1, // 设置最小值
+          //               max: 100, // 设置最大值
+          //               step: 1, // 设置步长
+          //               onChange: (value: number) => { // 计数器值变化时的回调
+          //                 item.proportion = value; // 更新单元格的比例
+          //                 this.calculateAngles(); // 重新计算角度
+          //               }
+          //             }
+          //           }
+          //         });
+          //         // 创建删除按钮
+          //         Button('删除').onClick(() => {
+          //           this.cells.splice(index, 1); // 从单元格数组中删除当前单元格
+          //           this.calculateAngles(); // 重新计算角度
+          //         });
+          //       }.width('100%').justifyContent(FlexAlign.SpaceBetween) // 设置行的宽度和内容对齐方式
+          //       .padding({ left: 40, right: 40 }); // 设置左右内边距
+          //     });
+          //   }.layoutWeight(1); // 设置滚动区域占据剩余空间
+          // }.layoutWeight(1) // 设置滚动区域占据剩余空间
+          // .margin({ top: 20, bottom: 20 }) // 设置上下外边距
+          // .align(Alignment.Top); // 设置对齐方式为顶部对齐
+
+          Button('转一转').fontColor(Color.White)
+            .backgroundColor('#fd54e3').width('70%')
+            .height(44).borderRadius(20)
+            .margin({top:107,bottom:48})
+            .onClick(()=>{
+            })
+          Row({space:15}) {
+            ForEach([2,3,4,5],(item:number,index:number)=>{
+              Text((item+1).toString())
+                .width(40)
+                .height(40)
+                .textAlign(TextAlign.Center)
+                .border({width:1,color:'#000000'})
+                .borderRadius('50%')
+                .backgroundColor(this.currSelectNumber==index+2?'#bff2ff':'#f2f2f2')
+                .onClick(()=>{
+                  this.currSelectNumber=index
+                  this.number=item+1
+                  this.cells=[]
+                  for(let i=0;i<this.number;i++){
+                    this.cells.push(new Cell(i+1,1, "转盘"+(i+1), this.colorPalette[i]));
                   }
-                });
-                // 创建删除按钮
-                Button('删除').onClick(() => {
-                  this.cells.splice(index, 1); // 从单元格数组中删除当前单元格
                   this.calculateAngles(); // 重新计算角度
-                });
-              }.width('100%').justifyContent(FlexAlign.SpaceBetween) // 设置行的宽度和内容对齐方式
-              .padding({ left: 40, right: 40 }); // 设置左右内边距
-            });
-          }.layoutWeight(1); // 设置滚动区域占据剩余空间
-        }.layoutWeight(1) // 设置滚动区域占据剩余空间
-        .margin({ top: 20, bottom: 20 }) // 设置上下外边距
-        .align(Alignment.Top); // 设置对齐方式为顶部对齐
-
-        Row(){
-          ForEach([2,3,4,5,6],(item:number,index)=>{
-            Text((item).toString()).width(20).fontColor(Color.Red).onClick(()=>{
-              //如果当前内容
-              // if(this.cells.length>(item+1)){
-              //
-              //
-              // }
-              this.cells=[]
-              for(let i=0;i<item;i++){
-                this.cells.push(new Cell(i+1,1, "转盘"+(i+1), this.colorPalette[i]));
-              }
-              this.calculateAngles(); // 重新计算角度
 
 
+                })
             })
-          })
-        }
 
-        Text('旋转秒数').fontColor(Color.Black)
-        CounterComponent({
-          options: {
-            type: CounterType.COMPACT, // 设置计数器类型为紧凑型
-            numberOptions: {
-              value: this.spinDuration/1000, // 设置计数器初始值 5
-              min: 1, // 设置最小值
-              max: 100, // 设置最大值
-              step: 1, // 设置步长
-              onChange: (value: number) => { // 计数器值变化时的回调
-                this.spinDuration = value*1000;
-                // this.calculateAngles(); // 重新计算角度
-              }
-            }
+            Row(){
+              Image($r('[basic].media.zidingyi')).width(16)
+              Text('命名').fontSize(12).fontColor(Color.White)
+            }.width(64)
+            .height(40)
+            .borderRadius(20)
+            .backgroundColor('rgba(255, 157, 240, 1)')
+            .justifyContent(FlexAlign.Center)
+            .onClick(()=>{
+              this.isshowRename=true
+            })
+            // .bindSheet($$this.isshowRename,this.reNameBuilder,{
+            //   width:300,
+            //   height:318,
+            //   showClose:false,
+            //   preferType:SheetType.POPUP
+            // }).onClick(()=>{
+            //   //打开半模态
+            //   this.isshowRename=true
+            //   //
+            // })
+
           }
-        }).backgroundColor(Color.White)
 
 
-        Row(){
-          Column(){
-            //是否允许结果重复
-            Button('是否允许结果重复').onClick(()=>{
-              this.isRepeat=!this.isRepeat
-            })
-            Text(this.isRepeat+"")
-          }
+          // Row(){
+          //   ForEach([2,3,4,5,6],(item:number,index)=>{
+          //     Text((item).toString()).width(20).fontColor(Color.Red).onClick(()=>{
+          //       this.cells=[]
+          //       for(let i=0;i<item;i++){
+          //         this.cells.push(new Cell(i+1,1, "转盘"+(i+1), this.colorPalette[i]));
+          //       }
+          //       this.calculateAngles(); // 重新计算角度
+          //
+          //     })
+          //   })
+          // }
 
-          Column(){
-            Button('xxx').onClick(()=>{
-              //
-              // router.pushUrl({
-              //   url:"/pages/Test2ge".slice(1)
-              // })
-            })
 
-            Button('xxxxx').onClick(()=>{
-              // router.pushUrl({
-              //   url:"/pages/Index".slice(1)
-              // })
-            })
-          }
-        }
 
+          // 创建添加新内容按钮
+          // Button('添加新内容').onClick(() => {
+          //   // 向单元格数组中添加新单元格
+          //   // this.cells.push(new Cell(1, "新内容", this.colorPalette[this.colorIndex++ % this.colorPalette.length]));
+          //   this.calculateAngles(); // 重新计算角度
+          // }).margin({ top: 20, bottom: 20 }); // 设置按钮的上下外边距
 
 
 
 
-        // 创建添加新内容按钮
-        Button('添加新内容').onClick(() => {
-          // 向单元格数组中添加新单元格
-          // this.cells.push(new Cell(1, "新内容", this.colorPalette[this.colorIndex++ % this.colorPalette.length]));
-          this.calculateAngles(); // 重新计算角度
-        }).margin({ top: 20, bottom: 20 }); // 设置按钮的上下外边距
 
+        }.width('100%').padding({ bottom: this.safeBottom })
+        .justifyContent(FlexAlign.Center).onClick(()=>{
+          this.isShow=false
+        })
+        if(this.isShow) {
+          Column() {
 
+            //允许结果是否重复
+            Row() {
+              Row({ space: 10 }) {
+                Image($r('[basic].media.qiehuan')).width(24)
+                Text('允许结果重复').fontWeight(700)
+              }
 
+              Row() {
+                Toggle({ type: ToggleType.Switch ,isOn:$$this.isRepeat})
+                  .width(38)
+                  .height(20)
+                  .selectedColor('rgba(253, 84, 227, 1)')  //打开状态下的背景颜色
+                  .switchStyle({
+                    pointRadius: 8, //圆形滑块半径
+                    trackBorderRadius: 14, //滑轨的圆角
+                    pointColor: Color.White, //圆形滑块颜色  switchPointColor不生效
+                    unselectedColor: 'rgba(233, 233, 234, 1)'  //关闭状态的背景颜色
+                  })
+                  .onClick(() => {
+                    this.isRepeat=!this.isRepeat
+                  })
 
+              }
 
-      }.width('100%').padding({ bottom: this.safeBottom })
-      .justifyContent(FlexAlign.Center).onClick(()=>{
-        this.isShow=false
-      })
-      Column(){
+            }
+            .width('100%')
+            .height(40)
+            .backgroundColor(Color.White)
+            .borderRadius(8)
+            .justifyContent(FlexAlign.SpaceBetween)
+            .padding({ left: 12, right: 12 })
+            .alignItems(VerticalAlign.Center)
+
+            Row() {
+              Text('每次转动轮盘可能会随机选中相同的选项').fontSize(12).fontColor('rgba(0, 0, 0, 0.45)')
+
+            }.width('100%')
+            .justifyContent(FlexAlign.Start)
+            .padding({ left: 22 })
+            .margin({ bottom: 25, top: 10 })
+
+            Row() {
+              Row({ space: 10 }) {
+                Image($r('[basic].media.xuanzhuantime')).width(24)
+                Text('旋转时长').fontWeight(700)
+              }
 
-        Row(){
-          Row({space:10}){
-            Image($r('[basic].media.qiehuan')).width(24)
-            Text('允许结果重复').fontWeight(700)
-          }
-          Row(){
-            Toggle({ type: ToggleType.Switch})
-              .width(38)
-              .height(20)
-              .selectedColor('rgba(253, 84, 227, 1)')  //打开状态下的背景颜色
-              .switchStyle({
-                pointRadius: 8, //圆形滑块半径
-                trackBorderRadius: 14, //滑轨的圆角
-                pointColor: Color.White, //圆形滑块颜色  switchPointColor不生效
-                unselectedColor: 'rgba(233, 233, 234, 1)'  //关闭状态的背景颜色
-              })
-              .onClick(()=>{
+              Row() {
 
-              })
+                Counter() {
+                  Text(this.spinDurationTime.toString() + 's').border({ width: 0 })
+                }
+                .onInc(() => {
+                  this.spinDurationTime++
+                  this.spinDuration = this.spinDurationTime * 1000
+                })
+                .onDec(() => {
+                  this.spinDurationTime--
+                  this.spinDuration = this.spinDurationTime * 1000
+                })
+              }
 
-          }
+            }
+            .width('100%')
+            .height(40)
+            .backgroundColor(Color.White)
+            .borderRadius(8)
+            .justifyContent(FlexAlign.SpaceBetween)
+            .padding({ left: 12, right: 12 })
+            .alignItems(VerticalAlign.Center)
 
-        }.width('100%')
-        .height(40)
-        .backgroundColor(Color.White)
-        .borderRadius(8)
-        .justifyContent(FlexAlign.SpaceBetween)
-        .padding({left:12,right:12})
-        .alignItems(VerticalAlign.Center)
-        Row() {
-          Text('每次转动轮盘可能会随机选中相同的选项').fontSize(12).fontColor('rgba(0, 0, 0, 0.45)')
-
-        }.width('100%')
-        .justifyContent(FlexAlign.Start)
-        .padding({left:22})
-        .margin({bottom:25,top:10})
-        Row(){
-          Row({space:10}){
-            Image($r('[basic].media.xuanzhuantime')).width(24)
-            Text('旋转时长').fontWeight(700)
           }
-          Row(){
+          .width('100%')
+          .height(214)
+          .padding({ left: 22, top: 56, right: 22 })
+          .borderRadius({ bottomLeft: 20, bottomRight: 20 })
+          .linearGradient({
+            angle: 135,
+            colors: [
+              ['rgba(239, 144, 237, 1)', 0.2],
+              ['rgba(191, 242, 255, 1)', 1]
+            ]
+          })
+        }
+      }.height('100%')
+      .backgroundImage($r('[basic].media.backimgNumber'))
+      .backgroundImageSize({width:'100%',height:'100%'})
+      if(this.isshowRename) {
 
-            Counter(){
-              Text(this.spinDurationTime.toString()+'s').border({width:0})
+        Column() {
+          Column() {
+            Row() {
+              Text('转盘命名').fontSize(20).fontWeight(500).fontColor('#FF1C1C1C').margin({left:110,right:64,top:24})
+              Column() {
+                Image($r('[basic].media.quxiaocl')).width(10)
+              }.width(24)
+              .height(24)
+              .backgroundColor(Color.White)
+              .justifyContent(FlexAlign.Center)
+              .borderRadius('50%')
+              .onClick(() => {
+                this.isshowRename = false
+              })
+
+            }.width('100%')
+            Column({space:10}){
+              ForEach(this.cells,(item:Cell,index:number)=>{
+
+                reNameInput({
+                  text:item.title,
+                  num:index+1,
+                  inputChange:(value:string)=>{
+                    item.title=value
+                  }
+                })
+              })
             }
-            .onInc(() => {
-              this.spinDurationTime++
-              this.spinDuration=this.spinDurationTime*1000
-            })
-            .onDec(() => {
-              this.spinDurationTime--
-              this.spinDuration=this.spinDurationTime*1000
-            })
-          }
+          }.width(300).height(318)
+          .justifyContent(FlexAlign.Start)
+          .borderRadius(20)
+          .padding({left:16,right:16})
+          .linearGradient({
+            angle:135,
+            colors:[
+              ['rgba(248, 211, 249, 1)',0.2],
+              ['rgba(192, 242, 255, 1)',1]
+            ]
+          })
 
-        }.width('100%')
-        .height(40)
-        .backgroundColor(Color.White)
-        .borderRadius(8)
-        .justifyContent(FlexAlign.SpaceBetween)
-        .padding({left:12,right:12})
-        .alignItems(VerticalAlign.Center)
+        }.width('100%').height('100%').justifyContent(FlexAlign.Center).backgroundColor('rgba(30, 30, 30,0.5)')
+      }
+    }
 
 
+  }
 
 
-      }.width('100%')
-      .height(214)
-      .padding({left:22,top:56,right:22})
-      .borderRadius({bottomLeft:20,bottomRight:20})
-      .linearGradient({
-        angle:135,
-        colors:[
-          ['rgba(239, 144, 237, 1)',0.2],
-          ['rgba(191, 242, 255, 1)',1]
-        ]
-      })
-    }
+}
+@Component
+struct reNameInput{
+  @Prop text:string=""
+  @Prop num:number=1
+  inputChange=(value:string)=>{
 
   }
-}
+  build() {
+    Row({space:10}){
+      Text(`转盘${this.num}`)
+      TextInput({text:this.text})
+        .width(194)
+        .height(30)
+        .padding(0)
+        .border({width:{bottom:1,left:0,right:0,top:0},color:Color.Black})
+        .borderRadius(0)
+        .backgroundColor(Color.Transparent)
+        .onChange((value:string)=>{
+          this.inputChange(value)
+        })
+    }.width('100%')
+
+  }
+}
+
+// Text('旋转秒数').fontColor(Color.Black)
+// CounterComponent({
+//   options: {
+//     type: CounterType.COMPACT, // 设置计数器类型为紧凑型
+//     numberOptions: {
+//       value: this.spinDuration/1000, // 设置计数器初始值 5
+//       min: 1, // 设置最小值
+//       max: 100, // 设置最大值
+//       step: 1, // 设置步长
+//       onChange: (value: number) => { // 计数器值变化时的回调
+//         this.spinDuration = value*1000;
+//         // this.calculateAngles(); // 重新计算角度
+//       }
+//     }
+//   }
+// }).backgroundColor(Color.White)
+
+
+// Row(){
+//   Column(){
+//     //是否允许结果重复
+//     Button('是否允许结果重复').onClick(()=>{
+//       this.isRepeat=!this.isRepeat
+//     })
+//     Text(this.isRepeat+"")
+//   }
+//
+// }

features/feature/src/main/ets/view/EatWhatView.ets

@@ -54,7 +54,8 @@ struct EatWhatView{
       YTHeader({ title: '吃什么' })
       Row({ space: 20 }) {
         // Stack() {
-        Image($r('[basic].media.voicemuisc')).width(30).height(30).margin({left:20,right:50})
+        // Image($r('[basic].media.voicemuisc')).width(30).height(30).margin({left:20,right:50})
+        Column(){}.width(24).height(24).margin({left:20,right:50})
 
       }.width('100%').margin({top:20}).justifyContent(FlexAlign.Start); // 设置宽度和内容居中对齐
 
@@ -110,6 +111,8 @@ struct EatWhatView{
 
     }.padding({ bottom: this.safeBottom })
     .height('100%')
+    .backgroundImage($r('[basic].media.backimgNumber'))
+    .backgroundImageSize({width:'100%',height:'100%'})
     .backgroundColor(Color.White)
   }
 }

features/feature/src/main/ets/view/RanNumberView.ets

@@ -1,5 +1,5 @@
 import { it } from '@ohos/hypium';
-import { IBestToast, YTAvoid, YTButton, YTHeader } from 'basic'
+import { IBestToast, ReqString, YTAvoid, YTButton, YTHeader, YTRequest, YTUserRequest } from 'basic'
 import { LengthMetrics, promptAction } from '@kit.ArkUI';
 
 @Builder
@@ -24,13 +24,13 @@ struct RanNumberView{
   @State private isFocusEnd: boolean = false;
   @State private isFocusCount: boolean = false;
   // 是否允许生成的随机数重复
-  @State private isUnique: boolean = true;
+  // @State private isUnique: boolean = true;
   // 随机数生成的起始值
-  @State private startValue: number = 0;
+  private startValue: number = 0;
   // 随机数生成的结束值
-  @State private endValue: number = 0;
+ private endValue: number = 0;
   // 要生成的随机数个数
-  @State private countValue: number = 0;
+ private  countValue: number = 0;
   @State private randomNumberArr:number[]=[]
 
 
@@ -39,70 +39,6 @@ struct RanNumberView{
    * 改变值，会引起UI刷新
    */
   // 生成随机数的方法
-  private generateRandomNumbers(): void {
-
-    const startValue = this.startValue; // 获取当前设定的起始值
-    const endValue = this.endValue; // 获取当前设定的结束值
-    const countValue = this.countValue; // 获取当前设定的生成个数
-    const range: number = endValue - startValue + 1; // 计算生成范围
-
-
-    // 用于存储生成的随机数
-    const generatedNumbers = new Set<number>(); // 使用Set来自动去重
-    const tempArray: number[] = []; // 临时数组，用于辅助生成不重复的随机数
-
-    // 如果不允许重复，则使用去重算法生成随机数
-    if (!this.isUnique) {
-      // 如果请求的随机数数量超过了范围内的总数，则显示错误提示
-      if (countValue > range) {
-        this.getUIContext().showAlertDialog({
-          title: '错误提示',
-          message: `请求的随机数数量超过了范围内的总数`,
-          confirm: {
-            defaultFocus: true,
-            value: '我知道了',
-            fontColor: Color.White,
-            backgroundColor: this.primaryColor,
-            action: () => {} // 点击确认后的回调
-          },
-          onWillDismiss: () => {}, // 对话框即将关闭时的回调
-          alignment: DialogAlignment.Center, // 对话框的对齐方式
-        });
-        return;
-      }
-
-      for (let i = 0; i < countValue; i++) {
-        let randomIndex = Math.floor(Math.random() * (range - i)); // 在剩余范围内选择一个随机索引
-        let randomNum = 0;
-        if (tempArray[randomIndex] !== undefined) { // 如果索引位置已有值，则使用该值
-          randomNum = tempArray[randomIndex];
-        } else {
-          randomNum = startValue + randomIndex; // 否则计算新的随机数
-        }
-        generatedNumbers.add(randomNum); // 添加到Set中，自动去重
-        if (tempArray[range - 1 - i] === undefined) { // 更新末尾元素的位置
-          tempArray[range - 1 - i] = startValue + range - 1 - i;
-        }
-        tempArray[randomIndex] = tempArray[range - 1 - i]; // 将末尾元素移到随机位置
-      }
-      // 将生成的随机数转换成JSON格式的字符串
-      this.generatedNumbers = JSON.stringify(Array.from(generatedNumbers));
-    } else {
-      // 如果允许重复，则直接生成随机数
-      for (let i = 0; i < this.countValue; i++) {
-        let randomNumber = this.startValue + Math.floor(Math.random() * (this.endValue - this.startValue));
-        tempArray.push(randomNumber);
-      }
-      // 将生成的随机数转换成JSON格式的字符串
-      this.generatedNumbers = JSON.stringify(tempArray);
-    }
-
-    //最终将生成的字符串转化为数组
-    this.randomNumberArr=JSON.parse(this.generatedNumbers)
-    // this.flexChangeValue=this.countValue
-
-
-  }
   // // 将生成的随机数复制到剪贴板的方法
   // private copyToClipboard(text: string): void {
   //   const pasteboardData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, text); // 创建剪贴板数据
@@ -112,6 +48,17 @@ struct RanNumberView{
   //   promptAction.showToast({ message: '已复制' });
   // }
 
+  private getNumber(count:number,maxnumber:number,minnumber:number){
+    YTUserRequest.getNumberResult(count,maxnumber,minnumber,(res)=>{
+
+      const result=res as ReqString
+
+      this.generatedNumbers=result['results']
+      this.randomNumberArr=this.generatedNumbers.split(',').map(item=>Number(item))
+
+    })
+  }
+
 
 
   build() {
@@ -119,31 +66,32 @@ struct RanNumberView{
       YTHeader({ title: '随机数' })
       //声音
       Row(){
-        Image($r('[basic].media.voicemuisc')).width(24)
+        Column(){}.width(24).height(24)
+        // Image($r('[basic].media.voicemuisc')).width(24)
       }.width('100%')
       .justifyContent(FlexAlign.Start)
       .padding({left:30})
 
       Column() {
 
-        Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
+        Flex({ wrap: FlexWrap.Wrap,space:{cross:LengthMetrics.vp(22),main:LengthMetrics.vp(22)} }) {
           ForEach(this.randomNumberArr, (item: number, index: number) => {
             Column() {
               Text(item.toString()).width(30)
 
             }
-            .width(this.countValue > 3 ? 70 : 95)
-            .height(this.countValue > 3 ? 60 : 85)
+            .width(this.countValue > 3 ? 60 : 88)
+            .height(this.countValue > 3 ? 52 : 76)
             .justifyContent(FlexAlign.Center)
             .alignItems(HorizontalAlign.Center)
-            .margin({ bottom: 20 })
+            // .margin({ bottom: 20 })
             .backgroundImage($r('[basic].media.number'))
             .backgroundImageSize({ width: "100%", height: '100%' })
 
           })
 
 
-        }.padding({ left: 30, right: 30 })
+        }.padding({ left: 34, right: 34 })
       }.width('100%')
       .height(300)
 
@@ -151,54 +99,47 @@ struct RanNumberView{
       Column({space:20}) {
         Row() {
           Text('取值范围：').margin({right:30})
-          TextInput() // 输入框，显示占位符
-            .width(60)
-            .height(60)
-            .type(InputType.Number) // 设置输入类型为数字
-            .placeholderColor(this.isFocusStart ? this.primaryColor : Color.Gray) // 设置占位符颜色
-            .fontColor(this.isFocusStart ? this.primaryColor : this.fontColor) // 设置文本颜色
-            .borderColor(this.isFocusStart ? this.primaryColor : Color.Gray) // 设置边框颜色
-            .borderWidth(1) // 设置边框宽度
-            .borderRadius(10) // 设置圆角半径
-            .backgroundColor(Color.White) // 设置背景颜色
-            .showUnderline(false) // 不显示下划线
-            .onBlur(() => this.isFocusStart = false) // 输入框失去焦点时的处理
-            .onFocus(() => this.isFocusStart = true) // 输入框获得焦点时的处理
-            .onChange((value: string) => {
-              if(Number(value)>100){
-                IBestToast.show({
-                  message:'生成范围只能是100以内'
-                })
-                return
-              }
-              if(Number(value)<=0){
-                IBestToast.show({
-                  message:'生成范围只能是100以内'
-                })
-                return
-              }
-
-
-              this.startValue = Number(value)
-
-            }); // 输入值变化时的处理
+          Column() {
+            TextInput({ text: $$this.startValue }) // 输入框，显示占位符
+              .width(46)
+              .height(46)
+              .type(InputType.Number) // 设置输入类型为数字
+              .borderRadius(8) // 设置圆角半径
+              .backgroundColor(Color.White) // 设置背景颜色
+              .showUnderline(false) // 不显示下划线
+              .onChange((value: string) => {
+                if (Number(value) > 100) {
+                  IBestToast.show({
+                    message: '生成范围只能是100以内'
+                  })
+                  return
+                }
+                if (Number(value) < 0) {
+                  IBestToast.show({
+                    message: '生成范围不能小于0'
+                  })
+                  return
+                }
+                this.startValue = Number(value)
+
+              }); // 输入值变化时的处理
+          }.width(50)
+          .height(50)
+          .justifyContent(FlexAlign.Center)
+          .backgroundImage($r('[basic].media.caikuang'))
+          .backgroundImageSize({ width: 50, height: 50 })
 
           // 分隔符
           // Line().width(10) // 设置分隔符宽度
-          Text().width(30).height(1).fontColor(Color.Gray)
-          TextInput() // 输入框，显示占位符
-            .width(60)
-            .height(60)
+          Column().width(27).height(1).backgroundColor('rgba(0, 0, 0, 0.35)').margin({left:4,right:4})
+          Column() {
+          TextInput({text:$$this.endValue}) // 输入框，显示占位符
+            .width(46)
+            .height(46)
             .type(InputType.Number) // 设置输入类型为数字
-            .placeholderColor(this.isFocusEnd ? this.primaryColor : Color.Gray) // 设置占位符颜色
-            .fontColor(this.isFocusEnd ? this.primaryColor : this.fontColor) // 设置文本颜色
-            .borderColor(this.isFocusEnd ? this.primaryColor : Color.Gray) // 设置边框颜色
-            .borderWidth(1) // 设置边框宽度
-            .borderRadius(10) // 设置圆角半径
+            .borderRadius(8) // 设置圆角半径
             .backgroundColor(Color.White) // 设置背景颜色
             .showUnderline(false) // 不显示下划线
-            .onBlur(() => this.isFocusEnd = false) // 输入框失去焦点时的处理
-            .onFocus(() => this.isFocusEnd = true) // 输入框获得焦点时的处理
             .onChange((value: string) =>{
               if(Number(value)>100){
                 IBestToast.show({
@@ -206,31 +147,34 @@ struct RanNumberView{
                 })
                 return
               }
-              if(Number(value)<=0){
+              if(Number(value)<0){
                 IBestToast.show({
-                  message:'生成范围只能是100以内'
+                  message:'生成范围不能小于0'
                 })
                 return
               }
               this.endValue = Number(value)
             }); // 输入值变化时的处理
+          }.width(50)
+          .height(50)
+          .justifyContent(FlexAlign.Center)
+          .backgroundImage($r('[basic].media.caikuang'))
+          .backgroundImageSize({ width: 50, height: 50 })
+
+
+
         }.width('100%').margin({top:10})
 
         Row() {
           Text('生成个数：').margin({right:30})
-          TextInput({ placeholder: ''}) // 输入框，显示占位符
-            .width(60)
-            .height(60)
+          Column() {
+          TextInput({text:$$this.countValue}) // 输入框，显示占位符
+            .width(46)
+            .height(46)
             .type(InputType.Number) // 设置输入类型为数字
-            .placeholderColor(this.isFocusCount ? this.primaryColor : Color.Gray) // 设置占位符颜色
-            .fontColor(this.isFocusCount ? this.primaryColor : this.fontColor) // 设置文本颜色
-            .borderColor(Color.Orange) // 设置边框颜色
-            .borderWidth(1) // 设置边框宽度
-            .borderRadius(10) // 设置圆角半径
+            .borderRadius(8) // 设置圆角半径
             .backgroundColor(Color.White) // 设置背景颜色
             .showUnderline(false) // 不显示下划线
-            .onBlur(() => this.isFocusCount = false) // 输入框失去焦点时的处理
-            .onFocus(() => this.isFocusCount = true) // 输入框获得焦点时的处理
             .onChange((value: string) =>{
               if(Number(value)>10){
                 IBestToast.show({
@@ -245,10 +189,14 @@ struct RanNumberView{
                 return
               }
 
-
             this.countValue = Number(value)
 
             }); // 输入值变化时的处理
+          }.width(50)
+          .height(50)
+          .justifyContent(FlexAlign.Center)
+          .backgroundImage($r('[basic].media.caikuang'))
+          .backgroundImageSize({ width: 50, height: 50 })
         }.width('100%')
       }.width(330)
       .height(170)
@@ -257,8 +205,24 @@ struct RanNumberView{
       .backgroundColor('#e0f8ff')
       .justifyContent(FlexAlign.Start)
 
-      Text('生成范围为100以内，最多生成10个数').margin({bottom:50})
-
+      Row() {
+          Row() {
+            Text('最大范围').fontSize(12).fontColor('rgba(0, 0, 0, 0.45)').margin({top:2})
+            Text('0-100').fontSize(12).fontColor('rgba(0, 0, 0, 0.65)').margin({bottom:2})
+          }.margin({ right: 40 })
+        Row() {
+          Text('最多生成').fontSize(12).fontColor('rgba(0, 0, 0, 0.45)').margin({top:2})
+          Text('十个数').fontSize(12).fontColor('rgba(0, 0, 0, 0.65)').margin({bottom:2})
+        }
+      }.width('100%')
+      .padding({
+        left: 72,
+        right: 72,})
+      .margin({
+        bottom: 67,
+        top: 16
+      })
+      .justifyContent(FlexAlign.Center)
 
       // Button('数字是否可以重复').onClick(()=>{
       //   this.isUnique=!this.isUnique
@@ -267,14 +231,30 @@ struct RanNumberView{
 
       YTButton({
         bgc:'#fd54e3',
-        btHeight:44,
-        btBorderRadius:20,
-        btWidth:300,
+        btHeight:40,
+        btBorderRadius:24,
+        btWidth:246,
         btFontColor:Color.White,
         btFontSize:20,
         click:()=>{
+          if(this.countValue==0){
+            IBestToast.show({
+              message:'最少生成1个数'
+            })
+            return
+          }
+
+          if(this.countValue==10){
+            IBestToast.show({
+              message:'最多生成10个数'
+            })
+            return
+          }
+          this.getNumber(this.countValue,this.endValue,this.startValue)
+          //不随机生成，从后端拿
+          // this.generateRandomNumbers()
+
 
-          this.generateRandomNumbers()
         },
         btContent:'随机数生成'
 
@@ -314,4 +294,70 @@ struct RanNumberView{
  })
  .hitTestBehavior(HitTestMode.Block) // 设置点击测试行为
  .onClick(() => this.isUnique = !this.isUnique); // 点击时切换状态
+ */
+/**
+ *  private generateRandomNumbers(): void {
+
+ const startValue = this.startValue; // 获取当前设定的起始值
+ const endValue = this.endValue; // 获取当前设定的结束值
+ const countValue = this.countValue; // 获取当前设定的生成个数
+ const range: number = endValue - startValue + 1; // 计算生成范围
+
+
+ // 用于存储生成的随机数
+ const generatedNumbers = new Set<number>(); // 使用Set来自动去重
+ const tempArray: number[] = []; // 临时数组，用于辅助生成不重复的随机数
+
+ // 如果不允许重复，则使用去重算法生成随机数
+ if (!this.isUnique) {
+ // 如果请求的随机数数量超过了范围内的总数，则显示错误提示
+ if (countValue > range) {
+ this.getUIContext().showAlertDialog({
+ title: '错误提示',
+ message: `请求的随机数数量超过了范围内的总数`,
+ confirm: {
+ defaultFocus: true,
+ value: '我知道了',
+ fontColor: Color.White,
+ backgroundColor: this.primaryColor,
+ action: () => {} // 点击确认后的回调
+ },
+ onWillDismiss: () => {}, // 对话框即将关闭时的回调
+ alignment: DialogAlignment.Center, // 对话框的对齐方式
+ });
+ return;
+ }
+
+ for (let i = 0; i < countValue; i++) {
+ let randomIndex = Math.floor(Math.random() * (range - i)); // 在剩余范围内选择一个随机索引
+ let randomNum = 0;
+ if (tempArray[randomIndex] !== undefined) { // 如果索引位置已有值，则使用该值
+ randomNum = tempArray[randomIndex];
+ } else {
+ randomNum = startValue + randomIndex; // 否则计算新的随机数
+ }
+ generatedNumbers.add(randomNum); // 添加到Set中，自动去重
+ if (tempArray[range - 1 - i] === undefined) { // 更新末尾元素的位置
+ tempArray[range - 1 - i] = startValue + range - 1 - i;
+ }
+ tempArray[randomIndex] = tempArray[range - 1 - i]; // 将末尾元素移到随机位置
+ }
+ // 将生成的随机数转换成JSON格式的字符串
+ this.generatedNumbers = JSON.stringify(Array.from(generatedNumbers));
+ } else {
+ // 如果允许重复，则直接生成随机数
+ for (let i = 0; i < this.countValue; i++) {
+ let randomNumber = this.startValue + Math.floor(Math.random() * (this.endValue - this.startValue));
+ tempArray.push(randomNumber);
+ }
+ // 将生成的随机数转换成JSON格式的字符串
+ this.generatedNumbers = JSON.stringify(tempArray);
+ }
+
+ //最终将生成的字符串转化为数组
+ this.randomNumberArr=JSON.parse(this.generatedNumbers)
+ // this.flexChangeValue=this.countValue
+
+
+ }
  */

features/feature/src/main/ets/view/RollDiceView.ets

@@ -233,7 +233,8 @@ struct RollDiceView {
 
     }.padding({ bottom: this.safeBottom })
     .height('100%')
-    .backgroundColor(Color.White)
+    .backgroundImage($r('[basic].media.backimgNumber'))
+    .backgroundImageSize({width:'100%',height:'100%'})
   }
 
 }

features/feature/src/main/ets/view/TossCoinView.ets

@@ -112,7 +112,8 @@ struct TossCoinView{
 
       Row({ space: 20 }) {
         // Stack() {
-         Image($r('[basic].media.voicemuisc')).width(30).height(30).margin({left:20,right:50})
+        Column(){}.width(24).height(24).margin({left:20,right:50})
+        //  Image($r('[basic].media.voicemuisc')).width(30).height(30).margin({left:20,right:50})
         //
         // }
         // .borderRadius('50%') // 设置圆角
@@ -255,6 +256,8 @@ struct TossCoinView{
 
     }.padding({ bottom: this.safeBottom })
     .height('100%')
-    .backgroundColor(Color.White)
+    .backgroundImage($r('[basic].media.backimgNumber'))
+    .backgroundImageSize({width:'100%',height:'100%'})
+
   }
 }

features/user/src/main/ets/pages/SettingPage.ets

@@ -161,7 +161,7 @@ struct SettingPage {
               bottom: 12
             },
             btBorderRadius: 40,
-            bgc: 'rgba(28, 28, 28, 1)',
+            bgc: Color.Transparent,
             click: () => {
               this.userInfo.logout()
               yTRouter.routerBack()
@@ -169,6 +169,14 @@ struct SettingPage {
             }
           })
             .margin({ top: 324, bottom: 12 })
+            .borderRadius(40)
+            .linearGradient({
+              angle: 135,
+              colors: [
+                ['rgba(230, 163, 240,1)', 0.2],
+                ['rgba(191, 242, 255, 1)', 1]
+              ]
+            })
           YTButton({
             btContent: '注销用户',
             btFontColor: 'rgba(28, 28, 28, 0.6)',
@@ -380,7 +388,7 @@ struct SettingPage {
               bottom: 12
             },
             btBorderRadius: 40,
-            bgc: 'rgba(28, 28, 28, 1)',
+            bgc: Color.Transparent,
             click: () => {
               //设置成功
               if (this.phoneNumber.trim() == '') {
@@ -428,6 +436,14 @@ struct SettingPage {
             }
           })
             .margin({ top: 324, bottom: 12 })
+            .borderRadius(40)
+            .linearGradient({
+              angle: 135,
+              colors: [
+                ['rgba(230, 163, 240, 1)', 0.2],
+                ['rgba(191, 242, 255, 1)', 1]
+              ]
+            })
 
         } .padding({
           top: 29,
@@ -528,7 +544,7 @@ struct SettingPage {
           btHeight: 42,
           btWidth: 104,
           btFontSize:16,
-          bgc:"rgba(28, 28, 28, 1)",
+          bgc:Color.Transparent,
           btPadding: {
             left: 36,
             right: 36,
@@ -549,7 +565,14 @@ struct SettingPage {
             //TODO 发送请求后关闭弹窗
             this.showReviseName = false
           }
-        })
+        }).borderRadius(21)
+          .linearGradient({
+            angle: 135,
+            colors: [
+              ['rgba(230, 163, 240, 1)', 0.2],
+              ['rgba(191, 242, 255, 1)', 1]
+            ]
+          })
       }
       .justifyContent(FlexAlign.Center)
       .width('100%')

products/entry/src/main/module.json5

@@ -32,7 +32,7 @@
         "description": "$string:EntryAbility_desc",
         "icon": "$media:layered_image",
         "label": "$string:EntryAbility_label",
-        "startWindowIcon": "$media:startIcon",
+        "startWindowIcon": "$media:app_icon",
         "startWindowBackground": "$color:start_window_background",
         "exported": true,
         "skills": [