v-uni-app-ui 1.0.0 → 1.0.2

package/components/model/native/v-video/v-video.vue

@@ -0,0 +1,175 @@
+<template>
+	<view class="v-video-container">
+		<video
+			:id="videoId"
+			:src="videoContext.src"
+			:poster="poster"
+			:autoplay="autoplay"
+			:controls="controls"
+			:loop="loop"
+			:muted="muted"
+			:object-fit="objectFit"
+			:class="videoClass"
+			:style="videoStyle"
+			@play="handlePlay"
+			@pause="handlePause"
+			@ended="handleEnded"
+			@click="handleVideoClick"
+			@touchstart="handleTouchStart"
+			@touchmove="handleTouchMove"
+			@touchend="handleTouchEnd"
+			:error="handleError"
+			style="width: 100%; height: 100%"
+		></video>
+		<!-- 加载插槽 -->
+		<slot name="loading" v-if="isLoading" />
+
+		<!-- 错误插槽 -->
+		<slot name="error" v-if="isError" />
+
+		<!-- 新增：暂停插槽（非 loading / 非 error / 已暂停 / 未结束） -->
+		<slot name="paused" v-if="!isLoading && !isError && isPaused && !hasEnded" />
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, reactive } from 'vue';
+
+interface Props {
+	src: string;
+	poster?: string;
+	autoplay?: boolean;
+	controls?: boolean;
+	loop?: boolean;
+	muted?: boolean;
+	objectFit?: string;
+	width?: string;
+	height?: string;
+	videoClass?: string;
+	videoStyle?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	poster: '',
+	autoplay: false,
+	controls: true,
+	loop: false,
+	muted: false,
+	objectFit: 'contain',
+	width: '100%',
+	height: '100%',
+	videoClass: '',
+	videoStyle: ''
+});
+
+const emit = defineEmits(['play', 'pause', 'ended', 'error']);
+
+const videoId = ref('video_' + Date.now());
+const isLoading = ref(true);
+const isError = ref(false);
+const videoContext = reactive({
+	src: props.src
+});
+const videoElement = ref(null);
+const touchStartX = ref(0);
+const touchStartTime = ref(0);
+const isLongPress = ref(false);
+const clickNumber = ref(0);
+const isPaused = ref(true);
+const hasEnded = ref(false);
+
+onMounted(() => {
+	videoElement.value = uni.createVideoContext(videoId.value);
+});
+
+watch(
+	() => props.src,
+	(newValue) => {
+		isLoading.value = true;
+		if (newValue) {
+			videoContext.src = newValue;
+		}
+	},
+	{ immediate: true }
+);
+watch(
+	() => props.src,
+	(newValue) => {
+		isLoading.value = true;
+		if (newValue) {
+			videoContext.src = newValue;
+		}
+	},
+	{ immediate: true }
+);
+
+const handlePlay = () => {
+	isLoading.value = false;
+	isError.value = false;
+	isPaused.value = false;
+	hasEnded.value = false;
+	emit('play');
+};
+
+const handlePause = () => {
+	isPaused.value = true;
+	emit('pause');
+};
+
+const handleEnded = () => {
+	hasEnded.value = true;
+	isPaused.value = true;
+	emit('ended');
+};
+
+const handleError = (event: Event) => {
+	isLoading.value = false;
+	isError.value = true;
+	emit('error', event);
+};
+
+const handleVideoClick = () => {
+	if (!props.controls && videoElement.value) {
+		clickNumber.value++;
+		if (clickNumber.value % 2 == 0) {
+			videoElement.value.play();
+		} else {
+			videoElement.value.pause();
+		}
+	}
+};
+
+const handleTouchStart = (event) => {
+	touchStartX.value = event.touches[0].clientX;
+	touchStartTime.value = Date.now();
+	setTimeout(() => {
+		if (Date.now() - touchStartTime.value > 500 && !isLongPress.value) {
+			isLongPress.value = true;
+		}
+	}, 500);
+};
+
+const handleTouchMove = (event) => {
+	if (!props.controls && isLongPress.value && videoElement.value) {
+		const touchMoveX = event.touches[0].clientX;
+		const videoWidth = videoElement.value.videoWidth;
+		const seekTime = videoElement.value.currentTime;
+		const duration = videoElement.value.duration;
+		const moveDistance = touchMoveX - touchStartX.value;
+		const seekPercentage = moveDistance / videoWidth;
+		const newTime = Math.max(0, Math.min(duration, seekTime + seekPercentage * duration));
+		videoElement.value.currentTime = newTime;
+	}
+};
+
+const handleTouchEnd = () => {
+	isLongPress.value = false;
+};
+</script>
+
+<style scoped>
+.v-video-container {
+	width: 100%;
+	height: 100%;
+}
+</style>

