Optimize upload component styles

packages/xgen/build/components.ts

@@ -13,18 +13,23 @@ const target_root = path.join(cwd, `/public/components`)
 // Generate the sss files for the components
 const compile = (name: string, component: ExportComponent) => {
 	const output = path.join(target_root, `${name}`)
-	const input = path.join(cwd, `__main.less`)
+
+	// Clean the output directory
+	if (fs.existsSync(output)) {
+		fs.rmSync(output, { recursive: true })
+	}
 
 	// Generate the main.less file import the component styles
 	const imports: string[] = []
-	component.styles.forEach((style, index) => {
+	let chunkIndex = 0
+	component.styles.forEach((style) => {
 		if (style.startsWith('@/')) {
 			imports.push(`@import url('/__yao_admin_root/${style.substring(2, style.length)}');`)
 			return
 		}
-		// fs.appendFileSync(input, `@import ".${style}";\n`)
+		chunkIndex++
 		const lessFile = path.join(cwd, style)
-		const targetName = `chunk.${index}.css`
+		const targetName = `chunk.${chunkIndex}.css`
 		const targetPath = path.join(output, targetName)
 		imports.push(`@import url('/__yao_admin_root/components/${name}/${targetName}');`)
 

packages/xgen/components/edit/Upload/components/Audio.tsx

@@ -6,7 +6,6 @@ import { DefaultAudioLayout, DefaultLayoutIcons, defaultLayoutIcons } from '@vid
 import { useGlobal } from '@/context/app'
 import '@vidstack/react/player/styles/default/theme.css'
 import '@vidstack/react/player/styles/default/layouts/audio.css'
-import styles from './Audio.less'
 import clsx from 'clsx'
 import { GetPreviewURL } from '../utils/handleFileList'
 import Toolbar from './Toolbar'
@@ -43,7 +42,7 @@ const Index = (props: IPropsCustomRender) => {
 
 	return (
 		<div
-			className={clsx([styles._local, 'upload_custom_wrap', 'flex', 'relative'])}
+			className={clsx(['xgen-edit-upload-preview-wrap', 'preview-audio', 'flex', 'relative'])}
 			onMouseEnter={() => setShowOpration(true)}
 			onMouseLeave={() => setShowOpration(false)}
 		>
@@ -66,7 +65,7 @@ const Index = (props: IPropsCustomRender) => {
 			>
 				<MediaPlayer
 					style={{ height: '52px', width: size?.width || '100%' }}
-					className={clsx([styles._local])}
+					className={clsx(['mediaplayer_wrap'])}
 					title={title}
 					src={url + `&${file.name}`}
 				>

packages/xgen/components/edit/Upload/components/File.tsx

@@ -4,7 +4,6 @@ import { Icon } from '@/widgets'
 
 import '@vidstack/react/player/styles/default/theme.css'
 import '@vidstack/react/player/styles/default/layouts/audio.css'
-import styles from './File.less'
 import clsx from 'clsx'
 import { GetPreviewURL } from '../utils/handleFileList'
 import Toolbar from './Toolbar'
@@ -36,7 +35,7 @@ const Index = (props: IPropsCustomRender) => {
 
 	return (
 		<div
-			className={clsx([styles._local, 'upload_custom_wrap', 'flex', 'relative'])}
+			className={clsx(['xgen-edit-upload-preview-wrap', 'preview-file', 'flex', 'relative'])}
 			onMouseEnter={() => setShowOpration(true)}
 			onMouseLeave={() => setShowOpration(false)}
 		>

packages/xgen/components/edit/Upload/components/Image.tsx

@@ -1,7 +1,6 @@
 import type { IPropsCustomRender } from '../types'
 import { useEffect, useState } from 'react'
 
-import styles from './Image.less'
 import clsx from 'clsx'
 import { GetPreviewURL } from '../utils/handleFileList'
 import Loader from './Loader'
@@ -27,13 +26,7 @@ const Index = (props: IPropsCustomRender) => {
 
 	return (
 		<div
-			className={clsx([
-				styles['xgen-edit-upload-image'],
-				'xgen-edit-upload-image',
-				'upload_custom_wrap',
-				'flex',
-				'relative'
-			])}
+			className={clsx(['xgen-edit-upload-preview-wrap', 'preview-image', 'flex', 'relative'])}
 			onMouseEnter={() => setShowOpration(true)}
 			onMouseLeave={() => setShowOpration(false)}
 		>

packages/xgen/components/edit/Upload/components/Loader.tsx

@@ -1,9 +1,8 @@
 import clsx from 'clsx'
 import type { IPropsLoader } from '../types'
-import styles from './Loader.less'
 
 const Index = (props: IPropsLoader) => {
-	const { size, events, remove } = props
+	const { size, events } = props
 	const ProgressBar = () => {
 		const percent = events?.progress?.total
 			? Math.floor(((events?.progress?.loaded || 0) / events?.progress?.total) * 100)
@@ -14,14 +13,12 @@ const Index = (props: IPropsLoader) => {
 		const humanReadable = `${percent}%`
 
 		return (
-			<div className={clsx([styles.progress_wrap, events?.error && styles.has_error])}>
-				<div className={styles.progress}>
-					<div className={styles.bar} style={{ width: humanReadable }}></div>
+			<div className={clsx(['progress_wrap', events?.error && 'has_error'])}>
+				<div className={'progress'}>
+					<div className={'bar'} style={{ width: humanReadable }}></div>
 				</div>
-				<div className={styles.text}>
-					<span className={styles.percent}>
-						{events?.error ? events?.error.message : humanReadable}
-					</span>
+				<div className={'text'}>
+					<span className={'percent'}>{events?.error ? events?.error.message : humanReadable}</span>
 					{(events?.progress?.total || 0) > 0 && !events?.error && (
 						<span>
 							{loadedMB}MB / {totalMB}MB
@@ -35,9 +32,9 @@ const Index = (props: IPropsLoader) => {
 	const Loading = (
 		<div
 			className={clsx([
-				styles._local,
-				events?.error && styles.has_error,
-				'xgen-upload xgen-upload-select xgen-upload-select-picture-card'
+				'xgen-edit-upload-preview-loader',
+				'xgen-upload xgen-upload-select xgen-upload-select-picture-card',
+				events?.error && 'has_error'
 			])}
 			style={{
 				width: size?.width || '90px',

packages/xgen/components/edit/Upload/components/Video.tsx

@@ -8,7 +8,6 @@ import { useGlobal } from '@/context/app'
 import '@vidstack/react/player/styles/default/theme.css'
 import '@vidstack/react/player/styles/default/layouts/video.css'
 
-import styles from './Video.less'
 import clsx from 'clsx'
 import { GetPreviewURL } from '../utils/handleFileList'
 import Loader from './Loader'
@@ -45,7 +44,7 @@ const Index = (props: IPropsCustomRender) => {
 
 	return (
 		<div
-			className={clsx([styles._local, 'upload_custom_wrap', 'flex', 'relative'])}
+			className={clsx(['xgen-edit-upload-preview-wrap', 'preview-video', 'flex', 'relative'])}
 			onMouseEnter={() => setShowOpration(true)}
 			onMouseLeave={() => setShowOpration(false)}
 		>
@@ -72,7 +71,7 @@ const Index = (props: IPropsCustomRender) => {
 							height: size?.height || '162px',
 							width: size?.width
 						}}
-						className={clsx([styles._local])}
+						className={clsx(['mediaplayer_wrap'])}
 						title={title}
 						src={url + `&${file.name}`}
 					>