Skip to content

Commit aefdf23

Browse files
rtugeekrtugeek
committed
+ Photo Widget
1 parent 8957131 commit aefdf23

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+1324
-1538
lines changed

‎.editorconfig

Lines changed: 4 additions & 685 deletions
Large diffs are not rendered by default.

‎components.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ declare module '@vue/runtime-core' {
1212
ElAvatar: typeof import('element-plus/es')['ElAvatar']
1313
ElButton: typeof import('element-plus/es')['ElButton']
1414
ElCard: typeof import('element-plus/es')['ElCard']
15+
ElCarousel: typeof import('element-plus/es')['ElCarousel']
16+
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
1517
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
1618
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
1719
ElColorPicker: typeof import('element-plus/es')['ElColorPicker']

‎package.json

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,9 @@
2727
"@vueuse/integrations": "^9.6.0",
2828
"@vueuse/motion": "2.0.0-beta.12",
2929
"@vueuse/router": "^9.9.0",
30-
"@widget-js/core": "workspace:*",
31-
"@widget-js/vue3": "workspace:*",
30+
"@widget-js/cli": "^1.1.1",
31+
"@widget-js/core": "^0.5.21",
32+
"@widget-js/vue3": "^0.5.21",
3233
"animate.css": "^4.1.1",
3334
"axios": "^1.1.3",
3435
"color": "^4.2.3",
@@ -40,6 +41,7 @@
4041
"lodash": "^4.17.21",
4142
"lunar-typescript": "^1.2.27",
4243
"lyric-resolver": "^0.1.6",
44+
"nanoid": "^4.0.2",
4345
"pinia": "^2.0.23",
4446
"vue": "^3.2.30",
4547
"vue-i18n": "^9.2.2",
@@ -58,8 +60,7 @@
5860
"@vue/cli-service": "~5.0.0",
5961
"@vue/compiler-sfc": "^3.2.45",
6062
"@vue/eslint-config-typescript": "^9.1.0",
61-
"@widget-js/cli": "^1.0.7",
62-
"@widget-js/vite-plugin-widget": "^1.0.3",
63+
"@widget-js/vite-plugin-widget": "^1.0.4",
6364
"@widget-js/webpack-plugin": "^1.0.5",
6465
"autoprefixer": "^10.4.13",
6566
"css-loader": "^6.7.2",
@@ -84,4 +85,4 @@
8485
"webpack": "^5.74.0",
8586
"webpack-cli": "^4.10.0"
8687
}
87-
}
88+
}

‎public/images/photo1.jpg

84.4 KB
Loading

‎public/images/photo2.jpg

84.2 KB
Loading

‎public/images/photo3.jpg

53.4 KB
Loading

‎public/images/preview_phone_reminder.png

18.2 KB
Loading

‎public/images/preview_sit_reminder.png

14.8 KB
Loading

‎src/common/useBrowserWindowAnimation.ts

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { ref, watch } from 'vue'
2+
import { CubicBezierPoints, EasingFunction, useTransition } from '@vueuse/core'
3+
import { BrowserWindowApi } from '@widget-js/core'
4+
import { MaybeRef } from '@vueuse/shared'
5+
6+
export interface UseBrowserWindowAnimationOptions {
7+
transition?: MaybeRef<EasingFunction | CubicBezierPoints>
8+
duration?: MaybeRef<number>
9+
delay?: MaybeRef<number>
10+
/**
11+
* Disables the transition
12+
*/
13+
disabled?: MaybeRef<boolean>
14+
}
15+
16+
export function useBrowserWindowAnimation(options: UseBrowserWindowAnimationOptions) {
17+
const x = ref(0)
18+
const y = ref(0)
19+
const width = ref(600)
20+
const height = ref(800)
21+
const ready = ref(false)
22+
23+
const animationX = useTransition(x, options)
24+
const animationY = useTransition(y, options)
25+
const animationWidth = useTransition(width, options)
26+
const animationHeight = useTransition(height, options)
27+
28+
BrowserWindowApi.getBounds().then((bounds) => {
29+
x.value = bounds.x
30+
y.value = bounds.y
31+
width.value = bounds.width
32+
height.value = bounds.height
33+
ready.value = true
34+
})
35+
36+
watch([animationX, animationY, animationWidth, animationHeight], async ([x, y, width, height]) => {
37+
if (ready.value) {
38+
await BrowserWindowApi.setBounds({ x, y, width, height }, false)
39+
}
40+
})
41+
42+
return { ready, x, y, width, height }
43+
}

