add product

src/pages/product/ProductCategoryList.vue

@@ -0,0 +1,418 @@
+<template>
+	<div v-can="permissionCodes.productCategory.read" class="product-category-list">
+		<div class="filters bg-white">
+			<t-input
+				v-model="keyword"
+				class="keyword"
+				type="search"
+				borderless
+				placeholder="搜索分类名称"
+			/>
+			<t-dropdown-menu class="status">
+				<t-dropdown-item
+					v-model="status"
+					label="状态"
+					:options="statusOptions"
+					@change="selectStatus"
+				/>
+			</t-dropdown-menu>
+		</div>
+		<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
+			<t-cell-group v-if="categoryList.length" theme="card" class="list fix-last-cell-line">
+				<t-swipe-cell v-for="(item, index) in categoryList" :key="item.id" class="item" v-entrance-transition="index * 30">
+					<t-cell arrow hover @click="openEditDialog(item)">
+						<template #title>
+							<div class="title">
+								<strong v-text="item.name || '未命名分类'" />
+							</div>
+						</template>
+						<template #note>
+							<t-tag size="small" variant="outline" :theme="getProductCategoryStatusTheme(item.status)" :content="getProductCategoryStatusText(item.status)" />
+						</template>
+					</t-cell>
+					<template v-if="canUpdate && item.status === 'ACTIVE' && item.id" #right>
+						<t-button class="disable" theme="danger" :loading="disablingId === item.id" @click.stop="disable(item)">停用</t-button>
+					</template>
+				</t-swipe-cell>
+			</t-cell-group>
+			<div v-else class="center-tips" v-text="emptyText" />
+			<div v-if="categoryList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
+		</t-pull-down-refresh>
+	</div>
+	<t-dialog
+		v-model:visible="editDialogVisible"
+		:title="isCreateMode ? '新增产品分类' : '编辑产品分类'"
+		cancel-btn="取消"
+		:confirm-btn="isSaving ? { content: '保存中', loading: true } : '保存'"
+		:close-on-overlay-click="!isSaving"
+		@cancel="closeEditDialog"
+		@confirm="saveCategory"
+	>
+		<t-form class="edit-form" label-align="left" label-width="5rem">
+			<t-form-item label="分类名称" required-mark>
+				<t-input
+					v-model="formModel.name"
+					borderless
+					maxlength="64"
+					placeholder="请输入分类名称"
+				/>
+			</t-form-item>
+			<t-form-item v-if="!isCreateMode" label="状态" arrow content-align="right" @click="openStatusPicker">
+				<span v-text="getProductCategoryStatusText(formModel.status)" />
+			</t-form-item>
+		</t-form>
+	</t-dialog>
+	<t-popup v-model="statusPickerVisible" placement="bottom">
+		<t-picker v-model="statusDraft" :columns="statusPickerOptions" title="分类状态" @cancel="statusPickerVisible = false" @confirm="confirmStatus" />
+	</t-popup>
+	<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
+</template>
+
+<script setup lang="ts">
+import { DialogPlugin, type DropdownValue } from "tdesign-mobile-vue";
+import { useUserStore } from "timi-web-api";
+import ProductAPI from "@/api/ProductAPI";
+import type { NavBarAction } from "@/types/NavBarAction";
+import type { ProductCategory, ProductCategoryStatus } from "@/types/Product";
+import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import { getErrorMessage } from "@/utils/error";
+import { getProductCategoryStatusText, getProductCategoryStatusTheme } from "@/utils/product";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "ProductCategoryList" });
+
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const canCreate = computed(() => userStore.hasPermissions(permissionCodes.productCategory.create));
+const canUpdate = computed(() => userStore.hasPermissions(permissionCodes.productCategory.update));
+const canShowActionMenu = computed(() => canCreate.value || canUpdate.value);
+const actionList = computed<NavBarAction[]>(() => {
+	const list: NavBarAction[] = [];
+	if (canCreate.value) {
+		list.push({
+			key: "create",
+			text: "新增分类",
+			icon: "add",
+			theme: "primary",
+			action: openCreateDialog
+		});
+	}
+	if (canUpdate.value) {
+		list.push({
+			key: "rank",
+			text: "排序",
+			icon: "order",
+			action: toRank
+		});
+	}
+	return list;
+});
+
+const keyword = ref("");
+const status = ref("ALL");
+const categoryList = ref<ProductCategory[]>([]);
+const pageIndex = ref(0);
+const total = ref(0);
+const isLoading = ref(false);
+const isRefreshing = ref(false);
+const isNoMore = ref(false);
+const disablingId = ref("");
+const isSaving = ref(false);
+const editDialogVisible = ref(false);
+const statusPickerVisible = ref(false);
+const statusDraft = ref<Array<string | number>>([]);
+const formModel = reactive<ProductCategory>({
+	id: undefined,
+	name: "",
+	sort: 0,
+	status: "ACTIVE"
+});
+const isCreateMode = computed(() => !formModel.id);
+let keywordTimer: number | undefined;
+let requestToken = 0;
+
+const statusOptions = [
+	{ label: "全部状态", value: "ALL" },
+	{ label: "启用", value: "ACTIVE" },
+	{ label: "停用", value: "INACTIVE" }
+];
+const statusPickerOptions = [
+	{ label: "启用", value: "ACTIVE" },
+	{ label: "停用", value: "INACTIVE" }
+];
+const emptyText = computed(() => isLoading.value ? "正在加载产品分类" : keyword.value ? "未找到匹配分类" : "暂无产品分类");
+
+async function fetch(reset = false): Promise<void> {
+	if (!reset && (isLoading.value || isNoMore.value)) {
+		return;
+	}
+	if (reset) {
+		pageIndex.value = 0;
+		categoryList.value = [];
+		total.value = 0;
+		isNoMore.value = false;
+	}
+	const token = ++requestToken;
+	isLoading.value = true;
+	try {
+		const pageSize = 20;
+		const result = await ProductAPI.categoryList({
+			index: pageIndex.value,
+			size: pageSize,
+			keyword: keyword.value || undefined,
+			status: status.value === "ALL" ? undefined : status.value as ProductCategoryStatus
+		});
+		if (token !== requestToken) {
+			return;
+		}
+		const list = result.list || [];
+		categoryList.value = reset ? list : categoryList.value.concat(list);
+		total.value = result.total || 0;
+		pageIndex.value += 1;
+		isNoMore.value = list.length < pageSize || total.value === categoryList.value.length || total.value < categoryList.value.length;
+	} finally {
+		if (token === requestToken) {
+			isLoading.value = false;
+		}
+	}
+}
+
+async function refresh(): Promise<void> {
+	try {
+		await fetch(true);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品分类加载失败"));
+	} finally {
+		isRefreshing.value = false;
+	}
+}
+
+async function loadMore(): Promise<void> {
+	try {
+		await fetch();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品分类加载失败"));
+	}
+}
+
+async function selectStatus(value: DropdownValue): Promise<void> {
+	if (Array.isArray(value)) {
+		return;
+	}
+	status.value = String(value);
+	await fetch(true);
+}
+
+function openCreateDialog(): void {
+	if (!canCreate.value) {
+		return;
+	}
+	Object.assign(formModel, {
+		id: undefined,
+		name: "",
+		sort: 0,
+		status: "ACTIVE"
+	});
+	statusPickerVisible.value = false;
+	editDialogVisible.value = true;
+}
+
+function openEditDialog(item: ProductCategory): void {
+	if (!item.id || !canUpdate.value) {
+		return;
+	}
+	Object.assign(formModel, {
+		id: item.id,
+		name: item.name || "",
+		sort: item.sort ?? 0,
+		status: item.status || "ACTIVE",
+		storeId: item.storeId
+	});
+	statusPickerVisible.value = false;
+	editDialogVisible.value = true;
+}
+
+function closeEditDialog(): void {
+	if (isSaving.value) {
+		return;
+	}
+	statusPickerVisible.value = false;
+	editDialogVisible.value = false;
+}
+
+function openStatusPicker(): void {
+	statusDraft.value = [formModel.status || "ACTIVE"];
+	statusPickerVisible.value = true;
+}
+
+function confirmStatus(value: Array<string | number>): void {
+	const nextStatus = String(value[0] || "");
+	if (nextStatus === "ACTIVE" || nextStatus === "INACTIVE") {
+		formModel.status = nextStatus;
+	}
+	statusPickerVisible.value = false;
+}
+
+function validateForm(): boolean {
+	if (!formModel.name.trim()) {
+		Message.warning("请输入分类名称");
+		return false;
+	}
+	return true;
+}
+
+async function saveCategory(): Promise<void> {
+	if (isSaving.value) {
+		return;
+	}
+	const isCreating = !formModel.id;
+	if (isCreating ? !canCreate.value : !canUpdate.value) {
+		return;
+	}
+	if (!validateForm()) {
+		return;
+	}
+	isSaving.value = true;
+	try {
+		const payload: ProductCategory = {
+			id: formModel.id,
+			name: formModel.name.trim(),
+			sort: formModel.sort ?? 0,
+			status: formModel.status
+		};
+		if (isCreating) {
+			await ProductAPI.categoryCreate(payload);
+		} else {
+			await ProductAPI.categoryUpdate(payload);
+		}
+		editDialogVisible.value = false;
+		await fetch(true);
+		Message.success(isCreating ? "产品分类已创建" : "产品分类已保存");
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品分类保存失败"));
+	} finally {
+		isSaving.value = false;
+	}
+}
+
+async function toRank(): Promise<void> {
+	await router.push({ name: "ProductCategoryRank" });
+}
+
+function disable(item: ProductCategory): void {
+	if (!item.id || disablingId.value) {
+		return;
+	}
+	const dialog = DialogPlugin.confirm({
+		title: "停用产品分类",
+		content: `确定停用“${item.name || "未命名分类"}”？停用后不能用于新产品。`,
+		confirmBtn: { content: "停用", theme: "danger" },
+		onConfirm: async () => {
+			disablingId.value = item.id || "";
+			try {
+				await ProductAPI.categoryDisable(item.id || "");
+				await fetch(true);
+				Message.success("产品分类已停用");
+			} catch (error) {
+				Message.error(getErrorMessage(error, "产品分类停用失败"));
+			} finally {
+				disablingId.value = "";
+				dialog.destroy();
+			}
+		}
+	});
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	navBarStore.setCustomRightVisible(canShowActionMenu.value);
+	try {
+		await fetch(true);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品分类加载失败"));
+	}
+});
+
+watch(keyword, () => {
+	window.clearTimeout(keywordTimer);
+	keywordTimer = window.setTimeout(async () => {
+		try {
+			await fetch(true);
+		} catch (error) {
+			Message.error(getErrorMessage(error, "产品分类加载失败"));
+		}
+	}, 300);
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+	statusPickerVisible.value = false;
+	window.clearTimeout(keywordTimer);
+	requestToken += 1;
+});
+</script>
+
+<style scoped lang="less">
+.product-category-list {
+	padding: var(--app-nav-height) 0 1rem;
+
+	.filters {
+		top: var(--app-nav-height);
+		left: 0;
+		right: 0;
+		z-index: 10;
+		gap: .5rem;
+		display: flex;
+		padding: .75rem 1rem;
+		position: sticky;
+		background: var(--td-bg-color-page);
+		box-shadow: var(--td-shadow-1);
+
+		.keyword {
+			flex: 1;
+			border: 1px solid var(--td-component-border);
+			z-index: 1;
+			padding: .5rem 1rem;
+			background: var(--td-bg-color-container);
+			border-radius: 1rem;
+		}
+
+		.status {
+			margin-left: -2rem;
+			padding-left: 1.5rem;
+			border-radius: 1rem;
+
+			&:after {
+				display: none;
+			}
+		}
+	}
+
+	.list {
+		padding-top: .75rem;
+
+		.item {
+
+			.title {
+				gap: .5rem;
+				display: flex;
+				align-items: center;
+			}
+
+			.disable {
+				height: 100%;
+				padding: 0 1rem;
+				border-radius: 0;
+			}
+		}
+	}
+}
+
+.edit-form {
+	margin: 0;
+	padding: 0;
+}
+</style>

