工具页面

src/components/loading-progress/index.ux

@@ -0,0 +1,32 @@
+<template>
+  <div class="loading-container">
+    <progress type="circular" 
+              class="loading-progress" 
+              style="color: {{color}};">
+    </progress>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: '#ea9f8a'
+    }
+  }
+}
+</script>
+
+<style>
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loading-progress {
+  width: 80px;
+  height: 80px;
+}
+</style>

src/components/tools-mall/index.ux

@@ -11,7 +11,7 @@
         </div>
       </div>
       <div>
-        <text @click="fnTest('vibrator')">震动</text>
+        <!-- <text @click="fnTest('vibrator')">震动</text> -->
       </div>
     </div>
   </div>

src/manifest.json

@@ -32,6 +32,24 @@
     },
     {
       "name": "system.vibrator"
+    },
+    {
+      "name": "system.brightness"
+    },
+    {
+      "name": "system.network"
+    },
+    {
+      "name": "system.device"
+    },
+    {
+      "name": "system.telecom"
+    },
+    {
+      "name": "system.battery"
+    },
+    {
+      "name": "system.wifi"
     }
   ],
   "permissions": [
@@ -106,6 +124,21 @@
       },
       "pages/tools/ziTiDaXiao": {
         "component": "index"
+      },
+      "pages/tools/liuXingBiZhi": {
+        "component": "index"
+      },
+      "pages/tools/zuiXinBiZhi": {
+        "component": "index"
+      },
+      "pages/tools/shengDianJiQiao": {
+        "component": "index"
+      },
+      "pages/tools/baoYangJiQiao": {
+        "component": "index"
+      },
+      "components/loading-progress": {
+        "component": "index"
       }
     }
   },
@@ -175,6 +208,21 @@
       },
       "pages/tools/ziTiDaXiao": {
         "titleBarText": "字体大小"
+      },
+      "pages/tools/liuXingBiZhi": {
+        "titleBarText": "流行壁纸"
+      },
+      "pages/tools/zuiXinBiZhi": {
+        "titleBarText": "最新壁纸"
+      },
+      "pages/tools/shengDianJiQiao": {
+        "titleBarText": "省电技巧"
+      },
+      "pages/tools/baoYangJiQiao": {
+        "titleBarText": "保养技巧"
+      },
+      "components/loading-progress": {
+        "titleBarText": ""
       }
     }
   }

src/pages/tools/baoYangJiQiao/index.ux

@@ -0,0 +1,27 @@
+<template>
+  <div class="wrapper">
+      <image
+        class="image"
+        src="/assets/images/source/byjq_.png"
+      ></image>
+  </div>
+</template>
+
+<script>
+export default {
+  private: {
+    
+  },
+
+  onInit() {}
+}
+</script>
+
+<style lang="less">
+@import '../../../assets/styles/index.less';
+
+.image {
+  width: 100%;
+  height: 1900px;
+}
+</style>

src/pages/tools/jingXuanBiZhi/index.ux

@@ -1,27 +1,116 @@
 <template>
-  <div class="wrapper">
-    <text class="title">{{ title }}</text>
+  <div class="content">
+      <div class="tabs flex scroll-x ai_end mgt-20 h-50">
+          <text
+            class="text-28 text-999 cursor {{ active === tab.id ? 'active' : '' }}" 
+             style="margin-right: 50px;"
+             for="(index,tab) in category" 
+             @click="chooseTab(tab)"
+          > {{ tab.name }}</text>
+      </div>
+      <div class="chooseBox">
+        <image class="w-220 h-120 radio-20 mgr-20"
+               @click="navTo('pages/tools/liuXingBiZhi')"
+               src="/assets/images/source/pop_bz.jpg"></image>
+        <image class="w-220 h-120 radio-20 mgr-20"
+               @click="navTo('pages/tools/zuiXinBiZhi')"
+               src="/assets/images/source/new_bz.jpg"></image>
+      </div>
+      <div class="imgs mgt-40 flex fw_wrap">
+        <image class="w-220 h-280 radio-16" 
+               mode="aspectFill"
+               for="(index,img) in currentImageList" 
+               for-item="img" 
+               src="{{img}}">
+        </image>
+      </div>
   </div>
 </template>
 
 <script>
