feat: 添加自定义样式支持，优化任务卡片和标题组件的交互逻辑

packages/app/src/components/card.vue

@@ -4,12 +4,17 @@ defineProps({
     type: String || (Array as PropType<string | string[]>),
     default: () => '',
   },
+  customStyle: {
+    type: String,
+    default: () => '',
+  },
 })
 </script>
 <template>
   <view
     class="rounded-2xl bg-white shadow-[0_16rpx_20rpx_-10rpx_rgba(0,0,0,0.05)] p-3.5 overflow-hidden box-border"
     :class="customClass"
+    :style="customStyle"
   >
     <slot></slot>
   </view>

packages/merchant/src/components/section-heading.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { right } from '@/core/libs/svgs'
+import { right } from '../core/libs/svgs'
 
 const props = defineProps({
   customClass: {
@@ -10,35 +10,76 @@ const props = defineProps({
     type: String,
     default: () => '',
   },
+  subtitle: {
+    type: String,
+    default: undefined,
+  },
   path: {
     type: String as PropType<string | undefined>,
     default: () => undefined,
     required: false,
   },
   size: {
-    type: String as PropType<'base' | 'xl'>,
+    type: String as PropType<'sm' | 'base' | 'lg' | 'xl'>,
     default: () => 'xl',
   },
+  endText: {
+    type: String,
+    default: () => '',
+  },
+  endArrow: {
+    type: Boolean,
+    default: () => false,
+  },
+  endClass: {
+    type: String,
+    default: '',
+  },
+  dark: {
+    type: Boolean,
+    default: false,
+  },
 })
 const handleMore = async () => {
-  await uni.navigateTo({ url: props.path })
+  props.path && (await uni.navigateTo({ url: props.path }))
 }
 </script>
 <template>
-  <view class="flex justify-between items-center" :class="[customClass]">
+  <view
+    class="flex justify-between items-center gap-2.5"
+    :class="[customClass]"
+    @click="handleMore"
+  >
     <div
       class="font-normal"
-      :class="[`text-${size}`, { base: 'text-black/90', xl: 'text-black' }[size]]"
+      :class="[
+        `text-${size}`,
+        (dark
+          ? { sm: 'text-white', base: 'text-white', lg: 'text-white', xl: 'text-white' }
+          : { sm: 'text-black/90', base: 'text-black/90', lg: 'text-white', xl: 'text-black' })[
+          size
+        ],
+      ]"
     >
       {{ title }}
     </div>
-    <!-- <div
-      v-if="path"
-      class="text-right text-black/30 text-sm font-normal leading-tight"
-      @click="handleMore"
+    <div class="text-black/60 text-xs font-normal font-['PingFang_SC'] leading-[10.18px]">
+      {{ subtitle }}
+    </div>
+    <div class="overflow-hidden flex-1">
+      <slot name="start"></slot>
+    </div>
+    <template v-if="$slots.append">
+      <slot name="append"></slot>
+    </template>
+    <div
+      v-else
+      class="flex items-center gap-1 text-right text-black/30 text-sm font-normal leading-tight"
     >
-      查看全部
-      <wd-img :src="right" width="10" height="10"></wd-img>
-    </div> -->
+      <template v-if="endText ?? '' !== ''">{{ endText }}</template>
+      <template v-if="path || endArrow">
+        <wd-img :src="right" width="12" height="12"></wd-img>
+      </template>
+    </div>
   </view>
 </template>

packages/merchant/src/composables/task.ts

@@ -1,29 +1,32 @@
 export const useTask = () => {
-  const types = ref({
+  const types = ref<any>({
     // 0: { title: '团队任务', bg: '', bgClass: 'bg-gradient-to-r from-[#cfe0ff] to-[#e1ecff]' },
     1: {
       title: '团队任务',
       bg: '',
       bgClass: 'bg-gradient-to-r from-[#cfe0ff] to-[#e1ecff]',
+      bgStyle: 'background: linear-gradient(90deg, #cfe0ff 2.55%, #e1ecff 99.52%);',
       color: '#2357e9',
     },
     2: {
       title: '抢单任务',
       bg: '',
       bgClass: 'bg-gradient-to-r from-[#ffcfcf] to-[#ffeae1]',
+      bgStyle: 'background: linear-gradient(90deg, #ffcfcf 2.55%, #ffeae1 99.52%);',
       color: '#f04c47',
     },
     3: {
       title: '指定任务',
       bg: '',
       bgClass: 'bg-gradient-to-r from-[#ffe8cf] to-[#fff3e1]',
+      bgStyle: 'background: linear-gradient(90deg, #ffe8cf 2.55%, #fff3e1 99.52%);',
       color: '#f89a2e',
     },
   })
-  const getBgClass = (type: number) => types.value[type].bgClass
+  const getBgClass = (type: 1 | 2 | 3) => types.value[type].bgClass
   return {
     types,
     getBgClass,
-    getColor: (type: number) => types.value[type].color,
+    getColor: (type: 1 | 2 | 3) => types.value[type].color,
   }
 }

packages/merchant/src/pages/agent/components/task-card.vue

@@ -5,12 +5,13 @@ import { useUserStore } from '../../../store'
 import Card from '@designer-hub/app/src/components/card.vue'
 import dayjs from 'dayjs'
 import { useTask } from '../../../composables/task'
+import { AgentTask } from '@designer-hub/app/src/core/libs/models'
 const props = withDefaults(defineProps<{ options: any }>(), { options: () => ({}) })
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
 
 const { types } = useTask()
-const status = ref({
+const status = ref<{ [key: number]: { title: string; bg: string; bgClass: string } }>({
   1: {
     title: '未开始',
     bg: 'bg-[#f04c47]',
@@ -22,13 +23,13 @@ const status = ref({
   5: { title: '未完成', bg: '', bgClass: 'bg-[#abacaf]' },
   6: { title: '待确认', bg: '', bgClass: 'bg-[#f04c47]' },
 })
-const acceptingOrders = async (item) => {
+const acceptingOrders = async (item: AgentTask) => {
   uni.showLoading()
   const res = await taskReceive({ brokerId: userInfo.value.userId, taskId: item.id, orders: true })
   uni.hideLoading()
   //   initData()
 }
-const acceptingNoOrders = async (item) => {
+const acceptingNoOrders = async (item: AgentTask) => {
   uni.showLoading()
   const res = await taskReceive({ brokerId: userInfo.value.userId, taskId: item.id, orders: false })
   uni.hideLoading()
@@ -39,16 +40,17 @@ const toDetail = () =>
 </script>
 <template>
   <Card
-    :custom-class="`${types[options.taskType].bgClass} p-0`"
+    :custom-class="`p-0 bg-gradient-to-r`"
     style="padding: 0"
+    :custom-style="types[options.taskType as 1 | 2 | 3].bgStyle"
     @click="toDetail"
   >
     <div class="flex p-4 items-center">
       <div
-        :class="`${status[options.status].bgClass} w-[47px] h-[23px] px-1 rounded border justify-center items-center gap-2.5 inline-flex`"
+        :class="`${status[options.status]?.bgClass} w-[47px] h-[23px] px-1 rounded border justify-center items-center gap-2.5 inline-flex`"
       >
         <div class="text-right text-white text-xs font-normal font-['PingFang_SC'] leading-tight">
-          {{ status[options.status].title }}
+          {{ status[options.status as 1 | 2 | 3].title }}
         </div>
       </div>
       <div class="mx-2.5 text-black/90 text-lg font-normal font-['PingFang_SC'] leading-none">

packages/merchant/src/pages/agent/tasks/index.vue

@@ -14,16 +14,13 @@ import { storeToRefs } from 'pinia'
 import dayjs from 'dayjs'
 import PageHelperEvo from '@/components/page-helper-evo.vue'
 import { getTasks } from '../../../core/libs/agent-requests'
+import { useTask } from '../../../composables/task'
+import { AgentTask } from '@designer-hub/app/src/core/libs/models'
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
+const { types } = useTask()
 const tasksList = ref([])
-const types = ref({
-  // 0: { title: '团队任务', bg: '', bgClass: 'bg-gradient-to-r from-[#cfe0ff] to-[#e1ecff]' },
-  1: { title: '团队任务', bg: '', bgClass: 'bg-gradient-to-r from-[#cfe0ff] to-[#e1ecff]' },
-  2: { title: '抢单任务', bg: '', bgClass: 'bg-gradient-to-r from-[#ffcfcf] to-[#ffeae1]' },
-  3: { title: '指定任务', bg: '', bgClass: 'bg-gradient-to-r from-[#ffe8cf] to-[#fff3e1]' },
-})
-const status = ref({
+const status = ref<any>({
   1: {
     title: '未开始',
     bg: 'bg-[#f04c47]',
@@ -38,16 +35,16 @@ const status = ref({
 const query = computed(() => ({ brokerId: userInfo.value.userId }))
 
 // 状态（1-未开始，2-进行中，3-已撤回，4-已完成，5-未完成，6-待确认）
-const toDetail = async (item) => {
+const toDetail = async (item: AgentTask) => {
   await uni.navigateTo({ url: `/pages/home/tasks/detail/index?taskId=${item.id}` })
 }
-const acceptingOrders = async (item) => {
+const acceptingOrders = async (item: AgentTask) => {
   uni.showLoading()
   const res = await taskReceive({ brokerId: userInfo.value.userId, taskId: item.id, orders: true })
   uni.hideLoading()
   initData()
 }
-const acceptingNoOrders = async (item) => {
+const acceptingNoOrders = async (item: AgentTask) => {
   uni.showLoading()
   const res = await taskReceive({ brokerId: userInfo.value.userId, taskId: item.id, orders: false })
   uni.hideLoading()
@@ -75,7 +72,7 @@ onMounted(async () => {
   <PageHelperEvo :request="getTasks" :query="query">
     <template #default="{ source }">
       <div class="flex-grow flex flex-col gap-4 p-4">
-        <template v-for="item in source.list" :key="item.id">
+        <template v-for="item in source?.list" :key="item.id">
           <div @click="toDetail(item)">
             <Card :custom-class="`${types[item.taskType].bgClass} p-0`" style="padding: 0">
               <div class="flex p-4 items-center">

packages/merchant/src/pages/home/index.vue

@@ -18,7 +18,7 @@ import {
   getTodos,
   scanCodeCheckPaper,
 } from '../../core/libs/requests'
-import SectionHeading from '@designer-hub/app/src/components/section-heading.vue'
+import SectionHeading from '@/components/section-heading.vue'
 import Card from '@designer-hub/app/src/components/card.vue'
 import { merchantPageHeaderBg, scanIcon, bookIcon } from '@designer-hub/assets/src/svgs'
 import { useUserStore } from '../../store'
@@ -39,14 +39,14 @@ const { isLogined, userInfo, isAgent, isMerchant } = storeToRefs(userStore)
 const orderAmount = ref()
 const pointsAmount = computed(() => orderAmount.value * 10)
 const todosQuery = computed(() => ({
-  brokerId: userInfo.value.userId.toString(),
+  brokerId: String(userInfo.value.userId),
   executionTime: [
     dayjs().startOf('days').format('YYYY-MM-DD HH:mm:ss'),
     dayjs().endOf('days').format('YYYY-MM-DD HH:mm:ss'),
   ].join(','),
 }))
 const designerPointsActivitiesQuery = computed(() => ({
-  brokerId: userInfo.value.userId.toString(),
+  brokerId: String(userInfo.value.userId),
 }))
 const { data: tasks, run: setTasks } = useRequest(
   () => getTasks({ brokerId: userInfo.value.userId }),
@@ -142,7 +142,7 @@ onShareAppMessage(() => ({}))
         <div>
           <SectionHeading
             title="任务"
-            path="/pages/home/tasks/index"
+            path="/pages/agent/tasks/index"
             end-text="查看全部"
             custom-class="mb-5"
           ></SectionHeading>
@@ -165,42 +165,42 @@ onShareAppMessage(() => ({}))
                 {
                   label: '关系报备',
                   color: 'white',
-                  path: '/pages/home/agent/report-infos/index',
+                  path: '/pages/agent/report-infos/index',
                 },
                 {
                   label: '全部设计师',
                   color: '#7199FF',
-                  path: '/pages/designer/index?title=全部设计师',
+                  path: '/pages/agent/designer/index?title=全部设计师',
                 },
                 {
                   label: '重点跟进设计师',
                   color: '#FF523F',
-                  path: '/pages/designer/index?title=重点跟进设计师&tags=1',
+                  path: '/pages/agent/designer/index?title=重点跟进设计师&tags=1',
                 },
                 {
                   label: '本月新增设计师',
                   color: '#FFE786',
-                  path: '/pages/designer/index?title=本月新增设计师&tags=2',
+                  path: '/pages/agent/designer/index?title=本月新增设计师&tags=2',
                 },
                 {
                   label: '超过30天未跟进',
                   color: '#89F4E3',
-                  path: '/pages/designer/index?title=超过30天未跟进&tags=3',
+                  path: '/pages/agent/designer/index?title=超过30天未跟进&tags=3',
                 },
                 {
                   label: '超过60天未产生积分设计师',
                   color: '#FFBA6A',
-                  path: '/pages/designer/index?title=超过60天未产生积分设计师&tags=4',
+                  path: '/pages/agent/designer/index?title=超过60天未产生积分设计师&tags=4',
                 },
                 {
                   label: '超过60天未消耗积分设计师',
                   color: '#C494FF',
-                  path: '/pages/designer/index?title=超过60天未消耗积分设计师&tags=5',
+                  path: '/pages/agent/designer/index?title=超过60天未消耗积分设计师&tags=5',
                 },
                 {
                   label: '未成交过设计师',
                   color: '#FF9EE2',
-                  path: '/pages/designer/index?title=未成交过设计师&tags=6',
+                  path: '/pages/agent/designer/index?title=未成交过设计师&tags=6',
                 },
               ]"
               :key="label"
@@ -225,7 +225,7 @@ onShareAppMessage(() => ({}))
           >
             <template #default="{ source }">
               <div class="flex flex-col gap-4">
-                <template v-for="(it, i) in source.list" :key="i">
+                <template v-for="(it, i) in source?.list" :key="i">
                   <Card>
                     <div
                       class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-none"