From a9d055c47909bbf36525508ae0a8f58c02871c1e Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Tue, 22 Jul 2025 16:29:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=B3=E8=81=94=E5=B9=B3=E5=8F=B0?=
 =?UTF-8?q?=E8=B4=A6=E5=8F=B7=EF=BC=8C=E5=85=B3=E8=81=94=E6=B8=A0=E9=81=93?=
 =?UTF-8?q?=E8=B4=A6=E6=88=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/all/propertyMarketing.ts              |   5 +
 src/hooks/useTableSelectionWithPagination.ts  |   3 +
 src/styles/components/form.scss               |  22 ++
 src/styles/components/index.scss              |   4 +-
 src/styles/components/steps.scss              |  47 ++++
 src/styles/mixins/ellipsis.scss               |  14 +
 src/styles/mixins/index.scss                  |   1 +
 src/utils/platform.ts                         |  55 ++++
 .../components/filter-block/index.vue         |   5 +-
 .../components/add-project-modal/index.vue    |  80 +++++-
 .../components/add-project-modal/stepFour.vue |  12 +
 .../components/add-project-modal/stepOne.vue  |  43 +++
 .../add-project-modal/stepThree.vue           | 259 ++++++++++++++++++
 .../components/add-project-modal/stepTwo.vue  | 253 +++++++++++++++++
 .../put-account/account-dashboard/index.vue   |   2 +-
 .../components/account-table/index.vue        |   2 +-
 .../components/add-account-modal/index.vue    |   4 +-
 .../authorized-account-modal/index.vue        |   1 -
 .../components/filter-block/index.vue         |   2 +-
 .../table-data/guideListHistory.vue           |   2 +-
 .../components/table-data/listSearchForm.vue  |   2 +-
 .../table-data/placementGuideList.vue         |   2 +-
 .../investment-guidelines/detail.vue          |   2 +-
 vite.config.ts                                |   4 +-
 24 files changed, 808 insertions(+), 18 deletions(-)
 create mode 100644 src/styles/components/form.scss
 create mode 100644 src/styles/components/steps.scss
 create mode 100644 src/styles/mixins/ellipsis.scss
 create mode 100644 src/styles/mixins/index.scss
 create mode 100644 src/utils/platform.ts
 create mode 100644 src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepFour.vue
 create mode 100644 src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepOne.vue
 create mode 100644 src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepThree.vue
 create mode 100644 src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepTwo.vue

diff --git a/src/api/all/propertyMarketing.ts b/src/api/all/propertyMarketing.ts
index 5e46d05..d309855 100644
--- a/src/api/all/propertyMarketing.ts
+++ b/src/api/all/propertyMarketing.ts
@@ -24,6 +24,11 @@ export const getMediaAccounts = (params = {}) => {
   return Http.get('/v1/media-accounts', params);
 };
 
+// 媒体账号-列表
+export const getMediaAccountList = (params = {}) => {
+  return Http.get('/v1/media-accounts/list', params);
+};
+
 // 媒体账号-健康情况
 export const getMediaAccountsHealth = (params = {}) => {
   return Http.get('/v1/media-accounts/health', params);
diff --git a/src/hooks/useTableSelectionWithPagination.ts b/src/hooks/useTableSelectionWithPagination.ts
index 32b9e52..c0ed0c6 100644
--- a/src/hooks/useTableSelectionWithPagination.ts
+++ b/src/hooks/useTableSelectionWithPagination.ts
@@ -9,6 +9,7 @@ interface UseTableSelectionWithPaginationOptions {
   };
   onPageChange?: (page: number) => void;
   onPageSizeChange?: (size: number) => void;
+  onSelectChange?: () => void;
 }
 
 const DEFAULT_PAGE_INFO = {
@@ -39,6 +40,7 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
     } else {
       selectedRows.value = selectedRows.value.filter((v) => v[rowKey] !== record[rowKey]);
     }
+    options.onSelectChange?.();
   };
 
   // 全选/取消全选
@@ -56,6 +58,7 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
       selectedRowKeys.value = selectedRowKeys.value.filter((key) => !currentPageKeys.includes(key));
       selectedRows.value = selectedRows.value.filter((row) => !currentPageKeys.includes(row[rowKey]));
     }
