优化

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "front-next",
-	"version": "5.12.0",
+	"version": "5.12.1",
 	"scripts": {
 		"dev": "vite --host",
 		"build": "vite build",

src/cool/module/index.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { Module } from "../types";
 import { Data } from "../utils";
 
@@ -10,6 +9,7 @@ const module = {
 	list,
 	req: Promise.resolve(),
 	get(name: string): Module {
+		// @ts-ignore
 		return this.list.find((e) => e.name == name);
 	},
 	add(data: Module) {

src/cool/utils/data.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 const d: any = window;
 
 // window 数据临时存储，解决热更新后失效问题

src/modules/base/components/codemirror/index.vue

@@ -4,7 +4,7 @@
 			ref="Editor"
 			v-model="content"
 			:placeholder="placeholder"
-			:style="{ height, fontSize }"
+			:style="style"
 			autofocus
 			:disabled="disabled"
 			indent-with-tab
@@ -21,16 +21,17 @@ import { javascript } from "@codemirror/lang-javascript";
 import { oneDark } from "@codemirror/theme-one-dark";
 import { ref, watch, computed, defineComponent } from "vue";
 import { useDark } from "@vueuse/core";
-import { isNumber } from "lodash-es";
+import { useComm } from "/@/cool";
 
 export default defineComponent({
 	name: "cl-codemirror",
 
+	components: {
+		Codemirror
+	},
+
 	props: {
-		modelValue: {
+		modelValue: String,
-			type: String,
-			required: true
-		},
 		placeholder: {
 			type: String,
 			default: "请输入"
@@ -40,29 +41,22 @@ export default defineComponent({
 			default: 400
 		},
 		fontSize: {
-			type: String,
+			type: [String, Number],
-			default: "14px"
+			default: 14
 		},
 		disabled: Boolean
 	},
 
 	emits: ["update:modelValue", "change"],
 
-	components: {
-		Codemirror
-	},
-
 	setup(props, { emit }) {
+		const { px } = useComm();
+
 		const Editor = ref();
 
 		// 是否暗黑模式
 		const isDark = ref(useDark());
 
-		// 高度
-		const height = computed(() =>
-			isNumber(props.height) ? `${props.height}px` : props.height
-		);
-
 		// 插件
 		const extensions: any[] = [javascript()];
 
@@ -73,6 +67,11 @@ export default defineComponent({
 		// 内容
 		const content = ref("");
 
+		// 样式
+		const style = computed(() => {
+			return { height: px(props.height), fontSize: px(props.fontSize) };
+		});
+
 		// 值改变
 		function onChange(value: string) {
 			emit("update:modelValue", value);
@@ -83,7 +82,7 @@ export default defineComponent({
 		watch(
 			() => props.modelValue,
 			(val) => {
-				content.value = val;
+				content.value = val || "";
 			},
 			{
 				immediate: true
@@ -93,7 +92,7 @@ export default defineComponent({
 		return {
 			Editor,
 			isDark,
-			height,
+			style,
 			content,
 			extensions,
 			onChange

src/modules/base/components/select/index.vue

@@ -1,10 +1,11 @@
 <template>
-	<el-select v-model="value" @change="onChange" clearable>
+	<el-select v-model="value" :clearable="clearable" @change="onChange">
 		<el-option
 			v-for="(item, index) in list"
 			:key="index"
 			:label="item.label"
 			:value="item.value"
+			:disabled="item.disabled"
 		></el-option>
 	</el-select>
 </template>
@@ -22,6 +23,10 @@ export default defineComponent({
 			type: [Array, Object],
 			default: () => []
 		},
+		clearable: {
+			type: Boolean,
+			default: true
+		},
 		prop: String
 	},
 
@@ -30,7 +35,11 @@ export default defineComponent({
 	setup(props, { emit }) {
 		// cl-crud
 		const Crud = useCrud();
+
+		// 选中值
 		const value = ref();
+
+		// 列表
 		const list = computed<any>(() =>
 			isRef(props.options) ? props.options.value : props.options
 		);

src/modules/base/store/user.ts

@@ -3,20 +3,6 @@ import { ref } from "vue";
 import { storage } from "/@/cool/utils";
 import { service, config, router } from "/@/cool";
 
-interface User {
-	id: number;
-	name: string;
-	username: string;
-	nickName: string;
-	phone: string;
-	headImg: string;
-	email: string;
-	status: 0 | 1;
-	departmentId: string;
-	createTime: Date;
-	[key: string]: any;
-}
-
 // 本地缓存
 const data = storage.info();
 
@@ -27,9 +13,9 @@ export const useUserStore = defineStore("user", function () {
 	// 设置标识
 	function setToken(data: {
 		token: string;
-		expire: string;
+		expire: number;
 		refreshToken: string;
-		refreshExpire: string;
+		refreshExpire: number;
 	}) {
 		// 请求的唯一标识
 		token.value = data.token;
@@ -58,7 +44,7 @@ export const useUserStore = defineStore("user", function () {
 	}
 
 	// 用户信息
-	const info = ref<User | null>(data.userInfo);
+	const info = ref<Eps.BaseSysUserEntity | null>(data.userInfo);
 
 	// 设置用户信息
 	function set(value: any) {

src/modules/chat/components/message.vue

@@ -63,7 +63,7 @@
 				<ul>
 					<cl-upload @success="onImageSend" :show-file-list="false">
 						<li>
-							<el-icon><picture /></el-icon>
+							<el-icon><picture-filled /></el-icon>
 						</li>
 					</cl-upload>
 
@@ -101,7 +101,7 @@
 import { computed, ref } from "vue";
 import { useChat } from "../hooks";
 import { useStore } from "../store";
-import { Picture, VideoCamera, Microphone } from "@element-plus/icons-vue";
+import { PictureFilled, VideoCamera, Microphone } from "@element-plus/icons-vue";
 import { useBase } from "/$/base";
 import { ContextMenu } from "@cool-vue/crud";
 import { useClipboard } from "@vueuse/core";

src/modules/demo/views/editor-quill.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="editor">
-		<el-tabs>
+		<el-tabs type="card">
 			<el-tab-pane label="WangEditor">
 				<cl-editor-wang v-model="w" :height="400" />
 			</el-tab-pane>
@@ -20,7 +20,9 @@ const w = ref("Wang");
 
 <style lang="scss" scoped>
 .editor {
-	background-color: #fff;
+	background-color: var(--el-bg-color);
-	padding: 0 10px 10px 10px;
+	padding: 10px;
+	height: 100%;
+	box-sizing: border-box;
 }
 </style>

src/modules/demo/views/upload.vue

@@ -1,74 +1,67 @@
 <template>
 	<div class="demo">
-		<el-image
+		<el-tabs type="card">
-			v-for="(item, index) in list"
+			<el-tab-pane label="普通上传">
-			:key="index"
+				<cl-upload v-model="urls" />
-			:src="item"
+			</el-tab-pane>
-			:style="{ width: '100px', marginRight: '10px' }"
-		/>
 
-		<div class="item">
+			<el-tab-pane label="多图上传" lazy>
-			<p>普通上传</p>
+				<cl-upload text="选择图片" v-model="urls" multiple drag />
-			<cl-upload v-model="urls" />
+			</el-tab-pane>
-		</div>
 
-		<div class="item">
+			<el-tab-pane label="文件上传" lazy>
-			<p>多图上传 multiple</p>
+				<cl-upload v-model="urls" multiple text="文件上传" type="file" />
-			<cl-upload v-model="urls" multiple drag />
+			</el-tab-pane>
-		</div>
 
-		<div class="item">
+			<el-tab-pane label="自定义内容">
-			<p>文件上传 file</p>
+				<cl-upload text="选择图片" multiple drag custom-class="custom-upload">
-			<cl-upload v-model="urls" multiple text="文件上传" type="file" />
+					<el-button :icon="Upload">上传</el-button>
-		</div>
 
-		<div class="item">
+					<template #item="{ item }">
-			<p>自定义内容</p>
+						<div class="item" v-show="item.url">{{ item.url }}</div>
-			<cl-upload text="选择图片" multiple drag>
+					</template>
-				<div style="width: 100%">
+				</cl-upload>
-					<el-button>上传</el-button>
+			</el-tab-pane>
-				</div>
-				<template #item="{ item }">
-					<div class="cs-item">{{ item.url }}</div>
-				</template>
-			</cl-upload>
-		</div>
 
-		<div class="item">
+			<el-tab-pane label="自定义大小">
-			<p>自定义大小</p>
+				<cl-upload text="选择图片" :size="[120, 200]" />
-			<cl-upload text="选择图片" :size="[120, 200]" />
+			</el-tab-pane>
-		</div>
 
-		<div class="item">
+			<el-tab-pane label="文件空间">
-			<p>文件空间</p>
+				<cl-upload-space />
-			<cl-upload-space />
+			</el-tab-pane>
-		</div>
+		</el-tabs>
 	</div>
 </template>
 
 <script lang="ts" name="upload" setup>
-import { computed, ref } from "vue";
+import { ref } from "vue";
+import { Upload } from "@element-plus/icons-vue";
 
 const urls = ref("");
-const list = computed(() => urls.value.split(",").filter(Boolean));
 </script>
 
 <style lang="scss" scoped>
 .demo {
 	background-color: var(--el-bg-color);
-	.item {
+	padding: 10px;
-		margin-bottom: 10px;
+	height: 100%;
-		padding: 10px;
+	box-sizing: border-box;
 
-		& > p {
+	:deep(.custom-upload) {
-			margin-bottom: 10px;
+		.item {
-			font-size: 14px;
+			border: 1px solid var(--el-border-color);
+			border-radius: 3px;
+			padding: 5px 10px;
+			margin-top: 10px;
+			font-size: 12px;
+			width: 100%;
+			box-sizing: border-box;
 		}
-	}
 
-	.cs-item {
+		.cl-upload__list {
-		border: 1px solid var(--el-border-color);
+			width: 100%;
-		padding: 5px 10px;
+		}
 	}
 }
 </style>

src/modules/upload/components/index.vue

@@ -1,12 +1,11 @@
 <template>
-	<div class="cl-upload__wrap">
+	<div class="cl-upload__wrap" :class="[customClass]">
 		<div
 			class="cl-upload"
 			:class="[
 				`cl-upload--${type}`,
 				{
 					'is-slot': $slots.default,
-					'is-custom': $slots.item,
 					'is-disabled': disabled
 				}
 			]"
@@ -42,11 +41,11 @@
 
 			<!-- 列表 -->
 			<draggable
+				class="cl-upload__list"
+				tag="div"
 				v-model="list"
 				v-bind="drag.options"
 				item-key="uid"
-				tag="div"
-				class="cl-upload__list"
 				@end="update"
 			>
 				<template #item="{ element: item, index }">
@@ -153,14 +152,7 @@ import { extname, uuid } from "/@/cool/utils";
 import { useBase } from "/$/base";
 import { fileSize, fileName, fileType } from "../utils";
 import { useForm } from "@cool-vue/crud";
-
+import { Upload } from "../types";
-interface Item {
-	url: string;
-	preload: string;
-	uid: number | string;
-	progress: number;
-	type?: string;
-}
 
 const props = defineProps({
 	modelValue: {
@@ -187,6 +179,7 @@ const props = defineProps({
 	},
 	drag: Boolean,
 	disabled: Boolean,
+	customClass: String,
 
 	// 穿透值
 	isEdit: null,
@@ -237,14 +230,14 @@ const headers = computed(() => {
 });
 
 // 预览
-const pv = reactive<any>({
+const pv = reactive<{ visible: boolean; urls: string[]; index: number }>({
 	visible: false,
 	urls: [],
 	index: 0
 });
 
 // 列表
-const list = ref<Item[]>([]);
+const list = ref<Upload.Item[]>([]);
 
 // 拖拽
 const drag = reactive<any>({
@@ -273,12 +266,12 @@ function getType(path: string) {
 	if (props.type == "image") {
 		return "image";
 	} else {
-		return fileType(path).value;
+		return fileType(path)?.value;
 	}
 }
 
 // 上传前
-function beforeUpload(file: any, item?: Item) {
+function beforeUpload(file: any, item?: Upload.Item) {
 	if (file.size / 1024 / 1024 >= limitSize) {
 		ElMessage.error(`上传文件大小不能超过 ${limitSize}MB!`);
 		return false;
@@ -321,7 +314,7 @@ function clear() {
 }
 
 // 预览
-function preview(item: Item) {
+function preview(item: Upload.Item) {
 	if (item.type == "image") {
 		pv.visible = true;
 		pv.urls = list.value.map((e) => e.preload);

src/modules/upload/components/space.vue

@@ -7,7 +7,7 @@
 		<!-- 弹框 -->
 		<cl-dialog
 			v-model="visible"
-			title="文件空间"
+			:title="title"
 			height="650px"
 			width="1080px"
 			keep-alive
@@ -25,7 +25,7 @@
 				@drop="onDrop"
 			>
 				<!-- 类目 -->
-				<category />
+				<space-category />
 
 				<!-- 内容 -->
 				<div class="cl-upload-space__content">
@@ -49,6 +49,8 @@
 							</cl-upload>
 						</div>
 
+						<cl-flex1 />
+
 						<el-button type="success" :disabled="!isSelected" @click="confirm()"
 							>使用选中文件 {{ selection.length }}/{{ limit }}</el-button
 						>
@@ -72,7 +74,12 @@
 									v-for="item in list"
 									:key="item.preload || item.url"
 								>
-									<file-item :data="item" @select="select" @remove="remove" />
+									<space-file
+										:data="item"
+										:list="list"
+										@select="select"
+										@remove="remove"
+									/>
 								</div>
 							</div>
 						</template>
@@ -104,19 +111,19 @@
 </template>
 
 <script lang="ts" setup name="cl-upload-space">
-import { computed, onMounted, provide, reactive, ref, watch } from "vue";
+import { computed, provide, reactive, ref, watch } from "vue";
 import { isEmpty } from "lodash-es";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Notebook, ArrowLeft, UploadFilled } from "@element-plus/icons-vue";
 import { module, useCool } from "/@/cool";
 import { useBase } from "/$/base";
-import Category from "./space/category.vue";
+import SpaceCategory from "./space/category.vue";
-import FileItem from "./space/file-item.vue";
+import SpaceFile from "./space/file.vue";
 
 const props = defineProps({
 	// 绑定值
 	modelValue: String,
-	// 选择图片的数量
+	// 可选数量
 	limit: Number,
 	// 是否禁用
 	disabled: Boolean,
@@ -126,6 +133,11 @@ const props = defineProps({
 	showBtn: {
 		type: Boolean,
 		default: true
+	},
+	// 标题
+	title: {
+		type: String,
+		default: "文件空间"
 	}
 });
 
@@ -152,10 +164,10 @@ const visible = ref(false);
 const loading = ref(false);
 
 // 已选列表
-const selection = ref<any[]>([]);
+const selection = ref<Eps.SpaceInfoEntity[]>([]);
 
 // 文件列表
-const list = ref<any[]>([]);
+const list = ref<Eps.SpaceInfoEntity[]>([]);
 
 // 类目数据
 const category = reactive({
@@ -185,8 +197,15 @@ watch(
 const isSelected = computed(() => !isEmpty(selection.value));
 
 // 打开
+let lock = false;
+
 function open() {
 	visible.value = true;
+
+	if (!lock) {
+		lock = true;
+		refresh();
+	}
 }
 
 // 清空选择
@@ -259,15 +278,15 @@ async function refresh(params: any = {}) {
 
 // 确认选中
 function confirm() {
-	emit("update:modelValue", selection.value.map((e: any) => e.url).join(","));
+	emit("update:modelValue", selection.value.map((e) => e.url).join(","));
 	emit("confirm", selection.value);
 
 	close();
 }
 
 // 选择
-function select(item: any) {
+function select(item: Eps.SpaceInfoEntity) {
-	const index = selection.value.findIndex((e: any) => e.id === item.id);
+	const index = selection.value.findIndex((e) => e.id === item.id);
 
 	if (index >= 0) {
 		selection.value.splice(index, 1);
@@ -279,9 +298,9 @@ function select(item: any) {
 }
 
 // 删除选中
-function remove(item?: any) {
+function remove(item?: Eps.SpaceInfoEntity) {
 	// 已选文件 id
-	const ids: number[] = item ? [item.id] : selection.value.map((e: any) => e.id);
+	const ids = item ? [item.id] : selection.value.map((e) => e.id);
 
 	ElMessageBox.confirm("此操作将删除文件, 是否继续?", "提示", {
 		type: "warning"
@@ -292,7 +311,7 @@ function remove(item?: any) {
 			// 删除文件及选择
 			ids.forEach((id) => {
 				[list.value, selection.value].forEach((list) => {
-					const index = list.findIndex((e: any) => e.id === id);
+					const index = list.findIndex((e) => e.id === id);
 					list.splice(index, 1);
 				});
 			});
@@ -337,11 +356,8 @@ provide("space", {
 	category,
 	selection,
 	refresh,
-	loading
+	loading,
-});
+	list
-
-onMounted(() => {
-	refresh();
 });
 
 defineExpose({
@@ -359,6 +375,7 @@ defineExpose({
 	box-sizing: border-box;
 	background-color: #f7f7f7;
 	padding: 5px;
+	user-select: none;
 
 	&__dialog {
 		.el-dialog__body {

src/modules/upload/components/space/category.vue

@@ -7,7 +7,7 @@
 		}"
 	>
 		<div class="cl-upload-space-category__search">
-			<el-input v-model="keyword" placeholder="搜索" clearable />
+			<el-input v-model="keyword" placeholder="搜索分类" clearable />
 			<el-button type="success" @click="edit()">添加</el-button>
 		</div>
 
@@ -39,32 +39,29 @@
 	<cl-form ref="Form" />
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="space-category">
 import { ElMessage, ElMessageBox } from "element-plus";
 import { ArrowRightBold } from "@element-plus/icons-vue";
-import { computed, inject, onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { isEmpty } from "lodash-es";
 import { useCool } from "/@/cool";
 import { ContextMenu, useForm } from "@cool-vue/crud";
 import { useBase } from "/$/base";
+import { useSpace } from "../../hooks";
 
 const { service } = useCool();
-
-// 缓存
 const { app } = useBase();
-
+const { space } = useSpace();
-// 接收
-const space = inject<any>("space");
 
 // 数据列表
-const list = ref<any[]>([]);
+const list = ref<Eps.SpaceTypeEntity[]>([]);
 
 // 搜索关键字
-const keyword = ref<string>("");
+const keyword = ref("");
 
 // 过滤列表
 const flist = computed(() => {
-	return list.value.filter((e: any) => e.name.includes(keyword.value));
+	return list.value.filter((e) => (e.name || "").includes(keyword.value));
 });
 
 // 刷新分类
@@ -72,13 +69,13 @@ async function refresh() {
 	return service.space.type.list().then((res) => {
 		res.unshift({
 			name: "全部文件",
-			id: null
+			id: undefined
 		});
 
 		list.value = res;
 
 		if (!isEmpty(res)) {
-			if (!space.category.id) {
+			if (!space.category.id && res[0].id) {
 				space.category.id = res[0].id;
 			}
 		}
@@ -88,7 +85,7 @@ async function refresh() {
 const Form = useForm();
 
 // 编辑分类
-function edit(item: any = {}) {
+function edit(item: Eps.SpaceTypeEntity = {}) {
 	Form.value?.open({
 		title: "添加分类",
 		width: "400px",
@@ -132,7 +129,7 @@ function edit(item: any = {}) {
 }
 
 // 选择类目
-function select(id: number) {
+function select(id?: number) {
 	// 小屏幕下收起左侧类目
 	if (app.browser.isMini) {
 		space.category.visible = false;
@@ -183,7 +180,7 @@ function onContextMenu(e: any, { id, name }: any) {
 
 									// 是否删除当前
 									if (id == space.category.id) {
-										space.category.id = null;
+										space.category.id = undefined;
 									}
 
 									refresh();

src/modules/upload/components/space/file.vue

@@ -24,6 +24,11 @@
 					</el-image>
 				</template>
 
+				<!-- 视频 -->
+				<template v-else-if="info.type === 'video'">
+					<item-video :data="info" :list="list" />
+				</template>
+
 				<!-- 其他 -->
 				<template v-else>
 					<!-- 文件名 -->
@@ -36,18 +41,21 @@
 				<span
 					class="cl-upload-space-file__type"
 					:style="{
-						backgroundColor: type.color
+						backgroundColor: type?.color
 					}"
-					>{{ type.label }}</span
+					>{{ type?.label }}</span
 				>
 
-				<!-- 进度条 -->
+				<!-- 上传中 -->
-				<div
+				<template v-if="info.progress > 0 && info.progress < 100">
-					class="cl-upload-space-file__progress"
+					<!-- 进度条 -->
-					v-if="info.progress > 0 && info.progress < 100"
+					<div class="cl-upload-space-file__progress-bar">
-				>
+						<el-progress :percentage="info.progress" :show-text="false"></el-progress>
-					<el-progress :percentage="info.progress" :show-text="false"></el-progress>
+					</div>
-				</div>
+
+					<!-- 进度值 -->
+					<span class="cl-upload-space-file__progress-value">{{ info.progress }}</span>
+				</template>
 			</template>
 
 			<!-- 遮罩层 -->
@@ -58,30 +66,32 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="space-file">
-import { computed, inject } from "vue";
+import { computed } from "vue";
 import { ContextMenu } from "@cool-vue/crud";
 import { extname } from "/@/cool/utils";
-import { fileName, fileType } from "../../utils";
+import { fileName, fileRule } from "../../utils";
 import { useClipboard } from "@vueuse/core";
 import { ElMessage } from "element-plus";
+import { useSpace } from "../../hooks";
+import ItemVideo from "./item-video.vue";
 
 const { copy } = useClipboard();
 
 const props = defineProps({
-	data: Object
+	data: Object,
+	list: Array
 });
 
 const emit = defineEmits(["select", "remove"]);
 
-// 接收
+const { space } = useSpace();
-const space = inject<any>("space");
 
 // 文件信息
-const info = computed(() => props.data || {});
+const info = computed<Eps.SpaceInfoEntity>(() => props.data || {});
 
 // 已选的序号
-const index = computed(() => space.selection.value.findIndex((e: any) => e.id === info.value.id));
+const index = computed(() => space.selection.value.findIndex((e) => e.id === info.value.id));
 
 // 是否已选择
 const isSelected = computed(() => index.value >= 0);
@@ -90,7 +100,7 @@ const isSelected = computed(() => index.value >= 0);
 const url = computed(() => info.value.preload || info.value.url);
 
 // 类型
-const type = computed(() => fileType(info.value.url));
+const type = computed(() => fileRule(info.value.type));
 
 // 选择
 function select() {
@@ -119,8 +129,11 @@ function onContextMenu(e: any) {
 			{
 				label: "复制地址",
 				callback(done) {
-					copy(info.value.url);
+					if (info.value.url) {
-					ElMessage.success("复制成功");
+						copy(info.value.url);
+						ElMessage.success("复制成功");
+					}
+
 					done();
 				}
 			},
@@ -187,7 +200,11 @@ function onContextMenu(e: any) {
 		}
 	}
 
-	&:not(.is-image) {
+	&.is-video {
+		padding: 0;
+	}
+
+	&:not(.is-image):not(.is-video) {
 		padding: 10px;
 
 		.cl-upload-space-file {
@@ -223,10 +240,22 @@ function onContextMenu(e: any) {
 	}
 
 	&__progress {
-		position: absolute;
+		&-bar {
-		bottom: 10px;
+			position: absolute;
-		left: 10px;
+			bottom: 10px;
-		width: calc(100% - 20px);
+			left: 10px;
+			width: calc(100% - 20px);
+		}
+
+		&-value {
+			position: absolute;
+			font-size: 26px;
+
+			&::after {
+				content: "%";
+				margin-left: 2px;
+			}
+		}
 	}
 
 	&__type {

src/modules/upload/components/space/item-video.vue

@@ -0,0 +1,108 @@
+<template>
+	<div class="item-video">
+		<video ref="Video" :src="info.url" />
+
+		<template v-if="loaded">
+			<el-icon class="icon is-pause" @click.stop="pause" v-if="info.isPlay">
+				<video-pause />
+			</el-icon>
+
+			<el-icon class="icon is-play" @click.stop="play" v-else>
+				<video-play />
+			</el-icon>
+		</template>
+	</div>
+</template>
+
+<script lang="ts" setup name="item-video">
+import { computed, ref, watch } from "vue";
+import { VideoPlay, VideoPause } from "@element-plus/icons-vue";
+import { useSpace } from "../../hooks";
+
+const props = defineProps({
+	data: Object,
+	list: Array
+});
+
+const { space } = useSpace();
+
+const info = computed<Eps.SpaceInfoEntity>(() => props.data || {});
+
+const Video = ref<HTMLVideoElement>();
+
+const loaded = computed(() => {
+	return info.value.progress === undefined || info.value.progress === 100;
+});
+
+function play() {
+	space.list.value.forEach((e) => {
+		e.isPlay = info.value.id == e.id;
+	});
+
+	Video.value?.play();
+}
+
+function pause() {
+	const item = space.list.value.find((e) => e.id == info.value.id);
+
+	if (item) {
+		item.isPlay = false;
+	}
+
+	Video.value?.pause();
+}
+
+watch(
+	() => info.value.isPlay,
+	(val) => {
+		if (val) {
+			play();
+		} else {
+			pause();
+		}
+	}
+);
+
+defineExpose({
+	play,
+	pause
+});
+</script>
+
+<style lang="scss" scoped>
+.item-video {
+	height: 100%;
+	width: 100%;
+	position: relative;
+
+	video {
+		height: 100%;
+		width: 100%;
+	}
+
+	.icon {
+		display: none;
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		margin: auto;
+		cursor: pointer;
+		font-size: 30px;
+		filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.25));
+		color: #fff;
+
+		&:hover {
+			color: #eee;
+			opacity: 1;
+		}
+	}
+
+	&:hover {
+		.icon {
+			display: inline-block;
+		}
+	}
+}
+</style>

src/modules/upload/hooks/index.ts

@@ -0,0 +1,8 @@
+import { inject } from "vue";
+import { Upload } from "../types";
+
+export function useSpace() {
+	const space = inject("space") as Upload.Space;
+
+	return { space };
+}

src/modules/upload/types/index.d.ts

@@ -0,0 +1,22 @@
+import { Ref } from "vue";
+
+export declare namespace Upload {
+	interface Item {
+		url: string;
+		preload: string;
+		uid: number | string;
+		progress: number;
+		type?: string;
+	}
+
+	interface Space {
+		category: {
+			id: number | undefined;
+			visible: boolean;
+		};
+		list: Ref<Eps.SpaceInfoEntity[]>;
+		selection: Ref<Eps.SpaceInfoEntity[]>;
+		refresh(params: any): Promise<any>;
+		loading: boolean;
+	}
+}

src/modules/upload/utils/index.ts

@@ -1,5 +1,34 @@
+import { last } from "lodash-es";
 import { filename, extname } from "/@/cool/utils";
 
+// 文件规则
+const fileRules = [
+	{
+		label: "图片",
+		value: "image",
+		format: ["bmp", "jpg", "jpeg", "png", "tif", "gif", "svg", "webp"],
+		color: "#67C23A"
+	},
+	{
+		label: "视频",
+		value: "video",
+		format: ["avi", "wmv", "mpg", "mpeg", "mov", "rm", "ram", "swf", "flv", "mp4"],
+		color: "#409EFF"
+	},
+	{
+		label: "音频",
+		value: "audio",
+		format: ["mp3", "wav", "wma", "mp2", "flac", "midi", "ra", "ape", "aac", "cda"],
+		color: "#E6A23C"
+	},
+	{
+		label: "文件",
+		value: "file",
+		format: [],
+		color: "#909399"
+	}
+];
+
 // 文件大小
 export function fileSize(size: number): string {
 	if (!size) return "";
@@ -18,36 +47,16 @@ export function fileName(url: string) {
 	return filename(url.substring(url.indexOf("_") + 1));
 }
 
-// 文件类型
+// 类型信息
 export function fileType(path: string) {
-	const fs = [
+	const d = fileRules.find((e) => {
-		{
+		return e.format.find((a) => a == extname(path).toLocaleLowerCase());
-			label: "图片",
+	});
-			value: "image",
-			format: ["bmp", "jpg", "jpeg", "png", "tif", "gif", "svg", "webp"],
-			color: "#67C23A"
-		},
-		{
-			label: "视频",
-			value: "video",
-			format: ["avi", "wmv", "mpg", "mpeg", "mov", "rm", "ram", "swf", "flv", "mp4"],
-			color: "#409EFF"
-		},
-		{
-			label: "音频",
-			value: "audio",
-			format: ["mp3", "wav", "wma", "mp2", "flac", "midi", "ra", "ape", "aac", "cda"],
-			color: "#E6A23C"
-		}
-	];
 
-	return (
+	return d || last(fileRules);
-		fs.find((e) => {
+}
-			return e.format.find((a) => a == extname(path).toLocaleLowerCase());
+
-		}) || {
+// 规则信息
-			label: "文件",
+export function fileRule(value: string) {
-			value: "file",
+	return fileRules.find((e) => e.value == value);
-			color: "#909399"
-		}
-	);
 }