Skip to content

Commit 2bdcfd8

Browse files
rtugeekrtugeek
committed
🎨 Refactor and optimize TODO list
1 parent d81d9e4 commit 2bdcfd8

13 files changed

+157
-120
lines changed

‎package.json

+6-5
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
"@vueuse/integrations": "^10.5.0",
2323
"@vueuse/motion": "2.0.0-beta.12",
2424
"@vueuse/router": "^9.9.0",
25-
"@widget-js/core": "workspace:*",
26-
"@widget-js/vue3": "workspace:*",
25+
"@widget-js/core": "^0.11.21",
26+
"@widget-js/vue3": "^0.11.21-rc.2",
2727
"animate.css": "^4.1.1",
2828
"axios": "^1.6.0",
2929
"color": "^4.2.3",
@@ -32,6 +32,7 @@
3232
"dayjs": "^1.11.6",
3333
"driver.js": "^0.9.8",
3434
"element-plus": "^2.2.26",
35+
"localforage": "^1.10.0",
3536
"lodash-es": "^4.17.21",
3637
"lunar-typescript": "^1.6.6",
3738
"lyric-resolver": "^0.1.6",
@@ -57,7 +58,7 @@
5758
"@vue/cli-plugin-typescript": "~5.0.0",
5859
"@vue/cli-service": "~5.0.0",
5960
"@vue/compiler-sfc": "^3.2.45",
60-
"@widget-js/vite-plugin-widget": "workspace:*",
61+
"@widget-js/vite-plugin-widget": "^1.2.8",
6162
"autoprefixer": "^10.4.13",
6263
"css-loader": "^6.7.2",
6364
"eslint": "8.48.0",
@@ -69,9 +70,9 @@
6970
"sass-loader": "^12.0.0",
7071
"simple-git-hooks": "^2.9.0",
7172
"style-loader": "^3.3.1",
72-
"tailwindcss": "^3.2.7",
7373
"ts-loader": "^8.3.0",
7474
"typescript": "^5.2.2",
75+
"unocss": "^0.51.13",
7576
"unplugin-auto-import": "^0.11.4",
7677
"unplugin-vue-components": "^0.22.9",
7778
"vite": "^5.0.5",
@@ -91,4 +92,4 @@
9192
"eslint --cache --fix"
9293
]
9394
}
94-
}
95+
}

‎public/widget.json