src/pages/product/ProductCategoryRank.vue

@@ -0,0 +1,189 @@
+<template>
+	<div v-can="permissionCodes.productCategory.update" class="product-category-rank">
+		<div class="tip" v-text="'按住右侧拖动手柄调整分类顺序，保存后生效'" />
+		<div class="items">
+			<t-cell-group v-if="categoryList.length" theme="card">
+				<vue-draggable-next
+					v-model="categoryList"
+					class="draggable"
+					item-key="id"
+					handle=".handle"
+					ghost-class="ghost"
+					chosen-class="chosen"
+					drag-class="dragging"
+					:animation="180"
+					:disabled="isLoading || isSaving"
+					@change="handleSortChange"
+				>
+					<t-cell
+						v-for="(item, index) in categoryList"
+						:key="item.id"
+						class="cell"
+						:title="item.name || '未命名分类'"
+						v-entrance-transition="index * 30"
+					>
+						<template #note>
+							<t-tag
+								:theme="getStatusTheme(item.status)"
+								variant="outline"
+								:content="getStatusText(item.status)"
+							/>
+						</template>
+						<template #rightIcon>
+							<t-icon class="handle" role="button" name="move" aria-label="拖动排序" />
+						</template>
+					</t-cell>
+				</vue-draggable-next>
+			</t-cell-group>
+			<div v-else class="empty-block" v-text="isLoading ? '正在加载产品分类' : '暂无产品分类'" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { TagProps } from "tdesign-mobile-vue";
+import { VueDraggableNext } from "vue-draggable-next";
+import ProductAPI from "@/api/ProductAPI";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { ProductCategory, ProductCategoryStatus } from "@/types/Product";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+import { useUserStore } from "timi-web-api";
+
+defineOptions({ name: "ProductCategoryRank" });
+
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const router = useRouter();
+
+const categoryList = ref<ProductCategory[]>([]);
+const isLoading = ref(false);
+const isSaving = ref(false);
+const sortDirty = ref(false);
+
+function getStatusText(status?: ProductCategoryStatus): string {
+	return status === "ACTIVE" ? "启用" : "停用";
+}
+
+function getStatusTheme(status?: ProductCategoryStatus): TagProps["theme"] {
+	return status === "ACTIVE" ? "primary" : "default";
+}
+
+function handleSortChange(): void {
+	sortDirty.value = true;
+}
+
+async function saveSort(): Promise<void> {
+	if (!sortDirty.value || isSaving.value || !userStore.hasPermissions(permissionCodes.productCategory.update)) {
+		return;
+	}
+	isSaving.value = true;
+	try {
+		const idList = categoryList.value
+			.map(item => item.id)
+			.filter((id): id is string => Boolean(id));
+		await ProductAPI.categorySort(idList);
+		categoryList.value.forEach((item, index) => {
+			item.sort = index;
+		});
+		sortDirty.value = false;
+		Message.success("产品分类排序已保存");
+		await router.back();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品分类排序保存失败"));
+	} finally {
+		isSaving.value = false;
+	}
+}
+
+async function loadData(): Promise<void> {
+	isLoading.value = true;
+	try {
+		const result = await ProductAPI.categoryList({ index: 0, size: 1000 });
+		categoryList.value = result.list || [];
+		sortDirty.value = false;
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	if (userStore.hasPermissions(permissionCodes.productCategory.update)) {
+		navBarStore.setRightText("保存", "var(--td-brand-color)", saveSort);
+	}
+	try {
+		await loadData();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品分类加载失败"));
+	}
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+});
+</script>
+
+<style scoped lang="less">
+.product-category-rank {
+	padding: calc(var(--app-nav-height) + 1rem) 0 6rem;
+
+	.tip {
+		color: #52607a;
+		padding: 0 1rem .75rem;
+		font-size: .8125rem;
+	}
+
+	.items {
+		.draggable {
+			.cell {
+				position: relative;
+
+				.handle {
+					color: #52607a;
+					cursor: grab;
+					touch-action: none;
+				}
+			}
+
+			.ghost {
+				opacity: .4;
+			}
+
+			.chosen,
+			.dragging {
+				z-index: 1;
+				box-shadow: 0 .5rem 1rem rgba(15, 23, 42, .16);
+			}
+		}
+	}
+
+	.empty-block {
+		color: #52607a;
+		padding: 2rem 1rem;
+		text-align: center;
+	}
+}
+
+:global(html.theme-dark) {
+	.product-category-rank {
+		.tip,
+		.empty-block,
+		.handle {
+			color: #94a3b8;
+		}
+
+		.draggable {
+			.cell {
+				background: rgba(15, 23, 42, .88);
+				box-shadow: 0 .5rem 1rem rgba(2, 6, 23, .28);
+			}
+
+			.ghost {
+				background: rgba(15, 23, 42, .6);
+			}
+		}
+	}
+}
+</style>

src/pages/product/ProductDetail.vue

