feat(product-manage): 添加 SKU列并优化产品信息展示

- 在商品列表和商品监控页面添加 SKU 列
- 实现 SKU复制功能
- 优化产品信息展示，包括标题和 ASIN
- 限制编辑 SKU 输入数量不超过三个

src/views/product-manage/Columns.ts

@@ -72,6 +72,10 @@ export const ProductMonitorColumns = [
     field: 'product_info', title: '商品信息', minWidth: 240, align: 'center', fixed: 'left',
     slots: { default: 'product_info' }
   },
+  {
+    field: 'sku', title: 'SKU', width: 'auto', align: 'center',
+    slots: { default: 'sku' }
+  },
   {
     field: 'platform_number', title: '平台编号', width: 'auto', align: 'center',
     slots: { default: 'platform_number' }

src/views/product-manage/component/ProductInfo.vue

@@ -55,28 +55,27 @@ const props = defineProps({
       <el-tooltip :content="item.title" :disabled="showTitleTooltip || !item.title" effect="dark" placement="top-start"
                   show-after="350">
         <el-link :disabled="!item.title" :href="item.url" :underline="false" target="_blank" type="primary">
-          <span class="line-clamp-1 text-ellipsis whitespace-normal">{{ item.title || '--' }}</span>
+          <span class="line-clamp-2 text-ellipsis whitespace-normal">{{ item.title || '--' }}</span>
         </el-link>
       </el-tooltip>
       <div>
         <div class="flex">
           ASIN:
-          <span class="font-semibold italic" style="color: #1d2129;">
+          <span class="font-semibold italic ml-1" style="color: #1d2129;">
             {{ item.asin || '--' }}
           </span>
-          <el-button :icon="DocumentCopy" link class="ml-1 cursor-pointer" :disabled="!item.asin" @click="handleCopy(item.asin || '')">
+          <el-button :disabled="!item.asin" :icon="DocumentCopy" class="ml-1 cursor-pointer" link
+                     @click="handleCopy(item.asin || '')">
           </el-button>
         </div>
-        
-        
-        <el-tooltip :content="item.sku" effect="light" show-after="300" :disabled="!item.sku">
-          <p class="m-0 p-0 line-clamp-1 text-ellipsis">
-            SKU:
-            <span style="color: #1d2129;">
-              {{ item.sku || '--' }} 
-            </span>
-          </p>
-        </el-tooltip>
+        <!--<el-tooltip :content="item.sku" effect="light" show-after="300" :disabled="!item.sku">-->
+        <!--  <p class="m-0 p-0 line-clamp-1 text-ellipsis">-->
+        <!--    SKU:-->
+        <!--    <span style="color: #1d2129;">-->
+        <!--      {{ item.sku || '&#45;&#45;' }} -->
+        <!--    </span>-->
+        <!--  </p>-->
+        <!--</el-tooltip>-->
       </div>
     </div>
   </div>

src/views/product-manage/product-list/component/DataTableSlot.vue

@@ -6,10 +6,11 @@
  */
 
 import { useCountryInfoStore } from '/@/stores/countryInfo';
-import { Message, Operation } from '@element-plus/icons-vue';
+import { DocumentCopy, Message, Operation } from '@element-plus/icons-vue';
 import { getTagType } from '/@/utils/useTagColor';
 import PermissionButton from '/@/components/PermissionButton/index.vue';
 import ProductInfo from '/@/views/product-manage/component/ProductInfo.vue';
+import { handleCopy } from '/@/utils/useCopyText';
 
 
 const props = defineProps<{
@@ -48,6 +49,23 @@ function handleMonitor() {
     <div v-else-if="field === 'product_info'">
       <ProductInfo :img-width="50" :item="row" />
     </div>
+    <div v-else-if="field === 'sku'" style="color: #1d2129;">
+      <div v-if="row.sku">
+        {{ row.sku }}
+        <el-button :icon="DocumentCopy" class="ml-1 cursor-pointer" link @click="handleCopy(row.sku || '')">
+        </el-button>
+      </div>
+      <div v-if="row.sku2">
+        {{ row.sku2 }}
+        <el-button :icon="DocumentCopy" class="ml-1 cursor-pointer" link @click="handleCopy(row.sku2 || '')">
+        </el-button>
+      </div>
+      <div v-if="row.sku3">
+        {{ row.sku3 }}
+        <el-button :icon="DocumentCopy" class="ml-1 cursor-pointer" link @click="handleCopy(row.sku3 || '')">
+        </el-button>
+      </div>
+    </div>
     <div v-else-if="field === 'country_code'">
       <el-tag :disable-transitions="true" :style="{ color: color, borderColor: color }" effect="plain" round>
         {{ country ? country.name : '-' }}

src/views/product-manage/product-list/component/EditDrawer.vue

@@ -8,6 +8,7 @@
 import { ElMessage, FormInstance, FormRules } from 'element-plus';
 import { Close, Finished } from '@element-plus/icons-vue';
 import * as api from '../api';
+import { useResponse } from '/@/utils/useResponse';
 
 
 const shopOptions = <Ref>inject('shopOptions');
@@ -19,17 +20,13 @@ const editOpen = defineModel({ default: false });
 
 const editDrawer = <Ref>useTemplateRef('editDrawer');
 
-const props = defineProps({
+const props: any = defineProps({
   rowData: Object
 });
 const { rowData } = props;
 
 const emit = defineEmits([ 'refresh' ]);
 
-onBeforeMount(() => {
-  // console.log('rowData=> ', rowData);
-});
-
 interface RuleForm {
   sku: any,
   shop_name: any,
@@ -53,8 +50,21 @@ const ruleForm = reactive<RuleForm>({
 
 const rules = reactive<FormRules<RuleForm>>({});
 
+// 构造sku数据格式
+ruleForm.sku = [rowData.sku, rowData.sku2, rowData.sku3]
+    .filter(Boolean)
+    .join(',');
+
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
+
+  const skuCount = ruleForm.sku.split(',').length;
+
+  if (skuCount > 3) {
+    ElMessage.warning('SKU 输入不能超过三个，请检查 SKU');
+    return;
+  }
+  
   await formEl.validate(async (valid, fields) => {
     if (valid) {
       try {

src/views/product-manage/product-monitor/component/DataTableSlot.vue

@@ -6,11 +6,12 @@
  */
 
 import { useCountryInfoStore } from '/@/stores/countryInfo';
-import { Delete, InfoFilled, Operation, Tickets, Timer } from '@element-plus/icons-vue';
+import { Delete, DocumentCopy, InfoFilled, Operation, Tickets, Timer } from '@element-plus/icons-vue';
 import { getTagType } from '/@/utils/useTagColor';
 import PermissionButton from '/@/components/PermissionButton/index.vue';
 import ProductInfo from '/@/views/product-manage/component/ProductInfo.vue';
 import ProgressBar from '/@/views/product-manage/product-monitor/component/ProgressBar.vue';
+import { handleCopy } from '/@/utils/useCopyText';
 
 
 const router = useRouter();
@@ -61,6 +62,23 @@ function goto() {
     <div v-if="field === 'product_info'">
       <ProductInfo :img-width="50" :item="row.goods" />
     </div>
+    <div v-else-if="field === 'sku'" style="color: #1d2129;">
+      <div v-if="row.goods.sku" class="flex items-center justify-center">
+        {{ row.goods.sku }}
+        <el-button :icon="DocumentCopy" class="ml-1 cursor-pointer" link @click="handleCopy(row.goods.sku || '')">
+        </el-button>
+      </div>
+      <div v-if="row.goods.sku2" class="flex items-center justify-center">
+        {{ row.goods.sku2 }}
+        <el-button :icon="DocumentCopy" class="ml-1 cursor-pointer" link @click="handleCopy(row.goods.sku2 || '')">
+        </el-button>
+      </div>
+      <div v-if="row.goods.sku3" class="flex items-center justify-center">
+        {{ row.goods.sku3 }}
+        <el-button :icon="DocumentCopy" class="ml-1 cursor-pointer" link @click="handleCopy(row.goods.sku3 || '')">
+        </el-button>
+      </div>
+    </div>
     <div v-else-if="field === 'country_code'">
       <el-tag :disable-transitions="true" :style="{ color: color, borderColor: color }" effect="plain" round>
         {{ country ? country.name : '-' }}
@@ -98,16 +116,6 @@ function goto() {
         <p>最低活动售价：{{ row.goods.minimum_price ? row.goods.currency_code + row.goods.minimum_price : '-' }}</p>
       </div>
     </div>
-    <!--<div v-else-if="field === 'activity_price'">-->
-    <!--  <div class="font-medium">-->
-    <!--    {{ row.goods.activity_price ? row.goods.currency_code + row.goods.activity_price : '-' }}-->
-    <!--  </div>-->
-    <!--</div>-->
-    <!--<div v-else-if="field === 'minimum_price'">-->
-    <!--  <div class="font-medium">-->
-    <!--    {{ row.goods.minimum_price ? row.goods.currency_code + row.goods.minimum_price : '-' }}-->
-    <!--  </div>-->
-    <!--</div>-->
     <div v-else-if="field === 'score'">
       <template v-if="row.goods.score !== null && row.goods.score !== undefined && row.goods.score !== ''">
         <el-rate

src/views/product-manage/product-monitor/component/EditDrawer.vue

@@ -19,7 +19,7 @@ const editOpen = defineModel({ default: false });
 
 const editDrawer = <Ref>useTemplateRef('editDrawer');
 
-const props = defineProps({
+const props: any = defineProps({
   rowData: Object
 });
 const { rowData } = props;
@@ -55,8 +55,20 @@ const rules = reactive<FormRules<RuleForm>>({
   tag: [ { required: true, message: '请输入分组', trigger: 'blur' } ],
 });
 
+ruleForm.sku = [rowData.goods.sku, rowData.goods.sku2, rowData.goods.sku3]
+    .filter(Boolean)
+    .join(',');
+
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
+
+  const skuCount = ruleForm.sku.split(',').length;
+
+  if (skuCount > 3) {
+    ElMessage.warning('SKU 输入不能超过三个，请检查 SKU');
+    return;
+  }
+  
   await formEl.validate(async (valid, fields) => {
     if (valid) {
       try {