‎src/widgets/birthday-list/BirthdayListConfigView.vue

Lines changed: 64 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
11
<template>
2-
<widget-edit-dialog :widget-params="widgetParams" :widget-data="widgetData"
3-
:option="widgetConfigOption"
4-
@confirm="onSaveClick()"
5-
:enable-background="true">
2+
<widget-edit-dialog
3+
:widget-params="widgetParams"
4+
:widget-data="widgetData"
5+
:option="widgetConfigOption"
6+
@confirm="onSaveClick()"
7+
:enable-background="true">
68
<template v-slot:widget>
79
<!-- 组件配置内容 -->
8-
<birthday-list-widget :style="{width:`${widgetParams.widthPx}px`,height:`${widgetParams.heightPx}px`}"
9-
:border-radius="widgetData.borderRadius"
10-
:birthday-list-data="widgetData"
11-
:background-color="widgetData.backgroundColor"/>
10+
<birthday-list-widget
11+
:style="{ width: `${widgetParams.widthPx}px`, height: `${widgetParams.heightPx}px` }"
12+
:border-radius="widgetData.borderRadius"
13+
:birthday-list-data="widgetData"
14+
:background-color="widgetData.backgroundColor" />
1215
</template>
1316
<template v-slot:form>
1417
<el-form label-width="120px">
1518
<el-form-item label="左上角标题">
16-
<el-input v-model="widgetData.title" maxlength="6"/>
19+
<el-input v-model="widgetData.title" maxlength="6" />
1720
</el-form-item>
1821
</el-form>
1922
<!-- <div style="color: red">注意：目前农历暂不支持，等待后续开放</div> -->
20-
<el-table :data="widgetData.peopleList" max-height="250"
21-
row-key="createdAt"
22-
style="width: 100%;" table-layout="auto">
23+
<el-table
24+
:data="widgetData.peopleList"
25+
max-height="250"
26+
row-key="createdAt"
27+
style="width: 100%"
28+
table-layout="auto">
2329
<el-table-column align="center" width="100">
2430
<template #header>
2531
<el-button size="small" type="primary" @click="add">新增</el-button>
@@ -32,26 +38,26 @@
3238
<template #default="scope">{{ scope.$index + 1 }}</template>
3339
</el-table-column>
3440
<el-table-column label="姓名" prop="name" align="center">
35-
<template #default="{row}">
36-
<el-input v-model="row.name" maxlength="10"/>
41+
<template #default="{ row }">
42+
<el-input v-model="row.name" maxlength="10" />
3743
</template>
3844
</el-table-column>
3945
<el-table-column label="农历" prop="type" align="center">
40-
<template #default="{row}">
46+
<template #default="{ row }">
4147
<el-radio-group v-model="row.type">
4248
<el-radio label="Y" size="large">农历</el-radio>
4349
<el-radio label="N" size="large">公历</el-radio>
4450
</el-radio-group>
4551
</template>
4652
</el-table-column>
4753
<el-table-column label="月" prop="month" align="center">
48-
<template #default="{row}">
49-
<el-input-number v-model="row.month" :min="1" :max="12"/>
54+
<template #default="{ row }">
55+
<el-input-number v-model="row.month" :min="1" :max="12" />
5056
</template>
5157
</el-table-column>
5258
<el-table-column label="日" prop="day" align="center">
53-
<template #default="{row}">
54-
<el-input-number v-model="row.day" :min="1" :max="31"/>
59+
<template #default="{ row }">
60+
<el-input-number v-model="row.day" :min="1" :max="31" />
5561
</template>
5662
</el-table-column>
5763
</el-table>
@@ -60,61 +66,74 @@
6066
</template>
6167

