refactor(brand-materials):重构品牌物料页面

- 优化页面布局和样式，使用 flex布局
- 重新组织组件结构，提高可维护性- 改进搜索和分页功能，提升用户体验
- 统一按钮和输入框样式，增强一致性
- 移除冗余代码，提高代码可读性

src/views/property-marketing/brands/brand-materials/index.vue

@@ -144,7 +144,7 @@ const tableData = ref([]);
 const pageInfo = reactive({
   page: 1,
   pageSize: 20,
-  total: 100,
+  total: 0,
 });
 
 const query = reactive({

src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue

@@ -1,75 +1,88 @@
 <template>
-  <view>
+  <div class="business-wrap">
-    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
+    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
-      <a-space align="end">
+      <div class="top flex h-64px px-24px py-10px justify-between items-center">
-        <span class="part-div-header-title">业务洞察报告 </span>
+        <p class="text-18px font-400 lh-26px color-#211F24 title">业务洞察报告</p>
-      </a-space>
+      </div>
-      <a-space align="center" class="search-form-div" size="medium">
+
-        <a-form-item field="name" class="search-form" label="服务/产品">
+      <div class="container px-24px pt-12px pb-24px">
-          <a-input v-model="listQuery.name" placeholder="请搜索...">
+        <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-form-item>
+            </a-space>
-        <a-form-item field="name" label="时间筛选">
+          </div>
-          <a-range-picker
+          <div class="filter-row-item flex items-center">
-            showTime
+            <span class="label">时间筛选</span>
-            :time-picker-props="{
+            <a-space class="w-240px">
-              defaultValue: ['00:00:00', '00:00:00'],
+              <a-range-picker size="medium" allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
-            }"
+            </a-space>
-            style="width: 380px"
+          </div>
-          />
+
-        </a-form-item>
+          <div class="filter-row flex">
-        <a-form-item field="name">
+            <a-button class="w-84px search-btn mr-12px" size="medium">
-          <a-space>
-            <a-button type="outline" class="search-btn" @click="handleSearch">
               <template #icon>
                 <icon-search />
               </template>
               <template #default>搜索</template>
             </a-button>
-            <a-button type="outline" class="reset-btn" @click="handleSearch">
+            <a-button class="w-84px reset-btn" size="medium">
               <template #icon>
                 <icon-refresh />
               </template>
               <template #default>重置</template>
             </a-button>
-          </a-space>
+          </div>
-        </a-form-item>
+        </div>
-      </a-space>
+      </div>
-      <a-table
+    </div>
-        :columns="columns"
+    <div
-        :data="listResult.data"
+      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
-        :filter-icon-align-left="alignLeft"
-        @change="handleChange"
-        :scroll="true"
-        :pagination="false"
     >
+      <a-table :columns="columns" :data="tableData" @change="handleChange"  :pagination="false">
       </a-table>
+      <div class="pagination-box">
         <a-pagination
-        style="float: right"
+          :total="pageInfo.total"
-        :total="listResult.total"
+          size="mini"
-        :size="listQuery.size"
           show-total
           show-jumper
           show-page-size
+          :current="pageInfo.page"
+          :page-size="pageInfo.pageSize"
+          @change="onPageChange"
+          @page-size-change="onPageSizeChange"
         />
-    </a-space>
+      </div>
-  </view>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-const listQuery = reactive({
+import { reactive, ref } from 'vue';
-  name: '',
+
-  size: 0,
+const pageInfo = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 0,
+});
+const query = reactive({
+  name: ref(''),
 });
 
 const listResult = reactive({
   data: [],
   total: 0,
 });
-
+const onPageSizeChange = () => {};
+const tableData = ref([]);
+const handleChange = () => {};
+const onPageChange = () => {};
 const columns = [
   {
     title: '服务/产品',
@@ -83,9 +96,6 @@ const columns = [
     dataIndex: 'create_time',
     width: 120,
     minWidth: 120,
-    sortable: {
-      sortDirections: ['ascend', 'descend'],
-    },
   },
   {
     titleSlotName: 'hotTitle',
@@ -107,9 +117,6 @@ const columns = [
     dataIndex: 'volumeRate',
     width: 180,
     minWidth: 180,
-    sortable: {
-      sortDirections: ['ascend', 'descend'],
-    },
     slotName: 'lasterUpdateTime',
   },
   {
@@ -118,32 +125,46 @@ const columns = [
     width: 120,
     minWidth: 120,
   },
+  {
+    title: '操作',
+    dataIndex: 'operator',
+    width: 120,
+    minWidth: 120,
+  },
 ];
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
-.part-div-header-title {
+.business-wrap {
-  justify-content: center;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  color: var(--Text-1, #211f24);
+
-  font-size: 18px;
+  :deep(.search-btn) {
-  font-family: Alibaba PuHuiTi;
+    border-radius: 4px;
-  font-weight: 400;
+    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
-  line-height: 26px;
+    color: #6d4cfe;
-  word-wrap: break-word;
   }
 
-.search-form-div {
+  :deep(.edit-btn) {
-  margin-top: 10px;
+    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+    color: #6d4cfe;
   }
 
+  :deep(.reset-btn) {
+    border-radius: 4px;
+    border: 1px solid var(--BG-500, #b1b2b5);
+    background: var(--BG-white, #fff);
+  }
+
+  :deep(.arco-input-wrapper),
+  :deep(.arco-select-view-single),
+  :deep(.arco-textarea-wrapper),
   :deep(.arco-picker),
-:deep(.arco-input-wrapper) {
+  :deep(.arco-select-view-multiple) {
     border-radius: 4px;
     border-color: #d7d7d9;
     background-color: #fff;
-  height: 32px;
 
     &:focus-within,
     &.arco-input-focus {
@@ -153,8 +174,39 @@ const columns = [
     }
   }
 
-.reset-btn {
+  .table-wrap {
-  min-width: 72px;
+    width: 100%;
-  color: black;
+
+    .pagination-box {
+      display: flex;
+      width: 100%;
+      padding: 16px 24px;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    margin-top: 20px;
+  }
+
+  .container {
+    .filter-row {
+      .filter-row-item {
+        &:not(:last-child) {
+          margin-right: 24px;
+        }
+
+        .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% */
+        }
+      }
+    }
+  }
 }
 </style>

src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue

@@ -1,74 +1,84 @@
 <template>
-  <view>
+  <div class="competitive-wrap">
-    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
+    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
-      <a-space align="end">
+      <div class="top flex h-64px px-24px py-10px justify-between items-center">
-        <span class="part-div-header-title">竞品对比报告 </span>
+        <p class="text-18px font-400 lh-26px color-#211F24 title">竞品对比报告</p>
-      </a-space>
+      </div>
-      <a-space align="center" class="search-form-div" size="medium">
+
-        <a-form-item field="name" class="" label="服务/产品">
+      <div class="container px-24px pt-12px pb-24px">
-          <a-input v-model="listQuery.name" placeholder="请搜索...">
+        <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-form-item>
+            </a-space>
-        <a-form-item field="name" label="时间筛选">
+          </div>
-          <a-range-picker
+          <div class="filter-row-item flex items-center">
-            showTime
+            <span class="label">时间筛选</span>
-            :time-picker-props="{
+            <a-space class="w-240px">
-              defaultValue: ['00:00:00', '00:00:00'],
+              <a-range-picker size="medium" allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
-            }"
+            </a-space>
-            style="width: 380px"
+          </div>
-          />
+
-        </a-form-item>
+          <div class="filter-row flex">
-        <a-form-item field="name">
+            <a-button class="w-84px search-btn mr-12px" size="medium">
-          <a-space>
-            <a-button type="outline" class="search-btn" @click="handleSearch">
               <template #icon>
                 <icon-search />
               </template>
               <template #default>搜索</template>
             </a-button>
-            <a-button type="outline" class="reset-btn" @click="handleSearch">
+            <a-button class="w-84px reset-btn" size="medium">
               <template #icon>
                 <icon-refresh />
               </template>
               <template #default>重置</template>
             </a-button>
-          </a-space>
+          </div>
-        </a-form-item>
+        </div>
-      </a-space>
+      </div>
-      <a-table
+    </div>
-        :columns="columns"
+    <div
-        :data="listResult.data"
+      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
-        :filter-icon-align-left="alignLeft"
-        @change="handleChange"
-        :scroll="true"
-        :pagination="false"
     >
+      <a-table :columns="columns" :data="tableData" @change="handleChange"  :pagination="false">
       </a-table>
+      <div class="pagination-box">
         <a-pagination
-        style="float: right"
+          :total="pageInfo.total"
-        :total="listResult.total"
+          size="mini"
-        :size="listQuery.size"
           show-total
           show-jumper
           show-page-size
+          :current="pageInfo.page"
+          :page-size="pageInfo.pageSize"
+          @change="onPageChange"
+          @page-size-change="onPageSizeChange"
         />
-    </a-space>
+      </div>
-  </view>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-const listQuery = reactive({
+import { reactive, ref } from 'vue';
-  name: '',
-  size: 0,
-});
 
-const listResult = reactive({
+const pageInfo = reactive({
-  data: [],
+  page: 1,
+  pageSize: 20,
   total: 0,
 });
+const query = reactive({
+  name: ref(''),
+});
+
+const handleChange = () => {};
+const onPageChange = () => {};
+const onPageSizeChange = () => {};
+const tableData = ref([]);
 
 const columns = [
   {
@@ -83,25 +93,22 @@ const columns = [
     dataIndex: 'create_time',
     width: 120,
     minWidth: 120,
-
   },
   {
-    titleSlotName: 'hotTitle',
+    titleSlotName: 'customer',
     width: 180,
     minWidth: 180,
     title: '竞争对手',
     dataIndex: 'customer',
     slotName: 'hot',
   },
+
   {
     titleSlotName: 'lasterUpdateTime',
     title: '最后更新日期',
     dataIndex: 'volumeRate',
     width: 180,
     minWidth: 180,
-    sortable: {
-      sortDirections: ['ascend', 'descend'],
-    },
     slotName: 'lasterUpdateTime',
   },
   {
@@ -112,36 +119,44 @@ const columns = [
   },
   {
     title: '操作',
-    dataIndex: 'handle',
+    dataIndex: 'operator',
     width: 120,
     minWidth: 120,
   },
 ];
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
-.part-div-header-title {
+.competitive-wrap {
-  justify-content: center;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  color: var(--Text-1, #211f24);
+
-  font-size: 18px;
+  :deep(.search-btn) {
-  font-family: Alibaba PuHuiTi;
+    border-radius: 4px;
-  font-weight: 400;
+    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
-  line-height: 26px;
+    color: #6d4cfe;
-  word-wrap: break-word;
   }
 
-.search-form-div {
+  :deep(.edit-btn) {
-  margin-top: 10px;
+    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+    color: #6d4cfe;
   }
 
+  :deep(.reset-btn) {
+    border-radius: 4px;
+    border: 1px solid var(--BG-500, #b1b2b5);
+    background: var(--BG-white, #fff);
+  }
+
+  :deep(.arco-input-wrapper),
+  :deep(.arco-select-view-single),
+  :deep(.arco-textarea-wrapper),
   :deep(.arco-picker),
-:deep(.arco-input-wrapper) {
+  :deep(.arco-select-view-multiple) {
     border-radius: 4px;
     border-color: #d7d7d9;
     background-color: #fff;
-  height: 32px;
 
     &:focus-within,
     &.arco-input-focus {
@@ -151,8 +166,39 @@ const columns = [
     }
   }
 
-.reset-btn {
+  .table-wrap {
-  min-width: 72px;
+    width: 100%;
-  color: black;
+
+    .pagination-box {
+      display: flex;
+      width: 100%;
+      padding: 16px 24px;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    margin-top: 20px;
+  }
+
+  .container {
+    .filter-row {
+      .filter-row-item {
+        &:not(:last-child) {
+          margin-right: 24px;
+        }
+
+        .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% */
+        }
+      }
+    }
+  }
 }
 </style>

src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div >
     <a-card :bordered="false" class="echart-item-card">
       <template #title>
         <span class="a-card-title">{{ title.name }}</span>
@@ -18,7 +18,6 @@
 <script setup lang="ts">
 import { defineProps, onMounted } from 'vue';
 import * as echarts from 'echarts';
-import { Card } from '@arco-design/web-vue';
 import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
 //子组件参数传递
 const props = defineProps({

src/views/property-marketing/put-account/account-dashboard/components/echarts-item/style.scss

@@ -1,8 +1,9 @@
 .echart-item-card {
   width: 100%;
   height: 50%;
-  margin: 13px;
+
   border-radius: 10px;
+  margin-bottom: 24px;
 
   :deep(.arco-card-header) {
     border-bottom: none !important;

src/views/property-marketing/put-account/account-dashboard/index.vue

@@ -1,84 +1,63 @@
 <template>
-  <view>
+  <div class="account-dashboard-wrap">
-    <div class="part-div">
+    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid pb-24px mb-16px">
-      <div>
+      <a-tabs>
-        <a-tabs v-model:activeKey="tabData" class="a-tab-class" default-active-key="acctoun">
+        <a-tab-pane :key="1" title="账户"></a-tab-pane>
-          <a-tab-pane key="acctoun" title="账户"></a-tab-pane>
+        <a-tab-pane :key="2" title="项目"></a-tab-pane>
-          <a-tab-pane key="project">
-            <template #title>项目</template>
-          </a-tab-pane>
       </a-tabs>
-      </div>
-      <a-space size="large" direction="vertical" class="search-form">
-        <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
-          <a-col :span="5">
-            <a-space>
-              <span>账户名称</span>
-              <a-select :style="{ width: '320px' }" placeholder="全部">
-                <a-option>Beijing</a-option>
-                <a-option>Shanghai</a-option>
-                <a-option>Guangzhou</a-option>
-              </a-select>
-            </a-space>
-          </a-col>
-          <a-col :span="5">
-            <a-space>
-              <span>平台</span>
-              <a-select :style="{ width: '320px' }" placeholder="全部">
-                <a-option>Beijing</a-option>
-                <a-option>Shanghai</a-option>
-                <a-option>Guangzhou</a-option>
-              </a-select>
-            </a-space>
-          </a-col>
-          <a-col :span="5">
-            <a-space>
-              <span>运营人员</span>
-              <a-select :style="{ width: '320px' }" placeholder="全部">
-                <a-option>Beijing</a-option>
-                <a-option>Shanghai</a-option>
-                <a-option>Guangzhou</a-option>
-              </a-select>
-            </a-space>
-          </a-col>
-        </a-row>
 
-        <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
+      <div class="container px-24px">
-          <a-col :span="6">
+        <div class="filter-row flex mb-20px">
-            <a-space>
+          <div class="filter-row-item flex items-center">
-              <span>时间筛选</span>
+            <span class="label">账号名称</span>
-              <a-range-picker
+            <a-select multiple placeholder="全部">
-                showTime
+              <a-option>Beijing</a-option>
-                :time-picker-props="{
+              <a-option>Shanghai</a-option>
-                  defaultValue: ['00:00:00', '00:00:00'],
+              <a-option>Guangzhou</a-option>
-                }"
+            </a-select>
-                @change="onChange"
+          </div>
-                @select="onSelect"
+
-                style="width: 380px"
+          <div class="filter-row-item flex items-center">
-              />
+            <span class="label">平台</span>
+            <a-select placeholder="全部">
+              <a-option>Beijing</a-option>
+              <a-option>Shanghai</a-option>
+              <a-option>Guangzhou</a-option>
+            </a-select>
+          </div>
+
+          <div class="filter-row-item flex items-center">
+            <span class="label">运营人员</span>
+            <a-select placeholder="全部">
+              <a-option>Beijing</a-option>
+              <a-option>Shanghai</a-option>
+              <a-option>Guangzhou</a-option>
+            </a-select>
+          </div>
+        </div>
+        <div class="filter-row flex">
+          <div class="filter-row-item flex items-center">
+            <span class="label">时间筛选</span>
+            <a-space class="w-240px">
+              <a-range-picker size="medium" allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
             </a-space>
-          </a-col>
+          </div>
-          <a-col :span="5">
+          <a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
-            <a-space>
-              <a-button type="outline" class="search-btn" @click="handleSearch">
             <template #icon>
               <icon-search />
             </template>
             <template #default>搜索</template>
           </a-button>
-              <a-button type="outline" class="reset-btn" @click="handleSearch">
+          <a-button class="w-84px reset-btn" size="medium" @click="handleReset">
             <template #icon>
               <icon-refresh />
             </template>
             <template #default>重置</template>
           </a-button>
-            </a-space>
-          </a-col>
-        </a-row>
-      </a-space>
         </div>
-
+      </div>
-    <div>
+    </div>
+    <div class="table-wrap rounded-8px py-5px flex-1 flex flex-col">
       <a-row class="grid-demo" :gutter="24">
         <a-col :span="12">
           <EchartsItem
@@ -179,10 +158,10 @@
         </a-col>
       </a-row>
     </div>
-  </view>
+  </div>
 </template>
 <script setup lang="ts">
-import EchartsItem from './components/echarts-item/index.vue';
+import EchartsItem from './components/echarts-item/index';
 
 const xhlEcharts = reactive({
   xAxisData: ['06-05', '06-06', '06-07', '06-08', '06-09', '06-10', '06-11'],

src/views/property-marketing/put-account/account-dashboard/style.scss

@@ -1,16 +1,23 @@
-@import "@/views/property-marketing/component.scss";
+.account-dashboard-wrap {
-
+  height: 100%;
-.part-div {
+  display: flex;
-  width: 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;
+  :deep(.search-btn) {
-  margin: 10px;
+    border-radius: 4px;
+    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+    color: #6d4cfe;
+  }
+
+  :deep(.reset-btn) {
+    border-radius: 4px;
+    border: 1px solid var(--BG-500, #b1b2b5);
+    background: var(--BG-white, #fff);
+  }
+
+  .filter-wrap {
+    border-radius: 8px;
+    border: 1px solid #e6e6e8;
 
     :deep(.arco-tabs) {
       .arco-tabs-tab {
@@ -18,19 +25,55 @@
         padding: 0 8px;
       }
     }
+
+    .top {
+      .title {
+        font-family: 'Alibaba PuHuiTi';
+        font-style: normal;
       }
 
+      :deep(.arco-btn) {
+        .arco-btn-icon {
+          line-height: 14px;
+        }
+      }
+    }
 
+    .overview-row {
+      .overview-item {
+        height: 88px;
+        border-radius: 8px;
+        background: var(--BG-100, #f7f8fa);
+        padding: 16px;
+
+        &:not(:last-child) {
+          margin-right: 12px;
+        }
+      }
+    }
+  }
+
+  .table-wrap {
+    width: 100%;
+
+    .pagination-box {
+      display: flex;
+      width: 100%;
+      padding: 16px 24px;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+
+  .container {
+    :deep(.arco-input-wrapper),
     :deep(.arco-select-view-single),
     :deep(.arco-select-view-multiple),
-:deep(.arco-picker),
+    :deep(.arco-picker) {
-:deep(.arco-input-wrapper) {
       border-radius: 4px;
       border-color: #d7d7d9;
       background-color: #fff;
-  width: 224px;
       height: 32px;
-
       &:focus-within,
       &.arco-input-focus {
         background-color: var(--color-bg-2);
@@ -39,31 +82,28 @@
       }
     }
 
-.search-btn {
+    .filter-row {
-  // 搜索
+      .filter-row-item {
-  color: var(--Brand-6, #6d4cfe);
+        &:not(:last-child) {
+          margin-right: 24px;
+        }
+
+        .label {
+          margin-right: 8px;
+          color: #211f24;
+          font-family: 'Alibaba PuHuiTi';
           font-size: 14px;
-  font-family: Alibaba PuHuiTi;
+          font-style: normal;
           font-weight: 400;
-  line-height: 22px;
+          flex-shrink: 0;
-  height: 32px;
+          line-height: 22px; /* 157.143% */
-  border-radius: 3px;
-  word-wrap: break-word;
         }
 
-.reset-btn {
+        :deep(.arco-space-item) {
-  // 重置
+          width: 100%;
-  color: var(--Text-2, #3c4043);
+        }
-  font-size: 14px;
+      }
-  font-family: Alibaba PuHuiTi;
-  font-weight: 400;
-  line-height: 22px;
-  height: 32px;
-  border-radius: 3px;
-  word-wrap: break-word;
     }
 
-.search-form {
+  }
-  margin: 5px 10px 24px 24px;
-
 }