fix: 样式修改

components.d.ts

@@ -21,7 +21,6 @@ declare module 'vue' {
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
@@ -33,7 +32,6 @@ declare module 'vue' {
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']

src/components/CommonCard.vue

@@ -76,36 +76,40 @@ import type { TypesettingListData } from '../types/api/typesetting'
 
 // 定义通用字段接口，用于处理动态属性
 interface CommonFields {
-  [key: string]: unknown;
-  variantImage?: string;
-  mainImage?: string;
-  sku?: string;
-  productName?: string;
+  [key: string]: unknown
+  variantImage?: string
+  mainImage?: string
+  sku?: string
+  productName?: string
 }
 
 // 定义图片列表项接口
 interface ImageListItem {
-  [key: string]: unknown;
-  imagePath?: string;
+  [key: string]: unknown
+  imagePath?: string
 }
 
 // 创建一个工具类型，用于使用字符串索引访问对象属性
-type IndexableObject = Record<string, unknown>;
+type IndexableObject = Record<string, unknown>
 
 // 扩展现有类型以确保它们有通用字段
-type CardItem = PodProductList | CardOrderData | TypesettingListData | CommonFields;
+type CardItem =
+  | PodProductList
+  | CardOrderData
+  | TypesettingListData
+  | CommonFields
 
 // 定义 props 类型
 interface Props {
-  cardItem: CardItem;
-  active?: boolean;
-  showSelectIcon?: boolean;
-  showSku?: boolean;
-  showProductInfo?: boolean;
-  showImageList?: boolean;
-  imageField?: string;
-  imageListField?: string;
-  imagePathField?: string;
+  cardItem: CardItem
+  active?: boolean
+  showSelectIcon?: boolean
+  showSku?: boolean
+  showProductInfo?: boolean
+  showImageList?: boolean
+  imageField?: string
+  imageListField?: string
+  imagePathField?: string
 }
 
 // 定义默认值
@@ -122,45 +126,45 @@ const props = withDefaults(defineProps<Props>(), {
 
 // 获取主图片源
 const mainImageSrc = computed<string>(() => {
-  const item = props.cardItem as IndexableObject;
+  const item = props.cardItem as IndexableObject
 
   // 使用索引访问避免联合类型的属性访问问题
   if (
     props.imageField === 'variantImage' &&
     typeof item[props.imageField] === 'string'
   ) {
-    return item[props.imageField] as string;
+    return item[props.imageField] as string
   }
   if (
     props.imageField === 'mainImage' &&
     typeof item[props.imageField] === 'string'
   ) {
-    return item[props.imageField] as string;
+    return item[props.imageField] as string
   }
   // 默认返回空字符串
-  return '';
+  return ''
 })
 
 // 获取图片列表
 const imageList = computed<ImageListItem[]>(() => {
-  const item = props.cardItem as IndexableObject;
-  const list = item[props.imageListField];
-  return Array.isArray(list) ? list as ImageListItem[] : [];
+  const item = props.cardItem as IndexableObject
+  const list = item[props.imageListField]
+  return Array.isArray(list) ? (list as ImageListItem[]) : []
 })
 
 // 判断是否有图片列表
 const hasImageList = computed<boolean>(() => {
-  return imageList.value.length > 0;
+  return imageList.value.length > 0
 })
 
 // 获取图片列表项的图片路径
 function getItemImagePath(item: IndexableObject): string {
-  return (item[props.imagePathField] as string) || '';
+  return (item[props.imagePathField] as string) || ''
 }
 
 const copy = (text: string) => {
-  navigator.clipboard.writeText(text);
-  ElMessage.success('复制成功');
+  navigator.clipboard.writeText(text)
+  ElMessage.success('复制成功')
 }
 </script>
 
@@ -174,11 +178,16 @@ const copy = (text: string) => {
 
 .commodity-card-image {
   position: relative;
-
+  border: 1px solid #eee;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
   .img_top_left {
     position: absolute;
     top: 5px;
     left: 5px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
   }
 
   .img_top_right {