feat: 项目列表、统一4种状态color色值

src/styles/components/button.scss

@@ -1,5 +1,3 @@
-$disabled-ele: '.arco-btn-disabled';
-
 .arco-btn {
   border-radius: 2px;
   border: 1px solid #d7d7d9 !important;
@@ -22,32 +20,114 @@ $disabled-ele: '.arco-btn-disabled';
 }
 
 .arco-btn-primary {
-  background-color: #6d4cfe !important;
+  background-color: $color-primary !important;
   border: none !important;
   color: #fff !important;
   &.arco-btn-disabled {
     color: #fff !important;
-    background-color: #c5b7ff !important;
+    background-color: $color-primary-3 !important;
   }
   &:not(.arco-btn-disabled) {
     &:hover {
       color: #fff !important;
-      background-color: #8a70fe !important;
+      background-color: $color-primary-5 !important;
+    }
+  }
+
+  //success
+  &.arco-btn-status-success {
+    background-color: $color-success !important;
+    &.arco-btn-disabled {
+      background-color: $color-success-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        background-color: $color-success-5 !important;
+      }
+    }
+  }
+
+  // danger
+  &.arco-btn-status-danger {
+    background-color: $color-error !important;
+    &.arco-btn-disabled {
+      background-color: $color-error-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        background-color: $color-error-5 !important;
+      }
+    }
+  }
+
+  // warning
+  &.arco-btn-status-warning {
+    background-color: $color-warning !important;
+    &.arco-btn-disabled {
+      background-color: $color-warning-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        background-color: $color-warning-5 !important;
+      }
     }
   }
 }
 
 .arco-btn-outline {
-  border: 1px solid #6d4cfe !important;
+  border: 1px solid $color-primary !important;
-  color: #6d4cfe !important;
+  color: $color-primary !important;
   &.arco-btn-disabled {
-    border-color: #c5b7ff !important;
+    border-color: $color-primary-3 !important;
-    color: #c5b7ff !important;
+    color: $color-primary-3 !important;
   }
   &:not(.arco-btn-disabled) {
     &:hover {
-      border-color: #8a70fe !important;
+      border-color: $color-primary-5 !important;
-      color: #8a70fe !important;
+      color: $color-primary-5 !important;
+    }
+  }
+
+  &.arco-btn-status-success {
+    border: 1px solid $color-success !important;
+    color: $color-success !important;
+    &.arco-btn-disabled {
+      border-color: $color-success-3 !important;
+      color: $color-success-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        border-color: $color-success-5 !important;
+        color: $color-success-5 !important;
+      }
+    }
+  }
+  &.arco-btn-status-danger {
+    border: 1px solid $color-error !important;
+    color: $color-error !important;
+    &.arco-btn-disabled {
+      border-color: $color-error-3 !important;
+      color: $color-error-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        border-color: $color-error-5 !important;
+        color: $color-error-5 !important;
+      }
+    }
+  }
+  &.arco-btn-status-warning {
+    border: 1px solid $color-warning !important;
+    color: $color-warning !important;
+    &.arco-btn-disabled {
+      border-color: $color-warning-3 !important;
+      color: $color-warning-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        border-color: $color-warning-5 !important;
+        color: $color-warning-5 !important;
+      }
     }
   }
 }
@@ -55,13 +135,49 @@ $disabled-ele: '.arco-btn-disabled';
 .arco-btn-text {
   background-color: transparent !important;
   border: none !important;
-  color: #6d4cfe !important;
+  color: $color-primary !important;
   &.arco-btn-disabled {
-    color: #c5b7ff !important;
+    color: $color-primary-2 !important;
   }
   &:not(.arco-btn-disabled) {
     &:hover {
-      color: #8a70fe !important;
+      color: $color-primary-5 !important;
+    }
+  }
+
+  &.arco-btn-status-success {
+    color: $color-success !important;
+    &.arco-btn-disabled {
+      color: $color-success-2 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        color: $color-success-5 !important;
+      }
+    }
+  }
+
+  &.arco-btn-status-danger {
+    color: $color-error !important;
+    &.arco-btn-disabled {
+      color: $color-error-2 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        color: $color-error-5 !important;
+      }
+    }
+  }
+
+  &.arco-btn-status-warning {
+    color: $color-warning !important;
+    &.arco-btn-disabled {
+      color: $color-warning-2 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        color: $color-warning-5 !important;
+      }
     }
   }
 }

src/styles/lib/reset.scss

