czh-20260610-增加计划帮助页面

src/views/tasklist/components/TaskContent.vue

@@ -1,8 +1,23 @@
 <template>
   <div class="task-content">
+    <a-spin :spinning="props.loading" tip="加载中...">
     <div class="content-header">
       <template v-if="showListGroupView">
-        <h2 class="content-title">计划列表</h2>
+        <div class="content-header-row">
+          <div class="content-header-row-left">
+            <h2 class="content-title">计划列表</h2>
+            <a-tooltip title="新建清单">
+              <a-button type="text" size="small" class="add-list-btn" @click="onCreateListClick">
+                <Icon icon="ant-design:plus-outlined" />
+              </a-button>
+            </a-tooltip>
+          </div>
+          <a-tooltip title="使用帮助">
+            <a-button type="text" size="small" class="help-btn" @click="helpModalOpen = true">
+              <Icon icon="ant-design:question-circle-outlined" />
+            </a-button>
+          </a-tooltip>
+        </div>
       </template>
       <template v-else>
         <div class="content-header-left">
@@ -226,7 +241,7 @@
         <template #content>
           <div class="field-config-panel">
             <div class="field-config-title">字段配置</div>
-            <div v-for="field in FIELD_CONFIG" :key="field.key" class="field-config-item" @click="toggleField(field.key)">
+            <div v-for="field in taskContentFieldConfigs" :key="field.key" class="field-config-item" @click="toggleField(field.key)">
               <span>{{ field.label }}</span>
               <Icon
                 :icon="visibleFields.includes(field.key) ? 'ant-design:eye-outlined' : 'ant-design:eye-invisible-outlined'"
@@ -807,11 +822,14 @@
       :secret-level="currentList?.secretLevel || 1"
       @confirm="onUserSelectConfirm"
     />
+    <HelpModal v-model:open="helpModalOpen" />
+    </a-spin>
   </div>
 </template>
 
 <script lang="ts" setup>
   import { ref, computed, watch, nextTick } from 'vue';
+  import HelpModal from './HelpModal.vue';
   import dayjs from 'dayjs';
   import Icon from '/@/components/Icon/index';
   import AvatarDisplay from './AvatarDisplay.vue';
@@ -847,6 +865,7 @@
     visibleFields: FieldKey[];
     showListGroupView?: boolean;
     favoriteIdMap?: Map<string, string>;
+    loading?: boolean;
   }>();
 
   const emit = defineEmits<{
@@ -873,11 +892,18 @@
     'delete-list': [listId: string];
     'rename-group': [groupId: string, newName: string];
     'delete-group': [groupId: string];
+    'create-list': [];
   }>();
 
   const userStore = useUserStore();
   const { createConfirm } = useMessage();
 
+  const helpModalOpen = ref(false);
+
+  function onCreateListClick() {
+    emit('create-list');
+  }
+
   const showNewTaskInput = ref<string | null>(null);
   const newTaskTitle = ref('');
   const showNewGroupInput = ref(false);
@@ -1202,8 +1228,12 @@
     return false;
   }
 
+  const taskContentFieldConfigs = computed(() => {
+    return FIELD_CONFIG.filter((f) => f.key !== 'listName');
+  });
+
   const visibleFieldConfigs = computed(() => {
-    return FIELD_CONFIG.filter((f) => props.visibleFields.includes(f.key));
+    return taskContentFieldConfigs.value.filter((f) => props.visibleFields.includes(f.key));
   });
 
   const totalFieldsWidth = computed(() => {
@@ -1871,6 +1901,36 @@
     justify-content: space-between;
   }
 
+  .content-header-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .content-header-row-left {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .add-list-btn {
+    color: #888;
+    font-size: 16px;
+    padding: 0 4px;
+    &:hover {
+      color: #1677ff;
+    }
+  }
+
+  .help-btn {
+    color: #888;
+    font-size: 18px;
+    &:hover {
+      color: #1677ff;
+    }
+  }
+
   .content-header-actions {
     display: flex;
     align-items: center;