fix style

src/api/GaoPointChartAPI.ts

@@ -0,0 +1,26 @@
+import { axios } from "timi-web-api";
+import type { GaoPointChartReq, GaoPointDailyStatView, GaoPointRedemptionProductRankView } from "@/types/GaoChart";
+import { getStoreChartCache } from "@/utils/storeChartCache";
+import { withCurrentStoreId } from "@/utils/store";
+
+const BASE_URI = "/gao/store/chart";
+
+/** 查询按日汇总的获得积分、消耗积分及两者差值。 */
+async function dailyTrend(req: GaoPointChartReq): Promise<GaoPointDailyStatView[]> {
+	return await requestList("point-daily-trend", "/point/ledger/daily", req);
+}
+
+/** 查询兑换积分最高的前 10 个产品，不扣除退回积分。 */
+async function redemptionProductRank(req: GaoPointChartReq): Promise<GaoPointRedemptionProductRankView[]> {
+	return await requestList("point-redemption-product-rank", "/point/redemption/product/rank", req);
+}
+
+async function requestList<T>(name: string, path: string, req: GaoPointChartReq): Promise<T[]> {
+	const request = withCurrentStoreId(req);
+	return await getStoreChartCache(`gao-point:${name}:${JSON.stringify(request)}`, async () => await axios.post(`${BASE_URI}${path}`, request));
+}
+
+export default {
+	dailyTrend,
+	redemptionProductRank
+};

src/api/GaoRoleAPI.ts

@@ -0,0 +1,11 @@
+import { axios } from "timi-web-api";
+import type { Role } from "timi-web-api";
+
+const BASE_URI = "/gao/role";
+
+export const GaoRoleAPI = {
+	/** 查询登录用户所属门店内可管理的角色。 */
+	async managementList(): Promise<Role[]> {
+		return await axios.post(`${BASE_URI}/management/list`);
+	}
+};

src/api/TagAPI.ts

@@ -1,6 +1,7 @@
 import { axios } from "timi-web-api";
 import type { Page, PageResult } from "timi-web-api";
 import type { Tag, TagApply, TagBizType } from "@/types/Tag";
+import { getCurrentStoreId } from "@/utils/store";
 
 const BASE_URI = "/gao/tag";
 