+18-18
Original file line numberDiff line numberDiff line change
@@ -110,12 +110,12 @@
110110
"routes": []
111111
},
112112
{
113-
"name": "cn.widgetjs.widgets.time_progress",
113+
"name": "cn.widgetjs.widgets.sit_reminder",
114114
"title": {
115-
"zh-CN": "时间进度"
115+
"zh-CN": "久坐提醒"
116116
},
117117
"description": {
118-
"zh-CN": "年、月、周、日进度剩余百分比"
118+
"zh-CN": "设置间隔，定时提醒，适合长期久坐的人群"
119119
},
120120
"keywords": [
121121
"recommend"
@@ -128,26 +128,26 @@
128128
"maxWidth": 4,
129129
"webviewTag": false,
130130
"maxHeight": 2,
131-
"minWidth": 2,
131+
"minWidth": 4,
132132
"minHeight": 2,
133133
"movable": true,
134134
"singleton": false,
135135
"resizable": true,
136-
"path": "/widget/time_progress",
136+
"path": "/widget/sit_reminder",
137137
"meta": {},
138-
"backgroundThrottling": true,
139-
"previewImage": "/images/preview_time_progress.png",
140-
"supportDeployMode": 17,
141-
"configPagePath": "/widget/config/time_progress",
138+
"backgroundThrottling": false,
139+
"previewImage": "/images/preview_sit_reminder.png",
140+
"supportDeployMode": 65536,
141+
"configPagePath": "/widget/config/sit_reminder",
142142
"routes": []
143143
},
144144
{
145-
"name": "cn.widgetjs.widgets.sit_reminder",
145+
"name": "cn.widgetjs.widgets.time_progress",
146146
"title": {
147-
"zh-CN": "久坐提醒"
147+
"zh-CN": "时间进度"
148148
},
149149
"description": {
150-
"zh-CN": "设置间隔，定时提醒，适合长期久坐的人群"
150+
"zh-CN": "年、月、周、日进度剩余百分比"
151151
},
152152
"keywords": [
153153
"recommend"
@@ -160,17 +160,17 @@
160160
"maxWidth": 4,
161161
"webviewTag": false,
162162
"maxHeight": 2,
163-
"minWidth": 4,
163+
"minWidth": 2,
164164
"minHeight": 2,
165165
"movable": true,
166166
"singleton": false,
167167
"resizable": true,
168-
"path": "/widget/sit_reminder",
168+
"path": "/widget/time_progress",
169169
"meta": {},
170-
"backgroundThrottling": false,
171-
"previewImage": "/images/preview_sit_reminder.png",
172-
"supportDeployMode": 65536,
173-
"configPagePath": "/widget/config/sit_reminder",
170+
"backgroundThrottling": true,
171+
"previewImage": "/images/preview_time_progress.png",
172+
"supportDeployMode": 17,
173+
"configPagePath": "/widget/config/time_progress",
174174
"routes": []
175175
},
176176
{

‎src/main.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import 'element-plus/dist/index.css'
44
import 'animate.css'
55
import { WidgetJsPlugin } from '@widget-js/vue3'
66
import '@widget-js/vue3/dist/style.css'
7-
import '@widget-js/vue3/dist/mingcute_icon/MingCute.css'
87
import { createPinia } from 'pinia'
98
import { MotionPlugin } from '@vueuse/motion'
109
import ElementPlus from 'element-plus'
1110
import './index.css'
1211
import router from './router'
1312
import 'dayjs/locale/zh-cn.js'
1413
import App from './App.vue'
14+
import 'virtual:uno.css'
1515

1616
dayjs.locale('cn')
1717

‎src/widgets/photo/PhotoWidgetView.vue

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
useWidget,
55
useWidgetSize,
66
} from '@widget-js/vue3'
7+
import shuffle from 'lodash-es/shuffle'
78
import { ref } from 'vue'
89
import {
910
FileApi,
@@ -20,7 +21,7 @@ const {
2021
onDataLoaded: (data) => {
2122
if (data && data.directory) {
2223
FileApi.readDirectory(data.directory, { ignoreDir: true, traverseDir: false }).then((rootFile) => {
23-
photos.value = rootFile.children?.filter((file) => {
24+
const pathArr = rootFile.children?.filter((file) => {
2425
const ignoreCase = file.absolutePath.toLowerCase()
2526
return (
2627
ignoreCase.endsWith('.jpg')
@@ -29,6 +30,7 @@ const {
2930
|| ignoreCase.endsWith('.png')
3031
)
3132
}).map(file => file.absolutePath) ?? []
33+
photos.value = data.random ? shuffle(pathArr) : pathArr
3234
})
3335
showGuide.value = false
3436
}
@@ -54,7 +56,7 @@ async function showConfig() {
5456
indicator-position="none"
5557
:interval="widgetData.duration"
5658
>
57-
<el-carousel-item v-for="item in photos" :key="item">
59+
<el-carousel-item v-for="(item, index) in photos" :key="`${item}${index}`">
5860
<el-image fit="cover" class="photo-item" :src="item" alt="" />
5961
</el-carousel-item>
6062
<el-carousel-item v-if="showGuide" @click="showConfig">

‎src/widgets/todo-list/TodoList.widget.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const url = '/widget/todo_list'
1616
// 配置页路由地址
1717
const configUrl = '/widget/config/todo_list'
1818
// 组件关键词
19-
const TodoListWidgetDefine = new Widget({
19+
const TodoListWidget = new Widget({
2020
name,
2121
title,
2222
description,
@@ -33,4 +33,4 @@ const TodoListWidgetDefine = new Widget({
3333
configPagePath: configUrl,
3434
})
3535

36-
export default TodoListWidgetDefine
36+
export default TodoListWidget

‎src/widgets/todo-list/TodoListConfigView.vue

+10-13
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,14 @@ import {
99
WidgetData,
1010
WidgetDataApi,
1111
} from '@widget-js/core'
12-
import { reactive } from 'vue'
1312
1413
export default {
1514
name: '',
1615
components: { WidgetEditDialog },
1716
setup() {
1817
BrowserWindowApi.setup({
1918
width: 600,
20-
height: 400,
19+
height: 500,
2120
center: true,
2221
})
2322
const {
@@ -26,17 +25,15 @@ export default {
2625
} = useWidget(WidgetData, { loadDataByWidgetName: true })
2726
2827
// 修改成需要设置组件参数配置
29-
const widgetConfigOption = reactive(
30-
new WidgetConfigOption({
31-
custom: false,
32-
theme: {
33-
backgroundColor: true,
34-
borderRadius: true,
35-
color: true,
36-
dividerColor: true,
37-
},
38-
}),
39-
)
28+
const widgetConfigOption = new WidgetConfigOption({
29+
custom: false,
30+
theme: {
31+
backgroundColor: true,
32+
borderRadius: true,
33+
color: true,
34+
dividerColor: true,
35+
},
36+
})
4037
4138
return {
4239
widgetData,

‎src/widgets/todo-list/TodoListWidgetRoutes.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import type { RouteRecordRaw } from 'vue-router'
2-
import TodoListWidgetDefine from './TodoList.widget'
2+
import TodoListWidget from './TodoList.widget'
33

4-
const url = TodoListWidgetDefine.path
5-
const name = TodoListWidgetDefine.name
4+
const url = TodoListWidget.path
5+
const name = TodoListWidget.name
66

7-
const configUrl = TodoListWidgetDefine.configPagePath
7+
const configUrl = TodoListWidget.configPagePath
88

99
const TodoListWidgetRoutes: RouteRecordRaw[] = [
1010
{

‎src/widgets/todo-list/TodoListWidgetView.vue

+8-18
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts" setup>
22
import { ref } from 'vue'
33
import { useElementSize } from '@vueuse/core'
4+
import { AddOne, ArrowCircleLeft, History } from '@icon-park/vue-next'
45
import type {
56
Todo,
67
TodoUpdate,
@@ -17,7 +18,7 @@ const todoStore = useTodoStore()
1718
1819
const root = ref<HTMLElement>()
1920
20-
const editBox = ref<typeof EditBox>()
21+
const editBox = ref<InstanceType<typeof EditBox>>()
2122
const { height } = useElementSize(root)
2223
2324
function edit(todo: Todo) {
@@ -38,27 +39,23 @@ function saveTodo(data: TodoUpdate) {
3839
<div class="title">
3940
{{ viewType === 'history' ? '历史记录' : '待办事项' }}
4041
</div>
41-
<div class="actions">
42-
<span v-if="viewType === 'history'" class="icon mgc_back_line" @click="viewType = 'default'" />
43-
<span v-else class="icon mgc_history_line" @click="viewType = 'history'" />
44-
<span class="icon mgc_add_circle_line" @click="viewType = 'edit'" />
42+
<div class="actions flex gap-4">
43+
<ArrowCircleLeft v-if="viewType !== 'default'" class="icon" @click="viewType = 'default'" />
44+
<History class="icon" @click="viewType = 'history'" />
45+
<AddOne class="icon" @click="viewType = 'edit'" />
4546
</div>
4647
</div>
4748
<!-- list-body设置高度，解决todo拖动会导致视图上升，这个不知道是electron bug，还是文档流设置不当导致的 -->
4849
<div class="list-body" :height="height - 48">
4950
<el-scrollbar :height="height - 48">
5051
<TodoList
5152
v-show="viewType === 'default'"
52-
:todos="todoStore.todos"
53-
:finished-todos="todoStore.finishedTodos"
5453
@update="todoStore.save"
5554
@edit="edit"
5655
/>
5756

5857
<FinishedTodoList
5958
v-show="viewType === 'history'"
60-
:finished-todos="todoStore.finishedTodos"
61-
:todos="todoStore.todos"
6259
@update="todoStore.save"
6360
/>
6461
<EditBox v-show="viewType === 'edit'" ref="editBox" @cancel="viewType = 'default'" @save="saveTodo($event)" />
@@ -91,15 +88,8 @@ function saveTodo(data: TodoUpdate) {
9188
.actions {
9289
.icon {
9390
cursor: pointer;
94-
95-
&:not(:last-child) {
96-
margin-right: 8px;
97-
}
98-
99-
&:before {
100-
color: var(--widget-color);
101-
font-size: 24px;
102-
}
91+
color: var(--widget-color);
92+
font-size: 24px;
10393
}
10494
}
10595
}

‎src/widgets/todo-list/components/EditBox.vue

+6-6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { Todo } from '@/widgets/todo-list/model/TodoListData'
44
55
const emits = defineEmits(['cancel', 'save'])
66
7-
const content = ref('')
7+
const title = ref('')
88
99
function cancel() {
1010
emits('cancel')
@@ -15,18 +15,18 @@ const todo = ref<Todo | undefined>(undefined)
1515
1616
function setTodo(newTodo: Todo) {
1717
todo.value = newTodo
18-
content.value = newTodo.content
18+
title.value = newTodo.title
1919
}
2020
2121
function reset() {
22-
content.value = ''
22+
title.value = ''
2323
todo.value = undefined
2424
}
2525
2626
function confirm() {
2727
emits('save', {
28-
content: content.value,
29-
todo: todo.value,
28+
title: `${title.value}`,
29+
todoId: todo.value ? `${todo.value.id}` : undefined,
3030
})
3131
reset()
3232
}
@@ -38,7 +38,7 @@ defineExpose({ setTodo })
3838
<div class="add-body">
3939
<el-form label-position="top">
4040
<ElInput
41-
v-model="content"
41+
v-model="title"
4242
type="textarea"
4343
class="todo-input"
4444
maxlength="120"

0 commit comments

Comments
 (0)