全局任务配色

components/ContentDashboard.vue

@@ -16,7 +16,7 @@
           <uv-tags 
             v-if="item.label === '逾期任务'" 
             text="紧急"
-            type="error" 
+            :type="getTaskStatusType('overdue')" 
             size="mini" 
             plain
             :custom-style="{ marginTop: '4px' }"
@@ -24,7 +24,7 @@
           <uv-tags 
             v-else-if="item.label === '即将预期'" 
             text="注意"
-            type="warning" 
+            :type="getTaskStatusType('imminent')" 
             size="mini" 
             plain
             :custom-style="{ marginTop: '4px' }"
@@ -38,7 +38,13 @@
       <view class="overdue-card task-card-base task-card-overdue" v-for="task in overdueTasks" :key="task.id" @click="goToTaskDetail(task)">
         <view class="task-header">
           <view class="task-badge-wrapper">
-            <uv-tags text="逾期" type="error" size="mini"></uv-tags>
+            <uv-tags 
+              :text="getStatusText('overdue')" 
+              :type="getTaskStatusType('overdue')" 
+              size="mini"
+              :plain="false"
+              :custom-style="getTagCustomStyle('overdue')"
+            ></uv-tags>
           </view>
           <view class="task-date-wrapper">
             <text class="task-date">{{ task.date }}</text>
@@ -140,6 +146,7 @@
 
 <script setup>
 import { ref } from 'vue';