@@ -11,7 +11,7 @@ html,
 body {
   background: $color-background;
   font-family: $font-family-regular;
-  font-size: $font-size-14;
+  font-size: 14px;
   -webkit-print-color-adjust: exact;
 }
 

src/styles/lib/variable.scss

@@ -12,4 +12,44 @@ $font-family-manrope-semiBold: 'Manrope-SemiBold';
 
 $color-background: #f9f9f9;
 
-$font-size-14: 14px;
+$color-primary: #6d4cfe;   // 常规
+$color-primary-5: #8A70FE; // hover
+$color-primary-7: #573DCB; // click
+$color-primary-3: #A794FE; // disabled
+$color-primary-2: #C5B7FF; // text disabled
+$color-primary-1: #F0EDFF; // 浅色
+
+$color-success: #25C883;      
+$color-success-5: #57CF9C;
+$color-success-7: #1BAE71;
+$color-success-3: #81DBB5;
+$color-success-2: #ABE7CE;
+$color-success-1: #EBF7F2;  
+
+$color-warning: #FFAE00;
+$color-warning-5: #FFBE33;
+$color-warning-7: #CC8B00;
+$color-warning-3: #FFCF66;
+$color-warning-2: #FFDF99;  
+$color-warning-1: #FFF7E5;  
+
+$color-error: #F64B31;
+$color-error-5: #F86F5A;
+$color-error-7: #C53C27;
+$color-error-3: #FA9383;
+$color-error-2: #FBB7AD;
+$color-error-1: #FFE9E7;
+
+$color-blue: #2A59F3;
+$color-blue-5: #557AF6;
+$color-blue-7: #2247C2;
+$color-blue-3: #7F9CF8;
+$color-blue-2: #AABDFA;
+$color-blue-1: #E5ECFF;
+
+$color-teal: #39C6E9;
+$color-teal-5: #60D2ED;
+$color-teal-7: #2E9EBA;
+$color-teal-3: #88DDF2;
+$color-teal-2: #B0E8F6;
+$color-teal-1: #E1F9FF;

src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue

@@ -12,7 +12,7 @@
         <a-step v-for="(step, index) in STEPS" :key="index">{{ step.label }}</a-step>
       </a-steps>
 
-      <component :is="activeComp" v-model:formQuery="formQuery" />
+      <component :is="activeComp" v-model:formQuery="formQuery" ref="compRef" />
     </div>
     <template #footer>
       <div class="flex justify-between items-center w-100%">
@@ -29,6 +29,8 @@
 </template>
 
 <script setup>
+import { postAddProject, putProject, getProjectDetail } from '@/api/all/propertyMarketing';
+
 import StepOne from './stepOne.vue';
 import StepTwo from './stepTwo.vue';
 import StepThree from './stepThree.vue';
@@ -66,21 +68,40 @@ const INITIAL_QUERY = {
   work_ids: [],
 };
 
+const update = inject('update');
+
 const visible = ref(false);
-const emits = defineEmits(['update']);
 const currentStep = ref(1);
 const formQuery = ref(cloneDeep(INITIAL_QUERY));
+const compRef = ref(null);
+const projectId = ref(null);
 
 const isFirstStep = computed(() => currentStep.value === 1);
+const isEdit = computed(() => projectId.value);
 const isLastStep = computed(() => currentStep.value === STEPS.length);
 const activeComp = computed(() => STEPS.find((v) => v.index === currentStep.value)?.comp ?? null);
 
