shiran/ApiServer-Web-admin_dashboard_pc
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(readme): 更新文档说明
Build and Deploy Vue3 / build (push) Successful in 1m29s
Details
Build and Deploy Vue3 / deploy (push) Successful in 1m14s
Details

Browse Source 
- 添加项目使用指南
- 完善API接口描述
- 修正错误的配置示例
This commit is contained in:
shiran
2026-04-23 17:43:31 +08:00
parent 2e073c2b87
commit c0daa6ed11
6 changed files with 2734 additions and 1366 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apiserver 前端.work.md
View File
pnpm-lock.yaml
Generated
+984 -931
View File
File diff suppressed because it is too large Load Diff
src/utils/dynamicUnit.js
+2 -6
View File
@@ -2,11 +2,10 @@
* Dynamic Unit System
*
* Handles dynamic unit conversion and display for product parameters.
* Base units: memory=KB, storage=GB, bandwidth=Mbps, cpu=Core
* Base units: storage=GB, bandwidth=Mbps, cpu=Core
*/
const UNIT_CONVERSIONS = {
memory: { KB: 1, MB: 1024, GB: 1024 * 1024, TB: 1024 * 1024 * 1024 },
cpu: { Core: 1 },
bandwidth_up: { Mbps: 1, Gbps: 1000 },
bandwidth_down: { Mbps: 1, Gbps: 1000 },
@@ -17,7 +16,6 @@ const UNIT_CONVERSIONS = {
}
const BASE_UNITS = {
memory: 'KB',
cpu: 'Core',
bandwidth_up: 'Mbps',
bandwidth_down: 'Mbps',
@@ -28,7 +26,6 @@ const BASE_UNITS = {
}
const DEFAULT_DISPLAY_UNITS = {
memory: 'MB',
cpu: 'Core',
bandwidth_up: 'Mbps',
bandwidth_down: 'Mbps',
@@ -39,7 +36,6 @@ const DEFAULT_DISPLAY_UNITS = {
}
const ARG_KEY_OPTIONS = [
{ label: '内存 (memory)', value: 'memory' },
{ label: 'CPU (cpu)', value: 'cpu' },
{ label: 'IPv4', value: 'ipv4' },
{ label: 'IPv6', value: 'ipv6' },
@@ -54,7 +50,7 @@ const ARG_KEY_OPTIONS = [
* @param {number} value
* @param {string} fromUnit
* @param {string} toUnit
* @param {string} argKey - e.g. 'memory', 'storage'
* @param {string} argKey - e.g. 'storage', 'bandwidth_up'
*/
export function convertUnit(value, fromUnit, toUnit, argKey) {
if (value === null || value === undefined || fromUnit === toUnit) return value
src/views/product/ProductGroup.vue
+587 -198
View File
@@ -91,12 +91,16 @@
>
<el-table-column prop="name" label="名称" min-width="320">
<template #default="{ row }">
<div class="group-name-cell" :style="{ paddingLeft: row.isProduct ? ((row.level - 1) * 24 + 24) + 'px' : (row.level - 1) * 24 + 'px' }">
<div
class="group-name-cell"
:class="{ 'is-clickable': row.isGroup || row.isProduct }"
:style="{ paddingLeft: row.isProduct ? ((row.level - 1) * 24 + 24) + 'px' : (row.level - 1) * 24 + 'px' }"
@click="handleNameCellClick(row)"
>
<!-- 分组的展开/收起按钮 -->
<span
v-if="row.isGroup"
<span
v-if="row.isGroup"
class="expand-icon"
@click="toggleExpand(row)"
>
<el-icon v-if="row._loading"><Loading /></el-icon>
<el-icon v-else :class="{ 'is-expanded': row._expanded }"><ArrowRight /></el-icon>
@@ -270,119 +274,134 @@
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="600px"
width="860px"
append-to-body
class="product-form-dialog"
>
<el-form
ref="groupFormRef"
:model="groupForm"
:rules="groupRules"
label-width="100px"
label-position="top"
class="product-form"
>
<el-form-item label="分组名称" prop="name">
<el-input v-model="groupForm.name" placeholder="请输入分组名称" />
</el-form-item>
<el-form-item label="父级分组" prop="parent_id">
<div class="recommend-user-selector">
<el-input
:model-value="selectedParentName"
:placeholder="isAddingChild ? '已自动设置父级分组' : '无父级（顶级分组）'"
readonly
:disabled="isAddingChild"
@click="!isAddingChild && (showParentSelector = true)"
<!-- 顶部：封面 + 基本信息 -->
<div class="product-form-header">
<!-- 左侧封面 -->
<div class="cover-uploader" @click="showCoverSelector = true">
<img v-if="groupForm.cover_url" :src="groupForm.cover_url" class="cover-image" alt="分组封面" />
<div v-else class="cover-placeholder">
<el-icon class="cover-placeholder-icon"><Folder /></el-icon>
<span class="cover-placeholder-text">点击选择封面</span>
</div>
<div class="cover-mask">
<el-icon><Picture /></el-icon>
<span>更换封面</span>
</div>
<el-button
v-if="groupForm.cover_id"
type="danger"
size="small"
circle
class="cover-clear-btn"
@click.stop="clearGroupCover"
>
<template #append>
<el-button @click="!isAddingChild && (showParentSelector = true)" :disabled="isAddingChild">
<el-icon><Search /></el-icon>
</el-button>
</template>
</el-input>
<el-button
v-if="groupForm.parent_id && !isAddingChild"
type="danger"
link
@click="clearParent"
class="clear-btn"
>
清除
<el-icon><Delete /></el-icon>
</el-button>
</div>
<div v-if="isAddingChild" class="form-tip">
添加子级时自动继承父级分组，不可修改
</div>
</el-form-item>
<el-form-item label="分组层级" prop="level">
<el-input :model-value="`${groupForm.level}级`" disabled style="width: 100%" />
<div class="form-tip">层级根据父级分组自动计算</div>
</el-form-item>
<el-form-item label="分组封面" prop="cover_id">
<div class="recommend-user-selector">
<el-input
:model-value="groupForm.cover_id ? `文件ID: ${groupForm.cover_id}` : ''"
placeholder="点击选择封面图片"
readonly
@click="showCoverSelector = true"
>
<template #append>
<el-button @click="showCoverSelector = true">
<el-icon><Search /></el-icon>
<!-- 右侧基本信息 -->
<div class="basic-fields">
<el-form-item label="分组名称" prop="name">
<el-input v-model="groupForm.name" placeholder="请输入分组名称" />
</el-form-item>
<el-form-item label="父级分组" prop="parent_id">
<div
class="group-picker"
:class="{ 'is-empty': !selectedParentName, 'is-disabled': isAddingChild }"
@click="!isAddingChild && (showParentSelector = true)"
>
<el-icon class="group-picker-icon"><Folder /></el-icon>
<span class="group-picker-text">
{{ selectedParentName || (isAddingChild ? '已自动设置父级分组' : '无父级（顶级分组）') }}
</span>
<el-button
v-if="groupForm.parent_id && !isAddingChild"
type="danger"
link
size="small"
class="group-picker-clear"
@click.stop="clearParent"
>
清除
</el-button>
</template>
</el-input>
<el-button
v-if="groupForm.cover_id"
type="danger"
link
@click="groupForm.cover_id = undefined"
class="clear-btn"
>
清除
</el-button>
</div>
</el-form-item>
<el-form-item label="分组标签" prop="tag_id">
<div class="recommend-user-selector">
<el-input
:model-value="selectedTagName"
placeholder="点击选择分组标签"
readonly
@click="showTagSelector = true"
>
<template #append>
<el-button @click="showTagSelector = true">
<el-icon><Search /></el-icon>
<el-icon v-if="!isAddingChild" class="group-picker-arrow"><ArrowRight /></el-icon>
</div>
<div v-if="isAddingChild" class="form-tip">
添加子级时自动继承父级分组，不可修改
</div>
</el-form-item>
<el-form-item label="分组标签" prop="tag_id">
<div
class="group-picker"
:class="{ 'is-empty': !selectedTagName }"
@click="showTagSelector = true"
>
<el-icon class="group-picker-icon"><CollectionTag /></el-icon>
<span class="group-picker-text">{{ selectedTagName || '点击选择分组标签' }}</span>
<el-button
v-if="groupForm.tag_id"
type="danger"
link
size="small"
class="group-picker-clear"
@click.stop="clearTag"
>
清除
</el-button>
</template>
</el-input>
<el-button
v-if="groupForm.tag_id"
type="danger"
link
@click="clearTag"
class="clear-btn"
>
清除
</el-button>
<el-icon class="group-picker-arrow"><ArrowRight /></el-icon>
</div>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="备注" prop="note">
<el-input v-model="groupForm.note" type="textarea" :rows="4" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="排序索引" prop="index">
<el-input-number
v-model="groupForm.index"
:min="0"
:max="9999"
placeholder="请输入排序索引，数值越小排序越靠前"
style="width: 100%"
</div>
<!-- 基本属性（层级 / 排序 / 状态） -->
<div class="form-section">
<div class="form-section-title">基本属性</div>
<div class="form-grid">
<el-form-item label="分组层级" prop="level">
<el-input :model-value="`${groupForm.level} 级`" disabled style="width: 100%" />
<div class="form-tip">层级根据父级分组自动计算</div>
</el-form-item>
<el-form-item label="排序索引" prop="index">
<el-input-number
v-model="groupForm.index"
:min="0"
:max="9999"
controls-position="right"
placeholder="数值越小越靠前"
style="width: 100%"
/>
<div class="form-tip">数值越小排序越靠前，相同索引按创建时间排序</div>
</el-form-item>
<el-form-item label="状态" prop="disable" class="group-status-item">
<el-radio-group v-model="groupForm.disable">
<el-radio-button :value="false">启用</el-radio-button>
<el-radio-button :value="true">禁用</el-radio-button>
</el-radio-group>
</el-form-item>
</div>
</div>
<!-- 备注 -->
<el-form-item prop="note" label="备注" class="note-form-item">
<el-input
v-model="groupForm.note"
type="textarea"
:rows="4"
placeholder="请输入备注（可选）"
resize="none"
/>
<div class="form-tip">数值越小排序越靠前，相同索引按创建时间排序</div>
</el-form-item>
<el-form-item label="状态" prop="disable">
<el-radio-group v-model="groupForm.disable">
<el-radio :value="false">启用</el-radio>
<el-radio :value="true">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
@@ -486,71 +505,80 @@
<el-dialog
v-model="productDialogVisible"
:title="productDialogType === 'add' ? '新增商品' : '编辑商品'"
width="800px"
width="860px"
append-to-body
class="product-form-dialog"
>
<el-form
ref="productFormRef"
:model="productForm"
:rules="productRules"
label-width="120px"
label-position="top"
class="product-form"
>
<el-form-item label="商品名称" prop="name">
<el-input v-model="productForm.name" placeholder="请输入商品名称" />
</el-form-item>
<el-form-item label="商品所属表" prop="table">
<el-input v-model="productForm.table" placeholder="请输入商品所属表" />
</el-form-item>
<el-form-item label="商品分组" prop="good_group_id">
<div class="recommend-user-selector">
<el-input
:model-value="selectedGroupName"
placeholder="请选择商品分组"
readonly
@click="showProductGroupSelector = true"
<!-- 顶部：封面 + 基本信息 -->
<div class="product-form-header">
<!-- 左侧封面 -->
<div class="cover-uploader" @click="coverSelectorVisible = true">
<img v-if="productForm.cover_url" :src="productForm.cover_url" class="cover-image" alt="商品封面" />
<div v-else class="cover-placeholder">
<el-icon class="cover-placeholder-icon"><Picture /></el-icon>
<span class="cover-placeholder-text">点击选择封面</span>
</div>
<div class="cover-mask">
<el-icon><Picture /></el-icon>
<span>更换封面</span>
</div>
<el-button
v-if="productForm.cover_id"
type="danger"
size="small"
circle
class="cover-clear-btn"
@click.stop="clearProductCover"
>
<template #prefix>
<el-icon><Folder /></el-icon>
</template>
</el-input>
<el-button
v-if="productForm.good_group_id"
type="danger"
link
@click="clearProductGroup"
class="clear-btn"
>
清除
<el-icon><Delete /></el-icon>
</el-button>
</div>
</el-form-item>
<el-form-item label="商品内容" prop="content">
<el-input v-model="productForm.content" type="textarea" :rows="4" placeholder="请输入商品内容" />
</el-form-item>
<el-form-item label="商品封面" prop="cover_id">
<div class="recommend-user-selector">
<el-input
:model-value="productForm.cover_id ? `文件ID: ${productForm.cover_id}` : ''"
placeholder="点击选择封面图片"
readonly
@click="coverSelectorVisible = true"
>
<template #prefix>
<el-icon><Picture /></el-icon>
</template>
</el-input>
<el-button
v-if="productForm.cover_id"
type="danger"
link
@click="clearProductCover"
class="clear-btn"
>
清除
</el-button>
<!-- 右侧基本信息 -->
<div class="basic-fields">
<el-form-item label="商品名称" prop="name">
<el-input v-model="productForm.name" placeholder="请输入商品名称" />
</el-form-item>
<el-form-item label="所属分组" prop="good_group_id">
<div
class="group-picker"
:class="{ 'is-empty': !selectedGroupName }"
@click="showProductGroupSelector = true"
>
<el-icon class="group-picker-icon"><Folder /></el-icon>
<span class="group-picker-text">{{ selectedGroupName || '点击选择商品分组' }}</span>
<el-button
v-if="productForm.good_group_id"
type="danger"
link
size="small"
class="group-picker-clear"
@click.stop="clearProductGroup"
>
清除
</el-button>
<el-icon class="group-picker-arrow"><ArrowRight /></el-icon>
</div>
</el-form-item>
<el-form-item label="商品介绍" prop="content">
<el-input
v-model="productForm.content"
type="textarea"
:rows="4"
placeholder="请输入商品介绍"
resize="none"
/>
</el-form-item>
</div>
</el-form-item>
</div>
<!-- 封面选择器弹窗 -->
<AvatarSelector
v-model="coverSelectorVisible"
@@ -559,45 +587,119 @@
title="选择封面"
@confirm="handleProductCoverSelect"
/>
<el-form-item label="库存控制" prop="inventory_control">
<el-switch v-model="productForm.inventory_control" active-text="启用" inactive-text="禁用" />
</el-form-item>
<el-form-item label="库存数量" prop="inventory">
<el-input-number v-model="productForm.inventory" :min="0" placeholder="请输入库存" style="width: 100%" />
</el-form-item>
<el-form-item label="商品价格" prop="price">
<div class="unit-input-row">
<el-input-number v-model="productForm.price" :min="0" :precision="2" :step="0.01" placeholder="请输入价格(元)" style="flex:1" />
<span class="unit-text">元</span>
<!-- 价格与销售 -->
<div class="form-section">
<div class="form-section-title">价格与销售</div>
<div class="form-grid">
<el-form-item prop="price">
<template #label>
<span>商品价格<span class="unit-suffix">（元）</span></span>
</template>
<el-input-number
v-model="productForm.price"
:min="0"
:precision="2"
:step="0.01"
placeholder="请输入价格"
controls-position="right"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="单个商品数量" prop="pay_num">
<el-input-number
v-model="productForm.pay_num"
:min="1"
placeholder="请输入数量"
controls-position="right"
style="width: 100%"
/>
</el-form-item>
<el-form-item prop="expire_time">
<template #label>
<span>有效期<span class="unit-suffix">（天，0 为永久）</span></span>
</template>
<el-input-number
v-model="productForm.expire_time"
:min="0"
placeholder="请输入有效期"
controls-position="right"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="允许续费" prop="can_renew">
<el-switch
v-model="productForm.can_renew"
active-text="允许"
inactive-text="禁止"
/>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="单个商品数量" prop="pay_num">
<el-input-number v-model="productForm.pay_num" :min="1" placeholder="请输入单个商品数量" style="width: 100%" />
</el-form-item>
<el-form-item label="有效期" prop="expire_time">
<div class="unit-input-row">
<el-input-number v-model="productForm.expire_time" :min="0" placeholder="请输入有效期" style="flex:1" />
<span class="unit-text">天</span>
</div>
<!-- 库存管理 -->
<div class="form-section">
<div class="form-section-title">库存管理</div>
<div class="form-grid">
<el-form-item label="库存控制" prop="inventory_control">
<el-switch
v-model="productForm.inventory_control"
active-text="启用"
inactive-text="禁用"
/>
</el-form-item>
<el-form-item label="库存数量" prop="inventory">
<el-input-number
v-model="productForm.inventory"
:min="0"
:disabled="!productForm.inventory_control"
placeholder="请输入库存"
controls-position="right"
style="width: 100%"
/>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="推荐" prop="recommend">
<el-switch v-model="productForm.recommend" active-text="启用" inactive-text="禁用" />
</el-form-item>
<el-form-item label="推荐返还(%)" prop="recommend_rebate">
<el-input-number v-model="productForm.recommend_rebate" :min="0" :max="100" placeholder="请输入返还百分比" style="width: 100%" />
</el-form-item>
<el-form-item label="参数类型" prop="arg_type">
<el-select v-model="productForm.arg_type" placeholder="请选择参数类型" style="width: 100%">
<el-option label="所有参数" value="all" />
<el-option label="套餐" value="plan" />
<el-option label="自定义" value="customize" />
</el-select>
<div class="form-tip">all: 所有参数 / plan: 套餐 / customize: 自定义</div>
</el-form-item>
<el-form-item label="允许续费" prop="can_renew">
<el-switch v-model="productForm.can_renew" active-text="允许" inactive-text="禁止" />
</el-form-item>
</div>
<!-- 推荐与参数 -->
<div class="form-section">
<div class="form-section-title">推荐与参数</div>
<div class="form-grid">
<el-form-item label="推荐" prop="recommend">
<el-switch
v-model="productForm.recommend"
active-text="启用"
inactive-text="禁用"
/>
</el-form-item>
<el-form-item prop="recommend_rebate">
<template #label>
<span>推荐返还<span class="unit-suffix">（%）</span></span>
</template>
<el-input-number
v-model="productForm.recommend_rebate"
:min="0"
:max="100"
:disabled="!productForm.recommend"
placeholder="返还百分比"
controls-position="right"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="参数类型" prop="arg_type" class="arg-type-item">
<el-select
v-model="productForm.arg_type"
placeholder="请选择参数类型"
style="width: 100%"
>
<el-option label="所有参数" value="all" />
<el-option label="套餐" value="plan" />
<el-option label="自定义" value="customize" />
</el-select>
<div class="form-tip">all: 所有参数 / plan: 套餐 / customize: 自定义</div>
</el-form-item>
</div>
</div>
</el-form>
<template #footer>
<div class="dialog-footer">
@@ -657,7 +759,7 @@
<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Refresh, Search, Folder, ArrowRight, Loading, Grid, List, Document, Picture } from '@element-plus/icons-vue'
import { Plus, Refresh, Search, Folder, ArrowRight, Loading, Grid, List, Document, Picture, Delete, CollectionTag } from '@element-plus/icons-vue'
import {
getProductGroupList,
createProductGroup,
@@ -712,6 +814,7 @@ const groupForm = reactive({
level: 1,
parent_id: undefined,
cover_id: undefined,
cover_url: '',
tag_id: undefined,
index: 0
})
@@ -752,6 +855,7 @@ const productForm = reactive({
tag: '',
content: '',
cover_id: undefined,
cover_url: '',
good_group_id: undefined,
inventory_control: false,
inventory: 0,
@@ -768,9 +872,6 @@ const productRules = {
name: [
{ required: true, message: '请输入商品名称', trigger: 'blur' }
],
table: [
{ required: true, message: '请输入商品所属表', trigger: 'blur' }
],
content: [
{ required: true, message: '请输入商品内容', trigger: 'blur' }
],
@@ -928,6 +1029,14 @@ const loadProductsForGroup = async (groupId) => {
}
}
const handleNameCellClick = (row) => {
if (row.isGroup) {
toggleExpand(row)
} else if (row.isProduct) {
handleEditProduct(row.data, row.parentId)
}
}
const toggleExpand = async (row) => {
const group = row._origRef || findGroupById(row.id)
if (!group || group._loading) return
@@ -1300,6 +1409,7 @@ const handleAdd = (parentRow) => {
level: parentRow.level + 1,
parent_id: parentRow.id,
cover_id: undefined,
cover_url: '',
tag_id: parentTagId || undefined,
index: 0
})
@@ -1314,6 +1424,7 @@ const handleAdd = (parentRow) => {
level: 1,
parent_id: undefined,
cover_id: undefined,
cover_url: '',
tag_id: undefined,
index: 0
})
@@ -1334,6 +1445,7 @@ const handleEdit = (row) => {
level: row.level || 1,
parent_id: row.parentId || undefined,
cover_id: row.coverId || undefined,
cover_url: row.cover || '',
tag_id: row.tag?.id || row.tagId || undefined,
index: row.index || 0
})
@@ -1393,6 +1505,7 @@ const handleAddProduct = () => {
tag: '',
content: '',
cover_id: undefined,
cover_url: '',
good_group_id: undefined,
inventory_control: false,
inventory: 0,
@@ -1424,6 +1537,7 @@ const handleEditProduct = (product, parentGroupId) => {
tag: typeof product.tag === 'string' ? product.tag : '',
content: product.content || '',
cover_id: product.coverId,
cover_url: product.cover || '',
good_group_id: groupId,
inventory_control: product.inventoryControl,
inventory: product.inventory,
@@ -1506,11 +1620,13 @@ const clearProductGroup = () => {
const handleProductCoverSelect = (file) => {
productForm.cover_id = file.cover_id
productForm.cover_url = file.url || ''
coverSelectorVisible.value = false
}
const clearProductCover = () => {
productForm.cover_id = undefined
productForm.cover_url = ''
}
const clearParent = () => {
@@ -1533,6 +1649,12 @@ const confirmParentSelect = () => {
const handleCoverSelect = (file) => {
groupForm.cover_id = file.cover_id
groupForm.cover_url = file.url || ''
}
const clearGroupCover = () => {
groupForm.cover_id = undefined
groupForm.cover_url = ''
}
const handleStatusChange = async (row, disable) => {
@@ -1755,6 +1877,21 @@ onMounted(() => {
display: flex;
align-items: center;
gap: 8px;
border-radius: 4px;
transition: background-color 0.2s;
}
.group-name-cell.is-clickable {
cursor: pointer;
user-select: none;
}
.group-name-cell.is-clickable:hover {
background-color: #f0f7ff;
}
.group-name-cell.is-clickable:hover .expand-icon {
color: #409eff;
}
.group-name {
@@ -1847,6 +1984,258 @@ onMounted(() => {
color: #f56c6c;
}
/* 商品表单优化布局 */
.product-form-dialog :deep(.el-dialog__body) {
padding-top: 16px;
}
.product-form {
--section-gap: 20px;
}
.product-form-header {
display: flex;
gap: 24px;
padding: 16px;
background: #fafbfc;
border: 1px solid #ebeef5;
border-radius: 8px;
margin-bottom: var(--section-gap);
}
.cover-uploader {
position: relative;
width: 180px;
height: 180px;
flex-shrink: 0;
border: 1px dashed #dcdfe6;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
background: #fff;
transition: border-color 0.2s;
}
.cover-uploader:hover {
border-color: #409eff;
}
.cover-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cover-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: #909399;
}
.cover-placeholder-icon {
font-size: 40px;
}
.cover-placeholder-text {
font-size: 13px;
}
.cover-mask {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
opacity: 0;
transition: opacity 0.2s;
font-size: 13px;
}
.cover-mask .el-icon {
font-size: 22px;
}
.cover-uploader:hover .cover-mask {
opacity: 1;
}
.cover-clear-btn {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
opacity: 0;
transition: opacity 0.2s;
}
.cover-uploader:hover .cover-clear-btn {
opacity: 1;
}
.basic-fields {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.basic-fields :deep(.el-form-item) {
margin-bottom: 12px;
}
.basic-fields :deep(.el-form-item:last-child) {
margin-bottom: 0;
}
.group-picker {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
height: 32px;
padding: 0 11px;
border: 1px solid #dcdfe6;
border-radius: 4px;
background: #fff;
cursor: pointer;
color: #303133;
font-size: 14px;
transition: border-color 0.2s;
box-sizing: border-box;
}
.group-picker:hover {
border-color: #c0c4cc;
}
.group-picker.is-empty .group-picker-text {
color: #a8abb2;
}
.group-picker.is-disabled {
background: #f5f7fa;
cursor: not-allowed;
color: #a8abb2;
}
.group-picker.is-disabled:hover {
border-color: #dcdfe6;
}
.group-picker.is-disabled .group-picker-text,
.group-picker.is-disabled .group-picker-icon {
color: #a8abb2;
}
.note-form-item {
margin-bottom: 0 !important;
padding: 16px;
border: 1px solid #ebeef5;
border-radius: 8px;
background: #fff;
}
.group-status-item :deep(.el-radio-button__inner) {
padding: 6px 18px;
font-size: 13px;
}
.group-picker-icon {
color: #909399;
flex-shrink: 0;
}
.group-picker-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.group-picker-clear {
flex-shrink: 0;
padding: 0 4px;
}
.group-picker-arrow {
color: #c0c4cc;
font-size: 12px;
flex-shrink: 0;
}
.form-section {
margin-bottom: var(--section-gap);
padding: 16px;
border: 1px solid #ebeef5;
border-radius: 8px;
background: #fff;
}
.form-section:last-child {
margin-bottom: 0;
}
.form-section-title {
font-size: 14px;
font-weight: 600;
color: #303133;
margin-bottom: 12px;
padding-left: 8px;
border-left: 3px solid #409eff;
line-height: 1.2;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px 24px;
}
.form-grid :deep(.el-form-item) {
margin-bottom: 12px;
}
.form-grid .arg-type-item {
grid-column: span 2;
}
.unit-suffix {
color: #909399;
font-weight: normal;
font-size: 12px;
margin-left: 2px;
}
.product-form :deep(.el-form-item__label) {
font-weight: 500;
padding-bottom: 4px !important;
line-height: 1.4;
}
@media (max-width: 720px) {
.product-form-header {
flex-direction: column;
align-items: center;
}
.form-grid {
grid-template-columns: 1fr;
}
.form-grid .arg-type-item {
grid-column: span 1;
}
}
.product-info {
display: flex;
flex-direction: column;
src/views/product/components/ProductParameterManager.vue
+670 -180
View File
@@ -3,10 +3,16 @@
<el-dialog
:model-value="visible"
title="商品参数管理"
width="900px"
width="1000px"
top="6vh"
class="param-manager-dialog"
@update:model-value="$emit('update:visible', $event)"
>
<div class="filter-section" style="border: none; padding: 0 0 16px 0;">
<div class="param-manager-toolbar">
<div class="toolbar-info">
<el-icon><Collection /></el-icon>
<span>共 {{ parameterList.length }} 个参数</span>
</div>
<div class="action-bar">
<el-button type="primary" @click="handleAddParameter">
<el-icon><Plus /></el-icon>新增参数
@@ -16,48 +22,131 @@
</el-button>
</div>
</div>
<el-table
v-loading="paramLoading"
:data="parameterList"
style="width: 100%"
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
>
<el-table-column prop="id" label="参数ID" width="80" />
<el-table-column prop="name" label="参数名称" min-width="120" />
<el-table-column prop="type" label="参数类型" width="100">
<template #default="{ row }">
<el-tag :type="getArgTypeTag(row.type)">{{ getArgTypeText(row.type) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="数值配置" min-width="220">
<template #default="{ row }">
<template v-if="row.type === 'number'">
<div class="number-config">
<div>步进: {{ row.step || '-' }} | 范围: {{ row.min ?? '-' }} ~ {{ row.max ?? '-' }}
<template v-if="hasUnit(row)"> ({{ getBaseUnit(getArgKey(row)) }})</template>
</div>
<div v-if="hasUnit(row)" class="unit-info">
<el-tag size="small" type="success">{{ getArgKey(row) }}</el-tag>
<el-tag size="small" type="warning">{{ getParamDefaultUnit(row) }}</el-tag>
<div v-loading="paramLoading" class="parameter-cards-wrap">
<div v-if="!parameterList.length && !paramLoading" class="param-empty-state">
<el-empty description="暂无参数数据，点击右上角新增参数" :image-size="80" />
</div>
<div v-else class="parameter-cards-grid">
<div v-for="param in parameterList" :key="param.id" class="param-card">
<!-- 卡片头 -->
<div class="param-card-header">
<div class="param-card-title">
<el-tag :type="getArgTypeTag(param.type)" effect="dark" size="small" class="title-type-tag">
{{ getArgTypeText(param.type) }}
</el-tag>
<span class="param-name" :title="param.name">{{ param.name }}</span>
<el-tag v-if="param.must" type="danger" size="small" effect="plain" class="title-must-tag">必选</el-tag>
<span class="param-id">#{{ param.id }}</span>
</div>
<div class="param-card-actions">
<el-button type="primary" link @click="handleEditParameter(param)">
<el-icon><Edit /></el-icon>编辑
</el-button>
<el-button type="danger" link @click="handleDeleteParameter(param)">
<el-icon><Delete /></el-icon>删除
</el-button>
</div>
</div>
<!-- 权限 / 配置 元信息 -->
<div class="param-card-meta">
<el-tag size="small" :type="param.userAdd ? 'success' : 'info'" effect="plain" class="meta-tag">
<el-icon><ShoppingCart /></el-icon>
{{ param.userAdd ? '允许单独购买' : '不可单独购买' }}
</el-tag>
<el-tag size="small" :type="param.useUserGroupDiscount ? 'success' : 'info'" effect="plain" class="meta-tag">
<el-icon><User /></el-icon>
{{ param.useUserGroupDiscount ? '用户组优惠' : '无用户组优惠' }}
</el-tag>
<el-tag size="small" :type="param.useUserDiscount ? 'success' : 'info'" effect="plain" class="meta-tag">
<el-icon><Ticket /></el-icon>
{{ param.useUserDiscount ? '用户优惠' : '无用户优惠' }}
</el-tag>
</div>
<!-- number 类型配置 -->
<div v-if="param.type === 'number'" class="param-card-number-config">
<div class="number-config-item">
<span class="config-label">步进</span>
<span class="config-value">{{ param.step || '-' }}</span>
</div>
<div class="number-config-item">
<span class="config-label">范围</span>
<span class="config-value">{{ param.min ?? '-' }} ~ {{ param.max ?? '-' }}</span>
</div>
<div v-if="hasUnit(param)" class="number-config-item">
<span class="config-label">单位</span>
<el-tag size="small" type="success" effect="plain">{{ getArgKey(param) }}</el-tag>
<el-tag size="small" type="warning" effect="plain" style="margin-left: 4px">
{{ getBaseUnit(getArgKey(param)) }}
</el-tag>
</div>
</div>
<!-- 参数值列表 -->
<div class="param-card-values">
<div class="values-header">
<span class="values-title">
<el-icon><List /></el-icon>
参数值（{{ (param.attrs || []).length }} 项）
<span v-if="(param.attrs || []).length > 1" class="drag-tip-inline">
<el-icon><Rank /></el-icon>可拖动排序
</span>
</span>
<el-button type="primary" size="small" @click="handleAddParamValue(param)">
<el-icon><Plus /></el-icon>添加参数值
</el-button>
</div>
<div v-if="!(param.attrs || []).length" class="values-empty">
暂无参数值
</div>
<div v-else class="values-list">
<div
v-for="(attr, idx) in (param.attrs || [])"
:key="attr.id"
class="value-row"
:class="[
isDraggingAttr(param.id, idx) ? 'is-dragging' : '',
dragOverClass(param.id, idx)
]"
draggable="true"
@dragstart="onAttrDragStart($event, param, idx)"
@dragover="onAttrDragOver($event, param, idx)"
@dragleave="onAttrDragLeave($event, param, idx)"
@drop="onAttrDrop($event, param, idx)"
@dragend="onAttrDragEnd"
>
<el-icon class="value-drag-handle"><Rank /></el-icon>
<span class="value-order">#{{ idx }}</span>
<span class="value-name" :title="attr.name">{{ attr.name }}</span>
<span class="value-range">
<el-tag v-if="param.type === 'number'" size="small" type="info">
{{ getRangeTypeText(attr.rangeType) }}
{{ (attr.phase != null && attr.phase !== '') ? attr.phase : 0 }}
<template v-if="hasUnit(param)"> {{ getBaseUnit(getArgKey(param)) }}</template>
</el-tag>
<span v-else-if="param.type === 'select'" class="value-raw">{{ attr.value || '-' }}</span>
<span v-else class="value-raw">{{ attr.value || '-' }}</span>
</span>
<span class="value-price">
<el-icon><Money /></el-icon>
¥{{ (attr.price / 100).toFixed(2) }}
</span>
<div class="value-actions">
<el-button type="primary" link @click="handleEditParamValue(attr, param)">
<el-icon><Edit /></el-icon>
</el-button>
<el-button type="danger" link @click="handleDeleteParamValue(attr, param)">
<el-icon><Delete /></el-icon>
</el-button>
</div>
</div>
</div>
</template>
<span v-else class="text-muted">-</span>
</template>
</el-table-column>
<el-table-column label="操作" width="250" fixed="right">
<template #default="{ row }">
<div class="action-buttons">
<el-button type="primary" link @click="handleEditParameter(row)">编辑</el-button>
<el-button type="success" link @click="handleViewParamValues(row)">查看参数值</el-button>
<el-button type="danger" link @click="handleDeleteParameter(row)">删除</el-button>
</div>
</template>
</el-table-column>
<template #empty>
<el-empty description="暂无参数数据" :image-size="80" />
</template>
</el-table>
</div>
</div>
</div>
</el-dialog>
<!-- 商品参数表单对话框 -->
@@ -154,56 +243,6 @@
</template>
</el-dialog>
<!-- 参数值管理对话框 -->
<el-dialog v-model="paramValuesDialogVisible" title="参数值管理" width="800px" append-to-body>
<div class="values-header">
<div>
<span>参数：{{ currentParam?.name }}</span>
<el-tag v-if="hasUnit(currentParam)" size="small" type="success" style="margin-left: 8px">
{{ getArgKey(currentParam) }} · 基础单位: {{ getBaseUnit(getArgKey(currentParam)) }}
</el-tag>
</div>
<el-button type="primary" @click="handleAddParamValue">
<el-icon><Plus /></el-icon>添加参数值
</el-button>
</div>
<el-table
v-loading="paramValuesLoading"
:data="paramValueList"
style="width: 100%; margin-top: 20px"
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
>
<el-table-column prop="id" label="值ID" width="80" />
<el-table-column prop="name" label="值名称" min-width="120" />
<el-table-column label="值/范围" min-width="180">
<template #default="{ row }">
<template v-if="currentParam?.type === 'select'">{{ row.value || '-' }}</template>
<template v-else-if="currentParam?.type === 'number'">
<el-tag size="small" type="info">
{{ getRangeTypeText(row.rangeType) }} {{ (row.phase != null && row.phase !== '') ? row.phase : 0 }}
</el-tag>
</template>
<template v-else>{{ row.value || '-' }}</template>
</template>
</el-table-column>
<el-table-column prop="index" label="排序" width="80" />
<el-table-column label="价格" width="100">
<template #default="{ row }">¥{{ (row.price / 100).toFixed(2) }}</template>
</el-table-column>
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<div class="action-buttons">
<el-button type="primary" link @click="handleEditParamValue(row)">编辑</el-button>
<el-button type="danger" link @click="handleDeleteParamValue(row)">删除</el-button>
</div>
</template>
</el-table-column>
<template #empty>
<el-empty description="暂无参数值" :image-size="60" />
</template>
</el-table>
</el-dialog>
<!-- 参数值表单对话框 -->
<el-dialog
v-model="paramValueFormDialogVisible"
@@ -216,56 +255,67 @@
<div class="tk-section">
<div class="tk-section-title">参数值信息</div>
<el-form-item label="值名称" prop="attr_name">
<el-input v-model="paramValueForm.attr_name" placeholder="请输入值名称" />
<div class="name-input-row">
<el-input v-model="paramValueForm.attr_name" placeholder="请输入值名称" style="flex: 1" />
<el-button
v-if="currentParam?.type === 'number'"
type="primary"
plain
:disabled="!canGenerateValueName"
@click="generateValueName"
>
<el-icon><MagicStick /></el-icon>
<span style="margin-left: 4px">生成</span>
</el-button>
</div>
</el-form-item>
<el-form-item v-if="currentParam?.type === 'select'" label="参数值" prop="attr_value">
<el-input v-model="paramValueForm.attr_value" placeholder="请输入参数值" />
</el-form-item>
<el-form-item label="排序索引" prop="index">
<el-input-number v-model="paramValueForm.index" :min="0" placeholder="排序索引" style="width: 100%" />
<el-form-item v-if="currentParam?.type === 'number'" label="数值范围" prop="attr_range">
<div class="range-config-row">
<el-select v-model="paramValueForm.range_type" class="range-type-select">
<el-option label="＜" value="before">
<span class="range-opt-symbol">＜</span>
<span class="range-opt-desc">小于</span>
</el-option>
<el-option label="＞" value="after">
<span class="range-opt-symbol">＞</span>
<span class="range-opt-desc">大于</span>
</el-option>
<el-option label="＝" value="equal">
<span class="range-opt-symbol">＝</span>
<span class="range-opt-desc">等于</span>
</el-option>
</el-select>
<el-input-number
v-model="paramValueForm.attr_range_display"
:min="valueDisplayMin"
:max="valueDisplayMax"
:step="valueDisplayStep"
:step-strictly="true"
placeholder="数值"
controls-position="right"
class="range-value-input"
/>
<el-select
v-if="hasUnit(currentParam)"
v-model="paramValueForm.display_unit"
class="range-unit-select"
@change="onValueUnitChange"
>
<el-option v-for="u in currentParamUnits" :key="u" :label="u" :value="u" />
</el-select>
</div>
<div v-if="hasUnit(currentParam)" class="form-tip">
实际存储: {{ computedBaseValue }} {{ getBaseUnit(getArgKey(currentParam)) }}
（范围: {{ currentParam?.min ?? 0 }} ~ {{ currentParam?.max ?? '-' }} {{ getBaseUnit(getArgKey(currentParam)) }}，步长: {{ currentParam?.step || 1 }}）
</div>
</el-form-item>
<el-form-item label="价格" prop="attr_price">
<el-input-number v-model="paramValueForm.attr_price" :min="0" placeholder="请输入价格" style="width: 100%" />
</el-form-item>
</div>
<template v-if="currentParam?.type === 'number'">
<div class="tk-section">
<div class="tk-section-title">数值范围配置</div>
<el-form-item label="范围类型" prop="range_type">
<el-select v-model="paramValueForm.range_type" placeholder="请选择范围类型" style="width: 100%">
<el-option label="小于 (before)" value="before" />
<el-option label="大于 (after)" value="after" />
<el-option label="等于 (equal)" value="equal" />
</el-select>
<div class="form-tip">before: 数值 &lt; phase 时匹配 | after: 数值 &gt; phase 时匹配</div>
</el-form-item>
<el-form-item label="阈值" prop="attr_range">
<div class="unit-input-row">
<el-input-number
v-model="paramValueForm.attr_range_display"
:min="valueDisplayMin"
:max="valueDisplayMax"
:step="valueDisplayStep"
:step-strictly="true"
placeholder="范围阈值"
style="flex: 1"
/>
<el-select
v-if="hasUnit(currentParam)"
v-model="paramValueForm.display_unit"
style="width: 100px"
@change="onValueUnitChange"
>
<el-option v-for="u in currentParamUnits" :key="u" :label="u" :value="u" />
</el-select>
</div>
<div v-if="hasUnit(currentParam)" class="form-tip">
实际存储值: {{ computedBaseValue }} {{ getBaseUnit(getArgKey(currentParam)) }}
（范围: {{ currentParam?.min ?? 0 }} ~ {{ currentParam?.max ?? '-' }} {{ getBaseUnit(getArgKey(currentParam)) }}，步长: {{ currentParam?.step || 1 }}）
</div>
</el-form-item>
</div>
</template>
</el-form>
<template #footer>
<div class="tk-dialog-footer">
@@ -279,7 +329,11 @@
<script setup>
import { ref, reactive, computed, watch, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Refresh } from '@element-plus/icons-vue'
import {
Plus, Refresh, Rank, MagicStick,
Edit, Delete, Collection, List, Money,
ShoppingCart, User, Ticket
} from '@element-plus/icons-vue'
import {
getProductParameterList,
getProductParameterDetail,
@@ -293,7 +347,7 @@ import {
import {
getAvailableUnits, getArgKeyOptions, hasUnit, getArgKey,
getBaseUnit, getDefaultDisplayUnit, getParamDefaultUnit, getParamUnits,
toBaseUnit, fromBaseUnit, formatValueWithUnit
toBaseUnit, fromBaseUnit
} from '@/utils/dynamicUnit'
const props = defineProps({
@@ -382,9 +436,6 @@ const onEnableUnitChange = (val) => {
}
}
const paramValuesDialogVisible = ref(false)
const paramValuesLoading = ref(false)
const paramValueList = ref([])
const currentParam = ref(null)
const paramValueFormDialogVisible = ref(false)
@@ -436,19 +487,145 @@ const computedBaseValue = computed(() => {
return Math.round(toBaseUnit(paramValueForm.attr_range_display || 0, paramValueForm.display_unit, argKey))
})
const formatPhaseDisplay = (phaseValue) => {
if (phaseValue === undefined || phaseValue === null) return '-'
if (!hasUnit(currentParam.value)) return String(phaseValue)
const argKey = getArgKey(currentParam.value)
const displayUnit = getParamDefaultUnit(currentParam.value)
const displayVal = fromBaseUnit(phaseValue, displayUnit, argKey)
return formatValueWithUnit(displayVal, displayUnit)
}
const onValueUnitChange = () => {
// Recalculate: keep the base value, recalculate display value
}
const canGenerateValueName = computed(() => {
if (currentParam.value?.type !== 'number') return false
const v = paramValueForm.attr_range_display
return v !== null && v !== undefined && v !== ''
})
const generateValueName = () => {
if (!canGenerateValueName.value) return
const val = paramValueForm.attr_range_display
const unit = hasUnit(currentParam.value) ? (paramValueForm.display_unit || '') : ''
const numText = `${val}${unit}`
let name = ''
switch (paramValueForm.range_type) {
case 'before':
name = `${numText} 以下`
break
case 'after':
name = `${numText} 以上`
break
case 'equal':
default:
name = numText
break
}
paramValueForm.attr_name = name
}
const dragSrc = ref({ paramId: null, index: null })
const dragOver = ref({ paramId: null, index: null, position: null })
const isReordering = ref(false)
const isDraggingAttr = (paramId, idx) => {
return dragSrc.value.paramId === paramId && dragSrc.value.index === idx
}
const dragOverClass = (paramId, idx) => {
if (dragOver.value.paramId !== paramId || dragOver.value.index !== idx) return ''
return dragOver.value.position === 'top' ? 'drag-over-top' : 'drag-over-bottom'
}
const onAttrDragStart = (e, param, idx) => {
dragSrc.value = { paramId: param.id, index: idx }
if (e.dataTransfer) {
e.dataTransfer.effectAllowed = 'move'
try { e.dataTransfer.setData('text/plain', String(idx)) } catch (_) {}
}
}
const onAttrDragOver = (e, param, idx) => {
if (dragSrc.value.paramId !== param.id) return
if (dragSrc.value.index === idx) return
e.preventDefault()
if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
const rect = e.currentTarget.getBoundingClientRect()
const position = e.clientY - rect.top < rect.height / 2 ? 'top' : 'bottom'
if (
dragOver.value.paramId !== param.id ||
dragOver.value.index !== idx ||
dragOver.value.position !== position
) {
dragOver.value = { paramId: param.id, index: idx, position }
}
}
const onAttrDragLeave = (e, param, idx) => {
if (
dragOver.value.paramId === param.id &&
dragOver.value.index === idx &&
!e.currentTarget.contains(e.relatedTarget)
) {
dragOver.value = { paramId: null, index: null, position: null }
}
}
const onAttrDrop = async (e, param, idx) => {
e.preventDefault()
if (dragSrc.value.paramId !== param.id) return
const src = dragSrc.value.index
const position = dragOver.value.position
let dst = idx
if (position === 'bottom') dst = idx + 1
dragSrc.value = { paramId: null, index: null }
dragOver.value = { paramId: null, index: null, position: null }
if (src === null || src === dst || src + 1 === dst) return
await reorderAttrs(param, src, dst)
}
const onAttrDragEnd = () => {
dragSrc.value = { paramId: null, index: null }
dragOver.value = { paramId: null, index: null, position: null }
}
const reorderAttrs = async (param, src, dst) => {
if (isReordering.value) return
isReordering.value = true
const newAttrs = [...(param.attrs || [])]
const [moved] = newAttrs.splice(src, 1)
const insertAt = dst > src ? dst - 1 : dst
newAttrs.splice(insertAt, 0, moved)
param.attrs = newAttrs
const updates = []
newAttrs.forEach((item, i) => {
if (Number(item.index) !== i) {
updates.push({ item, newIndex: i })
}
})
if (!updates.length) {
isReordering.value = false
return
}
try {
await Promise.all(updates.map(({ item, newIndex }) => {
const payload = {
good_id: Number(props.goodId),
arg_id: Number(param.id),
attr_id: item.id,
attr_name: item.name,
attr_value: item.value || '',
attr_price: Number(item.price) || 0,
index: newIndex
}
if (param?.type === 'number') {
payload.attr_range = item.phase ?? 0
payload.range_type = item.rangeType || 'equal'
}
return updateProductParameterValue(payload)
}))
ElMessage.success('排序已更新')
} catch (err) {
ElMessage.error('排序更新失败')
} finally {
isReordering.value = false
refreshParamAttrs(param)
}
}
const getArgTypeText = (type) => {
const typeMap = { 'string': '字符串', 'number': '数字', 'select': '选择' }
return typeMap[type] || '未知'
@@ -468,7 +645,22 @@ const fetchParameterList = async () => {
try {
const res = await getProductParameterList({ good_id: props.goodId })
if (res.data.code === 200) {
parameterList.value = res.data.data || []
const list = res.data.data || []
await Promise.all(list.map(async (param) => {
try {
const detail = await getProductParameterDetail({ good_id: props.goodId, arg_id: param.id })
if (detail.data.code === 200) {
const attrs = detail.data.data.attrs || []
attrs.sort((a, b) => (Number(a.index) || 0) - (Number(b.index) || 0))
param.attrs = attrs
} else {
param.attrs = []
}
} catch (_) {
param.attrs = []
}
}))
parameterList.value = list
}
} catch (error) {
ElMessage.error('获取参数列表失败')
@@ -477,6 +669,18 @@ const fetchParameterList = async () => {
}
}
const refreshParamAttrs = async (param) => {
if (!param) return
try {
const res = await getProductParameterDetail({ good_id: props.goodId, arg_id: param.id })
if (res.data.code === 200) {
const list = res.data.data.attrs || []
list.sort((a, b) => (Number(a.index) || 0) - (Number(b.index) || 0))
param.attrs = list
}
} catch (_) {}
}
const handleAddParameter = () => {
paramFormType.value = 'add'
paramFormDialogVisible.value = true
@@ -566,41 +770,31 @@ const submitParamForm = () => {
})
}
const handleViewParamValues = (row) => {
currentParam.value = row
paramValuesDialogVisible.value = true
fetchParamValuesList()
}
const fetchParamValuesList = async () => {
if (!props.goodId || !currentParam.value) return
paramValuesLoading.value = true
try {
const res = await getProductParameterDetail({ good_id: props.goodId, arg_id: currentParam.value.id })
if (res.data.code === 200) paramValueList.value = res.data.data.attrs || []
} catch (error) { ElMessage.error('获取参数值列表失败') }
finally { paramValuesLoading.value = false }
}
const handleAddParamValue = () => {
const handleAddParamValue = (param) => {
currentParam.value = param
paramValueFormType.value = 'add'
paramValueFormDialogVisible.value = true
const defaultUnit = hasUnit(currentParam.value) ? getParamDefaultUnit(currentParam.value) : ''
const defaultUnit = hasUnit(param) ? getParamDefaultUnit(param) : ''
const attrs = param.attrs || []
const nextIndex = attrs.length
? Math.max(...attrs.map((it) => Number(it.index) || 0)) + 1
: 0
nextTick(() => {
paramValueFormRef.value?.resetFields()
Object.assign(paramValueForm, { attr_id: undefined, attr_name: '', attr_value: '', attr_price: 0, index: 0, attr_range: 0, attr_range_display: 0, display_unit: defaultUnit, range_type: 'equal' })
Object.assign(paramValueForm, { attr_id: undefined, attr_name: '', attr_value: '', attr_price: 0, index: nextIndex, attr_range: 0, attr_range_display: 0, display_unit: defaultUnit, range_type: 'equal' })
})
}
const handleEditParamValue = (row) => {
const handleEditParamValue = (row, param) => {
currentParam.value = param
paramValueFormType.value = 'edit'
paramValueFormDialogVisible.value = true
const baseValue = row.phase || 0
let displayValue = baseValue
let displayUnit = ''
if (hasUnit(currentParam.value)) {
const argKey = getArgKey(currentParam.value)
displayUnit = getParamDefaultUnit(currentParam.value)
if (hasUnit(param)) {
const argKey = getArgKey(param)
displayUnit = getParamDefaultUnit(param)
displayValue = fromBaseUnit(baseValue, displayUnit, argKey)
}
Object.assign(paramValueForm, {
@@ -611,13 +805,13 @@ const handleEditParamValue = (row) => {
})
}
const handleDeleteParamValue = (row) => {
const handleDeleteParamValue = (row, param) => {
ElMessageBox.confirm(`确认删除参数值 ${row.name} 吗？`, '警告', {
confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
}).then(async () => {
try {
const res = await deleteProductParameterValue({ good_id: props.goodId, attr_id: row.id })
if (res.data.code === 200) { ElMessage.success('删除成功'); fetchParamValuesList() }
if (res.data.code === 200) { ElMessage.success('删除成功'); refreshParamAttrs(param) }
} catch (error) { ElMessage.error('删除失败') }
}).catch(() => {})
}
@@ -651,7 +845,11 @@ const submitParamValueForm = () => {
}
if (paramValueFormType.value === 'edit') submitData.attr_id = paramValueForm.attr_id
const res = paramValueFormType.value === 'add' ? await addProductParameterValue(submitData) : await updateProductParameterValue(submitData)
if (res.data.code === 200) { ElMessage.success(paramValueFormType.value === 'add' ? '添加成功' : '修改成功'); paramValueFormDialogVisible.value = false; fetchParamValuesList() }
if (res.data.code === 200) {
ElMessage.success(paramValueFormType.value === 'add' ? '添加成功' : '修改成功')
paramValueFormDialogVisible.value = false
refreshParamAttrs(currentParam.value)
}
} catch (error) { ElMessage.error(error.response?.data?.message || '操作失败') }
}
})
@@ -663,17 +861,309 @@ watch(() => props.visible, (val) => {
</script>
<style scoped>
.filter-section { padding: 0; background: transparent; }
/* 通用 */
.action-bar { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; align-items: center; }
.action-buttons { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
.action-buttons .el-button { padding: 4px 8px; }
.text-muted { color: #c0c4cc; font-size: 12px; }
.number-config { color: #909399; font-size: 13px; }
.number-config div { line-height: 1.4; }
.unit-info { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.unit-text { font-size: 12px; color: #666; }
.values-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dialog-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 0; }
.form-tip { font-size: 12px; color: #909399; margin-top: 4px; }
.unit-input-row { display: flex; align-items: center; gap: 8px; width: 100%; }
/* 顶部工具栏 */
.param-manager-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 16px 0;
border-bottom: 1px solid #ebeef5;
margin-bottom: 16px;
}
.toolbar-info {
display: inline-flex;
align-items: center;
gap: 6px;
color: #606266;
font-size: 14px;
}
.toolbar-info .el-icon { color: #409eff; font-size: 16px; }
/* 参数卡片网格 */
.parameter-cards-wrap {
min-height: 200px;
max-height: 68vh;
overflow-y: auto;
padding-right: 4px;
}
.parameter-cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.param-empty-state {
padding: 40px 0;
}
/* 参数卡片 */
.param-card {
border: 1px solid #ebeef5;
border-radius: 10px;
background: #fff;
padding: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.param-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
border-color: #dcdfe6;
}
.param-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.param-card-title {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.title-type-tag { flex-shrink: 0; }
.param-name {
font-size: 16px;
font-weight: 600;
color: #303133;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.title-must-tag { flex-shrink: 0; }
.param-id {
color: #909399;
font-size: 12px;
flex-shrink: 0;
}
.param-card-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
/* 元信息标签行 */
.param-card-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.meta-tag {
display: inline-flex !important;
align-items: center;
gap: 4px;
}
.meta-tag .el-icon { font-size: 12px; }
/* number 类型配置信息 */
.param-card-number-config {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px;
padding: 10px 12px;
margin-bottom: 12px;
background: #f7f9fc;
border-radius: 6px;
border-left: 3px solid #409eff;
}
.number-config-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
}
.config-label {
color: #909399;
}
.config-value {
color: #303133;
font-weight: 600;
font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
}
/* 参数值列表 */
.param-card-values {
border-top: 1px dashed #ebeef5;
padding-top: 12px;
}
.values-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.values-title {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #606266;
font-weight: 600;
}
.values-title .el-icon { color: #409eff; }
.drag-tip-inline {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: 10px;
font-size: 12px;
color: #909399;
font-weight: normal;
}
.drag-tip-inline .el-icon { color: #909399; font-size: 12px; }
.values-empty {
padding: 14px 12px;
text-align: center;
color: #c0c4cc;
font-size: 13px;
background: #fafafa;
border-radius: 6px;
border: 1px dashed #e4e7ed;
}
.values-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.value-row {
display: grid;
grid-template-columns: 24px 40px 1.4fr 1.4fr auto auto;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: #fafafa;
border: 1px solid transparent;
border-radius: 6px;
cursor: grab;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.value-row:hover {
background: #ecf5ff;
border-color: #d9ecff;
}
.value-row:active { cursor: grabbing; }
.value-row.is-dragging {
opacity: 0.45;
background: #ecf5ff;
}
.value-row.drag-over-top {
box-shadow: inset 0 2px 0 0 #409eff;
}
.value-row.drag-over-bottom {
box-shadow: inset 0 -2px 0 0 #409eff;
}
.value-drag-handle {
color: #c0c4cc;
font-size: 15px;
cursor: grab;
}
.value-row:hover .value-drag-handle { color: #409eff; }
.value-order {
font-size: 12px;
color: #909399;
font-family: 'Monaco', 'Menlo', monospace;
text-align: center;
}
.value-name {
color: #303133;
font-size: 13px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.value-range { min-width: 0; }
.value-raw {
color: #606266;
font-size: 13px;
font-family: 'Monaco', 'Menlo', monospace;
}
.value-price {
display: inline-flex;
align-items: center;
gap: 3px;
color: #f56c6c;
font-weight: 600;
font-size: 13px;
padding: 2px 8px;
background: #fef0f0;
border-radius: 4px;
white-space: nowrap;
}
.value-price .el-icon { font-size: 12px; }
.value-actions {
display: flex;
gap: 2px;
}
.value-actions .el-button { padding: 4px 6px; }
/* 值名称 + 生成按钮 */
.name-input-row { display: flex; align-items: center; gap: 8px; width: 100%; }
/* 数值范围单行配置 */
.range-config-row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.range-config-row .range-type-select { width: 96px; flex: 0 0 96px; }
.range-config-row .range-value-input { flex: 1; min-width: 0; }
.range-config-row .range-unit-select { width: 100px; flex: 0 0 100px; }
.range-config-row :deep(.el-select .el-input__inner) {
font-size: 16px;
font-weight: 600;
color: #409eff;
text-align: center;
}
.range-opt-symbol {
display: inline-block;
font-weight: 600;
font-size: 16px;
color: #409eff;
width: 24px;
}
.range-opt-desc {
margin-left: 12px;
color: #8492a6;
font-size: 12px;
}
/* 对话框内滚动区域自定义滚动条 */
.parameter-cards-wrap::-webkit-scrollbar { width: 6px; }
.parameter-cards-wrap::-webkit-scrollbar-track { background: transparent; }
.parameter-cards-wrap::-webkit-scrollbar-thumb {
background: #dcdfe6;
border-radius: 3px;
}
.parameter-cards-wrap::-webkit-scrollbar-thumb:hover { background: #c0c4cc; }
/* 响应式：窄屏时参数值行改为纵向 */
@media (max-width: 768px) {
.value-row {
grid-template-columns: 24px 1fr auto;
grid-template-rows: auto auto;
}
.value-order { display: none; }
.value-range { grid-column: 2 / 3; }
.value-price { grid-column: 3 / 4; grid-row: 1 / 2; }
.value-actions { grid-column: 3 / 4; grid-row: 2 / 3; }
}
</style>
src/views/product/components/ProductPlanManager.vue
+491 -51
View File
@@ -16,58 +16,133 @@
<el-icon><Refresh /></el-icon>刷新
</el-button>
</div>
<el-table
v-loading="planLoading"
:data="planList"
style="width: 100%"
:header-cell-style="{ background: '#f8f9fa', color: '#2c3e50', fontWeight: 600 }"
>
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="name" label="套餐名称" min-width="120" />
<el-table-column label="参数配置" min-width="250">
<template #default="{ row }">
<div v-if="row.argsParsed && row.argsParsed.length > 0" class="args-list">
<el-tag v-for="(arg, index) in row.argsParsed" :key="index" size="small" type="info" style="margin-right: 4px; margin-bottom: 4px;">
{{ arg.name }}: {{ formatArgTagDisplay(arg) }}
<div v-loading="planLoading" class="plan-cards-wrap">
<div v-if="planList.length > 0" class="plan-cards-grid">
<div
v-for="row in planList"
:key="row.id"
class="plan-card"
:class="{ 'is-disabled': row.disable }"
>
<!-- 卡片头部：名称 + 状态 -->
<div class="plan-card-header">
<div class="plan-card-title">
<span class="plan-card-name">{{ row.name }}</span>
<span class="plan-card-id">#{{ row.id }}</span>
</div>
<el-tag :type="row.disable ? 'danger' : 'success'" size="small" effect="light">
{{ row.disable ? '已禁用' : '启用中' }}
</el-tag>
</div>
<span v-else class="text-muted">-</span>
</template>
</el-table-column>
<el-table-column prop="note" label="说明" min-width="150" show-overflow-tooltip />
<el-table-column prop="index" label="排序" width="70" />
<el-table-column label="状态" width="80">
<template #default="{ row }">
<el-tag :type="row.disable ? 'danger' : 'success'" size="small">{{ row.disable ? '禁用' : '启用' }}</el-tag>
</template>
</el-table-column>
<el-table-column label="首页展示" width="90">
<template #default="{ row }">
<el-tag :type="row.showHome || row.show_home ? 'success' : 'info'" size="small">
{{ row.showHome || row.show_home ? '展示' : '不展示' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="允许升级" width="90">
<template #default="{ row }">
<el-tag :type="row.canUpdate || row.can_update ? 'success' : 'info'" size="small">
{{ row.canUpdate || row.can_update ? '允许' : '不允许' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template #default="{ row }">
<el-button type="primary" link @click="handleEditPlan(row)">编辑</el-button>
<el-button :type="row.disable ? 'success' : 'warning'" link @click="handleTogglePlanStatus(row)">
{{ row.disable ? '启用' : '禁用' }}
</el-button>
<el-button type="danger" link @click="handleDeletePlan(row)">删除</el-button>
</template>
</el-table-column>
<template #empty>
<el-empty description="暂无套餐数据" :image-size="80" />
</template>
</el-table>
<!-- 关键数据：价格 / 库存 / 额外参数 -->
<div class="plan-card-stats">
<div class="plan-stat plan-stat-price" :class="{ 'is-dynamic': !isFixedPrice(row) }">
<div class="plan-stat-label">
<el-icon><PriceTag /></el-icon>
<span>{{ isFixedPrice(row) ? '固定价格' : '参数计价' }}</span>
</div>
<div class="plan-stat-value">
<span class="price-symbol">¥</span>
<span class="price-amount">{{ formatPlanPrice(row) }}</span>
</div>
</div>
<div class="plan-stat plan-stat-inventory" :class="getInventoryClass(row)">
<div class="plan-stat-label">
<el-icon><Box /></el-icon>
<span>库存</span>
</div>
<div class="plan-stat-value">
<template v-if="getInventoryNum(row) > 0">
<span class="inventory-num">{{ getInventoryNum(row) }}</span>
<span class="inventory-unit">件</span>
</template>
<span v-else class="inventory-unlimited">不限</span>
</div>
</div>
<div class="plan-stat plan-stat-extra">
<div class="plan-stat-label">
<el-icon><Collection /></el-icon>
<span>额外参数</span>
</div>
<div class="plan-stat-value">
<span class="extra-num">{{ getExtraArgCount(row) }}</span>
<span class="extra-unit">项</span>
</div>
</div>
</div>
<!-- 参数配置：固定高度，超出滚动 -->
<div class="plan-card-section">
<div class="plan-card-section-title">
<el-icon><Setting /></el-icon>
<span>参数配置</span>
<span v-if="row.argsParsed && row.argsParsed.length > 0" class="plan-card-section-count">
{{ row.argsParsed.length }}
</span>
</div>
<div class="plan-card-args">
<template v-if="row.argsParsed && row.argsParsed.length > 0">
<el-tag
v-for="(arg, index) in row.argsParsed"
:key="index"
size="small"
type="info"
effect="plain"
class="plan-arg-tag"
>
<span class="plan-arg-name">{{ arg.name }}</span>
<span class="plan-arg-sep">:</span>
<span class="plan-arg-value">{{ formatArgTagDisplay(arg) }}</span>
</el-tag>
</template>
<div v-else class="plan-card-empty">暂无参数</div>
</div>
</div>
<!-- 元信息：排序 / 展示 / 升级 -->
<div class="plan-card-meta">
<span class="plan-meta-item">
<span class="plan-meta-label">排序</span>
<span class="plan-meta-value">{{ row.index ?? 0 }}</span>
</span>
<el-tag :type="row.showHome || row.show_home ? 'success' : 'info'" size="small" effect="plain">
{{ row.showHome || row.show_home ? '首页展示' : '首页隐藏' }}
</el-tag>
<el-tag :type="row.canUpdate || row.can_update ? 'success' : 'info'" size="small" effect="plain">
{{ row.canUpdate || row.can_update ? '允许升级' : '禁止升级' }}
</el-tag>
</div>
<!-- 说明 -->
<div v-if="row.note" class="plan-card-note" :title="row.note">
<el-icon><InfoFilled /></el-icon>
<span class="plan-card-note-text">{{ row.note }}</span>
</div>
<!-- 操作按钮 -->
<div class="plan-card-actions">
<el-button type="primary" link size="small" @click="handleEditPlan(row)">
<el-icon><Edit /></el-icon>编辑
</el-button>
<el-button
:type="row.disable ? 'success' : 'warning'"
link
size="small"
@click="handleTogglePlanStatus(row)"
>
<el-icon><Switch /></el-icon>{{ row.disable ? '启用' : '禁用' }}
</el-button>
<el-button type="danger" link size="small" @click="handleDeletePlan(row)">
<el-icon><Delete /></el-icon>删除
</el-button>
</div>
</div>
</div>
<el-empty v-else-if="!planLoading" description="暂无套餐数据" :image-size="80" />
</div>
</div>
</el-dialog>
@@ -247,7 +322,7 @@
<script setup>
import { ref, reactive, computed, watch, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Refresh, Delete, View, CopyDocument, DocumentAdd, WarningFilled } from '@element-plus/icons-vue'
import { Plus, Refresh, Delete, View, CopyDocument, DocumentAdd, WarningFilled, Setting, InfoFilled, Edit, Switch, PriceTag, Box, Collection } from '@element-plus/icons-vue'
import {
getProductParameterList,
getProductPlanList,
@@ -354,6 +429,39 @@ const onPlanUnitChange = (spec, newUnit) => {
updateArgsJson()
}
const isFixedPrice = (row) => {
return !!(row.enableFixedPrice ?? row.enable_fixed_price)
}
const formatPlanPrice = (row) => {
const raw = isFixedPrice(row)
? (row.fixedPrice ?? row.fixed_price ?? 0)
: (row.argsPrice ?? row.args_price ?? 0)
return (Number(raw) / 100).toFixed(2)
}
const getInventoryNum = (row) => {
return Number(row.inventory ?? 0) || 0
}
const getInventoryClass = (row) => {
const n = getInventoryNum(row)
if (n === 0) return 'is-unlimited'
if (n <= 5) return 'is-low'
return ''
}
const getExtraArgCount = (row) => {
const extraArgs = row.extraArgs || row.extra_args
if (Array.isArray(extraArgs)) return extraArgs.length
const ids = row.extraArgIds || row.extra_arg_ids
if (Array.isArray(ids)) return ids.length
if (typeof ids === 'string' && ids.trim()) {
return ids.split(',').filter(Boolean).length
}
return 0
}
const formatArgTagDisplay = (arg) => {
if (arg.number !== undefined && arg.number !== 0) {
const spec = planSpecList.value.find(s => s.id === arg.arg_id)
@@ -744,6 +852,338 @@ watch(() => props.visible, (val) => {
.plan-management { padding: 0; }
.plan-header { display: flex; gap: 12px; margin-bottom: 16px; }
.args-list { display: flex; flex-wrap: wrap; gap: 4px; }
/* ===== 套餐卡片列表 ===== */
.plan-cards-wrap {
min-height: 160px;
}
.plan-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
}
.plan-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e4e7ed;
border-radius: 10px;
padding: 14px 16px;
transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
position: relative;
}
.plan-card:hover {
border-color: #409eff;
box-shadow: 0 4px 16px rgba(64, 158, 255, 0.12);
transform: translateY(-1px);
}
.plan-card.is-disabled {
background: #fafafa;
opacity: 0.85;
}
.plan-card.is-disabled::before {
content: '';
position: absolute;
inset: 0;
border-radius: 10px;
background: repeating-linear-gradient(
-45deg,
transparent 0 10px,
rgba(245, 108, 108, 0.04) 10px 11px
);
pointer-events: none;
}
.plan-card-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed #ebeef5;
}
.plan-card-title {
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
flex: 1;
}
.plan-card-name {
font-size: 15px;
font-weight: 600;
color: #2c3e50;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.plan-card-id {
font-size: 12px;
color: #909399;
font-weight: 400;
flex-shrink: 0;
}
.plan-card-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.plan-stat {
position: relative;
padding: 8px 10px;
border: 1px solid #ebeef5;
border-radius: 6px;
background: #fafbfc;
display: flex;
flex-direction: column;
gap: 4px;
overflow: hidden;
}
.plan-stat-label {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: #909399;
line-height: 1;
}
.plan-stat-label .el-icon {
font-size: 12px;
}
.plan-stat-value {
display: flex;
align-items: baseline;
gap: 2px;
font-weight: 600;
color: #303133;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.plan-stat-price {
background: linear-gradient(135deg, #fff5f5 0%, #ffeded 100%);
border-color: #fcdcdc;
}
.plan-stat-price .plan-stat-label {
color: #e47470;
}
.plan-stat-price .price-symbol {
font-size: 13px;
color: #f56c6c;
margin-right: 1px;
}
.plan-stat-price .price-amount {
font-size: 18px;
color: #f56c6c;
font-weight: 700;
}
.plan-stat-price.is-dynamic {
background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
border-color: #c6e2ff;
}
.plan-stat-price.is-dynamic .plan-stat-label {
color: #409eff;
}
.plan-stat-price.is-dynamic .price-symbol,
.plan-stat-price.is-dynamic .price-amount {
color: #409eff;
}
.plan-stat-inventory .inventory-num {
font-size: 18px;
font-weight: 700;
color: #67c23a;
}
.plan-stat-inventory .inventory-unit {
font-size: 11px;
color: #909399;
font-weight: 400;
}
.plan-stat-inventory.is-low {
background: linear-gradient(135deg, #fdf6ec 0%, #faecd8 100%);
border-color: #f5dab1;
}
.plan-stat-inventory.is-low .inventory-num {
color: #e6a23c;
}
.plan-stat-inventory.is-low .plan-stat-label {
color: #e6a23c;
}
.plan-stat-inventory.is-unlimited {
background: linear-gradient(135deg, #f4f4f5 0%, #ebeef5 100%);
}
.plan-stat-inventory .inventory-unlimited {
font-size: 14px;
color: #909399;
font-weight: 600;
}
.plan-stat-extra .extra-num {
font-size: 18px;
font-weight: 700;
color: #409eff;
}
.plan-stat-extra .extra-unit {
font-size: 11px;
color: #909399;
font-weight: 400;
}
.plan-card-section {
margin-bottom: 12px;
}
.plan-card-section-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #606266;
font-weight: 500;
margin-bottom: 8px;
}
.plan-card-section-title .el-icon {
color: #409eff;
font-size: 14px;
}
.plan-card-section-count {
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 9px;
background: #ecf5ff;
color: #409eff;
font-size: 11px;
font-weight: 600;
line-height: 1;
}
.plan-card-args {
display: flex;
flex-wrap: wrap;
gap: 6px;
height: 108px;
overflow-y: auto;
padding: 8px;
border: 1px solid #f0f2f5;
border-radius: 6px;
background: #fafbfc;
align-content: flex-start;
}
.plan-card-args::-webkit-scrollbar {
width: 6px;
}
.plan-card-args::-webkit-scrollbar-track {
background: transparent;
}
.plan-card-args::-webkit-scrollbar-thumb {
background-color: rgba(144, 147, 153, 0.25);
border-radius: 3px;
}
.plan-card-args::-webkit-scrollbar-thumb:hover {
background-color: rgba(144, 147, 153, 0.45);
}
.plan-card-empty {
width: 100%;
text-align: center;
color: #c0c4cc;
font-size: 12px;
padding: 20px 0;
}
.plan-arg-tag {
max-width: 100%;
overflow: hidden;
}
.plan-arg-tag :deep(.el-tag__content) {
display: inline-flex;
align-items: center;
gap: 2px;
max-width: 100%;
}
.plan-arg-name {
color: #909399;
}
.plan-arg-sep {
color: #c0c4cc;
margin: 0 2px;
}
.plan-arg-value {
color: #303133;
font-weight: 500;
}
.plan-card-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 10px;
font-size: 12px;
margin-bottom: 10px;
}
.plan-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.plan-meta-label {
color: #909399;
}
.plan-meta-value {
color: #303133;
font-weight: 500;
}
.plan-card-note {
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 12px;
color: #606266;
background: #fffbea;
border: 1px solid #ffe8a6;
border-radius: 6px;
padding: 6px 8px;
margin-bottom: 10px;
line-height: 1.5;
}
.plan-card-note .el-icon {
color: #e6a23c;
font-size: 14px;
flex-shrink: 0;
margin-top: 2px;
}
.plan-card-note-text {
flex: 1;
min-width: 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
}
.plan-card-actions {
display: flex;
justify-content: flex-end;
gap: 4px;
padding-top: 10px;
border-top: 1px dashed #ebeef5;
margin-top: auto;
}
.plan-card-actions .el-button {
padding: 4px 8px;
}
.plan-card-actions .el-button + .el-button {
margin-left: 0;
}
.plan-form-content { max-height: 60vh; overflow-y: auto; padding-right: 8px; margin-right: -8px; }
.plan-form-content::-webkit-scrollbar { width: 6px; }
.plan-form-content::-webkit-scrollbar-track { background: transparent; }