zkqh-lagrange-utils 0.0.53 → 0.0.54

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "zkqh-lagrange-utils",
 	"private": false,
-	"version": "0.0.53",
+	"version": "0.0.54",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",

package/src/service/export_plugin/{PluginLocalExport.jsx → PluginLocalExport.vue}

@@ -1,9 +1,72 @@
+<template>
+	<div
+		v-if="usePlatformExport || usePluginExport"
+		class="plugin_local_export">
+		<!-- 平台 / 应用小文件导出区 -->
+		<div
+			v-if="usePlatformExport"
+			class="_ple_platform">
+			<span class="__tip lc-fs-m">文件小于50MB，请直接导出！</span>
+			<span
+				class="__action lc_btn_primary lc_btn_m"
+				@click="onPlatformExportClick">
+				导&nbsp;&nbsp;出
+			</span>
+		</div>
+
+		<!-- 插件本地目录导出区 -->
+		<template v-if="usePluginExport">
+			<div class="_ple_label lc-fs-m">选择本地目录</div>
+			<div
+				v-if="pluginReady && diskOverflow"
+				class="_ple_warn lc-fs-s">
+				<i class="lc lc-warning-circle-outlined"></i>
+				<span>预估大小超出本地目录剩余空间，请更换目录或缩小导出范围</span>
+			</div>
+
+			<div
+				v-if="!pluginReady"
+				class="_ple_row">
+				<n-tree-select
+					size="small"
+					disabled
+					placeholder="安装插件后可选择导出文件"
+					:options="[]" />
+				<span
+					class="lc_btn_primary lc_btn_m _ple_install"
+					@click="onInstall">
+					立即安装插件
+				</span>
+			</div>
+
+			<div
+				v-else
+				class="_ple_row">
+				<PluginDirSelect
+					v-model="dirname"
+					@update:disk-info="onDiskInfoUpdate" />
+				<div class="_ple_action">
+					<span
+						class="lc_btn_primary lc_btn_m"
+						:class="{ _disabled: pluginExportDisabled }"
+						:title="pluginButtonTitle"
+						@click="onPluginExportClick">
+						导&nbsp;&nbsp;出
+					</span>
+				</div>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script>
 import { defineComponent, ref, computed, toRefs, onMounted } from "vue"
-import { PluginDirSelect } from "./internal/plugin-dir-select.jsx"
+import PluginDirSelect from "./internal/plugin-dir-select.vue"
 import { usePluginHealth } from "./hooks/use-plugin-health.js"
 import { isOverSizeLimit, isPreviewOverflowDisk } from "./utils/size.js"
+/** 组件局部使用 lc iconfont（不依赖宿主全局引入） */
+import "zkqh-lagrange-utils/assets/font/iconfont-lc.css"
 import "./internal/styles/plugin-local-export.less"