@@ -0,0 +1,269 @@
+<template>
+	<div v-can="permissionCodes.product.read" class="product-detail">
+		<t-loading v-if="isLoading" class="loading" size="32px" />
+		<template v-else-if="product">
+			<section class="hero" v-entrance-transition>
+				<span class="eyebrow" v-text="'产品库'" />
+				<div class="hero-title">
+					<h1 v-text="product.name || '未命名产品'" />
+					<t-tag :content="getProductStatusText(product.status)" variant="light-outline" :theme="getProductStatusTheme(product.status)" />
+				</div>
+				<div class="hero-meta">
+					<span v-text="`${product.code || '-'} · ${getProductTypeText(product.productType)}`" />
+					<span v-text="`${product.unitList?.length || 0} 个业务单位`" />
+				</div>
+			</section>
+			<card-container v-if="product.attachmentList?.length" title="产品附件">
+				<photo-scroller
+					:model-value="attachmentUrlList"
+					:photo-items="attachmentItemList"
+					title="附件列表"
+					:show-add="false"
+					:show-remove="false"
+					:show-viewer-actions="false"
+				/>
+			</card-container>
+			<card-container title="基本信息">
+				<t-cell-group theme="card" class="info">
+					<t-cell title="产品名称" :note="product.name || '未命名产品'" />
+					<t-cell title="产品编码" :note="product.code || '-'" />
+					<t-cell title="产品类型" :note="getProductTypeText(product.productType)" />
+					<t-cell title="产品分类" :note="product.category?.name || '未分类'" />
+					<t-cell title="基础单位" :note="product.baseUnit || '-'" />
+					<t-cell title="参考成本" :note="formatProductAmount(product.referenceCost)" />
+					<t-cell title="库存管理" :note="product.stockEnabled ? '已开启' : '未开启'" />
+					<t-cell title="状态" :note="getProductStatusText(product.status)" />
+				</t-cell-group>
+			</card-container>
+			<card-container title="业务单位" :description="product.unitList?.length ? '名称、基础单位数量、售价和可用范围由产品库统一维护' : '暂无业务单位'">
+				<t-cell-group theme="card" class="units">
+					<t-cell v-for="unit in product.unitList || []" :key="unit.id || unit.name">
+						<template #title>
+							<div class="unit-title">
+								<strong v-text="unit.name || '未命名单位'" />
+								<t-tag v-if="unit.isBase" size="small" theme="primary" variant="light-outline" content="基础单位" />
+							</div>
+						</template>
+						<template #note>
+							<span v-text="`1 ${unit.name || '单位'} = ${unit.baseQuantityPerUnit} ${product.baseUnit || '基础单位'}`" />
+						</template>
+						<template #description>
+							<div class="unit-description">
+								<span v-text="`建议售价：${formatProductAmount(unit.salePrice)}`" />
+								<span v-text="getUnitUsageText(unit)" />
+							</div>
+						</template>
+					</t-cell>
+				</t-cell-group>
+			</card-container>
+			<card-container v-if="product.remark" title="备注">
+				<div class="remark" v-text="product.remark" />
+			</card-container>
+		</template>
+		<t-empty v-else description="产品不存在或已被删除" />
+	</div>
+	<nav-bar-action-menu v-if="actionList.length" :actions="actionList" />
+</template>
+
+<script setup lang="ts">
+import { DialogPlugin } from "tdesign-mobile-vue";
+import { useUserStore } from "timi-web-api";
+import ProductAPI from "@/api/ProductAPI";
+import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
+import PhotoScroller from "@/components/PhotoScroller.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { NavBarAction } from "@/types/NavBarAction";
+import type { PhotoItem } from "@/types/Photo";
+import type { Product, ProductUnit } from "@/types/Product";
+import { getAttachmentReadURL } from "@/utils/attachment";
+import { getErrorMessage } from "@/utils/error";
+import { formatProductAmount, getProductStatusText, getProductStatusTheme, getProductTypeText } from "@/utils/product";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "ProductDetail" });
+
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const product = ref<Product>();
+const isLoading = ref(false);
+const attachmentItemList = computed<PhotoItem[]>(() => (product.value?.attachmentList || [])
+	.filter(item => !!item.id)
+	.map(item => ({
+		attachment: item,
+		attachType: item.attachType || "PHOTO",
+		previewUrl: getAttachmentReadURL(item.id || ""),
+		url: getAttachmentReadURL(item.id || "", 90)
+	})));
+const attachmentUrlList = computed(() => attachmentItemList.value.map(item => item.url));
+const actionList = computed<NavBarAction[]>(() => {
+	const list: NavBarAction[] = [];
+	if (userStore.hasPermissions(permissionCodes.product.update)) {
+		list.push({ key: "edit", text: "编辑产品", icon: "edit-1", theme: "primary", action: edit });
+		if (product.value?.status === "ACTIVE") {
+			list.push({ key: "disable", text: "停用产品", icon: "close", theme: "danger", action: disable });
+		}
+	}
+	if (product.value?.stockEnabled && userStore.hasPermissions(permissionCodes.productStock.read)) {
+		list.push({ key: "stock", text: "查看库存", icon: "wallet", theme: "default", action: viewStock });
+	}
+	return list;
+});
+
+function getUnitUsageText(unit: ProductUnit): string {
+	const usage: string[] = [];
+	if (unit.allowSale) {
+		usage.push("可销售");
+	}
+	if (unit.allowPurchase) {
+		usage.push("可采购");
+	}
+	return usage.length ? usage.join("、") : "暂无业务用途";
+}
+
+async function load(): Promise<void> {
+	const id = String(route.params.id || "");
+	if (!id) {
+		return;
+	}
+	isLoading.value = true;
+	try {
+		product.value = await ProductAPI.detail(id);
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+async function edit(): Promise<void> {
+	if (product.value?.id) {
+		await router.push(`/management/products/${product.value.id}/edit`);
+	}
+}
+
+async function viewStock(): Promise<void> {
+	if (product.value?.id) {
+		await router.push(`/management/product-stocks/${product.value.id}`);
+	}
+}
+
+function disable(): void {
+	const id = product.value?.id;
+	if (!id) {
+		return;
+	}
+	const dialog = DialogPlugin.confirm({
+		title: "停用产品",
+		content: "停用后不能用于新订单、套餐或库存操作，历史记录仍会保留。确定停用？",
+		confirmBtn: { content: "停用", theme: "danger" },
+		onConfirm: async () => {
+			try {
+				await ProductAPI.disable(id);
+				await load();
+				Message.success("产品已停用");
+			} catch (error) {
+				Message.error(getErrorMessage(error, "产品停用失败"));
+			} finally {
+				dialog.destroy();
+			}
+		}
+	});
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	navBarStore.setCustomRightVisible(actionList.value.length > 0);
+	try {
+		await load();
+		navBarStore.setCustomRightVisible(actionList.value.length > 0);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品详情加载失败"));
+	}
+});
+
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.product-detail {
+	gap: 1rem;
+	display: grid;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
+
+	.hero {
+		margin: 0 1rem;
+		padding: 1rem;
+		background: linear-gradient(135deg, #e8fffa, #eff6ff);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1.25rem;
+
+		.eyebrow {
+			color: #0f766e;
+			display: block;
+			font-size: .6875rem;
+			font-weight: 700;
+			letter-spacing: .08em;
+		}
+
+		.hero-title {
+			gap: .5rem;
+			display: flex;
+			margin-top: .35rem;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		h1 {
+			margin: 0;
+			min-width: 0;
+			font-size: 1.25rem;
+			line-height: 1.35;
+		}
+
+		.hero-meta {
+			gap: .75rem;
+			display: flex;
+			margin-top: .6rem;
+			color: var(--td-text-color-secondary);
+			align-items: center;
+			justify-content: space-between;
+		}
+
+	}
+
+	.loading {
+		margin: 3rem auto;
+	}
+
+	.info,
+	.units {
+		margin: 0;
+	}
+
+	.unit-title {
+		gap: .5rem;
+		display: flex;
+		align-items: center;
+	}
+
+	.unit-description {
+		gap: .125rem;
+		display: grid;
+	}
+
+	.remark {
+		padding: 1rem;
+		white-space: pre-wrap;
+	}
+}
+
+:global(html.theme-dark) .product-detail .hero {
+	background: linear-gradient(135deg, rgba(15, 118, 110, .2), rgba(37, 99, 235, .18));
+
+	.eyebrow {
+		color: #99f6e4;
+	}
+
+}
+</style>

src/pages/product/ProductEdit.vue

@@ -0,0 +1,539 @@
+<template>
+	<div v-can="savePermissionCode" class="product-edit">
+		<t-form class="form" label-align="left" label-width="6rem">
+			<t-form-item label="产品编码" required-mark>
+				<t-input v-model.trim="form.code" borderless maxlength="64" placeholder="门店内唯一编码" />
+			</t-form-item>
+			<t-form-item label="产品名称" required-mark>
+				<t-input v-model.trim="form.name" borderless maxlength="128" placeholder="请输入产品名称" />
+			</t-form-item>
+			<t-form-item label="产品类型" arrow content-align="right" @click="openTypePicker">
+				<span class="picker-text" v-text="getProductTypeText(form.productType)" />
+			</t-form-item>
+			<t-form-item label="产品分类" arrow content-align="right" @click="openCategoryPicker">
+				<span class="picker-text" v-text="selectedCategoryName" />
+			</t-form-item>
+			<t-form-item label="基础单位" required-mark>
+				<t-input v-model.trim="form.baseUnit" borderless maxlength="32" placeholder="例如 次、瓶" />
+			</t-form-item>
+			<t-form-item label="参考成本（元）">
+				<t-input v-model.trim="referenceCostText" type="number" align="right" borderless placeholder="非负金额" />
+			</t-form-item>
+			<t-form-item label="库存管理">
+				<t-checkbox v-model="form.stockEnabled" :disabled="form.productType === 'SERVICE'">管理库存</t-checkbox>
+			</t-form-item>
+			<t-form-item label="允许小数">
+				<t-checkbox v-model="form.allowDecimalQuantity">业务数量允许小数</t-checkbox>
+			</t-form-item>
+			<t-form-item v-if="form.stockEnabled" label="最低库存">
+				<t-input v-model.trim="minStockQuantityText" type="number" align="right" borderless placeholder="基础单位数量，最多三位小数" />
+			</t-form-item>
+			<t-form-item label="状态" arrow content-align="right" @click="openStatusPicker">
+				<span class="picker-text" v-text="getProductStatusText(form.status)" />
+			</t-form-item>
+			<t-form-item label="备注">
+				<t-textarea v-model.trim="form.remark" borderless maxlength="255" autosize placeholder="可填写产品说明" />
+			</t-form-item>
+		</t-form>
+
+		<card-container title="产品附件" description="可上传产品图片或其他产品文件" v-entrance-transition="70">
+			<photo-scroller
+				v-model="attachmentUrlList"
+				v-model:photo-items="attachmentItemList"
+				title="附件列表"
+				:edit-mode="true"
+				:loading="isAttachmentUploading"
+				:show-viewer-actions="false"
+				:add-actions="attachmentAddActions"
+				@add-photo="openAttachmentPicker('PHOTO')"
+				@add-other="openAttachmentPicker('OTHER')"
+			/>
+			<input ref="attachmentInputRef" class="file-input" type="file" accept="image/*" @change="handleAttachmentSelected" />
+		</card-container>
+
+		<card-container title="产品单位" description="必须保留一个基础单位；销售和库存业务只能选择允许的单位" v-entrance-transition="70">
+			<div class="unit-list">
+				<div v-for="(unit, index) in form.unitList" :key="unit.clientKey" class="unit-item">
+					<div class="unit-header">
+						<strong v-text="`单位 ${index + 1}`" />
+						<t-button v-if="1 < form.unitList.length" theme="danger" variant="text" size="small" @click="removeUnit(index)">删除</t-button>
+					</div>
+					<t-form label-width="6rem">
+						<t-form-item label="单位名称" required-mark>
+							<t-input v-model.trim="unit.name" borderless maxlength="32" placeholder="例如 瓶、盒、次" />
+						</t-form-item>
+						<t-form-item label="基础单位数量" required-mark>
+							<t-input v-model.trim="unit.baseQuantityPerUnit" type="number" align="right" borderless placeholder="每个单位对应的基础单位数量" />
+						</t-form-item>
+						<t-form-item label="建议售价（元）">
+							<t-input v-model.trim="unit.salePriceText" type="number" align="right" borderless placeholder="非负金额" />
+						</t-form-item>
+						<t-form-item label="基础单位">
+							<t-checkbox v-model="unit.isBase" @change="setBaseUnit(index)">基础单位</t-checkbox>
+						</t-form-item>
+						<t-form-item label="允许采购">
+							<t-checkbox v-model="unit.allowPurchase">入库可用</t-checkbox>
+						</t-form-item>
+						<t-form-item label="允许销售">
+							<t-checkbox v-model="unit.allowSale">销售和套餐可用</t-checkbox>
+						</t-form-item>
+					</t-form>
+				</div>
+				<t-button class="add-unit" theme="primary" variant="dashed" block @click="addUnit">添加业务单位</t-button>
+			</div>
+		</card-container>
+
+		<t-popup v-model="typePickerVisible" placement="bottom">
+			<t-picker v-model="typeDraft" :columns="productTypeOptions" title="产品类型" @cancel="typePickerVisible = false" @confirm="confirmType" />
+		</t-popup>
+		<t-popup v-model="categoryPickerVisible" placement="bottom">
+			<t-picker v-model="categoryDraft" :columns="categoryOptions" title="产品分类" @cancel="categoryPickerVisible = false" @confirm="confirmCategory" />
+		</t-popup>
+		<t-popup v-model="statusPickerVisible" placement="bottom">
+			<t-picker v-model="statusDraft" :columns="statusOptions" title="产品状态" @cancel="statusPickerVisible = false" @confirm="confirmStatus" />
+		</t-popup>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { type Attachment, AttachmentAPI, useUserStore } from "timi-web-api";
+import ProductAPI from "@/api/ProductAPI";
+import PhotoScroller from "@/components/PhotoScroller.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { PhotoItem } from "@/types/Photo";
+import type { Product, ProductAttachmentType, ProductCategory, ProductUnit } from "@/types/Product";
+import { compressUploadImage } from "@/utils/imageCompression";
+import { getAttachmentReadURL } from "@/utils/attachment";
+import { getErrorMessage } from "@/utils/error";
+import { formatProductAmount, getProductStatusText, getProductTypeText, normalizeProductQuantity, parseProductAmount } from "@/utils/product";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+type PickerValue = string | number;
+type ProductUnitForm = ProductUnit & { clientKey: string; salePriceText: string };
+type ProductAttachmentItem = PhotoItem & {
+	attachment?: Attachment;
+	attachType: ProductAttachmentType;
+};
+
+defineOptions({ name: "ProductEdit" });
+
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const routeId = computed(() => String(route.params.id || ""));
+const isCreateMode = computed(() => !routeId.value);
+const savePermissionCode = computed(() => isCreateMode.value ? permissionCodes.product.create : permissionCodes.product.update);
+const isSaving = ref(false);
+const form = reactive<Product & { unitList: ProductUnitForm[] }>({
+	id: undefined,
+	code: "",
+	name: "",
+	productType: "GOODS",
+	baseUnit: "",
+	stockEnabled: true,
+	allowDecimalQuantity: false,
+	status: "ACTIVE",
+	unitList: []
+});
+const referenceCostText = ref("");
+const minStockQuantityText = ref("");
+const categoryList = ref<ProductCategory[]>([]);
+const typePickerVisible = ref(false);
+const categoryPickerVisible = ref(false);
+const statusPickerVisible = ref(false);
+const attachmentInputRef = ref<HTMLInputElement>();
+const attachmentPickerTarget = ref<ProductAttachmentType>("PHOTO");
+const isAttachmentUploading = ref(false);
+const typeDraft = ref<PickerValue[]>([]);
+const categoryDraft = ref<PickerValue[]>([]);
+const statusDraft = ref<PickerValue[]>([]);
+const productTypeOptions = [
+	{ label: "服务", value: "SERVICE" },
+	{ label: "实物", value: "GOODS" },
+	{ label: "消耗品", value: "CONSUMABLE" }
+];
+const categoryOptions = computed(() => [{ label: "不设置分类", value: "" }, ...categoryList.value.map(item => ({ label: item.name || "未命名分类", value: item.id || "" }))]);
+const statusOptions = [
+	{ label: "启用", value: "ACTIVE" },
+	{ label: "停用", value: "INACTIVE" }
+];
+const selectedCategoryName = computed(() => categoryList.value.find(item => item.id === form.categoryId)?.name || "不设置分类");
+const attachmentAddActions = [
+	{
+		icon: "camera",
+		text: "产品图片",
+		emit: "add-photo",
+		theme: "primary"
+	},
+	{
+		icon: "file-attachment",
+		text: "其他文件",
+		emit: "add-other",
+		theme: "default"
+	}
+] as const;
+const attachmentItemList = ref<ProductAttachmentItem[]>([]);
+const attachmentUrlList = computed<string[]>({
+	get() {
+		return attachmentItemList.value.map(item => item.url);
+	},
+	set(value) {
+		const urlSet = new Set(value);
+		attachmentItemList.value = attachmentItemList.value.filter(item => urlSet.has(item.url));
+	}
+});
+
+function createUnit(unit?: Partial<ProductUnit>): ProductUnitForm {
+	return {
+		...unit,
+		clientKey: window.crypto.randomUUID(),
+		name: unit?.name || "",
+		baseQuantityPerUnit: unit?.baseQuantityPerUnit ?? "1",
+		salePriceText: unit?.salePrice === null || unit?.salePrice === undefined ? "" : formatProductAmount(unit.salePrice),
+		isBase: unit?.isBase ?? false,
+		allowPurchase: unit?.allowPurchase ?? form.productType !== "SERVICE",
+		allowSale: unit?.allowSale ?? true,
+		sort: unit?.sort ?? 0
+	};
+}
+
+function addUnit(): void {
+	form.unitList.push(createUnit({
+		isBase: !form.unitList.length,
+		baseQuantityPerUnit: !form.unitList.length ? "1" : ""
+	}));
+}
+
+function removeUnit(index: number): void {
+	if (form.unitList.length < 2) {
+		Message.warning("产品至少需要一个单位");
+		return;
+	}
+	const wasBase = form.unitList[index]?.isBase;
+	form.unitList.splice(index, 1);
+	if (wasBase && form.unitList[0]) {
+		form.unitList[0].isBase = true;
+		form.unitList[0].baseQuantityPerUnit = "1";
+	}
+}
+
+function setBaseUnit(index: number): void {
+	form.unitList.forEach((unit, unitIndex) => {
+		unit.isBase = unitIndex === index;
+	});
+	const unit = form.unitList[index];
+	if (unit) {
+		unit.baseQuantityPerUnit = "1";
+	}
+}
+
+function openTypePicker(): void {
+	typeDraft.value = [form.productType];
+	typePickerVisible.value = true;
+}
+
+function confirmType(value: Array<string | number>): void {
+	const type = String(value[0] || "");
+	if (type === "SERVICE" || type === "GOODS" || type === "CONSUMABLE") {
+		form.productType = type;
+		if (type === "SERVICE") {
+			form.stockEnabled = false;
+			form.unitList.forEach(unit => {
+				unit.allowPurchase = false;
+			});
+		} else if (form.stockEnabled) {
+			form.unitList.forEach(unit => {
+				unit.allowPurchase = true;
+			});
+		}
+	}
+	typePickerVisible.value = false;
+}
+
+function openCategoryPicker(): void {
+	categoryDraft.value = [form.categoryId || ""];
+	categoryPickerVisible.value = true;
+}
+
+function confirmCategory(value: Array<string | number>): void {
+	form.categoryId = String(value[0] || "") || undefined;
+	categoryPickerVisible.value = false;
+}
+
+function openStatusPicker(): void {
+	statusDraft.value = [form.status || "ACTIVE"];
+	statusPickerVisible.value = true;
+}
+
+function confirmStatus(value: Array<string | number>): void {
+	const status = String(value[0] || "");
+	if (status === "ACTIVE" || status === "INACTIVE") {
+		form.status = status;
+	}
+	statusPickerVisible.value = false;
+}
+
+function openAttachmentPicker(target: ProductAttachmentType): void {
+	attachmentPickerTarget.value = target;
+	attachmentInputRef.value?.click();
+}
+
+async function handleAttachmentSelected(event: Event): Promise<void> {
+	const input = event.target as HTMLInputElement;
+	const file = input.files?.[0];
+	if (!file) {
+		return;
+	}
+
+	isAttachmentUploading.value = true;
+	try {
+		const tempFile = (await AttachmentAPI.upload(await compressUploadImage(file)))[0];
+		if (tempFile?.id) {
+			attachmentItemList.value.push({
+				attachType: attachmentPickerTarget.value,
+				tempFileId: tempFile.id,
+				url: AttachmentAPI.getTempReadURL(tempFile.id)
+			});
+		}
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品附件上传失败"));
+	} finally {
+		isAttachmentUploading.value = false;
+		input.value = "";
+	}
+}
+
+function buildAttachmentList(): Attachment[] {
+	return attachmentItemList.value.flatMap(item => {
+		if (item.attachment) {
+			return [{
+				...item.attachment,
+				attachType: item.attachType || item.attachment.attachType || "PHOTO"
+			}];
+		}
+		if (item.tempFileId) {
+			return [{
+				attachType: item.attachType,
+				tempFileId: item.tempFileId
+			}];
+		}
+		return [];
+	});
+}
+
+function parseOptionalAmount(value: string): number | null | undefined {
+	if (!value.trim()) {
+		return null;
+	}
+	return parseProductAmount(value);
+}
+
+function validate(): boolean {
+	if (!form.code.trim() || !form.name.trim() || !form.baseUnit.trim()) {
+		Message.warning("产品编码、名称和基础单位不能为空");
+		return false;
+	}
+	if (form.productType === "SERVICE" && form.stockEnabled) {
+		Message.warning("服务产品不能管理库存");
+		return false;
+	}
+	const referenceCost = parseOptionalAmount(referenceCostText.value);
+	if (referenceCost === undefined) {
+		Message.warning("价格必须是合法的非负元金额，最多两位小数");
+		return false;
+	}
+	if (form.stockEnabled && !normalizeProductQuantity(minStockQuantityText.value || "0")) {
+		Message.warning("最低库存必须是非负数量，最多三位小数");
+		return false;
+	}
+	if (!form.unitList.length) {
+		Message.warning("至少配置一个产品单位");
+		return false;
+	}
+	const unitNameSet = new Set<string>();
+	let baseCount = 0;
+	for (const unit of form.unitList) {
+		const name = unit.name.trim();
+		const baseQuantityPerUnit = String(unit.baseQuantityPerUnit).trim();
+		const salePrice = parseOptionalAmount(unit.salePriceText);
+		if (!name || unitNameSet.has(name)) {
+			Message.warning("单位名称不能为空且不能重复");
+			return false;
+		}
+		if (!/^\d+(?:\.\d{1,6})?$/.test(baseQuantityPerUnit) || !(0 < Number(baseQuantityPerUnit))) {
+			Message.warning("基础单位数量必须是大于 0 的数字，最多六位小数");
+			return false;
+		}
+		if (salePrice === undefined) {
+			Message.warning("单位售价必须是合法的非负元金额，最多两位小数");
+			return false;
+		}
+		unitNameSet.add(name);
+		if (unit.isBase) {
+			baseCount += 1;
+			if (baseQuantityPerUnit !== "1" && Number(baseQuantityPerUnit) !== 1) {
+				Message.warning("基础单位数量必须为 1");
+				return false;
+			}
+			if (name !== form.baseUnit.trim()) {
+				Message.warning("基础单位名称必须与产品基础单位一致");
+				return false;
+			}
+		}
+	}
+	if (baseCount !== 1) {
+		Message.warning("产品必须且只能有一个基础单位");
+		return false;
+	}
+	return true;
+}
+
+async function save(): Promise<void> {
+	if (isSaving.value || !userStore.hasPermissions(savePermissionCode.value) || !validate()) {
+		return;
+	}
+	isSaving.value = true;
+	try {
+		const minStockQuantity = form.stockEnabled ? normalizeProductQuantity(minStockQuantityText.value || "0") : undefined;
+		const unitList = form.unitList as ProductUnitForm[];
+		const payload: Product = {
+			id: form.id,
+			categoryId: form.categoryId,
+			code: form.code.trim(),
+			name: form.name.trim(),
+			productType: form.productType,
+			baseUnit: form.baseUnit.trim(),
+			stockEnabled: form.stockEnabled,
+			allowDecimalQuantity: form.allowDecimalQuantity,
+			status: form.status,
+			referenceCost: parseOptionalAmount(referenceCostText.value)!,
+			minStockQuantity: form.stockEnabled ? minStockQuantity : null,
+			remark: form.remark?.trim() || null,
+			attachmentList: buildAttachmentList(),
+			unitList: unitList.map((unit, index) => ({
+				id: unit.id,
+				name: unit.name.trim(),
+				baseQuantityPerUnit: String(unit.baseQuantityPerUnit).trim(),
+				salePrice: parseOptionalAmount(unit.salePriceText)!,
+				isBase: !!unit.isBase,
+				allowPurchase: form.productType === "SERVICE" ? false : !!unit.allowPurchase,
+				allowSale: !!unit.allowSale,
+				sort: index
+			}))
+		};
+		if (isCreateMode.value) {
+			const id = await ProductAPI.create(payload);
+			Message.success("产品已创建");
+			await router.replace(`/management/products/${id}`);
+		} else {
+			await ProductAPI.update(payload);
+			Message.success("产品已保存");
+			await router.replace(`/management/products/${routeId.value}`);
+		}
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品保存失败"));
+	} finally {
+		isSaving.value = false;
+	}
+}
+
+async function load(): Promise<void> {
+	const categoryResult = await ProductAPI.categoryList({ index: 0, size: 1000, status: "ACTIVE" });
+	categoryList.value = categoryResult.list || [];
+	if (isCreateMode.value) {
+		addUnit();
+		return;
+	}
+	const result = await ProductAPI.detail(routeId.value);
+	if (result.category && !categoryList.value.some(item => item.id === result.category?.id)) {
+		categoryList.value.push(result.category);
+	}
+	Object.assign(form, {
+		id: result.id,
+		categoryId: result.categoryId,
+		code: result.code || "",
+		name: result.name || "",
+		productType: result.productType || "GOODS",
+		baseUnit: result.baseUnit || "",
+		stockEnabled: !!result.stockEnabled,
+		allowDecimalQuantity: !!result.allowDecimalQuantity,
+		status: result.status || "ACTIVE",
+		remark: result.remark || "",
+		unitList: (result.unitList || []).map(createUnit)
+	});
+	attachmentItemList.value = (result.attachmentList || [])
+		.filter(item => !!item.id)
+		.map(item => ({
+			attachment: item,
+			attachType: item.attachType === "OTHER" ? "OTHER" : "PHOTO",
+			previewUrl: getAttachmentReadURL(item.id || ""),
+			url: getAttachmentReadURL(item.id || "", 90)
+		}));
+	referenceCostText.value = result.referenceCost === null || result.referenceCost === undefined ? "" : `${Math.floor(result.referenceCost / 100)}.${String(result.referenceCost % 100).padStart(2, "0")}`;
+	minStockQuantityText.value = result.minStockQuantity === null || result.minStockQuantity === undefined ? "" : String(result.minStockQuantity);
+	if (!form.unitList.length) {
+		addUnit();
+	}
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	if (userStore.hasPermissions(savePermissionCode.value)) {
+		navBarStore.setRightText("保存", "var(--td-brand-color)", save);
+	}
+	try {
+		await load();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品加载失败"));
+	}
+});
+
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.product-edit {
+	gap: 1rem;
+	display: flex;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
+	flex-direction: column;
+
+	.form {
+		margin: 0 1rem;
+		background: var(--td-bg-color-container);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1rem;
+		overflow: hidden;
+	}
+
+	.unit-list {
+		padding: 1rem;
+
+		.unit-item {
+			padding: .75rem 0;
+			border-bottom: 1px dashed var(--td-component-border);
+
+			.unit-header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+
+			:deep(.t-form__item) {
+				padding: .25rem 0;
+			}
+		}
+
+		.add-unit {
+			margin-top: 1rem;
+			border-radius: .75rem;
+		}
+	}
+
+	.file-input {
+		display: none;
+	}
+}
+</style>

src/pages/product/ProductList.vue

@@ -0,0 +1,359 @@
+<template>
+	<div v-can="permissionCodes.product.read" class="product-list">
+		<div class="filters bg-white">
+			<t-input v-model.trim="keyword" class="keyword" type="search" borderless clearable placeholder="搜索产品名称或编码" />
+			<t-dropdown-menu class="menus">
+				<t-dropdown-item v-model="status" label="状态" :options="statusOptions" @change="selectStatus" />
+				<t-dropdown-item v-model="productType" label="类型" :options="productTypeOptions" @change="selectProductType" />
+				<t-dropdown-item
+					:model-value="categoryIdList"
+					label="分类"
+					:options="categoryOptions"
+					multiple
+					:options-columns="2"
+					@change="selectCategory"
+					@confirm="confirmCategory"
+					@reset="resetCategory"
+					@update:model-value="updateCategory"
+				/>
+			</t-dropdown-menu>
+		</div>
+		<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
+			<t-cell-group
+				v-if="productList.length"
+				class="list fix-last-cell-line empty-cell-title-margin"
+				theme="card"
+			>
+				<t-cell v-for="(item, index) in productList" :key="item.id" class="item" arrow hover v-entrance-transition="index * 30" @click="toDetail(item)">
+					<template #leftIcon>
+						<t-image
+							v-if="getProductPhotoURL(item)"
+							:src="getProductPhotoURL(item)"
+							:alt="item.name || '产品图片'"
+							fit="cover"
+							class="avatar"
+						/>
+						<div v-else class="avatar placeholder" v-text="(item.name || item.code || '产').slice(0, 1)" />
+					</template>
+					<template #title>
+						<div class="text-bold" v-text="item.name || '未命名产品'" />
+					</template>
+					<template #note>
+						<t-tag
+							size="small"
+							variant="outline"
+							:theme="getProductStatusTheme(item.status)"
+							:content="getProductStatusText(item.status)"
+						/>
+					</template>
+					<template #description>
+						<div class="description">
+							<t-tag
+								size="small"
+								variant="outline"
+								:content="item.code"
+							/>
+							<t-tag
+								size="small"
+								variant="outline"
+								:content="getProductTypeText(item.productType)"
+							/>
+						</div>
+					</template>
+				</t-cell>
+			</t-cell-group>
+			<div v-else class="center-tips" v-text="emptyText" />
+			<div v-if="productList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
+		</t-pull-down-refresh>
+	</div>
+	<nav-bar-action-menu v-if="canCreate" :actions="actionList" />
+</template>
+
+<script setup lang="ts">
+import { type DropdownValue } from "tdesign-mobile-vue";
+import { useUserStore } from "timi-web-api";
+import ProductAPI from "@/api/ProductAPI";
+import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { NavBarAction } from "@/types/NavBarAction";
+import type { Product, ProductCategory, ProductStatus, ProductType } from "@/types/Product";
+import { getAttachmentReadURL } from "@/utils/attachment";
+import { getErrorMessage } from "@/utils/error";
+import { getProductStatusText, getProductStatusTheme, getProductTypeText } from "@/utils/product";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "ProductList" });
+
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const canCreate = computed(() => userStore.hasPermissions(permissionCodes.product.create));
+const actionList = computed<NavBarAction[]>(() => canCreate.value ? [{
+	key: "create",
+	text: "新增产品",
+	icon: "add",
+	theme: "primary",
+	action: toCreate
+}] : []);
+
+const keyword = ref("");
+const status = ref("ALL");
+const productType = ref("ALL");
+const categoryIdList = ref<string[]>(["ALL"]);
+const categoryList = ref<ProductCategory[]>([]);
+const productList = ref<Product[]>([]);
+const pageIndex = ref(0);
+const total = ref(0);
+const isLoading = ref(false);
+const isRefreshing = ref(false);
+const isNoMore = ref(false);
+let keywordTimer: number | undefined;
+let requestToken = 0;
+
+const statusOptions = [
+	{ label: "全部状态", value: "ALL" },
+	{ label: "启用", value: "ACTIVE" },
+	{ label: "停用", value: "INACTIVE" }
+];
+const productTypeOptions = [
+	{ label: "全部类型", value: "ALL" },
+	{ label: "服务", value: "SERVICE" },
+	{ label: "实物", value: "GOODS" },
+	{ label: "消耗品", value: "CONSUMABLE" }
+];
+const categoryOptions = computed(() => [{ label: "全部分类", value: "ALL" }, ...categoryList.value.map(item => ({
+	label: item.name || "未命名分类",
+	value: item.id || ""
+}))]);
+const emptyText = computed(() => isLoading.value ? "正在加载产品" : keyword.value ? "未找到匹配产品" : "暂无产品");
+
+function getProductPhotoURL(item: Product): string {
+	const attachment = item.attachmentList?.find(item => item.attachType === "PHOTO" && !!item.id);
+	return attachment?.id ? getAttachmentReadURL(attachment.id, 128) : "";
+}
+
+async function loadCategories(): Promise<void> {
+	const result = await ProductAPI.categoryList({ index: 0, size: 1000, status: "ACTIVE" });
+	categoryList.value = result.list || [];
+}
+
+async function fetch(reset = false): Promise<void> {
+	if (!reset && (isLoading.value || isNoMore.value)) {
+		return;
+	}
+	if (reset) {
+		pageIndex.value = 0;
+		productList.value = [];
+		total.value = 0;
+		isNoMore.value = false;
+	}
+	const token = ++requestToken;
+	isLoading.value = true;
+	try {
+		const pageSize = 15;
+		const result = await ProductAPI.list({
+			index: pageIndex.value,
+			size: pageSize,
+			keyword: keyword.value || undefined,
+			status: status.value === "ALL" ? undefined : status.value as ProductStatus,
+			productType: productType.value === "ALL" ? undefined : productType.value as ProductType,
+			categoryIdList: categoryIdList.value.includes("ALL") ? undefined : categoryIdList.value
+		});
+		if (token !== requestToken) {
+			return;
+		}
+		const list = result.list || [];
+		productList.value = reset ? list : productList.value.concat(list);
+		total.value = result.total || 0;
+		pageIndex.value += 1;
+		isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
+	} finally {
+		if (token === requestToken) {
+			isLoading.value = false;
+		}
+	}
+}
+
+async function refresh(): Promise<void> {
+	try {
+		await fetch(true);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品列表加载失败"));
+	} finally {
+		isRefreshing.value = false;
+	}
+}
+
+async function loadMore(): Promise<void> {
+	try {
+		await fetch();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品列表加载失败"));
+	}
+}
+
+async function selectStatus(value: DropdownValue): Promise<void> {
+	if (!Array.isArray(value)) {
+		status.value = String(value);
+		await fetch(true);
+	}
+}
+
+async function selectProductType(value: DropdownValue): Promise<void> {
+	if (!Array.isArray(value)) {
+		productType.value = String(value);
+		await fetch(true);
+	}
+}
+
+function getDropdownStringList(value: DropdownValue): string[] {
+	const valueList = Array.isArray(value) ? value : [value];
+	return valueList
+		.filter((item): item is string | number => !Array.isArray(item))
+		.map(item => String(item));
+}
+
+function normalizeCategoryIdList(value: DropdownValue): string[] {
+	const idList = getDropdownStringList(value).filter(Boolean);
+	if (!idList.length) {
+		return ["ALL"];
+	}
+	return idList.includes("ALL") && idList.length > 1 ? idList.filter(item => item !== "ALL") : idList;
+}
+
+function selectCategory(value: DropdownValue): void {
+	categoryIdList.value = normalizeCategoryIdList(value);
+}
+
+async function confirmCategory(value: DropdownValue): Promise<void> {
+	categoryIdList.value = normalizeCategoryIdList(value);
+	await fetch(true);
+}
+
+async function resetCategory(): Promise<void> {
+	categoryIdList.value = ["ALL"];
+	await fetch(true);
+}
+
+function updateCategory(value: DropdownValue): void {
+	categoryIdList.value = normalizeCategoryIdList(value);
+}
+
+async function toCreate(): Promise<void> {
+	await router.push("/management/products/create");
+}
+
+async function toDetail(item: Product): Promise<void> {
+	if (item.id) {
+		await router.push(`/management/products/${item.id}`);
+	}
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	navBarStore.setCustomRightVisible(canCreate.value);
+	try {
+		await Promise.all([loadCategories(), fetch(true)]);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品列表加载失败"));
+	}
+});
+
+watch(keyword, () => {
+	window.clearTimeout(keywordTimer);
+	keywordTimer = window.setTimeout(async () => {
+		try {
+			await fetch(true);
+		} catch (error) {
+			Message.error(getErrorMessage(error, "产品列表加载失败"));
+		}
+	}, 300);
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+	window.clearTimeout(keywordTimer);
+	requestToken += 1;
+});
+</script>
+
+<style scoped lang="less">
+.product-list {
+	padding: var(--app-nav-height) 0 1rem;
+
+	.filters {
+		z-index: 10;
+		position: sticky;
+		box-shadow: var(--td-shadow-1);
+		background: var(--td-bg-color-page);
+	}
+
+	.filters {
+		top: var(--app-nav-height);
+		left: 0;
+		right: 0;
+		z-index: 10;
+		display: flex;
+		padding: .75rem 1rem;
+		position: sticky;
+		background: #F5F5F8;
+		box-shadow: var(--td-shadow-1);
+		flex-direction: column;
+
+		.keyword {
+			--td-input-vertical-padding: 8px 14px;
+
+			border: 1px solid var(--td-component-border);
+			z-index: 1;
+			background: var(--td-bg-color-container);
+			border-radius: 1rem;
+		}
+
+		.menus {
+			--td-spacer-1: 6px;
+
+			width: 100%;
+			overflow: hidden;
+			margin-top: -1rem;
+			padding-top: .8rem;
+			background: #fff;
+			border: 1px solid rgba(148, 163, 184, .18);
+			border-radius: 0 0 1rem 1rem;
+
+			&:after {
+				display: none;
+			}
+
+			:deep(.t-dropdown-menu__item) {
+				min-width: 0;
+			}
+
+			:deep(.t-dropdown-menu__title) {
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+
+	.list {
+		padding-top: .75rem;
+
+		.item {
+			padding: 10px;
+
+			.avatar {
+				width: 3.5rem;
+				height: 3.5rem;
+			}
+
+			.description {
+				gap: .5rem;
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+}
+</style>

src/pages/product/ProductStockDetail.vue

@@ -0,0 +1,268 @@
+<template>
+	<div v-can="permissionCodes.productStock.read" class="product-stock-detail">
+		<t-loading v-if="isLoading" class="loading" size="32px" />
+		<template v-else-if="product && stock">
+			<section class="hero" v-entrance-transition>
+				<span class="eyebrow" v-text="'库存中心'" />
+				<div class="hero-title">
+					<h1 v-text="product.name || '未命名产品'" />
+					<t-tag :content="getStockStatusText(stock)" variant="light-outline" :theme="getStockTheme(stock)" />
+				</div>
+				<div class="hero-meta">
+					<span v-text="product.code || '无产品编码'" />
+					<strong v-text="`${getProductQuantityText(stock.availableQuantity)} ${product.baseUnit || ''}`" />
+				</div>
+			</section>
+			<card-container title="库存余额">
+				<t-cell-group theme="card" class="summary">
+					<t-cell title="产品" :note="product.name || '未命名产品'" />
+					<t-cell title="基础单位" :note="product.baseUnit || '-'" />
+					<t-cell title="实际库存" :note="getProductQuantityText(stock.onHandQuantity)" />
+					<t-cell title="预占库存" :note="getProductQuantityText(stock.reservedQuantity)" />
+					<t-cell title="可用库存" :note="getProductQuantityText(stock.availableQuantity)" />
+				</t-cell-group>
+			</card-container>
+			<card-container v-if="canOperate && product.stockEnabled" title="人工库存操作" description="所有操作必须选择业务单位、上传照片并填写原因或备注">
+				<div class="operation-list">
+					<t-button v-for="item in operationList" :key="item.type" :theme="item.theme" variant="outline" @click="openOperation(item.type)">
+						<span v-text="item.text" />
+					</t-button>
+				</div>
+			</card-container>
+			<card-container title="库存流水" description="履约产生的预占、释放、出库和冲正流水仅展示，不提供人工修改">
+				<t-cell-group v-if="recordList.length" theme="card" class="records">
+					<t-cell v-for="record in recordList" :key="record.id || `${record.occurredAt}-${record.requestNo}`">
+						<template #title>
+							<div class="record-title">
+								<strong v-text="getStockOperationText(record.operationType)" />
+								<span :class="getDeltaClass(record.onHandDelta)" v-text="getDeltaText(record.onHandDelta)" />
+							</div>
+						</template>
+						<template #note>
+							<span v-text="record.occurredAt ? Time.toDateTime(record.occurredAt) : '时间未知'" />
+						</template>
+						<template #description>
+							<div class="record-description">
+								<span v-text="`${record.quantity || 0} ${record.unitSnapshot || product.baseUnit || ''} · 基础单位 ${record.baseQuantity || 0}`" />
+								<span class="gray" v-text="record.reason || record.remark || '无备注'" />
+							</div>
+						</template>
+					</t-cell>
+				</t-cell-group>
+				<div v-else class="center-tips" v-text="'暂无库存流水'" />
+			</card-container>
+		</template>
+		<t-empty v-else description="库存或产品不存在" />
+		<product-stock-operation-dialog
+			v-if="product && stock"
+			v-model:visible="operationVisible"
+			:product="product"
+			:stock="stock"
+			:operation="operationType"
+			@success="loadAll"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Time } from "timi-web";
+import { useUserStore } from "timi-web-api";
+import ProductAPI from "@/api/ProductAPI";
+import ProductStockOperationDialog from "@/pages/product/ProductStockOperationDialog.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { Product, ProductStock, StockOperationType, StockRecord } from "@/types/Product";
+import { getErrorMessage } from "@/utils/error";
+import { getProductQuantityText, getStockOperationText } from "@/utils/product";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+type ManualStockOperation = Extract<StockOperationType, "INITIAL_IN" | "MANUAL_IN" | "MANUAL_OUT" | "STOCKTAKE_GAIN" | "STOCKTAKE_LOSS">;
+
+defineOptions({ name: "ProductStockDetail" });
+
+const route = useRoute();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const product = ref<Product>();
+const stock = ref<ProductStock>();
+const recordList = ref<StockRecord[]>([]);
+const isLoading = ref(false);
+const operationVisible = ref(false);
+const operationType = ref<ManualStockOperation>("MANUAL_IN");
+const canOperate = computed(() => userStore.hasPermissions(permissionCodes.productStock.create));
+const operationList: Array<{ text: string; type: ManualStockOperation; theme: "primary" | "danger" }> = [
+	{ text: "期初入库", type: "INITIAL_IN", theme: "primary" },
+	{ text: "手工入库", type: "MANUAL_IN", theme: "primary" },
+	{ text: "手工出库", type: "MANUAL_OUT", theme: "danger" },
+	{ text: "盘盈", type: "STOCKTAKE_GAIN", theme: "primary" },
+	{ text: "盘亏", type: "STOCKTAKE_LOSS", theme: "danger" }
+];
+
+function getDeltaText(value?: number | string): string {
+	const amount = Number(value || 0);
+	const text = String(value || "0");
+	return `${0 < amount ? "+" : ""}${amount < 0 ? getProductQuantityText(text.slice(1)) : getProductQuantityText(text)}`;
+}
+
+function getDeltaClass(value?: number | string): string {
+	return 0 < Number(value || 0) ? "positive" : Number(value || 0) < 0 ? "negative" : "gray";
+}
+
+function getStockStatusText(item: ProductStock): string {
+	if (!item.product?.stockEnabled) {
+		return "不管理库存";
+	}
+	const available = Number(item.availableQuantity || 0);
+	const min = Number(item.product.minStockQuantity || 0);
+	return 0 < min && available < min ? "库存不足" : "库存正常";
+}
+
+function getStockTheme(item: ProductStock): "danger" | "success" | "default" {
+	if (!item.product?.stockEnabled) {
+		return "default";
+	}
+	const available = Number(item.availableQuantity || 0);
+	const min = Number(item.product.minStockQuantity || 0);
+	return 0 < min && available < min ? "danger" : "success";
+}
+
+async function loadAll(): Promise<void> {
+	const productId = String(route.params.productId || "");
+	if (!productId) {
+		return;
+	}
+	isLoading.value = true;
+	try {
+		const [productResult, stockResult, recordResult] = await Promise.all([
+			ProductAPI.detail(productId),
+			ProductAPI.stockDetail(productId),
+			ProductAPI.recordList({ productId, index: 0, size: 100 })
+		]);
+		product.value = productResult;
+		stock.value = { ...stockResult, product: productResult };
+		recordList.value = recordResult.list || [];
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+function openOperation(type: ManualStockOperation): void {
+	operationType.value = type;
+	operationVisible.value = true;
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	try {
+		await loadAll();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "库存详情加载失败"));
+	}
+});
+
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.product-stock-detail {
+	gap: 1rem;
+	display: grid;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
+
+	.hero {
+		margin: 0 1rem;
+		padding: 1rem;
+		background: linear-gradient(135deg, #eff6ff, #f0fdf4);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1.25rem;
+
+		.eyebrow {
+			color: #2563eb;
+			display: block;
+			font-size: .6875rem;
+			font-weight: 700;
+			letter-spacing: .08em;
+		}
+
+		.hero-title {
+			gap: .5rem;
+			display: flex;
+			margin-top: .35rem;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		h1 {
+			margin: 0;
+			font-size: 1.25rem;
+			line-height: 1.35;
+		}
+
+		.hero-meta {
+			gap: .75rem;
+			display: flex;
+			margin-top: .6rem;
+			color: var(--td-text-color-secondary);
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		strong {
+			color: #0f766e;
+			font-size: 1.2rem;
+			white-space: nowrap;
+		}
+	}
+
+	.loading {
+		margin: 3rem auto;
+	}
+
+	.summary,
+	.records {
+		margin: 0;
+	}
+
+	.operation-list {
+		gap: .75rem;
+		display: grid;
+		padding: 1rem;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+
+		.t-button {
+			border-radius: .75rem;
+		}
+	}
+
+	.record-title {
+		gap: .5rem;
+		display: flex;
+		align-items: center;
+	}
+
+	.record-description {
+		gap: .125rem;
+		display: grid;
+	}
+
+	.positive {
+		color: var(--td-success-color);
+	}
+
+	.negative {
+		color: var(--td-error-color);
+	}
+}
+
+:global(html.theme-dark) .product-stock-detail .hero {
+	background: linear-gradient(135deg, rgba(37, 99, 235, .2), rgba(15, 118, 110, .18));
+
+	.eyebrow {
+		color: #93c5fd;
+	}
+
+	strong {
+		color: #99f6e4;
+	}
+}
+</style>

src/pages/product/ProductStockList.vue

@@ -0,0 +1,198 @@
+<template>
+	<div v-can="permissionCodes.productStock.read" class="product-stock-list">
+		<div class="search bg-white">
+			<t-input v-model.trim="keyword" class="keyword" type="search" borderless clearable placeholder="搜索产品名称或编码" />
+		</div>
+		<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
+			<t-cell-group v-if="stockList.length" theme="card" class="list fix-last-cell-line">
+				<t-cell v-for="(item, index) in stockList" :key="item.productId || item.id" arrow hover class="item" v-entrance-transition="index * 30" @click="toDetail(item)">
+					<template #title>
+						<div class="title">
+							<strong v-text="item.product?.name || '未命名产品'" />
+							<t-tag size="small" variant="outline" :theme="getStockTheme(item)" :content="getStockStatusText(item)" />
+						</div>
+					</template>
+					<template #note>
+						<span v-text="`${getProductQuantityText(item.availableQuantity)} ${item.product?.baseUnit || ''}`" />
+					</template>
+					<template #description>
+						<div class="description">
+							<span class="gray" v-text="item.product?.code || '无产品编码'" />
+							<span v-text="`实际 ${getProductQuantityText(item.onHandQuantity)} · 预占 ${getProductQuantityText(item.reservedQuantity)} · 可用 ${getProductQuantityText(item.availableQuantity)}`" />
+						</div>
+					</template>
+				</t-cell>
+			</t-cell-group>
+			<div v-else class="center-tips" v-text="emptyText" />
+			<div v-if="stockList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
+		</t-pull-down-refresh>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore } from "timi-web-api";
+import ProductAPI from "@/api/ProductAPI";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { ProductStock } from "@/types/Product";
+import { getErrorMessage } from "@/utils/error";
+import { getProductQuantityText } from "@/utils/product";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "ProductStockList" });
+
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const keyword = ref("");
+const stockList = ref<ProductStock[]>([]);
+const pageIndex = ref(0);
+const total = ref(0);
+const isLoading = ref(false);
+const isRefreshing = ref(false);
+const isNoMore = ref(false);
+let keywordTimer: number | undefined;
+let requestToken = 0;
+
+const emptyText = computed(() => isLoading.value ? "正在加载库存" : keyword.value ? "未找到匹配库存" : "暂无库存记录");
+
+function getStockStatusText(item: ProductStock): string {
+	if (!item.product?.stockEnabled) {
+		return "不管理库存";
+	}
+	const available = Number(item.availableQuantity || 0);
+	const min = Number(item.product.minStockQuantity || 0);
+	return 0 < min && available < min ? "库存不足" : "库存正常";
+}
+
+function getStockTheme(item: ProductStock): "danger" | "success" | "default" {
+	if (!item.product?.stockEnabled) {
+		return "default";
+	}
+	const available = Number(item.availableQuantity || 0);
+	const min = Number(item.product.minStockQuantity || 0);
+	return 0 < min && available < min ? "danger" : "success";
+}
+
+async function fetch(reset = false): Promise<void> {
+	if (!reset && (isLoading.value || isNoMore.value)) {
+		return;
+	}
+	if (reset) {
+		pageIndex.value = 0;
+		stockList.value = [];
+		total.value = 0;
+		isNoMore.value = false;
+	}
+	const token = ++requestToken;
+	isLoading.value = true;
+	try {
+		const pageSize = 15;
+		const result = await ProductAPI.stockList({ index: pageIndex.value, size: pageSize, keyword: keyword.value || undefined });
+		if (token !== requestToken) {
+			return;
+		}
+		const list = result.list || [];
+		stockList.value = reset ? list : stockList.value.concat(list);
+		total.value = result.total || 0;
+		pageIndex.value += 1;
+		isNoMore.value = list.length < pageSize || stockList.value.length === total.value || total.value < stockList.value.length;
+	} finally {
+		if (token === requestToken) {
+			isLoading.value = false;
+		}
+	}
+}
+
+async function refresh(): Promise<void> {
+	try {
+		await fetch(true);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "库存列表加载失败"));
+	} finally {
+		isRefreshing.value = false;
+	}
+}
+
+async function loadMore(): Promise<void> {
+	try {
+		await fetch();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "库存列表加载失败"));
+	}
+}
+
+async function toDetail(item: ProductStock): Promise<void> {
+	if (item.productId) {
+		await router.push(`/management/product-stocks/${item.productId}`);
+	}
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	if (!userStore.hasPermissions(permissionCodes.productStock.read)) {
+		return;
+	}
+	try {
+		await fetch(true);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "库存列表加载失败"));
+	}
+});
+
+watch(keyword, () => {
+	window.clearTimeout(keywordTimer);
+	keywordTimer = window.setTimeout(async () => {
+		try {
+			await fetch(true);
+		} catch (error) {
+			Message.error(getErrorMessage(error, "库存列表加载失败"));
+		}
+	}, 300);
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+	window.clearTimeout(keywordTimer);
+	requestToken += 1;
+});
+</script>
+
+<style scoped lang="less">
+.product-stock-list {
+	padding: var(--app-nav-height) 0 1rem;
+
+	.search {
+		top: var(--app-nav-height);
+		z-index: 10;
+		padding: .75rem 1rem;
+		position: sticky;
+		background: var(--td-bg-color-page);
+		box-shadow: var(--td-shadow-1);
+
+		.keyword {
+			border: 1px solid var(--td-component-border);
+			padding: .5rem 1rem;
+			background: var(--td-bg-color-container);
+			border-radius: 1rem;
+		}
+	}
+
+	.list {
+		padding-top: .75rem;
+
+		.item {
+			.title {
+				gap: .5rem;
+				display: flex;
+				align-items: center;
+			}
+
+			.description {
+				display: grid;
+				gap: .125rem;
+			}
+		}
+	}
+}
+</style>