-const open = () => {
+const open = (id = null) => {
+  projectId.value = id;
+
+  if (id) {
+    getDetail();
+  }
+
   visible.value = true;
 };
+const getDetail = (id) => {
+  getProjectDetail(projectId.value).then((res) => {
+    if (res.code === 200) {
+      formQuery.value = res.data;
+    }
+  });
+};
 const onClose = () => {
   currentStep.value = 1;
   formQuery.value = cloneDeep(INITIAL_QUERY);
+  projectId.value = '';
+  compRef.value?.reset?.();
 
   visible.value = false;
 };
@@ -88,15 +109,44 @@ const onCancel = () => {
   visible.value = false;
 };
 
-const onSubmit = () => {
+const onSubmit = async () => {
-  console.log(formQuery.value);
+  if (isFirstStep.value) {
+    const valid = await compRef.value.validate();
+    if (!valid) {
+      return;
+    }
+  }
+
   if (isLastStep.value) {
-    console.log('onSubmit');
+    isEdit.value ? handleEdit() : handleAdd();
   } else {
     currentStep.value++;
   }
 };
-const setCurrent = (current) => {
+const handleAdd = () => {
+  postAddProject(formQuery.value).then((res) => {
+    if (res.code === 200) {
+      onClose();
+      update();
+    }
+  });
+};
+const handleEdit = () => {
+  putProject({ id: projectId.value, ...formQuery.value }).then((res) => {
+    if (res.code === 200) {
+      onClose();
+      update();
+    }
+  });
+};
+
+const setCurrent = async (current) => {
+  if (isFirstStep.value) {
+    const valid = await compRef.value.validate();
+    if (!valid) {
+      return;
+    }
+  }
   currentStep.value = current;
 };
 const onPrev = () => {

src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepOne.vue

@@ -38,6 +38,17 @@ const props = defineProps({
 const formRef = ref(null);
 
 const rules = {
-  name: [{ required: true, message: '项目名称' }],
+  name: [{ required: true, message: '请输入项目名称' }],
 };
+
+const validate = async () => {
+  const errors = await formRef.value.validate();
+ return !errors
+};
+
+const reset = () => {
+  formRef.value.resetFields();
+};
+
+defineExpose({ validate, reset });
 </script>

src/views/property-marketing/project-manage/project-list/components/project-table/delete-project-modal.vue

@@ -0,0 +1,63 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-26 17:44:16
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="删除项目"
+    width="480px"
+    modal-class="project-manage-modal"
+    @close="onClose"
+  >
+    <div class="flex items-center">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除 {{ projectName }} 这个项目吗？</span>  
+    </div>
+    <template #footer>
+      <a-button size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px" status="danger" size="large" @click="onDelete"
+        >确认删除</a-button
+      >
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteProject } from '@/api/all/propertyMarketing';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const update = inject('update');
+
+const visible = ref(false);
+const projectId = ref(null);
+const projectName = ref('');
+
+const isBatch = computed(() => Array.isArray(projectId.value));
+
+function onClose() {
+  visible.value = false;
+  projectId.value = null;
+  projectName.value = '';
+}
+
+const open = (record) => {
+  const { id = null, name = '' } = record;
+  projectId.value = id;
+  projectName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const { code } = await deleteProject(projectId.value);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    update()
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>

src/views/property-marketing/project-manage/project-list/index.vue

@@ -38,7 +38,8 @@
       </div>
     </div>
 
-    <AddProjectModal ref="addProjectModalRef"/>
+    <AddProjectModal ref="addProjectModalRef" />
+    <DeleteProjectModal ref="deleteProjectModalRef" />
   </div>
 </template>
 
@@ -50,6 +51,7 @@ import { getProjects } from '@/api/all/propertyMarketing';
 import FilterBlock from './components/filter-block';
 import ProjectTable from './components/project-table';
 import AddProjectModal from './components/add-project-modal';
+import DeleteProjectModal from './components/project-table/delete-project-modal.vue';
 
 import icon1 from '@/assets/img/media-account/icon-add.png';
 
@@ -63,20 +65,21 @@ const { dataSource, pageInfo, onPageChange, onPageSizeChange, resetPageInfo } =
 });
 
 const addProjectModalRef = ref(null);
+const deleteProjectModalRef = ref(null);
 
 const query = ref(cloneDeep(INITIAL_QUERY));
 
 const getData = async () => {
-    const { page, page_size } = pageInfo.value;
+  const { page, page_size } = pageInfo.value;
-    const { code, data } = await getProjects({
+  const { code, data } = await getProjects({
-      ...query.value,
+    ...query.value,
-      page,
+    page,
-      page_size,
+    page_size,
-    });
+  });
-    if (code === 200) {
+  if (code === 200) {
-      dataSource.value = data?.data ?? [];
+    dataSource.value = data?.data ?? [];
-      pageInfo.value.total = data.total;
+    pageInfo.value.total = data.total;
-    }
+  }
 };
 const handleSearch = () => {
   reload();
@@ -103,10 +106,11 @@ const handleSorterChange = (column, order) => {
 };
 
 const handleDelete = (item) => {
-  console.log('handleDelete', item);
+  const { id, name } = item;
+  deleteProjectModalRef.value?.open({ id, name: `“${name}”` });
 };
 const handleEdit = (item) => {
-  console.log('handleDelete', item);
+  addProjectModalRef.value?.open(item.id);
 };
 
 onMounted(() => {

src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue

@@ -2,10 +2,6 @@
  * @Author: RenXiaoDong
  * @Date: 2025-06-26 17:44:16
 -->
-<!--
- * @Author: RenXiaoDong
- * @Date: 2025-06-26 17:23:52
--->
 <template>
   <a-modal
     v-model:visible="visible"