-import("./assets/font/iconfont-lc.css")
 
 const DEFAULT_PREVIEW = {
 	show: false,
@@ -13,16 +76,10 @@ const DEFAULT_PREVIEW = {
 
 /**
  * 本地导出组合区：平台/应用小文件导出 + 插件目录导出 + 50MB 分流
- *
- * @example
- * <PluginLocalExport
- *   previewInfo={{ show, totalSize, exportDisabled }}
- *   downloadUrl={url}
- *   onSuccess={({ mode, dirname }) => {}}
- * />
  */
-export const PluginLocalExport = defineComponent({
+export default defineComponent({
 	name: "PluginLocalExport",
+	components: { PluginDirSelect },
 	props: {
 		/**
 		 * 预览与分流控制
@@ -57,7 +114,6 @@ export const PluginLocalExport = defineComponent({
 
 		/**
 		 * 是否展示平台/应用导出区（≤50MB）
-		 * show=true 且未禁用且有大小且未超 50MB
 		 */
 		const usePlatformExport = computed(() => {
 			const info = preview.value
@@ -130,76 +186,19 @@ export const PluginLocalExport = defineComponent({
 			emit("success", { mode: "plugin", dirname: dirname.value })
 		}
 
-		return () => {
-			const showPlatform = usePlatformExport.value
-			const showPlugin = usePluginExport.value
-
-			if (!showPlatform && !showPlugin) {
-				return null
-			}
-
-			return (
-				<div class="plugin_local_export">
-					{showPlatform ? (
-						<div class="_ple_platform">
-							<span class="__tip lc-fs-m">文件小于50MB，请直接导出！</span>
-							<span
-								class="__action lc_btn_primary lc_btn_m"
-								onClick={onPlatformExportClick}>
-								导&nbsp;&nbsp;出
-							</span>
-						</div>
-					) : null}
-
-					{showPlugin ? (
-						<>
-							<div class="_ple_label lc-fs-m">选择本地目录</div>
-							{pluginReady.value && diskOverflow.value ? (
-								<div class="_ple_warn lc-fs-s">
-									<i class="lc lc-warning-circle-outlined"></i>
-									<span>预估大小超出本地目录剩余空间，请更换目录或缩小导出范围</span>
-								</div>
-							) : null}
-
-							{!pluginReady.value ? (
-								<div class="_ple_row">
-									<n-tree-select
-										size="small"
-										disabled
-										placeholder="安装插件后可选择导出文件"
-										options={[]}
-									/>
-									<span
-										class="lc_btn_primary lc_btn_m _ple_install"
-										onClick={onInstall}>
-										立即安装插件
-									</span>
-								</div>
-							) : (
-								<div class="_ple_row">
-									<PluginDirSelect
-										modelValue={dirname.value}
-										onUpdate:modelValue={(v) => {
-											dirname.value = v
-										}}
-										onUpdate:diskInfo={onDiskInfoUpdate}
-									/>
-									<div class="_ple_action">
-										<span
-											class={["lc_btn_primary", "lc_btn_m", pluginExportDisabled.value ? "_disabled" : ""]}
-											title={pluginButtonTitle.value}
-											onClick={onPluginExportClick}>
-											导&nbsp;&nbsp;出
-										</span>
-									</div>
-								</div>
-							)}
-						</>
-					) : null}
-				</div>
-			)
+		return {
+			dirname,
+			pluginReady,
+			usePlatformExport,
+			usePluginExport,
+			diskOverflow,
+			pluginExportDisabled,
+			pluginButtonTitle,
+			onDiskInfoUpdate,
+			onInstall,
+			onPlatformExportClick,
+			onPluginExportClick,
 		}
 	},
 })
-
-export default PluginLocalExport
+</script>

package/src/service/export_plugin/index.js

@@ -11,5 +11,5 @@
  */
 
 export { pluginApi } from "./api/plugin.js"
-export { PluginLocalExport } from "./PluginLocalExport.jsx"
-export { default } from "./PluginLocalExport.jsx"
+export { default as PluginLocalExport } from "./PluginLocalExport.vue"
+export { default } from "./PluginLocalExport.vue"

package/src/service/export_plugin/internal/{create-folder-modal.jsx → create-folder-modal.vue}

@@ -1,3 +1,24 @@
+<template>
+	<n-modal
+		:show="true"
+		preset="dialog"
+		title="新建文件夹"
+		positive-text="确认"
+		negative-text="取消"
+		:mask-closable="false"
+		@update:show="onShowUpdate"
+		@positive-click="onConfirm">
+		<div class="export_plugin_modals_hint lc-fs-s">将在以下目录下创建：{{ parentDisplay }}</div>
+		<n-input
+			v-model:value="folderName"
+			size="small"
+			placeholder="请输入文件夹名称"
+			class="mt-8"
+			@keyup.enter="onConfirm" />
+	</n-modal>
+</template>
+
+<script>
 import { defineComponent, ref, computed } from "vue"
 import { pluginApi } from "../api/plugin.js"
 import { formatPathDisplay, normalizeDir } from "../utils/plugin-dir.js"
@@ -6,7 +27,7 @@ import "./styles/export-plugin-modals.less"
 /**
  * 新建文件夹弹窗（由父级 v-if 控制挂载，内部组件不对外）
  */
-export const CreateFolderModal = defineComponent({
+export default defineComponent({
 	name: "CreateFolderModal",
 	props: {
 		/** 父目录路径 */
@@ -22,6 +43,10 @@ export const CreateFolderModal = defineComponent({
 			emit("close")
 		}
 
+		const onShowUpdate = (v) => {
+			if (!v) close()
+		}
+
 		/**
 		 * 新建文件夹
 		 * @param {string} name
@@ -69,34 +94,12 @@ export const CreateFolderModal = defineComponent({
 			return true
 		}
 
-		return () => (
-			<n-modal
-				show={true}
-				onUpdate:show={(v) => {
-					if (!v) close()
-				}}
-				preset="dialog"
-				title="新建文件夹"
-				positiveText="确认"
-				negativeText="取消"
-				maskClosable={false}
-				onPositiveClick={onConfirm}>
-				<div class="export_plugin_modals_hint lc-fs-s">将在以下目录下创建：{parentDisplay.value}</div>
-				<n-input
-					value={folderName.value}
-					onUpdate:value={(v) => {
-						folderName.value = v
-					}}
-					size="small"
-					placeholder="请输入文件夹名称"
-					class="mt-8"
-					onKeyup={(e) => {
-						if (e.key === "Enter") onConfirm()
-					}}
-				/>
-			</n-modal>
-		)
+		return {
+			folderName,
+			parentDisplay,
+			onShowUpdate,
+			onConfirm,
+		}
 	},
 })
-
-export default CreateFolderModal
+</script>

package/src/service/export_plugin/internal/{plugin-dir-select.jsx → plugin-dir-select.vue}

@@ -1,83 +1,63 @@
-import { defineComponent, ref, computed, toRefs } from "vue"
-import { pluginApi } from "../api/plugin.js"
-import {
-	buildPathChain,
-	findNodeByKey,
-	formatDiskRemain,
-	isPathUnder,
-	mapDirNodes,
-	normalizeDir,
-	normalizePathKey,
-	toTreeKey,
-} from "../utils/plugin-dir.js"
-import { CreateFolderModal } from "./create-folder-modal.jsx"
-import "./styles/plugin-dir-select.less"
-
-/**
- * 目录树选择
- * @param {object} ctx
- */
-const renderDirTreeSelect = (ctx) => {
-	const {
-		treeSelectKey,
-		treeSelectValue,
-		treeOptions,
-		expandedKeys,
-		renderTreeLabel,
-		onLoadTreeNode,
-		onExpandedKeysUpdate,
-		onDirChange,
-	} = ctx
-
-	return (
+<template>
+	<div class="plugin_dir_select">
 		<n-tree-select
-			key={treeSelectKey.value}
-			value={treeSelectValue.value}
+			:key="treeSelectKey"
+			:value="treeSelectValue"
 			size="small"
 			placeholder="请选择本地目录"
-			consistentMenuWidth={false}
-			showPath
+			:consistent-menu-width="false"
+			show-path
 			separator="/"
 			filterable
 			clearable
-			options={treeOptions.value}
-			expandedKeys={expandedKeys.value}
-			menuProps={{ class: "plugin_dir_select_tree" }}
-			renderLabel={renderTreeLabel}
-			onLoad={onLoadTreeNode}
-			onUpdate:expandedKeys={onExpandedKeysUpdate}
-			onUpdate:value={onDirChange}
-		/>
-	)
-}
-
-/**
- * 文件夹图标 + 磁盘占用
- * @param {object} ctx
- */
-const renderDirUsage = (ctx) => {
-	const { diskUsageText, usagePercent } = ctx
-
-	return (
-		<>
+			:options="treeOptions"
+			:expanded-keys="expandedKeys"
+			:menu-props="{ class: 'plugin_dir_select_tree' }"
+			:render-label="renderTreeLabel"
+			:on-load="onLoadTreeNode"
+			@update:expanded-keys="onExpandedKeysUpdate"
+			@update:value="onDirChange" />
+		<template v-if="diskUsageText">
 			<span class="_pds_folder_icon">
 				<i class="lc lc-tuxing1"></i>
 			</span>
 			<div class="_pds_usage">
 				<div class="__bar">
-					<span style={{ width: `${usagePercent.value}%` }}></span>
+					<span :style="{ width: `${usagePercent}%` }"></span>
 				</div>
-				<span class="lc-fs-s">{diskUsageText.value}</span>
+				<span class="lc-fs-s">{{ diskUsageText }}</span>
 			</div>
-		</>
-	)
-}
+		</template>
+		<CreateFolderModal
+			v-if="showCreateModal"
+			:parent-path="createParentPath"
+			@created="onFolderCreated"
+			@close="showCreateModal = false" />
+	</div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, toRefs, h } from "vue"
+import { pluginApi } from "../api/plugin.js"
+import {
+	buildPathChain,
+	findNodeByKey,
+	formatDiskRemain,
+	isPathUnder,
+	mapDirNodes,
+	normalizeDir,
+	normalizePathKey,
+	toTreeKey,
+} from "../utils/plugin-dir.js"
+import CreateFolderModal from "./create-folder-modal.vue"
+import "./styles/plugin-dir-select.less"
 
 /**
  * 插件本地目录选择（树选择 + 占用展示 + 新建文件夹，内部组件）
  */
-export const PluginDirSelect = defineComponent({
+export default defineComponent({
 	name: "PluginDirSelect",
+	components: { CreateFolderModal },
 	props: {
 		/** 当前选中目录（v-model） */
 		modelValue: { type: String, default: "" },
@@ -126,18 +106,20 @@ export const PluginDirSelect = defineComponent({
 		}
 
 		/** 目录树节点：文件夹名 + 新建子目录 */
-		const renderTreeLabel = ({ option }) => (
-			<span class="_pds_tree_node">
-				<span class="__name">{option.label}</span>
-				<span
-					class="__add"
-					title="新建子文件夹"
-					onMousedown={(e) => e.stopPropagation()}
-					onClick={(e) => openCreateFolder(option.key, e)}>
-					+
-				</span>
-			</span>
-		)
+		const renderTreeLabel = ({ option }) =>
+			h("span", { class: "_pds_tree_node" }, [
+				h("span", { class: "__name" }, option.label),
+				h(
+					"span",
+					{
+						class: "__add",
+						title: "新建子文件夹",
+						onMousedown: (e) => e.stopPropagation(),
+						onClick: (e) => openCreateFolder(option.key, e),
+					},
+					"+",
+				),
+			])
 
 		const loadNodeChildren = async (node) => {
 			if (Array.isArray(node.children)) return node.children
@@ -313,31 +295,21 @@ export const PluginDirSelect = defineComponent({
 
 		initDirectory()
 
-		return () => (
-			<div class="plugin_dir_select">
-				{renderDirTreeSelect({
-					treeSelectKey,
-					treeSelectValue,
-					treeOptions,
-					expandedKeys,
-					renderTreeLabel,
-					onLoadTreeNode,
-					onExpandedKeysUpdate,
-					onDirChange,
-				})}
-				{diskUsageText.value ? renderDirUsage({ diskUsageText, usagePercent }) : null}
-				{showCreateModal.value ? (
-					<CreateFolderModal
-						parentPath={createParentPath.value}
-						onCreated={onFolderCreated}
-						onClose={() => {
-							showCreateModal.value = false
-						}}
-					/>
-				) : null}
-			</div>
-		)
+		return {
+			showCreateModal,
+			createParentPath,
+			treeOptions,
+			expandedKeys,
+			treeSelectKey,
+			treeSelectValue,
+			diskUsageText,
+			usagePercent,
+			renderTreeLabel,
+			onLoadTreeNode,
+			onExpandedKeysUpdate,
+			onDirChange,
+			onFolderCreated,
+		}
 	},
 })
-
-export default PluginDirSelect
+</script>