From e6d0e19fb4c5b1a5204a22089530b7c6d4d896c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E5=BF=97=E5=86=9B?= <543024265@qq.com>
Date: Tue, 1 Jul 2025 11:19:46 +0800
Subject: [PATCH] =?UTF-8?q?refactor(brand-materials):=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=93=81=E7=89=8C=E7=89=A9=E6=96=99=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化页面布局和样式，使用 flex布局
- 重新组织组件结构，提高可维护性- 改进搜索和分页功能，提升用户体验
- 统一按钮和输入框样式，增强一致性
- 移除冗余代码，提高代码可读性
---
 .../brands/brand-materials/index.vue          | 253 ++++++++++--------
 .../brands/brand-materials/style.scss         | 248 +++++------------
 2 files changed, 205 insertions(+), 296 deletions(-)

diff --git a/src/views/property-marketing/brands/brand-materials/index.vue b/src/views/property-marketing/brands/brand-materials/index.vue
index 72ac8a0..ae9efbb 100644
--- a/src/views/property-marketing/brands/brand-materials/index.vue
+++ b/src/views/property-marketing/brands/brand-materials/index.vue
@@ -1,112 +1,126 @@
 <template>
-  <view class="view-body">
-    <div class="part-div">
-      <div class="part-div-header">
-        <span class="part-div-header-title">品牌物料</span>
-        <a-button class="add-btn" type="primary" @click="handleAdd">+ 添加品牌</a-button>
+  <div class="brand-wrap">
+    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
+      <div class="top flex h-64px px-24px py-10px justify-between items-center">
+        <p class="text-18px font-400 lh-26px color-#211F24 title">品牌物料</p>
+        <div class="flex items-center">
+          <a-button class="add-btn" type="primary" @click="handleAdd">+ 添加品牌</a-button>
+        </div>
       </div>
 
-      <a-space direction="vertical">
-        <a-space size="medium" direction="content" style="margin-left: 24px; margin-bottom: 20px">
-          <a-space>
-            <span>品牌名称</span>
-            <a-input v-model="listQuery.name" placeholder="请搜索..." size="medium" allow-clear>
-              <template #prefix>
-                <icon-search />
-              </template>
-            </a-input>
-          </a-space>
-
-          <a-space style="margin-left: 20px">
-            <a-button type="outline" size="medium" class="search-btn" @click="handleSearch">
+      <div class="container px-24px pt-12px pb-24px">
+        <div class="filter-row flex mb-20px">
+          <div class="filter-row-item flex items-center">
+            <span class="label">品牌名称</span>
+            <a-space size="medium">
+              <a-input v-model="query.name" class="w-240px" placeholder="请搜索..." size="medium" allow-clear>
+                <template #prefix>
+                  <icon-search />
+                </template>
+              </a-input>
+            </a-space>
+          </div>
+          <div class="filter-row flex">
+            <a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
               <template #icon>
                 <icon-search />
               </template>
               <template #default>搜索</template>
             </a-button>
-            <a-button type="outline" size="medium" class="reset-btn" @click="handleReset">
+            <a-button class="w-84px reset-btn" size="medium" @click="handleReset">
               <template #icon>
                 <icon-refresh />
               </template>
               <template #default>重置</template>
             </a-button>
-          </a-space>
-        </a-space>
-
-        <!-- 表格 -->
-        <a-table :data="listResult.data" class="a-table" :pagination="false">
-          <template #columns>
-            <a-table-column title="品牌名称" data-index="name" />
-            <a-table-column title="品牌logo" data-index="logo">
-              <template #cell="{ record }">
-                <img :src="record.logo" style="width: 50px; height: 50px" />
-              </template>
-            </a-table-column>
-            <a-table-column title="Slogan" data-index="slogan" />
-            <a-table-column title="操作" data-index="optional">
-              <template #cell="{ record }">
-                <a-space size="medium">
-                  <a-space>
-                    <a-popconfirm
-                      content="确定删除吗?"
-                      type="warning"
-                      ok-text="确认删除"
-                      cancel-text="取消"
-                      @ok="deleteBrand(record.id)"
-                    >
-                      <icon-delete></icon-delete>
-                    </a-popconfirm>
-                  </a-space>
-                  <a-space>
-                    <a-button type="outline" @click="handleEdit(record.id)">编辑</a-button>
-                  </a-space>
-                </a-space>
-              </template>
-            </a-table-column>
-          </template>
-        </a-table>
-
-        <div style="float: right; margin-right: 10px">
-          <a-pagination :total="listResult.total" :size="listQuery.page_size" show-total show-jumper show-page-size />
+          </div>
         </div>
