feat: 新增 Vue3 视频播放组件库及相关配置

workspaces/ts-vue3/.npmrc

@@ -5,6 +5,7 @@ auto-install-peers=false
 hoist-pattern[]=
 
 # 允许少量公共提升的开发工具类型
+public-hoist-pattern[]=*storybook*
 public-hoist-pattern[]=*@types/*
 public-hoist-pattern[]=eslint*
 public-hoist-pattern[]=prettier*

workspaces/ts-vue3/package.json

@@ -0,0 +1,10 @@
+{
+	"devDependencies": {
+		"vue": "^3.5.29",
+		"@vue/compiler-dom": "^3.5.29",
+		"@vue/server-renderer": "^3.5.29",
+		"@vue/test-utils": "^2.4.6",
+		"vitest": "^1.6.1",
+		"jsdom": "^24.1.3"
+	}
+}

workspaces/ts-vue3/packages/cw/cw_video_library_v_3/.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

workspaces/ts-vue3/packages/cw/cw_video_library_v_3/.gitignore

@@ -0,0 +1,31 @@
+*.log*
+.cache
+.DS_Store
+.idea
+.vscode
+.eslintcache
+
+# npm
+node_modules
+
+# test
+**/test/coverage
+
+# dist file
+es
+lib
+dist
+dist-theme
+assets-package
+/site
+changelog.generated.md
+vetur
+
+*.tgz
+
+# lcap files
+.lcap
+source.zip
+manifest
+nasl.extension.*
+*@*.zip

workspaces/ts-vue3/packages/cw/cw_video_library_v_3/.prettierignore