package/components/model/native/v-window/v-window.vue

@@ -0,0 +1,158 @@
+<template>
+	<view v-show="show" :class="['v-window', `v-window--size-${size}`, { 'v-window--fullscreen': fullscreen }]" :style="windowStyle">
+		<view class="v-window-header" v-if="title">
+			<view class="v-window-title">{{ title }}</view>
+			<view class="v-window-actions" v-if="showActions">
+				<button class="v-window-action" @click="minimize">
+					<text class="icon-minimize">-</text>
+				</button>
+				<button class="v-window-action" @click="maximize">
+					<text class="icon-maximize">□</text>
+				</button>
+				<button class="v-window-action" @click="close">
+					<text class="icon-close">×</text>
+				</button>
+			</view>
+		</view>
+		<view class="v-window-content">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed,inject,watch } from 'vue';
+
+const props = defineProps({
+	title: {
+		type: String,
+		default: ''
+	},
+	fullscreen: {
+		type: Boolean,
+		default: false
+	},
+	showActions:{
+		type:Boolean,
+		default:true
+	},
+	show:{
+		type:Boolean,
+		default:true
+	}
+});
+
+const emit = defineEmits(['update:show','update:showActions','update:fullscreen','close', 'minimize', 'maximize']);
+const config = inject<any>('config');
+const windowStyle = computed(() => {
+	return {
+		width: props.fullscreen ? '100%' : undefined,
+		height: props.fullscreen ? '100%' : undefined,
+		'--window-title-color': '#333',
+		'--window-content-bg': '#fff',
+		'--window-border-color': '#e0e0e0'
+	};
+});
+
+const showActions = ref(props.showActions);
+const show = ref(props.show);
+const fullscreen = ref(props.fullscreen);
+
+watch(()=>props.show,(newValue)=>{
+	show.value = newValue;
+},{
+	immediate:true
+})
+watch(()=>props.showActions,(newValue)=>{
+	showActions.value = newValue;
+},{
+	immediate:true
+})
+watch(()=>props.fullscreen,(newValue)=>{
+	fullscreen.value = newValue;
+},{
+	immediate:true
+})
+
+
+const close = () => {
+	show.value = false;
+	emit('update:show',false)
+	emit('close');
+};
+
+const minimize = () => {
+	fullscreen.value = false;
+	emit('update:fullscreen',false);
+	emit('minimize');
+};
+
+const maximize = () => {
+	fullscreen.value = true;
+	emit('update:fullscreen',true);
+	emit('maximize');
+};
+</script>
+
+<style lang="scss" scoped>
+.v-window {
+	width: 80%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	border: 1rpx solid var(--window-border-color);
+	border-radius: 4rpx;
+	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
+	background-color: var(--window-content-bg);
+	overflow: hidden;
+	margin: auto;
+
+	&--fullscreen {
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 1000;
+	}
+
+	.v-window-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 8rpx 16rpx;
+		background-color: var(--window-content-bg);
+		border-bottom: 1rpx solid var(--window-border-color);
+
+		.v-window-title {
+			font-size: v-bind("config.fontSize.mediumTitle");
+			font-weight: bold;
+			color: var(--window-title-color);
+		}
+
+		.v-window-actions {
+			display: flex;
+		}
+
+		.v-window-action {
+			background: none;
+			border: none;
+			cursor: pointer;
+			font-size: v-bind("config.fontSize.smallText");
+			margin-left: 8rpx;
+
+			&:hover {
+				background-color: #f5f5f5;
+			}
+		}
+	}
+
+	.v-window-content {
+		flex: 1;
+		padding: 16rpx;
+		overflow: auto;
+	}
+}
+</style>

package/package.json