-      </a-space>
-      <!-- 新增/编辑品牌弹窗 -->
-      <a-modal
-        v-model:visible="modalVisible"
-        :mask-closable="false"
-        :esc-to-close="false"
-        width="510px"
-        @cancel="handleModalCancel"
-      >
-        <template #title>
-          <span class="modal-title">{{ form.id > 0 ? '编辑品牌' : '添加品牌' }}</span>
-        </template>
-        <a-form :model="form" :rules="formRule" ref="formRef" layout="horizontal" auto-label-width>
-          <a-form-item field="name" label="品牌名称">
-            <a-input v-model="form.name" placeholder="请输入..." />
-          </a-form-item>
-          <a-form-item field="logo" class="form-item-logo" label="标准版Logo">
-            <a-space>
-              <ImageUpload v-model="form.logo" :limit="1"></ImageUpload>
-            </a-space>
-            <a-space>
-              <span class="form-tip">（品牌常规展示使用，支持PNG，JPG格式）</span>
-            </a-space>
-          </a-form-item>
-          <a-form-item field="otherLogos" class="form-item-logo" label="其他Logo">
-            <ImageUpload v-model="form.other_logos" :limit="3"></ImageUpload>
-          </a-form-item>
-          <a-form-item field="slogan" label="Slogan">
-            <a-textarea v-model="form.slogan" placeholder="请输入..." :max-length="50" show-word-limit />
-          </a-form-item>
-        </a-form>
-        <template #footer>
-          <a-button @click="handleModalCancel">取消</a-button>
-          <a-button type="primary" @click="handleModalOk">{{ btn_str }}</a-button>
-        </template>
-      </a-modal>
+        <a-modal
+          v-model:visible="modalVisible"
+          :mask-closable="false"
+          :esc-to-close="false"
+          width="510px"
+          @cancel="handleModalCancel"
+        >
+          <template #title>
+            <span class="modal-title">{{ form.id > 0 ? '编辑品牌' : '添加品牌' }}</span>
+          </template>
+          <a-form :model="form" :rules="formRule" ref="formRef" layout="horizontal" auto-label-width>
+            <a-form-item field="name" label="品牌名称">
+              <a-input v-model="form.name" class="h-36px" placeholder="请输入..." />
+            </a-form-item>
+            <a-form-item field="logo" class="form-item-logo" label="标准版Logo">
+              <a-space>
+                <ImageUpload v-model="form.logo" :limit="1"></ImageUpload>
+              </a-space>
+              <a-space>
+                <span class="form-tip">（品牌常规展示使用，支持PNG，JPG格式）</span>
+              </a-space>
+            </a-form-item>
+            <a-form-item field="otherLogos" class="form-item-logo" label="其他Logo">
+              <ImageUpload v-model="form.other_logos" :limit="3"></ImageUpload>
+            </a-form-item>
+            <a-form-item field="slogan" label="Slogan">
+              <a-textarea v-model="form.slogan" placeholder="请输入..." :max-length="50" show-word-limit />
+            </a-form-item>
+          </a-form>
+          <template #footer>
+            <a-button @click="handleModalCancel">取消</a-button>
+            <a-button type="primary" @click="handleModalOk">{{ btn_str }}</a-button>
+          </template>
+        </a-modal>
+      </div>
     </div>
