更新依赖

Author: rtugeek

.storybook/main.js

@@ -18,6 +18,10 @@ module.exports = {
       use: ['style-loader', 'css-loader', 'sass-loader'],
       include: path.resolve(__dirname, '../'),
     });
+    config.module.rules.push( {
+      test: /\.txt$/i,
+      use: 'raw-loader',
+    });
     config.resolve.plugins = [
       ...(config.resolve.plugins || []),
       new TsconfigPathsPlugin({

.storybook/preview.js

@@ -1,8 +1,14 @@
 import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
-
+import {app} from '@storybook/vue3';
 import 'animate.css'
 import '@widget-js/vue3/dist/mingcute_icon/font/Mingcute.css';
+import 'element-plus/dist/index.css'
+
+import ElementPlus from 'element-plus'
+import {createPinia} from "pinia";
+import '../src/common/dayjs-extend';
 
+app.use(ElementPlus).use(createPinia());
 const customViewports = {
   widget1x1: {
     name: '组件1x1',

README.md

@@ -54,7 +54,7 @@ pnpm storybook
 
 ### 创建自己的组件
 ```shell
-pnpm widget
+pnpm widget create
 ```
 
 ### 组件列表

components.d.ts

@@ -7,6 +7,17 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

package.json

@@ -28,7 +28,7 @@
   "dependencies": {
     "@vueuse/core": "^9.4.0",
     "@vueuse/integrations": "^9.6.0",
-    "@widget-js/core": "^0.1.14",
+    "@widget-js/core": "^0.1.15",
     "@widget-js/vue3": "^0.0.11",
     "animate.css": "^4.1.1",
     "axios": "^1.1.3",
@@ -40,6 +40,8 @@
     "element-plus": "^2.2.26",
     "lodash": "^4.17.21",
     "lunar-typescript": "^1.2.23",
+    "lyric-resolver": "^0.1.6",
+    "pinia": "^2.0.23",
     "vue": "^3.2.30",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.0.3"
@@ -70,7 +72,8 @@
     "@vue/cli-service": "~5.0.0",
     "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-typescript": "^9.1.0",
-    "@widget-js/cli": "^1.0.4",
+    "@widget-js/cli": "^1.0.5",
+    "@widget-js/webpack-plugin": "^1.0.1",
     "archiver": "^5.3.1",
     "babel-loader": "^8.3.0",
     "css-loader": "^6.7.2",

public/audio/hangup.m4a

@@ -5,6 +5,7 @@ import 'animate.css';
 import {WidgetJsPlugin} from "@widget-js/vue3";
 import '@widget-js/vue3/dist/style.css'
 import '@widget-js/vue3/dist/mingcute_icon/font/Mingcute.css'
+import {createPinia} from "pinia";
 
-createApp(App).use(WidgetJsPlugin).use(router).mount('#app')
+createApp(App).use(WidgetJsPlugin).use(router).use(createPinia()).mount('#app')
 

public/audio/ringtone.m4a

@@ -0,0 +1,31 @@
+import {Widget, WidgetKeyword} from "@widget-js/core";
+//TODO 修改组件信息，标题，描述，关键词
+const name = "cn.widgetjs.widgets.dynamic_island";
+//组件标题
+const title = {"zh": "灵动岛"};
+//组件描述
+const description = {"zh": ""};
+//组件关键词
+const keywords = [WidgetKeyword.RECOMMEND];
+//组件路由地址
+const url = "/widget/dynamic_island";
+//配置页路由地址
+const configUrl = "/widget/config/dynamic_island";
+//组件关键词
+const DynamicIslandWidgetDefine = new Widget({
+    name: name,
+    title: title,
+    description: description,
+    keywords: keywords,
+    lang: "zh",
+    url: url,
+    configUrl: configUrl,
+    width: 4,
+    height: 4,
+    minWidth: 4,
+    maxWidth: 4,
+    minHeight: 4,
+    maxHeight: 4
+})
+
+export default DynamicIslandWidgetDefine;

public/audio/voice_squidward.m4a

@@ -0,0 +1,52 @@
+<template>
+
+    <widget-edit-dialog :widget-params="widgetParams" :option="widgetConfigOption"
+                        :widget-data="widgetData"
+                        @confirm="onSaveClick()">
+        <template v-slot:widget>
+            <!-- 组件配置内容   -->
+            <dynamic-island-widget :style="{
+        width:`${widgetParams.widthPx}px`,
+        height:`${widgetParams.heightPx}px`
+      }" :background-color="widgetData.backgroundColor"></dynamic-island-widget>
+        </template>
+        <template v-slot:form>
+            <!--  TODO 这里写自定义表单内容          -->
+        </template>
+    </widget-edit-dialog>
+</template>
+
+<script lang="ts">
+
+import DynamicIslandWidget from "./DynamicIslandWidget.vue";
+import {useWidget, WidgetConfigOption, WidgetEditDialog} from "@widget-js/vue3";
+import {WidgetData, WidgetDataRepository} from "@widget-js/core";
+import {reactive} from "vue";
+
+export default {
+  name: "",
+  components: {DynamicIslandWidget, WidgetEditDialog},
+  setup() {
+    const {widgetData, widgetParams} = useWidget(WidgetData)
+
+    //修改成需要设置组件参数配置
+    const widgetConfigOption = reactive(new WidgetConfigOption({
+      custom: true,
+      backgroundColor: true,
+      borderRadius: true
+    }));
+
+    return {widgetData, widgetParams, widgetConfigOption}
+  },
+  methods: {
+    async onSaveClick() {
+      await WidgetDataRepository.save(this.widgetData);
+      window.close();
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

script/registerWidgetPackage.js

@@ -0,0 +1,101 @@
+import DynamicIslandWidget from './DynamicIslandWidget.vue';
+import dayjs from "dayjs";
+
+export default {
+    title: 'Widget/DynamicIsland',
+    component: DynamicIslandWidget,
+    argTypes: {
+        size: {control: 'select', options: ['small', 'default', 'large']},
+        targetTime: {control: 'date'},
+        type: {
+            control: 'select',
+            options: ['call', 'countdown', 'advance-countdown', 'error', 'success', 'warning', 'info'],
+        }
+    },
+};
+
+const Template = (args: any) => ({
+    components: {DynamicIslandWidget},
+    setup() {
+        return {args};
+    },
+    template: '<dynamic-island-widget v-bind="args"></dynamic-island-widget>',
+});
+
+export const MessageError = Template.bind({})
+// @ts-ignore
+MessageError.args = {
+    show: true,
+    type: 'error',
+    size: 'small',
+    message: "错误信息"
+}
+export const MessageInfo = Template.bind({})
+// @ts-ignore
+MessageInfo.args = {
+    show: true,
+    type: 'info',
+    size: 'small',
+    message: "Hello World"
+}
+export const MessageSuccess = Template.bind({})
+// @ts-ignore
+MessageSuccess.args = {
+    show: true,
+    type: 'success',
+    size: 'small',
+    message: "Hello World"
+}
+
+export const MessageWarning = Template.bind({})
+// @ts-ignore
+MessageWarning.args = {
+    show: true,
+    type: 'warning',
+    size: 'small',
+    message: "警告信息"
+}
+
+export const Countdown = Template.bind({})
+const date = dayjs('2023-01-01');
+
+// @ts-ignore
+Countdown.args = {
+    show: true,
+    type: 'countdown',
+    size: 'small',
+    message: '新年倒计时',
+    targetTime: date.toISOString(),
+}
+
+export const CountdownAdvance = Template.bind({})
+// @ts-ignore
+CountdownAdvance.args = {
+    show: true,
+    type: 'advance-countdown',
+    size: 'default',
+    message: '恭喜发财',
+    title: '新年倒计时',
+    targetTime: date.toISOString(),
+}
+
+export const Call = Template.bind({})
+// @ts-ignore
+Call.args = {
+    show: true,
+    type: 'call',
+    size: 'default',
+    message: '下班提醒',
+    title: '章鱼哥',
+}
+
+
+export const Alert = Template.bind({})
+// @ts-ignore
+Alert.args = {
+    show: true,
+    type: 'alert',
+    size: 'large',
+    message: '您已经连续使用电脑45分钟',
+    title: '久坐提醒',
+}