src/pages/product/ProductStockOperationDialog.vue

@@ -0,0 +1,185 @@
+<template>
+	<t-dialog
+		v-model:visible="visible"
+		:title="getStockOperationText(operation)"
+		cancel-btn="取消"
+		:confirm-btn="isSaving ? { content: '提交中', loading: true } : '提交'"
+		@cancel="visible = false"
+		@confirm="submit"
+	>
+		<div class="operation-dialog">
+			<div class="summary">
+				<strong v-text="props.product.name || '未命名产品'" />
+				<span class="gray" v-text="`当前可用库存：${getProductQuantityText(props.stock?.availableQuantity)} ${props.product.baseUnit || ''}`" />
+			</div>
+			<t-form label-align="left" label-width="5rem">
+				<t-form-item label="业务单位" required-mark @click="openUnitPicker">
+					<span class="picker-text" v-text="selectedUnitName" />
+				</t-form-item>
+				<t-form-item label="数量" required-mark>
+					<t-input v-model.trim="quantity" type="number" align="right" borderless placeholder="必须大于 0" />
+				</t-form-item>
+				<t-form-item label="原因">
+					<t-input v-model.trim="reason" borderless maxlength="255" placeholder="原因或备注至少填写一项" />
+				</t-form-item>
+				<t-form-item label="备注">
+					<t-textarea v-model.trim="remark" borderless maxlength="500" autosize placeholder="可补充说明" />
+				</t-form-item>
+				<package-photo-field v-model="photoItems" title="操作照片" :required="true" />
+			</t-form>
+		</div>
+	</t-dialog>
+	<t-popup v-model="unitPickerVisible" placement="bottom">
+		<t-picker v-model="unitDraft" :columns="unitOptions" title="选择业务单位" @cancel="unitPickerVisible = false" @confirm="confirmUnit" />
+	</t-popup>
+</template>
+
+<script setup lang="ts">
+import { watch } from "vue";
+import ProductAPI from "@/api/ProductAPI";
+import type { Product, ProductStock, ProductUnit, ProductStockChangeRequest, StockOperationType } from "@/types/Product";
+import { getErrorMessage } from "@/utils/error";
+import { createProductRequestNo, getProductQuantityText, getStockOperationText } from "@/utils/product";
+import { Message } from "@/utils/message";
+import type { PhotoItem } from "@/types/Photo";
+
+type ManualStockOperation = Extract<StockOperationType, "INITIAL_IN" | "MANUAL_IN" | "MANUAL_OUT" | "STOCKTAKE_GAIN" | "STOCKTAKE_LOSS">;
+type PickerValue = string | number;
+
+interface Props {
+	product: Product;
+	stock?: ProductStock;
+	operation: ManualStockOperation;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+	success: [];
+}>();
+const visible = defineModel<boolean>("visible", { default: false });
+const isSaving = ref(false);
+const quantity = ref("");
+const reason = ref("");
+const remark = ref("");
+const requestNo = ref("");
+const photoItems = ref<PhotoItem[]>([]);
+const selectedUnitId = ref("");
+const unitPickerVisible = ref(false);
+const unitDraft = ref<PickerValue[]>([]);
+
+const isInbound = computed(() => props.operation === "INITIAL_IN" || props.operation === "MANUAL_IN" || props.operation === "STOCKTAKE_GAIN");
+const selectableUnits = computed<ProductUnit[]>(() => (props.product.unitList || []).filter(unit => isInbound.value ? unit.allowPurchase : unit.allowSale));
+const unitOptions = computed(() => [selectableUnits.value.map(unit => ({ label: unit.name || "未命名单位", value: unit.id || "" }))]);
+const selectedUnitName = computed(() => selectableUnits.value.find(unit => unit.id === selectedUnitId.value)?.name || "请选择业务单位");
+
+function resetForm(): void {
+	quantity.value = "";
+	reason.value = "";
+	remark.value = "";
+	requestNo.value = "";
+	photoItems.value = [];
+	selectedUnitId.value = selectableUnits.value[0]?.id || "";
+}
+
+function openUnitPicker(): void {
+	if (selectableUnits.value.length) {
+		unitDraft.value = [selectedUnitId.value];
+		unitPickerVisible.value = true;
+	}
+}
+
+function confirmUnit(value: Array<string | number>): void {
+	selectedUnitId.value = String(value[0] || "");
+	unitPickerVisible.value = false;
+}
+
+function validate(): boolean {
+	if (!selectedUnitId.value) {
+		Message.warning("请选择业务单位");
+		return false;
+	}
+	if (!/^\d+(?:\.\d{1,3})?$/.test(quantity.value) || !(0 < Number(quantity.value))) {
+		Message.warning("数量必须是大于 0 的数字，最多三位小数");
+		return false;
+	}
+	if (!props.product.allowDecimalQuantity && !/^\d+$/.test(quantity.value)) {
+		Message.warning("该产品不允许输入小数数量");
+		return false;
+	}
+	if (!reason.value.trim() && !remark.value.trim()) {
+		Message.warning("原因或备注至少填写一项");
+		return false;
+	}
+	if (!photoItems.value.some(item => !!item.tempFileId)) {
+		Message.warning("请上传至少一张操作照片");
+		return false;
+	}
+	return true;
+}
+
+function buildRequest(): ProductStockChangeRequest {
+	return {
+		requestNo: requestNo.value || (requestNo.value = createProductRequestNo()),
+		productId: props.product.id || "",
+		productUnitId: selectedUnitId.value,
+		quantity: quantity.value,
+		reason: reason.value.trim() || undefined,
+		remark: remark.value.trim() || null,
+		attachmentList: photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: item.attachType || "PHOTO" }] : [])
+	};
+}
+
+async function submit(): Promise<void> {
+	if (isSaving.value || !validate()) {
+		return;
+	}
+	isSaving.value = true;
+	try {
+		const request = buildRequest();
+		switch (props.operation) {
+			case "INITIAL_IN":
+				await ProductAPI.initialIn(request);
+				break;
+			case "MANUAL_IN":
+				await ProductAPI.manualIn(request);
+				break;
+			case "MANUAL_OUT":
+				await ProductAPI.manualOut(request);
+				break;
+			case "STOCKTAKE_GAIN":
+				await ProductAPI.stocktakeGain(request);
+				break;
+			case "STOCKTAKE_LOSS":
+				await ProductAPI.stocktakeLoss(request);
+				break;
+		}
+		visible.value = false;
+		Message.success("库存操作已提交");
+		emit("success");
+	} catch (error) {
+		Message.error(getErrorMessage(error, "库存操作失败，请确认请求号后重试"));
+	} finally {
+		isSaving.value = false;
+	}
+}
+
+watch(() => [visible.value, props.operation] as const, ([isVisible]) => {
+	if (isVisible) {
+		resetForm();
+	}
+});
+</script>
+
+<style scoped lang="less">
+.operation-dialog {
+	.summary {
+		gap: .25rem;
+		display: grid;
+		padding: .5rem 0 1rem;
+	}
+
+	:deep(.t-form__item) {
+		padding: .25rem 0;
+	}
+}
+</style>