-  </view>
+    <div
+      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
+    >
+      <a-table :data="tableData" ref="tableRef" :pagination="false">
+        <template #columns>
+          <a-table-column title="品牌名称" data-index="name" />
+          <a-table-column title="品牌logo" data-index="logo">
+            <template #cell="{ record }">
+              <img :src="record.logo" style="width: 50px; height: 50px" />
+            </template>
+          </a-table-column>
+          <a-table-column title="Slogan" data-index="slogan" />
+          <a-table-column title="操作" data-index="optional">
+            <template #cell="{ record }">
+              <a-space size="medium">
+                <a-space>
+                  <a-popconfirm
+                    content="确定删除吗?"
+                    type="warning"
+                    ok-text="确认删除"
+                    cancel-text="取消"
+                    @ok="deleteBrand(record.id)"
+                  >
+                    <icon-delete></icon-delete>
+                  </a-popconfirm>
+                </a-space>
+                <a-space>
+                  <a-button class="edit-btn" type="outline" @click="handleEdit(record.id)">编辑</a-button>
+                </a-space>
+              </a-space>
+            </template>
+          </a-table-column>
+        </template>
+      </a-table>
+
+      <div class="pagination-box">
+        <a-pagination
+          :total="pageInfo.total"
+          size="mini"
+          show-total
+          show-jumper
+          show-page-size
+          :current="pageInfo.page"
+          :page-size="pageInfo.pageSize"
+          @change="onPageChange"
+          @page-size-change="onPageSizeChange"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -123,15 +137,17 @@ import {
 } from '@/api/all/enterpriseKnowledge';
 import ImageUpload from '@/components/upload/ImageUpload.vue';
 
-const searchName = ref('');
-const current = ref(1);
+const tableRef = ref(null);
 
-const listResult = reactive({
-  data: ref([]),
-  total: ref(0),
+const tableData = ref([]);
+
+const pageInfo = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 100,
 });
 