+import { getTaskStatusType, getTaskStatusStyle, getStatusText } from '@/utils/taskConfig.js';
 
 // 任务统计
 const taskStats = ref([
@@ -315,6 +322,16 @@ const getCustomerCardClass = (label) => {
   };
   return classMap[label] || '';
 };
+
+// 使用全局配置获取标签自定义样式
+const getTagCustomStyle = (status) => {
+  const styleConfig = getTaskStatusStyle(status);
+  return {
+    backgroundColor: styleConfig.backgroundColor,
+    color: styleConfig.color,
+    borderColor: styleConfig.borderColor
+  };
+};
 </script>
 
 <style lang="scss" scoped>

pages/task-detail/index.vue

@@ -9,18 +9,19 @@
           <text class="project-name">{{ task.project }}</text>
         </view>
         <view class="status-tags">
-          <text 
+          <uv-tags
             v-for="(status, index) in task.statusTags" 
             :key="index"
-            class="tag" 
+            :text="status"
-            :class="getTagClass(status)"
+            :type="getTagType(status)"
-          >
+            size="mini"
-            {{ status }}
+            :plain="false"
-          </text>
+            :custom-style="getTagStyle(status)"
+          ></uv-tags>
         </view>
       </view>
 
-      <!-- 基本信息区域 -->
+    <!-- 基本信息区域 -->
       <view class="basic-info">
         <view class="info-item">
           <text class="info-label">截止时间：</text>
@@ -147,6 +148,7 @@
 <script setup>
 import { ref, onMounted,  } from 'vue';
 import { onLoad,onShow } from '@dcloudio/uni-app';
+import { getStatusFromTagText, getTaskStatusType, getTaskStatusStyle } from '@/utils/taskConfig.js';
 
 // 当前激活的标签
 const activeTab = ref('info');
@@ -173,13 +175,13 @@ const formatTimeToChinese = (date) => {
 // 任务数据
 const task = ref({
   id: null,
-  name: "待办任务名称",
+        name: "待办任务名称",
-  project: "所属项目",
+        project: "所属项目",
   statusTags: ["已逾期", "紧急"],
-  deadline: "2025-10-14 18:00",
+        deadline: "2025-10-14 18:00",
-  creator: "张珊珊",
+        creator: "张珊珊",
-  responsible: "张珊珊、李志",
+        responsible: "张珊珊、李志",
-  publishTime: "2025-10-17",
+        publishTime: "2025-10-17",
   content: "任务内容任务。这里是详细的任务描述，可以包含多行文本。根据实际需求，这里可以展示任务的详细要求、步骤说明、注意事项等。任务内容应该清晰明了，便于负责人理解和执行。",
   submitRecords: [
     {
@@ -283,15 +285,21 @@ const previewAttachmentImage = (attachments, index) => {
   }
 };
 
-// 获取标签样式类
+// 获取标签类型（用于uv-tags组件）
-const getTagClass = (status) => {
+const getTagType = (tagText) => {
-  const statusMap = {
+  const status = getStatusFromTagText(tagText);
-    '已逾期': 'overdue',
+  return getTaskStatusType(status);
-    '紧急': 'urgent',
+};
-    '重要': 'important',
+
-    '普通': 'normal'
+// 获取标签样式（用于uv-tags组件）
+const getTagStyle = (tagText) => {
+  const status = getStatusFromTagText(tagText);
+  const styleConfig = getTaskStatusStyle(status);
+  return {
+    backgroundColor: styleConfig.backgroundColor,
+    color: styleConfig.color,
+    borderColor: styleConfig.borderColor
   };
-  return statusMap[status] || 'normal';
 };
 
 // 返回上一页
@@ -466,33 +474,6 @@ onShow(() => {
   flex-wrap: wrap;
 }
 
-.tag {
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.overdue {
-  background-color: #ffebee;
-  color: #d32f2f;
-}
-
-.urgent {
-  background-color: #fff3e0;
-  color: #f57c00;
-}
-
-.important {
-  background-color: #e3f2fd;
-  color: #1976d2;
-}
-
-.normal {
-  background-color: #f5f5f5;
-  color: #666;
-}
-
 /* 基本信息区域 */
 .basic-info {
   padding: 15px;
@@ -538,7 +519,7 @@ onShow(() => {
   position: relative;
   
   text {
-    font-size: 16px;
+  font-size: 16px;
     color: #666;
     font-weight: 500;
   }
@@ -546,7 +527,7 @@ onShow(() => {
   &.active {
     text {
       color: #1976d2;
-      font-weight: 600;
+  font-weight: 600;
     }
     
     &::after {

pages/task-list/index.vue

@@ -15,8 +15,10 @@
             <view class="task-badge-wrapper">
               <uv-tags 
                 :text="getStatusText(task.status)"
-                :type="getStatusType(task.status)"
+                :type="getTaskStatusType(task.status)"
                 size="mini"
+                :plain="false"
+                :custom-style="getTagCustomStyle(task.status)"
               ></uv-tags>
             </view>
             <view class="task-date-wrapper">
@@ -66,6 +68,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { onLoad } from '@dcloudio/uni-app';
+import { getStatusText, getTaskStatusType, getTaskStatusStyle } from '@/utils/taskConfig.js';
 
 // 获取页面参数
 const statusFilter = ref('');
@@ -180,26 +183,14 @@ const filteredTasks = computed(() => {
   return tasks.value.filter(task => task.status === statusFilter.value);
 });
 
-// 获取状态文本
+// 使用全局配置获取标签自定义样式
-const getStatusText = (status) => {
+const getTagCustomStyle = (status) => {
-  const statusTextMap = {
+  const styleConfig = getTaskStatusStyle(status);
-    'imminent': '即将逾期',
+  return {
-    'pending': '待完成',
+    backgroundColor: styleConfig.backgroundColor,
-    'completed': '已完成',
+    color: styleConfig.color,
-    'overdue': '逾期'
+    borderColor: styleConfig.borderColor
   };
-  return statusTextMap[status] || status;
-};
-
-// 获取状态类型（用于uv-tags）
-const getStatusType = (status) => {
-  const typeMap = {
-    'imminent': 'warning',
-    'pending': 'primary',
-    'completed': 'info',
-    'overdue': 'error'
-  };
-  return typeMap[status] || 'primary';
 };
 
 // 获取卡片样式类

utils/taskConfig.js

@@ -0,0 +1,127 @@
+/**
+ * 任务状态全局配置
+ * 包含任务状态的配色方案、类型映射等
+ */
+
+// 任务状态配色方案
+export const TASK_STATUS_COLORS = {
+  // 待完成任务
+  pending: {
+    backgroundColor: '#2885ff',
+    color: '#fff',
+    borderColor: '#2885ff',
+    type: 'primary'
+  },
+  // 即将逾期任务
+  imminent: {
+    backgroundColor: '#ff9800',
+    color: '#fff',
+    borderColor: '#ff9800',
+    type: 'warning'
+  },
+  // 已完成任务
+  completed: {
+    backgroundColor: '#909399',
+    color: '#fff',
+    borderColor: '#909399',
+    type: 'info'
+  },
+  // 逾期任务
+  overdue: {
+    backgroundColor: '#f56c6c',
+    color: '#fff',
+    borderColor: '#f56c6c',
+    type: 'error'
+  },
+  // 紧急标签
+  urgent: {
+    backgroundColor: '#f56c6c',
+    color: '#fff',
+    borderColor: '#f56c6c',
+    type: 'error'
+  },
+  // 重要标签
+  important: {
+    backgroundColor: '#2885ff',
+    color: '#fff',
+    borderColor: '#2885ff',
+    type: 'primary'
+  },
+  // 普通标签
+  normal: {
+    backgroundColor: '#909399',
+    color: '#fff',
+    borderColor: '#909399',
+    type: 'info'
+  }
+};
+
+// 状态文本映射
+export const STATUS_TEXT_MAP = {
+  'imminent': '即将逾期',
+  'pending': '待完成',
+  'completed': '已完成',
+  'overdue': '逾期',
+  'urgent': '紧急',
+  'important': '重要',
+  'normal': '普通'
+};
+
+// 状态类型映射（用于uv-tags组件的type属性）
+export const STATUS_TYPE_MAP = {
+  'imminent': 'warning',
+  'pending': 'primary',
+  'completed': 'info',
+  'overdue': 'error',
+  'urgent': 'error',
+  'important': 'primary',
+  'normal': 'info'
+};
+
+// 标签文本到状态的映射（用于任务详细页面）
+export const TAG_TEXT_TO_STATUS = {
+  '已逾期': 'overdue',
+  '紧急': 'urgent',
+  '重要': 'important',
+  '普通': 'normal',
+  '即将逾期': 'imminent',
+  '待完成': 'pending',
+  '已完成': 'completed'
+};
+
+/**
+ * 获取任务状态的自定义样式
+ * @param {string} status - 任务状态
+ * @returns {object} 样式对象
+ */
+export const getTaskStatusStyle = (status) => {
+  return TASK_STATUS_COLORS[status] || TASK_STATUS_COLORS.normal;
+};
+
+/**
+ * 获取任务状态的类型（用于uv-tags组件）
+ * @param {string} status - 任务状态
+ * @returns {string} uv-tags组件的type值
+ */
+export const getTaskStatusType = (status) => {
+  return STATUS_TYPE_MAP[status] || 'primary';
+};
+
+/**
+ * 获取状态文本
+ * @param {string} status - 任务状态
+ * @returns {string} 状态文本
+ */
+export const getStatusText = (status) => {
+  return STATUS_TEXT_MAP[status] || status;
+};
+
+/**
+ * 根据标签文本获取状态
+ * @param {string} tagText - 标签文本
+ * @returns {string} 任务状态
+ */
+export const getStatusFromTagText = (tagText) => {
+  return TAG_TEXT_TO_STATUS[tagText] || 'normal';
+};
+