🎨 Replace Mingcute icons with Iconpark icons

Author: rtugeek

package.json

@@ -84,12 +84,11 @@
     "webpack-cli": "^4.10.0"
   },
   "simple-git-hooks": {
-    "pre-commit": "npx lint-staged",
-    "pre-push": "npm run remote"
+    "pre-commit": "npm run remote && npx lint-staged"
   },
   "lint-staged": {
     "*.{js,ts,tsx,vue,md}": [
       "eslint --cache --fix"
     ]
   }
-}
+}

public/widget.json

@@ -110,12 +110,12 @@
       "routes": []
     },
     {
-      "name": "cn.widgetjs.widgets.sit_reminder",
+      "name": "cn.widgetjs.widgets.time_progress",
       "title": {
-        "zh-CN": "久坐提醒"
+        "zh-CN": "时间进度"
       },
       "description": {
-        "zh-CN": "设置间隔，定时提醒，适合长期久坐的人群"
+        "zh-CN": "年、月、周、日进度剩余百分比"
       },
       "keywords": [
         "recommend"
@@ -128,26 +128,26 @@
       "maxWidth": 4,
       "webviewTag": false,
       "maxHeight": 2,
-      "minWidth": 4,
+      "minWidth": 2,
       "minHeight": 2,
       "movable": true,
       "singleton": false,
       "resizable": true,
-      "path": "/widget/sit_reminder",
+      "path": "/widget/time_progress",
       "meta": {},
-      "backgroundThrottling": false,
-      "previewImage": "/images/preview_sit_reminder.png",
-      "supportDeployMode": 65536,
-      "configPagePath": "/widget/config/sit_reminder",
+      "backgroundThrottling": true,
+      "previewImage": "/images/preview_time_progress.png",
+      "supportDeployMode": 17,
+      "configPagePath": "/widget/config/time_progress",
       "routes": []
     },
     {
-      "name": "cn.widgetjs.widgets.time_progress",
+      "name": "cn.widgetjs.widgets.sit_reminder",
       "title": {
-        "zh-CN": "时间进度"
+        "zh-CN": "久坐提醒"
       },
       "description": {
-        "zh-CN": "年、月、周、日进度剩余百分比"
+        "zh-CN": "设置间隔，定时提醒，适合长期久坐的人群"
       },
       "keywords": [
         "recommend"
@@ -160,17 +160,17 @@
       "maxWidth": 4,
       "webviewTag": false,
       "maxHeight": 2,
-      "minWidth": 2,
+      "minWidth": 4,
       "minHeight": 2,
       "movable": true,
       "singleton": false,
       "resizable": true,
-      "path": "/widget/time_progress",
+      "path": "/widget/sit_reminder",
       "meta": {},
-      "backgroundThrottling": true,
-      "previewImage": "/images/preview_time_progress.png",
-      "supportDeployMode": 17,
-      "configPagePath": "/widget/config/time_progress",
+      "backgroundThrottling": false,
+      "previewImage": "/images/preview_sit_reminder.png",
+      "supportDeployMode": 65536,
+      "configPagePath": "/widget/config/sit_reminder",
       "routes": []
     },
     {

src/widgets/birthday-list/BirthdayListWidget.vue

@@ -7,6 +7,7 @@ import {
   LunarMonth,
 } from 'lunar-typescript'
 import type { PropType } from 'vue'
+import { AddOne, BirthdayCake } from '@icon-park/vue-next'
 import type { BirthdayPeople } from '@/widgets/birthday-list/model/BirthdayListData'
 import type BirthdayListData from '@/widgets/birthday-list/model/BirthdayListData'
 
@@ -18,6 +19,7 @@ import type BirthdayListData from '@/widgets/birthday-list/model/BirthdayListDat
  */
 export default {
   name: 'BirthdayListWidget',
+  components: { AddOne, BirthdayCake },
   props: { birthdayListData: { type: Object as PropType<BirthdayListData> } },
   emits: ['add'],
   computed: {
@@ -85,7 +87,7 @@ export default {
     <img class="image" src="./images/balloon.png">
     <div class="title">
       <span>{{ birthdayListData.title }}</span>
-      <div class="add mgc_add_circle_line" @click="$emit('add')" />
+      <AddOne class="add cursor-pointer" @click="$emit('add')" />
     </div>
     <div class="people-list" style="flex:1; display:flex; flex-flow:column; overflow: auto;">
       <template v-for="item in peopleList" :key="item.createdAt">
@@ -117,7 +119,7 @@ export default {
           </div>
           <div class="right" :class="{ active: item.qty == 0 }">
             <template v-if="item.qty == 0">
-              <span class="icon mgc_cake_line" />
+              <BirthdayCake class="icon" />
             </template>
             <template v-else>
               <div class="qty">
@@ -174,24 +176,13 @@ body * {
     font-weight: bold;
     align-items: center;
     margin-bottom: 16px;
+    gap: 8px;
 
     .add {
-      width: 30px;
-      height: 30px;
+      width: 24px;
+      height: 24px;
       display: flex;
       align-items: center;
-      background-size: 100% 100%;
-      //background-image: url(../../assets/widget/birthday_list/add.png);
-      margin-left: 6px;
-
-      &:before {
-        font-size: 24px;
-        color: white;
-      }
-
-      &:hover {
-        cursor: pointer
-      }
     }
   }
 
@@ -289,10 +280,7 @@ body * {
         display: flex;
         justify-content: center;
         align-items: center;
-
-        .mgc_cake_line:before {
-          color: white;
-        }
+        color: #FF9716;
       }
 
       .qty {

src/widgets/dynamic-island/components/MessageNotification.vue

@@ -1,33 +1,18 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { IconPark } from '@icon-park/vue-next/es/all'
 
-const props = defineProps({
+defineProps({
   type: {
     type: String,
     default: 'info',
   },
   message: { type: String },
 })
-
-const icon = computed(() => {
-  if (props.type == 'error') {
-    return 'close_circle_line'
-  }
-  else if (props.type == 'warning') {
-    return 'warning_line'
-  }
-  else if (props.type == 'success') {
-    return 'check_circle_line'
-  }
-  else {
-    return 'information_line'
-  }
-})
 </script>
 
 <template>
   <div class="message-notification ">
-    <span :class="`icon mgc_${icon} ${type}`" />
+    <IconPark class="icon" :type="type" theme="outline" />
     <div class="message">
       {{ message }}
     </div>

src/widgets/dynamic-island/components/ReminderNotification.vue

@@ -6,6 +6,7 @@ import {
   NotificationApi,
   NotificationApiEvent,
 } from '@widget-js/core'
+import { IconPark } from '@icon-park/vue-next/es/all'
 
 const props = defineProps({
   notification: {
@@ -38,7 +39,8 @@ function confirm() {
 <template>
   <div class="message-notification">
     <div class="info">
-      <span v-if="notification.icon" :class="`icon mgc_${notification.icon}`" />
+      <IconPark v-if="notification.icon" class="icon" :type="notification.icon" theme="outline" />
+
       <div class="text">
         <div class="title">
           {{ notification.title }}
@@ -112,6 +114,14 @@ function confirm() {
     padding-left: 16px;
     padding-right: 16px;
 
+    .icon {
+      font-size: 36px;
+      margin-right: 16px;
+      display: flex;
+      justify-items: center;
+      color: #5d8ac8;
+    }
+
     .text {
       .title {
         color: white;
@@ -133,13 +143,5 @@ function confirm() {
     }
   }
 
-  .icon {
-    font-size: 36px;
-    margin-right: 16px;
-
-    &:before {
-      color: #5d8ac8;
-    }
-  }
 }
 </style>

src/widgets/phone-reminder/PhoneReminderConfigView.vue

@@ -11,6 +11,7 @@ import {
   WidgetApi,
 } from '@widget-js/core'
 import { ref } from 'vue'
+import { Headset } from '@icon-park/vue-next'
 import type { PhoneReminder } from '@/widgets/phone-reminder/model/PhoneReminder'
 import { PhoneReminderData } from '@/widgets/phone-reminder/model/PhoneReminder'
 import PhoneReminderWidgetDefine from '@/widgets/phone-reminder/PhoneReminder.widget'
@@ -23,6 +24,7 @@ export default {
   components: {
     TimePickerDialog,
     WidgetEditDialog,
+    Headset,
   },
   setup() {
     BrowserWindowApi.setup({
@@ -133,7 +135,7 @@ export default {
           <template #default="scope">
             <el-button type="primary" circle @click="listen(scope.row)">
               <template #icon>
-                <span class="icon mgc_headphone_line" />
+                <Headset />
               </template>
             </el-button>
           </template>

src/widgets/water-reminder/WaterReminder.widget.ts

@@ -16,7 +16,7 @@ const url = '/widget/water_reminder'
 // 配置页路由地址
 const configUrl = '/widget/config/water_reminder'
 // 组件关键词
-const WaterReminderWidgetDefine = new Widget({
+const WaterReminderWidget = new Widget({
   name,
   title,
   description,
@@ -34,4 +34,4 @@ const WaterReminderWidgetDefine = new Widget({
   configPagePath: configUrl,
 })
 
-export default WaterReminderWidgetDefine
+export default WaterReminderWidget

src/widgets/water-reminder/WaterReminderWidget.vue src/widgets/water-reminder/WaterReminderComponent.vue

@@ -1,10 +1,10 @@
 import type { RouteRecordRaw } from 'vue-router'
-import WaterReminderWidgetDefine from './WaterReminder.widget'
+import WaterReminderWidget from './WaterReminder.widget'
 
-const url = WaterReminderWidgetDefine.path
-const name = WaterReminderWidgetDefine.name
+const url = WaterReminderWidget.path
+const name = WaterReminderWidget.name
 
-const configUrl = WaterReminderWidgetDefine.configPagePath
+const configUrl = WaterReminderWidget.configPagePath
 
 const WaterReminderWidgetRoutes: RouteRecordRaw[] = [
   {

src/widgets/water-reminder/WaterReminderWidgetRoutes.ts

@@ -18,14 +18,17 @@ import {
 } from '@widget-js/core'
 import dayjs from 'dayjs'
 import { useIntervalFn } from '@vueuse/core'
-import WaterReminderWidget from './WaterReminderWidget.vue'
+import WaterReminderComponent from './WaterReminderComponent.vue'
 import { WaterReminderModel } from '@/widgets/water-reminder/model/WaterReminderModel'
-import WaterReminderWidgetDefine from '@/widgets/water-reminder/WaterReminder.widget'
+import WaterReminderWidget from '@/widgets/water-reminder/WaterReminder.widget'
 
 let lastReminderAt = dayjs()
 const cup = ref(0)
-
+const defaultData = new WaterReminderModel()
+defaultData.theme.backgroundColor = '#fff'
+defaultData.theme.color = '#092239'
 const { widgetData } = useWidget(WaterReminderModel, {
+  defaultData,
   onDataLoaded: (data) => {
     cup.value = data?.getTodayHistory() ?? 0
     if (data?.lastReminderAt) {
@@ -51,7 +54,7 @@ watch(cup, (newValue) => {
   lastReminderAt = dayjs()
 })
 
-const name = WaterReminderWidgetDefine.name
+const name = WaterReminderWidget.name
 const cancelBroadcast = `${name}.cancel`
 const okBroadcast = `${name}.ok`
 const {
@@ -68,7 +71,7 @@ const {
     NotificationApi.reminder(
       '喝水提醒',
       '起来喝杯水吧！',
-      'drop_line',
+      'tea-drink',
       '关闭',
       '喝一杯',
       cancelBroadcast,
@@ -94,7 +97,7 @@ onMounted(() => {
 
 <template>
   <WidgetWrapper>
-    <WaterReminderWidget v-bind="widgetData.theme" v-model:cup="cup" />
+    <WaterReminderComponent v-bind="widgetData.theme" v-model:cup="cup" />
   </WidgetWrapper>
 </template>
 

src/widgets/water-reminder/WaterReminderWidgetView.vue

@@ -1,5 +1,6 @@
 import { WidgetData } from '@widget-js/core'
 import dayjs from 'dayjs'
+import WaterReminderWidget from '@/widgets/water-reminder/WaterReminder.widget'
 
 export class WaterReminderModel extends WidgetData {
   targetCup = 8
@@ -11,6 +12,10 @@ export class WaterReminderModel extends WidgetData {
   lastReminderAt: string = dayjs().toISOString()
   enableReminder = true
 
+  constructor(id?: string) {
+    super(WaterReminderWidget.name, id)
+  }
+
   getTodayKey(): string {
     return dayjs().format('YYYY/MM/DD')
   }