@@ -1,108 +1,32 @@
 {
 	"name": "v-uni-app-ui",
-	"version": "1.0.0",
+	"version": "1.0.2",
 	"description": "uni-app 通用 UI 组件库",
 	"main": "index.js",
+	"files": [
+		"components",
+		"index.js",
+		"README.md"
+	],
 	"keywords": [
-		"plugin",
-		"nodejs"
+		"uniapp",
+		"uni-app",
+		"vue",
+		"components",
+		"ui",
+		"小程序",
+		"移动端"
 	],
 	"author": "FangBiShan",
 	"license": "MIT",
+	"peerDependencies": {
+		"vue": "^2.6.0 || ^3.0.0"
+	},
 	"devDependencies": {
 		"@types/uni-app": "^1.4.8",
-		"@typescript-eslint/eslint-plugin": "^8.50.1",
-		"@typescript-eslint/parser": "^8.50.1",
-		"sass": "^1.87.0",
-		"scss": "^0.2.4"
-	},
-	"dependencies": {
-		"acorn": "^8.15.0",
-		"acorn-jsx": "^5.3.2",
-		"ajv": "^6.12.6",
-		"ansi-styles": "^4.3.0",
-		"argparse": "^2.0.1",
-		"balanced-match": "^1.0.2",
-		"brace-expansion": "^2.0.2",
-		"braces": "^3.0.3",
-		"callsites": "^3.1.0",
-		"chalk": "^4.1.2",
-		"chokidar": "^4.0.3",
-		"color-convert": "^2.0.1",
-		"color-name": "^1.1.4",
-		"concat-map": "^0.0.1",
-		"cross-spawn": "^7.0.6",
-		"debug": "^4.4.3",
-		"deep-is": "^0.1.4",
-		"detect-libc": "^1.0.3",
-		"escape-string-regexp": "^4.0.0",
 		"eslint": "^9.39.2",
-		"eslint-scope": "^8.4.0",
-		"eslint-visitor-keys": "^3.4.3",
-		"espree": "^10.4.0",
-		"esquery": "^1.6.0",
-		"esrecurse": "^4.3.0",
-		"estraverse": "^5.3.0",
-		"esutils": "^2.0.3",
-		"fast-deep-equal": "^3.1.3",
-		"fast-json-stable-stringify": "^2.1.0",
-		"fast-levenshtein": "^2.0.6",
-		"file-entry-cache": "^8.0.0",
-		"fill-range": "^7.1.1",
-		"find-up": "^5.0.0",
-		"flat-cache": "^4.0.1",
-		"flatted": "^3.3.3",
-		"glob-parent": "^6.0.2",
-		"globals": "^14.0.0",
-		"has-flag": "^4.0.0",
-		"ignore": "^7.0.5",
-		"immutable": "^5.1.2",
-		"import-fresh": "^3.3.1",
-		"imurmurhash": "^0.1.4",
-		"is-extglob": "^2.1.1",
-		"is-glob": "^4.0.3",
-		"is-number": "^7.0.0",
-		"isexe": "^2.0.0",
-		"js-yaml": "^4.1.1",
-		"json-buffer": "^3.0.1",
-		"json-schema-traverse": "^0.4.1",
-		"json-stable-stringify-without-jsonify": "^1.0.1",
-		"keyv": "^4.5.4",
-		"levn": "^0.4.1",
-		"locate-path": "^6.0.0",
-		"lodash.merge": "^4.6.2",
-		"micromatch": "^4.0.8",
-		"minimatch": "^9.0.5",
-		"ms": "^2.1.3",
-		"natural-compare": "^1.4.0",
-		"node-addon-api": "^7.1.1",
-		"ometa": "^0.2.2",
-		"optionator": "^0.9.4",
-		"p-limit": "^3.1.0",
-		"p-locate": "^5.0.0",
-		"parent-module": "^1.0.1",
-		"path-exists": "^4.0.0",
-		"path-key": "^3.1.1",
-		"picomatch": "^2.3.1",
-		"prelude-ls": "^1.2.1",
-		"punycode": "^2.3.1",
-		"readdirp": "^4.1.2",
-		"resolve-from": "^4.0.0",
-		"semver": "^7.7.3",
-		"shebang-command": "^2.0.0",
-		"shebang-regex": "^3.0.0",
-		"source-map-js": "^1.2.1",
-		"strip-json-comments": "^3.1.1",
-		"supports-color": "^7.2.0",
-		"tinyglobby": "^0.2.15",
-		"to-regex-range": "^5.0.1",
-		"ts-api-utils": "^2.1.0",
-		"type-check": "^0.4.0",
-		"typescript": "^5.9.3",
-		"uri-js": "^4.4.1",
-		"which": "^2.0.2",
-		"word-wrap": "^1.2.5",
-		"yocto-queue": "^0.1.0"
+		"sass": "^1.97.1",
+		"typescript": "^5.9.3"
 	},
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1"