6268
<script lang="ts">
63-
import {NotificationApi, WidgetDataRepository} from "@widget-js/core";
64-
import BirthdayListWidget from "./BirthdayListWidget.vue";
65-
import BirthdayListData, {BirthdayPeople} from "@/widgets/birthday-list/model/BirthdayListData";
66-
import {useWidget, WidgetConfigOption, WidgetEditDialog} from "@widget-js/vue3";
67-
import {reactive} from "vue";
69+
import {NotificationApi, WidgetDataApi} from '@widget-js/core'
70+
import BirthdayListWidget from './BirthdayListWidget.vue'
71+
import BirthdayListData, { BirthdayPeople } from '@/widgets/birthday-list/model/BirthdayListData'
72+
import { useWidget, WidgetConfigOption, WidgetEditDialog } from '@widget-js/vue3'
6873
6974
export default {
70-
name: "BirthdayListConfigView",
71-
components: {BirthdayListWidget, WidgetEditDialog},
75+
name: 'BirthdayListConfigView',
76+
components: { BirthdayListWidget, WidgetEditDialog },
7277
setup() {
73-
const widgetConfigOption = new WidgetConfigOption({backgroundColor: true, borderRadius: false})
74-
const {widgetData, widgetParams} = useWidget(BirthdayListData, {
75-
loadDataByWidgetName: true });
76-
return {widgetData, widgetParams, widgetConfigOption}
78+
const widgetConfigOption = new WidgetConfigOption({ backgroundColor: true, borderRadius: false })
79+
const { widgetData, widgetParams } = useWidget(BirthdayListData, {
80+
loadDataByWidgetName: true
81+
})
82+
return { widgetData, widgetParams, widgetConfigOption }
7783
},
7884
mounted() {
79-
document.title = "组件设置"
85+
document.title = '组件设置'
8086
},
8187
methods: {
8288
/**
8389
* 点击保存按钮
8490
*/
8591
async onSaveClick() {
86-
let that = this;
92+
let that = this
8793
if (that.widgetData.peopleList && that.widgetData.peopleList.length > 0) {
88-
var names = [] as any[];
94+
var names = [] as any[]
8995
for (let index in that.widgetData.peopleList) {
9096
if (!that.widgetData.peopleList[index].name) {
9197
NotificationApi.error('第' + (parseInt(index) + 1) + '行【姓名】不能为空！')
92-
return;
98+
return
9399
}
94100
if (names.indexOf(that.widgetData.peopleList[index].name) >= 0) {
95-
NotificationApi.error('第' + (parseInt(index) + 1) + '行与第' + (names.indexOf(that.widgetData.peopleList[index].name) + 1) + '行【姓名】名字重复！')
96-
return;
101+
NotificationApi.error(
102+
'第' +
103+
(parseInt(index) + 1) +
104+
'行与第' +
105+
(names.indexOf(that.widgetData.peopleList[index].name) + 1) +
106+
'行【姓名】名字重复！'
107+
)
108+
return
97109
}
98110
if (!that.widgetData.peopleList[index].month) {
99111
NotificationApi.error('第' + (parseInt(index) + 1) + '行【月】不能为空！')
100-
return;
112+
return
101113
}
102114
if (!that.widgetData.peopleList[index].day) {
103115
NotificationApi.error('第' + (parseInt(index) + 1) + '行【日】不能为空！')
104-
return;
116+
return
105117
}
106-
names.push(that.widgetData.peopleList[index].name);
118+
names.push(that.widgetData.peopleList[index].name)
107119
}
108120
}
109-
await WidgetDataRepository.saveByName(this.widgetData);
110-
window.close();
121+
await WidgetDataApi.saveByName(this.widgetData)
122+
window.close()
111123
},
112124
add() {
113-
const newPeople: BirthdayPeople = {name: '', type: 'N', month: 1, day: 1, qty: 0, createdAt: new Date().getTime()}
114-
this.widgetData.peopleList.splice(0, 0, newPeople);
125+
const newPeople: BirthdayPeople = {
126+
name: '',
127+
type: 'N',
128+
month: 1,
129+
day: 1,
130+
qty: 0,
131+
createdAt: new Date().getTime()
132+
}
133+
this.widgetData.peopleList.splice(0, 0, newPeople)
115134
},
116135
del(scope) {
117-
this.widgetData.peopleList.splice(scope.$index, 1);
136+
this.widgetData.peopleList.splice(scope.$index, 1)
118137
}
119138
},
120139
watch: {
@@ -126,10 +145,6 @@ export default {
126145
}
127146
}
128147
}
129-
130-
131148
</script>
132149

133-
<style scoped>
134-
135-
</style>
150+
<style scoped></style>

0 commit comments

Comments
 (0)