完成商品中的选择商品和商品地址查询的弹窗

apps/web-vue/src/components/Table/indedx.vue

@@ -2,7 +2,8 @@
     <div class="common-table-wrapper">
         <!-- 1. 表格主体 -->
         <el-table :data="tableData" style="width: 100%" :border="border" :size="size" :stripe="stripe"
-            :row-key="rowKey || undefined" v-loading="loading" @selection-change="handleSelectionChange">
+            :height="height || undefined" :row-key="rowKey || undefined" v-loading="loading"
+            @selection-change="handleSelectionChange">
 
             <!-- 默认插槽：让父组件自定义列 -->
             <slot></slot>
@@ -15,8 +16,8 @@
 
         <!-- 2. 分页组件 -->
         <div v-if="showPagination" class="pagination-container">
-            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
-                :page-sizes="[10, 20, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
+            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="psize"
+                :page-sizes="pageSizes" :background="true" layout="total, sizes, prev, pager, next, jumper"
                 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
         </div>
     </div>
@@ -59,6 +60,10 @@ const props = defineProps({
         type: String,
         default: ''
     },
+    psize: {
+        type: String,
+        default: ''
+    },
     showPagination: {
         type: Boolean,
         default: true,
@@ -66,7 +71,15 @@ const props = defineProps({
     rowKey: {
         type: [String, Function],
         default: '',
-    }
+    },
+    height: {
+        type: [String, Number],
+        default: '',
+    },
+    pageSizes: {
+        type: Array,
+        default: () => [10, 20, 50, 100],
+    },
 });
 
 // 2. 定义 Emits（向父组件传递事件）

apps/web-vue/src/views/agent/components/AgentProductInfoDialog.vue

+<template>
+    <Dialog v-model="dialogVisible" bg-color="#fff" width="768">
+        <div class="product-info-dialog bg-fff round-8 hidden">
+            <header class="dialog-header flex-items-center h-56 px-20">
+                <h3 class="fs-14 fw-700 color-000">输入商品信息</h3>
+            </header>
+
+            <section class="dialog-body px-20 py-20">
+                <div class="fs-12 fw-700 color-333 mb-8">抖音商品链接或商品 ID</div>
+                <div class="flex gap-10">
+                    <el-input v-model="productKeyword" class="flex-1" size="small" placeholder="粘贴抖音商品链接或输入商品 ID" />
+                    <el-button :disabled="productKeyword === ''" type="primary" class="search-btn fs-12 h-34 px-16">搜索</el-button>
+                </div>
+                <div v-for="item in productOptions" :key="item.id"
+                    class="product-card flex-items-center gap-12 mt-16 p-12 round-6 pointer"
+                    :class="{ active: selectedProductId === item.id }" @click="selectedProductId = item.id">
+                    <img :src="item.image" :alt="item.name" class="product-cover wh-60 round-4 cover" />
+                    <div class="flex-1">
+                        <div class="fs-14 fw-700 color-000 lh-22">{{ item.name }}</div>
+                        <div class="fs-12 color-666 lh-20">商品 ID：{{ item.id }}</div>
+                    </div>
+                    <span v-if="selectedProductId === item.id" class="checked-icon flex-center wh-18 round">
+                        <el-icon class="fs-12">
+                            <Check />
+                        </el-icon>
+                    </span>
+                </div>
+            </section>
+
+            <footer class="dialog-footer flex justify-end gap-8 px-20 py-12">
+                <el-button class="px-18" @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" class="confirm-btn px-18 border-none" @click="confirmProductInfo">
+                    确认
+                </el-button>
+            </footer>
+        </div>
+    </Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { Check } from '@element-plus/icons-vue';
+import Dialog from '@/components/Dialog/index.vue';
+import productImg from '@/static/image/huaban.png';
+
+const props = defineProps<{
+    modelValue: boolean;
+}>();
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean];
+    confirm: [value: string];
+}>();
+
+const productKeyword = ref('');
+const selectedProductId = ref('');
+
+const productOptions = [
+    {
+        id: '353829104771',
+        name: 'Bestore 负离子高速吹风机',
+        image: productImg,
+    },
+    {
+        id: '353829104772',
+        name: '负离子高速吹风机卡卡的撒',
+        image: productImg,
+    },
+];
+
+const dialogVisible = computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value),
+});
+
+const confirmProductInfo = () => {
+    emit('confirm', selectedProductId.value || productKeyword.value);
+    dialogVisible.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+.dialog-header,
+.dialog-footer {
+    border-bottom: 1px solid #edf2f7;
+}
+
+.dialog-footer {
+    border-top: 1px solid #edf2f7;
+    border-bottom: 0;
+    background: #f8fafc;
+}
+
+:deep(.el-input__wrapper) {
+    // height: 40px;
+    // border-radius: 6px;
+    box-shadow: 0 0 0 1px #dce6f2 inset;
+}
+
+:deep(.el-input__inner) {
+    font-size: 12px;
+}
+
+.product-card {
+    border: 1px solid #dce6f2;
+    background: #fff;
+    transition: border-color .2s, background .2s;
+
+    &.active {
+        border-color: #9b6cff;
+        background: #f4f0ff;
+    }
+}
+
+.product-cover {
+    background: #f3f6fb;
+}
+
+.checked-icon {
+    color: #7d28ff;
+    border: 1px solid #7d28ff;
+}
+</style>

apps/web-vue/src/views/resource/components/VideoItem.vue

@@ -28,7 +28,7 @@
         </div>
     </div>
     <div v-if="!isCheck" class="absolute top-0 left-0 bg-main w-full h-full video-main">
-        <video src="../../../../../public/aaa.mp4" height="100%" controls autoplay disablePictureInPicture></video>
+        <video src="/aaa.mp4" height="100%" controls autoplay disablePictureInPicture></video>
         <div class="absolute top-10 right-10 flex gap-4">
             <div class="bg-333 w-24 h-24 round-6 pointer"></div>
             <div class="bg-333 w-24 h-24 round-6 pointer"></div>

apps/web-vue/tsconfig.json

@@ -12,7 +12,7 @@
     "lib": ["ES2020", "DOM"],
     "skipLibCheck": true,
     "baseUrl": ".",
-    "ignoreDeprecations": "6.0",
+    "ignoreDeprecations": "5.0",
     "paths": {
       "@/*": ["src/*"]
     },