-const listQuery = reactive({
+const query = reactive({
   page: ref(1),
   name: ref(''),
   page_size: ref('10'),
@@ -158,12 +174,38 @@ onMounted(() => {
 });
 
 const handleSearch = () => {
-  getMaterialsList(listQuery).then((response) => {
-    listResult.data = response.data.data;
-    listResult.total = response.data.total;
+  //将query 和pageInfo 合并成query
+  query.page = pageInfo.page;
+  query.page_size = pageInfo.pageSize;
+  getMaterialsList(query).then((response) => {
+    tableData.value = response.data.data;
+    pageInfo.total = response.data.total;
+    console.log(tableData.value, 'tableData.value');
   });
 };
 
+const reload = () => {
+  pageInfo.page = 1;
+  handleSearch();
+};
+
+const handleReset = () => {
+  pageInfo.page = 1;
+  pageInfo.pageSize = 20;
+  pageInfo.total = 0;
+  query.name = '';
+  reload();
+};
+
+const onPageChange = (current) => {
+  pageInfo.page = current;
+  handleSearch();
+};
+
+const onPageSizeChange = (pageSize) => {
+  pageInfo.pageSize = pageSize;
+  reload();
+};
 const deleteBrand = (id) => {
   console.log(id, 'id');
   deleteMaterials(id).then(() => {
@@ -172,11 +214,6 @@ const deleteBrand = (id) => {
   });
 };
 
-function handleReset() {
-  listQuery.name = '';
-  listQuery.page = 1;
-}
-
 function handleAdd() {
   btn_str.value = '确认添加';
   form.id = 0;
diff --git a/src/views/property-marketing/brands/brand-materials/style.scss b/src/views/property-marketing/brands/brand-materials/style.scss
index 19a03df..8cc147b 100644
--- a/src/views/property-marketing/brands/brand-materials/style.scss
+++ b/src/views/property-marketing/brands/brand-materials/style.scss
@@ -1,210 +1,82 @@
-@import "@/views/property-marketing/component.scss";
+.brand-wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 
-.view-body {
-  //每块div布局
-  .part-div {
-    width: 100%;
-    height: 100%;
-    background: var(--BG-white, white);
-    overflow: hidden;
-    border-radius: 8px;
-    outline: 1px var(--BG-300, #E6E6E8) solid;
-    outline-offset: -1px;
-    flex-direction: column;
-    justify-content: flex-start;
-    display: inline-flex;
-    margin: 10px;
-  }
-
-  //每块div 头部
-  .part-div-header {
-    align-self: stretch;
-    height: 64px;
-    padding: 10px 24px 10px 24px;
-    justify-content: flex-start;
-    align-items: center;
-    display: inline-flex
-  }
-
-  //每块div 标题
-  .part-div-header-title {
-    justify-content: center;
-    display: flex;
-    flex-direction: column;
-    color: var(--Text-1, #211F24);
-    font-size: 18px;
-    font-family: Alibaba PuHuiTi;
-    font-weight: 400;
-    line-height: 26px;
-    word-wrap: break-word;
-  }
-
-  //无数据样式
-  .non-data {
-    display: flex;
-    align-items: center; /* 垂直居中 */
-    justify-content: center; /* 水平居中，如果需要的话 */
-    height: 50%; /* 示例：父容器高度为视口高度 */
-  }
-
-  .non-data-str {
-    // 暂无品牌
-    color: var(--Text-3, #737478);
-    font-size: 14px;
-    font-family: Alibaba PuHuiTi;
-    font-weight: 400;
-    line-height: 22px;
-    word-wrap: break-word;
-    margin: 20px 20px;
-  }
-
-  //添加按钮
-  .add-btn {
-    font-size: 15px;
-    padding: 0 24px;
+  :deep(.search-btn) {
     border-radius: 4px;
-    float: right;
-    width: 110px;
-    height: 35px;
-    position: absolute;
-    line-height: 110px;
-    right: 35px;
-    margin-top: 10px
+    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+    color: #6d4cfe;
   }
 
-  //分页
-  .materials-page {
-    background: #fff;
-    border-radius: 8px;
-    padding: 32px 24px 24px 24px;
-    min-height: 600px;
+  :deep(.edit-btn) {
+    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+    color: #6d4cfe;
   }
 
-  .header-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 24px;
+  :deep(.reset-btn) {
+    border-radius: 4px;
+    border: 1px solid var(--BG-500, #b1b2b5);
+    background: var(--BG-white, #fff);
   }
 
-  .page-title {
-    font-size: 20px;
-    font-weight: 600;
-    margin: 0;
+  .table-wrap {
+    width: 100%;
+
+    .pagination-box {
+      display: flex;
+      width: 100%;
+      padding: 16px 24px;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    margin-top: 20px;
   }
 
-  .search-row {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 20px;
-  }
+  .container {
+    .filter-row {
+      .filter-row-item {
+        &:not(:last-child) {
+          margin-right: 24px;
+        }
 
-  .search-input {
-    width: 240px;
-  }
+        .label {
+          margin-right: 8px;
+          color: #211f24;
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          flex-shrink: 0;
+          line-height: 22px; /* 157.143% */
+        }
+      }
+    }
 
-  .reset-btn {
-    min-width: 72px;
-    color: black;
-  }
-
-  .search-btn,
-  {
-    min-width: 72px;
-  }
-
-  .brand-table {
-    margin-bottom: 16px;
-  }
-
-  .logo-cell {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-weight: 500;
-  }
-
-  .logo-emoji {
-    font-size: 20px;
-  }
-
-  .logo-text {
-    font-size: 16px;
-  }
-
-  .pagination-row {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    margin-top: 8px;
-  }
-
-  .page-size-select {
-    width: 80px;
-  }
-
-  .upload-card {
-    width: 80px;
-    height: 80px;
-    border: 1px dashed #d9d9d9;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: #999;
-    font-size: 24px;
-    background: #fafafa;
-    border-radius: 6px;
-  }
-
-  .upload-tip {
-    font-size: 12px;
-    color: #999;
-    margin-top: 4px;
-  }
-
-  .form-tip {
-    font-size: 12px;
-    color: #999;
-    margin-top: 4px;
-  }
-
-  .form-item-logo .logo-upload-row {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  .logo-upload-card {
-    display: flex;
-    gap: 12px;
   }
 
 
-  .a-form .a-form-item {
-    margin-bottom: 24px;
-  }
-
-  .a-modal .a-modal-footer {
-    justify-content: flex-end;
-  }
-
-  .a-table {
-    margin-left: 24px;
-    margin-right: 24px;
-  }
 }
 
-.modal-title {
-  position: absolute;
-  left: 10px;
-}
+:deep(.arco-input-wrapper),
+:deep(.arco-select-view-single),
+:deep(.arco-textarea-wrapper),
+:deep(.arco-select-view-multiple) {
+  border-radius: 4px;
+  border-color: #d7d7d9;
+  background-color: #fff;
 
+  &:focus-within,
+  &.arco-input-focus {
+    background-color: var(--color-bg-2);
+    border-color: rgb(var(--primary-6));
+    box-shadow: 0 0 0 0 var(--color-primary-light-2);
+  }
+}
 
 .form-tip {
+  font-size: 12px;
   color: #999;
-  font-size: 13px;
-  margin-left: 8px;
-  line-height: 1.5;
+  margin-top: 4px;
 }