+  import router from '@system.router'
 export default {
-  private: {
-    title: '欢迎体验快应用开发'
+  data() {
+    return {
+      statusBarHeight: 0,
+      active: 1,
+      category: [
+        { name: '风景', list: [
+            'https://img2.baidu.com/it/u=643390968,3821598343&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
+            'https://img2.baidu.com/it/u=1207164141,4244022854&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+            'https://img2.baidu.com/it/u=2122730436,3330551883&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+            'https://img2.baidu.com/it/u=1934414271,796431517&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
+            'https://img2.baidu.com/it/u=2843793126,682473204&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
+            'https://img1.baidu.com/it/u=1292485292,902063151&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083',
+            'https://img0.baidu.com/it/u=15396030,1143539239&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+            'https://img2.baidu.com/it/u=1320672626,288218548&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+            'https://img0.baidu.com/it/u=1652113119,3226642753&fm=253&app=138&f=JPEG?w=1423&h=800',
+            'https://img0.baidu.com/it/u=3087392912,2682394042&fm=253&app=138&f=JPEG?w=1423&h=800',
+            'https://img1.baidu.com/it/u=3631027001,3666368042&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+            'https://img1.baidu.com/it/u=3637490291,2814538424&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
+            'https://img2.baidu.com/it/u=2114786151,2275385596&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+        ], id: 1 },
+        { name: '设计', list: [], id: 2 },
+        { name: '物语', list: [], id: 3 },
+        { name: '城市', list: [], id: 4 },
+      ],
+      currentImageList: [] // 用于存储当前激活分类的图片列表
+    }
   },
-
-  onInit() {}
-}
+  onInit() {
+    // 使用快应用API获取系统信息
+    // this.statusBarHeight = this.$storage.getSync('statusBarHeight') || 0;
+    this.updateImageList();
+  },
+    chooseTab(tab) {
+      this.active = tab.id;
+      this.updateImageList();
+    },
+    updateImageList() {
+        // 找到当前激活的分类并更新图片列表
+        const activeCategory = this.category.find(cat => cat.id === this.active);
+        if (activeCategory) {
+            this.currentImageList = activeCategory.list;
+        }
+    },
+    navTo(uri) {
+      // 使用快应用API进行页面跳转
+      router.push({
+        uri,
+      })
+    }
+  }
 </script>
 
-<style>
-.wrapper {
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.title {
-  text-align: center;
-  color: #212121;
-}
-</style>
+<style lang="less">
+  .content {
+    min-height: 100%;
+    padding: 28px;
+    background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
+    flex-direction: column;
+  }
+  .tabs{
+    height: 50px;
+  }
+  .chooseBox{
+    margin-top: 30px;
+    image{
+      margin-right: 20px;
+    }
+  }
+  .imgs{
+    flex-wrap: wrap;
+    image{
+      width: 220px;
+      height: 280px;
+      border-radius: 20px;
+      margin-right: 20px;
+      margin-top: 20px;
+    }
+  }
+  .active {
+    color: #000000;
+    font-weight: 500;
+    font-size: 30px;
+  }
+</style>

src/pages/tools/liuXingBiZhi/index.ux

@@ -0,0 +1,66 @@
+<template>
+  <div class="content">
+      <div class="imgs mgt-40 flex fw_wrap">
+        <image class="w-220 h-280 radio-16" 
+               mode="aspectFill"
+               for="(index,img) in list" 
+               for-item="img" 
+               src="{{img}}">
+        </image>
+      </div>
+  </div>
+</template>
+
+<script>
+  import router from '@system.router'
+export default {
+  data() {
+    return {
+      statusBarHeight: 0,
+      active: 1,
+      list: [
+            'https://img2.baidu.com/it/u=643390968,3821598343&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
+		'https://img2.baidu.com/it/u=1207164141,4244022854&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+		'https://img2.baidu.com/it/u=2122730436,3330551883&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+		'https://img2.baidu.com/it/u=1934414271,796431517&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
+		'https://img2.baidu.com/it/u=116978278,3413690614&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+		'https://img2.baidu.com/it/u=3982727376,1112161985&fm=253&app=138&f=JPEG?w=1333&h=800',
+		'https://img1.baidu.com/it/u=1486246425,1310582736&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
+		'https://img1.baidu.com/it/u=1744190363,3838549675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313',
+		'https://img1.baidu.com/it/u=1718642830,3610884461&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+		'https://img0.baidu.com/it/u=4228544678,3314716449&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+		'https://img1.baidu.com/it/u=3085958841,2793179863&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+		'https://img1.baidu.com/it/u=1292485292,902063151&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083',
+		'https://img1.baidu.com/it/u=2503868564,1632892809&fm=253&app=138&f=JPEG?w=889&h=500'
+    ],
+      currentImageList: [] // 用于存储当前激活分类的图片列表
+    }
+  },
+  onInit() {
+  },
+  }
+</script>
+
+<style lang="less">
+  .content {
+    min-height: 100%;
+    padding: 28px;
+    background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
+    flex-direction: column;
+  }
+  .imgs{
+    flex-wrap: wrap;
+    image{
+      width: 220px;
+      height: 280px;
+      border-radius: 20px;
+      margin-right: 20px;
+      margin-top: 20px;
+    }
+  }
+  .active {
+    color: #000000;
+    font-weight: 500;
+    font-size: 30px;
+  }
+</style>

src/pages/tools/quWeiCePing/index.ux

@@ -1,27 +1,180 @@
 <template>
-  <div class="wrapper">
-    <text class="title">{{ title }}</text>
+  <div class="content">
+    <div>
+      <div class="box">
+        <block if="{{!finishStatus}}">
+          <div class="title mgb-50">
+            <text> {{ curIndex + 1 }}、{{ QList[curIndex].title }}</text>
+          </div>
+          <div
+            for="(key, a) in QList[curIndex].AlistArr"
+            @click="chooseA(a.key)"
+            class="Aitem {{curChoose === a.key ? 'active' : ''}}">
+            <text>{{ a.key }}、</text>
+            <text>{{ a.value }}</text>
+          </div>
+        </block>
+        <block if="{{finishStatus}}">
+          <text>{{ resultText }}</text>
+        </block>
+        <div class="btn w-300 bottom-30" @click="nextFn">
+          <text class="btn-read" if="{{ curIndex == QList.length - 1 }}">
+            显示结果
+          </text>
+          <text class="btn-read" if="{{ curIndex != QList.length - 1 }}">
+               下一题
+          </text>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  private: {
-    title: '欢迎体验快应用开发'
+  data() {
+    return {
+      finishStatus: false,
+      QList: [
+        { title: '你更喜欢哪种社交场合?', Alist: { 'A': '大型会所', 'B': '小型会所', 'C': '与几位亲朋密友聚会', 'D': '独自一人' } },
+        { title: '你在做决定时更倾向于?', Alist: { 'A': '依靠逻辑和事实', 'B': '依靠直觉和感觉', 'C': '参考别人的意见', 'D': '随机应变' } },
+        { title: '你更喜欢哪种工作环境?', Alist: { 'A': '有条不紊的办公室', 'B': '灵活自由的环境', 'C': '家庭办公', 'D': '合作共享的空间' } },
+        { title: '在团队中，你通常扮演什么角色?', Alist: { 'A': '领导者', 'B': '执行者', 'C': '协调者', 'D': '创新者' } },
+        { title: '你更喜欢哪种娱乐方式?', Alist: { 'A': '阅读书籍', 'B': '参加派对', 'C': '看电影', 'D': '运动健身' } }
+      ],
+      curIndex: 0,
+      curChoose:null,
+      chooseList: [],
+      resultText: ''
+    }
   },
-
-  onInit() {}
-}
+  onInit() {
+    // 把 Alist 转成数组方便 for 渲染
+    this.QList.forEach(q => {
+      q.AlistArr = Object.keys(q.Alist).map(k => ({ key: k, value: q.Alist[k] }));
+    });
+  },
+    chooseA(key) {
+      this.curChoose = key
+      this.chooseList[this.curIndex] = key;
+      console.log('this.chooseList',this.chooseList)
+      //  // 强制刷新
+    },
+    nextFn() {
+      if (!this.chooseList[this.curIndex]) {
+        $utils.showToast('请先选择选项')
+        return;
+      }
+      if (this.curIndex < this.QList.length - 1) {
+         this.curChoose = null;
+        this.curIndex += 1;
+      } else {
+        this.finishStatus = true;
+        this.resultText = this.generatePersonality();
+         $utils.showToast('提交成功！')
+      return
+      }
+      
+    },
+    generatePersonality() {
+      if (this.chooseList.length !== 5) return "请完成所有问题";
+      const dimensionScores = { energy: 0, decision: 0, structure: 0, role: 0 };
+      // 第一题
+      if (this.chooseList[0] === 'A' || this.chooseList[0] === 'B') dimensionScores.energy += 2;
+      if (this.chooseList[0] === 'C') dimensionScores.energy += 1;
+      // 第二题
+      if (this.chooseList[1] === 'A') dimensionScores.decision += 2;
+      if (this.chooseList[1] === 'B') dimensionScores.decision += 1;
+      // 第三题
+      if (this.chooseList[2] === 'A') dimensionScores.structure += 2;
+      if (this.chooseList[2] === 'B' || this.chooseList[2] === 'D') dimensionScores.structure += 1;
+      // 第四题
+      if (this.chooseList[3] === 'A' || this.chooseList[3] === 'D') dimensionScores.role += 2;
+      if (this.chooseList[3] === 'B') dimensionScores.role += 1;
+      // 第五题
+      if (this.chooseList[4] === 'B') dimensionScores.energy += 2;
+      if (this.chooseList[4] === 'D') dimensionScores.energy += 1;
+      const energyType = dimensionScores.energy >= 3 ? "E" : "I";
+      const decisionType = dimensionScores.decision >= 2 ? "T" : "F";
+      const personalities = {
+        "ET": { name: "开拓型领袖", desc: "你是个充满活力的决策者！善于社交并理性分析问题，天生的领导者，擅长在大型社交场合中主导方向，偏好结构化的工作环境" },
+        "EF": { name: "魅力型协调者", desc: "你是个热情洋溢的沟通专家！善于在社交中感知他人情绪，喜欢团队合作，在灵活的环境中能发挥创造力，是优秀的协调者" },
+        "IT": { name: "分析型专家", desc: "你是个专注的思考者！偏好深度工作与理性分析，在小范围社交中表现出色，适合需要精密思考的结构化工作环境" },
+        "IF": { name: "关怀型创造者", desc: "你是个富有洞察力的创造者！重视内心感受和亲密关系，在自由环境中灵感迸发，常扮演团队中的创新者角色" }
+      };
+      const traits = [];
+      if (dimensionScores.structure >= 2) traits.push("有条理");
+      if (this.chooseList[3] === 'C') traits.push("善于调解");
+      if (this.chooseList[1] === 'D') traits.push("灵活应变");
+      if (this.chooseList[4] === 'A') traits.push("思想深刻");
+      const personalityKey = energyType + decisionType;
+      const result = personalities[personalityKey] || { name: "平衡型人才", desc: "你具有适应多种环境的优秀能力！能在不同情境中灵活调整自己的行为模式" };
+      let finalDesc = `${result.name}：${result.desc}`;
+      if (traits.length > 0) {
+        finalDesc += `，特别具有${traits.join('、')}的特质`;
+      }
+      return finalDesc;
+    }
+  }
 </script>
 
-<style>
-.wrapper {
+<style lang="less">
+  @import '../../../assets/styles/index.less';
+
+.content {
+  padding: 28px;
+  background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
+}
+.box {
+  margin-top: 100px;
+  height: 850px;
+  width: 100%;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  background-color: #fff;
+  border: 1px solid #000;
+  position: relative;
+  border-radius:20px;
+  padding: 30px;
 }
-.title {
+.btn-read {
+  color: @white;
+  border: 1px solid @brand;
+  background-color: @brand;
+  border-radius: 5px;
+  padding: 15px 0;
+  flex: 1;
+  text-align: center;
+}
+.Aitem {
+  border: 1px solid #000;
+  height: 80px;
+  line-height: 80px;
+  border-radius: 22px;
+  margin-bottom: 20px;
+  padding: 0 20px;
+}
+.btn{
+  left: 380px;
+  transform: translateX(-50%);
+  position: absolute; 
+}
+/* 
+
+.next_btn {
+  width: 320rpx;
+  height: 60rpx;
+  line-height: 60rpx;
   text-align: center;
-  color: #212121;
+  color: #fff;
+  background-color: #399bfc;
+  border-radius: 20rpx;
+  border: 1px solid #000;
+  transform: translate(50%);
+  position: absolute;
+  bottom: 60rpx;
+} */
+.active {
+  border: 1px solid #399bfc;
+  color: #399bfc !important;
 }
 </style>

src/pages/tools/shengBoChuChen/index.ux

@@ -1,27 +1,173 @@
+<import name="loading-progress" src="../../../components/loading-progress"></import>
 <template>
-  <div class="wrapper">
-    <text class="title">{{ title }}</text>
+  <div class="content p-rel pdt-100" style="padding-top: {{statusBarHeight}}px">
+    <div class="p-rel h-200 flex ai_center fd_c" style="padding-top:50px;">
+      <image if="{{!open}}" 
+             style="width: 130px;height: 130px;margin-top: 40px;" 
+             src="/assets/images/source/ql_icon.png">
+      </image>
+      <!-- 快应用loading组件 -->
+      <loading-progress if="{{open}}" 
+          color="#ea9f8a"
+          style="transform: translateY(50px);">
+      </loading-progress>
+    </div>
+    <div class="p-rel flex ai_center fd_c">
+      <block if="{{open}}">
+        <text class="text-62 mgt-10">{{statusNum}}%</text>
+        <text class="text-36 text-500 mgy-30">正在声波初尘中...</text>
+        <text class="text-24 text-555 mgb-80">手机音量调到最大，可以获得最后的除尘效果</text>
+      </block>
+      <div class="h-100" if="{{!open}}">
+        <text if="{{!firstClick}}" class="mgt-10 text-48">除尘结束</text>
+      </div>
+      <text class="btn_s w-300" @click="handleClick">
+        {{open ? '结束除尘' : '开始除尘'}}
+      </text>
+    </div>
   </div>
 </template>
 
 <script>
+  import vibrator from '@system.vibrator' 
+// 自定义loading组件
 export default {
-  private: {
-    title: '欢迎体验快应用开发'
+  data() {
+    return {
+      statusBarHeight: 0,
+      open: false,
+      statusNum: 0,
+      firstClick: true,
+      timer: null
+    }
   },
 
-  onInit() {}
-}
+  onInit() {
+  },
+
+  onDestroy() {
+    // 组件销毁时清除定时器
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  },
+    handleClick() {
+      if (!this.open) {
+        this.open = true;
+        this.firstClick = false;
+        this.startCleaning();
+      }
+    },
+
+    startCleaning() {
+      if (!this.open) return;
+
+      this.timer = setInterval(() => {
+        if (this.statusNum < 100) {
+          let num = Math.ceil(Math.random() * 3);
+          this.statusNum += (this.statusNum + num > 100) ? 1 : num;
+           vibrator.vibrate({
+            mode: 'long'
+          })
+        } else {
+          this.cleaningComplete();
+        }
+      }, 100);
+    },
+
+    cleaningComplete() {
+      clearInterval(this.timer);
+      this.timer = null;
+      this.open = false;
+      this.statusNum = 0;
+      
+      // 显示提示
+      $utils.showToast('除尘结束')
+    }
+  }
 </script>
 
 <style>
-.wrapper {
+.content {
   flex-direction: column;
-  justify-content: center;
+  background: linear-gradient(to bottom, #b4daff, #cce6ff);
+}
+
+.p-rel {
+  position: relative;
+}
+
+.pdt-100 {
+  padding-top: 100px;
+}
+
+.h-200 {
+  height: 200px;
+}
+
+.h-100 {
+  height: 100px;
+}
+
+.flex {
+  display: flex;
+}
+
+.ai_center {
   align-items: center;
 }
-.title {
+
+.fd_c {
+  flex-direction: column;
+}
+
+.text-62 {
+  font-size: 62px;
+}
+
+.text-48 {
+  font-size: 48px;
+}
+
+.text-36 {
+  font-size: 36px;
+}
+
+.text-24 {
+  font-size: 24px;
+}
+
+.text-500 {
+  font-weight: 500;
+}
+
+.text-555 {
+  color: #555;
+}
+
+.mgt-10 {
+  margin-top: 10px;
+}
+
+.mgy-30 {
+  margin: 30px 0;
+}
+
+.mgb-80 {
+  margin-bottom: 80px;
+}
+
+.w-300 {
+  width: 300px;
+}
+
+.btn_s {
+  height: 80px;
+  line-height: 80px;
   text-align: center;
-  color: #212121;
+  background: linear-gradient(90deg, #03fedf, #2ed9fb);
+  border-radius: 40px;
+  color: #fff;
 }
 </style>

src/pages/tools/shengDianJiQiao/index.ux

@@ -0,0 +1,27 @@
+<template>
+  <div class="wrapper">
+      <image
+        class="image"
+        src="/assets/images/source/sdjq_.png"
+      ></image>
+  </div>
+</template>
+
+<script>
+export default {
+  private: {
+    
+  },
+
+  onInit() {}
+}
+</script>
+
+<style lang="less">
+@import '../../../assets/styles/index.less';
+
+.image {
+  width: 100%;
+  height: 2300px;
+}
+</style>

src/pages/tools/shouJiQingLi/index.ux

@@ -1,27 +1,228 @@
 <template>
-  <div class="wrapper">
-    <text class="title">{{ title }}</text>
+  <div class="content">
+    <!-- <div style="padding-top: {{statusBarHeight}}px">
+      <div class="flex w ai_center jc_center fd_c mgt-20">
+        <image src="/static/image/source/jiasu.png" if="{{!status}}"
+          style="width: 350px;height: 350px;"></image>
+        <stack if="{{status}}" class="circle-progress">
+          <progress type="circular"
+            class="progress"
+            percent="{{percent}}"
+            style="width: 350px; height: 350px; color: #44ebd9; stroke-width: 30px; background-color: #d0effd;">
+          </progress>
+          <text class="percent-text">{{percent}}%</text>
+        </stack>
+        
+        <text class="text-24 mgt-20">发现大量垃圾</text>
+        <text class="text-888 text-22 mgt-20">占用大量手机内存，急需清理</text>
+        <div class="mgt-50 clean_btn cursor" @click="sureClean">
+          {{ status ? '正在清理中' : '立即清理' }}
+        </div>
+      </div>
+      
+      <div class="w bg-white h-320 mgt-80 radio-30 pd-20">
+        <div for="{{infoList}}" class="bg-eee h-80 radio-20 mgb-20 flex jc_between ai_center pdx-20">
+          <div>
+            <text class="icon" style="color: #42aa87;">
+              {{ $item.icon }}
+            </text>
+            {{ $item.key }}
+          </div>
+          <text style="color: #42aa87;">
+            {{ $item.value }}GB
+          </text>
+        </div>
+      </div>
+    </div> -->
   </div>
 </template>
 
 <script>
+  import device from '@system.device'
 export default {
-  private: {
-    title: '欢迎体验快应用开发'
+  data() {
+    return {
+      statusBarHeight: 0,
+      info: {
+        '剩余内存': 20.99,
+        '总计内存': 50.12,
+        '已使用': 29.13,
+      },
+      // 将 info 对象转换为数组，方便快应用遍历
+      infoList: [
+        { key: '剩余内存', value: 20.99, icon: '\uf135' }, // rocket
+        { key: '总计内存', value: 50.12, icon: '\uf15b' }, // file
+        { key: '已使用', value: 29.13, icon: '\uf200' },   // pie-chart
+      ],
+      percent: 0,
+      status: false,
+      timer: null
+    }
   },
 
-  onInit() {}
-}
+  onInit() {
+    device.getInfo({
+      success: function(ret) {
+        console.log(`handling success， brand = ${JSON.stringify(ret)}`)
+        console.log(`handling success， brand = ${ret.brand}`)
+      }
+    })
+  },
+
+  onDestroy() {
+    // 组件销毁时清除定时器
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  },
+    sureClean() {
+      if (this.status) return;
+      
+      this.status = true;
+      this.startCleaning();
+    },
+
+    startCleaning() {
+      this.timer = setInterval(() => {
+        if (this.percent < 100) {
+          let num = Math.ceil(Math.random() * 3);
+          this.percent += (this.percent + num > 100) ? 1 : num;
+          this.$update(); // 手动触发更新
+        } else {
+          clearInterval(this.timer);
+          this.timer = null;
+          this.percent = 0;
+          this.status = false;
+          this.$update();
+        }
+      }, 200);
+    }
+  }
 </script>
 
-<style>
-.wrapper {
-  flex-direction: column;
+<style lang="less">
+.content {
+  padding: 28px;
+  background: linear-gradient(to bottom, #a5eed0, #dcefaf);
+}
+
+.clean_btn {
+  width: 400px;
+  text-align: center;
+  background-color: #fff;
+  height: 80px;
+  line-height: 80px;
+  color: #42aa87;
+  border-radius: 40px;
+  border: 1px solid;
+}
+
+.circle-progress {
+  position: relative;
+  width: 350px;
+  height: 350px;
   justify-content: center;
   align-items: center;
 }
-.title {
-  text-align: center;
-  color: #212121;
+
+.progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.percent-text {
+  font-size: 48px;
+  color: #333;
+  font-weight: bold;
+}
+.icon {
+  font-family: fontawesome;
+  margin-right: 10px;
+}
+.text-24 {
+  font-size: 24px;
+}
+
+.text-22 {
+  font-size: 22px;
+}
+
+.text-888 {
+  color: #888;
+}
+
+.mgt-20 {
+  margin-top: 20px;
+}
+
+.mgt-50 {
+  margin-top: 50px;
+}
+
+.mgt-80 {
+  margin-top: 80px;
+}
+
+.mgb-20 {
+  margin-bottom: 20px;
+}
+
+.pdx-20 {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.pd-20 {
+  padding: 20px;
+}
+
+.flex {
+  display: flex;
+}
+
+.jc_between {
+  justify-content: space-between;
+}
+
+.ai_center {
+  align-items: center;
+}
+
+.jc_center {
+  justify-content: center;
+}
+
+.fd_c {
+  flex-direction: column;
+}
+
+.w {
+  width: 100%;
+}
+
+.h-320 {
+  height: 320px;
+}
+
+.h-80 {
+  height: 80px;
+}
+
+.bg-white {
+  background-color: #fff;
+}
+
+.bg-eee {
+  background-color: #eee;
+}
+
+.radio-30 {
+  border-radius: 30px;
+}
+
+.radio-20 {
+  border-radius: 20px;
 }
 </style>

src/pages/tools/wifiGuanLi/index.ux

@@ -1,16 +1,48 @@
 <template>
   <div class="wrapper">
     <text class="title">{{ title }}</text>
+
   </div>
 </template>
 
 <script>
+import wifi from '@system.wifi'
+import device from '@system.device'
 export default {
   private: {
     title: '欢迎体验快应用开发'
   },
 
-  onInit() {}
+  onInit() {
+    device.getInfo({
+      success: (data) => {
+        // this.deviceInfo = data // 更新数据
+        console.log('设备信息:', JSON.stringify(data))
+      },
+      fail: (err, code) => {
+        console.error('获取失败:', err, '错误码:', code)
+      }
+    })
+    wifi.scan({
+    success: function(res) {
+      console.log('scan success',res)
+    },
+    fail: function(data, code) {
+      console.log(`handling fail, code = ${code}`)
+    }
+  })
+  },
+  getWifiList(){
+    wifi.getConnectedWifi({
+      success: function(data) {
+        console.log(`handling success: ${data.SSID}`)
+      },
+      fail: function(data, code) {
+        console.log(`handling fail, code = ${code}`)
+      }
+    })
+     
+  },
 }
 </script>
 

src/pages/tools/yangShengKeTang/index.ux

@@ -1,20 +1,36 @@
 <template>
   <div class="wrapper">
-    <text class="title">{{ title }}</text>
+    <swiper class="swiper">
+          <image
+            class="swiper-image"
+            src="{{$item}}"
+            for="swiperList"
+          ></image>
+        </swiper>
   </div>
 </template>
 
 <script>
 export default {
   private: {
-    title: '欢迎体验快应用开发'
+    title: '欢迎体验快应用开发',
+    swiperList: [
+	'/assets/images/source/yskt.jpg',
+	'/assets/images/source/yskt.jpg',
+	'/assets/images/source/yskt.jpg',
+	'/assets/images/source/yskt.jpg',
+	'/assets/images/source/yskt.jpg',
+	'/assets/images/source/yskt.jpg',
+],
   },
 
   onInit() {}
 }
 </script>
 
-<style>
+<style lang="less">
+@import '../../../assets/styles/index.less';
+
 .wrapper {
   flex-direction: column;
   justify-content: center;
@@ -24,4 +40,15 @@ export default {
   text-align: center;
   color: #212121;
 }
+.swiper {
+  indicator-selected-color:  #58b3df;
+  indicator-color: #c3c3c3;
+  indicator-size: 12.5px;
+  width: 100%;
+  height: 1000px;
+  /* margin: @gap-4 0; */
+  .swiper-image {
+    border-radius: 10px;
+  }
+}
 </style>

src/pages/tools/yiJianShengDian/index.ux

@@ -1,27 +1,241 @@
 <template>
-  <div class="wrapper">
-    <text class="title">{{ title }}</text>
+  <div class="content">
+    <div style="padding-top: {{statusBarHeight}}px"></div>
+    <div class="box1">
+      <text class="text-24 mgb-20">剩余电量</text>
+      <text class="text-52 text-2283ee">{{ powerNum.toFixed(2) }}%</text>
+      <text class="mgt-16 text-20 text-666">预计可用3小时0分钟</text>
+      <div class="btn cursor" @click="savePower">
+        <text style="color: #fff;font-size: 28px;">立即省电</text> <text style="transform: scale(0.7);color: #fff">▶</text>
+      </div>
+    </div>
+    <div class="box2">
+      <text class="title" style="color: #000;">能耗分析</text>
+      <div class="statistics">
+        <!-- 快应用柱状图实现 -->
+        <div class="chart-container">
+          <div class="chart-column" for="(idx,category) in chartCategories">
+            <div class="column-bar" style="height: {{chartData[idx]}}%;">
+              <text class="column-value">{{chartData[idx]}}</text>
+            </div>
+            <text class="column-label">{{category}}</text>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex mgt-50 jc_between">
+      <text class="btn_s w-320" @click="navTo('pages/tools/shengDianJiQiao')">
+        省电技巧
+      </text>
+      <text class="btn_s w-320" @click="navTo('pages/tools/baoYangJiQiao')">
+        保养技巧
+      </text>
+    </div>
   </div>
 </template>
 
 <script>
+  import router from '@system.router'
+  import brightness from '@system.brightness'
+  import battery from '@system.battery'
 export default {
-  private: {
-    title: '欢迎体验快应用开发'
+  data() {
+    return {
+      statusBarHeight: 0,
+      powerNum: 90,
+      chartCategories: ["待机", "上网", "导航", "影片", "音乐", "打电话", "游戏"],
+      chartData: [66, 36, 31, 33, 13, 34, 10]
+    }
   },
 
-  onInit() {}
-}
+  onInit() {
+     
+  },
+
+  onShow() {
+    var that = this
+       battery.getStatus({
+        success: function(data) {
+          console.log(`handling success: ${data.level}`)
+          that.powerNum = data.level * 100
+        },
+        fail: function(data, code) {
+          console.log(`handling fail, code = ${code}`)
+        }
+      })
+  },
+
+    navTo(uri) {
+      router.push({
+        uri,
+      })
+    },
+
+    savePower() {
+      brightness.getValue({
+        success: function(data) {
+          console.log(`handling success, value = ${data.value}`)
+        },
+        fail: function(data, code) {
+          console.log(`handling fail, code = ${code}`)
+        }
+      })
+      brightness.setValue({
+        value: 50,
+        success: function() {
+          console.log('handling success')
+        },
+        fail: function(data, code) {
+          console.log(`handling fail, code = ${code}`)
+        }
+      })
+         $utils.showToast('开启省电')
+
+    },
+  }
 </script>
 
 <style>
-.wrapper {
+.content {
+  background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
+  padding: 28px;
   flex-direction: column;
+}
+
+.box1 {
+  width: 100%;
+  height: 300px;
+  padding: 40px 30px 10px;
+  border-radius: 30px;
+  background-image: url('/assets/images/index_banner.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;
+  flex-direction: column;
+}
+
+.box1 .btn {
+  position: absolute;
+  left: 380px;
+  transform: translateX(-50%);
+  bottom: 10px;
+  width: 400px;
+  height: 68px;
+  line-height: 68px;
+  border-radius: 60px;
+  text-align: center;
+  color: #ffffff;
   justify-content: center;
+  background: linear-gradient(90deg, #03fedf, #2ed9fb);
+}
+
+.box2 {
+  background-color: rgba(255, 255, 255, 0.6);
+  margin-top: 40px;
+  height: 600px;
+  border-radius: 30px;
+  padding: 50px 30px 20px;
+  flex-direction: column;
+}
+
+.statistics {
+  margin-top: 20px;
+}
+
+/* 图表相关样式 */
+.chart-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  height: 400px;
+  width: 100%;
+  padding: 20px;
+}
+
+.chart-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
   align-items: center;
+  justify-content: flex-end;
+  margin: 0 10px;
+  height: 400px;
+}
+
+.column-bar {
+  width: 40px;
+  background: linear-gradient(to bottom, #2ff8e8, #2fe3f4);
+  border-radius: 20px;
+  position: relative;
 }
-.title {
+
+.column-value {
+  position: absolute;
+  bottom: -30px;
+  width: 100%;
+  text-align: center;
+  font-size: 24px;
+  color: #666;
+}
+
+.column-label {
+  margin-top: 10px;
+  font-size: 24px;
+  color: #666;
+}
+
+/* 通用样式 */
+.text-24 {
+  font-size: 24px;
+}
+
+.text-52 {
+  font-size: 52px;
+}
+
+.text-20 {
+  font-size: 20px;
+}
+
+.text-666 {
+  color: #666666;
+}
+
+.text-2283ee {
+  color: #2283ee;
+}
+
+.mgb-20 {
+  margin-bottom: 20px;
+}
+
+.mgt-16 {
+  margin-top: 16px;
+}
+
+.mgt-50 {
+  margin-top: 50px;
+}
+
+.flex {
+  display: flex;
+}
+
+.jc_between {
+  justify-content: space-between;
+}
+
+.w-320 {
+  width: 320px;
+}
+
+/* 按钮样式 */
+.btn_s {
+  height: 80px;
+  line-height: 80px;
   text-align: center;
-  color: #212121;
+  background: linear-gradient(90deg, #03fedf, #2ed9fb);
+  border-radius: 40px;
+  color: #ffffff;
 }
 </style>

src/pages/tools/yunDongJiBu/index.ux

@@ -1,20 +1,76 @@
 <template>
   <div class="wrapper">
-    <text class="title">{{ title }}</text>
+     <image class="w h-350" style="width: 100%;" src="/assets/images/source/yundongjibu.jpg"></image>
+     <div class="num">
+         <text class="curNum" id="popup" @click="setNum">{{  curNum  }}</text>
+          <text class="totalNum">/100000步</text>
+     </div>
+     <popup target="popup" placement="bottom" show="{{showPopup}}" onstatechange="popupStateChange">
+        <div class="popup_box">
+          <text class="item-container-poptext mgt-10">设置步数</text>
+          <input
+            type="text"
+            id="search-input"
+            class="search-input"
+            placeholder="请输入书名或作者"
+            value="{{curNum}}"
+            onchange="change"
+          />
+          <!-- <div class="flex">
+            <div class="btn btn_cancel">
+              <text>取消</text> 
+            </div>
+            <div class="btn btn_sure" @click="closePopup">
+              <text>确定</text> 
+            </div>
+          </div> -->
+        </div>
+      </popup>
   </div>
 </template>
 
 <script>
 export default {
   private: {
-    title: '欢迎体验快应用开发'
+    title: '欢迎体验快应用开发',
+    curNum:1000,
+    inputNum:1000,
+    showPopup:false,
   },
 
-  onInit() {}
+  onInit() {},
+  // 设置步数
+  setNum(){
+
+  },
+  change(e){
+    console.log('e',e)
+    this.curNum = e.text
+  },
+   // 打开Popup
+    openPopup() {
+      this.showPopup = true;
+      console.log('弹窗已打开');
+    },
+    
+    // 关闭Popup
+    closePopup() {
+      this.showPopup = false;
+      console.log('弹窗已关闭');
+    },
+    
+    // Popup状态变化回调
+    popupStateChange(e) {
+      console.log('弹窗状态变化:', e.state);
+      if (e.state === 'hide') {
+        // 确保状态同步
+        this.showPopup = false;
+      }
+    }
 }
 </script>
 
-<style>
+<style lang="less">
 .wrapper {
   flex-direction: column;
   justify-content: center;
@@ -24,4 +80,46 @@ export default {
   text-align: center;
   color: #212121;
 }
+.num{
+  position: absolute;
+  top: 490px;
+  left: 300px;
+  flex-direction: column;
+  .curNum{
+    font-size: 50px;
+    color: #000;
+    font-weight: bold;
+  }
+  .totalNum{
+    font-size: 26px;
+    color: #999;
+  }
+}
+.popup_box{
+  flex-direction: column;
+  align-items: center;
+  width: 500px;
+  height: 200px;
+  padding-top: 10px;
+  .search-input{
+    border: 1px solid #000000;
+    padding: 20px;
+    margin-top: 20px;
+  }
+  .btn{
+    width: 150px;
+    height: 40px;
+    border: 1px solid #000000;
+    border-radius: 20px;
+    align-items: center;
+    justify-content: center;
+  }
+  .btn_cancel{
+
+  }
+  .btn_sure{
+    color: #ffffff;
+    background: linear-gradient(90deg, #03fedf, #2ed9fb);
+  }
+}
 </style>

src/pages/tools/ziTiDaXiao/index.ux

@@ -1,27 +1,27 @@
 <template>
   <div class="wrapper">
-    <text class="title">{{ title }}</text>
+      <image
+        class="image"
+        src="/assets/images/source/ziti.jpg"
+      ></image>
   </div>
 </template>
 
 <script>
 export default {
   private: {
-    title: '欢迎体验快应用开发'
+    
   },
 
   onInit() {}
 }
 </script>
 
-<style>
-.wrapper {
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.title {
-  text-align: center;
-  color: #212121;
+<style lang="less">
+@import '../../../assets/styles/index.less';
+
+.image {
+  width: 100%;
+  height: 1300px;
 }
 </style>

src/pages/tools/zuiXinBiZhi/index.ux

@@ -0,0 +1,61 @@
+<template>
+  <div class="content">
+      <div class="imgs mgt-40 flex fw_wrap">
+        <image class="w-220 h-280 radio-16" 
+               mode="aspectFill"
+               for="(index,img) in list" 
+               for-item="img" 
+               src="{{img}}">
+        </image>
+      </div>
+  </div>
+</template>
+
+<script>
+  import router from '@system.router'
+export default {
+  data() {
+    return {
+      statusBarHeight: 0,
+      active: 1,
+      list: [
+            'https://img0.baidu.com/it/u=15396030,1143539239&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+            'https://img2.baidu.com/it/u=1320672626,288218548&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+            'https://img0.baidu.com/it/u=1652113119,3226642753&fm=253&app=138&f=JPEG?w=1423&h=800',
+            'https://img0.baidu.com/it/u=3087392912,2682394042&fm=253&app=138&f=JPEG?w=1423&h=800',
+            'https://img1.baidu.com/it/u=3631027001,3666368042&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+            'https://img1.baidu.com/it/u=3637490291,2814538424&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
+            'https://img2.baidu.com/it/u=2114786151,2275385596&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+
+    ],
+      currentImageList: [] // 用于存储当前激活分类的图片列表
+    }
+  },
+  onInit() {
+  },
+  }
+</script>
+
+<style lang="less">
+  .content {
+    min-height: 100%;
+    padding: 28px;
+    background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
+    flex-direction: column;
+  }
+  .imgs{
+    flex-wrap: wrap;
+    image{
+      width: 220px;
+      height: 280px;
+      border-radius: 20px;
+      margin-right: 20px;
+      margin-top: 20px;
+    }
+  }
+  .active {
+    color: #000000;
+    font-weight: 500;
+    font-size: 30px;
+  }
+</style>