@@ -15,7 +16,16 @@ async function detail(id: string): Promise<Tag> {
 }
 
 async function create(tag: Tag): Promise<Tag> {
-	return await axios.post(`${BASE_URI}/create`, tag);
+	const ownerId = tag.ownerId || getCurrentStoreId();
+	if (!ownerId) {
+		throw new Error("无法确定标签所属门店");
+	}
+
+	return await axios.post(`${BASE_URI}/create`, {
+		...tag,
+		ownerType: tag.ownerType || "GAO_STORE",
+		ownerId
+	});
 }
 
 async function update(tag: Tag): Promise<void> {

src/components/DateRangeChartCard.vue

@@ -24,7 +24,7 @@ import type { EChartsOption } from "echarts";
 import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
 import { useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
 
-type ChartOptionBuilder = (visibleDateTextList: string[]) => EChartsOption;
+type ChartOptionBuilder = (visibleDateTextList: string[], chartWidth: number) => EChartsOption;
 
 const props = withDefaults(defineProps<{
 	caption?: string;
@@ -42,6 +42,7 @@ const props = withDefaults(defineProps<{
 });
 
 const dateTextList = computed(() => props.dateTextList);
+const chartWidth = ref(window.innerWidth);
 const {
 	rangeText,
 	showSlider: chartShowSlider,
@@ -51,9 +52,27 @@ const {
 	handleSliderChange
 } = useStoreChartWindow(dateTextList);
 const option = computed<EChartsOption>(() => typeof props.option === "function"
-	? props.option(visibleDateTextList.value)
+	? props.option(visibleDateTextList.value, chartWidth.value)
 	: props.option);
 const { chartElement } = useStoreChart(option);
+let resizeObserver: ResizeObserver | undefined;
+
+onMounted(() => {
+	resizeObserver = new window.ResizeObserver(updateChartWidth);
+	if (chartElement.value) {
+		resizeObserver.observe(chartElement.value);
+		updateChartWidth();
+	}
+});
+
+onBeforeUnmount(() => {
+	resizeObserver?.disconnect();
+	resizeObserver = undefined;
+});
+
+function updateChartWidth(): void {
+	chartWidth.value = chartElement.value?.clientWidth || window.innerWidth;
+}
 </script>
 
 <style scoped lang="less">

src/components/TagSelector.vue

@@ -1,16 +1,19 @@
 <template>
-	<t-popup v-model="popupVisible" placement="bottom">
+	<bottom-popup
-		<div class="tag-selector bg-white">
+		v-model="popupVisible"
-			<div class="title-bar">
+		title="选择标签"
-				<t-button variant="text" size="small" @click="cancelSelection">取消</t-button>
+		height="78vh"
-				<h3 class="title">选择标签</h3>
+		left-button-text="取消"
-				<t-button theme="primary" variant="text" size="small" @click="confirmSelection">确定</t-button>
+		right-button-text="确定"
-			</div>
+		@left-button-click="cancelSelection"
-			<div class="search-row">
+		@right-button-click="confirmSelection"
+	>
+		<div class="tag-selector">
+			<div class="filters glass">
 				<t-input
 					class="input"
 					size="small"
-					v-model.trim="keyword"
+					v-model="keyword"
 					borderless
 					clearable
 					placeholder="搜索标签"
@@ -19,7 +22,7 @@
 					<t-input
 						class="input"
 						size="small"
-						v-model.trim="newTagName"
+						v-model="newTagName"
 						borderless
 						clearable
 						placeholder="新增标签名称"
@@ -29,10 +32,12 @@
 						size="small"
 						:loading="isCreating"
 						:disabled="isCreating"
+						content="新增"
 						@click="createTag"
-					>新增</t-button>
+					/>
 				</template>
 			</div>
+			<div class="list-wrap">
 				<div class="list">
 					<t-tag
 						v-for="(item, index) in visibleTagList"
@@ -46,13 +51,15 @@
 					>
 						<span v-text="getTagName(item)" />
 					</t-tag>
-				<div v-if="!visibleTagList.length" class="empty" v-text="emptyText" />
+					<div v-if="!visibleTagList.length" class="center-tips" v-text="emptyText" />
 				</div>
 			</div>
-	</t-popup>
+		</div>
+	</bottom-popup>
 </template>
 
 <script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
 import { Message } from "@/utils/message";
 import { useUserStore } from "timi-web-api";
 import TagAPI from "@/api/TagAPI";
@@ -198,33 +205,20 @@ watch(() => props.visible, async (value) => {
 
 <style scoped lang="less">
 .tag-selector {
-	display: flex;
+	height: 100%;
-	height: 78vh;
+	overflow: auto;
-	padding-top: 1rem;
+	min-height: 0;
-	border-radius: 1.25rem 1.25rem 0 0;
-	flex-direction: column;
 
-	.title-bar {
+	.filters {
-		padding: 0 1rem;
-		display: grid;
-		grid-template-columns: 4rem 1fr 4rem;
-		align-items: center;
-	}
-
-	.title {
-		margin: 0;
-		font-size: 1rem;
-		text-align: center;
-	}
-
-	.search-row {
 		gap: .5rem;
+		top: 0;
 		display: flex;
-		padding: 1rem;
+		padding: .5rem 1rem;
+		position: sticky;
 		align-items: center;
 
 		.input {
-			--td-input-vertical-padding: 6px;
+			--td-input-vertical-padding: .5rem 1rem;
 
 			border: 1px solid var(--td-component-border);
 			border-radius: .875rem;
@@ -233,13 +227,10 @@ watch(() => props.visible, async (value) => {
 
 	.list {
 		gap: .75rem;
-		flex: 1;
-		overflow: auto;
-		min-height: 0;
 		display: flex;
+		padding: 0 1rem 1rem;
 		flex-wrap: wrap;
 		align-content: flex-start;
-		padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0)) 1rem;
 
 		.item {
 			flex: 1 1 auto;
@@ -248,22 +239,10 @@ watch(() => props.visible, async (value) => {
 			max-width: 100%;
 			justify-content: center;
 		}
-
-		.empty {
-			color: #52607a;
-			padding: 2rem 1rem;
-			text-align: center;
-		}
 	}
 }
 
-:global(html.theme-dark) {
+:global(.bottom-popup:has(.tag-selector) .body) {
-	.tag-selector {
+	overflow: hidden;
-		background: rgba(15, 23, 42, .96);
-
-		.empty {
-			color: #94a3b8;
-		}
-	}
 }
 </style>

src/pages/customer/CustomerList.vue

@@ -561,7 +561,6 @@ function buildCreatedAtRange(): [number | undefined, number | undefined] {
 		gap: 1rem;
 		display: flex;
 		flex-direction: column;
-		padding: 1rem 0;
 
 		.summary {
 			overflow: hidden;

src/pages/followUpReminder/FollowUpReminderList.vue

@@ -21,18 +21,18 @@
 				</template>
 			</t-input>
 			<t-dropdown-menu ref="dropdownMenuRef" class="menus">
-				<t-dropdown-item
-					v-model="statusFilter"
-					:label="statusFilterLabel"
-					:options="statusOptions"
-					@change="handleStatusChange"
-				/>
 				<t-dropdown-item
 					v-model="dateFilterType"
 					:label="dateFilterLabel"
 					:options="dateOptions"
 					@change="handleDateFilterChange"
 				/>
+				<t-dropdown-item
+					v-model="statusFilter"
+					:label="statusFilterLabel"
+					:options="statusOptions"
+					@change="handleStatusChange"
+				/>
 				<t-dropdown-item
 					:label="selectedResponsibleName"
 					:options="[]"
@@ -188,11 +188,7 @@ import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { Customer } from "@/types/Customer";
 import type { ManagedUser } from "@/types/ManagedUser";
-import type {
+import type { FollowUpReminder, FollowUpReminderPage, FollowUpReminderStatus } from "@/types/FollowUpReminder";
-	FollowUpReminder,
-	FollowUpReminderPage,
-	FollowUpReminderStatus
-} from "@/types/FollowUpReminder";
 import { getCustomerPhotoURL } from "@/utils/customer";
 import { parseDateTime } from "@/utils/date";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
@@ -382,18 +378,6 @@ function openResponsibleSelector(): void {
 	responsibleSelectorVisible.value = true;
 }
 
-async function clearFilters(): Promise<void> {
-	statusFilter.value = "";
-	dateFilterType.value = "all";
-	dateRange.value = ["", ""];
-	selectedCustomerId.value = "";
-	selectedCustomer.value = undefined;
-	customerSearchKeyword.value = "";
-	selectedResponsibleId.value = "";
-	selectedResponsible.value = undefined;
-	await refresh();
-}
-
 // ---------- 列表 ----------
 
 const isRefreshing = ref(false);

src/pages/fulfillment/OrderFulfillmentList.vue

@@ -31,13 +31,18 @@
 					</div>
 				</template>
 			</t-input>
-			<t-dropdown-menu class="menus">
+			<t-dropdown-menu ref="filterMenuRef" class="menus">
 				<t-dropdown-item
 					v-model="dateFilterType"
 					:label="dateFilterLabel"
 					:options="dateOptions"
 					@change="selectDateFilter"
 				/>
+				<t-dropdown-item
+					:label="skuFilterLabel"
+					:options="[]"
+					@open="openSkuFilter"
+				/>
 				<t-dropdown-item
 					v-model="status"
 					label="履约状态"
@@ -53,7 +58,8 @@
 			@scrolltolower="loadMore"
 		>
 			<div class="list-wrap">
-				<t-cell-group v-if="salesOrder" class="order-info" theme="card">
+				<t-cell-group v-if="salesOrder || selectedSkuOptionList.length" class="filter-info" theme="card">
+					<template v-if="salesOrder">
 						<t-cell title="订单号" :note="salesOrder.orderNo || salesOrder.id || '未知订单'" />
 						<t-cell title="订单类型" :note="getSalesOrderTypeText(salesOrder.orderType)" />
 						<t-cell title="订单状态">
@@ -65,6 +71,21 @@
 								/>
 							</template>
 						</t-cell>
+					</template>
+					<t-cell v-if="selectedSkuOptionList.length" class="sku-filter-cell" title="已筛选 SKU">
+						<template #note>
+							<div class="selected-sku-list">
+								<t-tag
+									v-for="sku in selectedSkuOptionList"
+									:key="sku.skuId"
+									size="small"
+									theme="primary"
+									variant="outline"
+									:content="formatSelectedSkuName(sku.productName, sku.skuName)"
+								/>
+							</div>
+						</template>
+					</t-cell>
 				</t-cell-group>
 				<t-cell-group v-if="isCustomDate" class="date-summary" theme="card">
 					<t-cell
@@ -96,6 +117,12 @@
 		</t-pull-down-refresh>
 	</div>
 	<nav-bar-action-menu v-if="canCreate" :actions="actions" />
+	<sku-filter-popup
+		v-model="skuFilterVisible"
+		:sku-id-list="selectedSkuIdList"
+		@options-loaded="handleSkuFilterOptionsLoaded"
+		@confirm="confirmSkuFilter"
+	/>
 	<customer-selector
 		v-model="customerId"
 		v-model:visible="customerSelectorVisible"
@@ -137,6 +164,7 @@ import SalesOrderAPI from "@/api/SalesOrderAPI";
 import CustomerSelector from "@/components/CustomerSelector.vue";
 import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
 import OrderFulfillmentListCell from "@/pages/fulfillment/components/OrderFulfillmentListCell.vue";
+import SkuFilterPopup from "@/pages/fulfillment/components/SkuFilterPopup.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { GaoFulfillmentStatus, OrderFulfillment } from "@/types/Fulfillment";
 import type { NavBarAction } from "@/types/NavBarAction";
@@ -152,6 +180,7 @@ defineOptions({ name: "OrderFulfillmentList" });
 
 const route = useRoute();
 const router = useRouter();
+const filterMenuRef = ref<{ collapseMenu: () => void }>();
 const navBarStore = useNavBarStore();
 const userStore = useUserStore();
 const canCreate = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
@@ -172,6 +201,7 @@ const actions = computed<NavBarAction[]>(() => [
 	}
 ]);
 type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
+type SkuFilterOption = { skuId: string; productName: string; skuName: string };
 const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 	{ label: "今天", value: "today" },
 	{ label: "昨天", value: "yesterday" },
@@ -183,11 +213,14 @@ const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 ];
 
 const customerId = ref(getQueryText(route.query.customerId));
+const selectedSkuIdList = ref(getSkuIdList(route.query.skuIds));
 const selectedCustomer = ref<Customer>();
 const salesOrder = ref<SalesOrder>();
+const skuFilterOptionList = ref<SkuFilterOption[]>([]);
+const skuFilterVisible = ref(false);
 const customerSelectorVisible = ref(false);
 const customerSearchKeyword = ref("");
-const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText(route.query.dateType), dateOptions, "today"));
+const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText(route.query.dateType), dateOptions, "all"));
 const dateRange = ref<[string, string]>(parseDateRange(dateFilterType.value));
 const startDraft = ref("");
 const endDraft = ref("");
@@ -211,12 +244,27 @@ const statusOptions = [
 	{ label: "已冲正", value: "REVOKED" }
 ];
 const dateFilterLabel = computed(() => dateOptions.find(item => item.value === dateFilterType.value)?.label || "时间范围");
+const selectedSkuOptionList = computed(() => {
+	const optionMap = new Map(skuFilterOptionList.value.map(option => [option.skuId, option]));
+	return selectedSkuIdList.value
+		.map(skuId => optionMap.get(skuId))
+		.filter((option): option is SkuFilterOption => !!option);
+});
+const skuFilterLabel = computed(() => selectedSkuIdList.value.length ? `SKU (${selectedSkuIdList.value.length})` : "产品 SKU");
 const isCustomDate = computed(() => dateFilterType.value === "custom");
 
 function getQueryText(value: unknown): string {
 	return Array.isArray(value) ? "" : typeof value === "string" ? value : "";
 }
 
+function getSkuIdList(value: unknown): string[] {
+	const queryValueList = Array.isArray(value) ? value : [value];
+	return [...new Set(queryValueList
+		.flatMap(item => typeof item === "string" ? item.split(",") : [])
+		.map(item => item.trim())
+		.filter(Boolean))];
+}
+
 function getInitialStatus(value: unknown): "ALL" | GaoFulfillmentStatus {
 	const statusValue = getQueryText(value);
 	if (["WAITING_STOCK", "PENDING", "VERIFIED", "REJECTED", "CANCELLED", "REVOKED"].includes(statusValue)) {
@@ -250,6 +298,7 @@ async function fetchList(reset: boolean): Promise<void> {
 			size: pageSize,
 			salesOrderId: getQueryText(route.query.salesOrderId) || undefined,
 			customerId: customerId.value || undefined,
+			skuIdList: selectedSkuIdList.value.length ? selectedSkuIdList.value : undefined,
 			beginAt,
 			endAt,
 			status: status.value === "ALL" ? undefined : status.value
@@ -297,6 +346,29 @@ async function selectStatus(value: DropdownValue): Promise<void> {
 	}
 }
 
+async function openSkuFilter(): Promise<void> {
+	skuFilterVisible.value = true;
+	await nextTick();
+	filterMenuRef.value?.collapseMenu();
+}
+
+function handleSkuFilterOptionsLoaded(optionList: SkuFilterOption[]): void {
+	skuFilterOptionList.value = optionList;
+}
+
+async function confirmSkuFilter(skuIdList: string[]): Promise<void> {
+	selectedSkuIdList.value = skuIdList;
+	await replaceFilterQuery();
+	await reloadList();
+}
+
+function formatSelectedSkuName(productName: string, skuName: string) {
+	if (productName === skuName) {
+		return productName;
+	}
+	return `${productName}（${skuName}）`;
+}
+
 async function handleCustomerChange(value: string | string[]): Promise<void> {
 	customerId.value = Array.isArray(value) ? String(value[0] || "") : value;
 	try {
@@ -417,6 +489,7 @@ function buildFilterQuery(transitionDepth = getQueryText(route.query.transitionD
 	const query = {
 		salesOrderId: getQueryText(route.query.salesOrderId),
 		customerId: customerId.value,
+		skuIds: selectedSkuIdList.value.join(","),
 		dateType: dateFilterType.value,
 		beginAt: dateRange.value[0] || "",
 		endAt: dateRange.value[1] || "",
@@ -541,7 +614,7 @@ onUnmounted(() => navBarStore.clearRight());
 			--td-spacer-1: 6px;
 
 			width: 100%;
-			border: 1px solid rgba(148, 163, 184, .18);
+			border: 1px solid var(--td-component-border);
 			overflow: hidden;
 			margin-top: -1rem;
 			border-top: none;
@@ -554,9 +627,44 @@ onUnmounted(() => navBarStore.clearRight());
 	.list-wrap {
 		gap: 1rem;
 		display: flex;
-		padding-top: 1rem;
 		flex-direction: column;
 
+		.filter-info {
+			.selected-sku-list {
+				gap: .4rem;
+				width: 100%;
+				display: flex;
+				min-width: 0;
+				max-width: 100%;
+				overflow-x: auto;
+				justify-content: flex-start;
+				white-space: nowrap;
+				touch-action: pan-x;
+				scrollbar-width: none;
+				-webkit-overflow-scrolling: touch;
+
+				&::-webkit-scrollbar {
+					display: none;
+				}
+
+				:deep(.t-tag) {
+					flex: none;
+				}
+			}
+
+			.sku-filter-cell {
+				:deep(.t-cell__title) {
+					flex: 0 0 5rem;
+				}
+
+				:deep(.t-cell__note) {
+					flex: 1 1 0;
+					min-width: 0;
+					overflow: hidden;
+				}
+			}
+		}
+
 		.date-summary {
 
 			:deep(.t-cell__title) {

src/pages/fulfillment/components/SkuFilterPopup.vue

@@ -0,0 +1,367 @@
+<template>
+	<bottom-popup
+		v-model="popupVisible"
+		title="筛选产品 SKU"
+		height="min(80vh, 48rem)"
+		left-button-text="重置"
+		right-button-text="确定"
+		@left-button-click="resetSelection"
+		@right-button-click="confirmSelection"
+	>
+		<div class="sku-filter-popup">
+			<div class="filters glass">
+				<t-input
+					class="search"
+					v-model="keyword"
+					borderless
+					clearable
+					placeholder="搜索产品名称、拼音、编码或 SKU"
+				/>
+			</div>
+			<div v-if="singleSkuProductList.length" class="single-list">
+				<t-cell-group theme="card">
+					<t-cell
+						class="sku-cell"
+						v-for="product in singleSkuProductList"
+						:key="product.id"
+						@click="toggleSkuSelected(getSkuId(getProductSkuList(product)[0]))"
+					>
+						<template #title>
+							<div @click.stop>
+								<t-checkbox
+									:model-value="draftSkuIdList.includes(getSkuId(getProductSkuList(product)[0]))"
+									icon="line"
+									:block="false"
+									borderless
+									@update:model-value="checked => setSkuSelected(getSkuId(getProductSkuList(product)[0]), checked)"
+								>
+									<span v-text="product.name || '未命名产品'" />
+								</t-checkbox>
+							</div>
+						</template>
+					</t-cell>
+				</t-cell-group>
+			</div>
+			<t-collapse
+				v-if="multiSkuProductList.length"
+				v-model="expandedProductIdList"
+				class="multi-list"
+				:expand-mutex="false"
+			>
+				<t-collapse-panel
+					v-for="product in multiSkuProductList"
+					:key="product.id"
+					:value="product.id || ''"
+					class="collapse-panel"
+				>
+					<template #header>
+						<div class="header">
+							<div class="group-checkbox" @click.stop>
+								<t-checkbox
+									:model-value="0 < getVisibleSelectedSkuCount(product)"
+									:indeterminate="isProductPartiallySelected(product)"
+									icon="line"
+									:block="false"
+									borderless
+									@update:model-value="toggleProductSkuSelection(product)"
+								/>
+							</div>
+							<span class="clip-text" v-text="product.name || '未命名产品'" />
+							<span
+								v-if="getSelectedSkuCount(product)"
+								class="tips"
+								v-text="`已选 ${getSelectedSkuCount(product)} 个`"
+							/>
+						</div>
+					</template>
+						<t-cell-group theme="card" class="sku-choice-list">
+						<t-cell
+							v-for="sku in getVisibleProductSkuList(product)"
+							:key="sku.id"
+							class="sku-cell"
+							@click="toggleSkuSelected(getSkuId(sku))"
+						>
+							<template #title>
+								<div class="title">
+									<div @click.stop>
+										<t-checkbox
+											:model-value="draftSkuIdList.includes(getSkuId(sku))"
+											icon="line"
+											:block="false"
+											borderless
+											@update:model-value="checked => setSkuSelected(getSkuId(sku), checked)"
+										/>
+									</div>
+									<span class="clip-text" v-text="getSkuText(sku)" />
+								</div>
+							</template>
+						</t-cell>
+					</t-cell-group>
+				</t-collapse-panel>
+			</t-collapse>
+			<div
+				v-if="!singleSkuProductList.length && !multiSkuProductList.length"
+				class="center-tips"
+				v-text="loadingProducts ? '正在加载产品 SKU' : keyword ? '没有匹配的产品或 SKU' : '暂无可筛选的产品 SKU'"
+			/>
+		</div>
+	</bottom-popup>
+</template>
+
+<script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
+import ProductAPI from "@/api/ProductAPI";
+import type { Product, ProductSku } from "@/types/Product";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+
+defineOptions({ name: "SkuFilterPopup" });
+
+type SkuFilterOption = { skuId: string; productName: string; skuName: string };
+
+const props = defineProps<{
+	modelValue: boolean;
+	skuIdList: string[];
+}>();
+const emit = defineEmits<{
+	"update:modelValue": [value: boolean];
+	"options-loaded": [optionList: SkuFilterOption[]];
+	confirm: [skuIdList: string[]];
+}>();
+
+const popupVisible = computed({
+	get: () => props.modelValue,
+	set: value => emit("update:modelValue", value)
+});
+const draftSkuIdList = ref<string[]>([...props.skuIdList]);
+const keyword = ref("");
+const productList = ref<Product[]>([]);
+const expandedProductIdList = ref<Array<string | number>>([]);
+const loadingProducts = ref(false);
+const normalizedKeyword = computed(() => keyword.value.trim().toLocaleLowerCase());
+const filterableProductList = computed(() => productList.value.filter(product => !!product.id && 0 < getProductSkuList(product).length));
+const singleSkuProductList = computed(() => filterableProductList.value.filter(product => getProductSkuList(product).length === 1 && matchesProductSearch(product)));
+const multiSkuProductList = computed(() => filterableProductList.value.filter(product => 1 < getProductSkuList(product).length && matchesProductSearch(product)));
+const skuFilterOptionList = computed<SkuFilterOption[]>(() => filterableProductList.value.flatMap(product => getProductSkuList(product).map(sku => ({
+	skuId: getSkuId(sku),
+	productName: product.name || "未命名产品",
+	skuName: getSkuText(sku)
+}))));
+
+watch(() => props.modelValue, visible => {
+	if (!visible) {
+		return;
+	}
+	draftSkuIdList.value = [...props.skuIdList];
+	expandSelectedProducts();
+});
+
+watch(() => props.skuIdList, skuIdList => {
+	if (!props.modelValue) {
+		draftSkuIdList.value = [...skuIdList];
+	}
+}, { deep: true });
+
+watch(normalizedKeyword, value => {
+	if (value) {
+		expandedProductIdList.value = multiSkuProductList.value.map(product => product.id || "");
+	}
+});
+
+function getProductSkuList(product: Product): ProductSku[] {
+	return (product.skuList || []).filter((sku): sku is ProductSku & { id: string } => !!sku.id);
+}
+
+function getSkuId(sku?: ProductSku): string {
+	return sku?.id || "";
+}
+
+function getSkuText(sku?: ProductSku): string {
+	return sku?.specSummary || sku?.name || "默认 SKU";
+}
+
+function matchesSearchText(value?: string | null): boolean {
+	return !!normalizedKeyword.value && !!value?.toLocaleLowerCase().includes(normalizedKeyword.value);
+}
+
+function matchesProductName(product: Product): boolean {
+	return [
+		product.name,
+		product.namePinyinFull,
+		product.namePinyinInitial,
+		product.namePinyinMixed,
+		product.code
+	].some(matchesSearchText);
+}
+
+function matchesSku(sku: ProductSku): boolean {
+	return [sku.name, sku.specSummary, sku.code, sku.barcode].some(matchesSearchText);
+}
+
+function matchesProductSearch(product: Product): boolean {
+	return !normalizedKeyword.value
+		|| matchesProductName(product)
+		|| getProductSkuList(product).some(matchesSku);
+}
+
+function getVisibleProductSkuList(product: Product): ProductSku[] {
+	const skuList = getProductSkuList(product);
+	if (!normalizedKeyword.value || matchesProductName(product)) {
+		return skuList;
+	}
+	return skuList.filter(matchesSku);
+}
+
+function getSelectedSkuCount(product: Product): number {
+	const skuIdSet = new Set(getProductSkuList(product).map(getSkuId));
+	return draftSkuIdList.value.filter(skuId => skuIdSet.has(skuId)).length;
+}
+
+function getVisibleSelectedSkuCount(product: Product): number {
+	const skuIdSet = new Set(getVisibleProductSkuList(product).map(getSkuId));
+	return draftSkuIdList.value.filter(skuId => skuIdSet.has(skuId)).length;
+}
+
+function isProductPartiallySelected(product: Product): boolean {
+	const selectedCount = getVisibleSelectedSkuCount(product);
+	return 0 < selectedCount && selectedCount < getVisibleProductSkuList(product).length;
+}
+
+function toggleProductSkuSelection(product: Product): void {
+	const skuIdList = getVisibleProductSkuList(product).map(getSkuId);
+	const skuIdSet = new Set(draftSkuIdList.value);
+	const shouldSelectAll = !skuIdList.every(skuId => skuIdSet.has(skuId));
+	for (const skuId of skuIdList) {
+		if (shouldSelectAll) {
+			skuIdSet.add(skuId);
+		} else {
+			skuIdSet.delete(skuId);
+		}
+	}
+	draftSkuIdList.value = [...skuIdSet];
+}
+
+function expandSelectedProducts(): void {
+	if (normalizedKeyword.value) {
+		expandedProductIdList.value = multiSkuProductList.value.map(product => product.id || "");
+		return;
+	}
+	expandedProductIdList.value = multiSkuProductList.value
+		.filter(product => getProductSkuList(product).some(sku => props.skuIdList.includes(getSkuId(sku))))
+		.map(product => product.id || "");
+}
+
+function setSkuSelected(skuId: string, checked: boolean): void {
+	if (!skuId) {
+		return;
+	}
+	const skuIdSet = new Set(draftSkuIdList.value);
+	if (checked) {
+		skuIdSet.add(skuId);
+	} else {
+		skuIdSet.delete(skuId);
+	}
+	draftSkuIdList.value = [...skuIdSet];
+}
+
+function toggleSkuSelected(skuId: string): void {
+	setSkuSelected(skuId, !draftSkuIdList.value.includes(skuId));
+}
+
+function resetSelection(): void {
+	draftSkuIdList.value = [];
+}
+
+function confirmSelection(): void {
+	emit("confirm", [...new Set(draftSkuIdList.value)]);
+	popupVisible.value = false;
+}
+
+async function loadFilterProducts(): Promise<void> {
+	loadingProducts.value = true;
+	try {
+		const result = await ProductAPI.list({ index: 0, size: 1000 });
+		productList.value = result.list || [];
+		emit("options-loaded", skuFilterOptionList.value);
+		expandSelectedProducts();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品 SKU 筛选项加载失败"));
+	} finally {
+		loadingProducts.value = false;
+	}
+}
+
+onMounted(loadFilterProducts);
+</script>
+
+<style scoped lang="less">
+.sku-filter-popup {
+	display: flex;
+	flex-direction: column;
+
+	:deep(.t-cell-group) {
+		margin: 0;
+	}
+
+	.filters {
+		top: 0;
+		z-index: 1;
+		padding: .5rem 1rem;
+		position: sticky;
+
+		.search {
+			border: 1px solid var(--td-component-border);
+			padding: .5rem 1rem;
+			border-radius: 1rem;
+		}
+	}
+
+	.single-list,
+	.multi-list {
+		margin: 0;
+	}
+
+	.multi-list {
+		border-top: 1px solid var(--td-component-stroke);
+
+		.collapse-panel {
+
+			:deep(.t-collapse-panel__content) {
+				padding: 0 0 0 1rem;
+			}
+
+			.header {
+				display: flex;
+				min-width: 0;
+				align-items: center;
+				justify-content: space-between;
+
+				.group-checkbox {
+					flex: 0 0 auto;
+				}
+			}
+		}
+	}
+
+	.sku-choice-list {
+		margin: 0;
+	}
+
+	.sku-cell,
+	:deep(.t-collapse-panel__title) {
+		padding: .5rem;
+
+		.title {
+			gap: .125rem;
+			display: flex;
+			min-width: 0;
+		}
+	}
+
+	.tips {
+		color: var(--td-text-color-secondary);
+		font-size: .75rem;
+		margin-left: .5rem;
+	}
+}
+</style>

src/pages/permission/PermissionSettings.vue

@@ -92,12 +92,10 @@ const router = useRouter();
 const userStore = useUserStore();
 const permissionStore = usePermissionSettingsStore();
 const authorizationRoleList = ref<Role[]>([]);
-const directRoleIdSet = ref(new Set<string>());
-const manageableRoleIdSet = ref(new Set<string>());
 const isSystemAdmin = computed(() => userStore.hasRoles(coreRoleCodes.admin));
 const roleCount = computed(() => authorizationRoleList.value.length);
 const permissionCount = computed(() => permissionStore.permissionList.length);
-type RoleTreeItem = Pick<Role, "id" | "name" | "parentRoleId" | "protectedRole"> & { level: number };
+type RoleTreeItem = Pick<Role, "id" | "name" | "parentRoleId" | "protectedRole" | "ownerType"> & { level: number };
 
 const visibleRoleTree = computed<RoleTreeItem[]>(() => {
 	if (isSystemAdmin.value) {
@@ -147,36 +145,15 @@ function canAssignRole(role: Pick<Role, "protectedRole">): boolean {
 	return isSystemAdmin.value || role.protectedRole !== true;
 }
 
-function getRoleScopeLabel(role: Pick<Role, "id">): string {
+function getRoleScopeLabel(role: Pick<Role, "ownerType">): string {
-	const direct = directRoleIdSet.value.has(role.id);
+	return isSystemAdmin.value ? "系统角色" : role.ownerType === "STORE" ? "本店角色" : "可管理角色";
-	const manageable = manageableRoleIdSet.value.has(role.id);
-	if (direct && manageable) {
-		return "直属且可管理";
-	}
-	return direct ? "直属角色" : "可管理角色";
 }
 
 // ---------- 页面数据 ----------
 
 onMounted(async () => {
-	if (isSystemAdmin.value) {
 	await permissionStore.loadAll();
 	authorizationRoleList.value = permissionStore.roleList;
-		return;
-	}
-
-	await permissionStore.loadAll();
-	const [manageableRoleList, currentRoleList] = await Promise.all([
-		permissionStore.loadManageableRoles(),
-		permissionStore.loadCurrentRoleDetails()
-	]);
-	const roleMap = new Map<string, Role>();
-	for (const role of [...currentRoleList, ...manageableRoleList]) {
-		roleMap.set(role.id, role);
-	}
-	authorizationRoleList.value = Array.from(roleMap.values());
-	directRoleIdSet.value = new Set(currentRoleList.map(item => item.id).filter((id): id is string => Boolean(id)));
-	manageableRoleIdSet.value = new Set(manageableRoleList.map(item => item.id).filter((id): id is string => Boolean(id)));
 });
 </script>
 

src/pages/permission/RoleDelegationPermissionAssign.vue

@@ -186,7 +186,7 @@ function clearPermissionState(): void {
 // ---------- 授权范围 ----------
 
 async function loadAuthorizationScope(): Promise<void> {
-	candidateRoleList.value = isSystemAdmin.value ? permissionStore.roleList : await permissionStore.loadManageableRoles();
+	candidateRoleList.value = permissionStore.roleList;
 }
 
 onMounted(async () => {

src/pages/permission/RoleEdit.vue

@@ -330,7 +330,7 @@ async function fillForm(): Promise<void> {
 	await permissionStore.loadAll();
 	await loadAuthorizationScope();
 	if (isCreateMode.value) {
-		parentRoleOptions.value = await permissionStore.loadCreateParentGrantableRoles();
+		parentRoleOptions.value = filterStoreParentRoles(await permissionStore.loadCreateParentGrantableRoles());
 		formModel.parentRoleId = parentRoleOptions.value[0]?.id || "";
 		return;
 	}
@@ -355,30 +355,38 @@ async function reloadCurrentRole(): Promise<void> {
 		childRoleIdList
 	});
 	parentRoleOptions.value = canEditParentRole.value
-		? await permissionStore.loadParentGrantableRoles(current.id)
+		? filterStoreParentRoles(await permissionStore.loadParentGrantableRoles(current.id))
 		: [];
-	if (current.parentRole?.id && !parentRoleOptions.value.some(item => item.id === current.parentRoleId)) {
+	const currentParent = current.parentRole;
+	const canKeepCurrentParent = isSystemAdmin.value || Boolean(currentParent && (
+		currentParent.moduleCode === moduleCode && currentParent.code === "STORE_MANAGER"
+		|| permissionStore.roleList.some(item => item.id === currentParent.id)
+	));
+	if (currentParent?.id && canKeepCurrentParent && !parentRoleOptions.value.some(item => item.id === current.parentRoleId)) {
 		parentRoleOptions.value.unshift({
-			...current.parentRole,
+			...currentParent,
-			id: current.parentRole.id,
+			id: currentParent.id,
-			permissionIdList: current.parentRole.permissionIdList || current.parentRole.permissionList?.map(item => item.id) || [],
+			permissionIdList: currentParent.permissionIdList || currentParent.permissionList?.map(item => item.id) || [],
-			childRoleIdList: current.parentRole.childRoleIdList || current.parentRole.childRoleList?.map(item => item.id).filter((id): id is string => Boolean(id)) || [],
+			childRoleIdList: currentParent.childRoleIdList || currentParent.childRoleList?.map(item => item.id).filter((id): id is string => Boolean(id)) || [],
-			delegationPermissionIdList: current.parentRole.delegationPermissionIdList || current.parentRole.delegationPermissionList?.map(item => item.id) || []
+			delegationPermissionIdList: currentParent.delegationPermissionIdList || currentParent.delegationPermissionList?.map(item => item.id) || []
 		});
 	}
 }
 
-async function loadAuthorizationScope(): Promise<void> {
+/** 限制门店角色可选择的管理父级。 */
-	candidateRoleList.value = isSystemAdmin.value ? permissionStore.roleList : await permissionStore.loadManageableRoles();
+function filterStoreParentRoles(roleList: Role[]): Role[] {
-	inheritanceRoleList.value = mergeRoleList(permissionStore.roleList, candidateRoleList.value);
+	if (isSystemAdmin.value) {
+		return roleList;
 	}
 
-function mergeRoleList(...roleLists: Role[][]): Role[] {
+	const storeRoleIdSet = new Set(permissionStore.roleList.map(item => item.id));
-	const roleMap = new Map<string, Role>();
+	return roleList.filter(role => storeRoleIdSet.has(role.id)
-	for (const role of roleLists.flat()) {
+		|| (role.moduleCode === moduleCode && role.code === "STORE_MANAGER"));
-		roleMap.set(role.id, role);
 }
-	return Array.from(roleMap.values());
+
+async function loadAuthorizationScope(): Promise<void> {
+	candidateRoleList.value = permissionStore.roleList;
+	inheritanceRoleList.value = [...permissionStore.roleList];
 }
 
 // ---------- 保存 ----------

src/pages/permission/RoleList.vue

@@ -53,7 +53,6 @@ const permissionStore = usePermissionSettingsStore();
 const userStore = useUserStore();
 const isRefreshing = ref(false);
 const deletableRoleIdSet = ref(new Set<string>());
-const directRoleIdSet = ref(new Set<string>());
 
 // ---------- 顶部导航 ----------
 
@@ -80,9 +79,11 @@ const sortedRoles = computed<Array<Role & { level: number }>>(() => {
 async function removeRole(id: string): Promise<void> {
 	try {
 		await permissionStore.removeRole(id);
-	} catch (error) {
-		await refreshAuthorizationScope();
 		await permissionStore.loadAll(true);
+		await refreshAuthorizationScope();
+	} catch (error) {
+		await permissionStore.loadAll(true);
+		await refreshAuthorizationScope();
 		Message.error(getErrorMessage(error, "角色删除失败"));
 	}
 }
@@ -95,12 +96,7 @@ function canDeleteRole(role: Role): boolean {
 }
 
 function getRoleScopeLabel(role: Role): string {
-	const direct = directRoleIdSet.value.has(role.id);
+	return userStore.hasRoles(coreRoleCodes.admin) ? "系统角色" : role.ownerType === "STORE" ? "本店角色" : "可管理角色";
-	const manageable = deletableRoleIdSet.value.has(role.id);
-	if (direct && manageable) {
-		return "直属且可管理";
-	}
-	return direct ? "直属角色" : "可管理角色";
 }
 
 // ---------- 页面数据 ----------
@@ -121,9 +117,7 @@ onMounted(async () => {
 	if (canCreateRole.value) {
 		navBarStore.setRightText("添加", "var(--td-brand-color)", toCreate);
 	}
-	if (userStore.hasRoles(coreRoleCodes.admin)) {
 	await permissionStore.loadAll();
-	}
 	await refreshAuthorizationScope();
 	if (!displayRoleList.value.length) {
 		displayRoleList.value = getDisplayRoleList();
@@ -163,23 +157,8 @@ async function refreshAuthorizationScope(): Promise<void> {
 		deletableRoleIdSet.value = new Set(permissionStore.roleList.map(item => item.id));
 		return;
 	}
-
+	displayRoleList.value = permissionStore.roleList;
-	try {
+	deletableRoleIdSet.value = new Set(permissionStore.roleList.map(item => item.id));
-		const [manageableRoleList, currentRoleList] = await Promise.all([
-			permissionStore.loadManageableRoles(),
-			permissionStore.loadCurrentRoleDetails()
-		]);
-		const roleMap = new Map<string, Role>();
-		for (const role of [...currentRoleList, ...manageableRoleList]) {
-			roleMap.set(role.id, role);
-		}
-		displayRoleList.value = Array.from(roleMap.values());
-		directRoleIdSet.value = new Set(currentRoleList.map(item => item.id).filter((id): id is string => Boolean(id)));
-		deletableRoleIdSet.value = new Set(manageableRoleList.map(item => item.id).filter((id): id is string => Boolean(id)));
-	} catch {
-		directRoleIdSet.value = new Set<string>();
-		deletableRoleIdSet.value = new Set<string>();
-	}
 }
 
 </script>

src/pages/permission/RolePermissionAssign.vue

@@ -217,7 +217,7 @@ function clearPermissionState(): void {
 // ---------- 授权范围 ----------
 
 async function loadAuthorizationScope(): Promise<void> {
-	candidateRoleList.value = isSystemAdmin.value ? permissionStore.roleList : await permissionStore.loadManageableRoles();
+	candidateRoleList.value = permissionStore.roleList;
 }
 
 onMounted(async () => {

src/pages/product/ProductCategoryList.vue

@@ -392,7 +392,6 @@ onUnmounted(() => {
 	}
 
 	.list {
-		padding-top: .75rem;
 
 		.item {
 

src/pages/product/ProductList.vue

@@ -454,7 +454,6 @@ onUnmounted(() => {
 	}
 
 	.list {
-		padding-top: .75rem;
 
 		.item {
 			padding: 10px;

src/pages/product/ProductStockList.vue

@@ -338,7 +338,6 @@ onUnmounted(() => {
 		min-height: 70vh;
 
 		.list {
-			padding-top: .75rem;
 
 			.item {
 				padding: 10px;

src/pages/product/ProductStockRecordList.vue

@@ -16,8 +16,8 @@
 					:options="dateOptions"
 					@change="selectDateFilter"
 				/>
-				<t-dropdown-item v-model="operationType" label="操作类型" :options="operationOptions" @change="selectOperationType" />
+				<t-dropdown-item v-model="operationType" :label="operationFilterLabel" :options="operationOptions" @change="selectOperationType" />
-				<t-dropdown-item v-model="direction" label="出入库" :options="directionOptions" @change="selectDirection" />
+				<t-dropdown-item v-model="direction" :label="directionFilterLabel" :options="directionOptions" @change="selectDirection" />
 			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh
@@ -110,8 +110,13 @@
 							<div class="title">
 								<span v-if="record.customer" class="actor" v-text="getCustomerText(record)" />
 								<span v-else-if="record.operator" class="actor" v-text="getOperatorText(record)" />
-								<strong class="operation" v-text="getStockOperationText(record.operationType)" />
+								<strong class="operation" :class="getOperationClass(record.operationType)" v-text="getStockOperationText(record.operationType)" />
-								<strong class="product-name" v-text="record.productNameSnapshot || '未命名产品'" />
+								<strong class="product-name clip-text" v-text="record.productNameSnapshot || '未命名产品'" />
+								<t-tag
+									v-if="record.productNameSnapshot !== record.skuNameSnapshot"
+									size="small"
+									:content="record.skuNameSnapshot"
+								/>
 								<span
 									v-if="record.quantity !== undefined && record.quantity !== null && record.quantity !== ''"
 									class="quantity"
@@ -216,7 +221,7 @@ const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 	{ label: "全部", value: "all" },
 	{ label: "自定义范围", value: "custom" }
 ];
-const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText("dateType"), dateOptions, "thisWeek"));
+const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText("dateType"), dateOptions, "all"));
 const dateRange = ref<[string, string]>(parseDateRange(dateFilterType.value));
 const startDraft = ref("");
 const endDraft = ref("");
@@ -239,7 +244,6 @@ const emptyText = computed(() => {
 const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
 const operationOptions = [
 	{ label: "全部操作", value: "ALL" },
-	{ label: "期初入库", value: "INITIAL_IN" },
 	{ label: "手工入库", value: "MANUAL_IN" },
 	{ label: "手工出库", value: "MANUAL_OUT" },
 	{ label: "手工流水冲正", value: "MANUAL_REVOKE" },
@@ -255,6 +259,8 @@ const directionOptions = [
 	{ label: "入库", value: "IN" },
 	{ label: "出库", value: "OUT" }
 ];
+const operationFilterLabel = computed(() => operationOptions.find(item => item.value === operationType.value)?.label || "操作类型");
+const directionFilterLabel = computed(() => directionOptions.find(item => item.value === direction.value)?.label || "出入库");
 
 function getQueryText(key: string): string {
 	const value = route.query[key];
@@ -274,7 +280,6 @@ function getDefaultFilteredSkuUnitId(): string {
 
 function getOperationIcon(type?: StockOperationType): string {
 	return ({
-		INITIAL_IN: "import",
 		MANUAL_IN: "import",
 		MANUAL_OUT: "export",
 		MANUAL_REVOKE: "rollback",
@@ -287,6 +292,21 @@ function getOperationIcon(type?: StockOperationType): string {
 	} as Record<string, string>)[type || ""] || "history";
 }
 
+function getOperationClass(type?: StockOperationType): string {
+	return ({
+		INITIAL_IN: "initial-in",
+		MANUAL_IN: "manual-in",
+		MANUAL_OUT: "manual-out",
+		MANUAL_REVOKE: "manual-revoke",
+		ORDER_RESERVE: "order-reserve",
+		ORDER_RELEASE: "order-release",
+		ORDER_OUT: "order-out",
+		ORDER_REVOKE: "order-revoke",
+		STOCKTAKE_GAIN: "stocktake-gain",
+		STOCKTAKE_LOSS: "stocktake-loss"
+	} as Record<string, string>)[type || ""] || "unknown";
+}
+
 function getStockQuantityText(record: StockRecord): string {
 	if (record.quantity === undefined || record.quantity === null || record.quantity === "") {
 		return "";
@@ -547,7 +567,6 @@ onUnmounted(() => {
 
 <style scoped lang="less">
 .product-stock-record-list {
-	gap: .75rem;
 	display: flex;
 	padding: var(--app-nav-height) 0 1rem;
 	flex-direction: column;
@@ -636,16 +655,6 @@ onUnmounted(() => {
 				padding: 10px;
 				min-width: 0;
 
-				:deep(.t-cell__title) {
-					min-width: 0;
-					width: 0;
-				}
-
-				:deep(.t-cell__title-text) {
-					min-width: 0;
-					width: 100%;
-				}
-
 				.avatar {
 					width: 3.5rem;
 					height: 3.5rem;
@@ -662,7 +671,7 @@ onUnmounted(() => {
 				}
 
 				.title {
-					gap: .5rem;
+					gap: .25rem;
 					min-width: 0;
 					max-width: 100%;
 					flex: 1;
@@ -672,20 +681,59 @@ onUnmounted(() => {
 					white-space: nowrap;
 
 					.actor {
-						color: var(--td-text-color-secondary);
 						flex: 0 0 auto;
+						color: var(--td-text-color-brand);
 					}
 
 					.operation {
 						flex: 0 0 auto;
+						color: var(--operation-color, var(--td-text-color-secondary));
+						font-weight: 700;
+
+						&.initial-in {
+							--operation-color: #2563eb;
+						}
+
+						&.manual-in {
+							--operation-color: #15803d;
+						}
+
+						&.manual-out {
+							--operation-color: #c2410c;
+						}
+
+						&.manual-revoke {
+							--operation-color: #be123c;
+						}
+
+						&.order-reserve {
+							--operation-color: #7c3aed;
+						}
+
+						&.order-release {
+							--operation-color: #0891b2;
+						}
+
+						&.order-out {
+							--operation-color: #dc2626;
+						}
+
+						&.order-revoke {
+							--operation-color: #4f46e5;
+						}
+
+						&.stocktake-gain {
+							--operation-color: #0f766e;
+						}
+
+						&.stocktake-loss {
+							--operation-color: #a16207;
+						}
 					}
 
 					.product-name {
-						min-width: 0;
 						flex: 0 1 auto;
-						overflow: hidden;
+						color: var(--td-text-color-primary);
-						text-overflow: ellipsis;
-						white-space: nowrap;
 					}
 
 					.quantity {
@@ -721,4 +769,46 @@ onUnmounted(() => {
 		color: var(--td-error-color);
 	}
 }
+
+:global(html.theme-dark) .product-stock-record-list .operation {
+	&.initial-in {
+		--operation-color: #93c5fd;
+	}
+
+	&.manual-in {
+		--operation-color: #86efac;
+	}
+
+	&.manual-out {
+		--operation-color: #fdba74;
+	}
+
+	&.manual-revoke {
+		--operation-color: #fda4af;
+	}
+
+	&.order-reserve {
+		--operation-color: #c4b5fd;
+	}
+
+	&.order-release {
+		--operation-color: #67e8f9;
+	}
+
+	&.order-out {
+		--operation-color: #fca5a5;
+	}
+
+	&.order-revoke {
+		--operation-color: #a5b4fc;
+	}
+
+	&.stocktake-gain {
+		--operation-color: #5eead4;
+	}
+
+	&.stocktake-loss {
+		--operation-color: #fcd34d;
+	}
+}
 </style>

src/pages/product/ProductStockSkuList.vue

@@ -333,7 +333,6 @@ onUnmounted(() => {
 
 	.list-wrap {
 		min-height: 70vh;
-		padding-top: .75rem;
 
 		.content {
 			gap: 1rem;

src/pages/product/component/CustomerOrderRankChart.vue

@@ -4,7 +4,7 @@
 		caption="排除已取消订单，前 10"
 		:option="chartOption"
 		:loading="loading"
-		height="17rem"
+		height="14rem"
 	/>
 </template>
 
@@ -27,17 +27,18 @@ const chartOption = computed<EChartsOption>(() => {
 	const list = props.list.slice(0, 10);
 	return {
 		...buildHorizontalBarOption(list.map(getCustomerName)),
-		legend: { show: false },
+		grid: {
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			showLabel: false
+		},
 		xAxis: {
 			type: "value",
-			axisLabel: {
-				color: "#52607a",
-				formatter: (value: number) => `${formatChartYuan(value)} 元`
-			},
 			splitLine: { lineStyle: { color: "rgba(148, 163, 184, .2)" } }
 		},
 		series: [{
-			name: "净收款",
 			type: "bar",
 			tooltip: { valueFormatter: value => `${formatChartYuan(Number(value))} 元` },
 			data: list.map(item => getNumber(item.netPaidAmount) / 100)

src/pages/product/component/OrderDailyChart.vue

@@ -14,6 +14,7 @@ import type { EChartsOption } from "echarts";
 import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoSalesOrderDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, formatChartYuan, formatQuantity, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";
 
 defineOptions({
 	name: "OrderDailyChart"
@@ -25,20 +26,24 @@ const props = defineProps<{
 	loading: boolean;
 }>();
 
-function buildOption(visibleDateTextList: string[]): EChartsOption {
+const dateTextList = computed(() => props.dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
+
+function buildOption(visibleDateTextList: string[], chartWidth: number): EChartsOption {
 	const labelList = visibleDateTextList.map(item => item.slice(5));
 	return {
 		...buildAxisChartOption(labelList),
 		xAxis: {
 			type: "category",
 			data: labelList,
-			axisTick: { show: false },
+			axisTick: { show: true, length: 0, interval: 0 },
 			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
 		},
 		yAxis: [
 			{
 				type: "value",
 				name: "订单",
+				minInterval: 1,
 				axisLabel: { color: "#52607a" },
 				splitLine: { lineStyle: { color: "rgba(148, 163, 184, .2)" } }
 			},
@@ -57,6 +62,7 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 				name: "订单数",
 				type: "bar",
 				yAxisIndex: 0,
+				markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, chartWidth),
 				tooltip: { valueFormatter: value => formatQuantity(Number(value)) },
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.orderCount))
 			},

src/pages/product/component/OrderPaymentChart.vue

@@ -4,7 +4,7 @@
 		caption="当前订单快照"
 		:option="chartOption"
 		:loading="loading"
-		height="17rem"
+		height="6rem"
 	/>
 </template>
 
@@ -27,16 +27,35 @@ const chartOption = computed<EChartsOption>(() => {
 	const list = props.list;
 	return {
 		...buildHorizontalBarOption(list.map(item => getPaymentStatusText(item.paymentStatus))),
-		legend: { show: false },
+		grid: {
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			showLabel: false
+		},
 		series: [{
-			name: "订单数",
 			type: "bar",
-			data: list.map(item => getNumber(item.orderCount))
+			data: list.map(item => ({
+				value: getNumber(item.orderCount),
+				itemStyle: { color: getPaymentStatusColor(item.paymentStatus) }
+			}))
 		}]
 	};
 });
 
 function getPaymentStatusText(value?: string): string {
-	return ({ UNPAID: "未付款", PARTIALLY_PAID: "部分付款", PAID: "已付款" } as Record<string, string>)[value || ""] || "未知状态";
+	return ({
+		UNPAID: "未付款",
+		PARTIALLY_PAID: "部分付款",
+		PAID: "已付款"
+	} as Record<string, string>)[value || ""] || "未知状态";
+}
+function getPaymentStatusColor(value?: string): string {
+	return ({
+		UNPAID: "#F33434",
+		PARTIALLY_PAID: "#EB9C25",
+		PAID: "#0F766E"
+	} as Record<string, string>)[value || ""] || "#94A3B8";
 }
 </script>

src/pages/product/component/OrderReceivableCard.vue

@@ -2,25 +2,17 @@
 	<section class="receivable-section">
 		<div class="title-row">
 			<h2 v-text="'应收构成'" />
-			<span class="caption" v-text="'时间范围内创建订单的当前快照'" />
+			<span class="caption">成交金额拆分；待收余额已扣除待核销</span>
-		</div>
-		<div class="receivable-list">
-			<div v-for="item in detailList" :key="item.label" class="receivable-item">
-				<span v-text="item.label" />
-				<strong v-text="item.value" />
-			</div>
 		</div>
+		<div ref="chartElement" class="chart" />
 	</section>
 </template>
 
 <script setup lang="ts">
+import type { EChartsOption } from "echarts";
 import type { GaoSalesOrderReceivableStatView } from "@/types/GaoChart";
-import { formatMoney } from "@/pages/product/component/chartUtils";
+import { buildPieChartOption, formatChartYuan, getNumber } from "@/pages/product/component/chartUtils";
-
+import { useStoreChart } from "@/pages/store/component/useStoreChart";
-type DetailItem = {
-	label: string;
-	value: string;
-};
 
 defineOptions({
 	name: "OrderReceivableCard"
@@ -30,13 +22,40 @@ const props = defineProps<{
 	receivable: GaoSalesOrderReceivableStatView;
 }>();
 
-const detailList = computed<DetailItem[]>(() => [
+const chartOption = computed<EChartsOption>(() => {
-	{ label: "有效收款", value: formatMoney(props.receivable.paidAmount) },
+	const pendingPaidAmount = getNumber(props.receivable.pendingPaidAmount);
-	{ label: "待核销", value: formatMoney(props.receivable.pendingPaidAmount) },
+	const unpaidAmount = getNumber(props.receivable.unpaidAmount);
-	{ label: "未收", value: formatMoney(props.receivable.unpaidAmount) },
+	return {
-	{ label: "有效退款", value: formatMoney(props.receivable.refundedAmount) },
+		...buildPieChartOption(),
-	{ label: "净收款", value: formatMoney(props.receivable.netPaidAmount) }
+		tooltip: {
-]);
+			trigger: "item",
+			confine: true,
+			formatter: params => {
+				const item = Array.isArray(params) ? params[0] : params;
+				return item
+					? `${item.name}：${formatChartYuan(Number(item.value))} 元（${item.percent}%）`
+					: "";
+			}
+		},
+		series: [
+			{
+				name: "成交金额",
+				type: "pie",
+				radius: ["0%", "58%"],
+				center: ["50%", "44%"],
+				label: { color: "#52607a", formatter: "{b} {d}%" },
+				data: [
+					{ name: "净收款", value: getNumber(props.receivable.netPaidAmount) / 100 },
+					{ name: "有效退款", value: getNumber(props.receivable.refundedAmount) / 100 },
+					{ name: "待核销", value: pendingPaidAmount / 100 },
+					{ name: "待收余额", value: Math.max(0, unpaidAmount - pendingPaidAmount) / 100 }
+				]
+			}
+		]
+	};
+});
+
+const { chartElement } = useStoreChart(chartOption);
 </script>
 
 <style scoped lang="less">
@@ -65,30 +84,9 @@ const detailList = computed<DetailItem[]>(() => [
 		font-size: .6875rem;
 	}
 
-	.receivable-list {
+	.chart {
-		gap: .5rem;
+		width: 100%;
-		display: grid;
+		height: 15rem;
-		grid-template-columns: repeat(5, minmax(0, 1fr));
-	}
-
-	.receivable-item {
-		padding: .625rem .5rem;
-		background: rgba(241, 245, 249, .8);
-		border-radius: .75rem;
-
-		span {
-			color: #64748b;
-			display: block;
-			font-size: .6875rem;
-		}
-
-		strong {
-			color: #0f172a;
-			margin-top: .25rem;
-			display: block;
-			font-size: .8125rem;
-			font-weight: 700;
-		}
 	}
 }
 
@@ -101,23 +99,6 @@ const detailList = computed<DetailItem[]>(() => [
 			color: #e2e8f0;
 		}
 
-		.receivable-item {
-			background: rgba(30, 41, 59, .88);
-
-			span {
-				color: #94a3b8;
-			}
-
-			strong {
-				color: #e2e8f0;
-			}
-		}
-	}
-}
-
-@media (max-width: 42rem) {
-	.receivable-list {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
 }
 </style>

src/pages/product/component/OrderStatusChart.vue

@@ -4,7 +4,7 @@
 		caption="当前订单快照"
 		:option="chartOption"
 		:loading="loading"
-		height="17rem"
+		height="6rem"
 	/>
 </template>
 
@@ -27,11 +27,19 @@ const chartOption = computed<EChartsOption>(() => {
 	const list = props.list;
 	return {
 		...buildHorizontalBarOption(list.map(item => getOrderStatusText(item.status))),
-		legend: { show: false },
+		grid: {
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			showLabel: false
+		},
 		series: [{
-			name: "订单数",
 			type: "bar",
-			data: list.map(item => getNumber(item.orderCount))
+			data: list.map(item => ({
+				value: getNumber(item.orderCount),
+				itemStyle: { color: getOrderStatusColor(item.status) }
+			}))
 		}]
 	};
 });
@@ -39,4 +47,12 @@ const chartOption = computed<EChartsOption>(() => {
 function getOrderStatusText(value?: string): string {
 	return ({ ACTIVE: "进行中", FULFILLED: "已完成", CANCELLED: "已取消" } as Record<string, string>)[value || ""] || "未知状态";
 }
+
+function getOrderStatusColor(value?: string): string {
+	return ({
+		ACTIVE: "#EB9C25",
+		FULFILLED: "#0F766E",
+		CANCELLED: "#F33434"
+	} as Record<string, string>)[value || ""] || "#94A3B8";
+}
 </script>

src/pages/product/component/OrderTypeChart.vue

@@ -4,7 +4,7 @@
 		caption="按订单数量"
 		:option="chartOption"
 		:loading="loading"
-		height="17rem"
+		height="10rem"
 	/>
 </template>
 

src/pages/product/component/ProductFulfillmentTrendChart.vue

@@ -14,6 +14,7 @@ import type { EChartsOption } from "echarts";
 import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoProductFulfillmentDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";
 
 defineOptions({
 	name: "ProductFulfillmentTrendChart"
@@ -25,14 +26,17 @@ const props = defineProps<{
 	loading: boolean;
 }>();
 
-function buildOption(visibleDateTextList: string[]): EChartsOption {
+const dateTextList = computed(() => props.dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
+
+function buildOption(visibleDateTextList: string[], chartWidth: number): EChartsOption {
 	const labelList = visibleDateTextList.map(item => item.slice(5));
 	return {
 		...buildAxisChartOption(labelList),
 		xAxis: {
 			type: "category",
 			data: labelList,
-			axisTick: { show: false },
+			axisTick: { show: true, length: 0, interval: 0 },
 			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
 		},
 		series: [
@@ -40,6 +44,7 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 				name: "直接履约",
 				type: "bar",
 				stack: "fulfillment",
+				markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, chartWidth),
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.directBaseQuantity))
 			},
 			{

src/pages/product/component/ProductSalesTrendChart.vue

@@ -14,6 +14,7 @@ import type { EChartsOption } from "echarts";
 import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoProductSalesDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";
 
 defineOptions({
 	name: "ProductSalesTrendChart"
@@ -25,33 +26,57 @@ const props = defineProps<{
 	loading: boolean;
 }>();
 
-function buildOption(visibleDateTextList: string[]): EChartsOption {
+const dateTextList = computed(() => props.dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
+
+function buildOption(visibleDateTextList: string[], chartWidth: number): EChartsOption {
 	const labelList = visibleDateTextList.map(item => item.slice(5));
 	return {
 		...buildAxisChartOption(labelList),
 		xAxis: {
 			type: "category",
 			data: labelList,
-			axisTick: { show: false },
+			axisTick: { show: true, length: 0, interval: 0 },
 			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
 		},
+		yAxis: [
+			{
+				type: "value",
+				name: "基础单位",
+				minInterval: 1,
+				axisLabel: { color: "#52607a" },
+				splitLine: { lineStyle: { color: "rgba(148, 163, 184, .2)" } }
+			},
+			{
+				type: "value",
+				name: "订单",
+				position: "right",
+				minInterval: 1,
+				axisLabel: { color: "#52607a" },
+				splitLine: { show: false }
+			}
+		],
 		series: [
 			{
 				name: "直接销量",
 				type: "bar",
 				stack: "quantity",
+				yAxisIndex: 0,
+				markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, chartWidth),
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.directBaseQuantity))
 			},
 			{
 				name: "套餐权益",
 				type: "bar",
 				stack: "quantity",
+				yAxisIndex: 0,
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.packageBaseQuantity))
 			},
 			{
 				name: "订单数",
 				type: "line",
 				smooth: true,
+				yAxisIndex: 1,
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.orderCount))
 			}
 		]

src/pages/product/component/ProductStockHealthTable.vue

@@ -21,7 +21,6 @@
 					<tr v-for="item in sortedList" :key="item.productId">
 						<td>
 							<div class="product-name" v-text="item.productName || '未命名产品'" />
-							<div class="product-type" v-text="getProductTypeText(item.productType)" />
 							<div v-if="hasLowStockSku(item)" class="sku-list">
 								<div v-for="sku in getLowStockSkuList(item)" :key="`${sku.skuId}-${sku.skuCode}`" class="sku-item">
 									<span v-text="getSkuName(sku)" />
@@ -73,10 +72,6 @@ function getLowStockSkuList(item: GaoProductStockHealthView): GaoProductSkuStock
 function getSkuName(item: GaoProductSkuStockHealthView): string {
 	return [item.skuName || "未命名规格", item.specSummary].filter(Boolean).join(" · ");
 }
-
-function getProductTypeText(value?: string): string {
-	return ({ SERVICE: "服务", GOODS: "商品", CONSUMABLE: "耗材" } as Record<string, string>)[value || ""] || "未分类";
-}
 </script>
 
 <style scoped lang="less">
@@ -118,14 +113,14 @@ function getProductTypeText(value?: string): string {
 
 	th {
 		color: #94a3b8;
-		padding: .5rem .375rem;
+		padding: .25rem;
 		text-align: left;
 		font-weight: 500;
 	}
 
 	td {
 		color: #334155;
-		padding: .625rem .375rem;
+		padding: .25rem;
 		border-top: 1px solid rgba(148, 163, 184, .16);
 	}
 
@@ -135,7 +130,7 @@ function getProductTypeText(value?: string): string {
 	}
 
 	.product-name {
-		max-width: 7rem;
+		max-width: 6rem;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}

src/pages/product/component/ProductStockMovementChart.vue

@@ -14,6 +14,7 @@ import type { EChartsOption } from "echarts";
 import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoProductStockMovementDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";
 
 defineOptions({
 	name: "ProductStockMovementChart"
@@ -25,26 +26,33 @@ const props = defineProps<{
 	loading: boolean;
 }>();
 
-function buildOption(visibleDateTextList: string[]): EChartsOption {
+const dateTextList = computed(() => props.dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
+
+function buildOption(visibleDateTextList: string[], chartWidth: number): EChartsOption {
 	const labelList = visibleDateTextList.map(item => item.slice(5));
 	return {
 		...buildAxisChartOption(labelList),
 		xAxis: {
 			type: "category",
 			data: labelList,
-			axisTick: { show: false },
+			axisLine: { onZero: true },
+			axisTick: { show: true, length: 0, interval: 0 },
 			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
 		},
 		series: [
 			{
 				name: "入库",
 				type: "bar",
-				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.inQuantity))
+				stack: "stock-movement",
+				markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, chartWidth),
+				data: visibleDateTextList.map(dateText => Math.abs(getNumber(getDailyItem(props.list, dateText)?.inQuantity)))
 			},
 			{
 				name: "出库",
 				type: "bar",
-				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.outQuantity))
+				stack: "stock-movement",
+				data: visibleDateTextList.map(dateText => -Math.abs(getNumber(getDailyItem(props.list, dateText)?.outQuantity)))
 			},
 			{
 				name: "库存净变化",
@@ -55,12 +63,12 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 			{
 				name: "新增预占",
 				type: "line",
-				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.reserveQuantity))
+				data: visibleDateTextList.map(dateText => Math.abs(getNumber(getDailyItem(props.list, dateText)?.reserveQuantity)))
 			},
 			{
 				name: "释放预占",
 				type: "line",
-				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.releaseQuantity))
+				data: visibleDateTextList.map(dateText => -Math.abs(getNumber(getDailyItem(props.list, dateText)?.releaseQuantity)))
 			}
 		]
 	};

src/pages/product/component/chartUtils.ts

@@ -56,10 +56,10 @@ export function buildHorizontalBarOption(categoryList: string[]): EChartsOption
 	return {
 		color: chartColorList,
 		grid: {
-			top: 12,
+			top: 32,
-			left: 8,
+			left: 0,
-			right: 18,
+			right: 0,
-			bottom: 12,
+			bottom: 0,
 			containLabel: true
 		},
 		legend: {

src/pages/salesOrder/FundRecordList.vue

@@ -41,7 +41,7 @@
 				<t-dropdown-item
 					v-if="!isSelfReceiveOnly"
 					v-model="operationType"
-					label="操作类型"
+					:label="operationFilterLabel"
 					:options="operationOptions"
 					@change="selectOperation"
 				/>
@@ -89,9 +89,8 @@
 					</template>
 					<template #title>
 						<div class="title">
-							<span class="customer" v-text="getCustomerText(item)" />
+							<span class="customer clip-text" v-text="getCustomerText(item)" />
-							<div class="operation">
+							<span class="type" :class="getOperationClass(item.operationType)" v-text="getFundOperationText(item.operationType)" />
-								<span v-text="getFundOperationText(item.operationType)" />
 							<t-tag
 								size="small"
 								:content="getRecordStatusText(item)"
@@ -99,7 +98,6 @@
 								:theme="getRecordStatusTheme(item)"
 							/>
 						</div>
-						</div>
 					</template>
 					<template #description>
 						<div class="description">
@@ -217,7 +215,7 @@ const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 	{ label: "全部", value: "all" },
 	{ label: "自定义范围", value: "custom" }
 ];
-const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText(route.query.dateType), dateOptions, "thisWeek"));
+const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText(route.query.dateType), dateOptions, "all"));
 const dateRange = ref<[string, string]>(parseDateRange(dateFilterType.value));
 const startDraft = ref("");
 const endDraft = ref("");
@@ -233,6 +231,7 @@ const operationOptions = [
 	{ label: "确认无需退款", value: "CONFIRM_NO_REFUND" },
 	{ label: "资金冲正", value: "REVOKE" }
 ];
+const operationFilterLabel = computed(() => operationOptions.find(item => item.value === operationType.value)?.label || "操作类型");
 const statusOptions = [
 	{ label: "全部状态", value: "ALL" },
 	{ label: "待核销", value: "PENDING" },
@@ -462,6 +461,15 @@ function getCustomerText(item: FundRecord): string {
 	return item.customer?.name || item.customer?.code || item.customerId || "未知客户";
 }
 
+function getOperationClass(type?: FundOperationType): string {
+	return ({
+		RECEIVE: "receive",
+		REFUND: "refund",
+		CONFIRM_NO_REFUND: "confirm-no-refund",
+		REVOKE: "revoke"
+	} as Record<string, string>)[type || ""] || "unknown";
+}
+
 function getStatusTheme(statusValue?: FundRecordStatus): "success" | "warning" | "danger" | "default" {
 	return statusValue === "VERIFIED" ? "success" : statusValue === "PENDING" ? "warning" : statusValue === "REJECTED" ? "danger" : "default";
 }
@@ -553,10 +561,6 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 	}
 
-	:deep(.t-pull-down-refresh) {
-		padding-top: .75rem;
-	}
-
 	.item {
 
 		.avatar {
@@ -565,25 +569,34 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 
 		.title {
-			gap: .5rem;
+			gap: .25rem;
 			display: flex;
 			font-size: .75rem;
 			align-items: center;
 			justify-content: space-between;
 
 			.customer {
-				min-width: 0;
-				overflow: hidden;
 				font-weight: 600;
-				white-space: nowrap;
-				text-overflow: ellipsis;
 			}
 
-			.operation {
+			.type {
-				gap: .5rem;
+				font-weight: 700;
-				display: flex;
+
-				flex-shrink: 0;
+				&.receive {
-				align-items: center;
+					color: #15803d;
+				}
+
+				&.refund {
+					color: #dc2626;
+				}
+
+				&.confirm-no-refund {
+					color: #2563eb;
+				}
+
+				&.revoke {
+					color: #7c3aed;
+				}
 			}
 		}
 
@@ -651,5 +664,23 @@ onUnmounted(() => navBarStore.clearRight());
 	.fallback {
 		background: #115e59;
 	}
+
+	.operation-type {
+		&.receive {
+			color: #86efac;
+		}
+
+		&.refund {
+			color: #fca5a5;
+		}
+
+		&.confirm-no-refund {
+			color: #93c5fd;
+		}
+
+		&.revoke {
+			color: #c4b5fd;
+		}
+	}
 }
 </style>

src/pages/setting/Help.vue

@@ -305,7 +305,7 @@ onMounted(async () => {
 
 		.search {
 			--td-button-border-radius: .75rem;
-			--td-input-vertical-padding: .25rem 1rem;
+			--td-input-vertical-padding: .5rem 1rem;
 
 			flex: 1;
 			border: 1px solid var(--td-component-border);

src/pages/store/StoreDataCharts.vue

@@ -15,11 +15,17 @@
 			<store-event-structure-chart v-entrance-transition="280" :date-text-list="dateTextList" />
 		</template>
 		<template v-else>
+			<template v-if="chartMode === 'customer'">
 				<store-customer-growth-chart v-entrance-transition="70" :date-text-list="dateTextList" />
 				<store-customer-age-chart v-entrance-transition="140" />
 				<store-customer-disease-word-cloud-chart v-entrance-transition="210" />
 				<store-customer-gender-chart v-entrance-transition="280" />
 			</template>
+			<template v-else>
+				<store-point-daily-trend-chart v-entrance-transition="70" :date-text-list="dateTextList" />
+				<store-point-redemption-rank-chart v-entrance-transition="140" :date-text-list="dateTextList" />
+			</template>
+		</template>
 	</div>
 </template>
 
@@ -34,6 +40,8 @@ import StoreEventRecordCalendarSection from "@/pages/store/component/StoreEventR
 import StoreEventRecordTrendChart from "@/pages/store/component/StoreEventRecordTrendChart.vue";
 import StoreEventRecordNumberValueChart from "@/pages/store/component/StoreEventRecordNumberValueChart.vue";
 import StoreEventStructureChart from "@/pages/store/component/StoreEventStructureChart.vue";
+import StorePointDailyTrendChart from "@/pages/store/component/StorePointDailyTrendChart.vue";
+import StorePointRedemptionRankChart from "@/pages/store/component/StorePointRedemptionRankChart.vue";
 import { permissionCodes } from "@/utils/permission";
 import type { EventRecordCalendarListPayload } from "@/components/EventRecordCalendar.vue";
 
@@ -41,14 +49,15 @@ defineOptions({
 	name: "StoreDataCharts"
 });
 
-type ChartMode = "event" | "customer";
+type ChartMode = "event" | "customer" | "point";
 
 // ---------- 图表切换 ----------
 
 const chartMode = ref<ChartMode>("event");
 const chartModeOptions = [
 	{ value: "event" as ChartMode, label: "事件登记图表" },
-	{ value: "customer" as ChartMode, label: "客户分析图表" }
+	{ value: "customer" as ChartMode, label: "客户分析图表" },
+	{ value: "point" as ChartMode, label: "积分分析图表" }
 ];
 
 // ---------- 数据源 ----------

src/pages/store/component/StoreCustomerGrowthChart.vue

@@ -20,6 +20,7 @@ import StoreChartAPI from "@/api/StoreChartAPI";
 import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
 import type { CustomerDailyStatCustomerView, CustomerDailyStatView } from "@/types/Customer";
 import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";
 
 const props = defineProps<{
 	dateTextList: string[];
@@ -31,6 +32,7 @@ const MAX_TOOLTIP_CUSTOMER_COUNT = 24;
 
 const statList = ref<CustomerDailyStatView[]>([]);
 let statRequestId = 0;
+const chartWidth = ref(window.innerWidth);
 
 // ---------- 图表窗口 ----------
 
@@ -43,8 +45,21 @@ const {
 	visibleDateTextList,
 	handleSliderChange
 } = useStoreChartWindow(dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
 const chartOption = computed<EChartsOption>(() => ({
 	...buildStoreBaseChartOption(visibleDateTextList.value),
+	xAxis: {
+		type: "category",
+		data: visibleDateTextList.value.map(item => item.slice(5)),
+		axisTick: {
+			show: true,
+			length: 0,
+			interval: 0
+		},
+		axisLabel: {
+			color: "#52607a"
+		}
+	},
 	grid: {
 		top: 48,
 		left: 0,
@@ -90,6 +105,7 @@ const chartOption = computed<EChartsOption>(() => ({
 			name: "新客户量",
 			type: "bar",
 			yAxisIndex: 1,
+			markArea: buildRestDayMarkArea(visibleDateTextList.value, restDaySet.value, chartWidth.value),
 			data: visibleDateTextList.value.map(dateText => getDailyStat(dateText)?.newCustomerCount || 0)
 		}
 	],
@@ -101,6 +117,20 @@ const chartOption = computed<EChartsOption>(() => ({
 }));
 
 const { chartElement } = useStoreChart(chartOption);
+let resizeObserver: ResizeObserver | undefined;
+
+onMounted(() => {
+	resizeObserver = new window.ResizeObserver(updateChartWidth);
+	if (chartElement.value) {
+		resizeObserver.observe(chartElement.value);
+		updateChartWidth();
+	}
+});
+
+onBeforeUnmount(() => {
+	resizeObserver?.disconnect();
+	resizeObserver = undefined;
+});
 
 watch(() => props.dateTextList, async () => {
 	await loadCustomerDailyStat();
@@ -125,6 +155,10 @@ async function loadCustomerDailyStat(): Promise<void> {
 	}
 }
 
+function updateChartWidth(): void {
+	chartWidth.value = chartElement.value?.clientWidth || window.innerWidth;
+}
+
 function getDailyStat(dateText: string): CustomerDailyStatView | undefined {
 	const dateValue = Number(dateText.replaceAll("-", ""));
 	return statList.value.find(item => item.dateValue === dateValue);

src/pages/store/component/StoreEventRecordTrendChart.vue

@@ -19,13 +19,13 @@
 
 <script setup lang="ts">
 import { Time } from "timi-web";
-import type { EChartsOption, MarkAreaComponentOption } from "echarts";
+import type { EChartsOption } from "echarts";
 import StoreChartAPI from "@/api/StoreChartAPI";
 import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
 import type { EventItem } from "@/types/EventItem";
-import type { StoreBusinessDay, StoreEventRecordDailyStatView } from "@/types/Store";
+import type { StoreEventRecordDailyStatView } from "@/types/Store";
-import { getCurrentStoreId } from "@/utils/store";
 import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";
 
 const props = defineProps<{
 	dateTextList: string[];
@@ -35,14 +35,13 @@ const props = defineProps<{
 
 const eventList = ref<EventItem[]>([]);
 const statMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
-const restDaySet = ref<Set<number>>(new Set());
 let statRequestId = 0;
-let restDayRequestId = 0;
 
 // ---------- 图表窗口 ----------
 
 const chartWidth = ref(window.innerWidth);
 const dateTextList = computed(() => props.dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
 const {
 	rangeText,
 	showSlider,
@@ -54,14 +53,6 @@ const {
 const legendRowCount = computed(() => countLegendRows(eventList.value.map(event => event.name || "未命名事件")));
 const chartHeight = computed(() => `${16 + Math.max(0, legendRowCount.value - 1) * 1.5}rem`);
 const legendBottom = computed(() => 20 + legendRowCount.value * 24);
-const showRestDayLabel = computed(() => {
-	const dateCount = visibleDateTextList.value.length;
-	if (!dateCount) {
-		return false;
-	}
-	const gridWidth = Math.max(0, chartWidth.value - 24);
-	return 24 <= gridWidth / dateCount;
-});
 const chartStyle = computed(() => ({
 	height: chartHeight.value
 }));
@@ -90,7 +81,7 @@ const chartOption = computed<EChartsOption>(() => ({
 		name: event.name || "未命名事件",
 		type: "bar",
 		stack: "record",
-		markArea: index < 1 ? buildRestDayMarkArea() : undefined,
+		markArea: index < 1 ? buildRestDayMarkArea(visibleDateTextList.value, restDaySet.value, chartWidth.value) : undefined,
 		itemStyle: getEventColor(event) ? {
 			color: getEventColor(event)
 		} : undefined,
@@ -102,10 +93,7 @@ const { chartElement } = useStoreChart(chartOption);
 let resizeObserver: ResizeObserver | undefined;
 
 watch(() => props.dateTextList, async () => {
-	await Promise.all([
+	await loadDailyStat();
-		loadDailyStat(),
-		loadRestDays()
-	]);
 }, {
 	deep: true
 });
@@ -117,10 +105,7 @@ onMounted(async () => {
 		updateChartWidth();
 	}
 	await loadEvents();
-	await Promise.all([
+	await loadDailyStat();
-		loadDailyStat(),
-		loadRestDays()
-	]);
 });
 
 onBeforeUnmount(() => {
@@ -164,60 +149,6 @@ function getRecordData(eventId: string, dateText: string): number | null {
 	return restDaySet.value.has(getDateValue(dateText)) ? null : countRecordByEventAndDate(eventId, dateText);
 }
 
-function buildRestDayMarkArea(): MarkAreaComponentOption | undefined {
-	const data: NonNullable<MarkAreaComponentOption["data"]> = [];
-	for (let dateIndex = 0; dateIndex < visibleDateTextList.value.length; dateIndex++) {
-		const dateText = visibleDateTextList.value[dateIndex];
-		if (restDaySet.value.has(getDateValue(dateText))) {
-			data.push([{ name: "休", xAxis: dateIndex }, { xAxis: dateIndex }]);
-		}
-	}
-	if (!data.length) {
-		return undefined;
-	}
-	return {
-		silent: true,
-		itemStyle: {
-			color: "rgba(148, 163, 184, .12)"
-		},
-		label: {
-			color: "#64748b",
-			fontSize: 12,
-			formatter: "休",
-			position: "insideBottom",
-			show: showRestDayLabel.value
-		},
-		data
-	};
-}
-
-async function loadRestDays(): Promise<void> {
-	const requestId = ++restDayRequestId;
-	const dateList = props.dateTextList;
-	const storeId = getCurrentStoreId();
-	if (!storeId || !dateList.length) {
-		restDaySet.value = new Set();
-		return;
-	}
-
-	try {
-		const list = await StoreChartAPI.businessDayCalendar(storeId, getDateValue(dateList[0]), getDateValue(dateList[dateList.length - 1]));
-		if (requestId === restDayRequestId) {
-			restDaySet.value = new Set(getRestDayList(list));
-		}
-	} catch {
-		if (requestId === restDayRequestId) {
-			restDaySet.value = new Set();
-		}
-	}
-}
-
-function getRestDayList(list: StoreBusinessDay[]): number[] {
-	return list
-		.filter(item => item.status === "CLOSED" && item.dateValue)
-		.map(item => item.dateValue as number);
-}
-
 function getEventColor(event: EventItem): string | undefined {
 	return event.color || undefined;
 }

src/pages/store/component/StorePointDailyTrendChart.vue

@@ -0,0 +1,225 @@
+<template>
+	<section class="chart-section">
+		<div class="title">
+			<h2>每日积分变动趋势</h2>
+		</div>
+		<div ref="chartElement" class="chart" />
+		<div v-if="loading" class="center-tips">
+			<t-loading size="1.5rem" text="加载中" />
+		</div>
+		<chart-range-slider
+			v-if="showSlider"
+			:model-value="sliderValue"
+			:max="maxSliderValue"
+			:min-range="5"
+			:label="rangeText"
+			@change="handleSliderChange"
+		/>
+	</section>
+</template>
+
+<script setup lang="ts">
+import { Time } from "timi-web";
+import type { EChartsOption } from "echarts";
+import GaoPointChartAPI from "@/api/GaoPointChartAPI";
+import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
+import type { GaoPointDailyStatView } from "@/types/GaoChart";
+import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";
+
+defineOptions({
+	name: "StorePointDailyTrendChart"
+});
+
+const props = defineProps<{
+	dateTextList: string[];
+}>();
+
+const dateTextList = computed(() => props.dateTextList);
+const chartWidth = ref(window.innerWidth);
+const statList = ref<GaoPointDailyStatView[]>([]);
+const loading = ref(false);
+let statRequestId = 0;
+const { restDaySet } = useRestDayCalendar(dateTextList);
+const {
+	rangeText,
+	showSlider,
+	sliderValue,
+	maxSliderValue,
+	visibleDateTextList,
+	handleSliderChange
+} = useStoreChartWindow(dateTextList);
+const chartOption = computed<EChartsOption>(() => {
+	const labelList = visibleDateTextList.value.map(item => item.slice(5));
+	return {
+		...buildStoreBaseChartOption(visibleDateTextList.value),
+		grid: {
+			top: 32,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			containLabel: true
+		},
+		xAxis: {
+			type: "category",
+			data: labelList,
+			axisLine: { onZero: true },
+			axisTick: { show: true, length: 0, interval: 0 },
+			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
+		},
+		series: [
+			{
+				name: "获得积分",
+				type: "bar",
+				stack: "stock-movement",
+				markArea: buildRestDayMarkArea(visibleDateTextList.value, restDaySet.value, chartWidth.value),
+				data: visibleDateTextList.value.map(dateText => Math.abs(getNumber(getDailyItem(dateText)?.earnedPoints)))
+			},
+			{
+				name: "消耗积分",
+				type: "bar",
+				stack: "stock-movement",
+				data: visibleDateTextList.value.map(dateText => -Math.abs(getNumber(getDailyItem(dateText)?.consumedPoints)))
+			},
+			{
+				name: "获得与消耗差值",
+				type: "line",
+				smooth: true,
+				data: visibleDateTextList.value.map(dateText => getNumber(getDailyItem(dateText)?.netChangePoints))
+			}
+		]
+	};
+});
+const { chartElement } = useStoreChart(chartOption);
+let resizeObserver: ResizeObserver | undefined;
+
+watch(() => props.dateTextList, async () => {
+	await loadDailyStat();
+}, {
+	deep: true,
+	immediate: true
+});
+
+onMounted(() => {
+	resizeObserver = new window.ResizeObserver(updateChartWidth);
+	if (chartElement.value) {
+		resizeObserver.observe(chartElement.value);
+		updateChartWidth();
+	}
+});
+
+onBeforeUnmount(() => {
+	resizeObserver?.disconnect();
+	resizeObserver = undefined;
+});
+
+async function loadDailyStat(): Promise<void> {
+	if (!props.dateTextList.length) {
+		statRequestId++;
+		statList.value = [];
+		loading.value = false;
+		return;
+	}
+
+	const requestId = ++statRequestId;
+	loading.value = true;
+	try {
+		const list = await GaoPointChartAPI.dailyTrend({
+			beginAt: Time.toTimestamp(getDateStart(props.dateTextList[0])),
+			endAt: Time.toTimestamp(getDateEnd(props.dateTextList[props.dateTextList.length - 1]))
+		});
+		if (requestId === statRequestId) {
+			statList.value = list;
+		}
+	} finally {
+		if (requestId === statRequestId) {
+			loading.value = false;
+		}
+	}
+}
+
+function getDailyItem(dateText: string): GaoPointDailyStatView | undefined {
+	const dateValue = Number(dateText.replaceAll("-", ""));
+	return statList.value.find(item => item.dateValue === dateValue);
+}
+
+function getNumber(value?: number): number {
+	return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+
+function updateChartWidth(): void {
+	chartWidth.value = chartElement.value?.clientWidth || window.innerWidth;
+}
+
+function getDateStart(dateText: string): Date {
+	const [year, month, day] = dateText.split("-").map(Number);
+	return new Date(year, month - 1, day, 0, 0, 0, 0);
+}
+
+function getDateEnd(dateText: string): Date {
+	const [year, month, day] = dateText.split("-").map(Number);
+	return new Date(year, month - 1, day, 23, 59, 59, 999);
+}
+</script>
+
+<style scoped lang="less">
+.chart-section {
+	padding: 1rem;
+	position: relative;
+	background: rgba(255, 255, 255, .92);
+	box-shadow: var(--td-shadow-1);
+	border-radius: 1.25rem;
+
+	.title {
+		gap: .5rem;
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+
+		h2 {
+			margin: 0 0 .875rem 0;
+			color: #0f172a;
+			font-size: 1rem;
+			font-weight: 700;
+		}
+
+		.caption {
+			color: #94a3b8;
+			font-size: .6875rem;
+		}
+	}
+
+	.chart {
+		width: 100%;
+		height: 17rem;
+	}
+
+	.center-tips {
+		top: 50%;
+		left: 0;
+		right: 0;
+		position: absolute;
+		display: flex;
+		justify-content: center;
+		transform: translateY(-50%);
+		pointer-events: none;
+	}
+}
+
+:global(html.theme-dark) {
+	.chart-section {
+		background: rgba(15, 23, 42, .88);
+		box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+
+		.title {
+			h2 {
+				color: #e2e8f0;
+			}
+
+			.caption {
+				color: #94a3b8;
+			}
+		}
+	}
+}
+</style>

src/pages/store/component/StorePointRedemptionRankChart.vue

@@ -0,0 +1,95 @@
+<template>
+	<date-range-chart-card
+		title="积分兑换排行"
+		:option="chartOption"
+		:loading="loading"
+		height="20rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import { Time } from "timi-web";
+import type { EChartsOption } from "echarts";
+import GaoPointChartAPI from "@/api/GaoPointChartAPI";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
+import type { GaoPointRedemptionProductRankView } from "@/types/GaoChart";
+import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "StorePointRedemptionRankChart"
+});
+
+const props = defineProps<{
+	dateTextList: string[];
+}>();
+
+const rankList = ref<GaoPointRedemptionProductRankView[]>([]);
+const loading = ref(false);
+let rankRequestId = 0;
+const chartOption = computed<EChartsOption>(() => {
+	const list = rankList.value.slice(0, 10);
+	return {
+		...buildHorizontalBarOption(list.map(getProductName)),
+		series: [
+			{
+				name: "兑换积分",
+				type: "bar",
+				barMaxWidth: 20,
+				label: {
+					show: true,
+					position: "right",
+					color: "#52607a",
+					formatter: "{c}"
+				},
+				data: list.map(item => getNumber(item.pointCost))
+			}
+		]
+	};
+});
+
+watch(() => props.dateTextList, async () => {
+	await loadRankList();
+}, {
+	deep: true,
+	immediate: true
+});
+
+async function loadRankList(): Promise<void> {
+	if (!props.dateTextList.length) {
+		rankRequestId++;
+		rankList.value = [];
+		loading.value = false;
+		return;
+	}
+
+	const requestId = ++rankRequestId;
+	loading.value = true;
+	try {
+		const list = await GaoPointChartAPI.redemptionProductRank({
+			beginAt: Time.toTimestamp(getDateStart(props.dateTextList[0])),
+			endAt: Time.toTimestamp(getDateEnd(props.dateTextList[props.dateTextList.length - 1]))
+		});
+		if (requestId === rankRequestId) {
+			rankList.value = list.slice(0, 10);
+		}
+	} finally {
+		if (requestId === rankRequestId) {
+			loading.value = false;
+		}
+	}
+}
+
+function getProductName(item: GaoPointRedemptionProductRankView): string {
+	return item.productName || "未命名产品";
+}
+
+function getDateStart(dateText: string): Date {
+	const [year, month, day] = dateText.split("-").map(Number);
+	return new Date(year, month - 1, day, 0, 0, 0, 0);
+}
+
+function getDateEnd(dateText: string): Date {
+	const [year, month, day] = dateText.split("-").map(Number);
+	return new Date(year, month - 1, day, 23, 59, 59, 999);
+}
+</script>

src/pages/store/component/useRestDayCalendar.ts

@@ -0,0 +1,97 @@
+import { onMounted, watch } from "vue";
+import type { ComputedRef } from "vue";
+import type { MarkAreaComponentOption } from "echarts";
+import StoreChartAPI from "@/api/StoreChartAPI";
+import type { StoreBusinessDay } from "@/types/Store";
+import { getCurrentStoreId } from "@/utils/store";
+
+export function useRestDayCalendar(dateTextList: ComputedRef<string[]>) {
+	const restDaySet = ref<Set<number>>(new Set());
+	let requestId = 0;
+
+	watch(dateTextList, async () => {
+		await loadRestDays();
+	}, { deep: true });
+	onMounted(async () => {
+		await loadRestDays();
+	});
+
+	async function loadRestDays(): Promise<void> {
+		const currentRequestId = ++requestId;
+		const dateList = dateTextList.value;
+		const storeId = getCurrentStoreId();
+		if (!storeId || !dateList.length) {
+			restDaySet.value = new Set();
+			return;
+		}
+
+		try {
+			const businessDayList = await StoreChartAPI.businessDayCalendar(
+				storeId,
+				getDateValue(dateList[0]),
+				getDateValue(dateList[dateList.length - 1])
+			);
+			if (currentRequestId === requestId) {
+				restDaySet.value = new Set(getRestDayList(businessDayList));
+			}
+		} catch {
+			if (currentRequestId === requestId) {
+				restDaySet.value = new Set();
+			}
+		}
+	}
+
+	return {
+		restDaySet
+	};
+}
+
+export function buildRestDayMarkArea(
+	dateTextList: string[],
+	restDaySet: ReadonlySet<number>,
+	chartWidth: number
+): MarkAreaComponentOption | undefined {
+	const data: NonNullable<MarkAreaComponentOption["data"]> = [];
+	let restDayBeginIndex = -1;
+	for (let dateIndex = 0; dateIndex < dateTextList.length; dateIndex++) {
+		const dateText = dateTextList[dateIndex];
+		const isRestDay = Boolean(dateText && restDaySet.has(getDateValue(dateText)));
+		if (isRestDay && restDayBeginIndex < 0) {
+			restDayBeginIndex = dateIndex;
+		} else if (!isRestDay && 0 <= restDayBeginIndex) {
+			data.push([{ name: "休", xAxis: restDayBeginIndex }, { xAxis: dateIndex - 1 }]);
+			restDayBeginIndex = -1;
+		}
+	}
+	if (0 <= restDayBeginIndex) {
+		data.push([{ name: "休", xAxis: restDayBeginIndex }, { xAxis: dateTextList.length - 1 }]);
+	}
+	if (!data.length) {
+		return undefined;
+	}
+	return {
+		silent: true,
+		animation: false,
+		itemStyle: {
+			color: "rgba(148, 163, 184, .12)"
+		},
+		label: {
+			color: "#64748b",
+			fontSize: 12,
+			formatter: "休",
+			position: "insideBottom",
+			show: 0 < dateTextList.length && 24 <= Math.max(0, chartWidth - 24) / dateTextList.length
+		},
+		data
+	};
+}
+
+function getRestDayList(list: StoreBusinessDay[]): number[] {
+	return list
+		.filter(item => item.status === "CLOSED" && item.dateValue)
+		.map(item => item.dateValue as number);
+}
+
+function getDateValue(dateText: string): number {
+	return Number(dateText.replaceAll("-", ""));
+}

src/pages/tabs/ProductTab.vue

@@ -97,7 +97,7 @@ const menuGroupList = computed<MenuGroup[]>(() => [
 			{
 				icon: "undertake-delivery",
 				path: "/management/order-fulfillments",
-				title: "统一履约",
+				title: "履约记录",
 				visible: userStore.hasPermissions(permissionCodes.orderFulfillment.read)
 			},
 			{

src/pages/tag/TagList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="corePermissionCodes.tag.read" class="tag-list">
-		<div class="header bg-white">
+		<div class="filters glass">
 			<t-input
 				v-model.trim="keyword"
 				class="search"
@@ -274,12 +274,11 @@ onUnmounted(() => {
 .tag-list {
 	padding: var(--app-nav-height) 0 2rem 0;
 
-	.header {
+	.filters {
 		top: var(--app-nav-height);
 		z-index: 10;
 		padding: .5rem;
 		position: sticky;
-		box-shadow: var(--td-shadow-1);
 
 		.search {
 			border: 1px solid var(--td-component-border);

src/router/routes/fulfillmentRoutes.ts

@@ -5,7 +5,7 @@ function meta(title: string, depth = 3): RouteRecordRaw["meta"] {
 }
 
 export default [
-	{ path: "/management/order-fulfillments", name: "OrderFulfillmentList", component: () => import("@/pages/fulfillment/OrderFulfillmentList.vue"), meta: meta("统一履约") },
+	{ path: "/management/order-fulfillments", name: "OrderFulfillmentList", component: () => import("@/pages/fulfillment/OrderFulfillmentList.vue"), meta: meta("履约记录") },
 	{ path: "/management/order-fulfillments/create", name: "OrderFulfillmentCreate", component: () => import("@/pages/fulfillment/OrderFulfillmentCreate.vue"), meta: meta("创建履约单", 4) },
 	{ path: "/management/order-fulfillments/:id", name: "OrderFulfillmentDetail", component: () => import("@/pages/fulfillment/OrderFulfillmentDetail.vue"), meta: meta("履约单详情", 4) }
 ] as RouteRecordRaw[];

src/store/permissionSettingsStore.ts

@@ -1,6 +1,9 @@
 import { defineStore } from "pinia";
 import { PermissionAPI } from "timi-web-api/api/PermissionAPI";
 import { RoleAPI } from "timi-web-api/api/RoleAPI";
+import { useUserStore } from "timi-web-api";
+import { GaoRoleAPI } from "@/api/GaoRoleAPI";
+import { coreRoleCodes } from "@/utils/permission";
 import type { ModuleCode, PermissionPayload, Role as UserRole } from "timi-web-api/types";
 import type {
 	Permission,
@@ -58,6 +61,7 @@ function createEmptyPermission(): Permission {
 }
 
 export const usePermissionSettingsStore = defineStore("permission-settings", () => {
+	const userStore = useUserStore();
 	const roleList = ref<Role[]>([]);
 	const permissionList = ref<Permission[]>([]);
 	const manageableRoleList = ref<Role[]>([]);
@@ -72,6 +76,24 @@ export const usePermissionSettingsStore = defineStore("permission-settings", ()
 		return roots.flatMap(item => buildRoleTree(item.id, 0, new Set<string>()));
 	});
 
+	async function loadRoleList(): Promise<Role[]> {
+		if (!userStore.hasRoles(coreRoleCodes.admin)) {
+			return (await GaoRoleAPI.managementList()).map(normalizeRole);
+		}
+
+		const result = await RoleAPI.list({
+			index: 0,
+			size: pageSize,
+			equalsExample: {
+				moduleCode: moduleCode
+			},
+			orderMap: {
+				code: "ASC"
+			}
+		});
+		return result.list.map(normalizeRole);
+	}
+
 	// ---------- 基础数据 ----------
 
 	async function loadAll(force = false): Promise<void> {
@@ -87,16 +109,7 @@ export const usePermissionSettingsStore = defineStore("permission-settings", ()
 		loading.value = true;
 		loadTask = (async () => {
 			const [roleResult, permissionResult] = await Promise.all([
-				RoleAPI.list({
+				loadRoleList(),
-					index: 0,
-					size: pageSize,
-					equalsExample: {
-						moduleCode: moduleCode
-					},
-					orderMap: {
-						code: "ASC"
-					}
-				}),
 				PermissionAPI.list({
 					index: 0,
 					size: pageSize,
@@ -108,7 +121,10 @@ export const usePermissionSettingsStore = defineStore("permission-settings", ()
 					}
 				})
 			]);
-			roleList.value = roleResult.list.map(normalizeRole);
+			roleList.value = roleResult;
+			if (!userStore.hasRoles(coreRoleCodes.admin)) {
+				manageableRoleList.value = roleResult;
+			}
 			permissionList.value = permissionResult.list;
 			loaded.value = true;
 		})();
@@ -125,6 +141,9 @@ export const usePermissionSettingsStore = defineStore("permission-settings", ()
 		if (!id) {
 			return createEmptyRole();
 		}
+		if (!userStore.hasRoles(coreRoleCodes.admin) && !roleList.value.some(item => item.id === id)) {
+			throw new Error("角色不在本店可管理范围内");
+		}
 
 		const role = normalizeRole(await RoleAPI.detail(id));
 		upsertLocalRole(role);

src/types/Fulfillment.ts

@@ -52,6 +52,7 @@ export type FulfillmentPage = {
 	storeId?: string;
 	salesOrderId?: string;
 	customerId?: string;
+	skuIdList?: string[];
 	status?: GaoFulfillmentStatus;
 	beginAt?: number;
 	endAt?: number;

src/types/GaoChart.ts

@@ -11,6 +11,26 @@ export type GaoProductChartReq = {
 	topN?: number;
 };
 
+export type GaoPointChartReq = {
+	storeId?: string;
+	beginAt: number;
+	endAt: number;
+};
+
+export type GaoPointDailyStatView = {
+	dateValue?: number;
+	earnedPoints?: number;
+	consumedPoints?: number;
+	netChangePoints?: number;
+};
+
+export type GaoPointRedemptionProductRankView = {
+	productId?: string;
+	productName?: string;
+	redemptionCount?: number;
+	pointCost?: number;
+};
+
 export type GaoSalesOrderChartReq = {
 	storeId?: string;
 	customerId?: string;

src/types/Product.ts

@@ -82,6 +82,9 @@ export type Product = {
 	categoryId?: string;
 	code: string;
 	name: string;
+	namePinyinFull?: string;
+	namePinyinInitial?: string;
+	namePinyinMixed?: string;
 	productType: ProductType;
 	stockEnabled: boolean;
 	status?: ProductStatus;