@@ -0,0 +1,3 @@
+public/*.js
+dist-theme
+node_modules

workspaces/ts-vue3/packages/cw/cw_video_library_v_3/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "printWidth": 150,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

workspaces/ts-vue3/packages/cw/cw_video_library_v_3/.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from "@storybook/vue3-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {
+      builder: {
+        viteConfigPath: './vite.config.mjs',
+      },
+    },
+  },
+};
+export default config;

workspaces/ts-vue3/packages/cw/cw_video_library_v_3/.storybook/preview.ts

@@ -0,0 +1,19 @@
+import { type Preview, setup } from "@storybook/vue3";
+
+import UI from '../src/index';
+setup((app) => {
+  app.use(UI);
+});
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

workspaces/ts-vue3/packages/cw/cw_video_library_v_3/README.md

@@ -0,0 +1,50 @@
+# Lcap Frontend Extension Demo
+
+## 安装
+
+```
+npm install
+```
+
+## 开发
+
+```
+npm start
+```
+
+或
+
+```
+npm run dev
+```
+
+## 添加组件
+
+```
+lcap create component
+```
+
+## 添加逻辑
+
+```
+lcap create logic
+```
+
+## 构建 & 发布
+
+```
+npm run build
+```
+
+构建完成后，将 `[packageName]@[packageVersion].zip` 文件上传到平台即可
+
+## 修改构建配置
+
+在根目录下创建 `vite.config.mjs` 文件即可，[配置文档](https://cn.vitejs.dev/config/)
+
+## 相关资源
+
+* 开发构建工具 [vite](https://vitejs.dev/)
+* 单元测试工具 [vitest](https://cn.vitest.dev/guide/)
+* UI demo 调试 [storybook](https://storybook.js.org/docs/get-started/install)
+

workspaces/ts-vue3/packages/cw/cw_video_library_v_3/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "cw_video_library_v_3",
+  "private": true,
+  "version": "1.0.0",
+  "lcapIdeVersion": "3.12",
+  "main": "dist-theme/index.js",
+  "module": "dist-theme/index.mjs",
+  "title": "视频播放——Vue3",
+  "description": "视频播放——Vue3",
+  "files": [
+    "dist-theme"
+  ],
+  "scripts": {
+    "dev": "npm run start",
+    "start": "storybook dev -p 8008",
+    "build": "lcap-scripts build",
+    "create": "lcap-scripts create",
+    "watch": "lcap-scripts watch",
+    "play": "lcap-scripts play",
+    "release": "lcap publish",
+    "test": "vitest"
+  },
+  "keywords": [
+    "Vue3"
+  ],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "video.js": "^7.20.3"
+  },
+  "pnpm": {
+    "overrides": {
+      "vue": "^3.5.13",
+      "@vue/compiler-sfc": "^3.5.13"
+    }
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@lcap/builder": "^1.6.2",
+    "@nasl/types": "^0.2.1",
+    "@storybook/addon-essentials": "8.6.17",
+    "@storybook/addon-interactions": "8.6.17",
+    "@storybook/addon-onboarding": "8.6.17",
+    "@storybook/blocks": "8.6.17",
+    "@storybook/test": "8.6.17",
+    "@storybook/vue3": "8.6.17",
+    "@storybook/vue3-vite": "8.6.17",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vue/compiler-dom": "^3.5.13",
+    "@vue/server-renderer": "^3.5.13",
+    "@vue/test-utils": "^2.4.6",
+    "autoprefixer": "^10.4.16",
+    "fs-extra": "^11.2.0",
+    "jsdom": "^24.0.0",
+    "lcap-ide-server-proxy": "^0.1.2-beta",
+    "storybook": "8.6.17",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.1",
+    "vitest": "^1.6.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vue-tsc": "^2.1.10"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "vue-router": "^4.5.0"
+  }
+}

workspaces/ts-vue3/packages/cw/cw_video_library_v_3/postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: {
+    'autoprefixer': {
+      overrideBrowserslist: [
+        '> 1%',
+        'last 2 versions',
+        'ie >= 11',
+      ],
+      grid: true,
+    },  
+  }
+};

workspaces/ts-vue3/packages/cw/cw_video_library_v_3/src/components/cw-video-view/api.ts

@@ -0,0 +1,105 @@
+/// <reference types="@nasl/types" />
+
+namespace nasl.ui {
+  @Component({
+    title: '视频播放',
+    icon: 'video.svg',
+    description: '视频播放组件',
+    group: 'Display'
+  })
+  export class CwVideoView extends ViewComponent {
+    constructor(options?: Partial<CwVideoViewOptions>) {
+      super();
+    }
+
+    @Method({
+      title: '继续播放',
+      description: '继续播放视频',
+    })
+    play(): void {}
+
+    @Method({
+      title: '暂停播放',
+      description: '暂停播放视频',
+    })
+    pause(): void {}
+  }
+
+  export class CwVideoViewOptions extends ViewComponentOptions {
+    @Prop({
+      title: '地址',
+      description: '视频流地址',
+    })
+    src: nasl.core.String;
+
+    @Prop({
+      title: '封面地址',
+      description: '视频默认封面地址',
+    })
+    poster: nasl.core.String;
+
+    @Prop({
+      title: '中断进度',
+      description: '从中断的进度开始播放',
+    })
+    breakProgress: nasl.core.String;
+
+    @Prop({
+      title: '自动播放',
+      description: '是否自动播放',
+      setter: { concept: 'SwitchSetter' },
+    })
+    autoplay: nasl.core.Boolean;
+
+    @Prop({
+      title: '可拖放',
+      description: '是否可拖放',
+      setter: { concept: 'SwitchSetter' },
+    })
+    draggable: nasl.core.Boolean;
+
+    @Prop({
+      title: '循环播放',
+      description: '是否循环播放',
+      setter: { concept: 'SwitchSetter' },
+    })
+    loop: nasl.core.Boolean;
+
+    @Prop({
+      title: '是否开启倍速播放',
+      description: '是否开启倍速播放',
+      setter: { concept: 'SwitchSetter' },
+    })
+    showPlaybackRates: nasl.core.Boolean;
+
+    @Event({
+      title: '播放开始时',
+      description: '播放开始时触发',
+    })
+    onStart: (event: any) => any;
+
+    @Event({
+      title: '暂停播放时',
+      description: '暂停播放时触发',
+    })
+    onPause: (event: any) => any;
+
+    @Event({
+      title: '继续播放时',
+      description: '继续播放时触发',
+    })
+    onPlay: (event: any) => any;
+
+    @Event({
+      title: '播放结束时',
+      description: '播放结束时触发',
+    })
+    onEnded: (event: any) => any;
+
+    @Event({
+      title: '更新播放进度时',
+      description: '更新播放进度时触发',
+    })
+    onVideoProgress: (event: nasl.core.String) => any;
+  }
+}