+    options.onSelectChange?.();
   };
 
   const onPageChange = (page: number) => {
diff --git a/src/styles/components/form.scss b/src/styles/components/form.scss
new file mode 100644
index 0000000..8a5895c
--- /dev/null
+++ b/src/styles/components/form.scss
@@ -0,0 +1,22 @@
+.arco-form {
+  .arco-form-item {
+    margin-bottom: 16px !important;
+    .arco-form-item-label-col {
+      padding-right: 12px !important;
+      .arco-form-item-label {
+        color: #211f24;
+        font-family: $font-family-regular;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px;
+        .arco-form-item-label-required-symbol {
+          color: #f64b31;
+          margin-right: 4px;
+          font-size: 14px;
+          font-family: $font-family-regular;
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/components/index.scss b/src/styles/components/index.scss
index aa565bd..33c8e54 100644
--- a/src/styles/components/index.scss
+++ b/src/styles/components/index.scss
@@ -7,4 +7,6 @@
 @import "./textarea.scss";
 @import "./select.scss";
 @import "./date-picker.scss";
-@import "./button.scss";
\ No newline at end of file
+@import "./button.scss";
+@import "./steps.scss";
+@import "./form.scss";
\ No newline at end of file
diff --git a/src/styles/components/steps.scss b/src/styles/components/steps.scss
new file mode 100644
index 0000000..e112909
--- /dev/null
+++ b/src/styles/components/steps.scss
@@ -0,0 +1,47 @@
+.arco-steps {
+  .arco-steps-item {
+    .arco-steps-item-node {
+      .arco-steps-icon {
+        width: 28px;
+        height: 28px;
+        border-radius: 32px;
+        color: #3c4043;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+        font-family: $font-family-manrope-medium;
+        background-color: #f2f3f5;
+      }
+    }
+    .arco-steps-item-content {
+      .arco-steps-item-title {
+        color: #3c4043;
+        font-family: $font-family-regular;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        &::after {
+          background-color: #e6e6e8 !important;
+        }
+      }
+    }
+    &-active,
+    &-finish {
+      .arco-steps-item-node {
+        .arco-steps-icon {
+          color: #fff;
+          background-color: #6d4cfe;
+        }
+      }
+      .arco-steps-item-content {
+        .arco-steps-item-title {
+          font-family: $font-family-medium;
+          &::after {
+            background-color: #6d4cfe !important;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/mixins/ellipsis.scss b/src/styles/mixins/ellipsis.scss
new file mode 100644
index 0000000..40ba5d2
--- /dev/null
+++ b/src/styles/mixins/ellipsis.scss
@@ -0,0 +1,14 @@
+@mixin multi-ellipsis($lines) {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: $lines;
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/src/styles/mixins/index.scss b/src/styles/mixins/index.scss
new file mode 100644
index 0000000..3a3b3e8
--- /dev/null
+++ b/src/styles/mixins/index.scss
@@ -0,0 +1 @@
+@import "./ellipsis.scss"
\ No newline at end of file
diff --git a/src/utils/platform.ts b/src/utils/platform.ts
new file mode 100644
index 0000000..9a3c0d3
--- /dev/null
+++ b/src/utils/platform.ts
@@ -0,0 +1,55 @@
+import icon1 from '@/assets/img/media-account/icon-jl.png';
+import icon2 from '@/assets/img/media-account/icon-jg.png';
+import icon3 from '@/assets/img/media-account/icon-bili.png';
+import icon4 from '@/assets/img/media-account/icon-dy.png';
+import icon5 from '@/assets/img/media-account/icon-xhs.png';
+
+// 投放账户
+export enum ENUM_PUT_ACCOUNT_PLATFORM  {
+  jl =  0,
+  jg = 1,
+  bili = 2,
+};
+// 新媒体账号
+export enum ENUM_MEDIA_ACCOUNT_PLATFORM {
+  dy = 0,
+  xhs = 1,
+}
+
+export const PLATFORM_LIST = [
+  {
+    label: '巨量',
+    value: ENUM_PUT_ACCOUNT_PLATFORM.jl,
+    icon: icon1,
+  },
+  {
+    label: '聚光',
+    value: ENUM_PUT_ACCOUNT_PLATFORM.jg,
+    icon: icon2,
+  },
+  {
+    label: 'B站',
+    value: ENUM_PUT_ACCOUNT_PLATFORM.bili,
+    icon: icon3,
+  },
+];
+
+export const MEDIA_ACCOUNT_PLATFORMS = [
+  {
+    label: '抖音',
+    value: 0,
+    icon: icon4,
+  },
+  {
+    label: '小红书',
+    value: 1,
+    icon: icon5,
+  },
+];
+
+export const getPutAccountPlatformLogo = (value: ENUM_PUT_ACCOUNT_PLATFORM) => {
+  return PLATFORM_LIST.find((v) => v.value === value)?.icon ?? null;
+};
+export const getMediaAccountPlatformLogo = (value: ENUM_MEDIA_ACCOUNT_PLATFORM) => {
+  return MEDIA_ACCOUNT_PLATFORMS.find((v) => v.value === value)?.icon ?? null;
+};
diff --git a/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue b/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
index 27df722..94eea31 100644
--- a/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
@@ -33,7 +33,7 @@
         <span class="label">平台</span>
         <a-space class="w-160px">
           <a-select v-model="query.platform" size="medium" placeholder="全部" allow-clear @change="handleSearch">
-            <a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label">{{
+            <a-option v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS" :key="index" :value="item.value" :label="item.label">{{
               item.label
             }}</a-option>
           </a-select>
@@ -83,7 +83,8 @@ import GroupSelect from '@/views/property-marketing/media-account/components/gro
 import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select';
 import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
 
-import { INITIAL_QUERY, PLATFORM_LIST } from '@/views/property-marketing/media-account/account-manage/constants';
+import { INITIAL_QUERY } from '@/views/property-marketing/media-account/account-manage/constants';
+import { MEDIA_ACCOUNT_PLATFORMS } from '@/utils/platform';
 
 const props = defineProps({
   query: {
diff --git a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue
index 86740d4..2bbce70 100644
--- a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue
+++ b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue
@@ -7,26 +7,100 @@
     :mask-closable="false"
     @close="onClose"
   >
+    <div class="content">
+      <a-steps changeable :current="currentStep" @change="setCurrent" class="mb-24px mx-79px">
+        <a-step v-for="(step, index) in STEPS" :key="index">{{ step.label }}</a-step>
+      </a-steps>
+
+      <component :is="activeComp" v-model:formQuery="formQuery" />
+    </div>
     <template #footer>
-      <a-button size="large" class="cancel-btn" @click="onClose">取消</a-button>
-      <a-button type="primary" size="large" @click="onSubmit">确定</a-button>
+      <div class="flex justify-between items-center w-100%">
+        <div>
+          <a-button type="outline" size="medium" @click="onPrev" v-if="!isFirstStep">上一步</a-button>
+        </div>
+        <div class="flex items-center">
+          <a-button size="medium" class="mr-8px" @click="onCancel">取消</a-button>
+          <a-button type="primary" size="medium" @click="onSubmit">{{ isLastStep ? '确认添加' : '下一步' }}</a-button>
+        </div>
+      </div>
     </template>
   </a-modal>
 </template>
 
 <script setup>
+import StepOne from './stepOne.vue';
+import StepTwo from './stepTwo.vue';
+import StepThree from './stepThree.vue';
+import StepFour from './stepFour.vue';
+
+const STEPS = [
+  {
+    label: '项目信息',
+    index: 1,
+    comp: StepOne,
+  },
+  {
+    label: '关联平台账号',
+    index: 2,
+    comp: StepTwo,
+  },
+  {
+    label: '关联渠道账户',
+    index: 3,
+    comp: StepThree,
+  },
+  {
+    label: '关联内容稿件',
+    index: 4,
+    comp: StepFour,
+  },
+];
+const INITIAL_QUERY = {
+  name: '',
+  budget: '',
+  target: '',
+  background: '',
+  media_account_ids: [],
+  placement_account_ids: [],
+  work_ids: [],
+};
+
 const visible = ref(false);
 const emits = defineEmits(['update']);
+const currentStep = ref(1);
+const formQuery = ref(cloneDeep(INITIAL_QUERY));
+
+const isFirstStep = computed(() => currentStep.value === 1);
+const isLastStep = computed(() => currentStep.value === STEPS.length);
+const activeComp = computed(() => STEPS.find((v) => v.index === currentStep.value)?.comp ?? null);
 
 const open = () => {
   visible.value = true;
 };
 const onClose = () => {
+  currentStep.value = 1;
+  formQuery.value = cloneDeep(INITIAL_QUERY);
+
+  visible.value = false;
+};
+const onCancel = () => {
   visible.value = false;
 };
 
 const onSubmit = () => {
-  console.log('onSubmit');
+  console.log(formQuery.value);
+  if (isLastStep.value) {
+    console.log('onSubmit');
+  } else {
+    currentStep.value++;
+  }
+};
+const setCurrent = (current) => {
+  currentStep.value = current;
+};
+const onPrev = () => {
+  currentStep.value--;
 };
 defineExpose({ open });
 </script>
diff --git a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepFour.vue b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepFour.vue
new file mode 100644
index 0000000..d32555d
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepFour.vue
@@ -0,0 +1,12 @@
+<template>
+    <div>步骤4</div>
+  </template>
+  
+  <script setup>
+  const props = defineProps({
+    formQuery: {
+      type: Object,
+      default: () => {},
+    },
+  });
+  </script>
\ No newline at end of file
diff --git a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepOne.vue b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepOne.vue
new file mode 100644
index 0000000..2790c27
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepOne.vue
@@ -0,0 +1,43 @@
+<template>
+  <a-form ref="formRef" :model="formQuery" :rules="rules" layout="horizontal" auto-label-width class="h-360px">
+    <a-form-item label="项目名称" required field="name">
+      <a-input v-model="formQuery.name" placeholder="请输入项目名称" size="large" class="!w-400px" />
+    </a-form-item>
+    <a-form-item label="项目预算" field="budget">
+      <a-input v-model="formQuery.budget" placeholder="请输入项目预算" size="large" class="!w-400px" />
+    </a-form-item>
+    <a-form-item label="项目目标" field="target">
+      <a-textarea
+        v-model="formQuery.target"
+        placeholder="请输入项目目标"
+        :max-length="500"
+        show-word-limit
+        class="h-120px"
+      />
+    </a-form-item>
+    <a-form-item label="项目背景" field="background">
+      <a-textarea
+        v-model="formQuery.background"
+        placeholder="请输入项目背景"
+        :max-length="500"
+        show-word-limit
+        class="h-120px"
+      />
+    </a-form-item>
+  </a-form>
+</template>
+
+<script setup>
+const props = defineProps({
+  formQuery: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const formRef = ref(null);
+
+const rules = {
+  name: [{ required: true, message: '项目名称' }],
+};
+</script>
diff --git a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepThree.vue b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepThree.vue
new file mode 100644
index 0000000..776e8db
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepThree.vue
@@ -0,0 +1,259 @@
+<template>
+  <div class="table-wrap flex h-448px">
+    <div class="left flex-1 pr-12px flex flex-col">
+      <div class="flex items-center mb-16px">
+        <a-input
+          v-model="query.name"
+          class="w-220px mr-16px"
+          placeholder="搜索账户"
+          size="medium"
+          allow-clear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
+        <a-select
+          v-model="query.platform"
+          class="mr-16px w-160px"
+          size="medium"
+          placeholder="选择平台"
+          allow-clear
+          @change="handleSearch"
+        >
+          <a-option
+            v-for="(item, index) in PLATFORM_LIST"
+            :key="index"
+            :value="item.value"
+            :label="item.label"
+            >{{ item.label }}</a-option
+          >
+        </a-select>
+        <a-select
+          v-model="query.operator_id"
+          size="medium"
+          placeholder="选择运营人员"
+          class="w-160px"
+          allow-clear
+          @change="handleSearch"
+        >
+          <a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">
+            {{ item.name }}
+          </a-option>
+        </a-select>
+      </div>
+      <a-table
+        ref="tableRef"
+        :data="dataSource"
+        column-resizable
+        row-key="id"
+        :row-selection="rowSelection"
+        :pagination="false"
+        :scroll="{ x: '100%', y: '100%' }"
+        class="flex-1 overflow-hidden"
+        :selected-keys="selectedRowKeys"
+        bordered
+        @select="handleSelect"
+        @select-all="handleSelectAll"
+      >
+        <template #empty>
+          <NoData />
+        </template>
+        <template #columns>
+          <a-table-column
+            v-for="column in TABLE_COLUMNS"
+            :key="column.dataIndex"
+            :data-index="column.dataIndex"
+            :fixed="column.fixed"
+            :width="column.width"
+            :min-width="column.minWidth"
+            :sortable="column.sortable"
+            :align="column.align"
+            ellipsis
+            tooltip
+          >
+            <template #title>
+              <div class="flex items-center">
+                <span class="cts mr-4px">{{ column.title }}</span>
+                <a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
+                  <icon-question-circle class="tooltip-icon color-#737478" size="16" />
+                </a-tooltip>
+              </div>
+            </template>
+
+            <template #cell="{ record }">
+              <template v-if="column.dataIndex === 'platform'">
+                <img :src="getPutAccountPlatformLogo(record.platform)" width="19" height="19" />
+              </template>
+              <template v-else>
+                {{ formatTableField(column, record, true) }}
+              </template>
+            </template>
+          </a-table-column>
+        </template>
+      </a-table>
+    </div>
+    <div class="right w-320px px-12px flex flex-col">
+      <div class="flex justify-between">
+        <p class="mb-16px s1">{{ `已选择（${selectedRows?.length ?? 0}）` }}</p>
+        <a-button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</a-button>
+      </div>
+      <div class="flex-1 overflow-y-auto overflow-x-hidden">
+        <template v-if="selectedRows?.length">
+          <div class="tag-item mb-8px" v-for="item in selectedRows" :key="item.id">
+            <a-tooltip :content="item.name">
+              <p class="name mr-4px">{{ item.name || '-' }}</p>
+            </a-tooltip>
+            <icon-close size="12" class="color-#3C4043 cursor-pointer flex-shrink-0" @click="onDelete(item)" />
+          </div>
+        </template>
+        <NoData v-else text="暂无账号" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { PLATFORM_LIST, getPutAccountPlatformLogo } from '@/utils/platform';
+import { formatTableField } from '@/utils/tools';
+
+import { getPlacementAccountOperators, getPlacementAccountsList } from '@/api/all/propertyMarketing';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+
+const TABLE_COLUMNS = [
+  {
+    title: '账号名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '渠道',
+    dataIndex: 'platform',
+    width: 80,
+  },
+  {
+    title: '运营人员',
+    dataIndex: 'operator.name',
+    width: 140,
+  },
+];
+const emit = defineEmits(['update:formQuery']);
+
+const props = defineProps({
+  formQuery: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, handleSelectAll } =
+  useTableSelectionWithPagination({
+    onSelectChange: () => {
+      updateFormQuery();
+    },
+  });
+
+const query = ref({
+  name: '',
+  operator_id: '',
+  platform: '',
+});
+const operators = ref([]);
+const allData = ref([]);
+
+const updateFormQuery = () => {
+  emit('update:formQuery', {
+    ...props.formQuery,
+    placement_account_ids: selectedRowKeys.value,
+  });
+};
+const handleSearch = () => {
+  const { name, platform, operator_id } = query.value;
+  dataSource.value = allData.value.filter((item) => {
+    const nameMatch = name === '' ? true : item.name.includes(name);
+    const platformMatch = platform === '' ? true : item.platform === platform;
+    const operatorIdMatch = operator_id === '' ? true : item.operator_id === operator_id;
+    return nameMatch && platformMatch && operatorIdMatch;
+  });
+};
+
+const getOperators = async () => {
+  const { code, data } = await getPlacementAccountOperators();
+  if (code === 200) {
+    operators.value = data;
+  }
+};
+const getTableData = async () => {
+  const { code, data } = await getPlacementAccountsList();
+  if (code === 200) {
+    allData.value = data ?? [];
+    dataSource.value = data ?? [];
+    initSelect();
+  }
+};
+const initSelect = () => {
+  if (props.formQuery.placement_account_ids?.length) {
+    selectedRowKeys.value = props.formQuery.placement_account_ids;
+    selectedRows.value = dataSource.value.filter((v) => selectedRowKeys.value.includes(v.id));
+  }
+};
+
+const onClearSelect = () => {
+  selectedRowKeys.value = [];
+  selectedRows.value = [];
+  updateFormQuery();
+};
+
+const onDelete = (item) => {
+  const { id } = item;
+  selectedRowKeys.value = selectedRowKeys.value.filter((v) => v !== id);
+  selectedRows.value = selectedRows.value.filter((v) => v.id !== id);
+  updateFormQuery();
+};
+
+onMounted(() => {
+  getOperators();
+  getTableData();
+});
+</script>
+
+<style lang="scss" scoped>
+.table-wrap {
+  .s1 {
+    color: var(--Text-2, #3c4043);
+    font-family: font-family-regular;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+  }
+  .left {
+    border-right: 1px solid var(--Border-2, #e6e6e8);
+    :deep(.arco-table) {
+    }
+  }
+  .right {
+    .tag-item {
+      max-width: 100%;
+      width: fit-content;
+      overflow: hidden;
+      display: flex;
+      height: 24px;
+      padding: 0px 8px;
+      align-items: center;
+      border-radius: 2px;
+      background: var(--BG-200, #f2f3f5);
+      .name {
+        color: var(--Text-2, #3c4043);
+        font-family: font-family-regular;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px; /* 157.143% */
+        flex: 1;
+        @include ellipsis;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepTwo.vue b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepTwo.vue
new file mode 100644
index 0000000..84b2d06
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepTwo.vue
@@ -0,0 +1,253 @@
+<template>
+  <div class="table-wrap flex h-448px">
+    <div class="left flex-1 pr-12px flex flex-col">
+      <div class="flex items-center mb-16px">
+        <a-input
+          v-model="query.name"
+          class="w-220px mr-16px"
+          placeholder="搜索账号"
+          size="medium"
+          allow-clear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
+        <a-select
+          v-model="query.platform"
+          class="mr-16px w-160px"
+          size="medium"
+          placeholder="选择平台"
+          allow-clear
+          @change="handleSearch"
+        >
+          <a-option
+            v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS"
+            :key="index"
+            :value="item.value"
+            :label="item.label"
+            >{{ item.label }}</a-option
+          >
+        </a-select>
+        <a-select
+          v-model="query.operator_id"
+          size="medium"
+          placeholder="选择运营人员"
+          class="w-160px"
+          allow-clear
+          @change="handleSearch"
+        >
+          <a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">
+            {{ item.name }}
+          </a-option>
+        </a-select>
+      </div>
+      <a-table
+        ref="tableRef"
+        :data="dataSource"
+        column-resizable
+        row-key="id"
+        :row-selection="rowSelection"
+        :pagination="false"
+        :scroll="{ x: '100%', y: '100%' }"
+        class="flex-1 overflow-hidden"
+        :selected-keys="selectedRowKeys"
+        bordered
+        @select="handleSelect"
+        @select-all="handleSelectAll"
+      >
+        <template #empty>
+          <NoData />
+        </template>
+        <template #columns>
+          <a-table-column
+            v-for="column in TABLE_COLUMNS"
+            :key="column.dataIndex"
+            :data-index="column.dataIndex"
+            :fixed="column.fixed"
+            :width="column.width"
+            :min-width="column.minWidth"
+            :sortable="column.sortable"
+            :align="column.align"
+            ellipsis
+            tooltip
+          >
+            <template #title>
+              <div class="flex items-center">
+                <span class="cts mr-4px">{{ column.title }}</span>
+                <a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
+                  <icon-question-circle class="tooltip-icon color-#737478" size="16" />
+                </a-tooltip>
+              </div>
+            </template>
+
+            <template #cell="{ record }">
+              <template v-if="column.dataIndex === 'platform'">
+                <img :src="getMediaAccountPlatformLogo(record.platform)" width="19" height="19" />
+              </template>
+              <template v-else>
+                {{ formatTableField(column, record, true) }}
+              </template>
+            </template>
+          </a-table-column>
+        </template>
+      </a-table>
+    </div>
+    <div class="right w-320px px-12px flex flex-col">
+      <div class="flex justify-between">
+        <p class="mb-16px s1">{{ `已选择（${selectedRows?.length ?? 0}）` }}</p>
+        <a-button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</a-button>
+      </div>
+      <div class="flex-1 overflow-y-auto">
+        <div class="flex flex-wrap" v-if="selectedRows?.length">
+          <div class="tag-item mr-8px mb-8px" v-for="item in selectedRows" :key="item.id">
+            <span class="name mr-4px">{{ item.name || '-' }}</span>
+            <icon-close size="12" class="color-#3C4043 cursor-pointer" @click="onDelete(item)" />
+          </div>
+        </div>
+        <NoData v-else text="暂无账号" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { MEDIA_ACCOUNT_PLATFORMS, getMediaAccountPlatformLogo } from '@/utils/platform';
+import { formatTableField } from '@/utils/tools';
+
+import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+
+const TABLE_COLUMNS = [
+  {
+    title: '账号名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '平台',
+    dataIndex: 'platform',
+    width: 80,
+  },
+  {
+    title: '运营人员',
+    dataIndex: 'operator.name',
+    width: 140,
+  },
+];
+const emit = defineEmits(['update:formQuery']);
+
+const props = defineProps({
+  formQuery: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, handleSelectAll } =
+  useTableSelectionWithPagination({
+    onSelectChange: () => {
+      updateFormQuery();
+    },
+  });
+
+const query = ref({
+  name: '',
+  operator_id: '',
+  platform: '',
+});
+const operators = ref([]);
+const allData = ref([]);
+
+const updateFormQuery = () => {
+  emit('update:formQuery', {
+    ...props.formQuery,
+    media_account_ids: selectedRowKeys.value,
+  });
+};
+const handleSearch = () => {
+  const { name, platform, operator_id } = query.value;
+  dataSource.value = allData.value.filter((item) => {
+    const nameMatch = name === '' ? true : item.name.includes(name);
+    const platformMatch = platform === '' ? true : item.platform === platform;
+    const operatorIdMatch = operator_id === '' ? true : item.operator_id === operator_id;
+    return nameMatch && platformMatch && operatorIdMatch;
+  });
+};
+
+const getOperators = async () => {
+  const { code, data } = await fetchAccountOperators();
+  if (code === 200) {
+    operators.value = data;
+  }
+};
+const getTableData = async () => {
+  const { code, data } = await getMediaAccountList();
+  if (code === 200) {
+    allData.value = data ?? [];
+    dataSource.value = data ?? [];
+    initSelect();
+  }
+};
+const initSelect = () => {
+  if (props.formQuery.media_account_ids?.length) {
+    selectedRowKeys.value = props.formQuery.media_account_ids;
+    selectedRows.value = dataSource.value.filter((v) => selectedRowKeys.value.includes(v.id));
+  }
+};
+
+const onClearSelect = () => {
+  selectedRowKeys.value = [];
+  selectedRows.value = [];
+  updateFormQuery();
+};
+
+const onDelete = (item) => {
+  const { id } = item;
+  selectedRowKeys.value = selectedRowKeys.value.filter((v) => v !== id);
+  selectedRows.value = selectedRows.value.filter((v) => v.id !== id);
+  updateFormQuery();
+};
+
+onMounted(() => {
+  getOperators();
+  getTableData();
+});
+</script>
+
+<style lang="scss" scoped>
+.table-wrap {
+  .s1 {
+    color: var(--Text-2, #3c4043);
+    font-family: font-family-regular;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+  }
+  .left {
+    border-right: 1px solid var(--Border-2, #e6e6e8);
+    :deep(.arco-table) {
+    }
+  }
+  .right {
+    .tag-item {
+      width: fit-content;
+      display: flex;
+      height: 24px;
+      padding: 0px 8px;
+      align-items: center;
+      border-radius: 2px;
+      background: var(--BG-200, #f2f3f5);
+      .name {
+        color: var(--Text-2, #3c4043);
+        font-family: font-family-regular;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px; /* 157.143% */
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/property-marketing/put-account/account-dashboard/index.vue b/src/views/property-marketing/put-account/account-dashboard/index.vue
index 9a5fa7f..285ff5b 100644
--- a/src/views/property-marketing/put-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/index.vue
@@ -74,7 +74,7 @@
 </template>
 <script setup lang="ts">
 import EchartsItem from './components/echarts-item/index';
-import { PLATFORM_LIST } from '../common_constants';
+import { PLATFORM_LIST } from '@/utils/platform';
 import {
   getPlacementAccountsTrend,
   getPlacementAccountProjectsTrend,
diff --git a/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue b/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
index 69ada73..5b37828 100644
--- a/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
@@ -77,7 +77,7 @@
 
 <script setup>
 import { defineProps, ref, computed } from 'vue';
-import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
+import { PLATFORM_LIST } from '@/utils/platform';
 import { EnumStatus } from '@/views/property-marketing/put-account/components/status-select/constants';
 
 import { formatNumberShow, exactFormatTime } from '@/utils/tools';
diff --git a/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue b/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
index cc27008..05aaeda 100644
--- a/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
@@ -148,7 +148,7 @@ import { ref, defineEmits } from 'vue';
 import AuthorizedAccountModal from '../authorized-account-modal';
 // import ImportPromptModal from '../import-prompt-modal';
 import StatusBox from '../status-box';
-import { PLATFORM_LIST, ENUM_PLATFORM } from '@/views/property-marketing/put-account/common_constants';
+import { PLATFORM_LIST, ENUM_PUT_ACCOUNT_PLATFORM } from '@/utils/platform';
 
 import {
   postPlacementAccounts,
@@ -292,7 +292,7 @@ const handleBatchImport = async () => {
 
 const handleAdd = async () => {
   // 聚光无子账号
-  if (form.value.platform === ENUM_PLATFORM.jg) {
+  if (form.value.platform === ENUM_PUT_ACCOUNT_PLATFORM.jg) {
     const { code, data } = await postPlacementAccounts(form.value);
     if (code === 200) {
       update();
diff --git a/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue b/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
index eff84ab..a0f2a19 100644
--- a/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
@@ -67,7 +67,6 @@
 import dayjs from 'dayjs';
 import { defineExpose, ref, computed, defineEmits } from 'vue';
 import { exactFormatTime } from '@/utils/tools';
-import { ENUM_PLATFORM } from '@/views/property-marketing/put-account/common_constants';
 import {
   putPlacementAccountsAuthorized,
   getPlacementAccountsAuthorizedStatus,
diff --git a/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue b/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
index 0968c71..850b626 100644
--- a/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
@@ -66,7 +66,7 @@
 <script setup>
 import { defineEmits, defineProps } from 'vue';
 import { getPlacementAccountOperators } from '@/api/all/propertyMarketing';
-import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
+import { PLATFORM_LIST } from '@/utils/platform';
 import StatusSelect from '@/views/property-marketing/put-account/components/status-select';
 import OperatorSelect from '@/views/property-marketing/put-account/components/operator-select';
 
diff --git a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/guideListHistory.vue b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/guideListHistory.vue
index 6327cad..4082779 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/guideListHistory.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/guideListHistory.vue
@@ -31,7 +31,7 @@
 </template>
 <script setup lang="ts">
 import { IconDelete } from '@arco-design/web-vue/es/icon';
-import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
+import { PLATFORM_LIST } from '@/utils/platform';
 import { Message } from '@arco-design/web-vue';
 
 const columns = [
diff --git a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
index 1d3fd84..f09d347 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
@@ -54,7 +54,7 @@
 
 <script setup lang="ts">
 import { defineEmits, defineProps } from 'vue';
-import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
+import { PLATFORM_LIST } from '@/utils/platform';
 import AccountSelect from '@/views/components/common/AccountSelect.vue';
 import PlanSelect from '@/views/components/common/PlanSelect.vue';
 
diff --git a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue
index 2008368..b0a02d3 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue
@@ -92,7 +92,7 @@
   </view>
 </template>
 <script setup lang="ts">
-import { PLATFORM_LIST } from '../../../common_constants';
+import { PLATFORM_LIST } from '@/utils/platform';
 
 const props = defineProps({
   listData: {
diff --git a/src/views/property-marketing/put-account/investment-guidelines/detail.vue b/src/views/property-marketing/put-account/investment-guidelines/detail.vue
index 8332793..df47f0d 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/detail.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/detail.vue
@@ -77,7 +77,7 @@ import { reactive, ref } from 'vue';
 
 import MonthData from './components/month-data/index.vue';
 import PlacementSuggestions from './components/placement-suggestions/index.vue';
-import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants.ts';
+import { PLATFORM_LIST } from '@/utils/platform';
 import { getPlacementGuideDetail } from '@/api/all/propertyMarketing';
 import { useRoute } from 'vue-router';
 import { uploadPdf } from '@/views/property-marketing/put-account/investment-guidelines/constants';
diff --git a/vite.config.ts b/vite.config.ts
index 0158ad7..6e762d7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -20,7 +20,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: `@import "@/styles/lib/variable.scss";`,
+          additionalData: `@import "@/styles/lib/variable.scss";@import "@/styles/mixins/index.scss";`,
         },
       },
     },
@@ -40,7 +40,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
           // 目标地址
-          target: 'https://lingjiapi.lvfunai.com/api',
+          target: 'http://192.168.40.22/api',
         },
       },
     },